ZGZQBWG/hot/src/views/Home.vue

<template>
  <div class="home">
    <div class="main">
      <div class="mainCon" v-show="!oneTxt">
        <!-- 音频播放器 -->
        <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="audio" controls></audio>
        <!-- 音频图标 -->
        <div class="audioIcon" v-if="audio && !isOneAduio" @click="audioSta = !audioSta"
          :title="audioSta ? '关闭音频' : '打开音频'">
          <img :src="require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
            " alt="" />
        </div>

        <!-- 如果只有一个模块 -->
        <div class="oneTabNum" v-if="flooTab.length === 1 && data[myType] && data[myType].length">
          {{ myInd + 1 }} / {{ data[myType].length }}
        </div>

        <!-- 底部的tab -->
        <div class="flooTabBox" v-if="flooTab.length > 1">
          <div @click="myType = item.type" class="tabRow" :class="{ tabRowAc: myType === item.type }"
            v-for="item in flooTab" :key="item.id">
            <img :src="require(`@/assets/images/pc/icon${item.id}${myType === item.type ? 'Ac' : ''
              }.png`)
              " alt="" />
            {{ item.name }}
            <span v-if="data[item.type] &&
              data[item.type].length &&
              data[item.type].length > 1
              ">{{ item.type === myType ? myInd + 1 + "/" : null
  }}{{ data[item.type].length }}</span>
          </div>
        </div>

        <!-- 主要内容 -->

        <div class="contenBoxMain">
          <div class="contenBox" :class="{ contenBoxAc: index === myInd }" v-for="(item, index) in data[myType]"
            :key="myType === 'video' ? item.url : item">
            <!-- 模型页面 -->
            <div class="modelBox" v-if="myType === 'model'">
              <iframe :src="item" frameborder="0" v-if="index === myInd"></iframe>
            </div>
            <!-- 视频页面 -->
            <div class="videoBox" v-else-if="myType === 'video'">
              <video controls :src="item.url" v-if="index === myInd"></video>
            </div>
            <!-- 图片页面 -->
            <div class="imgBox" v-else-if="myType === 'img'">
              <div class="smImgBox" @click="lookImg(item)">
                <img v-lazy="item" alt="" />
              </div>
            </div>
          </div>
          <!-- 左右箭头 -->
          <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }"
            v-if="data[myType] && data[myType].length > 1"></div>
          <div @click="cutMyInd(1, myInd === data[myType].length - 1)" class="rightJJ awccJJ"
            :class="{ noClick: myInd === data[myType].length - 1 }" v-if="data[myType] && data[myType].length > 1"></div>
        </div>
      </div>

      <!-- 下面的文字介绍 -->
      <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
        <div class="flooTxtBox">
          <div class="myTitle">{{ myTitle }}</div>
          <!-- 视频的介绍 -->
          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
            {{ videoTxt[myInd] }}
          </div>
          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
            {{ imgTxt[myInd] }}
          </div>
          <div class="myTxt" v-html="myTxt"></div>
        </div>
      </div>
    </div>
    <!-- 查看图片 -->
    <viewer class="viewerCla" ref="viewer" :images="lookPics">
      <img :src="lookPics[0]" alt="" />
    </viewer>
  </div>
</template>


<script>
export default {
  name: "Home",
  data() {
    return {
      m: this.$route.query.m,
      id: this.$route.query.id,
      // 音频地址
      audio: "",
      // 如果只有单独的音频
      isOneAduio: false,
      // 音频状态
      audioSta: false,

      data: {
        // 模型数组
        model: [],
        // 视频数组
        video: [],
        // 图片数组
        img: [],
      },
      // 当前 type
      myType: "",

      // 底部的tab
      flooTab: [],

      // 当前索引
      myInd: 0,

      // 查看图片
      lookPics: [],

      // 标题
      myTitle: "",
      // 内容
      myTxt: "",
      // 视频内容
      videoTxt: [],
      imgTxt: [],

      // 只有标题和文字（没有视频，没有模型，没有图片）
      oneTxt: false,
    };
  },
  watch: {
    myType() {
      this.myInd = 0;
    },
    // 音频的开启和关闭
    audioSta(val) {
      const dom = document.querySelector("#myAudio");
      if (val) {
        dom.play();
        dom.onended = () => {
          // console.log("----音频播放完毕");
          this.audioSta = false;
        };
      } else dom.pause();
    },
  },
  computed: {},
  components: {},
  methods: {
    // 点击左右箭头
    cutMyInd(num, flag) {
      if (flag) return;
      this.myInd += num;
    },
    // 点击查看大图
    lookImg(url) {
      let dom = this.$refs.viewer.$viewer;
      this.lookPics = [url];
      dom.show();
    },
    async getData() {
      // https://www.4dmodel.com/
      let url = `https://super.4dage.com/data/${this.id
        }/hot/js/data.js?time=${Math.random()}`;
      let result = (await this.$http.get(url)).data;
      const resData = result[this.m];
      console.log("----", resData);
      if (resData) {
        this.audio = resData.backgroundMusic;
        // 只有单独的音频上传
        if (
          resData.backgroundMusic &&
          !resData.model &&
          !resData.video &&
          !resData.images
        ) {
          this.isOneAduio = true;
        }
        // 底部的tab
        const arr = [];
        const obj = {};
        if (resData.model) {
          obj.model = resData.model;
          arr.push({ id: 1, type: "model", name: "模型" });
        }
        if (resData.video) {
          obj.video = resData.video;
          arr.push({ id: 2, type: "video", name: "视频" });
        }
        if (resData.images) {
          obj.img = resData.images;
          arr.push({ id: 3, type: "img", name: "图片" });
        }
        this.flooTab = arr;
        this.data = obj;

        // 当前type的值 应该为
        if (resData.model) this.myType = "model";
        else if (resData.video) this.myType = "video";
        else if (resData.images) this.myType = "img";

        this.myTitle = resData.title || "";
        this.myTxt = resData.content || "";
        this.videoTxt = resData.videosDesc || [];
        this.imgTxt = resData.imagesDesc || [];

        // 只有 标题和 文字介绍（没有视频，没有模型，没有图片）
        if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
          this.oneTxt = true;
        }
      }
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.home {
  .viewerCla img {
    display: none;
  }

  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.79);
  // backdrop-filter: blur(10px);
  position: relative;

  #myAudio {
    z-index: 11;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 60px;
  }

  .main {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    padding-top: 40px;

    .mainCon {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      width: 100%;
      height: calc(100% - 200px);
      // background: linear-gradient(#929292, #c5c5c5);

      .audioIcon {
        z-index: 10;
        cursor: pointer;
        position: absolute;
        right: 20px;
        bottom: 30px;
      }

      .oneTabNum {
        z-index: 10;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
      }

      .flooTabBox {
        z-index: 10;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;

        .tabRow {
          cursor: pointer;
          display: flex;
          align-items: center;
          margin: 0 12px;
          font-size: 12px;
          background-color: #489182;
          color: #FCE9AC;
          padding: 0px 14px;
          height: 36px;
          border-radius: 18px;

          &>img {
            margin-right: 6px;
          }
        }

        .tabRowAc {
          background-color: #EAD5A3;
          pointer-events: none;
          color: #489182;
        }
      }

      .contenBoxMain {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .contenBox {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: all 0.5s;

        .modelBox,
        .videoBox,
        .imgBox {
          width: 100%;
          height: 100%;
        }

        .modelBox {
          iframe {
            width: 100%;
            height: 100%;
          }
        }

        .videoBox {
          padding: 100px 100px 120px;

          video {
            width: 100%;
            height: 100%;
          }
        }

        .imgBox {
          // padding: 100px 100px 120px;

          .smImgBox {
            width: 100%;
            height: 100%;
            cursor: zoom-in;

            &>img {
              pointer-events: none;
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }

      .contenBoxAc {
        opacity: 1;
        pointer-events: auto;
      }

      .awccJJ {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        width: 37px;
        height: 37px;
        background-image: url("../assets/images/pc/left.png");
        background-size: 100% 100%;

        &:focus {
          outline: none;
        }
      }

      .rightJJ {
        left: auto;
        right: 10px;
        background-image: url("../assets/images/pc/right.png");
      }

      .noClick {
        cursor: default;
        opacity: 0.4;
      }
    }

    .flooTxt {
      margin-top: 20px;
      width: 100%;
      height: 160px;

      .flooTxtBox {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .myTitle {
          color: #fff;
          font-size: 22px;
          font-weight: 700;
          margin-bottom: 10px;
          text-align: center;
        }

        .myTxt {
          font-size: 16px;
          color: #ffffff;
          line-height: 24px;
        }

        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 3px;
          /*高宽分别对应横竖滚动条的尺寸*/
          height: 1px;
        }

        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px transparent;
          background: #EAD5A3;
        }

        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          -webkit-box-shadow: inset 0 0 5px transparent;
          border-radius: 10px;
          background: transparent;
        }
      }
    }

    .flooTxtOne {
      height: 600px;
    }
  }
}

// 移动端
@media screen and (max-width: 1000px) {
  .home {
    #myAudio {
      width: 90vw;
      max-width: 500px;
    }

    .main {
      width: 90%;
      height: 94%;
      padding: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .mainCon {
        border-radius: 8px 8px 0 0;

        .audioIcon {
          cursor: default;
          right: auto;
          bottom: auto;
          top: 6px;
          left: 6px;

          &>img {
            width: 30px;
          }
        }

        .flooTabBox {
          width: 100%;
          bottom: 20px;
          justify-content: center;

          .tabRow {
            cursor: default;
            margin: 0 6px;
            padding: 0 10px;
            height: 32px;

            &>img {
              width: 16px;
            }
          }
        }

        .contenBox {
          .videoBox {
            padding: 0px 0;
            position: relative;

            video {
              width: 96%;
              max-height: 100%;
              height: auto;
              position: absolute;
              top: 50%;
              left: 2%;
              transform: translateY(-50%);
            }
          }

          .imgBox {
            // padding: 60px 50px 80px;

            .smImgBox {
              cursor: default;
            }
          }
        }

        .awccJJ {
          left: 0;
          width: 28px;
          height: 57px;
          cursor: default;
          background-image: url("../assets/images/pc/icon-left.png");
        }

        .rightJJ {
          left: auto;
          right: 0;
          background-image: url("../assets/images/pc/icon-right.png");
        }
      }

      .flooTxt {
        margin-top: 0;
        padding: 20px 15px 15px;
        height: 200px;
        // background-color: #fff;
        border-radius: 0 0 8px 8px;

        .flooTxtBox {
          .myTitle {
            font-size: 18px;
          }

          .myTxt {
            font-size: 14px;
            line-height: 22px;
          }
        }
      }

      .flooTxtOne {
        height: 100%;
      }
    }
  }
}</style>