Bladeren bron

feat(index): 添加首页的英雄区域和卡片组件,展示健康管理功能

mcbaiyun 2 weken geleden
bovenliggende
commit
b41d51349e
2 gewijzigde bestanden met toevoegingen van 109 en 2 verwijderingen
  1. 108 1
      src/pages/public/index/index.vue
  2. 1 1
      src/pages/public/login/index.vue

+ 108 - 1
src/pages/public/index/index.vue

@@ -1,7 +1,32 @@
 <template>
   <CustomNav title="首页" leftType="none" />
   <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>
   <TabBar />
 </template>
@@ -56,4 +81,86 @@ onShow(() => {
   height: calc(100vh - var(--status-bar-height) - 44px);
   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>

+ 1 - 1
src/pages/public/login/index.vue

@@ -15,7 +15,7 @@
         <button class="role-btn" @click="onSelectRole(2)" :disabled="isLogging">医生</button>
       </view>
 
-      <view class="info-text">点击身份后会使用微信登录并向后端发送登录请求。控制台将打印后端返回的 token。</view>
+      <!-- <view class="info-text">点击身份后会使用微信登录并向后端发送登录请求。控制台将打印后端返回的 token。</view> -->
     </view>
 
     <view class="spacer bottom" />