智慧模式、水模块页面完成

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

@@ -6,7 +6,7 @@
                 <img src="@/assets/imgs/device-detail/back@2x.png" width="100%" class="back-img" @click="back()">
             </div>
             <!-- 标头名称 -->
-            <div class="title-name">客厅空调</div>
+            <div class="title-name">{{ titelName }}</div>
             <!-- 更多 -->
             <div class="more-icon" style="margin-right: 24px;">
                 <img src="@/assets/imgs/device-detail/more@2x.png" width="100%" class="more-img">
@@ -14,7 +14,7 @@
         </div>
 
         <!-- 常规/智慧模式切换 -->
-        <div class="switch-mode-wrapper">
+        <div class="switch-mode-wrapper" v-if="showTabs">
             <div class="switch-mode-container">
                 <div
                     v-for="item in modeTabList"
@@ -26,7 +26,7 @@
             </div>
 
             <!-- 清洁度 -->
-            <div class="cleanliness">
+            <div class="cleanliness" v-show="activeTab === 0">
                 <div class="cleanliness-text">清洁度</div>
                 <div class="cleanliness-container">
                     <div class="cleanliness-progress" ref="cleanlinessProgress"></div>
@@ -39,7 +39,27 @@
 
         <!-- 模式 -->
         <!-- 常规模式 -->
-        <NormalMode v-show="activeTab === 0" class="normal-mode" @change-bg="nomalChangeBg($event)"></NormalMode>
+        <NormalMode
+            v-if="activeTab === 0"
+            class="normal-mode"
+            :if-run="ifRun"
+            :show-mode="showMode"
+            :show-wind="showWind"
+            :show-wind-dire="showWindDire"
+            :device-type="deviceType"
+            @change-bg="changeBg($event)"
+            @change-switch="changeSwitch($event)"
+        ></NormalMode>
+        <!-- 智慧模式 -->
+        <SmartMode
+            v-if="activeTab === 1"
+            class="smart-mode"
+            :if-run="ifRun"
+            :mode="smartMode"
+            @change-bg="changeBg($event)"
+            @change-switch="changeSwitch($event)"
+            @change-smart-mode="changeSmartMode($event)"
+        ></SmartMode>
     </div>
 </template>
 
@@ -47,7 +67,9 @@
 import { ref, onBeforeMount, onMounted, onActivated } from 'vue';
 import { useRouter, onBeforeRouteUpdate } from "vue-router";
 import NormalMode from './mode/normal.vue';
+import SmartMode from './mode/smart.vue';
 import { $commonService } from "@/services/framework/dependency-injection-service";
+import { SmartModeEnum } from './mode/enmu/smart-mode';
 
 const getImgSrc = $commonService.$imgService.getImgSrc;  
 const router = useRouter();
@@ -72,14 +94,36 @@ const cleanlinessReminderText = ref('');
 /** ref获取dom元素 */
 const cleanlinessProgress: any = ref(null);
 const cleanlinessReminder: any = ref(null);
+/** 开关机状态 */
+const ifRun = ref(false);
+/** 当前的智慧模式 */
+const smartMode = ref(SmartModeEnum.COLD);
+/** 标题名称 */
+const titelName = ref('');
+/** 模式切换是否显示 */
+const showTabs = ref(true);
+/** 模式是否显示 */
+const showMode = ref(true);
+/** 风量是否显示 */
+const showWind = ref(true);
+/** 风向是否显示 */
+const showWindDire = ref(true);
+/** 设备类型 */
+const deviceType = ref();
 
 onActivated(() => {
-    console.log(6666)
-})
-
-onBeforeMount(() => {
     // 路由参数接收
     const query: any = router.currentRoute.value.query;
+    titelName.value = query.name;
+    ifRun.value = query.openFlg === 'true'? true: false;
+    activeTab.value = parseInt(query.setMode);
+    smartMode.value = parseInt(query.smartMode);
+    deviceType.value = query.deviceType;
+    if (query.deviceType === '4E') {
+        showTabs.value = false;
+        showWind.value = false;
+        showWindDire.value = false;
+    }
 })
 
 onMounted(() => {
@@ -117,17 +161,31 @@ const switchModeTabs = (item: any) => {
     activeTab.value = item.id;
 }
 
+/** 开关机状态改变 */
+const changeSwitch = (value: boolean) => {
+    ifRun.value = value;
+}
+
 /** 
- * 监听常规模式下切换背景
+ * 监听模式下切换背景
  * @param url 背景图片静态地址
  */
-const nomalChangeBg = (url: string) => {
+const changeBg = (url: string) => {
     if (deviceDetailWrapper.value) {
         url = getImgSrc(url);
-        deviceDetailWrapper.value.style.background = `url(${url})`;
+        deviceDetailWrapper.value.style.background = `url(${url}) no-repeat`;
+        deviceDetailWrapper.value.style.backgroundSize = "100% 100%";
     }
 }
 
+/**
+ * 更换智慧模式
+ * @param mode 智慧模式
+ */
+const changeSmartMode = (mode: number) => {
+    smartMode.value = mode;
+}
+
 /** 返回上一个页面 */
 const back = () => {
     router.back();
@@ -239,5 +297,10 @@ const back = () => {
         flex: 1;
         margin-top: 23px;
     }
+
+    .smart-mode {
+        flex: 1;
+        margin-top: 23px;
+    }
 }
 </style>

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

@@ -0,0 +1,13 @@
+/** 智慧模式枚举 */
+export enum SmartModeEnum {
+    /** 偏冷 */
+    COLD,
+    /** 凉爽 */
+    COOL,
+    /** 舒适 */
+    COMFORT,
+    /** 温暖 */
+    WARM,
+    /** 偏热 */
+    HOT,
+}

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

@@ -9,7 +9,7 @@
             <div class="set-container">
                 <div class="current-value">{{ currentOptions.value }}</div>
                 <div class="current-unit">{{ currentOptions.unit }}</div>
-                <div class="treat">
+                <div class="treat" v-if="props.deviceType !== '4E'">
                     <span>{{ treatOptions.value }}{{ treatOptions.unit }}</span>
                     <img src="@/assets/imgs/device-detail/normal-mode/switch_btn@2x.png" width="100%" @click="switchTempHumi()">
                 </div>
@@ -18,26 +18,59 @@
                 <img src="@/assets/imgs/device-detail/normal-mode/set-add@2x.png" width="100%">
             </div>
         </div>
+
         <!-- 滤网未复位提示 -->
-        <div class="filter-screen-prompt">
+        <div class="filter-screen-prompt" v-if="false">
             <img src="@/assets/imgs/device-detail/normal-mode/filter_fault@2x.png" width="100%" class="filter-screen-prompt-img">
             <span>滤网未复位</span>
             <img src="@/assets/imgs/device-detail/normal-mode/right@2x.png" width="100%">
         </div>
+
+        <!-- 水模块 -->
+        <div class="water-module-wrapper" v-if="props.deviceType === '4E'">
+            <!-- 出水温度 -->
+            <div class="water-module-container outlet-water">
+                <div class="water-module-top">28℃</div>
+                <div class="water-module-btm">出水温度</div>
+            </div>
+            <!-- 回水温度 -->
+            <div class="water-module-container return-water">
+                <div class="water-module-top">24℃</div>
+                <div class="water-module-btm">回水温度</div>
+            </div>
+            <!-- 水泵状态 -->
+            <div class="water-module-container water-pump">
+                <div class="water-module-top">关闭</div>
+                <div class="water-module-btm">水泵状态</div>
+            </div>
+        </div>
+
         <!-- 模式、风量、风向、开关 -->
         <div class="setting-control">
+            <div class="setting-control-container" v-if="props.showMode">
                 <div class="circle-card mode" @click="openModePop()">
                     <img :src="getImgSrc(modeImg)">
                 </div>
+                <span>{{ modeName }}</span>
+            </div>
+            <div class="setting-control-container" v-if="props.showWind">
                 <div class="circle-card wind" @click="openWindPop()">
                     <img :src="getImgSrc(windImg)">
                 </div>
+                <span>{{ windName }}</span>
+            </div>
+            <div class="setting-control-container" v-if="props.showWindDire">
                 <div class="circle-card wind-dire">
                     <img :src="getImgSrc(windDireImg)">
                 </div>
+                <span>风向</span>
+            </div>
+            <div class="setting-control-container">
                 <div class="circle-card switch" @click="changeSwitch()">
                     <img :src="getImgSrc(onOffImg)">
                 </div>
+                <span>开关</span>
+            </div>
         </div>
 
         <!-- 模式切换弹窗 -->
@@ -59,7 +92,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onBeforeMount, onMounted } from 'vue';
+import { ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
 import { ModeOptions } from './mode-dic';
 import { WindOptions } from './wind-dic';
 import { Mode } from './enmu/mode.enmu';
@@ -67,8 +100,22 @@ import { Wind } from './enmu/wind.enmu';
 import ModeChangePop from '@/components/mode-change.vue';
 import WindChangePop from '@/components/wind-change.vue';
 import { $commonService } from '@/services/framework/dependency-injection-service';
-const getImgSrc = $commonService.$imgService.getImgSrc;
 
+const getImgSrc = $commonService.$imgService.getImgSrc;
+/** 传参 */
+const props = defineProps<{
+    /** 开关机状态 */
+    ifRun: boolean;
+    /** 是否显示模式 */
+    showMode: boolean;
+    /** 风量是否显示 */
+    showWind: boolean;
+    /** 风向是否显示 */
+    showWindDire: boolean;
+    /** 设备类型 */
+    deviceType: string;
+}>()
+const { ifRun } = toRefs(props);
 /** 温度配置 */
 const tempOptions = ref({
     titleName: '室内',
@@ -97,6 +144,8 @@ const modeOptions: any = ModeOptions;
 const windOptions: any = WindOptions;
 /** 当前选中的模式 */
 const mode = ref(Mode.COLD);
+/** 当前选中的模式名称 */
+const modeName = ref('');
 /** 模式展示的图片 */
 const modeImg = ref('');
 /** 可设定的模式数组 */
@@ -105,11 +154,13 @@ const modeList = ref<any[]>([]);
  * 开关
  * true:开 false:关
  */
-const onOff = ref(false);
+const onOff = ref(ifRun);
 /** 开关图片 */
 const onOffImg = ref('');
 /** 当前选中的风量 */
 const wind = ref(Wind.AUTO);
+/** 当前选中的风量名称 */
+const windName = ref('');
 /** 风量展示的图片 */
 const windImg = ref('');
 /** 当前风量字典数据 */
@@ -125,7 +176,7 @@ const showModePop = ref(false);
 /** 风量更改弹窗是否开启 */
 const showWindPop = ref(false);
 /** 向父组件传递事件 */
-const emit = defineEmits(['changeBg']);
+const emit = defineEmits(['changeBg', 'changeSwitch']);
 
 onBeforeMount(() => {
     currentOptions.value = {...tempOptions.value};
@@ -136,8 +187,6 @@ onBeforeMount(() => {
         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];
-
-    console.log(settableWind.value)
     getShowImg();
 })
 
@@ -157,6 +206,9 @@ const getShowImg = () => {
     const modeData = modeOptions.find((item: any) => item.mode === mode.value);
     // 获取风量字典配置数据
     getWindDic();
+    // 展示模式的文字
+    modeName.value = modeData.modeName;
+    windName.value = windData.value[`wind${wind.value}Name`];
     if (onOff.value) {
         // 开机展示模式图片
         modeImg.value = modeData.modeImg;
@@ -267,8 +319,10 @@ const closeWindPop = (params: any) => {
 
 /** 开关切换 */
 const changeSwitch = () => {
-    onOff.value = !onOff.value;
+    emit('changeSwitch', !onOff.value);
+    nextTick(() => {
         getShowImg();
+    });
 }
 </script>
 
@@ -351,12 +405,51 @@ const changeSwitch = () => {
         }
     }
     
+    // 水模块
+    .water-module-wrapper {
+        padding: 0 134px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #FFF;
+
+        .water-module-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .water-module-top {
+                font-size: 40px;
+                font-family: Roboto-Regular, Roboto, SourceHanSansCN-Regular, SourceHanSansCN;
+            }
+
+            .water-module-btm {
+                margin-top: 16px;
+                font-size: 20px;
+                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+            }
+        }
+    }
+
     .setting-control {
         margin-top: 43px;
         padding: 0 64px;
         display: flex;
         justify-content: space-between;
 
+        .setting-control-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            span {
+                color: #FFF;
+                font-size: 28px;
+                font-weight: 400;
+                margin-top: 20px;
+            }
+        }
+
         .circle-card {
             width: 110px;
             height: 110px;

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

@@ -1,37 +1,174 @@
 <!-- 智慧模式 -->
 <template>
     <div class="smart-wrapper">
-        <div>
-            <div class="swiper">
+        <div class="swiper swiper-container">
             <div class="swiper-wrapper">
                 <div class="swiper-slide" v-for="(item, index) in modeList">
                     <div class="swiper-item">
-                            {{ item }}
+                        {{ item.name }}
                     </div>
                 </div>
             </div>
+            <div class="select-wrapper">
+                <img src="@/assets/imgs/device-detail/smart-mode/select@2x.png">
+            </div>
+        </div>
+
+        <!-- 底部 -->
+        <div class="smart-btm">
+            <div class="illustrate">
+                <img src="@/assets/imgs/device-detail/smart-mode/illustrate@2x.png">
+            </div>
+            <div class="switch-btn" @click="changeSwitch()">
+                <img :src="getImgSrc(onOffImg)" alt="">
             </div>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, toRefs, onMounted, onActivated, nextTick } from 'vue';
 import { Swiper, Navigation, Pagination } from "swiper";
+import "swiper/swiper-bundle.css";
+import { SmartModeEnum } from './enmu/smart-mode';
+import { $commonService } from '@/services/framework/dependency-injection-service';
 
+const getImgSrc = $commonService.$imgService.getImgSrc;
 let mySwiper: Swiper; // 声明swiper
-const modeList = ['偏冷', '凉爽', '舒适', '温暖', '偏热']
+/** 智慧模式数组 */
+const modeList = ref<any[]>([
+    {
+        id: SmartModeEnum.COLD,
+        name: '偏冷' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cold@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cold@2x.png'
+    },
+    {
+        id: SmartModeEnum.COOL,
+        name: '凉爽' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cool@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cool@2x.png'
+    },
+    {
+        id: SmartModeEnum.COMFORT,
+        name: '舒适' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_comfort@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_comfort@2x.png'
+    },
+    {
+        id: SmartModeEnum.WARM,
+        name: '温暖' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_warm@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_warm@2x.png'
+    },
+    {
+        id: SmartModeEnum.HOT,
+        name: '偏热' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_hot@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_hot@2x.png'
+    },
+    {
+        id: SmartModeEnum.COLD,
+        name: '偏冷' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cold@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cold@2x.png'
+    },
+    {
+        id: SmartModeEnum.COOL,
+        name: '凉爽' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cool@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cool@2x.png'
+    },
+    {
+        id: SmartModeEnum.COMFORT,
+        name: '舒适' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_comfort@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_comfort@2x.png'
+    },
+    {
+        id: SmartModeEnum.WARM,
+        name: '温暖' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_warm@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_warm@2x.png'
+    },
+    {
+        id: SmartModeEnum.HOT,
+        name: '偏热' ,
+        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_hot@2x.png',
+        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_hot@2x.png'
+    },
+])
+/** 传参 */
+const props = defineProps<{
+    /** 开关机状态 */
+    ifRun: boolean;
+    /** 当前智慧模式 */
+    mode: number;
+}>()
+const { ifRun, mode } = toRefs(props);
+/** 开关机状态 */
+const onOff = ref(ifRun);
+/** 开关机图片 */
+const onOffImg = ref('');
+/** 当前的智慧模式 */
+const smartMode = ref(mode);
+/** 向父组件传递事件 */
+const emit = defineEmits(['changeBg', 'changeSwitch', 'changeSmartMode']);
 
 onMounted(() => {
     initSwiper();
+    // 获取开关机状态图片
+    getShowImg();
 })
 
 /** 初始化swiper */
 const initSwiper = () => {
+    const currentModeIndex = modeList.value.findIndex(item => item.id === smartMode.value);
+    console.log('smartMode.value', smartMode.value)
+    console.log('currentModeIndex', currentModeIndex)
     mySwiper = new Swiper('.swiper', {
-        modules: [Navigation, Pagination],
-        direction: 'horizontal', // 水平切换选项
         loop: true, // 循环模式选项
+        slidesPerView: 5, // slide可展示的数量
+        centeredSlides: true,
+        observer: true,
+        observeParents: true,
+        initialSlide: currentModeIndex === 0? 5: currentModeIndex, // 初始时展示的位置
+        on: {
+            touchStart: () => {
+            },
+            touchMove: () => {
+            },
+            slideChangeTransitionEnd: () => {
+                mySwiper && emit("changeSmartMode", modeList.value[mySwiper.realIndex].id);
+                nextTick(() => {
+                    getShowImg();
+                })
+            },
+        }
+    })
+}
+
+/** 获取展示的背景 */
+const getShowImg = () => {
+    if (onOff.value) {
+        const smartModeData = modeList.value.find(item => item.id === smartMode.value);
+        // 获取开关机状态图片
+        onOffImg.value = smartModeData.onOffImg;
+        // 向父组件发送事件，展示背景图
+        emit('changeBg', smartModeData.bgImg);
+    } else {
+        // 获取开关机状态图片
+        onOffImg.value = "/assets/imgs/device-detail/smart-mode/switch_shutdown@2x.png";
+        // 向父组件发送事件，展示背景图
+        emit('changeBg', "/assets/imgs/device-detail/smart-mode/smart_bg_shutdown@2x.png");
+    }
+}
+
+/** 开关切换 */
+const changeSwitch = () => {
+    emit('changeSwitch', !onOff.value);
+    nextTick(() => {
+        getShowImg();
     })
 }
 </script>
@@ -40,5 +177,89 @@ const initSwiper = () => {
 .smart-wrapper {
     width: 100%;
     height: 100%;
+    position: relative;
+
+    .swiper-container {
+        position: relative;
+        width: 100%;
+        height: 426px;
+
+        .select-wrapper {
+            position: absolute;
+            width: 212px;
+            height: 416px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+
+            img {
+                width: 100%;
+            }
+        }
+    }
+
+    .swiper-slide {
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: 300ms;
+        transform: scale(0.6);
+        color: rgba($color: #FFF, $alpha: .2);
+    }
+
+    .swiper-slide-active,.swiper-slide-duplicate-active{
+        transform: scale(1);
+        color: rgba($color: #FFF, $alpha: .7);
+  	}
+
+    .swiper-slide-prev, .swiper-slide-next {
+        transform: scale(0.8);
+        color: rgba($color: #FFF, $alpha: .4);
+    }
+
+    .swiper-item {
+        font-size: 60px;
+        width: 65px;
+        text-align: center;
+    }
+
+    .smart-btm {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        z-index: 99;
+
+        .illustrate {
+            margin-left: 91px;
+            width: 56px;
+            height: 56px;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .switch-btn {
+            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;
+            align-items: center;
+            justify-content: center;
+
+            img {
+                width: 56px;
+            }
+        }
+    }
 }
 </style>

src/view/tabs/device-control.vue

@@ -63,6 +63,7 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
 import router from "@/router";
+import { SmartModeEnum } from '../device-detail/mode/enmu/smart-mode';
 
 const deviceList: any = ref<any[]>([]);
 
@@ -74,35 +75,45 @@ onMounted(() => {
             deviceType: '4D',
             self_clean: 0,
             statusArr: ['34'],
-            unitArr: ['ug/m³']
+            unitArr: ['ug/m³'],
+            setMode: 0,
+            smartMode: SmartModeEnum.COLD,
         }, {
             name: '书房空调',
             openFlg: false,
             deviceType: '01',
             self_clean: 1,
             statusArr: ['24'],
-            unitArr: ['℃']
+            unitArr: ['℃'],
+            setMode: 0,
+            smartMode: SmartModeEnum.COLD,
         }, {
             name: '厨房空调',
             openFlg: true,
             deviceType: '01',
             self_clean: 2,
             statusArr: ['偏热'],
-            unitArr: []
+            unitArr: [],
+            setMode: 1,
+            smartMode: SmartModeEnum.HOT,
         }, {
             name: '主卧空调',
             openFlg: true,
             deviceType: '01',
             self_clean: 0,
             statusArr: ['偏冷'],
-            unitArr: []
+            unitArr: [],
+            setMode: 1,
+            smartMode: SmartModeEnum.COLD,
         }, {
-            name: '餐厅空调',
+            name: '水模块',
             openFlg: true,
-            deviceType: '01',
+            deviceType: '4E',
             self_clean: 0,
             statusArr: ['24'],
-            unitArr: ['℃ 设定']
+            unitArr: ['℃ 设定'],
+            setMode: 0,
+            smartMode: SmartModeEnum.COLD,
         }, {
             name: '客厅空气盒子',
             openFlg: true,
@@ -110,7 +121,9 @@ onMounted(() => {
             self_clean: 0,
             statusArr: ['25', '68'],
             unitArr: ['℃', '%'],
-            airQuality: '良'
+            airQuality: '良',
+            setMode: 0,
+            smartMode: SmartModeEnum.COLD,
         }
     ]
 })
@@ -136,7 +149,13 @@ const allShutDown = () => {
 const goToDetail = (item: any) => {
     router.push({
         path: '/device-detail',
-        query: {}
+        query: {
+            setMode: item.setMode, // 模式 0：常规 1：智慧
+            name: item.name,
+            openFlg: item.openFlg,
+            deviceType: item.deviceType,
+            smartMode: item.smartMode,
+        }
     })
 }
 </script>

src/view/tabs/tabs.vue

@@ -140,6 +140,13 @@ const pullUp = () => {
   position: relative;
   -webkit-overflow-scrolling: touch;
 
+  .swiper-pagination ::v-deep .swiper-pagination-bullet {
+    width: 40px !important;
+    height: 4px;
+    background: rgba($color: #FFF, $alpha: .8) !important;
+    border-radius: 0;
+  }
+
   .drop-down-menu {
     width: 100vw;
     height: 40px;