修改样式，增加模式选择弹窗

src/components/mode-change.vue

@@ -0,0 +1,150 @@
+<!-- 
+    模式切换的弹出框
+    点击蒙版可以关闭弹窗
+    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>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="device-detail-wrapper">
+    <div class="device-detail-wrapper" ref="deviceDetailWrapper">
         <div class="title">
             <!-- 返回按钮 -->
             <div class="back-icon" style="margin-left: 24px;">
@@ -39,7 +39,7 @@
 
         <!-- 模式 -->
         <!-- 常规模式 -->
-        <NormalMode class="normal-mode"></NormalMode>
+        <NormalMode class="normal-mode" @change-bg="nomalChangeBg($event)"></NormalMode>
     </div>
 </template>
 
@@ -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;
+            width: 48px;
-            height: 96px;
+            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;
+            top: 110px;
-            right: 50px;
+            right: 25px;
             color: #FFF;
             
             .cleanliness-text {
-                font-size: 52px;
+                font-size: 26px;
             }
 
             .cleanliness-container {
-                width: 152px;
+                width: 76px;
-                height: 28px;
+                height: 14px;
                 background-color: rgba($color: #B8B8B8 , $alpha: .2);
-                border-radius: 4px;
+                border-radius: 2px;
-                margin-top: 32px;
+                margin-top: 16px;
                 
                 .cleanliness-progress {
                     width: 0%;
                     height: 100%;
-                    border-radius: 4px;
+                    border-radius: 2px;
                 }
             }
 
             .cleanliness-reminder {
-                font-size: 40px;
+                font-size: 20px;
-                padding: 12px 20px;
+                padding: 6px 10px;
-                margin-top: 20px;
+                margin-top: 10px;
-                border-radius: 32px;
+                border-radius: 16px;
             }
         }
     }
 
     .normal-mode {
         flex: 1;
-        margin-top: 46px;
+        margin-top: 23px;
     }
 }
 </style>

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',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/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_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',
+        shutdownImg: '/src/assets/imgs/device-detail/normal-mode/shut_down_auto@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',
+        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}

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

@@ -26,13 +26,18 @@
         </div>
         <!-- 模式、风量、风向、开关 -->
         <div class="setting-control">
-            <div class="circle-card mode">
+            <div class="circle-card mode" @click="openModePop()">
-                <img :src="modeImg" alt="">
+                <img :src="modeImg">
             </div>
             <div class="circle-card wind"></div>
             <div class="circle-card wind-dire"></div>
-            <div class="circle-card switch"></div>
+            <div class="circle-card switch" @click="changeSwitch()">
+                <img :src="onOffImg">
+            </div>
         </div>
+
+        <!-- 模式切换弹窗 -->
+        <ModeChangePop :show-mode-pop="showModePop" :mode-list="modeList" @close-pop="closeModePop($event)"></ModeChangePop>
     </div>
 </template>
 
@@ -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<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};
-    modeImg.value = modeOptions.find((item: any) => item.mode === mode.value).modeImg;
+    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();
 })
 
 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) {
@@ -102,6 +164,26 @@ 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>
@@ -111,7 +193,7 @@ const switchTempHumi = () => {
 
     .title {
         color: #FFF;
-        font-size: 56px;
+        font-size: 28px;
         text-align: center;
     }
 
@@ -119,12 +201,12 @@ const switchTempHumi = () => {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-top: 22px;
+        margin-top: 11px;
         position: relative;
 
         .set-reduce, .set-add {
-            width: 268px;
+            width: 134px;
-            height: 268px;
+            height: 134px;
 
             img {
                 width: 100%;
@@ -137,27 +219,27 @@ const switchTempHumi = () => {
             font-family: Roboto-Regular, Roboto;
 
             .current-value {
-                font-size: 360px;
+                font-size: 180px;
                 font-family: Roboto-Light, Roboto;
                 font-weight: 300;
             }
 
             .current-unit {
-                font-size: 100px;
+                font-size: 50px;
                 position: absolute;
-                top: 35px;
+                top: 17px;
-                right: 380px;
+                right: 190px;
             }
 
             .treat {
                 position: absolute;
-                bottom: 35px;
+                bottom: 17px;
-                right: 280px;
+                right: 140px;
-                font-size: 68px;
+                font-size: 34px;
 
                 img {
-                    width: 60px;
+                    width: 30px;
-                    margin-left: 8px;
+                    margin-left: 4px;
                 }
             }
         }
@@ -167,31 +249,31 @@ const switchTempHumi = () => {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-top: 35px;
+        margin-top: 17px;
 
         img {
-            width: 60px;
+            width: 30px;
-            height: 62px;
+            height: 31px;
         }
 
         span {
             color: #D65659;
-            font-size: 52px;
+            font-size: 26px;
             font-family: SourceHanSansCN-Regular, SourceHanSansCN;
             font-weight: 400;
-            margin: 0 6px 0 12px;
+            margin: 0 3px 0 6px;
         }
     }
 
     .setting-control {
-        margin-top: 86px;
+        margin-top: 43px;
-        padding: 0 128px;
+        padding: 0 64px;
         display: flex;
         justify-content: space-between;
 
         .circle-card {
-            width: 220px;
+            width: 110px;
-            height: 220px;
+            height: 110px;
             background: url('src/assets/imgs/device-detail/normal-mode/circle-bg@2x.png') no-repeat;
             background-size: 100% 100%;
             display: flex;
@@ -199,8 +281,8 @@ const switchTempHumi = () => {
             justify-content: center;
 
             img {
-                width: 112px;
+                width: 56px;
-                height: 112px;
+                height: 56px;
             }
         }
     }

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

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

src/view/tabs/device-control.vue

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