nacxj/src/views/Map.vue

<template>
  <div>
    <div class="content type-zwdt" data-item="type-zwdt">
      <div class="content-title">
        <img src="images/title-zwdt.png" alt=""><span>政务地图</span>
      </div>
      <div class="content-content" style="background-color: white;">
        <iframe id="mainIframe" name="mainIframe" :src="url" scrolling="no" frameborder="no" border="0" marginwidth="0"
                marginheight="0" allowtransparency="yes" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "website",
  data() {
    return {
      url: 'https://data.cqna.gov.cn/district2/sy.html'
    }
  },
  methods: {
    goToMain() {
      this.$router.push("/");
    }
  },
  mounted() {
    //设置多少秒跳转
    var mtReturnTime = 120;
    //剩余秒数
    var myTime = 120;
    this.timer = setInterval(() => {
      myTime--;
      document.getElementById("secondText").innerHTML = "(" + myTime + ")";
      //0秒跳转目标页面
      if (myTime == 0) {
        this.$router.push("/");
      }
    }, 1000);

    //设置各类监听事件
    var body = document.querySelector('html');
    body.addEventListener("click", function () {
      myTime = mtReturnTime
    });

    body.addEventListener("keydown", function () {
      myTime = mtReturnTime
    });
    body.addEventListener("mousemove", function () {
      myTime = mtReturnTime
    });
    body.addEventListener("mousewheel", function () {
      myTime = mtReturnTime
    });
    document.addEventListener("scroll", function () {
      myTime = mtReturnTime
    });
  },
  //页面关闭销毁定时器
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
}
</script>

<style scoped>
#mainIframe {
  width: 100%;
  height: 100%;
  border: 0.0625rem solid #B3D4FF;
  border-radius: 1.25rem;
}
</style>