优化代码样式，增加泳池用水、制冷风盘、制热风盘、生活热水模式

src/components/mode-change.vue

@@ -24,9 +24,9 @@
                     :key="index"
                 >
                     <div class="mode-card-top" :class="{'mode-card-selected': item.selected}" @click="switchMode(item, index)">
-                        <img src="@/assets/imgs/device-detail/normal-mode/circle-bg@2x.png" v-if="!item.selected" class="circle-bg">
-                        <img :src="getImgSrc(item.selectModeBg)" v-if="item.selected" class="circle-bg">
-                        <img :src="getImgSrc(item.modeImg)" class="mode-img">
+                        <img src="@/assets/imgs/device-detail/normal-mode/circle-bg@2x.png" v-show="!item.selected" class="circle-bg">
+                        <img :src="getImgSrc(item.selectModeBg)" v-show="item.selected" class="circle-bg">
+                        <img :src="getImgSrc(item.modeImg)" class="mode-img" :style="{visibility: (item.selected? 'hidden': 'visible')}">
                     </div>
                     <div class="mode-card-btm">
                         {{ item.modeName }}
@@ -133,7 +133,6 @@ const switchMode = (changeMode: any, index: number) => {
                         top: 50%;
                         left: 50%;
                         transform: translate(-50%, -50%);
-                        opacity: 0.4;
                     }
                 }
 

src/view/device-detail/mode/enmu/mode.enmu.ts

@@ -28,4 +28,12 @@ export enum Mode {
     HOT_FLOOR,
     /** 除湿+地暖 */
     WET_FLOOR,
+    /** 制冷风盘 */
+    COLD_WIND,
+    /** 制热风盘 */
+    HOT_WIND,
+    /** 生活热水 */
+    HOT_WATER,
+    /** 泳池用水 */
+    SWIMMING_WATER,
 }

src/view/device-detail/mode/mode-dic.ts

@@ -24,7 +24,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_cold@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_cold@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/cold_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_cold@2x.png',
     }, {
         modeName: '除湿',
@@ -36,7 +36,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_wet@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/wet_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wet@2x.png',
     }, {
         modeName: '干爽除湿',
@@ -48,7 +48,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_dry_wet@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/dry_wet_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wet@2x.png',
     }, {
         modeName: '强力除湿',
@@ -60,7 +60,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_strong_wet@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/strong_wet_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wet@2x.png',
     }, {
         modeName: '自动除湿',
@@ -72,7 +72,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_auto_wet@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/auto_wet_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wet@2x.png',
     }, {
         modeName: '全年除湿',
@@ -84,7 +84,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_annual_wet@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/annual_wet_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wet@2x.png',
     }, {
         modeName: '舒爽',
@@ -96,7 +96,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_relax@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wind@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/relax_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wind@2x.png',
     }, {
         modeName: '舒心睡眠',
@@ -108,7 +108,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_sleep@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/sleep_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wet@2x.png',
     }, {
         modeName: '制热',
@@ -120,7 +120,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_hot@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_hot@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/hot_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_hot@2x.png',
     }, {
         modeName: '送风',
@@ -132,7 +132,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_wind@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wind@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/wind_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wind@2x.png',
     }, {
         modeName: '自动',
@@ -144,7 +144,7 @@ const ModeOptions = [
         selectSwitchImg: '/assets/imgs/device-detail/normal-mode/switch_wind@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wind@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/auto_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wind@2x.png',
     }, {
         modeName: '地暖',
@@ -156,7 +156,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_floor@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_hot@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/floor_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_hot@2x.png',
     }, {
         modeName: '制热+地暖',
@@ -168,7 +168,7 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_hot_floor@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_hot@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/hot_floor_select@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_hot@2x.png',
     }, {
         modeName: '除湿+地暖',
@@ -180,8 +180,56 @@ const ModeOptions = [
         shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_hot_floor@2x.png',
         shutdownSwitchImg: '',
         selected: false,
-        selectModeBg: '/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/wet_floor@2x.png',
         windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_wet@2x.png',
+    }, {
+        modeName: '制冷风盘',
+        mode: Mode.COLD_WIND,
+        modeImg: '/assets/imgs/device-detail/normal-mode/cold_wind@2x.png',
+        nomalBg: '/assets/imgs/device-detail/normal-mode/normal_bg_cold@2x.png',
+        smartBg: '',
+        selectSwitchImg: '/assets/imgs/device-detail/normal-mode/switch_cold@2x.png',
+        shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_wind_tur@2x.png',
+        shutdownSwitchImg: '',
+        selected: false,
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/cold_wind_select@2x.png',
+        windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_cold@2x.png',
+    }, {
+        modeName: '制热风盘',
+        mode: Mode.HOT_WIND,
+        modeImg: '/assets/imgs/device-detail/normal-mode/hot_wind@2x.png',
+        nomalBg: '/assets/imgs/device-detail/normal-mode/normal_bg_hot@2x.png',
+        smartBg: '',
+        selectSwitchImg: '/assets/imgs/device-detail/normal-mode/switch_hot@2x.png',
+        shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_wind_tur@2x.png',
+        shutdownSwitchImg: '',
+        selected: false,
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/hot_wind_select@2x.png',
+        windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_hot@2x.png',
+    }, {
+        modeName: '生活热水',
+        mode: Mode.HOT_WATER,
+        modeImg: '/assets/imgs/device-detail/normal-mode/hot_water@2x.png',
+        nomalBg: '/assets/imgs/device-detail/normal-mode/normal_bg_hot@2x.png',
+        smartBg: '',
+        selectSwitchImg: '/assets/imgs/device-detail/normal-mode/switch_hot@2x.png',
+        shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_hot_water@2x.png',
+        shutdownSwitchImg: '',
+        selected: false,
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/hot_water_select@2x.png',
+        windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_hot@2x.png',
+    }, {
+        modeName: '泳池用水',
+        mode: Mode.SWIMMING_WATER,
+        modeImg: '/assets/imgs/device-detail/normal-mode/swimming_water@2x.png',
+        nomalBg: '/assets/imgs/device-detail/normal-mode/normal_bg_cold@2x.png',
+        smartBg: '',
+        selectSwitchImg: '/assets/imgs/device-detail/normal-mode/switch_cold@2x.png',
+        shutdownImg: '/assets/imgs/device-detail/normal-mode/shut_down_swimming_water@2x.png',
+        shutdownSwitchImg: '',
+        selected: false,
+        selectModeBg: '/assets/imgs/device-detail/normal-mode/swimming_water_select@2x.png',
+        windDireImg: '/assets/imgs/device-detail/normal-mode/horiz_swing_cold@2x.png',
     }
 ]
 

src/view/device-detail/mode/normal.vue

@@ -182,8 +182,15 @@ onBeforeMount(() => {
     currentOptions.value = {...tempOptions.value};
     treatOptions.value = {...humiOptions.value};
     // 可设定的模式 todo::现在是写死的
-    const modeArr = [Mode.COLD, Mode.WET, Mode.HOT, Mode.WIND, Mode.FLOOR, Mode.HOT_FLOOR, Mode.AUTO];
-    modeArr.forEach(item => {
+    let modeArr: any = [];
+    if (props.deviceType === '4E') {
+        mode.value = Mode.FLOOR;
+        modeArr = [Mode.COLD_WIND, Mode.HOT_WIND, Mode.FLOOR, Mode.HOT_WATER, Mode.SWIMMING_WATER];
+    } else {
+        mode.value = Mode.COLD;
+        modeArr = [Mode.COLD, Mode.WET, Mode.HOT, Mode.WIND, Mode.FLOOR, Mode.HOT_FLOOR, Mode.AUTO];
+    }
+    modeArr.forEach((item: any) => {
         modeList.value.push(modeOptions.find((item1: any) => item1.mode === item));
     })
     settableWind.value = [Wind.AUTO, Wind.SUPER_LOW, Wind.LOW, Wind.MIDDLE, Wind.HIGH, Wind.SUPER_HIGH];

src/view/device-detail/mode/wind-dic.ts

@@ -89,13 +89,14 @@ const WindOptions: any = [
     }
 ];
 ModeOptions.forEach(item => {
-    if (item.mode === Mode.COLD) {
+    if (item.mode === Mode.COLD || item.mode ===  Mode.COLD_WIND || item.mode === Mode.SWIMMING_WATER) {
         const windOption = {...coldWind};
         windOption.mode = item.mode;
         WindOptions.push(windOption);
     } else if (
         item.mode === Mode.WET || item.mode === Mode.DRY_WET || item.mode === Mode.STRONG_WET
-        || item.mode === Mode.ANNUAL_WET || item.mode === Mode.AUTO_WET || item.mode === Mode.SLEEP || item.mode === Mode.WET_FLOOR
+        || item.mode === Mode.ANNUAL_WET || item.mode === Mode.AUTO_WET || item.mode === Mode.SLEEP 
+        || item.mode === Mode.WET_FLOOR || item.mode === Mode.HOT_WATER || item.mode === Mode.HOT_WIND
     ) {
         const windOption = {...wetWind};
         windOption.mode = item.mode;

src/view/tabs/device-control.vue

@@ -217,7 +217,6 @@ const goToDetail = (item: any) => {
         .device-card {
             box-sizing: border-box;
             width: 326px;
-            height: 146px;
             background: #20252E;
             border-radius: 16px;
             padding: 22px 24px 10px 24px;
@@ -229,7 +228,7 @@ const goToDetail = (item: any) => {
 
                 .device-name {
                     color: #FFF;
-                    font-size: 24px;
+                    font-size: 28px;
                     margin-right: 10px;
                     padding: 6px 0;
                 }
@@ -270,7 +269,7 @@ const goToDetail = (item: any) => {
                 }
 
                 .status {
-                    font-size: 40px;
+                    font-size: 54px;
                     font-weight: 300;
                     margin-right: 4px;
                 }
@@ -289,7 +288,7 @@ const goToDetail = (item: any) => {
                 }
 
                 .air-quality {
-                    font-size: 40px;
+                    font-size: 60px;
                 }
             }
 

src/view/tabs/home-screen.vue

@@ -251,7 +251,7 @@ const changeAnimation = () => {
       animationApproach.value.play();
       setTimeout(() => {
         currentAnimation.value = 1;
-      }, 100);
+      }, 500);
     }
     // 6s后数字滚动效果
     setTimeout(() => {
@@ -271,14 +271,14 @@ const changeAnimation = () => {
     }, 9.5 * 1000);
     setTimeout(() => {
       currentAnimation.value = 2;
-    }, 10.6 * 1000);
+    }, 11 * 1000);
   } else if (currentAnimation.value === 1 || currentAnimation.value === 3) {
   } else if (currentAnimation.value === 2) {
     if (animationExit.value) {
       animationExit.value.play();
       setTimeout(() => {
         currentAnimation.value = 3;
-      }, 100);
+      }, 500);
       // 室内环境动画淡出效果
       if (indoorSetting.value) {
         indoorSetting.value.style.transition = "2s";
@@ -296,7 +296,7 @@ const changeAnimation = () => {
       if (indoorValue.value) {
         indoorValue.value.style.opacity = "1";
       }
-    }, 4.6 * 1000);
+    }, 4.4 * 1000);
   }
 };
 
@@ -327,7 +327,6 @@ const timeTouchEnd = () => {
 
   .bg-video {
     width: 100%;
-    height: 100%;
     position: fixed;
     top: 0;
     left: 0;
@@ -400,8 +399,8 @@ const timeTouchEnd = () => {
       align-items: center;
 
       img {
-        width: 72px;
-        height: 72px;
+        width: 46px;
+        height: 46px;
       }
 
       .message {
@@ -410,8 +409,8 @@ const timeTouchEnd = () => {
 
         .message-confim {
           position: absolute;
-          top: -5px;
-          right: -5px;
+          top: -10px;
+          right: -10px;
           width: 30px;
           height: 30px;
           border-radius: 50%;