wanwuqinag/src/views/Home.vue

<template>
  <div
    class="home"
    :style="{ backgroundImage: `url(${require('@/assets/images/bg.jpg')})` }"
  >
    <div class="title">
      <img :src="require('@/assets/images/poster-title1.png')" alt="" />
      <img :src="require('@/assets/images/4DWall.png')" alt="" />
    </div>
    <div class="con">
      <lunbo
        v-if="active"
        :id="'top'"
        :active="active"
        :data="topItem"
        class="top"
        @openIframe="openIframe"
      />
      <lunbo
        v-if="active && reInit"
        :id="'bottom'"
        :active="active"
        class="bottom"
        :data="bottomItem"
        @openIframe="openIframe"
        :isReverse="true"
      />
    </div>

    <div id="iframe-container" v-if="iframeShow">
      <div class="namebox">
        <img src="@/assets/images/namebox.png" />
        <div class="name">{{ name }}</div>
      </div>
      <iframe id="iframe" :src="iframeUrl" />
      <img id="iframeback" src="@/assets/images/iframeback.png" />
      <div id="iframeCancel" @click="iframeShow = false">
        <img src="@/assets/images/iframeCancel.png" />
      </div>
      <span id="companyText" class="loading animated"
        >四维时代提供技术支持</span
      >
    </div>
    <ul class="list">
      <li
        @click="handleItem(item)"
        :class="{ active: active == item.id }"
        v-for="(item, i) in menu"
        :key="i"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import lunbo from "@/components/lunbo";
import { menu } from "@/data/data";
function divideArr(arr) {
  var front = [];
  var back = [];
  for (var i = 0; i < arr.length / 2; i++) {
    let f = arr[i * 2];
    let b = arr[i * 2 + 1];
    f && front.push(f);
    b && back.push(b);
  }
  return { front, back };
}
export default {
  components: { lunbo },
  data() {
    return {
      menu,
      active: "gaochun",
      iframeShow: false,
      iframeUrl: "",
      name: "",
      reInit: true,
    };
  },
  methods: {
    openIframe(data) {
      this.iframeUrl = data.url;
      this.iframeShow = data.isShow;
      this.name = data.name;
    },
    handleItem(item) {
      this.active = "";
      this.iframeShow = false;
      setTimeout(() => {
        this.active = item.id;
      });
    },
  },
  computed: {
    topItem() {
      let tmp = menu.find((item) => item.id == this.active);
      return divideArr(tmp.list).front;
    },
    bottomItem() {
      let tmp = menu.find((item) => item.id == this.active);
      return divideArr(tmp.list).back;
    },
  },
  mounted() {
    this.$nextTick(() => {
      document.addEventListener("visibilitychange", () => {
        this.reInit = false;
        setTimeout(() => {
          this.reInit = true;
        });
      });
    });
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  .title {
    padding-top: 3.6vw;
    > img {
      display: block;
      margin: 0 auto;
    }
  }
  .con {
    .top {
      width: 100%;
      margin-right: 0;
    }
    .bottom {
      width: 100%;
      margin-left: 0;
    }
  }

  #iframe-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 995px;
    height: 591px;
    background-color: #787878;
    margin: 0;
    z-index: 99999999;
    #iframeback {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      pointer-events: none;
      z-index: 999999999;
    }
    #companyText {
      position: absolute;
      z-index: 1;
      font-size: 16px;
      color: rgb(153, 153, 153);
      font-weight: 100;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
      letter-spacing: 1px;
      text-shadow: rgb(51 51 51) 0px 1px 1px;
    }
    .namebox {
      position: absolute;
      top: 57px;
      right: 124px;
      width: 57px;
      height: 337px;
      z-index: 999999999;
      .name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 18px;
        margin: 0 auto;
        word-wrap: break-word;
        word-break: break-all;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 23px;
        color: #ffffff;
        text-shadow: 0px 0px 6px #000000;
        letter-spacing: 24px;
      }
    }
    #iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #iframeCancel {
      position: absolute;
      top: 13px;
      right: 13px;
      width: 18px;
      height: 18px;
      color: #ffffff;
      font-size: 20px;
      &:hover {
        cursor: pointer;
      }
      > img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .list {
    position: absolute;
    bottom: 2.8vw;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    > li {
      display: inline-block;
      margin: 0 10px;
      color: rgba(255, 255, 255, 0.65);
      font-weight: bold;
      font-size: 16px;
      letter-spacing: 1px;
      &.active,
      &:hover {
        color: #9c8e4f;
        cursor: pointer;
      }
    }
  }
}
</style>