feat(health): 优化身高记录添加界面布局和交互

- 新增拖拽手柄和居中标题设计
- 表单区域限制在窄容器内提升可读性
- 刻度尺独立全屏显示便于操作
- 底部固定大尺寸保存按钮增强触控体验
- 调整模态框样式增加阴影和间距
- 更新输入框和选择器样式提升视觉效果
- 按钮样式优化增加圆角和阴影效果

src/pages/health/height.vue

@@ -40,26 +40,36 @@
     <view class="modal" v-if="showAdd">
       <view class="modal-backdrop" @click="closeAdd"></view>
       <view class="modal-panel">
-        <view class="modal-title">新增身高记录</view>
-        <view class="form-row">
-          <text>日期</text>
-          <picker mode="date" :value="pickerValue" @change="onAddDateChange">
-            <view class="picker-display">{{ addDateLabel }}</view>
-          </picker>
+        <!-- Drag handle -->
+        <view class="drag-handle" />
+        <view class="modal-header centered">
+          <view class="modal-title">新增身高记录</view>
         </view>
-        <view class="form-row">
-          <text>身高 (cm)</text>
-          <input type="number" v-model.number="addHeight" class="input" placeholder="请输入身高" />
+
+        <!-- 将表单与按钮限制在中间的窄容器，便于阅读和操作 -->
+  <view class="modal-inner">
+          <view class="form-row">
+            <text class="label">日期</text>
+            <picker mode="date" :value="pickerValue" @change="onAddDateChange">
+              <view class="picker-display">{{ addDateLabel }}</view>
+            </picker>
+          </view>
+
+          <view class="form-row">
+            <text class="label">身高 (cm)</text>
+            <input type="number" v-model.number="addHeight" class="input" placeholder="请输入身高" />
+          </view>
+
         </view>
 
-        <!-- 刻度尺：用于在添加时调整身高 -->
-        <view style="margin:12rpx 0">
+        <!-- 刻度尺：独立于 .modal-inner，保持屏幕全宽以便手指操作 -->
+        <view class="ruler-wrap">
           <ScaleRuler v-if="showAdd" :min="120" :max="220" :step="1" :gutter="16" :initialValue="addHeight ?? 170"
             @change="onAddRulerChange" @update:value="onAddRulerUpdate" />
         </view>
-
-        <view class="modal-actions">
-          <button class="btn-primary" @click="confirmAdd">保存</button>
+        <!-- 固定底部的大保存按钮（距离屏幕底部至少 100rpx） -->
+        <view class="fixed-footer">
+          <button class="btn-primary btn-full" @click="confirmAdd">保存</button>
         </view>
       </view>
     </view>
@@ -647,27 +657,39 @@ function confirmAdd() {
   background: #fff;
   border-top-left-radius: 18rpx;
   border-top-right-radius: 18rpx;
-  padding: 30rpx
+  padding: 28rpx 24rpx 140rpx 24rpx; /* leave space for fixed footer */
+  box-shadow: 0 -8rpx 30rpx rgba(0,0,0,0.12);
 }
 
 .modal-title {
-  font-size: 34rpx;
-  margin-bottom: 20rpx
+  font-size: 56rpx;
+  margin-block:  60rpx;
+  color: #222;
+  font-weight: 700;
+  letter-spacing: 1rpx;
+}
+
+.modal-inner {
+  max-width: 70%;
+  margin: 0 auto;
 }
 
 .form-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 18rpx
+  margin-bottom: 34rpx;
+  padding: 14rpx 0;
+  font-size: 32rpx;
 }
 
 .input {
-  width: 260rpx;
+  width: 240rpx;
   text-align: right;
-  padding: 8rpx;
-  border-radius: 8rpx;
-  border: 1rpx solid #eee
+  padding: 16rpx;
+  border-radius: 14rpx;
+  border: 1rpx solid #eee;
+  background: #fff7f0;
 }
 
 .picker-display {
@@ -676,22 +698,46 @@ function confirmAdd() {
 
 .modal-actions {
   display: flex;
-  justify-content: flex-end;
-  gap: 12rpx
+  justify-content: center;
+  gap: 12rpx;
+  margin-top: 18rpx;
 }
 
-.btn-muted {
-  background: #f0f0f0;
-  padding: 10rpx 20rpx;
-  border-radius: 8rpx
+.modal-actions.full {
+  padding: 6rpx 0 24rpx 0;
 }
 
 .btn-primary {
   background: #ff6a00;
   color: #fff;
-  padding: 10rpx 20rpx;
-  border-radius: 8rpx;
-  width: 300rpx;
-  margin-bottom: 80rpx;
+  padding: 18rpx 22rpx;
+  border-radius: 16rpx;
+  text-align: center;
+  width: 50%;
+  box-shadow: 0 10rpx 28rpx rgba(255,106,0,0.18);
+}
+
+
+/* Drag handle and header */
+.drag-handle {
+  width: 64rpx;
+  height: 6rpx;
+  background: rgba(0,0,0,0.08);
+  border-radius: 999px;
+  margin: 10rpx auto 14rpx auto;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  margin-bottom: 6rpx;
+}
+.label {
+  color: #666;
+}
+.ruler-wrap {
+  margin: 12rpx 0;
+  /* keep full width so ScaleRuler spans screen width */
 }
 </style>