优化基础组件行为与样式

src/components/range/index.vue

@@ -52,10 +52,9 @@ export default {
   methods: {
 
     toChangeNum(tmp){
-      
-        let max = [0,0]
+        let fallInRange = [0,0]
         if (this.isLegal) {
-          max = this.gradientArr.find(item=>{
+          fallInRange = this.gradientArr.find(item=>{
             return tmp >= item[0] && tmp < item[1]
           })
         }
@@ -65,8 +64,19 @@ export default {
           return 
         }
 
-        return Number(this.isLegal ? (max ? max[1] : tmp) : tmp)
-
+        if (this.isLegal) {
+          if (fallInRange) {
+            if (tmp >= ((fallInRange[1] + fallInRange[0]) / 2)) {
+              return Number(fallInRange[1])
+            } else {
+              return Number(fallInRange[0])
+            }
+          } else {
+            return Number(tmp)
+          }
+        } else {
+          return Number(tmp)
+        }
     },
     clickHandle(ev) {
       let tmp = this.min + this.len * (ev.offsetX / this.width)
@@ -134,22 +144,25 @@ export default {
   margin: 10px 0;
   position: relative;
   width: 100%;
-  height: 4px;
+  height: 6px;
   cursor: pointer;
-  border: 1px solid #5d5d5d;
+  border-radius: 3px;
+  background: #1A1B1D;
+  border: 1px solid #404040;
 
   >.percentage {
-    height: calc(100% + 2px);
+    height: 100%;
     background-color: @color;
     position: absolute;
-    top: -1px;
+    top: 0;
     left: 0;
+    border-radius: 3px;
   }
 
   >.bar {
     position: absolute;
-    height: 15px;
-    width: 15px;
+    height: 20px;
+    width: 20px;
     background-color: #ffffff;
     position: absolute;
     border-radius: 50%;

src/components/rangeItem/index.vue

@@ -10,8 +10,11 @@
       </div>
       <Range :isGradient='current.gradient' :min="current.min" :max="current.max" v-model="current.value" />
       <div class="minmax">
-        <span class="title">{{current.min}}{{current.unit}}<span class="ui-remark" v-if="current.tip"> （不显示）</span></span>
-        <span class="title">{{current.max}}{{current.unit}}</span>
+        <span>
+          {{current.min}}{{current.unit}}
+          <span v-if="current.tip"> （不显示）</span>
+        </span>
+        <span>{{current.max}}{{current.unit}}</span>
       </div>
     </template>
   </div>
@@ -52,45 +55,43 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.item {
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 4px;
-
-  >span {
-    font-size: 14px;
-  }
-
-  >span:last-child {
-    font-size: 10px;
+.item-layer {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 14px;
+  .item {
     display: flex;
-    align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    
+    >span:last-child {
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-    >input {
-      width: 40px;
-      height: 24px;
-      padding: 4px 0;
-      text-align: center;
-      color: #fff;
-      letter-spacing: 0;
-      outline: none;
-      border: 1px solid #737373;
-      background-color: #000;
-      border-radius: 2px;
-      margin-right: 4px;
+      >input {
+        width: 40px;
+        height: 24px;
+        padding: 4px 0;
+        text-align: center;
+        color: #fff;
+        letter-spacing: 0;
+        outline: none;
+        border: 1px solid #737373;
+        background-color: #000;
+        border-radius: 2px;
+        margin-right: 4px;
+      }
     }
   }
-}
 
-.minmax{
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 4px;
-  .title{
-    font-size: 12px;
-    .ui-remark{
-      display: inline-block;
+  .minmax{
+    margin-top: 24px;
+    display: flex;
+    justify-content: space-between;
+    .title{
+      .ui-remark{
+        display: inline-block;
+      }
     }
   }
 }

src/components/shared/Switcher.vue

@@ -26,23 +26,20 @@ export default {
 <style lang="less" scoped>
 .com-switcher {
     position: relative;
-    width: 54px;
+    width: 50px;
     height: 24px;
-    background-color: rgb(0, 0, 0);
-    border: 2px solid #737373;
-    border-radius: 13px;
-    transition: background-color 0.2s;
-    transition-timing-function: linear;
+    background: #1A1B1D;
+    border: 1px solid #404040;
+    border-radius: 12px;
     cursor: pointer;
     > div {
-        top: 1px;
-        width: 18px;
-        height: 18px;
+        width: 22px;
+        height: 22px;
         background-color: #737373;
         border-radius: 11px;
         position: absolute;
-        transition: right 0.2s, color 0.2s;
-        right: 31px;
+        transition: right 0.2s, background-color 0.2s;
+        right: calc(50px - 22px - 2px);
         transition-timing-function: ease-in-out;
     }
     &.active {