Browse Source

feat: 灯界面点击效果

anxiaoxia 2 months ago
parent
commit
26e0ed31f8

+ 8 - 0
src/assets/taiguv1/svg/lamp_close_icon.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="lamp">
+<path id="Vector_36" d="M16.2377 21.2617C16.2377 23.602 14.341 25.4993 12.0007 25.4993C9.66034 25.4993 7.76367 23.602 7.76367 21.2617" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_34" d="M14.1188 7.86016C14.1188 9.49649 15.0625 10.9875 16.5404 11.6898C20.119 13.3896 22.5933 17.0376 22.5933 21.2632H1.40723C1.40723 17.0376 3.88152 13.3896 7.46008 11.6898C8.93749 10.988 9.88176 9.49541 9.88176 7.86016V6.85678C9.88176 5.68689 10.8304 4.73828 12.0003 4.73828C13.1701 4.73828 14.1188 5.68689 14.1188 6.85678V7.86016Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_35" d="M12 0.5V4.73754" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_37" d="M7.76367 0.5H16.2377" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

+ 8 - 0
src/assets/taiguv1/svg/lamp_open_c-icon.svg

@@ -0,0 +1,8 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M23.0848 27.9141C23.0848 30.7225 20.8088 32.9991 18.0004 32.9991C15.192 32.9991 12.916 30.7225 12.916 27.9141" stroke="#8E0003" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5419 11.8322C20.5419 13.7958 21.6744 15.585 23.4479 16.4278C27.7422 18.4675 30.7114 22.8451 30.7114 27.9158H5.28809C5.28809 22.8451 8.25724 18.4675 12.5515 16.4278C14.3244 15.5856 15.4575 13.7945 15.4575 11.8322V10.6281C15.4575 9.22426 16.5958 8.08594 17.9997 8.08594C19.4036 8.08594 20.5419 9.22426 20.5419 10.6281V11.8322Z" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 3V8.08504" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.916 3H23.0848" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

+ 8 - 0
src/assets/taiguv1/svg/lamp_open_c_icon.svg

@@ -0,0 +1,8 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M23.0848 27.9141C23.0848 30.7225 20.8088 32.9991 18.0004 32.9991C15.192 32.9991 12.916 30.7225 12.916 27.9141" stroke="#8E0003" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5419 11.8322C20.5419 13.7958 21.6744 15.585 23.4479 16.4278C27.7422 18.4675 30.7114 22.8451 30.7114 27.9158H5.28809C5.28809 22.8451 8.25724 18.4675 12.5515 16.4278C14.3244 15.5856 15.4575 13.7945 15.4575 11.8322V10.6281C15.4575 9.22426 16.5958 8.08594 17.9997 8.08594C19.4036 8.08594 20.5419 9.22426 20.5419 10.6281V11.8322Z" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 3V8.08504" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.916 3H23.0848" stroke="#001428" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

File diff suppressed because it is too large
+ 13 - 0
src/assets/taiguv1/svg/lamp_open_p_icon.svg


+ 239 - 183
src/views/envmonitor/taiguv1/components/Lamp/LightMore.vue

@@ -1,212 +1,268 @@
 <template>
-  <div class="more-box">
-    <div class="light-more-top">
-      <div class="left">
-        <div class="light-box">
-          <img :src="parseImgUrl('taiguv1/envmonitor', 'active/lamp.svg')" alt="" />
+    <div class="more-box">
+        <div class="light-more-top">
+            <div class="left">
+                <div class="light-box">
+                    <img
+                        :src="LampsStatus === '全部关闭' ?  lampCloseIcon:lampOpenIcon"
+                        alt=""
+                        :style="LampsStatus !== '全部关闭' ? {width: '58px',
+                            height: '62px'} : ''"
+                    />
+                </div>
+                <div class="light-name">{{ LampsStatus }}</div>
+            </div>
+            <div class="right">
+                <div
+                    class="control"
+                    @click="handle('allOpen')"
+                >全开</div>
+                <div
+                    class="control"
+                    @click="handle('allClose')"
+                >全关</div>
+            </div>
         </div>
-        <div class="light-name">光照</div>
-      </div>
-      <div class="right">
-        <div class="control">全开</div>
-        <div class="control">全关</div>
-      </div>
-    </div>
-    <div class="light-bottom">
-      <div
-        class="item-box"
-        :class="item.isOpen ? 'light-box-active ' : ''"
-        v-for="(item, index) in childLights"
-      >
-        <div class="name">{{ item.name }}</div>
-        <Switch
-          class="switch-btn"
-          inactive-color="rgba(0, 0, 0, 0.08)"
-          v-model="item.isOpen"
-        />
-      </div>
-    </div>
-  </div>
+        <div
+            class="light-middle"
+            v-if="LampsStatus !== '全部关闭'"
+        >
+            <div>色温、亮度</div>
+        </div>
+        <div class="light-bottom">
+            <div
+                class="item-box"
+                :class="item.isOpen ? 'light-box-active ' : ''"
+                v-for="(item, index) in childLights"
+            >
+                <div class="name">{{ item.name }}</div>
+                <Switch
+                    class="switch-btn"
+                    inactive-color="rgba(0, 0, 0, 0.08)"
+                    v-model="item.isOpen"
+                    @click="handleChildLight(item)"
+                />
+            </div>
+        </div>
+    </div>    
 </template>
 
 <script lang="ts">
+import lampCloseIcon from "@/assets/taiguv1/svg/lamp_close_icon.svg";
+import lampOpenIcon from "@/assets/taiguv1/svg/lamp_open_p_icon.svg";
+import { parseImgUrl } from "@/utils";
+import { Dialog, Loading, Switch } from "vant";
 import {
-  defineComponent,
-  onMounted,
-  reactive,
-  toRefs,
-  computed,
-  watch,
-  onUnmounted,
-  onBeforeMount,
-  onBeforeUnmount,
+    defineComponent,
+    onBeforeUnmount,
+    onMounted,
+    reactive,
+    toRefs,
 } from "vue";
-import { Switch, Dialog, Loading, Toast } from "vant";
-import { parseImgUrl } from "@/utils";
 import any = jasmine.any;
-
 export default defineComponent({
-  components: {
-    Switch,
-    [Dialog.Component.name]: Dialog.Component,
-    Loading,
-  },
-  setup(props, contx) {
-    const proxyData = reactive({
-      parseImgUrl: parseImgUrl,
-      isOpen: false,
-      childLights: [
-        {
-          name: "主灯",
-          isOpen: false,
-        },
-        {
-          name: "氛围灯",
-          isOpen: false,
-        },
-        {
-          name: "吸顶灯",
-          isOpen: false,
-        },
-        {
-          name: "吊灯",
-          isOpen: false,
-        },
-        {
-          name: "壁灯",
-          isOpen: false,
-        },
-      ],
-    });
-    onBeforeUnmount(() => {});
-    onMounted(() => {});
+    components: {
+        Switch,
+        [Dialog.Component.name]: Dialog.Component,
+        Loading,
+    },
+    setup(props, contx) {
+        const proxyData = reactive({
+            parseImgUrl: parseImgUrl,
+            lampCloseIcon: lampCloseIcon,
+            lampOpenIcon: lampOpenIcon,
+            LampsStatus: "全部关闭",
+            childLights: [
+                {
+                    name: "主灯",
+                    id: "1",
+                    isOpen: false,
+                },
+                {
+                    name: "氛围灯",
+                    id: "2",
+                    isOpen: false,
+                },
+                {
+                    name: "吸顶灯",
+                    id: "3",
+                    isOpen: false,
+                },
+            ],
+            checkLampsStatus: () => {
+                const allOpen = proxyData.childLights.every(
+                    (item) => item.isOpen
+                );
+                const allClose = proxyData.childLights.every(
+                    (item) => !item.isOpen
+                );
+
+                if (allOpen) return "全部开启";
+                if (allClose) return "全部关闭";
+                return "部分开启";
+            },
+            handle: (type: string) => {
+                if (type === "allOpen") {
+                    proxyData.childLights.forEach((item) => {
+                        item.isOpen = true;
+                    });
+                } else {
+                    proxyData.childLights.forEach((item) => {
+                        item.isOpen = false;
+                    });
+                }
+                proxyData.LampsStatus = proxyData.checkLampsStatus();
+            },
+            handleChildLight: (itemCurrent: any) => {
+                proxyData.childLights.forEach((item) => {
+                    if (item.id === itemCurrent.id) {
+                        item.isOpen = itemCurrent.isOpen;
+                    }
+                });
+                proxyData.LampsStatus = proxyData.checkLampsStatus();
+            },
+        });
 
-    return {
-      ...toRefs(proxyData),
-    };
-  },
+        onBeforeUnmount(() => {});
+        onMounted(() => {});
+
+        return {
+            ...toRefs(proxyData),
+        };
+    },
 });
 </script>
 <style lang="scss" scoped>
 .more-box {
-  .light-more-top {
-    display: flex;
-    align-items: center;
-    .left {
-      margin-right: 36px;
-      .light-box {
-        width: 110px;
-        height: 110px;
-        background: rgba(255, 255, 255, 0.4);
-        border-radius: 50%;
-        text-align: center;
-        margin-right: 27px;
-        img {
-          width: 36px;
-          height: 36px;
-          margin: 0 auto;
-          margin-top: 37px;
+    .light-more-top {
+        display: flex;
+        align-items: center;
+        .left {
+            margin-right: 36px;
+            .light-box {
+                width: 110px;
+                height: 110px;
+                background: rgba(255, 255, 255, 0.4);
+                border-radius: 50%;
+                text-align: center;
+                margin-right: 27px;
+                img {
+                    width: 36px;
+                    height: 36px;
+                    margin: 0 auto;
+                    margin-top: 37px;
+                }
+            }
+            .light-name {
+                //styleName: Chi/Body Large;
+                margin-top: 12px;
+                font-family: PingFang SC;
+                width: 110px;
+                font-size: 16px;
+                font-weight: 300;
+                line-height: 22px;
+                letter-spacing: 0.02em;
+                text-align: center;
+                color: rgba(0, 20, 40, 1);
+            }
+        }
+        .right {
+            height: 92px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .control {
+                width: 100px;
+                height: 40px;
+                line-height: 40px;
+                border-radius: 50px;
+                // background: #E1E1DF;
+                background: rgba(255, 255, 255, 0.2);
+                box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
+                backdrop-filter: blur(10px);
+                color: #001428;
+                //styleName: Chi/Body Small;
+                font-family: PingFang SC;
+                font-size: 12px;
+                font-weight: 400;
+                letter-spacing: 0.04em;
+                text-align: center;
+            }
         }
-      }
-      .light-name {
-        //styleName: Chi/Body Large;
-        margin-top: 12px;
-        font-family: PingFang SC;
-        width: 110px;
-        font-size: 16px;
-        font-weight: 300;
-        line-height: 22px;
-        letter-spacing: 0.02em;
-        text-align: center;
-        color: rgba(0, 20, 40, 1);
-      }
     }
-    .right {
-      height: 92px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      .control {
-        width: 100px;
-        height: 40px;
-        line-height: 40px;
-        border-radius: 50px;
-        backdrop-filter: blur(20px);
-        background: rgba(255, 255, 255, 0.4);
-        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
-        //styleName: Chi/Body Small;
-        font-family: PingFang SC;
-        font-size: 12px;
-        font-weight: 400;
-        letter-spacing: 0.04em;
-        text-align: center;
-      }
+    .light-middle {
+        height: 100px;
+        background: #fff;
     }
-  }
-  .light-bottom {
-    margin-top: 36px;
-    .item-box {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 300px;
-      height: 68px;
-      box-sizing: border-box;
-      padding: 20px 24px;
-      border-radius: 24px 24px 44px 24px;
-      background: rgba(255, 255, 255, 0.2);
-      box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.05);
-      margin-bottom: 12px;
-      .name {
-        //styleName: Chi/Body Regular;
-        font-family: PingFang SC;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 19px;
-        letter-spacing: 0.02em;
-        color: rgba(0, 20, 40, 1);
-      }
+    .light-bottom {
+        margin-top: 36px;
+        .item-box {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 300px;
+            height: 68px;
+            box-sizing: border-box;
+            padding: 20px 24px;
+            border-radius: 24px 24px 44px 24px;
+            background: rgba(255, 255, 255, 0.2);
+            box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.05);
+            margin-bottom: 12px;
+            .name {
+                //styleName: Chi/Body Regular;
+                font-family: PingFang SC;
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 19px;
+                letter-spacing: 0.02em;
+                color: rgba(0, 20, 40, 1);
+            }
+        }
+        .light-box-active {
+            background: rgba(255, 255, 255, 0.6);
+        }
     }
-    .light-box-active {
-      background: rgba(255, 255, 255, 0.6);
+    .switch-btn {
+        margin-top: 0;
+        width: 50px !important;
+        height: 28px !important;
+        border: none;
     }
-  }
-  .switch-btn {
-    margin-top: 0;
-    width: 50px !important;
-    height: 28px !important;
-    border: none;
-  }
 }
 </style>
 <style lang="scss">
 .more-box {
-  .van-switch__node {
-    background: rgba(255, 255, 255, 0.6);
-    width: 24px;
-    height: 24px;
-    top: 0.33vh;
-  }
-  .van-switch--on {
-    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
     .van-switch__node {
-      background: #fff !important;
+        background: rgba(255, 255, 255, 0.6);
+        width: 24px;
+        height: 24px;
+        top: 0.33vh;
+    }
+    .van-switch--on {
+        background: linear-gradient(
+            95.5deg,
+            #99282b 21.44%,
+            #a95459 84.95%
+        ) !important;
+        .van-switch__node {
+            background: #fff !important;
+        }
+    }
+    .van-loading__spinner {
+        color: $elActiveColor !important;
     }
-  }
-  .van-loading__spinner {
-    color: $elActiveColor !important;
-  }
 
-  .van-switch__loading {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    line-height: 1;
-  }
+    .van-switch__loading {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        line-height: 1;
+    }
 
-  .van-switch--disabled {
-    opacity: 0.5;
-  }
+    .van-switch--disabled {
+        opacity: 0.5;
+    }
 }
 </style>

+ 138 - 150
src/views/envmonitor/taiguv1/components/Lamp/index.vue

@@ -1,185 +1,173 @@
 <template>
-  <div class="volumn-box" :class="isOpen ? 'active' : ''">
-    <div class="top">
-      <img
-        :src="parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/lamp.svg' : 'lamp.svg')"
-        alt=""
-      />
-      <div class="top-right">
-        <Switch class="switch-btn" inactive-color="rgba(0, 0, 0, 0.3)" v-model="isOpen" />
-      </div>
+    <div
+        class="volumn-box"
+        :class="isOpen ? 'active' : ''"
+        @click="searchMore"
+    >
+        <div class="top">
+            <img
+                :src="parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/lamp.svg' : 'lamp.svg')"
+                alt=""
+            />
+            <div class="top-right">
+                <Switch
+                    class="switch-btn"
+                    inactive-color="rgba(0, 0, 0, 0.3)"
+                    v-model="isOpen"
+                    @click.stop="handleSwitch"
+                />
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="text">光照</div>
+            <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
+            <div
+                v-if="isOpen"
+                class="right"
+            ></div>
+        </div>
     </div>
-    <div class="bottom">
-      <div class="text">光照</div>
-      <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
-      <!-- <div class="right" @click="searchMore">
-        <img
-          :src="
-            parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/filter.svg' : 'filter.svg')
-          "
-          alt=""
-        />
-      </div> -->
-    </div>
-  </div>
 </template>
 
-<script lang="ts">
+<script setup>
 import { parseImgUrl } from "@/utils";
-import { Dialog, Loading, Switch } from "vant";
+import { Switch } from "vant";
 import {
-    defineComponent,
     onBeforeUnmount,
     onMounted,
-    reactive,
-    toRefs
+    ref
 } from "vue";
-import any = jasmine.any;
+const isOpen = ref(false)
+const emit = defineEmits(['showMore'])
+const searchMore = () => {
+    emit("showMore", "lamp", true);
+}
+const handleSwitch = () => {
+    console.log('handleSwitch')
+}
+onBeforeUnmount(() => { });
+onMounted(() => { });
 
-export default defineComponent({
-  components: {
-    Switch,
-    [Dialog.Component.name]: Dialog.Component,
-    Loading,
-  },
-  setup(props, contx) {
-    const proxyData = reactive({
-      parseImgUrl: parseImgUrl,
-      isOpen: false,
-      searchMore() {
-        contx.emit("showMore",'lamp',true);
-      },
-    });
-    onBeforeUnmount(() => {});
-    onMounted(() => {});
 
-    return {
-      ...toRefs(proxyData),
-    };
-  },
-});
 </script>
 <style lang="scss" scoped>
 .volumn-box {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 16px;
-  width: 100%;
-  height: 100%;
-  border-radius: 24px 24px 44px 24px;
-  background-color: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(40px);
-  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
-  .top {
+    box-sizing: border-box;
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
-    img {
-      width: 30px;
+    padding: 16px;
+    width: 100%;
+    height: 100%;
+    border-radius: 24px 24px 44px 24px;
+    background-color: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(40px);
+    box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+    .top {
+        display: flex;
+        justify-content: space-between;
+        img {
+            width: 30px;
+        }
     }
-  }
-  .bottom {
-    // margin-top: 18vh;
-    position: relative;
-    // margin-top: 109px;
-    .text {
-      //styleName: Chi/Body Large;
-      font-family: PingFang SC;
-      font-size: 16px;
-      font-weight: 300;
-      line-height: 22px;
-      letter-spacing: 0.02em;
-      text-align: left;
-      text-underline-position: from-font;
-      text-decoration-skip-ink: none;
-      color: rgba(255, 255, 255, 1);
-      padding-bottom: 2px;
+    .bottom {
+        // margin-top: 18vh;
+        position: relative;
+        // margin-top: 109px;
+        .text {
+            //styleName: Chi/Body Large;
+            font-family: PingFang SC;
+            font-size: 16px;
+            font-weight: 300;
+            line-height: 22px;
+            letter-spacing: 0.02em;
+            text-align: left;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+            color: rgba(255, 255, 255, 1);
+            padding-bottom: 2px;
+        }
+        .status {
+            //styleName: Chi/Body XS;
+            font-family: PingFang SC;
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 15px;
+            letter-spacing: 0.02em;
+            color: rgba(255, 255, 255, 0.4);
+        }
+        .right {
+            display: flex;
+            width: 133px;
+            height: 30px;
+            padding: 2px;
+            align-items: center;
+            gap: 10px;
+            background: rgba(111, 26, 26, 0.4);
+        }
     }
-    .status {
-      //styleName: Chi/Body XS;
-      font-family: PingFang SC;
-      font-size: 11px;
-      font-weight: 400;
-      line-height: 15px;
-      letter-spacing: 0.02em;
-      color: rgba(255, 255, 255, 0.4);
+    .switch-btn {
+        margin-top: 0;
+        width: 50px !important;
+        height: 28px !important;
+        border: none;
     }
-    // .right {
-    //   position: absolute;
-    //   right: 0;
-    //   bottom: 0;
-    //   width: 36px;
-    //   height: 36px;
-    //   background: rgba(255, 255, 255, 0.2);
-    //   backdrop-filter: blur(60px);
-    //   border-radius: 50%;
-    //   text-align: center;
-    //   img {
-    //     width: 20px;
-    //     height: 20px;
-    //     margin-top: 8px;
-    //   }
-    // }
-  }
-  .switch-btn {
-    margin-top: 0;
-    width: 50px !important;
-    height: 28px !important;
-    border: none;
-  }
 }
 .active {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(40px);
-  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(40px);
+    box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
 
-  .bottom {
-    .text {
-      color: rgba(0, 20, 40, 1);
+    .bottom {
+        .text {
+            color: rgba(0, 20, 40, 1);
+        }
+        .status {
+            color: rgba(116, 128, 141, 1);
+        }
     }
-    .status {
-      color: rgba(116, 128, 141, 1);
+    .right {
+        background: rgba(255, 255, 255, 0.4);
     }
-  }
-  .right {
-    background: rgba(255, 255, 255, 0.4);
-  }
 }
 </style>
 <style lang="scss">
 .volumn-box {
-  .van-switch__node {
-    background: rgba(255, 255, 255, 0.6);
-    width: 24px;
-    height: 24px;
-    top: 0.33vh;
-  }
-  .van-switch--on.switch-btn {
     .van-switch__node {
-      transform: translate(calc(50px - 28px)) !important;
+        background: rgba(255, 255, 255, 0.6);
+        width: 24px;
+        height: 24px;
+        top: 0.33vh;
     }
-  }
-  .van-switch--on {
-    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
-    .van-switch__node {
-      background: #fff !important;
+    .van-switch--on.switch-btn {
+        .van-switch__node {
+            transform: translate(calc(50px - 28px)) !important;
+        }
+    }
+    .van-switch--on {
+        background: linear-gradient(
+            95.5deg,
+            #99282b 21.44%,
+            #a95459 84.95%
+        ) !important;
+        .van-switch__node {
+            background: #fff !important;
+        }
+    }
+    .van-loading__spinner {
+        color: $elActiveColor !important;
     }
-  }
-  .van-loading__spinner {
-    color: $elActiveColor !important;
-  }
 
-  .van-switch__loading {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    line-height: 1;
-  }
+    .van-switch__loading {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        line-height: 1;
+    }
 
-  .van-switch--disabled {
-    opacity: 0.5;
-  }
+    .van-switch--disabled {
+        opacity: 0.5;
+    }
 }
 </style>