diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index 926b71ab7..aff5962fe 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -5,15 +5,15 @@
 ```html
 <div class="page-switch">
   <div class="page-switch__wrapper">
-    <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
+    <z-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></z-switch>
     <div class="page-switch__text">{{switchStateText}}</div>
   </div>
   <div class="page-switch__wrapper">
-    <o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
+    <z-switch class="some-customized-class" :checked="true" :disabled="true"></z-switch>
     <div class="page-switch__text">ON, DISABLED</div>
   </div>
   <div class="page-switch__wrapper">
-    <o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
+    <z-switch class="some-customized-class" :checked="false" :disabled="true"></z-switch>
     <div class="page-switch__text">OFF, DISABLED</div>
   </div>
 </div>
diff --git a/docs/examples/switch.vue b/docs/examples/switch.vue
index 131518236..ce70ae6e5 100644
--- a/docs/examples/switch.vue
+++ b/docs/examples/switch.vue
@@ -5,15 +5,15 @@
     <h2 class="page-sub-title">基础用法</h2>
     <div class="page-switch">
       <div class="page-switch__wrapper">
-        <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
+        <z-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></z-switch>
         <div class="page-switch__text">{{switchStateText}}</div>
       </div>
       <div class="page-switch__wrapper">
-        <o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
+        <z-switch class="some-customized-class" :checked="true" :disabled="true"></z-switch>
         <div class="page-switch__text">ON, DISABLED</div>
       </div>
       <div class="page-switch__wrapper">
-        <o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
+        <z-switch class="some-customized-class" :checked="false" :disabled="true"></z-switch>
         <div class="page-switch__text">OFF, DISABLED</div>
       </div>
     </div>
diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index d10f30faa..1a26296ba 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -6,7 +6,7 @@
 
 <script>
 /**
- * o2-switch
+ * z-switch
  * @module components/switch
  * @desc 开关
  * @param {boolean} [checked=false] - 开关状态
@@ -15,10 +15,10 @@
  * @param {callback} [onChange] - 开关状态改变回调函数。
  *
  * @example
- * <o2-switch checked="true" disabled="false"></o2-switch>
+ * <z-switch checked="true" disabled="false"></o2-switch>
  */
 export default {
-  name: 'o2-switch',
+  name: 'z-switch',
   props: {
     checked: {
       type: Boolean,
diff --git a/packages/zanui-css/src/switch.css b/packages/zanui-css/src/switch.css
index 7802cb39a..034eeac9a 100644
--- a/packages/zanui-css/src/switch.css
+++ b/packages/zanui-css/src/switch.css
@@ -16,12 +16,12 @@
       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: 0;
+        left: 20px;
         transition: all .5s ease-in-out;
       }
 
       @when off {
-        left: 20px;
+        left: 0;
         transition: all .5s ease-in-out;
       }
     }
@@ -36,10 +36,6 @@
       border-color: rgba(0, 0, 0, .1);
     }
 
-    @when loading {
-        /* TODO */
-    }
-
     @when disabled {
       @when off {
         background-color: #f2f2f2;
@@ -47,6 +43,7 @@
       }
       @when on {
         background-color: #a6e7b1;
+        border-color: #a6e7b1;
       }
     }
   }