From e0b7d1e65f69f4f37256f968e311f0d80d8b3de3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Mon, 4 Mar 2024 10:31:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BF=BD=E8=B8=AA?=
 =?UTF-8?q?=E9=A1=B5=E6=97=B6=E9=97=B4=E8=BD=B4=E9=97=AE=E9=A2=98=EF=BC=9A?=
 =?UTF-8?q?1=E3=80=81=E5=88=9D=E5=A7=8B=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E6=97=B6=E5=85=89=E6=A0=87=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B0=E6=9C=80=E5=B7=A6=E4=BE=A7=EF=BC=9B2=E3=80=81?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=BD=B4=E5=AF=BC=E8=87=B4=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=87=BA=E7=8E=B0=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TimeLine.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/common/TimeLine.vue b/src/components/common/TimeLine.vue
index b6616942..15377766 100644
--- a/src/components/common/TimeLine.vue
+++ b/src/components/common/TimeLine.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="time-line">
     <div class="time-line-slider">
-      <el-slider v-model="currentTime" @change="onChange" :step="1" :max="timeLine.length" :format-tooltip="formatTooltip"/>
+      <el-slider v-model="currentTime" @change="onChange" :step="1" :max="timeLine.length>0?timeLine.length-1:99" :format-tooltip="formatTooltip"/>
     </div>
-    <div style="height: 10px"></div>
     <div class="time-line-container">
       <div v-for="(item, index) in timeLine" :key="index">
         <div v-if="item.showFlag" style="color: #666;">{{ item.time }}</div>
@@ -37,6 +36,7 @@ export default {
   watch: {
     timeFilter (n) {
       if (n) {
+        this.currentTime = 99
         this.getDate()
       }
     }
@@ -56,12 +56,12 @@ export default {
       const blockDom = document.getElementsByClassName('el-slider__button-wrapper')[0]
       if (blockDom) {
         this.$nextTick(() => {
-          blockDom.style.cssText += 'left: calc(99% - 6px);'
+          blockDom.style.cssText += 'left: 100%;'
           const markDom = document.getElementsByClassName('time-line-mark')[0]
           if (!markDom) {
             const childDiv = document.createElement('div')
             childDiv.className = 'time-line-mark'
-            childDiv.style.cssText += 'width: 0.5px;height: 40px;background: #000;margin-left: 18px;margin-top: -7px;'
+            childDiv.style.cssText += 'width: 0.5px;height: 40px;background: #000;margin-left: 8px;margin-top: -7px;'
             blockDom.appendChild(childDiv)
           }
         })
@@ -225,13 +225,14 @@ export default {
 <style scoped lang="scss">
 .time-line {
   width: 100%;
-  height: 50px !important;
+  height: 40px !important;
   padding: 0 6px;
   position: relative;
 
   .time-line-slider {
     position: absolute;
-    width: 100%;
+    width: calc(100% - 16px);
+    height: 40px;
     top: -6px;
 
     :deep .el-slider__runway {
@@ -239,10 +240,16 @@ export default {
       padding: 0 6px;
       height: 40px;
       background-color: rgba(0, 0, 0, 0);
+      margin: 0;
 
       .el-slider__bar {
         background-color: rgba(0, 0, 0, 0);
       }
+      .el-slider__button-wrapper {
+        width: 10px;
+        height: 10px;
+        margin-top: 7px;
+      }
 
       .el-slider__button {
         width: 0;