water_maintenance/src/components/ThreeWorldEventQingXiCheAndQv/MapGps.vue

<script setup>
import { watch, ref } from "vue";

let iframeId = ref("mapGpsIframe");
let url = ref("http://223.83.74.66:18062/nongcun/#/monitorMapLite");

</script>

<template>
    
    <div class="MapGps">
        
        <div class="main">
            
            <!-- <iframe
                :id="iframeId" :name="iframeId"
                class="iframeCom"
                scrolling="auto" frameborder="no" marginwidth="0" marginheight="0"
                :src="url"
            >
            </iframe> -->

        </div>

    </div>

</template>

<style lang="less" scoped>

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

.MapGps {

    position: fixed;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    
    .main {

        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9;

        background-image: url("../../assets/res/img/for.png");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: center center;
        
        .iframeCom {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 0;
            /* 注意这里必须是被允许穿透点击的，否则堆叠高于了  canvas，则会出现无法点击到canvas了。加了这个即可解决这个问题  */
            // pointer-events: none;
        }
        
    }

}

</style>