JiNianGuan_aomeng/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>

        <!-- 底部的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(255, 252, 247, 0.6);
  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;
      }
      .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: #dedede;
          padding: 0px 14px;
          height: 36px;
          border-radius: 18px;
          & > img {
            margin-right: 6px;
          }
        }
        .tabRowAc {
          background-color: #b90c0c;
          pointer-events: none;
          color: #d6b970;
        }
      }
      .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.3s;

        .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: pointer;
            & > 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: #b90c0c;
          font-size: 22px;
          font-weight: 700;
          margin-bottom: 10px;
        }
        .myTxt {
          font-size: 16px;
          color: #333333;
          line-height: 24px;
        }
        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
          height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px transparent;
          background: #b90c0c;
        }
        &::-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>