修复偏冷展示左边为空

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()">
+            <div class="switch-btn-container">
-                <img :src="getImgSrc(onOffImg)" alt="">
+                <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 {
+        .switch-btn-container {
-            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%;
             margin-right: 64px;
-            display: flex;
+            position: relative;
-            align-items: center;
+            .switch-btn {
-            justify-content: center;
+                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 {
+                img {
-                width: 56px;
+                    width: 56px;
+                }
+            }
+            .btn-text {
+                position: absolute;
+                color: #FFF;
+                font-size: 28px;
+                width: 100%;
+                text-align: center;
+                margin-top: 20px;
             }
         }
     }