bbh_Yun/mo/src/views/Home.vue

<template>
  <div class="Home" @click.once="oneMusicPlay" :class="{ noneBac: iframeSrc }">
    <div class="hengPing" :class="{ hengPingAc: hengPing }">
      <img src="../assets/img/landtip.png" alt="" />
      <p>请竖屏浏览</p>
    </div>
    <!-- 全景页面 -->
    <div class="iframeBox" v-if="iframeSrc" :key="iframeSrc">
      <iframe :src="iframeSrc" frameborder="0" v-if="box3Ac < 3"></iframe>
      <iframe :src="iframeSrc" frameborder="0" v-else></iframe>
    </div>
    <!-- 音乐 -->
    <audio id="myAduio" loop src="../assets/bg.mp3"></audio>

    <!-- 右上角的logo -->
    <div class="rigLogo">
      <img src="../assets/img/logo.png" alt="" />
    </div>
    <!-- 左上角的inco -->
    <div class="topInco">
      <div class="toHome" @click="backSta"></div>
      <div class="toMean" :class="{ open: toMeanShow, listIncoAc: box3Ac > 2 }">
        <div class="mena" @click="toMeanShow = !toMeanShow">
          <img
            :src="require(`@/assets/img/mean${toMeanShow ? 'Ac' : ''}.png`)"
            alt=""
          />
        </div>
        <div
          class="mena1"
          v-for="item in menaData"
          :key="item.id"
          @click="cutLeft(item)"
        >
          <img
            :src="
              require(`@/assets/img/mean${item.id}${item.done ? 'Ac' : ''}.png`)
            "
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- 背景模糊 -->
    <div
      class="bacMoHu"
      v-show="box3Ac == 3 || box3Ac == 4"
      v-if="listCut"
    ></div>
    <div
      class="bacMoHu bacMoHu2"
      v-show="menaData[0].done || menaData[2].done"
    ></div>
    <!-- 简介 音乐 分享 -->
    <div class="meanBox1" :class="{ meanBox1Show: menaData[0].done }">
      <img src="../assets/img/meanBox1.png" alt="" />
      <div>
        <div class="close" @click="menaData[0].done = false">
          <img src="../assets/img/close.png" alt="" />
        </div>
        <h3>
          第九届“博博会”<br /><br />
          —— 新时代的博物馆：创新·发展·传承
        </h3>
        <p>
          &emsp;&emsp;“博博会”创办于2004年，已成功召开八届，是我国文博界最具影响力的盛会，是展示博物馆领域发展成果、增强中华文化自信、促进文博科技融合发展、相关技术应用创新服务升级、扩展博物馆服务社会功能、推动国内外博物馆务实合作、开拓博物馆文化产业发展新领域的重要平台，在服务我国文博事业健康可持续发展和相关行业创造性转化、创新性发展方面发挥着独特的作用。
        </p>
      </div>
    </div>
    <div class="meanBox3" :class="{ meanBox3Show: menaData[2].done }">
      <img src="../assets/img/meanBox3.png" alt="" />
      <div>
        <div class="close close2" @click="menaData[2].done = false">
          <img src="../assets/img/close.png" alt="" />
        </div>
        <h3>分享页面</h3>
        <div class="link">
          <p>{{ myUrl }}</p>
        </div>
        <div class="btnn">
          <p @click="copyPcTxt">一键复制</p>
        </div>
      </div>
    </div>
    <!-- 底部和盒子 -->
    <Bottom
      @changeVR="changeVR"
      @mengBan="mengBan"
      ref="Bottom"
      @lishShow="listCut = true"
      @fenQuB_L="fenQuB_L"
      @VRActive="VRActive"
      @incoMove="incoMove"
    />
    <!-- 地图列表 -->
    <List
      ref="List"
      @fenQuChange="fenQuChange"
      v-if="box3Ac > 2"
      :box3Ac="box3Ac"
      @toZhan="toZhan"
      v-show="listCut"
    />
    <div
      class="listInco"
      v-if="box3Ac > 2"
      @click="listCut = !listCut"
      :style="`background-color:${listCut ? '#d06814' : 'rgba(0, 0, 0, 0.4)'}`"
    >
      <img :src="require('@/assets/img/listShow.png')" alt="" />
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import Bottom from "./bottom.vue";
import List from "./List.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Bottom, List },
  data() {
    //这里存放数据
    return {
      iframeSrc: "",

      myUrl: "",
      // 控制背景模糊和左边菜单展开收起
      toMeanShow: false,
      menaData: [
        { id: 1, name: "简介", done: false },
        { id: 2, name: "音乐", done: false },
        { id: 3, name: "分享", done: false },
      ],
      box3Ac: null,
      listCut: true,
      // 横屏
      hengPing: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    toMeanShow(val) {
      if (!val) {
        this.menaData[2].done = this.menaData[0].done = false;
        // 控制子组件收起和展开
      }
      // else  this.$refs.Bottom.openBotton(val);
    },
  },
  //方法集合
  methods: {
    // 控制室内场景的inco位移incoMove
    incoMove(val) {
      let dom = document.querySelector(".iframeBox iframe");
      if (dom && this.box3Ac > 2) {
        dom.contentWindow.incoMove(val);
        // let domSon =dom.contentWindow.document.querySelector('.inco');
        // console.log(dom.contentWindow);
        // console.log(dom.contentWindow.incoMove);
        // console.log('------',domSon);

        // setTimeout(() => {
        //   console.log('------',dom.contentWindow);
        //   dom.contentWindow.incoMove(val);
        // }, 200);
      }
    },
    // 点击左上角的返回
    backSta() {
      //回到博博会之前的开发页面
      window.location.href = "https://zzbbh.4dage.com/webM/index.html";
    },
    VRActive(id) {
      if (this.$refs.List) this.$refs.List.VRActive(id);
    },
    fenQuB_L(id) {
      this.$refs.List.quChange({ id }, true);
    },
    fenQuChange(id) {
      this.$refs.Bottom.box2Cut({ id }, Number(id - 1));
    },
    // 列表页操作底部页
    toZhan(id1, id2, code) {
      this.changeVR(code);
      this.$refs.Bottom.box2Cut({ id: id1 }, Number(id1 - 1));
      this.$refs.Bottom.getSwFu(id1, id2);
    },

    mengBan(box3Ac) {
      this.box3Ac = box3Ac;
    },
    changeVR(code) {
      if (this.box3Ac < 3) {
        this.iframeSrc = `https://zzbbh.4dage.com/SWKK/show.html?id=WK1564638850838523904&vr=${code}`;
      } else this.iframeSrc = `swkk.html?m=${code}`;

      console.log("vr改变了", code);
      this.listCut = false;
    },
    //点击复制链接
    copyPcTxt() {
      // 存储传递过来的数据
      let OrderNumber = window.location.href;
      // 创建一个input 元素
      // createElement() 方法通过指定名称创建一个元素
      let newInput = document.createElement("input");
      // 讲存储的数据赋值给input的value值
      newInput.value = OrderNumber;
      // appendChild() 方法向节点添加最后一个子节点。
      document.body.appendChild(newInput);
      // 选中input元素中的文本
      // select() 方法用于选择该元素中的文本。
      newInput.select();
      // 执行浏览器复制命令
      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
      document.execCommand("Copy");
      // 清空输入框
      newInput.remove();
      Notify({ type: "success", message: "复制成功" });
    },
    // 只触发一次的音乐播放事件
    oneMusicPlay() {
      // this.toMeanShow = true;
      this.cutLeft(this.menaData[1]);
    },
    // 左上角的切换
    cutLeft(item) {
      item.done = !item.done;
      if (item.id == 1) {
        this.menaData[2].done = false;
        // this.$refs.Bottom.openBotton(true);
      } else if (item.id == 3) this.menaData[0].done = false;
      else {
        if (item.done) document.querySelector("#myAduio").play();
        else document.querySelector("#myAduio").pause();
      }
    },
    // 判断是否是横批方法
    renderResize() {
      // 判断横竖屏
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      if (width > height) this.hengPing = true;
      else this.hengPing = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.myUrl = window.location.href;
    this.renderResize();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 监听 resize 方法
    window.addEventListener("resize", this.renderResize, false);
    // 控制背景音乐大小
    let audioYL = document.querySelector("#myAduio");
    audioYL.volume = 0.5;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.noneBac {
  background: black !important;
}
.Home {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/homeBac.jpg");
  background-size: 100% 100%;
  position: relative;
  .hengPing {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: rgba(0, 0, 0, 0.8);
    & > img {
      max-width: 80%;
      max-height: 80%;
    }
    & > p {
      color: #fff;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
    }
  }
  .hengPingAc {
    opacity: 1;
    pointer-events: auto;
  }
  .iframeBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    iframe {
      width: 100%;
      height: 100%;
    }
  }
  .listInco {
    position: absolute;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    left: 18px;
    top: 80px;
    & > img {
      width: 100%;
      height: 100%;
    }
  }
  .rigLogo {
    z-index: 10;
    position: absolute;
    right: 18px;
    top: 26px;
    width: 240px;
    & > img {
      width: 100%;
    }
  }
  .bacMoHu {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    backdrop-filter: blur(10px);
  }
  .bacMoHu2 {
    z-index: 9;
  }
  .meanBox1 {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    position: absolute;
    z-index: 20;
    top: 115px;
    left: 56%;
    transform: translateX(-50%);
    & > img {
      width: calc(100vw - 100px);
      max-width: 400px;
    }
    div::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
    & > div {
      position: absolute;
      width: 90%;
      height: 88%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      padding: 0 15px;
      font-size: 12px;
      overflow-y: auto;
      & > h3 {
        margin: 20px 0;
        text-align: center;
        font-weight: 700;
      }
      & > p {
        line-height: 24px;
      }
    }
    @media screen and (min-width: 400px) {
      & > div {
        font-size: 14px;
      }
    }
    @media screen and (min-width: 420px) {
      & > div {
        line-height: 28px;
        padding: 0 24px;
      }
    }
    // width: 280px;
    // height: 244px;
    // background-image: url('../assets/img/menaBox1.png');
    // background-size: 100% 100%;
  }
  .meanBox1Show {
    opacity: 1;
    pointer-events: auto;
  }
  .close {
    position: absolute;
    top: 0px;
    right: 10px;
    width: 20px;
    height: 20px;
    & > img {
      width: 100%;
      height: 100%;
    }
  }
  .close2 {
    top: 10px;
  }
  .meanBox3 {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    position: absolute;
    z-index: 20;
    top: 115px;
    left: 56%;
    transform: translateX(-50%);
    & > img {
      width: calc(100vw - 100px);
      max-width: 400px;
    }
    & > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      width: 90%;
      height: 88%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      padding: 20px;
      & > h3 {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
      }
      .link {
        max-height: 60px;
        min-height: 24px;
        font-size: 12px;
        width: 100%;
        height: calc(50% - 50px);
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        & > p {
          padding: 0 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .btnn {
        min-height: 24px;
        max-height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 40px;
        height: calc(50% - 50px);
        background-color: rgba(0, 0, 0, 0.4);
        position: relative;
        & > p {
          position: relative;
          padding: 0 24px;
          &::after {
            content: "";
            position: absolute;
            left: 0;
            top: -4px;
            width: 2px;
            height: 24px;
            background-image: linear-gradient(
              rgba(255, 255, 255, 0.1),
              rgba(255, 255, 255, 0.6),
              rgba(255, 255, 255, 0.1)
            );
          }
          &::before {
            content: "";
            position: absolute;
            right: 0;
            top: -4px;
            width: 2px;
            height: 24px;
            background-image: linear-gradient(
              rgba(255, 255, 255, 0.1),
              rgba(255, 255, 255, 0.6),
              rgba(255, 255, 255, 0.1)
            );
          }
        }
      }
    }
  }
  .meanBox3Show {
    opacity: 1;
    pointer-events: auto;
  }
  .topInco {
    position: absolute;
    z-index: 10;
    top: 18px;
    left: 18px;
    .toHome {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-image: url("../assets/img/Home.png");
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .toMean {
      transition: height 0.3s;
      margin-top: 20px;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background-color: rgba(0, 0, 0, 0.4);
      overflow: hidden;
      & > div {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: 8px;
        & > img {
          width: 32px;
          height: 32px;
        }
        &::after {
          content: "";
          position: absolute;
          left: 4px;
          width: 32px;
          bottom: -3px;
          height: 1px;
          background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.4),
            rgba(255, 255, 255, 0.1)
          );
        }
        &:last-child {
          &::after {
            width: 0px;
            height: 0px;
          }
        }
      }
      .mena {
        margin-top: 0;
        img {
          width: 28px;
          height: 28px;
        }
      }
    }
    .open {
      height: 188px;
    }
    .listIncoAc {
      margin-top: 85px;
    }
  }
}
</style>