From 6fbebc4d5454b7aef071522b731edd9518fbf866 Mon Sep 17 00:00:00 2001
From: duanzhijiang <duanzhijiang@kylinos.cn>
Date: Fri, 6 Jan 2023 18:10:21 +0800
Subject: [PATCH] =?UTF-8?q?BUG:=20#151665=20=E8=A7=A3=E5=86=B3=E5=A3=B0?=
 =?UTF-8?q?=E9=9F=B3=E9=9F=B3=E9=87=8F=E8=B0=83=E8=8A=82=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/slider/slider-styles.ts |  9 +++++++--
 src/components/slider/slider.ts        | 11 +++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/slider/slider-styles.ts b/src/components/slider/slider-styles.ts
index 1adc19b..99040bc 100644
--- a/src/components/slider/slider-styles.ts
+++ b/src/components/slider/slider-styles.ts
@@ -3,7 +3,7 @@ export const sharedStyles: CSSResult = css`
   :host {
     --cover-width: 0;
     --dot-move: 0;
-    --vWidth: var(--auto-16px);
+    --vWidth: var(--auto-8px);
     --vHeight: var(--auto-340px);
   }
   .content {
@@ -45,13 +45,18 @@ export const sharedStyles: CSSResult = css`
     height: var(--cover-width);
     left: 0px;
     bottom: 0px;
-    border-radius: 0 0 20px 20px;
+    border-radius: 0 0 var(--auto-20px) var(--auto-20px);
     background: #404040;
   }
+  #inner {
+    width: 96%;
+    background: none;
+  }
   .progress {
     width: var(--cover-width);
     height: var(--auto-6px);
     background: #4d4d4d;
+    border-radius: var(--auto-5px);
   }
   .dot {
     position: absolute;
diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts
index 5c17140..fa921ae 100644
--- a/src/components/slider/slider.ts
+++ b/src/components/slider/slider.ts
@@ -25,6 +25,7 @@ export class StarSlider extends LitElement {
   @query('.v-sliderBar') vSliderBar!: HTMLDivElement
   @query('.v-progress') vProgress!: HTMLDivElement
   @query('.dot') dot!: HTMLDivElement
+  @query('#inner') inner!: HTMLDivElement
   @query('p') p!: HTMLParagraphElement
 
   @property({type: Boolean}) disabled = false
@@ -92,8 +93,10 @@ export class StarSlider extends LitElement {
           <slot name="l-icon"></slot>
           <slot name="r-icon"></slot>
           <div class="sliderBar">
-            <div class="progress"></div>
-            <div class="dot"></div>
+            <div class="sliderBar" id="inner">
+              <div class="progress"></div>
+              <div class="dot"></div>
+            </div>
           </div>
         </div>
       `
@@ -164,7 +167,7 @@ export class StarSlider extends LitElement {
         }
       } else {
         this.style.setProperty('--dot-move', this.proportion + '%')
-        this.style.setProperty('--cover-width', this.proportion + '%')
+        this.style.setProperty('--cover-width', this.proportion + 1 + '%')
       }
       // 重新初始化防止滑块增量
       this.startX = evt.touches[0].clientX //手指点下的初始 X&Y 坐标
@@ -197,7 +200,7 @@ export class StarSlider extends LitElement {
       this.endValue = Math.ceil(this.proportion) + ''
       if (!this.tick) {
         this.style.setProperty('--dot-move', this.proportion + '%')
-        this.style.setProperty('--cover-width', this.proportion + '%')
+        this.style.setProperty('--cover-width', this.proportion + 1 + '%')
       } else {
         // tick跳格滑动
         var tickStep = 100 / parseInt(this.step) //分为几格