feat(scale-ruler): 优化刻度尺组件样式与交互逻辑

- 调整指示器结构，将三角形置于刻度线上方
- 修改刻度尺高度及边距，提升视觉效果
- 更新刻度线样式，区分长短刻度颜色与尺寸
- 优化指示线与数值框样式，增强可读性
- 调整数值文本颜色与字体大小
- 移除重复的三角形样式定义
- 微调滚动吸附算法参数计算顺序
- 删除页面中冗余的身高状态展示文本

src/components/scale-ruler.vue

@@ -15,8 +15,9 @@
     <!-- 中心指示器：上方显示当前值的方框，下方显示指向刻度的三角形 -->
     <view class="indicator">
       <view class="value-box"><text class="value-text">{{ currentValue }}</text></view>
-      <view class="indicator-line"></view>
       <view class="indicator-triangle"></view>
+      <view class="indicator-line"></view>
+
     </view>
   </view>
 </template>
@@ -108,9 +109,9 @@ function adjustScrollPosition() {
   // snap so the nearest tick is centered under the indicator
   const left = actualScrollLeft.value
   // compute number index under center
-    const numIndex = Math.round((left + halfWindow - offsetScroll.value - props.gutter / 2) / props.gutter)
-    // compute target scrollLeft that centers this index's center under the indicator
-    const targetLeft = offsetScroll.value + numIndex * props.gutter + props.gutter / 2 - halfWindow
+  const numIndex = Math.round((left + halfWindow - offsetScroll.value - props.gutter / 2) / props.gutter)
+  // compute target scrollLeft that centers this index's center under the indicator
+  const targetLeft = offsetScroll.value + numIndex * props.gutter + props.gutter / 2 - halfWindow
   // clamp to valid scroll range
   const maxScroll = Math.max(0, totalWidth.value - windowWidth)
   const clamped = Math.min(Math.max(targetLeft, 0), maxScroll)
@@ -122,8 +123,8 @@ function onTouchEnd() {
   adjustScrollPosition()
   // compute value and emit change
   const left = scrollLeft.value
-    const numIndex = Math.round((left + halfWindow - offsetScroll.value - props.gutter / 2) / props.gutter)
-    let value = numIndex * props.step + props.min
+  const numIndex = Math.round((left + halfWindow - offsetScroll.value - props.gutter / 2) / props.gutter)
+  let value = numIndex * props.step + props.min
   if (value < props.min) value = props.min
   if (value > props.max) value = props.max
   // 更新当前显示值（吸附后确定值）
@@ -136,12 +137,13 @@ function onTouchEnd() {
 .ruler-wrapper {
   position: relative;
   /* 增高以给刻度线下面留白 */
-  height: 120rpx;
+  height: 260rpx;
   display: flex;
   align-items: flex-start;
 }
 
 .ruler-scroll {
+  margin-top: 120rpx;
   width: 100%;
   height: 120rpx;
 }
@@ -159,25 +161,30 @@ function onTouchEnd() {
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding-top: 8rpx; /* 给刻度线一点顶部间距 */
+  padding-top: 8rpx;
+  /* 给刻度线一点顶部间距 */
 }
 
 
 /* 刻度线样式，短刻度和长刻度高度不同 */
 .tick {
   width: 2px;
-  height: 24rpx;
-  background: #ccc;
+  height: 40rpx;
+  background: #d5d5d5;
 }
+
 .tick.long {
-  height: 40rpx;
-  background: #333;
+  width: 3px;
+  margin-left: 2px;
+  height: 60rpx;
+  background: #414141;
 }
 
 .grid-num {
-  font-size: 24rpx;
+  font-size: 28rpx;
   color: #666;
-  margin-top: 8rpx; /* 刻度线下面的间距 */
+  margin-top: 8rpx;
+  /* 刻度线下面的间距 */
 }
 
 .indicator {
@@ -194,18 +201,31 @@ function onTouchEnd() {
 }
 
 .indicator-line {
-  width: 2px;
-  height: 60px; /* 可视为指示器从 value box 底部到 triangle 顶部的线长，可调整 */
+  width: 4px;
+  margin-top: -4px;
+  margin-left: 1px;
+  height: 15px;
+  /* 可视为指示器从 value box 底部到 triangle 顶部的线长，可调整 */
   background: #ff6a00;
-  margin-top: 8px;
+}
+
+.indicator-triangle {
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 10px solid #ff6a00;
+  /* 向上的三角形 */
+  margin-top: 60px;
 }
 
 .value-box {
+  margin-top: 20rpx;
   position: absolute;
-  top: -44px; /* 将方框放在指示线之上，距离可根据值框高度调整 */
+  /* 将方框放在指示线之上，距离可根据值框高度调整 */
   left: 50%;
   transform: translateX(-50%);
-  background: #ff6a00;
+  /* background: #ff6a00; */
   padding: 6rpx 12rpx;
   border-radius: 6rpx;
   display: flex;
@@ -214,17 +234,12 @@ function onTouchEnd() {
 }
 
 .value-text {
-  color: #fff;
-  font-size: 24px; /* 使用 24px 显示当前数值 */
+  color: #000000;
+  font-size: 28px;
+  font-weight: 900;
+  /* 使用 24px 显示当前数值 */
   line-height: 1;
 }
 
-.indicator-triangle {
-  width: 0;
-  height: 0;
-  border-left: 8px solid transparent;
-  border-right: 8px solid transparent;
-  border-top: 10px solid #ff6a00; /* 向下的三角形，颜色与指示线相同 */
-  margin-top: 4px;
-}
+
 </style>

src/pages/health/height.vue

@@ -53,7 +53,6 @@
 
         <!-- 刻度尺：用于在添加时调整身高 -->
         <view style="margin:12rpx 0">
-          <view class="ruler-status">当前身高：{{ addHeight ?? '--' }} cm</view>
           <ScaleRuler v-if="showAdd" :min="120" :max="220" :step="1" :gutter="16" :initialValue="addHeight ?? 170" @change="onAddRulerChange" @update:value="onAddRulerUpdate" />
         </view>