一个微信公众号的页面设计

2024-09-02 14:12
文章标签 设计 微信 页面 公众

本文主要是介绍一个微信公众号的页面设计,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在每天早上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">&nbsp; &bull;  科室收入统计</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">&nbsp; &bull;  统计报表</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 &copy; 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>

这篇关于一个微信公众号的页面设计的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1130176

相关文章

Mysql中设计数据表的过程解析

《Mysql中设计数据表的过程解析》数据库约束通过NOTNULL、UNIQUE、DEFAULT、主键和外键等规则保障数据完整性,自动校验数据,减少人工错误,提升数据一致性和业务逻辑严谨性,本文介绍My... 目录1.引言2.NOT NULL——制定某列不可以存储NULL值2.UNIQUE——保证某一列的每一

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

MyBatis设计SQL返回布尔值(Boolean)的常见方法

《MyBatis设计SQL返回布尔值(Boolean)的常见方法》这篇文章主要为大家详细介绍了MyBatis设计SQL返回布尔值(Boolean)的几种常见方法,文中的示例代码讲解详细,感兴趣的小伙伴... 目录方案一:使用COUNT查询存在性(推荐)方案二:条件表达式直接返回布尔方案三:存在性检查(EXI

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示

Redis迷你版微信抢红包实战

《Redis迷你版微信抢红包实战》本文主要介绍了Redis迷你版微信抢红包实战... 目录1 思路分析1.1hCckRX 流程1.2 注意点①拆红包:二倍均值算法②发红包:list③抢红包&记录:hset2 代码实现2.1 拆红包splitRedPacket2.2 发红包sendRedPacket2.3 抢

SpringBoot后端实现小程序微信登录功能实现

《SpringBoot后端实现小程序微信登录功能实现》微信小程序登录是开发者通过微信提供的身份验证机制,获取用户唯一标识(openid)和会话密钥(session_key)的过程,这篇文章给大家介绍S... 目录SpringBoot实现微信小程序登录简介SpringBoot后端实现微信登录SpringBoo

Python Selenium动态渲染页面和抓取的使用指南

《PythonSelenium动态渲染页面和抓取的使用指南》在Web数据采集领域,动态渲染页面已成为现代网站的主流形式,本文将从技术原理,环境配置,核心功能系统讲解Selenium在Python动态... 目录一、Selenium技术架构解析二、环境搭建与基础配置1. 组件安装2. 驱动配置3. 基础操作模