From b79073635295227180e79501068887c4c776c06c Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Tue, 15 Jun 2021 09:41:54 +0800
Subject: [PATCH] fix(switch): modify style of example

---
 .../__tests__/__snapshots__/index.spec.js.snap | 18 +++++++++---------
 .../varlet-ui/src/switch/example/index.vue     |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/varlet-ui/src/switch/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/switch/__tests__/__snapshots__/index.spec.js.snap
index 93108e72e14..859127c59bf 100644
--- a/packages/varlet-ui/src/switch/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/switch/__tests__/__snapshots__/index.spec.js.snap
@@ -87,9 +87,9 @@ exports[`test switch example 1`] = `
   <div class=\\"var-switch__example-block\\">
     <div class=\\"var-switch\\">
       <div class=\\"var-switch-block\\" style=\\"height: 24px; width: 40px;\\">
-        <div style=\\"height: 14.399999999999999px; width: 38px; border-radius: 13.333333333333334px; filter: brightness(.6);\\" class=\\"var-switch__track\\"></div>
-        <div class=\\"var-switch__ripple\\" style=\\"left: -10px; color: rgb(153, 153, 153); width: 40px; height: 40px;\\">
-          <div style=\\"width: 20px; height: 20px;\\" class=\\"var-switch__handle var-elevation--2\\">
+        <div style=\\"height: 14.399999999999999px; width: 38px; border-radius: 13.333333333333334px; filter: opacity(.6);\\" class=\\"var-switch__track var-switch__track-active\\"></div>
+        <div class=\\"var-switch__ripple\\" style=\\"left: 10px; width: 40px; height: 40px;\\">
+          <div style=\\"width: 20px; height: 20px;\\" class=\\"var-switch__handle var-elevation--2 var-switch__handle-active\\">
             <!--v-if-->
           </div>
         </div>
@@ -100,9 +100,9 @@ exports[`test switch example 1`] = `
     </div>
     <div class=\\"var-switch\\">
       <div class=\\"var-switch-block\\" style=\\"height: 24px; width: 40px;\\">
-        <div style=\\"height: 14.399999999999999px; width: 38px; border-radius: 13.333333333333334px; filter: brightness(.6); background-color: rgb(137, 221, 255);\\" class=\\"var-switch__track\\"></div>
-        <div class=\\"var-switch__ripple\\" style=\\"left: -10px; color: rgb(137, 221, 255); width: 40px; height: 40px;\\">
-          <div style=\\"width: 20px; height: 20px; background-color: rgb(137, 221, 255);\\" class=\\"var-switch__handle var-elevation--2\\">
+        <div style=\\"height: 14.399999999999999px; width: 38px; border-radius: 13.333333333333334px; filter: opacity(.6); background-color: rgb(82, 216, 105);\\" class=\\"var-switch__track var-switch__track-active\\"></div>
+        <div class=\\"var-switch__ripple\\" style=\\"left: 10px; color: rgb(82, 216, 105); width: 40px; height: 40px;\\">
+          <div style=\\"width: 20px; height: 20px; background-color: rgb(82, 216, 105);\\" class=\\"var-switch__handle var-elevation--2 var-switch__handle-active\\">
             <!--v-if-->
           </div>
         </div>
@@ -113,9 +113,9 @@ exports[`test switch example 1`] = `
     </div>
     <div class=\\"var-switch\\">
       <div class=\\"var-switch-block\\" style=\\"height: 24px; width: 40px;\\">
-        <div style=\\"height: 14.399999999999999px; width: 38px; border-radius: 13.333333333333334px; filter: brightness(.6); background-color: rgb(39, 114, 245);\\" class=\\"var-switch__track\\"></div>
-        <div class=\\"var-switch__ripple\\" style=\\"left: -10px; color: rgb(39, 114, 245); width: 40px; height: 40px;\\">
-          <div style=\\"width: 20px; height: 20px; background-color: rgb(39, 114, 245);\\" class=\\"var-switch__handle var-elevation--2\\">
+        <div style=\\"height: 14.399999999999999px; width: 38px; border-radius: 13.333333333333334px; filter: opacity(.6); background-color: orange;\\" class=\\"var-switch__track var-switch__track-active\\"></div>
+        <div class=\\"var-switch__ripple\\" style=\\"left: 10px; color: orange; width: 40px; height: 40px;\\">
+          <div style=\\"width: 20px; height: 20px; background-color: orange;\\" class=\\"var-switch__handle var-elevation--2 var-switch__handle-active\\">
             <!--v-if-->
           </div>
         </div>
diff --git a/packages/varlet-ui/src/switch/example/index.vue b/packages/varlet-ui/src/switch/example/index.vue
index 307a0cd3b09..e4ba97193ce 100644
--- a/packages/varlet-ui/src/switch/example/index.vue
+++ b/packages/varlet-ui/src/switch/example/index.vue
@@ -16,7 +16,7 @@
     <app-type>{{ pack.customColor }}</app-type>
     <div class="var-switch__example-block">
       <var-switch v-model="value2" :ripple="false" />
-      <var-switch v-model="value2" color="indigo" close-color="#89ddff" />
+      <var-switch v-model="value2" color="#52d869" close-color="#89ddff" />
       <var-switch v-model="value2" color="orange" close-color="#2772f5" />
     </div>
   </div>
@@ -66,7 +66,7 @@ export default {
     const values = reactive({
       value: true,
       value1: true,
-      value2: false,
+      value2: true,
       value3: true,
       value4: true,
     })