bbh_Yun/pc/src/views/Home.vue

<template>
  <div class="Home" @click.once="topBox2Show = true">
    <!-- 全景页面 -->
    <div class="iframeBox" v-if="iframeSrc" :key="iframeSrc">
      <iframe :src="iframeSrc" frameborder="0"></iframe>
    </div>

    <!-- 在第一展厅和第二展厅出来的背景模板 -->
    <div class="tedingBac" v-show="oneSid > 2 && zhanShow"></div>

    <!-- 音乐 -->
    <audio id="myAduio" loop src="../assets/bg.mp3"></audio>
    <!-- 右上角logo -->
    <div class="rightLogo">
      <img src="../assets/img/logo.png" alt="" />
    </div>
    <!-- 左上角 -->
    <div class="topLeft">
      <div class="back el-icon-s-home" @click="backSta"></div>
      <div class="topTit">
        <img
          title="简介"
          @click="
            topBox1Show = !topBox1Show;
            topBox3Show = false;
          "
          :src="require(`@/assets/img/left1${topBox1Show ? 'Ac' : ''}.png`)"
          alt=""
        />
        <img
          title="音乐"
          @click="topBox2Show = !topBox2Show"
          :src="require(`@/assets/img/left2${topBox2Show ? 'Ac' : ''}.png`)"
          alt=""
        />
        <img
          @click="
            topBox3Show = !topBox3Show;
            topBox1Show = false;
          "
          title="分享"
          :src="require(`@/assets/img/left3${topBox3Show ? 'Ac' : ''}.png`)"
          alt=""
        />
      </div>
    </div>
    <!-- 点击简介出来的盒子 -->
    <div class="topBox1" :class="{ topBox1Show: topBox1Show }">
      <!-- 关闭按钮 -->
      <div class="topClose" @click="topBox1Show = false">
        <img src="../assets/img/topClose.png" alt="" />
      </div>
      <h3>
        第九届“博博会”<br /><br />
        —— 新时代的博物馆：创新·发展·传承
      </h3>
      <p>
        &emsp;&emsp;“博博会”创办于2004年，已成功召开八届，是我国文博界最具影响力的盛会，是展示博物馆领域发展成果、增强中华文化自信、促进文博科技融合发展、相关技术应用创新服务升级、扩展博物馆服务社会功能、推动国内外博物馆务实合作、开拓博物馆文化产业发展新领域的重要平台，在服务我国文博事业健康可持续发展和相关行业创造性转化、创新性发展方面发挥着独特的作用。
      </p>
    </div>
    <!-- 点击分享出来的盒子 -->
    <div class="topBox3" :class="{ topBox3Show: topBox3Show }">
      <!-- 关闭按钮 -->
      <div class="topClose" @click="topBox3Show = false">
        <img src="../assets/img/topClose.png" alt="" />
      </div>
      <h3>分享页面</h3>
      <div class="url">{{ myUrl }}</div>
      <div class="btnn" @click="copyPcTxt"><div>一键复制</div></div>
    </div>
    <!-- 底部组件 -->
    <div
      class="bttomBox"
      :style="`height:${oneSid > 2 ? '256' : '213'}px;bottom:${
        bttomIsShow ? '0' : oneSid > 2 ? '-256' : '-213'
      }px`"
    >
      <div
        class="bttomIsShow"
        @click="bttomIsShow = !bttomIsShow"
        :class="bttomIsShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
      ></div>
      <Bottom2
        @zhanShowFu="zhanShowFu"
        @zhanChange="zhanChange"
        @gaoduChange="gaoduChange"
        ref="Bottom2"
      />
      <div class="shadow"></div>
      <div class="shadow right"></div>
    </div>

    <!-- 点击展厅出来的组件 -->
    <Onezhan @toZhan="toZhan" v-if="oneSid === 3" v-show="zhanShow" />
    <Towzhan @toZhan="toZhan" v-else-if="oneSid === 4" v-show="zhanShow" />
  </div>
</template>

<script>
import Bottom from "./Bottom.vue";
import Bottom2 from "./Bottom2.vue";
import Onezhan from "./Onezhan.vue";
import Towzhan from "./Towzhan.vue";
export default {
  name: "Home",
  components: { Bottom, Bottom2, Onezhan, Towzhan },
  data() {
    return {
      iframeSrc: "",

      // 选择了航拍还是展厅
      oneSid: 1,
      zhanShow: true,

      bttomIsShow: true,

      topBox1Show: false,
      topBox2Show: false,
      topBox3Show: false,
      myUrl: "",
    };
  },
  computed: {},
  watch: {
    // bttomIsShow() {
    //   this.zhanShow = true;
    // },
    // 控制背景音乐播放暂停
    topBox2Show(val) {
      if (val) document.querySelector("#myAduio").play();
      else document.querySelector("#myAduio").pause();
    },
  },
  methods: {
    // 点击左上角的返回
    backSta() {
      //回到博博会之前的开发页面
      window.location.href = "https://zzbbh.4dage.com/web/index.html";
    },
    zhanShowFu() {
      this.zhanShow = true;
    },
    toZhan(bs, id1, id2, code) {
      this.$refs.Bottom2.baseList(bs);
      this.$refs.Bottom2.getSwFu(id1, id2);
      // if (bs > 2) {
      //   this.zhanShow = false;
      // }
      this.zhanChange(code);
    },
    gaoduChange(oneSid) {
      if (oneSid > 2) this.zhanShow = true;
      this.oneSid = oneSid;
    },
    zhanChange(code) {
      this.zhanShow = false;

      // this.bttomIsShow = false;

      this.iframeSrc = `swkk.html?m=${code}`;

      console.log("VR改变了", code);
    },
    //点击复制链接
    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();
      // 下面是element的弹窗 不需要的自行删除就好
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.myUrl = window.location.href;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Home {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url("../assets/img/homeBg.jpg");
  background-size: 100% 100%;
  .iframeBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    iframe{
      width: 100%;
      height: 100%;
    }
  }
  .tedingBac {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    backdrop-filter: blur(10px);
  }
  .rightLogo {
    width: 572px;
    height: 46px;
    position: absolute;
    z-index: 10;
    top: 20px;
    right: 40px;
    & > img {
      width: 100%;
      height: 100%;
    }
  }
  .topClose {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    & > img {
      width: 18px;
      height: 18px;
    }
  }
  .topLeft {
    position: absolute;
    z-index: 10;
    top: 18px;
    left: 30px;
    display: flex;

    .back {
      cursor: pointer;
      width: 36px;
      height: 36px;
      background-image: url("../assets/img/back.png");
      background-size: 100% 100%;
      font-size: 18px;
      color: #fff;
      text-align: center;
      line-height: 36px;
      margin-right: 17px;
      transition: all 0.5s;
      border-radius: 50%;
      &:hover {
        box-shadow: 0px 0px 15px 3px black;
      }
    }
    .topTit {
      height: 36px;
      display: flex;
      align-items: center;
      border-radius: 18px;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 0 8px;
      & > img {
        display: block;
        margin: 0 5px;
        cursor: pointer;
        width: 28px;
        height: 28px;
      }
    }
  }
  .topBox1 {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    color: #fff;
    padding: 80px 65px 0px;
    position: absolute;
    z-index: 10;
    top: 70px;
    left: 64px;
    width: 457px;
    height: 600px;
    background-image: url("../assets/img/top1Bac.png");
    background-size: 100% 100%;
    & > h3 {
      font-size: 18px;
      text-align: center;
    }
    & > p {
      margin-top: 50px;
      font-size: 14px;
      line-height: 34px;
    }
  }
  .topBox1Show {
    opacity: 1;
    pointer-events: auto;
  }
  .topBox3 {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    color: #fff;
    position: absolute;
    z-index: 10;
    padding: 60px 60px 0;
    top: 70px;
    left: 64px;
    width: 457px;
    height: 295px;
    background-image: url("../assets/img/top3Bac.png");
    background-size: 100% 100%;
    & > h3 {
      font-size: 18px;
      text-align: center;
      margin-bottom: 20px;
    }
    .url {
      width: 100%;
      height: 60px;
      background-color: rgba(0, 0, 0, 0.5);
      margin: 10px 0;
      padding: 0 10px;
      line-height: 60px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .btnn {
      width: 100%;
      height: 60px;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      & > div {
        cursor: pointer;
        width: 110px;
        height: 30px;
        text-align: center;
        line-height: 28px;
        border: 1px solid #fff;
      }
    }
  }
  .topBox3Show {
    opacity: 1;
    pointer-events: auto;
  }
  .bttomBox {
    z-index: 10;
    transition: bottom 0.5s;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 1339px;
    height: 256px;
    .bttomIsShow {
      cursor: pointer;
      text-align: center;
      color: #edb8a4;
      position: absolute;
      z-index: 10;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 91px;
      height: 17px;
      background-image: url("../assets/img/bttomIsShow.png");
      background-size: 100% 100%;
    }
    .shadow {
      border-radius: 60px 0 0 0;
      position: absolute;
      z-index: 11;
      left: 0;
      top: 0;
      width: 200px;
      height: 152px;
      background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0)
      );
      pointer-events: none;
    }
    .right {
      border-radius: 0 60px 0 0;
      left: auto;
      right: 0;
      background-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0)
      );
    }
  }
}
</style>