done

2025-10-20 02:31:21 +00:00 · 2017-03-07 15:00:05 +08:00
parent 847e509244 3e474ef451
commit fdf2868cc7
149 changed files with 3024 additions and 78304 deletions
--- a/packages/zanui-css/package.json
+++ b/packages/zanui-css/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@youzan/zanui-css",
-  "version": "0.0.8",
+  "version": "0.0.15",
  "description": "zanui css.",
  "main": "lib/index.css",
  "style": "lib/index.css",
--- a/packages/zanui-css/src/actionsheet.css
+++ b/packages/zanui-css/src/actionsheet.css
@@ -0,0 +1,9 @@
+@component-namespace zan {
+  @b actionsheet {
+  }
+}
+
+.actionsheet-float-bottom-enter,
+.actionsheet-float-bottom-leave-active {
+  transform: translate3d(-50%, 100%, 0);
+}
--- a/packages/zanui-css/src/button.css
+++ b/packages/zanui-css/src/button.css
@@ -1,4 +1,5 @@
-@import "./common/var.css";
+@import './common/var.css';
+@import './loading.css';

@component-namespace zan {
  @b button {
@@ -27,6 +28,10 @@
      opacity: .3;
    }

+    & + .zan-button {
+      margin-left: 10px;
+    }
+
    @m default {
      color: $button-default-color;
      background-color: $button-default-background-color;
@@ -73,16 +78,34 @@
      height: 22px;
      line-height: 20px;
      font-size: 10px;
+
+      & + .zan-button--mini {
+        margin-left: 5px;
+      }
    }

-    @when disabled {
+    @m disabled {
      color: $button-disabled-color;
      background-color: $button-disabled-background-color;
      border: 1px solid $button-disabled-border-color;
    }

-    @when block {
+    @m block {
      display: block;
+      width: 100%;
+    }
+
+    @m loading {
+      .zan-button__text {
+        display: none;
+      }
+    }
+
+    @e icon-loading {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
    }
  }
 }
--- a/packages/zanui-css/src/button_group.css
+++ b/packages/zanui-css/src/button_group.css
@@ -2,6 +2,7 @@
  display: inline-block;
  box-sizing: border-box;
  padding-right: 10px;
+  vertical-align: middle;
  &:last-child {
    padding-right: 0;
  }
@@ -14,12 +15,7 @@
  @b button-group {
    font-size: 0;

-    > .zan-button {
-      margin-right: 10px;
-      &::last-child {
-        margin-right: 0;
-      }
-    }
+
  }
  @b button-1 {
    @mixin button-wrap;
--- a/packages/zanui-css/src/cell.css
+++ b/packages/zanui-css/src/cell.css
@@ -5,6 +5,7 @@
  @b cell-group {
    padding-left: 10px;
    position: relative;
+    background-color: #fff;

    &::after {
      @mixin border-retina (top, bottom);
--- a/packages/zanui-css/src/checkbox.css
+++ b/packages/zanui-css/src/checkbox.css
@@ -2,7 +2,9 @@

@component-namespace zan {
  @b checkbox {
-    @when disabled {
+    overflow: hidden;
+
+    @m disabled {
      .zan-icon {
        color: #d1dbe5;
      }
@@ -12,6 +14,7 @@
      position: relative;
      height: 22px;
      margin-right: 15px;
+      float: left;
    }

    @e control {
@@ -26,6 +29,8 @@

    @e label {
      line-height: 22px;
+      margin-left: 37px;
+      display: block;
    }

    .zan-icon {
--- a/packages/zanui-css/src/col.css
+++ b/packages/zanui-css/src/col.css
@@ -0,0 +1,52 @@
+.zan-col {
+  float: left;
+  box-sizing: border-box;
+}
+.zan-col-1 { width: 4.166666666666667%; }
+.zan-col-2 { width: 8.333333333333334%; }
+.zan-col-3 { width: 12.5%; }
+.zan-col-4 { width: 16.666666666666668%; }
+.zan-col-5 { width: 20.833333333333336%; }
+.zan-col-6 { width: 25%; }
+.zan-col-7 { width: 29.166666666666668%; }
+.zan-col-8 { width: 33.333333333333336%; }
+.zan-col-9 { width: 37.5%; }
+.zan-col-10 { width: 41.66666666666667%; }
+.zan-col-11 { width: 45.833333333333336%; }
+.zan-col-12 { width: 50%; }
+.zan-col-13 { width: 54.16666666666667%; }
+.zan-col-14 { width: 58.333333333333336%; }
+.zan-col-15 { width: 62.50000000000001%; }
+.zan-col-16 { width: 66.66666666666667%; }
+.zan-col-17 { width: 70.83333333333334%; }
+.zan-col-18 { width: 75%; }
+.zan-col-19 { width: 79.16666666666667%; }
+.zan-col-20 { width: 83.33333333333334%; }
+.zan-col-21 { width: 87.5%; }
+.zan-col-22 { width: 91.66666666666667%; }
+.zan-col-23 { width: 95.83333333333334%; }
+.zan-col-24 { width: 100%; }
+.zan-col-offset-1 { margin-left: 4.166666666666667%; }
+.zan-col-offset-2 { margin-left: 8.333333333333334%; }
+.zan-col-offset-3 { margin-left: 12.5%; }
+.zan-col-offset-4 { margin-left: 16.666666666666668%; }
+.zan-col-offset-5 { margin-left: 20.833333333333336%; }
+.zan-col-offset-6 { margin-left: 25%; }
+.zan-col-offset-7 { margin-left: 29.166666666666668%; }
+.zan-col-offset-8 { margin-left: 33.333333333333336%; }
+.zan-col-offset-9 { margin-left: 37.5%; }
+.zan-col-offset-10 { margin-left: 41.66666666666667%; }
+.zan-col-offset-11 { margin-left: 45.833333333333336%; }
+.zan-col-offset-12 { margin-left: 50%; }
+.zan-col-offset-13 { margin-left: 54.16666666666667%; }
+.zan-col-offset-14 { margin-left: 58.333333333333336%; }
+.zan-col-offset-15 { margin-left: 62.50000000000001%; }
+.zan-col-offset-16 { margin-left: 66.66666666666667%; }
+.zan-col-offset-17 { margin-left: 70.83333333333334%; }
+.zan-col-offset-18 { margin-left: 75%; }
+.zan-col-offset-19 { margin-left: 79.16666666666667%; }
+.zan-col-offset-20 { margin-left: 83.33333333333334%; }
+.zan-col-offset-21 { margin-left: 87.5%; }
+.zan-col-offset-22 { margin-left: 91.66666666666667%; }
+.zan-col-offset-23 { margin-left: 95.83333333333334%; }
+.zan-col-offset-24 { margin-left: 100%; }
--- a/packages/zanui-css/src/common/var.css
+++ b/packages/zanui-css/src/common/var.css
@@ -20,9 +20,11 @@ $c-background: #f8f8f8;
 $button-primary-color: $c-white;
 $button-primary-background-color: $c-green-wx;
 $button-primary-border-color: #0a0;
+
 $button-default-color: $c-black;
 $button-default-background-color: $c-white;
 $button-default-border-color: #bbb;
+
 $button-danger-color: $c-white;
 $button-danger-background-color: #f44;
 $button-danger-border-color: #e33;
@@ -30,71 +32,3 @@ $button-danger-border-color: #e33;
 $button-disabled-color: $c-gray-dark;
 $button-disabled-background-color: $c-gray-light;
 $button-disabled-border-color: #cacaca;
-
-:root{
-
-  /* zan-index
- -------------------------- */
-  --index-normal: 1;
-  --index-top: 1000;
-  --index-popper: 2000;
-
-  /* Link
-  -------------------------- */
-  --link-color: #475669;
-  --link-hover-color: var(--color-primary);
-
-  /* Border
-  -------------------------- */
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-color-base: var(--color-grey);
-  --border-color-hover: #8492a6;
-  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
-  --border-radius-base: 4px;
-  --border-radius-small: 2px;
-  --border-radius-circle: 100%;
-  --shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
-
-  /* Box-shadow
-  -------------------------- */
-  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
-  --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
-
-  /* Fill
-  -------------------------- */
-  --fill-base: var(--color-white);
-
-  /* Font
-  -------------------------- */
-  --font-size-base: 14px;
-  --font-color-base: #1f2d3d;
-  --font-color-disabled-base: #bbb;
-
-  /* Size
-  -------------------------- */
-  --size-base: 14px;
-
-
-  /* Disable base
-  -------------------------- */
-  --disabled-fill-base: #EFF2F7;
-  --disabled-color-base: #bbb;
-  --disabled-border-base: #D3DCE6;
-
-  /* Icon
-  -------------------------- */
-  --icon-color: #666;
-
-  /* Button
-  -------------------------- */
-
-  --button-default-color: #656b79;
-  --button-default-background-color: #f6f8fa;
-  --button-default-plain-color: #5a5a5a;
-  --button-default-box-shadow: 0 0 1px #b8bbbf;
-  --button-primary-color: #fff;
-  --button-primary-background-color: #06BF04;
-  --button-danger-color: #fff;
-  --button-danger-background-color: #ef4f4f;
-}
--- a/packages/zanui-css/src/icon.css
+++ b/packages/zanui-css/src/icon.css
@@ -63,4 +63,4 @@
 .zan-icon-sign:before { content: '\e80d'; } /* '' */
 .zan-icon-store:before { content: '\e80e'; } /* '' */
 .zan-icon-topay:before { content: '\e80f'; } /* '' */
-.zan-icon-tosend:before { content: '\e810'; } /* '' */
+.zan-icon-tosend:before { content: '\e810'; } /* '' */
--- a/packages/zanui-css/src/image_preview.css
+++ b/packages/zanui-css/src/image_preview.css
@@ -0,0 +1,29 @@
+@component-namespace zan {
+  @b image-preview {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+
+    @e image {
+      display: block;
+      width: 100%;
+      height: auto;
+      transition: .2s;
+      position: absolute;
+      left: 0;
+
+      @m center {
+        top: 50%;
+        transform: translate3d(0, -50%, 0);
+      }
+
+      @m top {
+        top: 0;
+        transform: none;
+      }
+    }
+  }
+}
--- a/packages/zanui-css/src/index.css
+++ b/packages/zanui-css/src/index.css
@@ -2,7 +2,6 @@
  css组件库入口，组装成css组件库
 */
@import './button.css';
-@import './button_group.css';
@import './cell.css';
@import './card.css';
@import './dialog.css';
@@ -20,3 +19,7 @@
@import './tag.css';
@import './checkbox.css';
@import './tab.css';
+@import './col.css';
+@import './row.css';
+@import './image_preview.css';
+@import './actionsheet.css';
--- a/packages/zanui-css/src/loading.css
+++ b/packages/zanui-css/src/loading.css
@@ -3,16 +3,19 @@
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
+
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
 }
+
@keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
+
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
@@ -25,17 +28,41 @@
    height: 30px;
    line-height: 0;
    font-size: 0;
-  }
+  
+    @e spinner { 
+      display: inline-block;
+      height: 100%;
+      width: 100%;
+      
+      -webkit-animation: loading 0.8s linear;
+      -webkit-animation-iteration-count: infinite;
+      animation: loading 0.8s linear;
+      animation-iteration-count: infinite;

-  @b spinner { 
-    display: inline-block;
-    height: 100%;
-    width: 100%;
-    background: url('data:image/png;base64,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');
-    background-size: contain;
-    -webkit-animation: loading 0.8s linear;
-    -webkit-animation-iteration-count: infinite;
-    animation: loading 0.8s linear;
-    animation-iteration-count: infinite;
+      @m circle {
+        border-radius: 100%;
+        border: 3px solid transparent;
+        box-sizing: border-box;
+        &.zan-loading__spinner--black {
+          border-color: $c-gray;
+          border-top-color: $c-gray-darker;
+        }
+        &.zan-loading__spinner--white {
+          border-color: rgba(0, 0, 0, .5);
+          border-top-color: transparent;
+        }
+      }
+
+      @m gradient-circle {
+        &.zan-loading__spinner--black {
+          background: url('data:image/png;base64,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');
+          background-size: contain;
+        }
+        &.zan-loading__spinner--white {
+          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAACZBJREFUaAXNmm2opVUVx+dOpWmNWZNpFkNEqIW9OUU2YkaRlZXUh4ikF3JAiIpCKCxCCokwicIIsw99CJsiIT8kChXOFGmNNahYSBYTZo2mFaYzmqbefr8z539bZ8/znJd77sss+J+199prr7X+ez/7eZ57zl3YsEqyuLh4FKG3glPBi4c4Dr0JPAMsgIfBfnA/+DPYC24HNy8sLDyCXnEx6YoJJDcT7J3gbPAq8DSQHNEbsSn2xeJQV/t/sd0KrgfXQP4f6BWRFDFXMIi+hgDbwZngKSBkaG6oRNp+H+Hq9ySdneAKiP/KgXlkLsIQfR3JPw5OA4lVydqel3CN9xviXQrxG9HLkhQ502SIehY/Dd4OKqHEq0XGVv3MZz9j1b/PL5e+vteAL0D8XvRMkoRTT4Ksl+2lwJuP0hZYi6/t1m8ewuY9AC6A9M/sTCspYip/yH4Ix28A77IRV16slWQRXfAd1PSxWRJPtcMEPYKgnwfnDoM7L4uVGLUfmzrtOm4Y+xmbxi+XdFecHxDrQnb7UQOPkyTs9YHssxn8OngFqIVlblcBjrUF9vnhOhI3ftFtzr68e4hzHqTHPsIS1KSHyHBnv8bAy8vgWl++SR2i6bf6tRi+T81HtgO1P5Ywjp8Dkq0kbU8D3EYkc0aMpVN3MuaaV1t8urTjkvZq7JVewqzUB5jlW1OVWkBtVx/bday2W79J/bqrtd3Oq2PnUfsnWof0q2NsG5iwjY4r5Xh8XJy0qz22LF7Goh9i3i5wE9gH7hvC8eeB48GJ4CzwJuA9Q+nLV/PEbzCBj+S0/17O808yEK3DiED2uRiuBs8cDsSnJoqtJqjjTr0BfA/8lsSPa5gk5H4qPr69nQ/OAZPyJH/8mLL09HCht5J75OWkOurs7l6COhtkLLoSik2ddsZvw/ZVEt2CXrZQh+fxYqA2R+JHJ2+tofrZvpo6PoJeEo1LQpKtdL4JtGcselIi41xGgqtsrJRQ0wXE+iJw95VaR2pTp13H9T+Hmn5hQ4nToEPwK2m8ctD5/1h8aqAkyJiXz2cIPPdfM8PcI4q63ojhO+AY0NaBaWSD6rhjv6auN9tQMuil7F88vlzkrhqtXysZU0v2w6tF1sTE3oV6G3gQKFnotj0YbD5eD7c3xLZEGMP7YyxaQsGTtEX6avvu7F70qgo57iSBf3ObtyVsXy7CdotPYRvIgDAr4KPgdGAwJaTSHhg7Prw5rcpl3JHLnd6J3Xd6JeQO9ro/szBvhaOPwKVL2ruyASpRxyOxV30LBeyIw1ppcl5Brt3DfO1Otv2U5bcw77Mz2GH0WXaKSEwJwbQHxuHH5bWzxu2LyZfda1NrD68sgD7v8WMjW/109CnA89gFzAMJeX12stI+b9dFyO0OXwtCLpd31yI4Jk6H69E2vDPnGUfzEJGoJCP2f5jOOupvNblDPuYsQvp+g3qGxpNAdm+czkQfDbems476JnJbS71sLSf9Lr1Vwi8EEp0k+rjTN3JJTfVuPCngPOPDGq4nRruz9vvkZAlvGY5KZhrc3BdtHey7Sk65eDf20hUeU6E9OEXDc0B22NWRdC4HmofI3w+xrJ/hblJnR0Ourcbx8DtBJ+/SVRJA4kr60WO/Mzo4Zc0+95EpO6vuk9S+SaejQVZAXWEAiWfc/uFE+B7qkcw4stYceZY7nHObVWh1nLPj6R8O2lo9t9PKRlfGnyy7xF0Nyey6fpu7nNfJ9vwZ8y6EcMhlt7t0Yh9OhP0uLFdk6hunFyX8r3EeZSyLcnyxrXdzy4wFHJCwt/auHW1tT+AnXg0OF3nLjIXcLuG/gJxR9STxJXyWG8WkeMsapwZvuO+YcfK1Ev5TM6lvZ2M/Cv/600szfc26/mzrFxezyB4J/x74PxV1l9u2QSUc+7ka1ll6f13oqesx7L/cyEv4f2jcAbKDIVXnaVMyto1L6mUHTWv/Se5tZB38QT9D9t1wfdgdVvxTKxJS47SLsz0T1kF/ZRk5f+ScEN5F2z/5ssvq3JX79Ems9Jpf2uT8JLWdAWYRue1wgnc6vw18gEB7aPqzxiyynXl3M3+un1WmTUgub1QSvmvaOUO/G6jxPttLbykEO5X+l4YO41TOc3wO0LiIgD7PV02o70iCbwGpOXW0OjXEbv8e6nvERibb9teHL6NeOuh0fxjEOTWYnr6P+7vSqnz1Q11eiUeYCDF38rftgcPwIz5ewUvf0LSEfb5eUmY5qSWYQK026HcJfl2ZP3cTsv7HkPBeYk7vL+rkt69Exx6fx6nJuQMZIayFBBeiPCuRBGj7rT1B/4DjVSTxp5FlC3X4xcSxwBurZEI0edJnaGkh0lY7/gR1+Pxdki7Cvr1cDnyjqhKCXVpbrgQTKbvBT8GddYUd6BNIGmMTOA54Zo2Vp4faPNG2Rd8CMLThIXKnHvujZ3hg4YPEp6E+24wbXIk2kO0QrXb9Upg3Nc/274B/mQl/cdTfb1sk5uJK1MV2RyThC5E5fAsMcecYV9HHfhBiWYADkHXuiByywxmF9LtofzB9tIGVJGiJJlEWIn4WqO1RoI9ktakt6MFhf/9QezfVL4RdgErYOcZOHn2TK3o/ZDu/2MiLB3NGhQk/xvJzkCBJEsckzHjs6Xdp50QcV1w4YS3+FZa+bW3j7HUc14E81kfW0cGLx0G/zs9vYz0BvARYiJKiu3RIqHNJuwP6Zoe1i4jElGgv8exabM43v3HdcbU2dez6muPfoFdcoV4ZnoHLcPgjSAKTiCq13/rZl0Ck+mYRHctuaRMSiM12l93x2F2I+6m5xsc0KjpPFM6z3+SfD84ECSgRxX5s6pBT6+OZs50z6dlKX+1NTW3Bas+w89ytzK9aH/PkLNt2V++dRBafwQqqx4o7Da7EyRfwSs5CIrbrWGt3rCLj2aHo7GqXziXuXNvCXfXVMbkd65VJZ3hkIkGvY7f/hvGjIL9YhETIh7g7YNvzqnZn4kNzSSRWJaTUjjnPxTCP833FVHtF3EVN3uWnljbZxIkkuA2ni4AvForJ6+pmAbp0JVznGEdSqSe7rV1b+tEPYLtjVrIGM8Cyhd32PwfeDbyLh7ha5Ix5FiWXMxqdMxqt3XmtrleKZ3UvRMfeifHplbkIJyrET6btV6b52ieEqw6REGx1xlstYX/Pkqg7O5esCOFUAPFjaG8F/tX1AmD87FB0Syj9Ou659w/2feCvEHVxVkRWlHCtCPLeXF4ETgSbwbHAd2dzerOUqI8qH1M+mv4JvFTdTe+89eUE08rI/wCfdm58JaCP1gAAAABJRU5ErkJggg==');
+          background-size: contain;
+        }
+      }
+    }
  }
 }
--- a/packages/zanui-css/src/radio.css
+++ b/packages/zanui-css/src/radio.css
@@ -2,7 +2,9 @@

@component-namespace zan {
  @b radio {
-    @when disabled {
+    overflow: hidden;
+
+    @m disabled {
      .zan-icon {
        color: #d1dbe5;
      }
@@ -11,7 +13,7 @@
    @e input {
      position: relative;
      height: 22px;
-      margin-right: 15px;
+      float: left;
    }

    @e control {
@@ -26,6 +28,8 @@

    @e label {
      line-height: 22px;
+      display: block;
+      margin-left: 37px;
    }

    .zan-icon {
--- a/packages/zanui-css/src/row.css
+++ b/packages/zanui-css/src/row.css
@@ -0,0 +1,8 @@
+.zan-row {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  zoom: 1;
+}
--- a/packages/zanui-css/src/steps.css
+++ b/packages/zanui-css/src/steps.css
@@ -1,5 +1,150 @@
+@import "./common/var.css";
+@import "./mixins/ellipsis.css";
+
@component-namespace zan {
  @b steps {
-    color: red;
+    overflow: hidden;
+    padding: 0 10px;
+
+    @m 4 {
+      .zan-step {
+        width: 33.2%;
+      }
+    }
+
+    @m 3 {
+      .zan-step {
+        width: 50%;
+      }
+    }
+
+    @e icon {
+      font-size: 40px;
+      line-height: 1;
+      float: left;
+      margin-right: 10px;
+    }
+
+    @e message {
+      display: table;
+      height: 40px;
+      margin: 15px 0;
+
+      .zan-steps__message-wrapper {
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+
+    @e title {
+      font-size: 14px;
+      color: $c-black;
+    }
+
+    @e desc {
+      font-size: 12px;
+      line-height: 1.5;
+      color: $c-gray-dark;
+      max-height: 18px;
+      @mixin multi-ellipsis 1;
+    }
+
+    @e items {
+      margin: 0 0 10px;
+      overflow: hidden;
+      padding-bottom: 20px;
+      position: relative;
+    }
+  }
+
+  @b step {
+    font-size: 14px;
+    float: left;
+    position: relative;
+    color: $c-gray-dark;
+
+    @m finish {
+      color: $c-black;
+
+      .zan-step__circle,
+      .zan-step__line {
+        background-color: $c-green;
+      }
+    }
+
+    @m process {
+      color: $c-black;
+
+      .zan-step__circle-container {
+        top: 24px;
+      }
+
+      .zan-icon {
+        font-size: 12px;
+        color: $c-green;
+        line-height: 1;
+        display: block;
+      }
+    }
+
+    &:first-child {
+      .zan-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      position: absolute;
+      right: 10px;
+      width: auto;
+
+      .zan-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+
+      .zan-step__circle-container {
+        left: auto;
+        right: -8px;
+      }
+
+      .zan-step__line {
+        width: 0;
+      }
+    }
+
+    .zan-step__circle-container {
+      position: absolute;
+      top: 28px;
+      left: -8px;
+      padding: 0 8px;
+      background-color: #fff;
+      z-index: 1;
+    }
+
+    @e circle {
+      display: block;
+      width: 5px;
+      height: 5px;
+      background-color: #888;
+      border-radius: 50%;
+    }
+
+    @e title {
+      font-size: 12px;
+      transform: translate3d(-50%, 0, 0);
+      display: inline-block;
+      margin-left: 3px;
+    }
+
+    @e line {
+      position: absolute;
+      left: 0px;
+      top: 30px;
+      width: 100%;
+      height: 1px;
+      background-color: $c-gray-light;
+    }
  }
 }
--- a/packages/zanui-css/src/switch.css
+++ b/packages/zanui-css/src/switch.css
@@ -1,28 +1,32 @@
+@import "./mixins/border_retina.css";
+
@component-namespace zan {
  @b switch { 
-    height: 29px;
-    width: 49px;
+    height: 31px;
+    width: 51px;
    display: inline-block;
-    border-radius: 16px;
    position: relative;
-    border: 1px solid;
+    background: #fff;
+    border-radius: 16px;
+    &::after{
+      @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
+      border-width: 3px;
+      border-radius: 32px;
+    }

    @e node {
-      width: 27px;
-      height: 27px;
-      border-radius: 100%;
+      width: 28px;
+      height: 28px;
+      border-radius: 13.5px;
      background-color: #fff;
-      border: .5px solid rgba(0, 0, 0, .1);
      position: absolute;
      box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
-      @when on {
-        left: 20px;
-        transition: all .5s ease-in-out;
-      }
-
-      @when off {
-        left: 0;
-        transition: all .5s ease-in-out;
+      left: 1px;
+      top: 1px;
+      z-index: 2;
+      &::after {
+        @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
+        border-radius: 27px;
      }
    }

@@ -35,17 +39,20 @@
      transform: translate3d(-50%, -50%, 0);
    }

-    @when on {
+    @m on {
      background-color: #44db5e;
-      border-color: #44db5e;
+      &::after { border-color: #44db5e; }
+      .zan-switch__node {
+        transform: translateX(20px);
+      }
    }

-    @when off {
+    @m off {
      background-color: #fff;
      border-color: rgba(0, 0, 0, .1);
    }

-    @when disabled {
+    @m disabled {
      opacity: .4;
    }
  }