|
@@ -1,481 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="zh-CN">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
- <title>灵犀问诊AI项目首页原型设计</title>
|
|
|
- <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
- <style>
|
|
|
- /* 苹果HIG风格基础设置 */
|
|
|
- :root {
|
|
|
- --ios-bg: #f2f2f7;
|
|
|
- --ios-card: #ffffff;
|
|
|
- --ios-primary: #007aff;
|
|
|
- --ios-danger: #ff3b30;
|
|
|
- --ios-warning: #ff9500;
|
|
|
- --ios-success: #34c759;
|
|
|
- --ios-text-primary: #1c1c1e;
|
|
|
- --ios-text-secondary: #636366;
|
|
|
- --ios-border: #d1d1d6;
|
|
|
- --ios-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
- }
|
|
|
-
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
|
- }
|
|
|
-
|
|
|
- body {
|
|
|
- background: var(--ios-bg);
|
|
|
- color: var(--ios-text-primary);
|
|
|
- line-height: 1.5;
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
- }
|
|
|
-
|
|
|
- /* 状态栏区域 */
|
|
|
- .status-bar {
|
|
|
- padding: 12px 16px 8px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- color: var(--ios-text-secondary);
|
|
|
- }
|
|
|
-
|
|
|
- .emergency-btn {
|
|
|
- position: fixed;
|
|
|
- top: 16px;
|
|
|
- right: 16px;
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- background: var(--ios-danger);
|
|
|
- border-radius: 22px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: white;
|
|
|
- box-shadow: var(--ios-shadow);
|
|
|
- z-index: 100;
|
|
|
- animation: pulse 2s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes pulse {
|
|
|
- 0%, 100% { transform: scale(1); }
|
|
|
- 50% { transform: scale(1.1); }
|
|
|
- }
|
|
|
-
|
|
|
- /* 用户信息卡 */
|
|
|
- .user-card {
|
|
|
- background: var(--ios-card);
|
|
|
- margin: 16px;
|
|
|
- padding: 20px;
|
|
|
- border-radius: 12px;
|
|
|
- box-shadow: var(--ios-shadow);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .user-avatar {
|
|
|
- width: 56px;
|
|
|
- height: 56px;
|
|
|
- background: linear-gradient(135deg, #64d2ff 0%, #5e5ce6 100%);
|
|
|
- border-radius: 28px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: white;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 500;
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .user-info {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .user-name {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .health-status {
|
|
|
- display: inline-block;
|
|
|
- padding: 4px 10px;
|
|
|
- background: #e5f9e7;
|
|
|
- color: var(--ios-success);
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- /* 症状输入区 */
|
|
|
- .symptom-input {
|
|
|
- margin: 0 16px 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .input-container {
|
|
|
- position: relative;
|
|
|
- background: var(--ios-card);
|
|
|
- border-radius: 12px;
|
|
|
- box-shadow: var(--ios-shadow);
|
|
|
- padding: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .input-field {
|
|
|
- width: 100%;
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- font-size: 16px;
|
|
|
- padding: 12px 16px;
|
|
|
- background: #f7f7f8;
|
|
|
- border-radius: 10px;
|
|
|
- color: var(--ios-text-primary);
|
|
|
- }
|
|
|
-
|
|
|
- .input-actions {
|
|
|
- display: flex;
|
|
|
- margin-top: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 8px;
|
|
|
- color: var(--ios-primary);
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn i {
|
|
|
- margin-right: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 紧急服务区 */
|
|
|
- .emergency-services {
|
|
|
- margin: 0 16px 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .section-title {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 16px;
|
|
|
- padding-left: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .service-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .service-card {
|
|
|
- background: var(--ios-card);
|
|
|
- border-radius: 12px;
|
|
|
- padding: 20px 16px;
|
|
|
- box-shadow: var(--ios-shadow);
|
|
|
- text-align: center;
|
|
|
- transition: transform 0.2s;
|
|
|
- }
|
|
|
-
|
|
|
- .service-card:active {
|
|
|
- transform: scale(0.98);
|
|
|
- }
|
|
|
-
|
|
|
- .service-icon {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: linear-gradient(135deg, #ffd426 0%, #ff375f 100%);
|
|
|
- border-radius: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: white;
|
|
|
- margin: 0 auto 12px;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .service-name {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .service-desc {
|
|
|
- font-size: 13px;
|
|
|
- color: var(--ios-text-secondary);
|
|
|
- }
|
|
|
-
|
|
|
- /* 健康数据区 */
|
|
|
- .health-data {
|
|
|
- margin: 0 16px 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .data-card {
|
|
|
- background: var(--ios-card);
|
|
|
- border-radius: 12px;
|
|
|
- padding: 16px;
|
|
|
- box-shadow: var(--ios-shadow);
|
|
|
- }
|
|
|
-
|
|
|
- .data-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .data-title {
|
|
|
- font-size: 17px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .data-more {
|
|
|
- color: var(--ios-primary);
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .data-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .data-item {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .data-value {
|
|
|
- font-size: 22px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .data-label {
|
|
|
- font-size: 13px;
|
|
|
- color: var(--ios-text-secondary);
|
|
|
- }
|
|
|
-
|
|
|
- /* 底部导航 */
|
|
|
- .tab-bar {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
- backdrop-filter: blur(20px);
|
|
|
- display: flex;
|
|
|
- padding: 10px 0;
|
|
|
- padding-bottom: calc(10px + env(safe-area-inset-bottom));
|
|
|
- border-top: 1px solid var(--ios-border);
|
|
|
- }
|
|
|
-
|
|
|
- .tab-item {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- color: var(--ios-text-secondary);
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-item.active {
|
|
|
- color: var(--ios-primary);
|
|
|
- }
|
|
|
-
|
|
|
- .tab-icon {
|
|
|
- font-size: 22px;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 医疗特殊样式 */
|
|
|
- .medical-warning {
|
|
|
- color: var(--ios-danger);
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .medical-normal {
|
|
|
- color: var(--ios-success);
|
|
|
- }
|
|
|
-
|
|
|
- /* 响应式调整 */
|
|
|
- @media (min-width: 768px) {
|
|
|
- body {
|
|
|
- max-width: 500px;
|
|
|
- margin: 0 auto;
|
|
|
- border-left: 1px solid var(--ios-border);
|
|
|
- border-right: 1px solid var(--ios-border);
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <!-- 状态栏 -->
|
|
|
- <div class="status-bar">
|
|
|
- <span id="current-time">下午2:30</span>
|
|
|
- <span><i class="fas fa-wifi"></i> 中国移动</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 紧急按钮 -->
|
|
|
- <button class="emergency-btn" id="emergencyBtn">
|
|
|
- <i class="fas fa-plus"></i>
|
|
|
- </button>
|
|
|
-
|
|
|
- <!-- 用户信息 -->
|
|
|
- <div class="user-card">
|
|
|
- <div class="user-avatar">张</div>
|
|
|
- <div class="user-info">
|
|
|
- <div class="user-name">下午好,张先生</div>
|
|
|
- <div class="health-status"><i class="fas fa-heartbeat"></i> 健康状况良好</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 症状输入 -->
|
|
|
- <div class="symptom-input">
|
|
|
- <div class="input-container">
|
|
|
- <input type="text" class="input-field" placeholder="描述症状或上传报告...">
|
|
|
- <div class="input-actions">
|
|
|
- <div class="action-btn">
|
|
|
- <i class="fas fa-microphone"></i> 语音
|
|
|
- </div>
|
|
|
- <div class="action-btn">
|
|
|
- <i class="fas fa-camera"></i> 拍照
|
|
|
- </div>
|
|
|
- <div class="action-btn">
|
|
|
- <i class="fas fa-history"></i> 历史
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 紧急服务 -->
|
|
|
- <div class="emergency-services">
|
|
|
- <h2 class="section-title">紧急服务</h2>
|
|
|
- <div class="service-grid">
|
|
|
- <div class="service-card" id="fastBtn">
|
|
|
- <div class="service-icon">
|
|
|
- <i class="fas fa-brain"></i>
|
|
|
- </div>
|
|
|
- <div class="service-name">卒中评估</div>
|
|
|
- <div class="service-desc">FAST快速筛查</div>
|
|
|
- </div>
|
|
|
- <div class="service-card" id="poisonBtn">
|
|
|
- <div class="service-icon" style="background: linear-gradient(135deg, #32d74b 0%, #0a84ff 100%);">
|
|
|
- <i class="fas fa-biohazard"></i>
|
|
|
- </div>
|
|
|
- <div class="service-name">中毒咨询</div>
|
|
|
- <div class="service-desc">24小时在线</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 健康数据 -->
|
|
|
- <div class="health-data">
|
|
|
- <h2 class="section-title">健康数据</h2>
|
|
|
- <div class="data-card">
|
|
|
- <div class="data-header">
|
|
|
- <div class="data-title">今日健康指标</div>
|
|
|
- <div class="data-more">更多 <i class="fas fa-chevron-right"></i></div>
|
|
|
- </div>
|
|
|
- <div class="data-grid">
|
|
|
- <div class="data-item">
|
|
|
- <div class="data-value medical-normal">72</div>
|
|
|
- <div class="data-label">心率</div>
|
|
|
- </div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="data-value">118/78</div>
|
|
|
- <div class="data-label">血压</div>
|
|
|
- </div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="data-value medical-warning">6.2</div>
|
|
|
- <div class="data-label">血糖</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 底部导航 -->
|
|
|
- <div class="tab-bar">
|
|
|
- <div class="tab-item active">
|
|
|
- <div class="tab-icon"><i class="fas fa-home"></i></div>
|
|
|
- <div>首页</div>
|
|
|
- </div>
|
|
|
- <div class="tab-item">
|
|
|
- <div class="tab-icon"><i class="fas fa-comment-medical"></i></div>
|
|
|
- <div>问诊</div>
|
|
|
- </div>
|
|
|
- <div class="tab-item">
|
|
|
- <div class="tab-icon"><i class="fas fa-pills"></i></div>
|
|
|
- <div>药品</div>
|
|
|
- </div>
|
|
|
- <div class="tab-item">
|
|
|
- <div class="tab-icon"><i class="fas fa-user-md"></i></div>
|
|
|
- <div>我的</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <script>
|
|
|
- // 更新时间显示
|
|
|
- function updateTime() {
|
|
|
- const now = new Date();
|
|
|
- const hours = now.getHours();
|
|
|
- const minutes = now.getMinutes().toString().padStart(2, '0');
|
|
|
- const period = hours >= 12 ? '下午' : '上午';
|
|
|
- const displayHours = hours > 12 ? hours - 12 : hours;
|
|
|
- document.getElementById('current-time').textContent = `${period}${displayHours}:${minutes}`;
|
|
|
- }
|
|
|
- setInterval(updateTime, 1000);
|
|
|
- updateTime();
|
|
|
-
|
|
|
- // 紧急按钮交互
|
|
|
- document.getElementById('emergencyBtn').addEventListener('click', function() {
|
|
|
- // iOS风格震动反馈
|
|
|
- if (window.navigator.vibrate) {
|
|
|
- window.navigator.vibrate([50, 50, 50]);
|
|
|
- }
|
|
|
-
|
|
|
- // 显示紧急菜单
|
|
|
- alert('已触发紧急联络\n将通知您的紧急联系人');
|
|
|
- });
|
|
|
-
|
|
|
- // 卒中评估按钮
|
|
|
- document.getElementById('fastBtn').addEventListener('click', function() {
|
|
|
- alert('FAST评估指南:\nF-面部下垂\nA-手臂无力\nS-言语困难\nT-及时就医');
|
|
|
- });
|
|
|
-
|
|
|
- // 中毒咨询按钮
|
|
|
- document.getElementById('poisonBtn').addEventListener('click', function() {
|
|
|
- alert('中毒应急处理:\n1. 立即脱离毒源\n2. 保留毒物样本\n3. 拨打120');
|
|
|
- });
|
|
|
-
|
|
|
- // 输入框聚焦效果
|
|
|
- const inputField = document.querySelector('.input-field');
|
|
|
- inputField.addEventListener('focus', function() {
|
|
|
- this.parentElement.style.boxShadow = '0 0 0 2px rgba(0, 122, 255, 0.3)';
|
|
|
- });
|
|
|
- inputField.addEventListener('blur', function() {
|
|
|
- this.parentElement.style.boxShadow = 'var(--ios-shadow)';
|
|
|
- });
|
|
|
-
|
|
|
- // 模拟健康数据更新
|
|
|
- setInterval(() => {
|
|
|
- const heartRate = Math.floor(65 + Math.random() * 10);
|
|
|
- const bloodPressure = `${110 + Math.floor(Math.random() * 10)}/${70 + Math.floor(Math.random() * 8)}`;
|
|
|
-
|
|
|
- document.querySelectorAll('.data-value')[0].textContent = heartRate;
|
|
|
- document.querySelectorAll('.data-value')[1].textContent = bloodPressure;
|
|
|
-
|
|
|
- // 心率异常提示
|
|
|
- if (heartRate > 75) {
|
|
|
- document.querySelectorAll('.data-value')[0].classList.add('medical-warning');
|
|
|
- document.querySelectorAll('.data-value')[0].classList.remove('medical-normal');
|
|
|
- } else {
|
|
|
- document.querySelectorAll('.data-value')[0].classList.remove('medical-warning');
|
|
|
- document.querySelectorAll('.data-value')[0].classList.add('medical-normal');
|
|
|
- }
|
|
|
- }, 3000);
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-</html>
|