gmlx/bigScene/hot/src/views/Home.vue

<template>
  <div class="home">
    <div class="main">
      <!-- <div class="myTitle">{{ myTitle }}</div> -->
      <div class="mainCon" v-show="!oneTxt">
        <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>
        <!-- 如果只有一个模块 -->
        <!-- <div class="oneTabNum" v-if="
          flooTab.length === 1 &&
          data[myType] &&
          data[myType].length &&
          data[myType].length > 1
        ">
          {{ myInd + 1 }} / {{ data[myType].length }}
        </div> -->

        <!-- 主要内容 -->

        <div class="contenBoxMain swiper-container">
          <div class="swiper-wrapper">
            <div class="contenBox swiper-slide" v-for="(item, index) in data[myType]" :key="myType === 'video' ? item.url : item">
              <!-- 模型页面 -->
              <div class="modelBox" v-if="myType === 'model'">
                <iframe :src="urlToFitFu(item)" frameborder="0" v-if="index === myInd"></iframe>
              </div>
              <!-- 视频页面 -->
              <div class="videoBox" v-else-if="myType === 'video'">
                <video controls controlslist="nodownload" :src="urlToFitFu(item.url)" v-if="index === myInd"></video>
              </div>
              <!-- 图片页面 -->
              <div class="imgBox" v-else-if="myType === 'img'">
                <div class="smImgBox">
                  <img v-lazy="urlToFitFu(item)" alt="" @click="lookImg(urlToFitFu(item))" />
                </div>
              </div>
            </div>
          </div>
          <!-- 左右箭头 -->
          <template v-if="!isMobile">
            <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>
          </template>
        </div>

        <div class="swiper-pagination" v-if="data[myType] && data[myType].length > 1"></div>
      </div>

      <!-- 下面的文字介绍 -->
      <div class="txtBox">
        <div class="myTitle">{{ myTitle }}</div>

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

    <!-- 底部的tab -->
    <div class="flooTabBox" >
      <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="" /> -->
        <div>
          {{ 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="tabRow" v-if="audio && !isOneAduio" @click="audioSta = !audioSta" :title="audioSta ? '关闭音频' : '打开音频'">
        <img :src="require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)" alt="" />
        <div>音频</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      isMobile: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
      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: {},
  methods: {
    // 本地化 url 适配
    urlToFitFu(url) {
      return url;
      // const resUrl = url;
      // if (url.includes("https://super.4dage.com")) {
      //   return url.replace("https://super.4dage.com", "");
      // } else if (url.includes("http://super.4dage.com")) {
      //   return url.replace("http://super.4dage.com", "");
      // } else return resUrl;
    },

    // 点击左右箭头
    cutMyInd(num) {
      console.log(num, this.swiper);
      if (!this.swiper) return;
      if (num > 0) {
        this.swiper.slideNext();
      } else {
        this.swiper.slidePrev();
      }
    },
    // 点击查看大图
    lookImg(url) {
      // console.log(url)
      let dom = this.$refs.viewer.$viewer;
      this.lookPics = [url];
      // console.log(Object.keys(dom))
      dom.options.toolbar = false;
      dom.show();
    },
    async getData() {
      // https://www.4dmodel.com/

      let url = `https://super.4dage.com/data/${
        // 线上数据

        // let url = `/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;
        }

        this.$nextTick(() => {
          const _this = this;
          this.swiper = new Swiper(".contenBoxMain", {
            on: {
              slideChange() {
                _this.myInd = this.activeIndex;
              },
            },
            pagination: {
              el: ".swiper-pagination",
            },
          });
        });
      }
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.home {
  background-color: rgba(70, 47, 9, 0.8);
  backdrop-filter: blur(5px);
  background-size: 100% 100%;
  border-radius: 10px;
  color: rgba(80, 61, 42, 0.9);
  .swiper-pagination {
    margin: 10px 0 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;

    :deep(.swiper-pagination-bullet) {
      width: 24px;
      height: 4px;
      border-radius: 2px;
      background: #66442c49;
      opacity: 1;

      &.swiper-pagination-bullet-active {
        background: #603c23;
      }
    }
  }
  .viewerCla img {
    display: none;
  }
  height: 100%;
  position: relative;
  #myAudio {
    z-index: 11;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 60px;
  }
  .main {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    padding: 106px 44px 41px 44px;
    display: flex;
    align-items: center;
    flex-direction: column;

    justify-content: center;
    .myTitle {
      font-size: 1.3vw;
      font-weight: 700;
      margin-bottom: 20px;
      padding: 0 30px;
      letter-spacing: 4px;
      color: rgba(249, 211, 109, 1);
    }
    .fixedTx {
      font-size: 14px;
      width: 250px;
      height: 30px;
      margin-bottom: 20px;
      padding: 0 30px;
      letter-spacing: 4px;
      color: #535353;
    }
    .logo {
      margin-bottom: 20px;
      padding: 0 30px;
      & > img {
        width: 45px;
        object-fit: contain;
      }
    }
    .mainCon {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      width: 70%;
      height: 100%;
      margin-top: 40px;
      .oneTabNum {
        z-index: 10;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
      }

      .contenBoxMain {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .contenBox {
        .modelBox,
        .videoBox,
        .imgBox {
          width: 100%;
          height: 100%;
        }
        .modelBox {
          iframe {
            width: 100%;
            height: 100%;
          }
        }
        .videoBox {
          padding: 0px 50px;
          video {
            width: 100%;
            height: 100%;
          }
        }
        .imgBox {
          padding: 0px 140px;
          padding-bottom: 12vh;
          .smImgBox {
            width: 100%;
            height: 100%;
            // cursor: zoom-in;
            & > img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
      .awccJJ {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 30px;
        width: 80px;
        height: 99px;
        background-image: url("../assets/images/pc/left.png");
        background-size: 100% 100%;
        z-index: 1;
        &:focus {
          outline: none;
        }
      }
      .rightJJ {
        left: auto;
        right: 30px;
        background-image: url("../assets/images/pc/right.png");
      }
      .noClick {
        cursor: default;
        opacity: 0.6;
      }
    }
    .txtBox {
      top: 2vh;
      left: 0;
      position: absolute;
      height: 35vh;
      width: 20%;
      .flooTxt {
        margin: 0 auto;
        margin-top: 10px;
        width: 100%;
        height: 100%;
        max-height: 170px;
        .flooTxtBox {
          width: 100%;
          height: 100%;
          padding: 0 30px;
          overflow-y: auto;

          .myTxt {
            font-size: 0.8vw;
            color: rgba(255, 243, 197, 1);
            letter-spacing: 3px;
            line-height: 32px;
          }
          &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 3px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
          }
          &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px transparent;
            background: rgb(192, 166, 126);
          }
          &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px transparent;
            border-radius: 10px;
            background: transparent;
          }
        }
      }
    }

    .flooTxtOne {
      height: 600px;
    }
  }

  // 底部
  .flooTabBox {
    z-index: 10;
    position: absolute;
    bottom: 10%;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    .tabRow {
      width: 7vw;
      height: 3vw;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.9vw;
      background-image: url("../assets/images/pc/hot_btn.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      // background-color: #dedede;
      color: rgba(112, 73, 7, 1);
      & > img {
        width: 40px;
        display: inline-block;
        margin-bottom: 3px;
      }
      & > div {
        width: 100%;
        height: 100%;
        line-height: 2.8vw;
        text-align: center;
      }
    }
    .tabRowAc {
      background-image: url("../assets/images/pc/hot_btn_ac.png");
      pointer-events: none;
      color: rgba(255, 243, 197, 1);
      // color: #c7aa7c;
    }
  }
}
// 移动端
@media screen and (max-width: 1000px) {
  .home {
    background: url("../assets/images/pc/hot_bg_M.png") no-repeat center center;
    background-size: 100% 100% !important;
    .swiper-pagination {
      margin: 10px 0 0;
      gap: 4px;

      :deep(.swiper-pagination-bullet) {
        width: 15px;
        height: 3px;
      }
    }
    #myAudio {
      width: 90vw;
      max-width: 500px;
    }
    .main {
      width: 100%;
      height: 100%;
      padding: 16% 0 0 0;
      position: absolute;
      .myTitle {
        font-size: 16px;
        margin: 8px 0;
      }
      .mainCon {
        border-radius: 0;
        height: calc(100% - 300px);
        width: 100%;
        margin-top: 0;

        .contenBox {
          .videoBox {
            padding: 0 30px;
            position: relative;
            video {
              width: calc(100% - 60px);
              max-height: 100%;
              height: auto;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          .imgBox {
            // padding: 60px 50px 80px;
            padding: 0 15px;
            .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");
        }
      }
      .txtBox {
        .flooTxt {
          margin-top: -5px;
          width: 100%;
          padding: 10px 15px 0px 15px;
          max-height: 200px;

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

      .flooTxtOne {
        height: 100%;
      }
    }
    .flooTabBox {
      width: 100%;
      bottom: 220px;
      right: 0;
      justify-content: center;
      .tabRow {
        cursor: default;
        // margin: 0 6px;
        // padding: 0 10px;
        height: 32px;
        & > img {
          width: 30px;
        }
      }
    }
  }
}
</style>