Browse Source

fix: switch按钮大小调整

zongyue3 5 years ago
parent
commit
e4e42a7c89
2 changed files with 9 additions and 10 deletions
  1. 0 1
      src/packages/switch/demo.vue
  2. 9 9
      src/packages/switch/index.scss

+ 0 - 1
src/packages/switch/demo.vue

@@ -55,7 +55,6 @@ export default createDemo({
 
 <style lang="scss" scoped>
 .switch-adjust {
-  font-size: 18px;
   color: rgba(102, 102, 102, 1);
   justify-content: space-between;
   align-items: center;

+ 9 - 9
src/packages/switch/index.scss

@@ -1,10 +1,10 @@
 .nut-switch {
   display: flex;
   align-items: center;
-  width: 72px;
-  height: 42px;
+  width: 36px;
+  height: 21px;
   background-color: rgb(250, 63, 25, 1);
-  border-radius: 25px;
+  border-radius: 21px;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
@@ -13,9 +13,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 26px;
-    height: 26px;
-    border-radius: 13px;
+    width: 13px;
+    height: 13px;
+    border-radius: 7px;
     background: rgba(255, 255, 255, 1);
     transition: transform 0.3s;
     transform: translateX(30%);
@@ -29,9 +29,9 @@
 .switch-close {
   background-color: rgba(235, 235, 235, 1);
   .close-line {
-    width: 16px;
-    height: 4px;
+    width: 8px;
+    height: 2px;
     background: rgba(240, 240, 240, 1);
-    border-radius: 4px;
+    border-radius: 2px;
   }
 }