feat(scale-ruler): 调整刻度尺样式和尺寸

- 增加 ruler-wrapper 高度从 260rpx 到 520rpx
- 调整 ruler-scroll 的 margin-top 和 height
- 为滚动条添加隐藏样式以兼容不同浏览器
- 修改 tick 和 long tick 的高度及边距
- 增大 grid-num 字体大小并调整上下间距
- 注释掉部分元素的 margin-left 样式
- 调整 indicator-arrow 和 value-box 的顶部间距
- 增大 value-text 字体大小至 70rpx 并设为粗体

src/components/scale-ruler.vue

@@ -131,15 +131,22 @@ function onTouchEnd() {
 <style scoped>
 .ruler-wrapper {
   position: relative;
-  height: 260rpx;
+  height: 520rpx;
   display: flex;
   align-items: flex-start;
 }
 
 .ruler-scroll {
-  margin-top: 120rpx;
+  margin-top: 210rpx;
   width: 100%;
-  height: 120rpx;
+  height: 180rpx;
+  overflow-x: scroll;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.ruler-scroll::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
 }
 
 .ruler-inner {
@@ -160,21 +167,23 @@ function onTouchEnd() {
 
 .tick {
   width: 2px;
-  height: 40rpx;
+  margin-top: 10rpx;
+  height: 60rpx;
   background: #d5d5d5;
 }
 
 .tick.long {
   width: 3px;
-  margin-left: 2px;
-  height: 60rpx;
+  margin-top: 0rpx;
+  /* margin-left: 1px; */
+  height: 80rpx;
   background: #414141;
 }
 
 .grid-num {
-  font-size: 28rpx;
+  font-size: 36rpx;
   color: #666;
-  margin-top: 8rpx;
+  margin-block: 8rpx;
 
 }
 
@@ -194,7 +203,7 @@ function onTouchEnd() {
 .indicator-line {
   width: 4px;
   margin-top: -4px;
-  margin-left: 1px;
+  /* margin-left: 1px; */
   height: 15px;
   background: #ff6a00;
 }
@@ -205,11 +214,11 @@ function onTouchEnd() {
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-top: 10px solid #ff6a00;
-  margin-top: 60px;
+  margin-top: 100px;
 }
 
 .value-box {
-  margin-top: 20rpx;
+  margin-top: 70rpx;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -222,7 +231,7 @@ function onTouchEnd() {
 
 .value-text {
   color: #000000;
-  font-size: 28px;
+  font-size: 70rpx;
   font-weight: 900;
   line-height: 1;
 }