style(scale-ruler): 优化刻度尺组件样式和布局

- 简化模板结构，减少不必要的标签嵌套
- 为网格项添加右边框，增强视觉分隔效果
- 长刻度线使用更粗的边框以提高可读性
- 格式化 CSS 样式代码，提升代码整洁度
- 统一元素对齐方式，改善整体外观一致性

src/components/scale-ruler.vue

@@ -1,23 +1,10 @@
 <template>
   <view class="ruler-wrapper" v-show="visible">
-    <scroll-view
-      class="ruler-scroll"
-      scroll-x
-      :scroll-left="scrollLeft"
-      :scroll-with-animation="useAnimation"
-      @scroll="onScroll"
-      @touchend="onTouchEnd"
-      @touchcancel="onTouchEnd"
-      scroll-into-view=""
-    >
+    <scroll-view class="ruler-scroll" scroll-x :scroll-left="scrollLeft" :scroll-with-animation="useAnimation"
+      @scroll="onScroll" @touchend="onTouchEnd" @touchcancel="onTouchEnd" scroll-into-view="">
       <view class="ruler-inner" :style="{ width: totalWidth + 'px' }">
-        <view
-          v-for="(g, idx) in gridList"
-          :key="idx"
-          class="grid-item"
-          :class="{ long: g.isLongGrid }"
-          :style="{ width: props.gutter + 'px', height: g.showText ? '40px' : '24px' }"
-        >
+        <view v-for="(g, idx) in gridList" :key="idx" class="grid-item" :class="{ long: g.isLongGrid }"
+          :style="{ width: props.gutter + 'px', height: g.showText ? '40px' : '24px' }">
           <text v-if="g.showText" class="grid-num">{{ g.displayNum }}</text>
         </view>
       </view>
@@ -129,11 +116,49 @@ function onTouchEnd() {
 </script>
 
 <style scoped>
-.ruler-wrapper { position: relative; height: 80rpx; display:flex; align-items:center }
-.ruler-scroll { width: 100%; height: 80rpx }
-.ruler-inner { display:flex; align-items:flex-end }
-.grid-item { width: 10px; height: 24px; display:flex; align-items:flex-end; justify-content:center }
-.grid-item.long { height: 40px }
-.grid-num { font-size: 24rpx; color: #666 }
-.indicator { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2px; height: 100%; background: #ff6a00 }
+.ruler-wrapper {
+  position: relative;
+  height: 80rpx;
+  display: flex;
+  align-items: center
+}
+
+.ruler-scroll {
+  width: 100%;
+  height: 80rpx
+}
+
+.ruler-inner {
+  display: flex;
+  align-items: flex-end
+}
+
+.grid-item {
+  width: 10px;
+  height: 24px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  border-right: 1px solid #ccc
+}
+
+.grid-item.long {
+  height: 40px;
+  border-right: 2px solid #333
+}
+
+.grid-num {
+  font-size: 24rpx;
+  color: #666
+}
+
+.indicator {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  width: 2px;
+  height: 100%;
+  background: #ff6a00
+}
 </style>