|
|
@@ -0,0 +1,481 @@
|
|
|
+<!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>
|
