diff --git a/examples/routers/switch.vue b/examples/routers/switch.vue
index fdefaeae..525f1063 100644
--- a/examples/routers/switch.vue
+++ b/examples/routers/switch.vue
@@ -6,13 +6,39 @@
         </i-switch>
         {{ m1 }}
         <div @click="m1 = 'no'">toggle</div>
+        <br><br>
+        <i-switch size="large"></i-switch>
+        <i-switch></i-switch>
+        <i-switch size="small"></i-switch>
+        <br><br>
+        <i-switch>
+            <span slot="open">开</span>
+            <span slot="close">关</span>
+        </i-switch>
+        <i-switch>
+            <Icon type="android-done" slot="open"></Icon>
+            <Icon type="android-close" slot="close"></Icon>
+        </i-switch>
+        <br><br>
+        <i-switch size="large">
+            <span slot="open">开启</span>
+            <span slot="close">关闭</span>
+        </i-switch>
+        <i-switch size="large">
+            <span slot="open">ON</span>
+            <span slot="close">OFF</span>
+        </i-switch>
+        <br><br>
+        <i-switch :disabled="disabled"></i-switch>
+        <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                m1: 'yes'
+                m1: 'yes',
+                disabled: true
             }
         },
         methods: {
diff --git a/src/styles/components/switch.less b/src/styles/components/switch.less
index 1bdc7912..17a13e0c 100644
--- a/src/styles/components/switch.less
+++ b/src/styles/components/switch.less
@@ -2,10 +2,10 @@
 
 .@{switch-prefix-cls} {
     display: inline-block;
-    width: 48px;
-    height: 24px;
-    line-height: 22px;
-    border-radius: 24px;
+    width: 44px;
+    height: 22px;
+    line-height: 20px;
+    border-radius: 22px;
     vertical-align: middle;
     border: 1px solid #ccc;
     background-color: #ccc;
@@ -18,7 +18,7 @@
         color: #fff;
         font-size: @font-size-small;
         position: absolute;
-        left: 25px;
+        left: 23px;
 
         i {
             width: 12px;
@@ -29,9 +29,9 @@
 
     &:after {
         content: '';
-        width: 20px;
-        height: 20px;
-        border-radius: 20px;
+        width: 18px;
+        height: 18px;
+        border-radius: 18px;
         background-color: #fff;
         position: absolute;
         left: 1px;
@@ -54,14 +54,12 @@
     }
 
     &-small {
-        width: 24px;
-        height: 12px;
-        line-height: 10px;
+        width: 28px;
+        height: 16px;
+        line-height: 14px;
         &:after {
-            width: 10px;
-            height: 10px;
-            top: 0;
-            left: 0;
+            width: 12px;
+            height: 12px;
         }
         &:active:after {
             width: 14px;
@@ -69,30 +67,30 @@
     }
 
     &-small&-checked:after {
-        left: 12px;
+        left: 13px;
     }
 
     &-small:active&-checked:after {
-        left: 8px;
+        left: 11px;
     }
 
     &-large{
-        width: 60px;
+        width: 56px;
         &:active:after {
             width: 26px;
         }
     }
 
     &-large:active:after {
-        width: 32px;
+        width: 30px;
     }
 
     &-large&-checked:after {
-        left: 37px;
+        left: 35px;
     }
 
     &-large:active&-checked:after {
-        left: 25px;
+        left: 23px;
     }
 
     &-checked {
@@ -100,15 +98,15 @@
         background-color: @primary-color;
 
         .@{switch-prefix-cls}-inner {
-            left: 8px;
+            left: 7px;
         }
 
         &:after {
-            left: 25px;
+            left: 23px;
         }
 
         &:active:after {
-            left: 19px;
+            left: 15px;
         }
     }