|
|
@@ -1,123 +1,310 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
|
-<head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <!--360浏览器优先以webkit内核解析-->
|
|
|
- <title>首页</title>
|
|
|
- <link rel="shortcut icon" href="favicon.ico">
|
|
|
- <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
|
|
|
- <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
|
|
|
- <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body class="gray-bg">
|
|
|
- <!--<div class="row border-bottom white-bg dashboard-header">
|
|
|
- <!–<div class="col-sm-12">
|
|
|
- <blockquote class="text-warning" style="font-size:14px">
|
|
|
-
|
|
|
- </blockquote>
|
|
|
-
|
|
|
- <hr>
|
|
|
- </div>–>
|
|
|
- <div class="col-sm-3">
|
|
|
- <h2>Hello</h2>
|
|
|
- <br>
|
|
|
- <!–<img th:src="@{/img/login-background.png}" width="100%" style="max-width:264px;">–>
|
|
|
- <br>
|
|
|
- </div>
|
|
|
- <div class="col-sm-5">
|
|
|
- </div>
|
|
|
- <div class="col-sm-4" hidden>
|
|
|
- <h4>技术选型：</h4>
|
|
|
- <ol>
|
|
|
- <li>核心框架：Spring Boot。</li>
|
|
|
- <li>安全框架：Apache Shiro。</li>
|
|
|
- <li>模板引擎：Thymeleaf。</li>
|
|
|
- <li>持久层框架：MyBatis。</li>
|
|
|
- <li>定时任务:Quartz。</li>
|
|
|
- <li>数据库连接池：Druid。</li>
|
|
|
- <li>工具类：Fastjson。</li>
|
|
|
- <li>更多……</li>
|
|
|
- </ol>
|
|
|
- </div>
|
|
|
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>患者随访系统 - 智慧医疗管理平台</title>
|
|
|
+ <link rel="shortcut icon" href="favicon.ico">
|
|
|
+ <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
|
|
|
+ <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
|
|
|
+ <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ background: linear-gradient(135deg, #0c1445 0%, #1a2980 50%, #26d0ce 100%);
|
|
|
+ min-height: 100vh;
|
|
|
+ font-family: 'Microsoft YaHei', Arial, sans-serif;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-section {
|
|
|
+ position: relative;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: radial-gradient(ellipse at center, rgba(26, 41, 128, 0.8) 0%, rgba(12, 20, 69, 0.9) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-content {
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+ z-index: 2;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-title {
|
|
|
+ font-size: 4rem;
|
|
|
+ font-weight: 300;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ text-shadow: 0 0 20px rgba(38, 208, 206, 0.5);
|
|
|
+ animation: glow 2s ease-in-out infinite alternate;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-subtitle {
|
|
|
+ font-size: 1.9rem;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ opacity: 0.9;
|
|
|
+ font-weight: 300;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-description {
|
|
|
+ font-size: 1.8rem;
|
|
|
+ max-width: 600px;
|
|
|
+ margin: 0 auto 3rem;
|
|
|
+ line-height: 1.6;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes glow {
|
|
|
+ from { text-shadow: 0 0 20px rgba(38, 208, 206, 0.5); }
|
|
|
+ to { text-shadow: 0 0 30px rgba(38, 208, 206, 0.8), 0 0 40px rgba(38, 208, 206, 0.3); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-cards {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ gap: 2rem;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-card {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 15px;
|
|
|
+ padding: 1.5rem;
|
|
|
+ width: 220px;
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-card:hover {
|
|
|
+ transform: translateY(-10px);
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ box-shadow: 0 10px 30px rgba(38, 208, 206, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-icon {
|
|
|
+ font-size: 2.5rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ color: #26d0ce;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-title {
|
|
|
+ font-size: 1.9rem;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-desc {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ opacity: 0.8;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floating-elements {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floating-element {
|
|
|
+ position: absolute;
|
|
|
+ background: rgba(38, 208, 206, 0.1);
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: float 6s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floating-element:nth-child(1) {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ top: 20%;
|
|
|
+ left: 10%;
|
|
|
+ animation-delay: 0s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floating-element:nth-child(2) {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ top: 60%;
|
|
|
+ right: 15%;
|
|
|
+ animation-delay: 2s;
|
|
|
+ }
|
|
|
|
|
|
- </div>-->
|
|
|
- <!--<div class="wrapper wrapper-content">
|
|
|
- <div class="row">
|
|
|
- <div class="col-sm-4">
|
|
|
- <div class="ibox-title">
|
|
|
- <h5>更新日志</h5>
|
|
|
- </div>
|
|
|
+ .floating-element:nth-child(3) {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ top: 80%;
|
|
|
+ left: 20%;
|
|
|
+ animation-delay: 4s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floating-element:nth-child(4) {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ top: 30%;
|
|
|
+ right: 30%;
|
|
|
+ animation-delay: 1s;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes float {
|
|
|
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
|
+ 50% { transform: translateY(-20px) rotate(180deg); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tech-stack {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 1rem;
|
|
|
+ color: white;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ max-width: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tech-stack h5 {
|
|
|
+ color: #26d0ce;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tech-item {
|
|
|
+ margin-bottom: 0.3rem;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .system-logo {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ color: white;
|
|
|
+ font-size: 3rem;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .system-logo i {
|
|
|
+ color: #26d0ce;
|
|
|
+ margin-right: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .hero-title { font-size: 2.5rem; }
|
|
|
+ .hero-subtitle { font-size: 1.5rem; }
|
|
|
+ .feature-cards {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 1rem;
|
|
|
+ }
|
|
|
+ .feature-card { width: 280px; }
|
|
|
+ .tech-stack { display: none; }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body>
|
|
|
+ <div class="hero-section">
|
|
|
+ <!-- 系统Logo -->
|
|
|
+ <div class="system-logo">
|
|
|
+ <i class="fa fa-heartbeat"></i>
|
|
|
+ 患者管理平台
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 技术栈信息 -->
|
|
|
+ <div class="tech-stack">
|
|
|
+ <h5><i class="fa fa-cogs"></i> 技术架构</h5>
|
|
|
+ <div class="tech-item">• Spring Boot 核心框架</div>
|
|
|
+ <div class="tech-item">• Apache Shiro 安全框架</div>
|
|
|
+ <div class="tech-item">• Thymeleaf 模板引擎</div>
|
|
|
+ <div class="tech-item">• MyBatis 持久层</div>
|
|
|
+ <div class="tech-item">• Quartz 定时任务</div>
|
|
|
+ <div class="tech-item">• Druid 连接池</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 浮动装饰元素 -->
|
|
|
+ <div class="floating-elements">
|
|
|
+ <div class="floating-element"></div>
|
|
|
+ <div class="floating-element"></div>
|
|
|
+ <div class="floating-element"></div>
|
|
|
+ <div class="floating-element"></div>
|
|
|
</div>
|
|
|
- <div class="col-sm-4">
|
|
|
- <div class="ibox float-e-margins">
|
|
|
- <div class="ibox-title">
|
|
|
- <h5>更新日志</h5>
|
|
|
+
|
|
|
+ <!-- 主要内容 -->
|
|
|
+ <div class="hero-content">
|
|
|
+ <h1 class="hero-title">患者随访系统</h1>
|
|
|
+ <p class="hero-subtitle">智慧医疗管理平台</p>
|
|
|
+ <p class="hero-description">
|
|
|
+ 专业的医疗处方管理和患者随访平台，集成处方登记管理、患者档案管理、
|
|
|
+ 随访任务管理和数据分析报表于一体，为医疗机构提供全方位的智能化解决方案
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 功能特色卡片 -->
|
|
|
+ <div class="feature-cards">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-icon">
|
|
|
+ <i class="fa fa-file-text-o"></i>
|
|
|
</div>
|
|
|
+ <div class="feature-title">处方管理</div>
|
|
|
+ <div class="feature-desc">规范化处方登记与审核管理</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="col-sm-4">
|
|
|
- <div class="ibox float-e-margins">
|
|
|
- <div class="ibox-title">
|
|
|
- <h5>hh</h5>
|
|
|
+
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-icon">
|
|
|
+ <i class="fa fa-users"></i>
|
|
|
</div>
|
|
|
+ <div class="feature-title">患者档案</div>
|
|
|
+ <div class="feature-desc">完整的患者信息与购药记录</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-icon">
|
|
|
+ <i class="fa fa-calendar-check-o"></i>
|
|
|
+ </div>
|
|
|
+ <div class="feature-title">随访任务</div>
|
|
|
+ <div class="feature-desc">智能化随访计划与任务管理</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-icon">
|
|
|
+ <i class="fa fa-bar-chart"></i>
|
|
|
+ </div>
|
|
|
+ <div class="feature-title">数据分析</div>
|
|
|
+ <div class="feature-desc">多维度业务数据分析报表</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>-->
|
|
|
- <br>
|
|
|
- <div class="col-sm-12 search-collapse" >
|
|
|
- <img th:src="@{/img/login-background1.jpg}" width="99%" height="74%" >
|
|
|
- </div>
|
|
|
- <div class="row border-bottom white-bg dashboard-header">
|
|
|
- <!--<div class="col-sm-12">
|
|
|
- <blockquote class="text-warning" style="font-size:14px">
|
|
|
-
|
|
|
- </blockquote>
|
|
|
-
|
|
|
- <hr>
|
|
|
- </div>-->
|
|
|
- <div class="col-sm-12 text-center">
|
|
|
- <br>
|
|
|
- <br>
|
|
|
- <h1>Welcome!</h1>
|
|
|
- <br>
|
|
|
- <!--<img th:src="@{/img/login-background.png}" width="100%" style="max-width:264px;">-->
|
|
|
- <br>
|
|
|
- </div>
|
|
|
- <div class="col-sm-5">
|
|
|
- </div>
|
|
|
- <div class="col-sm-4" >
|
|
|
- <!--<h4>技术选型：</h4>
|
|
|
- <ol>
|
|
|
- <li>核心框架：Spring Boot。</li>
|
|
|
- <li>安全框架：Apache Shiro。</li>
|
|
|
- <li>模板引擎：Thymeleaf。</li>
|
|
|
- <li>持久层框架：MyBatis。</li>
|
|
|
- <li>定时任务:Quartz。</li>
|
|
|
- <li>数据库连接池：Druid。</li>
|
|
|
- <li>工具类：Fastjson。</li>
|
|
|
- <li>更多……</li>
|
|
|
- </ol>-->
|
|
|
- </div>
|
|
|
+
|
|
|
+ <script th:src="@{/js/jquery.min.js}"></script>
|
|
|
+ <script th:src="@{/js/bootstrap.min.js}"></script>
|
|
|
+ <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+
|
|
|
+ // 功能卡片点击效果
|
|
|
+ $('.feature-card').click(function(){
|
|
|
+ $(this).addClass('animate__pulse');
|
|
|
+ setTimeout(() => {
|
|
|
+ $(this).removeClass('animate__pulse');
|
|
|
+ }, 600);
|
|
|
+ });
|
|
|
|
|
|
- </div>
|
|
|
- <script th:src="@{/js/jquery.min.js}"></script>
|
|
|
- <script th:src="@{/js/bootstrap.min.js}"></script>
|
|
|
- <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
|
|
|
- <script type="text/javascript">
|
|
|
- $('#pay-qrcode').click(function(){
|
|
|
- var html=$(this).html();
|
|
|
- parent.layer.open({
|
|
|
- title: false,
|
|
|
- type: 1,
|
|
|
- closeBtn:false,
|
|
|
- shadeClose:true,
|
|
|
- area: ['600px', '360px'],
|
|
|
- content: html
|
|
|
- });
|
|
|
- });
|
|
|
- </script>
|
|
|
-</body>
|
|
|
+ // 添加页面加载动画
|
|
|
+ $(document).ready(function(){
|
|
|
+ $('.hero-content').hide().fadeIn(1500);
|
|
|
+ $('.feature-cards').hide().delay(800).fadeIn(1000);
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
</html>
|
