|
@@ -1,7 +1,32 @@
|
|
|
<template>
|
|
<template>
|
|
|
<CustomNav title="首页" leftType="none" />
|
|
<CustomNav title="首页" leftType="none" />
|
|
|
<view class="content">
|
|
<view class="content">
|
|
|
-
|
|
|
|
|
|
|
+ <view class="hero">
|
|
|
|
|
+ <view class="hero-title">慢病管理APP</view>
|
|
|
|
|
+ <view class="hero-sub">长期管理 · 专业关怀 · 医患家属协同</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="cards">
|
|
|
|
|
+ <view class="card accent1">
|
|
|
|
|
+ <view class="card-header">健康数据</view>
|
|
|
|
|
+ <view class="card-body">记录并展示血压、血糖、心率与体格的历史趋势,帮助了解长期变化。</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="card accent2">
|
|
|
|
|
+ <view class="card-header">用药管理</view>
|
|
|
|
|
+ <view class="card-body">直观管理用药计划与提醒,支持服药记录与提醒设置,方便日常遵医嘱。</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="card accent3">
|
|
|
|
|
+ <view class="card-header">医患协同</view>
|
|
|
|
|
+ <view class="card-body">与主治医生和家属共享必要信息,支持随访和病情沟通。</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="card accent4">
|
|
|
|
|
+ <view class="card-header">预警与响应</view>
|
|
|
|
|
+ <view class="card-body">发现重要异常时提示用户与医生,便于及时跟进和处置。</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
<TabBar />
|
|
<TabBar />
|
|
|
</template>
|
|
</template>
|
|
@@ -56,4 +81,86 @@ onShow(() => {
|
|
|
height: calc(100vh - var(--status-bar-height) - 44px);
|
|
height: calc(100vh - var(--status-bar-height) - 44px);
|
|
|
background: #f7f8fa;
|
|
background: #f7f8fa;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.hero {
|
|
|
|
|
+ width: 92%;
|
|
|
|
|
+ max-width: 820px;
|
|
|
|
|
+ margin: 18px 0;
|
|
|
|
|
+ padding: 18px;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ background: linear-gradient(135deg, #ffffff 0%, #f5f8fb 100%);
|
|
|
|
|
+ box-shadow: 0 6px 18px rgba(20,36,50,0.06);
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+}
|
|
|
|
|
+.hero-title {
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ color: #0b3a66;
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+}
|
|
|
|
|
+.hero-sub {
|
|
|
|
|
+ color: #4b677e;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ margin-bottom: 14px;
|
|
|
|
|
+}
|
|
|
|
|
+.hero-actions {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+}
|
|
|
|
|
+.btn {
|
|
|
|
|
+ padding: 8px 14px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+}
|
|
|
|
|
+.btn.primary {
|
|
|
|
|
+ background: #2d8cf0;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+}
|
|
|
|
|
+.btn.outline {
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ color: #2d8cf0;
|
|
|
|
|
+ border: 1px solid #e1eefb;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.cards {
|
|
|
|
|
+ width: 92%;
|
|
|
|
|
+ max-width: 820px;
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ margin-bottom: 18px;
|
|
|
|
|
+}
|
|
|
|
|
+.card {
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ box-shadow: 0 6px 14px rgba(16,30,45,0.04);
|
|
|
|
|
+ min-height: 88px;
|
|
|
|
|
+}
|
|
|
|
|
+.card-header {
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ color: #103e63;
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+}
|
|
|
|
|
+.card-body {
|
|
|
|
|
+ color: #506b80;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ line-height: 1.4;
|
|
|
|
|
+}
|
|
|
|
|
+.card.highlight {
|
|
|
|
|
+ border-left: 4px solid #f39c12;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.card.accent1 { border-left: 6px solid #2d8cf0; }
|
|
|
|
|
+.card.accent2 { border-left: 6px solid #e76f51; }
|
|
|
|
|
+.card.accent3 { border-left: 6px solid #8e44ad; }
|
|
|
|
|
+.card.accent4 { border-left: 6px solid #f39c12; }
|
|
|
|
|
+
|
|
|
|
|
+.footer-note {
|
|
|
|
|
+ color: #8aa0b6;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ margin-bottom: 26px;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|