Răsfoiți Sursa

style(health): 更新健康页面菜单项样式

- 将菜单箭头文本替换为 uni-icons 组件
- 调整菜单文本和数值的字体大小
- 优化菜单箭头样式,设置固定宽高和居中对齐
- 统一菜单项的视觉样式
mcbaiyun 2 luni în urmă
părinte
comite
88767aeb91
1 a modificat fișierele cu 15 adăugiri și 9 ștergeri
  1. 15 9
      src/pages/health/health.vue

+ 15 - 9
src/pages/health/health.vue

@@ -6,32 +6,32 @@
         <view class="menu-item" @click="openDetail('height')">
           <text class="menu-text">身高</text>
           <text class="menu-value">--</text>
-          <text class="menu-arrow">›</text>
+          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
         </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>
+          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
         </view>
         <view class="menu-item" @click="openDetail('bmi')">
           <text class="menu-text">BMI</text>
           <text class="menu-value">--</text>
-          <text class="menu-arrow">›</text>
+          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
         </view>
         <view class="menu-item" @click="openDetail('blood-pressure')">
           <text class="menu-text">血压</text>
           <text class="menu-value">--</text>
-          <text class="menu-arrow">›</text>
+          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
         </view>
         <view class="menu-item" @click="openDetail('blood-glucose')">
           <text class="menu-text">血糖</text>
           <text class="menu-value">--</text>
-          <text class="menu-arrow">›</text>
+          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
         </view>
         <view class="menu-item" @click="openDetail('heart-rate')">
           <text class="menu-text">心率</text>
           <text class="menu-value">--</text>
-          <text class="menu-arrow">›</text>
+          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
         </view>
       </view>
     </view>
@@ -90,7 +90,13 @@ const openDetail = (type: string) => {
 
 .menu-item:last-child { border-bottom: none }
 
-.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 }
+.menu-text { font-size: 32rpx; color: #000000; flex: 1 }
+.menu-value { font-size: 28rpx; color: #5a5a5a; margin-right: 10rpx }
+.menu-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44rpx;
+  height: 44rpx;
+}
 </style>