nacxj/src/views/WindowLayout.vue

<template>
  <div>
    <div class="content type-ckbj" data-item="type-ckbj">
      <div class="content-title">
        <img src="images/title-ckbj.png" alt=""><span>窗口布局</span>
      </div>
      <div class="content-content">
        <ul class="taps-left">
          <li @click="liTo(1)" v-bind:class='{ click: 1 == qwerqwre }'>一楼</li>
          <li @click="liTo(2)" v-bind:class='{ click: 2 == qwerqwre }'>二楼</li>
          <li @click="liTo(3)" v-bind:class='{ click: 3 == qwerqwre }'>三楼</li>
        </ul>
        <div style="position:absolute;margin-left: 312px;margin-top: 55px;">
          <p style="font-size: 22px;color: #ffffff;position:absolute;margin-left: 76px;margin-top: 20px;">南岸区政务服务中心</p>
          <img src="images/ckbj-zw.png">
        </div>
        <div v-if="qwerqwre == 1" class="tabs-right"><img src="images/oneFloor.png"></div>
        <div v-if="qwerqwre == 2" class="tabs-right"><img src="images/secondFloor.png"></div>
        <div v-if="qwerqwre == 3" class="tabs-right"><img src="images/thirdFloor.png"></div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../api/index';

export default {
  name: "windowLayout",
  created() {
    this.getData();
  },
  data() {
    return {
      qwerqwre: 1,
      ImageUrl: 'images/oneFloor.png'
    }
  },
  methods: {
    getData() {
      // let params = {
      //   type: 1,
      //   childType: this.childType
      // }
      // api.getArticleByType({
      //   params
      // }).then(res => {
      //   if (res.data.data != null) {
      //     this.title = res.data.data[0].title;
      //     this.content = res.data.data[0].content;
      //   }
      // })
    },
    liTo(obj) {
      this.qwerqwre = obj;
      // this.getData();
    }
  },
  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>
.type-ckbj .content-title img {
  width: 3.625rem;
  height: 3.5625rem;
  margin: 0.125rem 1.25rem 0 0;
}

.type-ckbj .content-content {
  position: relative;
  background: rgb(0, 0, 0, 0.4);
}

.taps-left {
  position: absolute;
  width: 9.375rem;
  margin-top: 1.1875rem;
  margin-left: 2.625rem;
}

.taps-left li {
  width: 6.75rem;
  height: 2.5rem;
  line-height: 2.5rem;
  background: #A37C67;
  text-align: center;
  margin-top: 0.625rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: #FFFFFF;
}

.taps-left li.click {
  background: #CBB486;
}

.tabs-right {
  width: 70rem;
  height: 43.6875rem;
  margin-left: 345px;
  margin-top: 105px;
  background-size: 100% 100%;
}
</style>