Browse Source

upd: switch 修改内嵌文字标签样式

zjyau 5 years ago
parent
commit
59babf77a6
2 changed files with 25 additions and 7 deletions
  1. 9 3
      src/packages/switch/demo.vue
  2. 16 4
      src/packages/switch/switch.scss

+ 9 - 3
src/packages/switch/demo.vue

@@ -58,11 +58,17 @@
     </div>
     </div>
         <h4>内嵌文字标签</h4>
         <h4>内嵌文字标签</h4>
     <div>
     <div>
-      <nut-cell>
+            <nut-cell desc="开|关">
+        <span slot="title"><nut-switch :active="true" label="开|关"></nut-switch></span>
+      </nut-cell>
+      <nut-cell desc="ON|OFF">
         <span slot="title"><nut-switch :active="true" label="ON|OFF"></nut-switch></span>
         <span slot="title"><nut-switch :active="true" label="ON|OFF"></nut-switch></span>
       </nut-cell>
       </nut-cell>
-           <nut-cell>
-        <span slot="title"><nut-switch :active="false" label="通过|拒绝"></nut-switch></span>
+           <nut-cell desc="通 过 | 拒 绝">
+        <span slot="title"><nut-switch :active="false" label="通 过|拒 绝"></nut-switch></span>
+      </nut-cell>
+       <nut-cell desc="large尺寸, 打开的状态|禁用的状态">
+        <span slot="title"><nut-switch size="large" :active="false" label="打开的状态|禁用的状态"></nut-switch></span>
       </nut-cell>
       </nut-cell>
     </div>
     </div>
   </div>
   </div>

+ 16 - 4
src/packages/switch/switch.scss

@@ -12,13 +12,15 @@
     position:relative;
     position:relative;
     width:auto;
     width:auto;
     left:0;
     left:0;
-    margin-left:22px;
+    margin-left:20px;
+    margin-right:3px;
     display: inline-block !important;
     display: inline-block !important;
     padding:0 2px 0 2px  !important;
     padding:0 2px 0 2px  !important;
     text-align:center !important;
     text-align:center !important;
     color:#999 !important;
     color:#999 !important;
     font-style:normal !important;
     font-style:normal !important;
     font-size:12px;
     font-size:12px;
+    bottom: 2px;
   }
   }
   .nut-switch-btn {
   .nut-switch-btn {
     position: absolute;
     position: absolute;
@@ -33,7 +35,7 @@
   &.nut-switch-active {
   &.nut-switch-active {
     border-color: $border-color-active;
     border-color: $border-color-active;
    .nut-switch-label {
    .nut-switch-label {
-    left:0;
+    left:4px;
     margin-left:0px;
     margin-left:0px;
     color:red !important;
     color:red !important;
     margin-right:22px;
     margin-right:22px;
@@ -49,7 +51,7 @@
 
 
 .nut-switch-small {
 .nut-switch-small {
   height: 14px;
   height: 14px;
-  min-width: 36px;
+  min-width: 30px;
   .nut-switch-label {
   .nut-switch-label {
     font-size: 10px;
     font-size: 10px;
     top:-4px;
     top:-4px;
@@ -69,7 +71,7 @@
 
 
 .nut-switch-base {
 .nut-switch-base {
   height: 20px;
   height: 20px;
-  min-width: 46px;
+  min-width:38px;
   .nut-switch-btn {
   .nut-switch-btn {
     height: 20px;
     height: 20px;
     width: 22px;
     width: 22px;
@@ -83,14 +85,24 @@
 }
 }
 
 
 .nut-switch-large {
 .nut-switch-large {
+  
   height: 28px;
   height: 28px;
   min-width: 58px;
   min-width: 58px;
   font-size: 14px;
   font-size: 14px;
+  .nut-switch-label {
+    margin-right: 8px;
+    left: 6px;
+    top: 2px;
+   }
   .nut-switch-btn {
   .nut-switch-btn {
     height: 28px;
     height: 28px;
     min-width: 28px;
     min-width: 28px;
   }
   }
   &.nut-switch-active {
   &.nut-switch-active {
+    .nut-switch-label {
+      top:2px;
+      margin-right:30px;
+     }
     .nut-switch-btn {
     .nut-switch-btn {
       left: 100%;
       left: 100%;
       margin-left:-28px;
       margin-left:-28px;