fire-mh/src/App.vue

<template>
  <div id="app">
    <header>
      <heads class="headS"></heads>
    </header>
    <div class="viewContent">
      <!-- <keep-alive> -->
                <router-view></router-view>
      <!-- </keep-alive> -->
      <timeSelect :select="select" />
    </div>
    <div class="bg"></div>
    

    <transition name="el-fade-in-linear">
        <!-- 普通弹框 -->
      <div class="tableTooltipwt sadianTankang" v-show="stores.$state.arrayList.length > 0">
        <img src="~@a/img/icon/close.png" alt="" class="close" @click="close" />
        <el-row class="tableContent">
          <el-col class="mk" v-for="li in stores.$state.arrayList" :key="li" v-show="li.title[1]">
            <p v-show="li.title[1]">{{ li.title[0] }}</p>
            <el-row>
              <el-col v-for="ch in li.children" :key="ch" :span="ch[2]" v-show="li.title[1] && ch[1]">
                <span class="color1">{{ ch[0] }}</span>
                <span class="color2">{{ ch[1] }}</span>
              </el-col>
              <el-row style="margin-top: 10px" v-if="li.type">
                        <iframe
                        :src="li.url"
                        allowfullscreen="true"
                        style="width: 100%"
                        ></iframe>
                </el-row>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </transition>
  </div>
</template>

<script>
import heads from "@v/head";
import timeSelect from "@v/time-select";
export default {
  components: { heads, timeSelect },
  name: "App",
  data() {
    return {
      stores: this.$useStore(),
      baogao:false,
      select:null
    };
  },
  mounted() {

  },
  methods: {
    /**
     * 弹框关闭
     */
    close() {
      setTimeout(()=>{
          this.stores.$state.arrayList = [];
      },1000)
    },
  },

  computed: {
    isFollow3() {
      
      return this.stores.$state.tankuangXY; //需要监听撒点距离xy坐标
    },
  },

  watch: {
    $route(to, from) {
      if(to.fullPath == "/enforcement-dynamic"){
        this.select = "jinyinian"
      }else{
        this.select = "dangyue"
      }

      if (this.stores.$state.leftBtn) {
        this.stores.$state.leftBtn = true; //左侧收起按钮
      }
      if (this.stores.$state.leftBtn) {
        this.stores.$state.rightBtn = true; //右侧收起按钮
      }
      if (this.stores.$state.streetTown) {
        this.stores.$state.streetTown = ""; //街镇信息存储
      }
      if (this.stores.$state.tankuangXY) {
        this.stores.$state.tankuangXY = {}; //撒点弹框坐标
      }
      if (this.stores.$state.arrayList) {
        this.stores.$state.arrayList = []; //撒点弹框数据存储
      }
      if (this.stores.$state.mapSpotId) {
        this.stores.$state.mapSpotId = ""; //地图撒点id
      }
    },
    isFollow3(newVal) {
//       let height = document.getElementsByClassName("tableTooltipwt")[0].clientHeight;
//       document.getElementsByClassName("tableTooltipwt")[0].style.top = newVal.y - 100 + "px";
//       document.getElementsByClassName("tableTooltipwt")[0].style.left = newVal.x - 2.4 * 80 + "px";
    },
  },
};
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: #ccc;
  overflow: hidden !important;
//   white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.bg{
        width:100%;
        height:100%;
        position: absolute;
        top:0;
        left:0;
        background: url("~@a/img/bg.png");
        background-size: 100% 100%;
        z-index: -1;
        
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/color.scss";
#app {
  .headS {
    width: 100%;
  }
  .viewContent {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: -0.3125rem;
  }
}

.tableTooltipwt {
  width: 5rem;
  background: transparent;
  border-radius: 0.05rem;
  box-shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1);
  background: rgba(0, 29, 49, 0.5);
  font-size: 0.2rem;
  padding: 0.1875rem;
  position: fixed;
  // top: 140px;
  // right: 600px;
  z-index: 10000;
  .close {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10000;
    display: block;
  }
  .tableContent {
    p {
      @include color_primary($color-primary1);
    }

    .el-col {
      margin-top: 0.05rem;
      line-height: 0.3rem;
      text-overflow: ellipsis !important;
      white-space: normal !important;
    }
    .mk {
      margin-top: 0px;

      .color1 {
        @include color_primary($color-primary3);
      }
      .color2 {
        @include color_primary($color-primary1);
      }
    }
  }
}
</style>