diff --git a/css/app.css b/css/app.css
index 5becffa..aee3453 100644
--- a/css/app.css
+++ b/css/app.css
@@ -95,12 +95,17 @@ body {
 
 .nav a {
   text-decoration: none;
+  color: #fff;
 }
 
-.nav a:visited {
+.nav a:visited，a:active {
   color: #fff;
 }
 
+.nav .active a {
+  color: #1BC8F3;
+}
+
 .password-form {
   width: 800px;
 }
@@ -319,30 +324,39 @@ body {
 }
 
 #handle1 .rs-handle {
-  background-color: transparent;
-  border: 8px solid transparent;
-  border-right-color: black;
-  margin: -6px 0px 0px 14px !important;
-  border-width: 6px 104px 6px 4px;
+  background-color: #000000;
 }
 
 #handle1 .rs-handle:before {
   display: block;
   content: " ";
   position: absolute;
-  height: 22px;
-  width: 22px;
+  height: 94px;
+  width: 94px;
   background: black;
-  right: -11px;
-  bottom: -11px;
+  right: -47px;
+  bottom: -47px;
   border-radius: 100px;
+  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
+
 }
 
 #handle1 .rs-tooltip {
-  top: 75%;
+  top: 57px;
   font-size: 11px;
+  height: 40px;
+  width: 40px;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 25px;
+  background: #000;
+  color: white;
+  display: inline-block;
+box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
+
 }
 
+
 #handle1 .rs-tooltip div {
   text-align: center;
   background: orange;
@@ -353,14 +367,32 @@ body {
 }
 
 #handle1 .rs-range-color {
-  background-color: #DB5959;
+  background-color: #1BC8F3;
+  text-shadow:
+    0 0 7px #fff,
+    0 0 10px #fff,
+    0 0 21px #fff,
+    0 0 42px #0fa,
+    0 0 82px #0fa,
+    0 0 92px #0fa,
+    0 0 102px #0fa,
+    0 0 151px #0fa;
 }
 
 #handle1 .rs-path-color {
-  background-color: #F0C5C5;
+  background-color: #000;
+  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
+
 }
 
+.rs-border {
+  border: 1px solid #000 !important;
+  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
+}
 
+.rs-bg-color {
+  background-color: #1E1F21 !important;
+}
 
 .progress-4 {
   width: 120px;
@@ -410,25 +442,25 @@ body {
   border-top: 2px solid #000;
 }
 
-.redio-switche{
+.redio-switche {
   background-color: #000;
   padding: 2px;
   box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
   border-radius: 5px;
 }
 
-.redio-switche .btn-check:checked+.btn{
+.redio-switche .btn-check:checked+.btn {
   background-color: #1BC8F3;
   border: 0px;
   color: #1BC8F3;
   box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35)
 }
 
-.redio-switche .btn{
+.redio-switche .btn {
   color: #fff;
 }
 
-.volume-slider-box .volume-slider{
+.volume-slider-box .volume-slider {
   display: inline-block;
   width: 45px;
   position: relative;
@@ -528,15 +560,16 @@ body {
   background-image: url(../images/button.png);
 }
 
-.slider-value{
+.slider-value {
   border: none;
   background: #000;
   box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
-  color: #fff;
+  color: #555;
   border-radius: 5px;
+  font-size: 85%;
 }
 
-.slider-value:focus{
+.slider-value:focus {
   border: none;
   background: #000;
   box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
@@ -607,12 +640,13 @@ body {
 .volume-ruler .cm:nth-of-type(6) {
   top: 83.3333%;
 }
+
 .volume-ruler .cm:nth-of-type(7) {
   top: 100%;
 }
 
 
-.volume-ruler .cm>span{
+.volume-ruler .cm>span {
   position: absolute;
   right: -25px;
   top: -7px;
@@ -620,4 +654,81 @@ body {
   color: #555;
 }
 
+/* ============ */
+.item {
+  position: absolute;
+  width: 8px;
+  /* border-radius: 6px; */
+  background-color: #1f94ea;
+  -webkit-mask: linear-gradient(180deg, #000 70%, #0000 0) 0/20%;
+}  
 
+.music .one {
+  height: 100px;
+  transform: translateX(-60px);
+}
+.music .two {
+  height: 53px;
+  transform: translateX(-40px);
+}
+.music .three {
+  height: 36px;
+  transform: translateX(-20px);
+}
+.music .four {
+  height: 70px;
+  transform: translateX(0);
+}
+
+.music .five {
+  height: 30px;
+  transform: translateX(20px);
+}
+
+.music .six {
+  height: 40px;
+  transform: translateX(40px);
+}
+.music .seven {
+  height: 50px;
+  transform: translateX(60px);
+}
+
+@keyframes radius-animation {
+  100% {
+      height: 10px;
+      /* border-radius: 50%; */
+      filter: contrast(2);
+  }
+}
+
+
+.music .one {
+  animation: radius-animation .3s ease;
+}
+.music .two {
+  animation: radius-animation .6s ease;
+}
+.music .three {
+  animation: radius-animation .57s ease;
+}
+.music .four {
+  animation: radius-animation .52s ease;
+}
+.music .five {
+  animation: radius-animation .4s ease;
+}
+.music .six {
+  animation: radius-animation .3s ease;
+}
+.music .seven {
+  animation: radius-animation .7s ease;
+}
+
+
+.music .item {
+  animation-iteration-count: infinite;
+  -webkit-animation-iteration-count: infinite;
+  animation-direction: alternate;
+  -webkit-animation-direction: alternate; 
+}
\ No newline at end of file
diff --git a/volume.html b/volume.html
index df148a4..d9ac6b3 100644
--- a/volume.html
+++ b/volume.html
@@ -33,12 +33,206 @@
 
         <main class="px-3 d-flex justify-content-center">
             <div>
-                <div style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
+                <div class="d-flex">
+                    <div class="me-3"
+                        style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
+                        <div class="divider">
+                            <div class="divider-text"><span class="fw-bold">MIC 1</span></div>
+                        </div>
+                        <div class="p-3 d-flex justify-content-center">
+                            <div style="width: 250px;">
+                                <div class="d-flex justify-content-center align-items-center">
+                                    <div class="me-3">48V Phantom</div>
+                                    <div class="d-flex redio-switche">
+                                        <input type="radio" class="btn-check" name="options-base" id="option5"
+                                            autocomplete="off" checked>
+                                        <label class="btn" for="option5">ON</label>
+
+                                        <input type="radio" class="btn-check" name="options-base" id="option6"
+                                            autocomplete="off">
+                                        <label class="btn" for="option6">OFF</label>
+                                    </div>
+                                </div>
+                                <div class="volume-slider-container">
+                                    <div class="d-flex justify-content-center mt-3">
+                                        <div class="d-flex">
+                                            <div class="volume-slider-box">
+                                                <div class="volume-slider" data-slider-value="50">
+                                                    <input type="range" orient="vertical" min="0" max="100" step="0.1"
+                                                        value="30">
+                                                    <div class="range-slider-bar" style="height: calc(45% + 15px);">
+                                                    </div>
+                                                    <div class="range-slider-thumb" style="bottom: 45%;"></div>
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <section class="volume-ruler">
+                                                    <section class="cm">
+                                                        <span>0</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-10</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-20</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-30</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-40</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-50</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-60</span>
+                                                    </section>
+                                                </section>
+                                            </div>
+                                        </div>
+                                        <div class="ms-5" style="display: grid;grid-template-rows: 1fr 1fr 1fr;">
+                                            <div>
+                                                按钮1
+                                            </div>
+                                            <div>
+                                                按钮2
+                                            </div>
+                                            <div>
+                                                按钮3
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div class="slider-value-box">
+                                            <input class="slider-value" style="width: 50px;" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
+                        <div class="divider">
+                            <div class="divider-text"><span class="fw-bold">MIC 1</span></div>
+                        </div>
+                        <div class="p-3 d-flex justify-content-center">
+                            <div style="width: 320px;">
+                                <div class="d-flex justify-content-center align-items-center">
+                                    <div class="me-3">48V Phantom</div>
+                                    <div class="d-flex redio-switche">
+                                        <input type="radio" class="btn-check" name="options-base" id="option5"
+                                            autocomplete="off" checked>
+                                        <label class="btn" for="option5">ON</label>
+
+                                        <input type="radio" class="btn-check" name="options-base" id="option6"
+                                            autocomplete="off">
+                                        <label class="btn" for="option6">OFF</label>
+                                    </div>
+                                </div>
+                                <div class="volume-slider-container">
+                                    <div class="d-flex justify-content-center mt-3">
+                                        <div class="d-flex">
+                                            <div class="volume-slider-box">
+                                                <div class="volume-slider" data-slider-value="50">
+                                                    <input type="range" orient="vertical" min="0" max="100" step="0.1"
+                                                        value="30">
+                                                    <div class="range-slider-bar" style="height: calc(45% + 15px);">
+                                                    </div>
+                                                    <div class="range-slider-thumb" style="bottom: 45%;"></div>
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <section class="volume-ruler">
+                                                    <section class="cm">
+                                                        <span>0</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-10</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-20</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-30</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-40</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-50</span>
+                                                        <section class="mm"></section>
+                                                    </section>
+                                                    <section class="cm">
+                                                        <span>-60</span>
+                                                    </section>
+                                                </section>
+                                            </div>
+                                        </div>
+                                        <div>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div class="slider-value-box">
+                                            <input class="slider-value" style="width: 60px;" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row d-flex">
+                    <div class="col-12">
+                        <div class="music">
+                            <div class="item one"></div>
+                            <div class="item two"></div>
+                            <div class="item three"></div>
+                            <div class="item four"></div>
+                            <div class="item five"></div>
+                            <div class="item six"></div>
+                            <div class="item seven"></div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="progress-4"></div>
+                        <div class="box-inner">
+                            <div>
+                                <div class="row _slider_customizations cus_handle">
+                                    <div class="block">
+                                        <div class="cell">
+                                            <div id="handle1"></div>
+
+                                        </div>
+
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- <div class="d-flex justify-content-center">
+                <div class="me-3"
+                    style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
                     <div class="divider">
                         <div class="divider-text"><span class="fw-bold">MIC 1</span></div>
                     </div>
                     <div class="p-3 d-flex justify-content-center">
-                        <div style="width: 320px;">
+                        <div style="width: 250px;">
                             <div class="d-flex justify-content-center align-items-center">
                                 <div class="me-3">48V Phantom</div>
                                 <div class="d-flex redio-switche">
@@ -56,7 +250,8 @@
                                     <div class="d-flex">
                                         <div class="volume-slider-box">
                                             <div class="volume-slider" data-slider-value="50">
-                                                <input type="range" orient="vertical" min="0" max="60" step="0.1" value="30">
+                                                <input type="range" orient="vertical" min="0" max="100" step="0.1"
+                                                    value="30">
                                                 <div class="range-slider-bar" style="height: calc(45% + 15px);"></div>
                                                 <div class="range-slider-thumb" style="bottom: 45%;"></div>
                                             </div>
@@ -105,6 +300,92 @@
                         </div>
                     </div>
                 </div>
+                <div style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
+                    <div class="divider">
+                        <div class="divider-text"><span class="fw-bold">MIC 1</span></div>
+                    </div>
+                    <div class="p-3 d-flex justify-content-center">
+                        <div style="width: 320px;">
+                            <div class="d-flex justify-content-center align-items-center">
+                                <div class="me-3">48V Phantom</div>
+                                <div class="d-flex redio-switche">
+                                    <input type="radio" class="btn-check" name="options-base" id="option5"
+                                        autocomplete="off" checked>
+                                    <label class="btn" for="option5">ON</label>
+
+                                    <input type="radio" class="btn-check" name="options-base" id="option6"
+                                        autocomplete="off">
+                                    <label class="btn" for="option6">OFF</label>
+                                </div>
+                            </div>
+                            <div class="volume-slider-container">
+                                <div class="d-flex justify-content-center mt-3">
+                                    <div class="d-flex">
+                                        <div class="volume-slider-box">
+                                            <div class="volume-slider" data-slider-value="50">
+                                                <input type="range" orient="vertical" min="0" max="100" step="0.1"
+                                                    value="30">
+                                                <div class="range-slider-bar" style="height: calc(45% + 15px);"></div>
+                                                <div class="range-slider-thumb" style="bottom: 45%;"></div>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <section class="volume-ruler">
+                                                <section class="cm">
+                                                    <span>0</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-10</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-20</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-30</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-40</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-50</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-60</span>
+                                                </section>
+                                            </section>
+                                        </div>
+                                    </div>
+                                    <div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="slider-value-box">
+                                        <input class="slider-value" style="width: 60px;" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div>
+                    <div class="music">
+                        <div class="item one"></div>
+                        <div class="item two"></div>
+                        <div class="item three"></div>
+                        <div class="item four"></div>
+                        <div class="item five"></div>
+                        <div class="item six"></div>
+                        <div class="item seven"></div>
+                    </div>
+                </div>
                 <div class="form">
 
                     <div>
@@ -133,51 +414,8 @@
                             <button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
                         </div>
                     </div>
-                    <!-- <div class="border border-black m-6 password-form">
-                        <div class=" m-5 mx-auto form" style="width: 500px;">
-                            <div>
-                                <div class="container">
-
-                                    <div class="range-slider" data-slider-value="50">
-                                        <input type="range" orient="vertical" min="0" max="100" value="50">
-                                        <div class="range-slider__bar" style="height: calc(45% + 15px);"></div>
-                                        <div class="range-slider__thumb" style="bottom: 45%;">50%</div>
-                                    </div>
-
-                                    <div class="range-slider" data-slider-value="50">
-                                        <input type="range" orient="vertical" min="0" max="100" value="50">
-                                        <div class="range-slider__bar theme1" style="height: calc(45% + 15px);"></div>
-                                        <div class="range-slider__thumb" style="bottom: 45%;">50%</div>
-                                    </div>
-
-                                    <div class="range-slider" data-slider-value="50">
-                                        <input type="range" orient="vertical" min="0" max="100" value="50">
-                                        <div class="range-slider__bar theme2" style="height: calc(45% + 15px);"></div>
-                                        <div class="range-slider__thumb" style="bottom: 45%;">50%</div>
-                                    </div>
-
-                                    <div class="range-slider" data-slider-value="50">
-                                        <input type="range" orient="vertical" min="0" max="100" value="50">
-                                        <div class="range-slider__bar theme3" style="height: calc(45% + 15px);"></div>
-                                        <div class="range-slider__thumb" style="bottom: 45%;">50%</div>
-                                    </div>
-
-                                </div>
-                                <div class="ruleraxisy">
-                                    <ul class="scaley">
-                                        <li></li>
-                                        <li>50</li>
-                                        <li>100</li>
-                                        <li>150</li>
-                                        <li>200</li>
-                                        <li>250</li>
-                                        <li>300</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div> -->
                 </div>
+            </div> -->
         </main>
 
         <footer class="mt-auto text-white-50">
@@ -195,12 +433,12 @@
 
         function updateSlider(element) {
             if (element) {
-            
+
                 let parent = element.parentElement,
                     lastValue = parent.getAttribute('data-slider-value');
-let container = parent.parentElement.parentElement.parentElement.parentElement;
+                let container = parent.parentElement.parentElement.parentElement.parentElement;
 
-console.log(`${lastValue}===${element.value}}`)
+                console.log(`${lastValue}===${element.value}}`)
                 // if (lastValue === element.value) {
                 //     return; // No value change, no need to update then
                 // }
@@ -209,12 +447,15 @@ console.log(`${lastValue}===${element.value}}`)
                 let $thumb = parent.querySelector('.range-slider-thumb'),
                     $bar = parent.querySelector('.range-slider-bar'),
                     $value = container.querySelector('.slider-value')
-                    console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
+                console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
+                console.log(`===${((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight)}===`)
                 pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
 
+
+
                 $thumb.style.bottom = `${pct}%`;
                 $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
-                $value.value = `${element.value-60}`;
+                $value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
             }
         }
         return {
@@ -235,26 +476,25 @@ console.log(`${lastValue}===${element.value}}`)
     $("#handle1").roundSlider({
         sliderType: "min-range",
         editableTooltip: false,
-        radius: 105,
-        width: 16,
-        value: 38,
+        radius: 60,
+        width: 10,
+        value: 0,
         handleSize: 0,
         handleShape: "square",
-        circleShape: "custom-half",
-        startAngle: 0,
-        endAgle: 359.9
-        // startAngle: 315,
-        // tooltipFormat: "changeTooltip"
+        circleShape: "pie",
+        startAngle: 315,
+        tooltipFormat: "changeTooltip",
+        mouseScrollAction: true
     });
 
     function changeTooltip(e) {
         var val = e.value, speed;
-        if (val < 20) speed = "Slow";
-        else if (val < 40) speed = "Normal";
-        else if (val < 70) speed = "Speed";
-        else speed = "Very Speed";
+        // if (val < 20) speed = "Slow";
+        // else if (val < 40) speed = "Normal";
+        // else if (val < 70) speed = "Speed";
+        // else speed = "Very Speed";
 
-        return val + " km/h" + "<div>" + speed + "<div>";
+        // return val + " km/h" + "<div>" + speed + "<div>";
     }
 </script>