本文主要是介绍一个微信公众号的页面设计，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在每天早上4点自动生成前一天的统计数据。保存为静态页面。用于快速显示。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><!--如果是IE 就以标准渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1; charset=utf-8" /><!-- 视窗——————响应式布局 --><meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0' /><!--当前页面的三要素--><title></title> <link rel="icon" href="images/favicon.ico" type="image/x-icon" /><!-- 引入CSS文件 --><link rel="stylesheet" type="text/css" href="css/index.css" /><!-- 公共样式 --><link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body><div id='container' class='container'><div class="top"><img src="images/hImg.jpg" alt="" width="100%" class="t_img" /></div><div class="middle middle_con"><div class='wrap'><div class="scroll_wrap"><div class="scroll_img"><img src="images/news.png" alt=""></div><div class="scroll_mar"><marquee behavior="scroll" direction="left">关于召开江西省医院协会医保管理专业委员会第六届学术年会的通知</marquee></div><div class="scroll_detail"><a href="">查看详情</a></div></div><div class="tabs"><span class="tabs_wrap"><span class="sty">运营概览</span><span>最新动态</span><span>常用功能</span></span></div><div class="tabs_content"><div class="tabs_list gailan"><p class="gl_tips">截止<span id="nowtime">2020-02-02 11:52</span>全院数据统计</p><div class="detail4"><div class="list4"><p class="color1">较前日+<span class="add_num1">110</span></p><p class="num num1 color1">0</p><div class="text">昨日收入</div></div><div class="list4"><p class="color2">较前日+<span class="add_num2">110</span></p><p class="num num2 color2">0</p><div class="text">昨日门诊</div></div><div class="list4"><p class="color3">较前日+<span class="add_num3">110</span></p><p class="num num3 color3">0</p><div class="text">在院病人</div></div><div class="list4"><p class="color4">较前日+<span class="add_num4">110</span></p><p class="num num4 color4">0</p><div class="text">昨日手术</div></div></div><div class="t_common"><div class="tit_common" style="border-bottom: 1px solid #dfdddd;"><span class="tit_con"> • 科室收入统计</span></div><div id="chart1" style="width: 100%; height: 6.5rem;"></div><div style="width: 100%;"><table class="table-data" style="width: 100%;"><tr class="tr-data"><td class="td-left">内科</td><td class="td-right">400万 </td></tr><tr class="tr-data"><td class="td-left">体检科</td><td class="td-right">335万 </td></tr><tr class="tr-data"><td class="td-left">普外科</td><td class="td-right">310万 </td></tr><tr class="tr-data"><td class="td-left">心内科</td><td class="td-right">274万 </td></tr><tr class="tr-data"><td class="td-left">其他</td><td class="td-right">235万 </td></tr></table></div></div><div class="t_common"><div class="tit_common"><!-- <span class="tit_icon"></span> --><span class="tit_con"> • 统计报表</span></div><div style="width: 100%;"><table class="table-data" style="width: 100%;"><tr class="tr-data"><td class="td-left">医院经营数据总报表</td></tr><tr class="tr-data"><td class="td-left">门诊操作员交款报表</td></tr><tr class="tr-data"><td class="td-left">门诊交款日报表汇总</td></tr><tr class="tr-data"><td class="td-left">门诊处方统计表</td></tr><tr class="tr-data"><td class="td-left">门诊收入分类别统计报表</td></tr><tr class="tr-data"><td class="td-left">门诊工作量统计表</td></tr><tr class="tr-data"><td class="td-left">门诊药品销售排行表</td></tr><tr class="tr-data"><td class="td-left">门诊医师用药统计</td></tr><tr class="tr-data"><td class="td-left">医技科室收入统计报表</td></tr><tr class="tr-data"><td class="td-left">门诊科室收入报表</td></tr><tr class="tr-data"><td class="td-left">门诊医生收入报表</td></tr><tr class="tr-data"><td class="td-left">住院科室结算实收报表</td></tr><tr class="tr-data"><td class="td-left">挂号药房报表</td></tr><tr class="tr-data"><td class="td-left">毛利计算报表</td></tr><tr class="tr-data"><td class="td-left">智能采购报表</td></tr></table></div></div><div style="bottom: 0; height: 0.35rem; width: 100%; border-top: 1px solid #dfdddd;"></div></div></div></div><div style="max-width: 750px; margin: auto; position: fixed; bottom: 0; line-height: 0.35rem; height: 0.35rem; width: 100%; border-top: 1px solid #dfdddd; text-align: center; background-color: white;"><span style="font-family: arial; font-size: 0.15rem">Copyright © All Rights Reserved. </span></div></div></div><!-- container结束 --><!-- 引入响应式布局的rem根标签 --><script>(function (win, doc) {var docEl = doc.documentElement || document.body;//获取HTML标签var container = doc.getElementById('container');//container元素 var resize = 'onorientationchange' in win ? 'orientationchange' : 'resize';function rem() {docEl.style.fontSize = 100 * (container.clientWidth / 750) + 'px';}doc.addEventListener('DOMContentLoaded', rem, false);win.addEventListener(resize, rem, false);})(window, document);</script><script type='text/javascript' src='js/jquery-3.2.1.js'></script><script type='text/javascript' src='js/echarts.min.js'></script><script type='text/javascript' src='js/china.js'></script><script type='text/javascript' src='js/index.js'></script>
</body>
</html>
这篇关于一个微信公众号的页面设计的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
