Compare commits

..

No commits in common. 'd206ef782541c3d359419f92e1db3e446d93f9a6' and '7052c187ac3d774bed2d4d85771ef0b3ee471ab4' have entirely different histories.

  1. BIN
      src/assets/imgs/device-detail/normal-mode/down@2x.png
  2. BIN
      src/assets/imgs/device-detail/normal-mode/mode_select_bg_cold@2x.png
  3. BIN
      src/assets/imgs/device-detail/normal-mode/mode_select_bg_hot@2x.png
  4. BIN
      src/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png
  5. BIN
      src/assets/imgs/device-detail/normal-mode/mode_select_bg_wind@2x.png
  6. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_annual_wet@2x.png
  7. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_auto@2x.png
  8. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_auto_wet@2x.png
  9. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_cold@2x.png
  10. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_dry_wet@2x.png
  11. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_floor@2x.png
  12. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_hot@2x.png
  13. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_hot_floor@2x.png
  14. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_relax@2x.png
  15. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_sleep@2x.png
  16. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_strong_wet@2x.png
  17. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_wet@2x.png
  18. BIN
      src/assets/imgs/device-detail/normal-mode/shut_down_wind@2x.png
  19. BIN
      src/assets/imgs/device-detail/normal-mode/switch_cold@2x.png
  20. BIN
      src/assets/imgs/device-detail/normal-mode/switch_hot@2x.png
  21. BIN
      src/assets/imgs/device-detail/normal-mode/switch_shutdown@2x.png
  22. BIN
      src/assets/imgs/device-detail/normal-mode/switch_wet@2x.png
  23. BIN
      src/assets/imgs/device-detail/normal-mode/switch_wind@2x.png
  24. 150
      src/components/mode-change.vue
  25. 56
      src/view/device-detail/device-detail.vue
  26. 108
      src/view/device-detail/mode/mode-dic.ts
  27. 138
      src/view/device-detail/mode/normal.vue
  28. 24
      src/view/drop-down-menu/drop-down-menu.vue
  29. 52
      src/view/tabs/device-control.vue

BIN
src/assets/imgs/device-detail/normal-mode/down@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/imgs/device-detail/normal-mode/mode_select_bg_cold@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
src/assets/imgs/device-detail/normal-mode/mode_select_bg_hot@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/assets/imgs/device-detail/normal-mode/mode_select_bg_wet@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/assets/imgs/device-detail/normal-mode/mode_select_bg_wind@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_annual_wet@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_auto@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_auto_wet@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_cold@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_dry_wet@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_floor@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_hot@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_hot_floor@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_relax@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_sleep@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_strong_wet@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_wet@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/imgs/device-detail/normal-mode/shut_down_wind@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

BIN
src/assets/imgs/device-detail/normal-mode/switch_cold@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/imgs/device-detail/normal-mode/switch_hot@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/imgs/device-detail/normal-mode/switch_shutdown@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/imgs/device-detail/normal-mode/switch_wet@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/imgs/device-detail/normal-mode/switch_wind@2x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

150
src/components/mode-change.vue

@ -1,150 +0,0 @@ @@ -1,150 +0,0 @@
<!--
模式切换的弹出框
点击蒙版可以关闭弹窗
showModePop展示弹窗是否开启需要传参进来
关闭弹窗事件closePop父组件需要接收值并更改showModePop
-->
<template>
<van-popup
v-model:show="showModePop"
position="bottom"
class="modeChangePop"
@click-overlay="closePop()"
>
<div class="mode-change-wrapper">
<!-- 关闭按钮 -->
<div class="close-pop" @click="closePop()">
<img src="@/assets/imgs/device-detail/normal-mode/down@2x.png" class="close-img">
</div>
<!-- 模式内容 -->
<div class="content">
<div
class="mode-card"
v-for="(item, index) in list"
:key="index"
>
<div class="mode-card-top" :class="{'mode-card-selected': item.selected}" @click="switchMode(item, index)">
<img :src="item.modeImg">
</div>
<div class="mode-card-btm">
{{ item.modeName }}
</div>
</div>
</div>
</div>
</van-popup>
</template>
<script lang="ts" setup>
import { ref, toRefs, onMounted } from 'vue';
const props = defineProps<{
showModePop: boolean; //
modeList: any[]; //
}>()
const { showModePop, modeList } = toRefs(props);
/** 像父组件事件 */
const emit = defineEmits(['closePop']);
/** 模式数组接收 */
const list = ref(modeList);
onMounted(() => {
changeCardBg();
})
/** 关闭弹窗 */
const closePop = () => {
const params = {
showModePop: false,
modeList: list.value
}
emit('closePop', params);
}
/**
* 切换模式
* @param changeMode 选中的模式数据
* @param index 下标
*/
const switchMode = (changeMode: any, index: number) => {
list.value.forEach((item, i) => {
if (index === i) {
item.selected = true;
} else {
item.selected = false;
}
})
changeCardBg();
}
/** 更换选中的图 */
const changeCardBg = () => {
const selectModeBg = list.value.find(item => item.selected).selectModeBg;
const dom: any = document.getElementsByClassName(`mode-card-selected`)[0];
if (dom) {
dom.style.background = `url(${selectModeBg})`;
dom.style.backgroundSize = '100% 100%';
}
}
</script>
<style lang="scss" scoped>
.modeChangePop {
.mode-change-wrapper {
background-color: #20252E;
.close-pop {
text-align: center;
.close-img {
width: 142px;
height: 50px;
}
}
.content {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 29px;
.mode-card {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 27px 40px 27px;
position: relative;
.mode-card-top {
padding: 27px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: url('src/assets/imgs/device-detail/normal-mode/circle-bg@2x.png') no-repeat;
background-size: 100% 100%;
margin-bottom: 60px;
img {
width: 56px;
height: 56px;
}
}
.mode-card-btm {
position: absolute;
top: 130px;
color: #FFF;
font-size: 28px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
min-width: 150px;
text-align: center;
}
}
}
}
}
</style>

56
src/view/device-detail/device-detail.vue

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
<template>
<div class="device-detail-wrapper" ref="deviceDetailWrapper">
<div class="device-detail-wrapper">
<div class="title">
<!-- 返回按钮 -->
<div class="back-icon" style="margin-left: 24px;">
@ -39,7 +39,7 @@ @@ -39,7 +39,7 @@
<!-- 模式 -->
<!-- 常规模式 -->
<NormalMode class="normal-mode" @change-bg="nomalChangeBg($event)"></NormalMode>
<NormalMode class="normal-mode"></NormalMode>
</div>
</template>
@ -49,8 +49,6 @@ import { useRouter, onBeforeRouteUpdate } from "vue-router"; @@ -49,8 +49,6 @@ 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: '常规'},
@ -111,16 +109,6 @@ const switchModeTabs = (item: any) => { @@ -111,16 +109,6 @@ 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();
@ -144,12 +132,12 @@ const back = () => { @@ -144,12 +132,12 @@ const back = () => {
display: flex;
align-items: center;
justify-content: space-between;
padding: 31px 0;
padding: 62px 0;
flex-shrink: 0;
.back-icon, .more-icon {
width: 48px;
height: 48px;
width: 96px;
height: 96px;
img {
width: 100%;
@ -159,7 +147,7 @@ const back = () => { @@ -159,7 +147,7 @@ const back = () => {
.title-name {
color: #FFF;
font-size: 40px;
font-size: 80px;
font-weight: 400;
}
}
@ -173,16 +161,16 @@ const back = () => { @@ -173,16 +161,16 @@ const back = () => {
flex-shrink: 0;
.switch-mode-container {
padding: 6px;
padding: 12px;
display: flex;
font-size: 28px;
font-size: 56px;
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: 13px 29px;
padding: 26px 58px;
}
.active-tab {
@ -194,40 +182,40 @@ const back = () => { @@ -194,40 +182,40 @@ const back = () => {
.cleanliness {
position: absolute;
top: 110px;
right: 25px;
top: 220px;
right: 50px;
color: #FFF;
.cleanliness-text {
font-size: 26px;
font-size: 52px;
}
.cleanliness-container {
width: 76px;
height: 14px;
width: 152px;
height: 28px;
background-color: rgba($color: #B8B8B8 , $alpha: .2);
border-radius: 2px;
margin-top: 16px;
border-radius: 4px;
margin-top: 32px;
.cleanliness-progress {
width: 0%;
height: 100%;
border-radius: 2px;
border-radius: 4px;
}
}
.cleanliness-reminder {
font-size: 20px;
padding: 6px 10px;
margin-top: 10px;
border-radius: 16px;
font-size: 40px;
padding: 12px 20px;
margin-top: 20px;
border-radius: 32px;
}
}
}
.normal-mode {
flex: 1;
margin-top: 23px;
margin-top: 46px;
}
}
</style>

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

@ -7,11 +7,6 @@ import { Mode } from './enmu/mode.enmu'; @@ -7,11 +7,6 @@ import { Mode } from './enmu/mode.enmu';
* modeImg
* nomalBg
* smartBg
* selectSwitchImg
* shutdownImg
* shutdownSwitchImg
* select
* selectModeBg
*/
const ModeOptions = [
{
@ -19,160 +14,89 @@ const ModeOptions = [ @@ -19,160 +14,89 @@ 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: '',
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',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}, {
modeName: '舒爽',
mode: Mode.RELAX,
modeImg: '/src/assets/imgs/device-detail/normal-mode/relax@2x.png',
nomalBg: '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_relax@2x.png',
shutdownSwitchImg: '',
selected: false,
selectModeBg: '/src/assets/imgs/device-detail/normal-mode/mode_select_bg_wind@2x.png',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}, {
modeName: '送风',
mode: Mode.WIND,
modeImg: '/src/assets/imgs/device-detail/normal-mode/wind@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',
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',
nomalBg: 'normal_bg_wind@2x.png',
smartBg: ''
}, {
modeName: '自动',
mode: Mode.AUTO,
modeImg: '/src/assets/imgs/device-detail/normal-mode/auto@2x.png',
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',
nomalBg: 'normal_bg_wind@2x.png',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}, {
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: '',
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',
smartBg: ''
}
]
ModeOptions.forEach((item: any, index: number) => {
item['id'] = index;
item['shutdownSwitchImg'] = '/src/assets/imgs/device-detail/normal-mode/switch_shutdown@2x.png';
});
export {ModeOptions}

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

@ -26,28 +26,21 @@ @@ -26,28 +26,21 @@
</div>
<!-- 模式风量风向开关 -->
<div class="setting-control">
<div class="circle-card mode" @click="openModePop()">
<img :src="modeImg">
<div class="circle-card mode">
<img :src="modeImg" alt="">
</div>
<div class="circle-card wind"></div>
<div class="circle-card wind-dire"></div>
<div class="circle-card switch" @click="changeSwitch()">
<img :src="onOffImg">
<div class="circle-card switch"></div>
</div>
</div>
<!-- 模式切换弹窗 -->
<ModeChangePop :show-mode-pop="showModePop" :mode-list="modeList" @close-pop="closeModePop($event)"></ModeChangePop>
</div>
</template>
<script lang="ts" setup>
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,
@ -56,7 +49,6 @@ const tempOptions = ref({ @@ -56,7 +49,6 @@ const tempOptions = ref({
max: 32,
current: 'temp'
});
/** 湿度配置 */
const humiOptions = ref({
titleName: '湿度',
value: 76,
@ -65,75 +57,21 @@ const humiOptions = ref({ @@ -65,75 +57,21 @@ 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<any[]>([]);
/**
* 开关
* true: false:
*/
const onOff = ref(false);
/** 开关图片 */
const onOffImg = ref('');
/** 当前选中的风量 */
const wind = ref();
/** 风量展示的图片 */
const windImg = ref('');
/** 模式更改弹窗是否开启 */
const showModePop = ref(false);
/** 向父组件传递事件 */
const emit = defineEmits(['changeBg']);
onBeforeMount(() => {
currentOptions.value = {...tempOptions.value};
treatOptions.value = {...humiOptions.value};
const modeArr = [Mode.COLD, Mode.WET, Mode.HOT, Mode.WIND, Mode.FLOOR, Mode.HOT_FLOOR, Mode.AUTO];
modeArr.forEach(item => {
modeList.value.push(modeOptions.find((item1: any) => item1.mode === item));
})
getShowImg();
modeImg.value = modeOptions.find((item: any) => item.mode === mode.value).modeImg;
})
onMounted(() => {
})
/** 获取展示图片 */
const getShowImg = () => {
modeList.value.forEach(item => {
if (item.mode === mode.value) {
item.selected = true;
} else {
item.selected = false;
}
})
//
const modeData = modeOptions.find((item: any) => item.mode === mode.value);
if (onOff.value) {
//
modeImg.value = modeData.modeImg;
//
onOffImg.value = modeData.selectSwitchImg;
//
emit('changeBg', modeData.nomalBg);
} else {
//
modeImg.value = modeOptions.find((item: any) => item.mode === mode.value).shutdownImg;
//
onOffImg.value = modeOptions.find((item: any) => item.mode === mode.value).shutdownSwitchImg;
//
emit('changeBg', 'src/assets/imgs/device-detail/normal-mode/normal_bg_shutdown@2x.png');
}
}
/** 温湿度减 */
const handleReduce = () => {
if (currentOptions.value.value <= currentOptions.value.min) {
@ -164,26 +102,6 @@ const switchTempHumi = () => { @@ -164,26 +102,6 @@ const switchTempHumi = () => {
treatOptions.value = {...humiOptions.value};
}
}
/** 模式切换弹窗开启 */
const openModePop = () => {
showModePop.value = true;
}
/** 模式弹窗关闭 */
const closeModePop = (params: any) => {
console.log(params)
showModePop.value = params.showModePop;
modeList.value = params.modeList;
mode.value = modeList.value.find(item => item.selected).mode;
getShowImg();
}
/** 开关切换 */
const changeSwitch = () => {
onOff.value = !onOff.value;
getShowImg();
}
</script>
<style lang="scss" scoped>
@ -193,7 +111,7 @@ const changeSwitch = () => { @@ -193,7 +111,7 @@ const changeSwitch = () => {
.title {
color: #FFF;
font-size: 28px;
font-size: 56px;
text-align: center;
}
@ -201,12 +119,12 @@ const changeSwitch = () => { @@ -201,12 +119,12 @@ const changeSwitch = () => {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 11px;
margin-top: 22px;
position: relative;
.set-reduce, .set-add {
width: 134px;
height: 134px;
width: 268px;
height: 268px;
img {
width: 100%;
@ -219,27 +137,27 @@ const changeSwitch = () => { @@ -219,27 +137,27 @@ const changeSwitch = () => {
font-family: Roboto-Regular, Roboto;
.current-value {
font-size: 180px;
font-size: 360px;
font-family: Roboto-Light, Roboto;
font-weight: 300;
}
.current-unit {
font-size: 50px;
font-size: 100px;
position: absolute;
top: 17px;
right: 190px;
top: 35px;
right: 380px;
}
.treat {
position: absolute;
bottom: 17px;
right: 140px;
font-size: 34px;
bottom: 35px;
right: 280px;
font-size: 68px;
img {
width: 30px;
margin-left: 4px;
width: 60px;
margin-left: 8px;
}
}
}
@ -249,31 +167,31 @@ const changeSwitch = () => { @@ -249,31 +167,31 @@ const changeSwitch = () => {
display: flex;
justify-content: center;
align-items: center;
margin-top: 17px;
margin-top: 35px;
img {
width: 30px;
height: 31px;
width: 60px;
height: 62px;
}
span {
color: #D65659;
font-size: 26px;
font-size: 52px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
margin: 0 3px 0 6px;
margin: 0 6px 0 12px;
}
}
.setting-control {
margin-top: 43px;
padding: 0 64px;
margin-top: 86px;
padding: 0 128px;
display: flex;
justify-content: space-between;
.circle-card {
width: 110px;
height: 110px;
width: 220px;
height: 220px;
background: url('src/assets/imgs/device-detail/normal-mode/circle-bg@2x.png') no-repeat;
background-size: 100% 100%;
display: flex;
@ -281,8 +199,8 @@ const changeSwitch = () => { @@ -281,8 +199,8 @@ const changeSwitch = () => {
justify-content: center;
img {
width: 56px;
height: 56px;
width: 112px;
height: 112px;
}
}
}

24
src/view/drop-down-menu/drop-down-menu.vue

@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
import {ref, onMounted} from 'vue';
const funcList = ref<any[]>([]);
const emit = defineEmits(['pullUp']);
const emit = defineEmits(['pullUp'])
onMounted(() => {
funcList.value = [
@ -70,34 +70,34 @@ const pullUp = () => { @@ -70,34 +70,34 @@ const pullUp = () => {
overflow: hidden;
.content-top {
padding: 19px 24px;
padding: 38px 48px;
padding-bottom: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.func-wrapper {
width: 210px;
height: 200px;
border-radius: 16px;
width: 420px;
height: 400px;
border-radius: 32px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 5px 0;
margin: 10px 0;
background: #20252E;
.func-img {
width: 66px;
height: 66px;
width: 132px;
height: 132px;
}
.func-text {
font-size: 28px;
font-size: 56px;
color: #FFF;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
margin-top: 42px;
margin-top: 84px;
}
}
}
@ -105,10 +105,10 @@ const pullUp = () => { @@ -105,10 +105,10 @@ const pullUp = () => {
.content-btm {
width: 100vw;
text-align: center;
padding-bottom: 6px;
padding-bottom: 12px;
img {
width: 142px;
width: 284px;
}
}
}

52
src/view/tabs/device-control.vue

@ -152,7 +152,7 @@ const goToDetail = (item: any) => { @@ -152,7 +152,7 @@ const goToDetail = (item: any) => {
.title {
width: 100%;
padding: 35px 0;
padding: 70px 0;
position: relative;
flex-shrink: 0;
@ -160,18 +160,18 @@ const goToDetail = (item: any) => { @@ -160,18 +160,18 @@ const goToDetail = (item: any) => {
text-align: center;
color: #FFF;
font-weight: 400;
font-size: 40px;
font-size: 80px;
}
.all-close-btn {
color: #FFF;
font-size: 32px;
padding: 14px 18px;
font-size: 64px;
padding: 28px 36px;
background: #394457;
border-radius: 16px;
border-radius: 32px;
position: absolute;
top: 25px;
right: 24px;
top: 50px;
right: 48px;
}
}
@ -183,16 +183,16 @@ const goToDetail = (item: any) => { @@ -183,16 +183,16 @@ const goToDetail = (item: any) => {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 24px;
padding: 0 48px;
.device-card {
box-sizing: border-box;
width: 326px;
height: 146px;
width: 620px;
height: 292px;
background: #20252E;
border-radius: 16px;
padding: 22px 24px 10px 24px;
margin-bottom: 20px;
border-radius: 32px;
padding: 44px 48px 20px 48px;
margin-bottom: 40px;
.content-top {
display: flex;
@ -200,15 +200,15 @@ const goToDetail = (item: any) => { @@ -200,15 +200,15 @@ const goToDetail = (item: any) => {
.device-name {
color: #FFF;
font-size: 24px;
margin-right: 10px;
padding: 6px 0;
font-size: 48px;
margin-right: 20px;
padding: 12px 0;
}
.status-border {
font-size: 20px;
padding: 6px 10px;
border-radius: 16px;
font-size: 40px;
padding: 12px 20px;
border-radius: 32px;
span {
display: inline-block;
@ -227,7 +227,7 @@ const goToDetail = (item: any) => { @@ -227,7 +227,7 @@ const goToDetail = (item: any) => {
}
.content-btm {
margin-top: 18px;
margin-top: 36px;
font-family: Roboto-Light, Roboto;
//
@ -241,9 +241,9 @@ const goToDetail = (item: any) => { @@ -241,9 +241,9 @@ const goToDetail = (item: any) => {
}
.status {
font-size: 40px;
font-size: 80px;
font-weight: 300;
margin-right: 4px;
margin-right: 8px;
}
.hot {
@ -255,12 +255,12 @@ const goToDetail = (item: any) => { @@ -255,12 +255,12 @@ const goToDetail = (item: any) => {
}
.unit {
font-size: 18px;
font-size: 36px;
font-weight: 400;
}
.air-quality {
font-size: 40px;
font-size: 80px;
}
}
@ -271,8 +271,8 @@ const goToDetail = (item: any) => { @@ -271,8 +271,8 @@ const goToDetail = (item: any) => {
align-items: center;
.close-btn {
width: 60px;
height: 60px;
width: 120px;
height: 120px;
img {
width: 100%;

Loading…
Cancel
Save