From 41f128b7304c1f0775fa6aab136edeb4c1dde308 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Thu, 3 Aug 2023 17:47:40 +0800
Subject: [PATCH] wip(slider100): update style

---
 pages/component/slider-100/slider-100.uvue | 42 +++++++++++++++-------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/pages/component/slider-100/slider-100.uvue b/pages/component/slider-100/slider-100.uvue
index 8edfb533..f9f97da5 100644
--- a/pages/component/slider-100/slider-100.uvue
+++ b/pages/component/slider-100/slider-100.uvue
@@ -1,21 +1,24 @@
 <template>
   <view class="uni-padding-wrap">
-    <page-head :title="title"></page-head>
+    <slider class="first-slider" @changing="sliderChanging" :value="sliderValue"
+      :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
+      :show-value="true" />
     <view class="flex-row">
       <view class="flex-fill">
-        <view v-for="(_, index1) in 33" :key="index1">
-          <slider @changing="sliderChanging" :value="sliderValue" :block-size="15" :show-value="true" />
-        </view>
+        <slider v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
       </view>
       <view class="flex-fill">
-        <view v-for="(_, index2) in 33" :key="index2">
-          <slider @changing="sliderChanging" :value="sliderValue" :block-size="15" :show-value="true" />
-        </view>
+        <slider v-for="(_, index2) in 25" :key="index2" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
       </view>
       <view class="flex-fill">
-        <view v-for="(_, index3) in 33" :key="index3">
-          <slider @changing="sliderChanging" :value="sliderValue" :block-size="15" :show-value="true" />
-        </view>
+        <slider v-for="(_, index3) in 25" :key="index3" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
+      </view>
+      <view class="flex-fill">
+        <slider v-for="(_, index4) in 25" :key="index4" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
       </view>
     </view>
   </view>
@@ -26,13 +29,16 @@
     data() {
       return {
         title: 'slider 滑块 x 100',
-        sliderValue: 0
+        sliderValue: 50,
+        sliderBlockSize: 20,
+        sliderBackgroundColor: '#000000',
+        sliderActiveColor: '#FFCC33',
+        sliderBlockColor: '#8A6DE9'
       }
     },
     methods: {
       sliderChanging(e : SliderChangeEvent) {
         this.sliderValue = e.detail.value
-        console.log('value 发生变化：' + e.detail.value)
       }
     }
   }
@@ -42,7 +48,17 @@
   .flex-row {
     flex-direction: row;
   }
+
   .flex-fill {
     flex: 1;
   }
-</style>
+
+  .first-slider {
+    margin: 12px 0;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .slider {
+    margin: 2px 0.5px;
+  }
+</style>
\ No newline at end of file
-- 
GitLab