Bläddra i källkod

feat(health): 添加健康数据展示字段并优化样式

- 在健康页面菜单项中添加数值显示区域
- 更新菜单项布局,支持左侧标题、中间数值、右侧箭头排列
- 调整字体大小和颜色以提升可读性
- 修改样式作用域为scoped以避免全局污染
- 引入PageTitle组件用于页面标题展示
mcbaiyun 2 månader sedan
förälder
incheckning
1b3cd5e25b
2 ändrade filer med 12 tillägg och 4 borttagningar
  1. 1 0
      src/components/CustomNav.vue
  2. 11 4
      src/pages/health/health.vue

+ 1 - 0
src/components/CustomNav.vue

@@ -22,6 +22,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import PageTitle from './PageTitle.vue';
 
 interface Props {
   title: string

+ 11 - 4
src/pages/health/health.vue

@@ -5,26 +5,32 @@
       <view class="menu-list">
         <view class="menu-item" @click="openDetail('height')">
           <text class="menu-text">身高</text>
+          <text class="menu-value">--</text>
           <text class="menu-arrow">›</text>
         </view>
         <view class="menu-item" @click="openDetail('weight')">
           <text class="menu-text">体重</text>
+          <text class="menu-value">80.0 公斤</text>
           <text class="menu-arrow">›</text>
         </view>
         <view class="menu-item" @click="openDetail('bmi')">
           <text class="menu-text">BMI</text>
+          <text class="menu-value">--</text>
           <text class="menu-arrow">›</text>
         </view>
         <view class="menu-item" @click="openDetail('blood-pressure')">
           <text class="menu-text">血压</text>
+          <text class="menu-value">--</text>
           <text class="menu-arrow">›</text>
         </view>
         <view class="menu-item" @click="openDetail('blood-glucose')">
           <text class="menu-text">血糖</text>
+          <text class="menu-value">--</text>
           <text class="menu-arrow">›</text>
         </view>
         <view class="menu-item" @click="openDetail('heart-rate')">
           <text class="menu-text">心率</text>
+          <text class="menu-value">--</text>
           <text class="menu-arrow">›</text>
         </view>
       </view>
@@ -46,7 +52,7 @@ const openDetail = (type: string) => {
 }
 </script>
 
-<style>
+<style scoped>
 .content {
   padding-top: calc(var(--status-bar-height) + 44px);
   min-height: 100vh;
@@ -76,7 +82,7 @@ const openDetail = (type: string) => {
 
 .menu-item {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   padding: 30rpx 40rpx;
   border-bottom: 1rpx solid #eee;
@@ -84,6 +90,7 @@ const openDetail = (type: string) => {
 
 .menu-item:last-child { border-bottom: none }
 
-.menu-text { font-size: 32rpx; color: #333 }
-.menu-arrow { font-size: 28rpx; color: #ccc }
+.menu-text { font-size: 36rpx; color: #000000; flex: 1 }
+.menu-value { font-size: 32rpx; color: #5a5a5a; margin-right: 10rpx }
+.menu-arrow { font-size: 36rpx; color: #737373 }
 </style>