edu_train_web_new/user_web/src/components/QvSimulation/QvPanel/QvPanel.vue

<script setup>
import { QvPanelStore } from "./store/QvPanelStore.js";
import { QvPanelEvent } from "./js/QvPanelEvent.js";
import { QvProcessEventStore } from "../QvProcessEvent/store/QvProcessEventStore.js";
import { QvThreeWorldCamera } from "../QvThreeWorldEvent/js/QvThreeWorldCamera.js";
import { QvEvent } from "../QvThreeWorldEvent/js/QvEvent.js";

import { computed, onMounted, onUnmounted, watch, ref } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter();


/**
 * 是否触发弹出下一步，进入下井逻辑
 */
const xiaJingEvent = () => {

    if (QvPanelStore().obj.step == 2) {

        QvEvent.find().tipsBtnsUpOpenEventCallbackMain(false);
        QvEvent.find().tipsBtnsDownOpenEventCallbackMain(true);
        QvPanelStore().obj.step = 3;

    }

}


/**
 * 连接wifi开机逻辑
 */
const powerOpenEvent = () => {

    if (
        typeof QvPanelStore().obj.wifiOkName == 'string'
        // 没有开机过
        && QvPanelStore().obj.powerOpen == false
        // 可以点击屏幕连接摄像头了
        && QvPanelStore().obj.step == 1
    ) {

        QvPanelStore().obj.powerOpen = true;
        QvPanelStore().obj.step = 2;
        QvProcessEventStore().obj.downTime = "" + new Date().getTime();

    }
    
}

/**
 * 控制弹出wifi列表
 * open         true - 弹出， false - 隐藏
 */
const wifiListMainOpenEvent = (open) => {
    QvPanelStore().obj.wifiListMainOpen = open;

    // if (open == false) {
    //     powerOpenEvent();
    // }

}

/**
 * 弹出填写wifi密码
 * open         true - 弹出， false - 隐藏
 */
const wifiEditMainOpenEvent = (open) => {
    QvPanelStore().obj.wifiEditMainOpen = open;
}

let wifiListEventJson = ref(null);

/**
 * 点击弹出要选中要连接的wifi
 * json
 * index
 */
const wifiListEvent = (json, index) => {
    // console.log(
    //     "wifiListEvent", json, index
    // );
    wifiListEventJson.value = json;
    wifiEditMainOpenEvent(true);
}

/**
 * 填写wifi密码提交
 * type         yes - 提交 , no - 取消
 */
const eidtSubmit = (type) => {

    if (type == 'yes') {
        QvPanelStore().obj.wifiOkName = wifiListEventJson.value?.name;

        if (QvPanelStore().obj.step == 0) {
            QvPanelStore().obj.step = 1;
            QvProcessEventStore().obj.downTime = "" + new Date().getTime();
        }
    }

    wifiEditMainOpenEvent(false);
    wifiListMainEvent();

}


let targetPointerRotateZUpdateEventClickTime = null;

/**
 * 触发长按点击逻辑
 * 更新目标角度
 * type     类型 0 - 增加角度， 1 - 减少角度
 */
const targetPointerRotateZUpdateEventClick = (type) => {

    if (targetPointerRotateZUpdateEventClickTime != null && targetPointerRotateZUpdateEventClickTime != undefined) {
        return;
    }

    console.log("触发长按点击逻辑", type);
    targetPointerRotateZUpdateEventClickTime = setInterval(function() {
        QvPanelEvent.find().targetPointerRotateZUpdate(type);
    }, 100);

}

/**
 * 触发弹起，移动停止逻辑
 */
const targetPointerRotateZUpdateEventEent = () => {

    if (targetPointerRotateZUpdateEventClickTime == null || targetPointerRotateZUpdateEventClickTime == undefined) {
        return;
    }

    console.log("触发弹起，移动停止逻辑");
    clearInterval(targetPointerRotateZUpdateEventClickTime);
    targetPointerRotateZUpdateEventClickTime = null;
    xiaJingEvent();

}

/**
 * 相机复位逻辑
 */
const targetPointerRotateZResetEvent = () => {
    QvPanelEvent.find().targetPointerRotateZReset();
}

/**
 * 触发长按点击逻辑
 * fov
 * type     类型 0 - 增加角度， 1 - 减少角度
 */
const targetFovUpdateEventClick = (type) => {

    if (targetPointerRotateZUpdateEventClickTime != null && targetPointerRotateZUpdateEventClickTime != undefined) {
        return;
    }

    console.log("触发长按点击逻辑", type);
    targetPointerRotateZUpdateEventClickTime = setInterval(function() {
        QvPanelEvent.find().targetFovUpdate(type);
    }, 100);

}

/**
 * 触发弹起，移动停止逻辑
 */
const targetFovUpdateEventEnd = () => {

    if (targetPointerRotateZUpdateEventClickTime == null || targetPointerRotateZUpdateEventClickTime == undefined) {
        return;
    }

    console.log("触发弹起，移动停止逻辑");
    clearInterval(targetPointerRotateZUpdateEventClickTime);
    targetPointerRotateZUpdateEventClickTime = null;
    xiaJingEvent();

}


/**
 * 触发长按点击逻辑
 * fov
 * type     类型 0 - 增加角度， 1 - 减少角度
 */
const targetVagueUpdateEventClick = (type) => {

    if (targetPointerRotateZUpdateEventClickTime != null && targetPointerRotateZUpdateEventClickTime != undefined) {
        return;
    }

    console.log("触发长按点击逻辑", type);
    targetPointerRotateZUpdateEventClickTime = setInterval(function() {
        QvPanelEvent.find().targetVagueUpdate(type);
    }, 100);

}

/**
 * 触发弹起，移动停止逻辑
 */
const targetVagueUpdateEventEnd = () => {

    if (targetPointerRotateZUpdateEventClickTime == null || targetPointerRotateZUpdateEventClickTime == undefined) {
        return;
    }

    console.log("触发弹起，移动停止逻辑");
    clearInterval(targetPointerRotateZUpdateEventClickTime);
    targetPointerRotateZUpdateEventClickTime = null;
    xiaJingEvent();

}


/**
 * 触发长按点击逻辑
 * fov
 * type     类型 0 - 增加角度， 1 - 减少角度
 */
const lightValUpdateEventClick = (type) => {

    if (targetPointerRotateZUpdateEventClickTime != null && targetPointerRotateZUpdateEventClickTime != undefined) {
        return;
    }

    console.log("触发长按点击逻辑", type);
    targetPointerRotateZUpdateEventClickTime = setInterval(function() {
        QvPanelEvent.find().lightValUpdate(type);
    }, 100);

}

/**
 * 触发弹起，移动停止逻辑
 */
const lightValUpdateEventEnd = () => {

    if (targetPointerRotateZUpdateEventClickTime == null || targetPointerRotateZUpdateEventClickTime == undefined) {
        return;
    }

    console.log("触发弹起，移动停止逻辑");
    clearInterval(targetPointerRotateZUpdateEventClickTime);
    targetPointerRotateZUpdateEventClickTime = null;
    xiaJingEvent();

}


let wifiList = ref([]);

const wifiListMainEvent = () => {

    wifiList.value = [];

    for (var i = 0; i < 30; i++) {

        var add = {
            "name" : "wifi_" + (i + 1),
            "connectBool" : false,
        };

        if (QvPanelStore().obj.wifiOkName == add.name) {
            add.connectBool = true;
        }

        wifiList.value.push(add);
    }

}

onMounted(function() {
    wifiListMainEvent();
});


/**
 * 弹出灯光UI跳转参数
 */
const lightEditOpenEvent = () => {

    QvPanelStore().obj.lightEditOpen = QvPanelStore().obj.lightEditOpen == true ? false : true;

}

/**
 * 控制环境开关
 * open
 */
const sceneConfigEvent = (open) => {

    return;
    QvThreeWorldCamera.find().skyWhiteEvent(open);

}

/**
 * 点击退出回收设备，触发下一步的逻辑
 */
const exitEvent = () => {
    // console.log(
    //     'QvEvent.find().eventName',
    //     QvEvent.find().eventName
    // );

    /**
     * 如果是下井实验，点击这个按钮，弹出提示框
     */
    if (QvEvent.find().eventName == "QV下井实验") {

        


    }

}

</script>

<template>
    <div class="QvPanel">
        
        <div class="main">

            <!-- 底部的遮罩 -->
            <div class="mainBottomTop"></div>
            <div class="mainBottomLeft"></div>
            <div class="mainBottomRight"></div>
            <div class="mainBottomBottom"></div>
            
            <img :style="'opacity:' + ( QvPanelStore().obj.vague * 0.5 ) + ';'"
            class="vagueImg" src="./assets/img/mohu.png" alt="" />

            <div v-show="QvPanelStore().obj.powerOpen == false" class="power"></div>
            
            <!-- 平板电脑边框，最顶部 -->
            <img class="bgImg" src="./assets/img/mian_ban_wai_kuang.webp"  />

            <div class="mainEvent">

                <div class="stepDiv" v-if="QvPanelStore().obj.step == 0 && QvPanelStore().obj.wifiListMainOpen == false" >请先连接WIFI</div>
                <div class="stepDiv" v-if="QvPanelStore().obj.step == 1 && QvPanelStore().obj.wifiListMainOpen == false" v-on:click="powerOpenEvent()" >WIFI连接成功,请点击屏幕连接摄像头</div>


                <!-- 连接wifi列表 -->
                <div class="wifiListMain" v-show="QvPanelStore().obj.wifiListMainOpen == true" >
                    
                    <img v-on:click="wifiListMainOpenEvent(false)" class="wifiClose" src="./assets/img/wifi/close.svg" />

                    <div class="wifiList" >

                        <div class="wifiListTitle" >
                            WIFI列表
                        </div>
                        <div class="wifiListContent commonsScrollbar">

                            <div v-on:click="wifiListEvent(item, index)"
                            class="list" v-for="(item, index) of wifiList" :key="index" >
                                <!-- {{ item.name }}
                                <div :class="'rightTxt ' + (item.connectBool == true ? 'rightTxtYes' : '')" >
                                    {{ item.connectBool == true ? '已连接' : '未连接' }}
                                </div> -->

                                <img class="wifiImgLeft" v-show="item.connectBool == false" src="./assets/img/wifi/wifi_no.svg" />
                                <img class="wifiImgLeft" v-show="item.connectBool == true" src="./assets/img/wifi/wifi_yes.svg" />

                                <div class="listCenter" >{{ item.name }}</div>

                                <img class="wifiImgRight" src="./assets/img/wifi/lock.svg" />

                            </div>

                        </div>

                    </div>

                </div>

                <!-- 弹出输入wifi密码 -->
                <div class="wifiEditMain" v-show="QvPanelStore().obj.wifiEditMainOpen == true" >
                    
                    <!-- <img v-on:click="eidtSubmit('no')" class="wifiEditClose" src="./assets/img/wifi/close.svg" /> -->

                    <div class="wifiEdit">

                        <img class="vectorImg" src="./assets/img/wifiEdit/Vector.svg" />
                        <div class="wifiEditTitle" v-if="wifiListEventJson != null" >wi-fi网络“{{ wifiListEventJson.name }}”需要WPA2密码。</div>
                        <div class="wifiEditContent">
                            密码：
                            <input class="wifiEditContentInput" placeholder="请填写wifi密码" />
                        </div>
                        <div class="wifiEditBottom">

                            <div v-on:click="eidtSubmit('no')" class="wifiBtn wifiBtnClose">取消</div>
                            <div v-on:click="eidtSubmit('yes')" class="wifiBtn">确定</div>

                        </div>

                    </div>
                    
                </div>

                <!-- 弹出灯光选项 -->
                <div class="selectLight" v-show="QvPanelStore().obj.lightEditOpen == true" >

                    <div class="edit">
                        <div class="l_2 vanFieldNew_1">

                            <van-field name="switch" label="近光" style="top: 0rem;" >
                                <template #input>
                                    <van-switch v-model="QvPanelStore().obj.lightNearOpen" />
                                </template>
                            </van-field>

                        </div>
                        <div class="l_2 vanFieldNew_1" >

                            <van-field name="switch" label="远光" style="top: 0rem;" >
                                <template #input>
                                    <van-switch v-model="QvPanelStore().obj.lightFarOpen" />
                                </template>
                            </van-field>

                        </div>
                    </div>
                    <div class="editLine" ></div>

                    <div class="edit">

                        <div class="eidtFontCom" >透光</div>
                        <div class="eidtFontCom" >{{ QvPanelStore().obj.lightVal }} % </div>

                    </div>

                    <div class="edit vanFieldNew_1">

                        <div class="editLeft" >
                            <img
                            v-on:touchend="lightValUpdateEventEnd()"
                            v-on:mouseover="lightValUpdateEventEnd()"
                            v-on:mouseout="lightValUpdateEventEnd()"
                            v-on:mouseup="lightValUpdateEventEnd()"
                            v-on:mousedown="lightValUpdateEventClick(1)"
                            class="delImg" src="./assets/img/light/del.svg" />
                        </div>

                        <div class="editCenter" >

                            <van-field name="slider">
                                <template #input>
                                    <van-slider v-model="QvPanelStore().obj.lightVal" :min="0" :max="100" :step="0.1" />
                                </template>
                            </van-field>

                        </div>
                        
                        <div class="editRight" >
                            <img
                            v-on:touchend="lightValUpdateEventEnd()"
                            v-on:mouseover="lightValUpdateEventEnd()"
                            v-on:mouseout="lightValUpdateEventEnd()"
                            v-on:mouseup="lightValUpdateEventEnd()"
                            v-on:mousedown="lightValUpdateEventClick(0)"
                            class="addImg" src="./assets/img/light/add.svg" />
                        </div>

                    </div>

                </div>
                
                <div class="leftTop">

                    <img v-on:click="wifiListMainOpenEvent(true)" v-show="QvPanelStore().obj.wifiOkName != null"
                    class="btnWifi" src="./assets/img/wifi.svg" />

                    <img v-on:click="wifiListMainOpenEvent(true)" v-show="QvPanelStore().obj.wifiOkName == null"
                    class="btnWifi" src="./assets/img/wifi_no_2.svg" />

                    <div class="electricity_1">
                        <span class="sp_1" >67</span><span class="sp_2" >%</span><span class="sp_3">终端电量</span>
                    </div>

                    <div class="electricity_2">
                        <span class="sp_1" >95</span><span class="sp_2" >%</span><span class="sp_3">主机电量</span>
                    </div>

                </div>

                <div class="rightTop">

                    <img class="btnImg" src="./assets/img/set.svg" v-on:click="wifiListMainOpenEvent(true)" />
                    <img v-on:click="exitEvent()"
                    class="btnImg" src="./assets/img/exit.svg" />

                </div>

                <div class="left">

                    <img class="leftBtnImg" src="./assets/img/left_1.svg" v-on:click="sceneConfigEvent(true)" />
                    <img class="leftBtnImg" src="./assets/img/left_2.svg" v-on:click="sceneConfigEvent(false)" />
                    <img class="leftBtnImg" src="./assets/img/left_3.svg" />
                    <img class="leftBtnImg" src="./assets/img/left_4.svg" />

                    <img class="leftBtnImg" src="./assets/img/left_5.svg"
                    v-on:click="lightEditOpenEvent()" v-show="QvPanelStore().obj.lightEditOpen == false" />

                    <img class="leftBtnImg" src="./assets/img/left_5_2.svg"
                    v-on:click="lightEditOpenEvent()" v-show="QvPanelStore().obj.lightEditOpen == true" />
                    
                </div>

                <div class="leftBottom">

                    <div
                    v-on:touchend="targetVagueUpdateEventEnd()"
                    v-on:mouseover="targetVagueUpdateEventEnd()"
                    v-on:mouseout="targetVagueUpdateEventEnd()"
                    v-on:mouseup="targetVagueUpdateEventEnd();"
                    v-on:mousedown="targetVagueUpdateEventClick(0)"
                    class="leftBottomBtn">
                        <img class="btnImg" src="./assets/img/left_bottom_add.svg" />
                    </div>

                    <div class="leftBottomBtn">
                        AF
                    </div>

                    <div
                    v-on:touchend="targetVagueUpdateEventEnd()"
                    v-on:mouseover="targetVagueUpdateEventEnd()"
                    v-on:mouseout="targetVagueUpdateEventEnd()"
                    v-on:mouseup="targetVagueUpdateEventEnd();"
                    v-on:mousedown="targetVagueUpdateEventClick(1)"
                    class="leftBottomBtn">
                        <img class="btnImg" src="./assets/img/left_bottom_del.svg" />
                    </div>

                </div>

                <div class="rightBtn rightTop_1" >
                    <img class="btnImg" src="./assets/img/video-on-fill.svg" />
                </div>

                <div class="rightBtn rightTop_2" >
                    <img class="btnImg" src="./assets/img/camera-fill.svg" />
                </div>

                <div class="rightCenter">

                    <div
                    v-on:touchend="targetFovUpdateEventEnd()"
                    v-on:mouseover="targetFovUpdateEventEnd()"
                    v-on:mouseout="targetFovUpdateEventEnd()"
                    v-on:mouseup="targetFovUpdateEventEnd();"
                    v-on:mousedown="targetFovUpdateEventClick(0)"
                    class="rightCenterBtn rightCenterBtn_1">
                        <img class="btnImg" src="./assets/img/right_add.svg" />
                    </div>

                    <div class="rightCenterBtn rightCenterBtn_2">
                        大管道
                    </div>

                    <div
                    v-on:touchend="targetFovUpdateEventEnd()"
                    v-on:mouseover="targetFovUpdateEventEnd()"
                    v-on:mouseout="targetFovUpdateEventEnd()"
                    v-on:mouseup="targetFovUpdateEventEnd();"
                    v-on:mousedown="targetFovUpdateEventClick(1)"
                    class="rightCenterBtn rightCenterBtn_3">
                        <img class="btnImg" src="./assets/img/right_del.svg" />
                    </div>

                </div>

                <div class="rightBottom">

                    <div class="rightBottomBtn"
                    v-on:touchend="targetPointerRotateZUpdateEventEent()"
                    v-on:mouseover="targetPointerRotateZUpdateEventEent()"
                    v-on:mouseout="targetPointerRotateZUpdateEventEent()"
                    v-on:mouseup="targetPointerRotateZUpdateEventEent();"
                    v-on:mousedown="targetPointerRotateZUpdateEventClick(0)" >
                        <img class="btnImg" src="./assets/img/up.svg" />
                    </div>

                    <div class="rightBottomBtn" v-on:click="targetPointerRotateZResetEvent()" >
                        <img class="btnImg" src="./assets/img/reset.svg" />
                    </div>

                    <div class="rightBottomBtn"
                    v-on:touchend="targetPointerRotateZUpdateEventEent()"
                    v-on:mouseover="targetPointerRotateZUpdateEventEent()"
                    v-on:mouseout="targetPointerRotateZUpdateEventEent()"
                    v-on:mouseup="targetPointerRotateZUpdateEventEent();"
                    v-on:mousedown="targetPointerRotateZUpdateEventClick(1)" >
                        <img class="btnImg" src="./assets/img/down.svg" />
                    </div>

                </div>

                <div class="rightBottomWheel">

                    <div class="pointerDiv" :style="'transform: rotateZ(' + QvPanelStore().obj.pointerRotateZ + 'deg);'" >
                        <img class="pointer" src="./assets/img/pointer.svg" />
                    </div>

                    <div class="txt_1">90°</div>
                    <div class="txt_2">45°</div>
                    <div class="txt_3">0°</div>
                    <div class="txt_4">-45°</div>
                    <div class="txt_5">-90°</div>

                </div>
                
            </div>

        </div>
        
    </div>
</template>

<style lang="scss" scoped>
@import "./css/commonsScrollbar.scss";

// $myScale: 1;
$myScale: 0.7;

.QvPanel * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.QvPanel {

    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    // background-color: #00000090;
    background-color: transparent;
    z-index: 9;
    
    .main {

        // position: absolute;
        // width: 62.5%;
        // height: 81%;
        // left: 18.75%;
        // top: 9.5%;

        position: absolute;
        width: 85.71rem * $myScale;
        height: 62.5rem * $myScale;
        top: 50%;
        left: 50%;
        margin: -31.25rem * $myScale 0px 0px -42.855rem * $myScale;

        z-index: 1;
        
        .mainBottomTop, .mainBottomLeft, .mainBottomRight, .mainBottomBottom {

            position: absolute;
            background-color: #000000;
            width: 300rem * $myScale;
            height: 200rem * $myScale;
            z-index: 0;

        }

        .mainBottomTop {
            left: -90rem * $myScale;
            top: -197rem * $myScale;
        }

        .mainBottomLeft {
            left: -296rem * $myScale;
            top: 0rem * $myScale;
        }

        .mainBottomRight {
            right: -296rem * $myScale;
            top: 0rem * $myScale;
        }

        .mainBottomBottom {
            left: -90rem * $myScale;
            bottom: -197rem * $myScale;
        }

        .power {
            position: absolute;
            width: 80rem * $myScale;
            height: 56rem * $myScale;
            background-color: #000000;
            border-radius: 2rem * $myScale;
            z-index: 0;
            top: 50%;
            left: 50%;
            margin: -28rem * $myScale 0px 0px -40rem * $myScale;

            color: #ffffff;
            font-size: 2rem * $myScale;
            font-weight: 600;
            
        }
        
        .vagueImg {

            position: absolute;
            width: 80rem * $myScale;
            height: 56rem * $myScale;
            background-color: #000000;
            border-radius: 2rem * $myScale;
            z-index: 0;
            top: 50%;
            left: 50%;
            margin: -28rem * $myScale 0px 0px -40rem * $myScale;

            /* 注意这里必须是被允许穿透点击的，否则堆叠高于了  canvas，则会出现无法点击到canvas了。加了这个即可解决这个问题  */
            pointer-events: none;
            
        }
        
        .bgImg {
            position: absolute;
            z-index: 100;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            /* 注意这里必须是被允许穿透点击的，否则堆叠高于了  canvas，则会出现无法点击到canvas了。加了这个即可解决这个问题  */
            pointer-events: none;
        }
        
        .mainEvent {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            
            .leftTop {
                position: absolute;
                width: 45rem * $myScale;
                height: 4.5rem * $myScale;
                top: 6.07rem * $myScale;
                // left: 6.35rem * $myScale;
                left: 6.07rem * $myScale;

                background-image: url("./assets/img/left_top.svg");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;

                // background-image: url("img/bg.png");
                // -webkit-background-size: cover;
                // -moz-background-size: cover;
                // -o-background-size: cover;
                // background-size: cover;
                
                // background-position: center center;

                .btnWifi {

                    position: absolute;
                    top: 0.64rem * $myScale;
                    left: 1.42rem * $myScale;
                    width: 3.64rem * $myScale;
                    // 手势
                    cursor:pointer;

                }

                .electricity_1, .electricity_2 {

                    position: absolute;
                    bottom: 0.71rem * $myScale;

                    .sp_1 {
                        font-size: 2.85rem * $myScale;
                        font-weight: 500;
                        color: #26D8EF;
                    }

                    .sp_2 {
                        color: #B6EAF1;
                        font-size: 1.57rem * $myScale;
                        margin: 0px 1rem * $myScale 0px 1rem * $myScale;
                    }

                    .sp_3 {
                        color: #B6EAF1;
                        font-size: 1.57rem * $myScale;
                    }

                }

                .electricity_1 {
                    left: 9.3rem * $myScale;
                }

                .electricity_2 {
                    left: 25.0rem * $myScale;
                }

            }

            .rightTop {

                position: absolute;
                top: 6.21rem * $myScale;
                right: 7.57rem * $myScale;

                .btnImg {

                    width: 4.78rem * $myScale;
                    // 手势
                    cursor:pointer;
                    margin: 0px 0.85rem * $myScale 0px 0.85rem * $myScale;

                }

            }

            .left {

                position: absolute;
                width: 5.42rem * $myScale;
                height: 28.07rem * $myScale;
                background-image: url("./assets/img/left.svg");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;

                top: 12.92rem * $myScale;
                left: 6.07rem * $myScale;

                .leftBtnImg {

                    // 手势
                    cursor:pointer;
                    width: 2.85rem * $myScale;
                    float: left;
                    margin: 1.25rem * $myScale 1.35rem * $myScale 1.25rem * $myScale 1.35rem * $myScale;

                }


            }
            
            .leftBottom {

                position: absolute;
                width: 5.42rem * $myScale;
                height: 13.85rem * $myScale;
                background-image: url("./assets/img/left_bottom.svg");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;

                left: 6.07rem * $myScale;
                bottom: 5.42rem * $myScale;

                .leftBottomBtn {

                    width: 2.85rem * $myScale;
                    height: 2.85rem * $myScale;
                    margin: 1.25rem * $myScale 1.35rem * $myScale 1.25rem * $myScale 1.35rem * $myScale;

                    // 手势
                    cursor:pointer;

                    /* 水平垂直居中,支持文字自动换行 */
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    color: #CBDEE7;
                    font-size: 1rem * $myScale;
                    font-weight: 500;

                    .btnImg {

                        width: auto;
                        height: auto;
                        max-width: 100%;
                        max-height: 100%;

                    }


                }

            }

            .rightBtn {

                width: 5.42rem * $myScale;
                height: 5.42rem * $myScale;
                
                // 手势
                cursor:pointer;

                /* 水平垂直居中,支持文字自动换行 */
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                background-image: url("./assets/img/common.svg");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;
                
                .btnImg {

                    // width: auto;
                    // height: auto;
                    // max-width: 100%;
                    // max-height: 100%;
                    width: 2.85rem * $myScale;

                }
                
            }

            .rightTop_1, .rightTop_2 {
                position: absolute;
                right: 6.07rem * $myScale;
            }

            .rightTop_1 {
                top: 12.64rem * $myScale;
            }

            .rightTop_2 {
                top: 20rem * $myScale;
            }

            .rightCenter {

                position: absolute;
                width: 5.42rem * $myScale;
                height: 13.85rem * $myScale;
                right: 6.07rem * $myScale;
                bottom: 21.28rem * $myScale;

                background-image: url("./assets/img/right.svg");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;

                .rightCenterBtn {

                    float: left;
                    width: 5.42rem * $myScale;
                    height: 3.8rem * $myScale;
                    
                    // 手势
                    cursor:pointer;

                    /* 水平垂直居中,支持文字自动换行 */
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    color: #26D8EF;
                    font-size: 1rem * $myScale;
                    font-weight: 500;

                    .btnImg {

                        // width: auto;
                        // height: auto;
                        // max-width: 100%;
                        // max-height: 100%;
                        width: 2.85rem * $myScale;

                    }

                }
                

                .rightCenterBtn_1 {
                    position: absolute;
                    top: 1rem * $myScale;
                }

                .rightCenterBtn_2 {
                    position: absolute;
                    bottom: 5rem * $myScale;
                }

                .rightCenterBtn_3 {
                    position: absolute;
                    bottom: 1rem * $myScale;
                }
                
            }

            .rightBottom {

                position: absolute;
                width: 5.42rem * $myScale;
                height: 13.85rem * $myScale;
                right: 6.07rem * $myScale;
                bottom: 5.5rem * $myScale;

                background-image: url("./assets/img/right_bottom.svg");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;

                .rightBottomBtn {

                    width: 2.85rem * $myScale;
                    height: 2.85rem * $myScale;
                    margin: 1.25rem * $myScale 1.35rem * $myScale 1.25rem * $myScale 1.35rem * $myScale;

                    // 手势
                    cursor:pointer;

                    /* 水平垂直居中,支持文字自动换行 */
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .btnImg {

                        width: auto;
                        height: auto;
                        max-width: 100%;
                        max-height: 100%;

                    }

                }

            }

            .rightBottomWheel {

                position: absolute;
                width: 6.78rem * $myScale;
                height: 13.5rem * $myScale;
                right: 12.07rem * $myScale;
                bottom: 5.64rem * $myScale;

                overflow: hidden;

                background-image: url("./assets/img/compass.svg");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;
                
                .pointerDiv {
                    position: absolute;
                    width: 13.5rem * $myScale;
                    height: 13.5rem * $myScale;
                    top: 0px;
                    left: 0px;

                    transform: rotateZ(0deg);

                    .pointer {
                        position: absolute;
                        width: 4.35rem * $myScale;
                        height: 0.64rem * $myScale;
                        top: 50%;
                        margin: -0.32rem * $myScale 0px 0px -4.35rem * $myScale;
                        left: 50%;
                        
                    }

                }

                .txt_1, .txt_2, .txt_3, .txt_4, .txt_5 {

                    position: absolute;
                    font-size: 0.71rem * $myScale;
                    color: #B9C5CA;

                }

                .txt_1 {
                    top: 0.65rem * $myScale;
                    right: 0.42rem * $myScale;
                }

                .txt_2 {
                    top: 2.5rem * $myScale;
                    right: 3.65rem * $myScale;
                }

                .txt_3 {
                    top: 6.42rem * $myScale;
                    right: 5.57rem * $myScale;
                }

                .txt_4 {
                    bottom: 2.5rem * $myScale;
                    right: 3.65rem * $myScale;
                }
                
                .txt_5 {
                    bottom: 0.65rem * $myScale;
                    right: 0.42rem * $myScale;
                }
                
            }

            .wifiListMain {

                position: absolute;
                z-index: 3;
                background-color: #00000090;
                top: 2rem * $myScale;
                bottom: 2rem * $myScale;
                left: 3rem * $myScale;
                right: 3rem * $myScale;

                .wifiClose {
                    position: absolute;
                    width: 1.71rem * $myScale;
                    height: 1.71rem * $myScale;
                    // 手势
                    cursor:pointer;
                    top: 18.5rem * $myScale;
                    right: 26.5rem * $myScale;
                }

                .wifiList {

                    position: absolute;

                    width: 22.6rem * $myScale;
                    height: 18rem * $myScale;
                    top: 50%;
                    left: 50%;
                    margin: -9rem * $myScale 0px 0px -11.3rem * $myScale;

                    background-image: url("./assets/img/wifi/wifi_list_bg.svg");
                    -webkit-background-size: 100% 100%;
                    -moz-background-size: 100% 100%;
                    -o-background-size: 100% 100%;
                    background-size: 100% 100%;

                    .wifiListTitle {

                        position: absolute;
                        top: 0px;
                        left: 0px;
                        width: 100%;
                        font-size: 1.28rem * $myScale;
                        height: 3.57rem * $myScale;
                        line-height: 3.57rem * $myScale;
                        border-bottom: 1px solid #1e3f4b;
                        font-weight: 400;
                        color: #FFFFFF;
                        padding: 0px 0px 0px 1.92rem * $myScale;
                        
                    }

                    .wifiListContent {

                        position: absolute;
                        top: 3.57rem * $myScale;
                        left: 0px;
                        width: 100%;
                        bottom: 0px;

                        .list {

                            position: relative;
                            font-size: 1.28rem * $myScale;
                            height: 1.85rem * $myScale;
                            line-height: 1.85rem * $myScale;
                            font-weight: 400;
                            color: #FFFFFF;
                            margin: 0.35rem * $myScale 0px 0.35rem * $myScale 0px;

                            .wifiImgLeft {
                                position: absolute;
                                width: 1.85rem * $myScale;
                                height: 1.85rem * $myScale;
                                top: 0px;
                                left: 1.92rem * $myScale;
                            }

                            .listCenter {
                                position: absolute;
                                left: 4.85rem * $myScale;
                                height: 100%;
                                height: 1.85rem * $myScale;
                                
                            }

                            .wifiImgRight {

                                position: absolute;
                                width: 1.57rem * $myScale;
                                height: 1.57rem * $myScale;
                                top: 0.14rem * $myScale;
                                right: 2rem * $myScale;

                            }
                            
                        }

                    }

                }

            }


            .wifiEditMain {

                position: absolute;
                z-index: 3;
                background-color: #00000090;
                top: 2rem * $myScale;
                bottom: 2rem * $myScale;
                left: 3rem * $myScale;
                right: 3rem * $myScale;

                /* 水平垂直居中,支持文字自动换行 */
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .wifiEditClose {
                    position: absolute;
                    width: 1.71rem * $myScale;
                    height: 1.71rem * $myScale;
                    // 手势
                    cursor:pointer;
                    top: 18.5rem * $myScale;
                    right: 22.5rem * $myScale;
                }

                .wifiEdit {

                    position: relative;
                    
                    background-image: url("./assets/img/wifiEdit/bg.svg");
                    -webkit-background-size: 100% 100%;
                    -moz-background-size: 100% 100%;
                    -o-background-size: 100% 100%;
                    background-size: 100% 100%;

                    width: 31.64rem * $myScale;
                    height: 17.92rem * $myScale;

                    .vectorImg {
                        position: absolute;
                        width: 3.61rem * $myScale;
                        top: 2.07rem * $myScale;
                        left: 2.35rem * $myScale;
                    }

                    .wifiEditTitle {
                        
                        position: absolute;
                        top: 2.42rem * $myScale;
                        left: 7.14rem * $myScale;
                        width: 21.78rem * $myScale;
                        font-size: 1.14rem * $myScale;
                        color: #FFFFFF;

                        // 换行
                        word-break: break-all;
                        /** 让文本带有 \n 自动换行 */
                        white-space: pre-wrap;
                        // text-wrap: normal;
                        // white-space: normal;
                        
                    }

                    .wifiEditContent {
                        position: absolute;
                        top: 8.42rem * $myScale;
                        left: 7.28rem * $myScale;
                        height: 4rem * $myScale;
                        // background-color: brown;
                        color: #ffffff;

                        .wifiEditContentInput {
                            
                            // 重置所有样式
                            all: initial;
                            position: relative;
                            border: 1px solid #2474a9;
                            width: 16rem * $myScale;
                            
                            height: 1.57rem * $myScale;
                            line-height: 1.57rem * $myScale;
                            border-radius: 0.0rem * $myScale;

                            color: #ffffff;
                            font-size: 1.14rem * $myScale;
                            padding: 0px 0.5rem * $myScale 0px 0.5rem * $myScale;
                            
                            &:hover {
                                border: 1px solid #00aeff;
                            }

                        }

                        .wifiEditContentInput::placeholder {
                            font-size: 1.14rem * $myScale;
                            color: #d3c5c5;
                        }
                        
                    }
                    
                    .wifiEditBottom {
                        
                        position: absolute;
                        bottom: 3.85rem * $myScale;
                        right: 2.5rem * $myScale;

                        .wifiBtn {
                            background-color: #0894FF;
                            border-radius: 0.21rem * $myScale;
                            color: #ffffff;
                            display: inline-block;
                            padding: 0.21rem * $myScale 1rem * $myScale 0.21rem * $myScale 1rem * $myScale;
                            margin: 0px 0.89rem * $myScale 0px 0.89rem * $myScale;
                        }

                        .wifiBtnClose {
                            background-color: #D9D9D9;
                            color: #0F333F;
                        }

                    }

                }


            }

            .stepDiv {

                position: absolute;
                width: 50rem * $myScale;
                height: 20rem * $myScale;
                background-color: #000000;
                border-radius: 2rem * $myScale;
                z-index: 3;
                top: 50%;
                left: 50%;
                margin: -10rem * $myScale 0px 0px -25rem * $myScale;

                color: #ffffff;
                font-size: 2rem * $myScale;
                font-weight: 600;

                // 手势
                cursor:pointer;

                /* 水平垂直居中,支持文字自动换行 */
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

            }

            .selectLight {

                position: absolute;
                width: 31.64rem * $myScale;
                height: 17.92rem * $myScale;
                bottom: 8rem * $myScale;
                left: 14rem * $myScale;
                z-index: 3;

                background-image: url("./assets/img/light/bg.webp");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;

                .edit {
                    position: relative;
                    width: 100%;
                    height: 5.66rem * $myScale;

                    .l_2 {
                        display: inline-block;
                        height: 100%;
                        width: 49.5%;
                    }

                    .eidtFontCom {

                        display: inline-flex;
                        align-items: center;
                        height: 100%;
                        color: #FFFFFF;
                        font-size: 1.57rem * $myScale;
                        margin: 0px 2.85rem * $myScale 0px 2.85rem * $myScale;

                    }

                    .editLeft, .editCenter, .editRight {

                        position: absolute;
                        top: 0px;
                        height: 100%;

                    }

                    .editLeft {
                        left: 1rem * $myScale;
                        width: 6rem * $myScale;

                        /* 水平垂直居中,支持文字自动换行 */
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        
                    }

                    .editCenter {
                        left: 6rem * $myScale;
                        right: 6rem * $myScale;
                    }

                    .editRight {
                        right: 1rem * $myScale;
                        width: 6rem * $myScale;

                        /* 水平垂直居中,支持文字自动换行 */
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        
                    }

                    .delImg, .addImg {
                        width: 2.14rem * $myScale;
                        // 手势
                        cursor:pointer;
                    }

                }

                .editLine {
                    position: relative;
                    width: 90%;
                    left: 5%;
                    height: 1px;
                    background-color: #264751;
                }


            }

        }

    }
    
}

</style>