From 8a9fa96a6e08f43b999c47393dcebaebae81d8ec Mon Sep 17 00:00:00 2001
From: zhangzhiyi <zhangzhiyi@birantech.com>
Date: Thu, 25 May 2023 14:35:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=81=8F=E5=86=B7=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E5=B7=A6=E8=BE=B9=E4=B8=BA=E7=A9=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/device-detail/mode/smart.vue | 44 ++++++++++++++++++---------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/view/device-detail/mode/smart.vue b/src/view/device-detail/mode/smart.vue
index 8a8bc9c..b7cfcab 100644
--- a/src/view/device-detail/mode/smart.vue
+++ b/src/view/device-detail/mode/smart.vue
@@ -19,8 +19,11 @@
             <div class="illustrate">
                 <img src="@/assets/imgs/device-detail/smart-mode/illustrate@2x.png">
             </div>
-            <div class="switch-btn" @click="changeSwitch()">
-                <img :src="getImgSrc(onOffImg)" alt="">
+            <div class="switch-btn-container">
+                <div class="switch-btn" @click="changeSwitch()">
+                    <img :src="getImgSrc(onOffImg)" alt="">
+                </div>
+                <div class="btn-text">开关</div>
             </div>
         </div>
     </div>
@@ -132,7 +135,7 @@ const initSwiper = () => {
         centeredSlides: true,
         observer: true,
         observeParents: true,
-        initialSlide: currentModeIndex === 0? 5: currentModeIndex, // 初始时展示的位置
+        initialSlide: currentModeIndex, // 初始时展示的位置
         on: {
             touchStart: () => {
             },
@@ -228,7 +231,7 @@ const changeSwitch = () => {
         width: 100%;
         position: absolute;
         left: 0;
-        bottom: 40px;
+        bottom: 70px;
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -245,19 +248,30 @@ const changeSwitch = () => {
             }
         }
 
-        .switch-btn {
-            width: 110px;
-            height: 110px;
-            border-radius: 50%;
-            background: url('@/assets/imgs/device-detail/smart-mode/circle-bg@2x.png') no-repeat;
-            background-size: 100% 100%;
+        .switch-btn-container {
             margin-right: 64px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+            position: relative;
+            .switch-btn {
+                width: 110px;
+                height: 110px;
+                border-radius: 50%;
+                background: url('@/assets/imgs/device-detail/smart-mode/circle-bg@2x.png') no-repeat;
+                background-size: 100% 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
 
-            img {
-                width: 56px;
+                img {
+                    width: 56px;
+                }
+            }
+            .btn-text {
+                position: absolute;
+                color: #FFF;
+                font-size: 28px;
+                width: 100%;
+                text-align: center;
+                margin-top: 20px;
             }
         }
     }