@@ -39,7 +39,7 @@
-
+
@@ -49,6 +49,8 @@ import { useRouter, onBeforeRouteUpdate } from "vue-router";
import NormalMode from './mode/normal.vue';
const router = useRouter();
+/** $ref获取最外层dom, onMounted会赋值 */
+const deviceDetailWrapper: any = ref(null);
/** 模式tab列表 */
const modeTabList = ref([
{id: 0, value: '常规'},
@@ -109,6 +111,16 @@ const switchModeTabs = (item: any) => {
activeTab.value = item.id;
}
+/**
+ * 监听常规模式下切换背景
+ * @param url 背景图片静态地址
+ */
+const nomalChangeBg = (url: string) => {
+ if (deviceDetailWrapper.value) {
+ deviceDetailWrapper.value.style.background = `url(${url})`;
+ }
+}
+
/** 返回上一个页面 */
const back = () => {
router.back();
@@ -132,12 +144,12 @@ const back = () => {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 62px 0;
+ padding: 31px 0;
flex-shrink: 0;
.back-icon, .more-icon {
- width: 96px;
- height: 96px;
+ width: 48px;
+ height: 48px;
img {
width: 100%;
@@ -147,7 +159,7 @@ const back = () => {
.title-name {
color: #FFF;
- font-size: 80px;
+ font-size: 40px;
font-weight: 400;
}
}
@@ -161,16 +173,16 @@ const back = () => {
flex-shrink: 0;
.switch-mode-container {
- padding: 12px;
+ padding: 6px;
display: flex;
- font-size: 56px;
+ font-size: 28px;
font-weight: 400;
background: url('src/assets/imgs/device-detail/mode-container-bg@2x.png') no-repeat;
background-size: 100% 100%;
.default-tab {
color: rgba($color: #FFF, $alpha: .7);
- padding: 26px 58px;
+ padding: 13px 29px;
}
.active-tab {
@@ -182,40 +194,40 @@ const back = () => {
.cleanliness {
position: absolute;
- top: 220px;
- right: 50px;
+ top: 110px;
+ right: 25px;
color: #FFF;
.cleanliness-text {
- font-size: 52px;
+ font-size: 26px;
}
.cleanliness-container {
- width: 152px;
- height: 28px;
+ width: 76px;
+ height: 14px;
background-color: rgba($color: #B8B8B8 , $alpha: .2);
- border-radius: 4px;
- margin-top: 32px;
+ border-radius: 2px;
+ margin-top: 16px;
.cleanliness-progress {
width: 0%;
height: 100%;
- border-radius: 4px;
+ border-radius: 2px;
}
}
.cleanliness-reminder {
- font-size: 40px;
- padding: 12px 20px;
- margin-top: 20px;
- border-radius: 32px;
+ font-size: 20px;
+ padding: 6px 10px;
+ margin-top: 10px;
+ border-radius: 16px;
}
}
}
.normal-mode {
flex: 1;
- margin-top: 46px;
+ margin-top: 23px;
}
}
\ No newline at end of file
diff --git a/src/view/device-detail/mode/mode-dic.ts b/src/view/device-detail/mode/mode-dic.ts
index 084eb5f..79c8380 100644
--- a/src/view/device-detail/mode/mode-dic.ts
+++ b/src/view/device-detail/mode/mode-dic.ts
@@ -7,6 +7,11 @@ import { Mode } from './enmu/mode.enmu';
* modeImg:模式图片
* nomalBg:常规背景
* smartBg:智慧背景
+ * selectSwitchImg:选中模式的开关机图片
+ * shutdownImg:关机下的模式图片(置灰)
+ * shutdownSwitchImg:关机下开关的图片
+ * select:是否被选中
+ * selectModeBg:被选中时背景图
*/
const ModeOptions = [
{
@@ -14,89 +19,160 @@ const ModeOptions = [
mode: Mode.COLD,
modeImg: '/src/assets/imgs/device-detail/normal-mode/cold@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_cold@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_cold@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_cold@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_cold@2x.png',
}, {
modeName: '除湿',
mode: Mode.WET,
modeImg: '/src/assets/imgs/device-detail/normal-mode/wet@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wet@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_wet@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
}, {
modeName: '干爽除湿',
mode: Mode.DRY_WET,
modeImg: '/src/assets/imgs/device-detail/normal-mode/dry_wet@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wet@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_dry_wet@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
}, {
modeName: '强力除湿',
mode: Mode.STRONG_WET,
modeImg: '/src/assets/imgs/device-detail/normal-mode/strong_wet@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wet@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_strong_wet@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
}, {
modeName: '自动除湿',
mode: Mode.AUTO_WET,
modeImg: '/src/assets/imgs/device-detail/normal-mode/auto_wet@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wet@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_auto_wet@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
}, {
modeName: '全年除湿',
mode: Mode.ANNUAL_WET,
modeImg: '/src/assets/imgs/device-detail/normal-mode/annual_wet@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wet@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_annual_wet@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
}, {
modeName: '舒爽',
mode: Mode.RELAX,
modeImg: '/src/assets/imgs/device-detail/normal-mode/relax@2x.png',
nomalBg: 'normal_bg_wind@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wind@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_relax@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wind@2x.png',
}, {
modeName: '舒心睡眠',
mode: Mode.SLEEP,
modeImg: '/src/assets/imgs/device-detail/normal-mode/sleep@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wet@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_sleep@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
}, {
modeName: '制热',
mode: Mode.HOT,
modeImg: '/src/assets/imgs/device-detail/normal-mode/hot@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_hot@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_hot@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_hot@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_hot@2x.png',
}, {
modeName: '送风',
mode: Mode.WIND,
modeImg: '/src/assets/imgs/device-detail/normal-mode/wind@2x.png',
- nomalBg: 'normal_bg_wind@2x.png',
- smartBg: ''
+ nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wind@2x.png',
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wind@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_wind@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wind@2x.png',
}, {
modeName: '自动',
mode: Mode.AUTO,
modeImg: '/src/assets/imgs/device-detail/normal-mode/auto@2x.png',
- nomalBg: 'normal_bg_wind@2x.png',
- smartBg: ''
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_auto@2x.png',
+ nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wind@2x.png',
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wind@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wind@2x.png',
}, {
modeName: '地暖',
mode: Mode.FLOOR,
modeImg: '/src/assets/imgs/device-detail/normal-mode/floor@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_hot@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_hot@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_floor@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_hot@2x.png',
}, {
modeName: '制热+地暖',
mode: Mode.HOT_FLOOR,
modeImg: '/src/assets/imgs/device-detail/normal-mode/hot_floor@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_hot@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_hot@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_hot_floor@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_hot@2x.png',
}, {
modeName: '除湿+地暖',
mode: Mode.WET_FLOOR,
modeImg: '/src/assets/imgs/device-detail/normal-mode/wet_floor@2x.png',
nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
- smartBg: ''
+ smartBg: '',
+ selectSwitchImg: '/src/assets/imgs/device-detail/normal-mode/switch_wet@2x.png',
+ shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_hot_floor@2x.png',
+ shutdownSwitchImg: '',
+ selected: false,
+ selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png',
}
]
ModeOptions.forEach((item: any, index: number) => {
item['id'] = index;
+ item['shutdownSwitchImg'] = '/src/assets/imgs/device-detail/normal-mode/switch_shutdown@2x.png';
});
export {ModeOptions}
\ No newline at end of file
diff --git a/src/view/device-detail/mode/normal.vue b/src/view/device-detail/mode/normal.vue
index a779ff5..984c1ea 100644
--- a/src/view/device-detail/mode/normal.vue
+++ b/src/view/device-detail/mode/normal.vue
@@ -26,13 +26,18 @@
@@ -40,7 +45,9 @@
import { ref, onBeforeMount, onMounted } from 'vue';
import { ModeOptions } from './mode-dic';
import { Mode } from './enmu/mode.enmu';
+import ModeChangePop from '@/components/mode-change.vue';
+/** 温度配置 */
const tempOptions = ref({
titleName: '室内',
value: 25,
@@ -49,6 +56,7 @@ const tempOptions = ref({
max: 32,
current: 'temp'
});
+/** 湿度配置 */
const humiOptions = ref({
titleName: '湿度',
value: 76,
@@ -57,21 +65,75 @@ const humiOptions = ref({
max: 90,
current: 'humi'
});
+/** 当前展示可操作性的配置 */
const currentOptions = ref();
+/** 等待操作的配置 */
const treatOptions = ref();
+/** 模式配置字典 */
const modeOptions: any = ModeOptions;
+/** 当前选中的模式 */
const mode = ref(Mode.COLD);
+/** 模式展示的图片 */
const modeImg = ref('');
+/** 可设定的模式数组 */
+const modeList = ref