HainanMuseumHot/src/views/Home.vue

<template>
  <div class="home">
    <div :class="['main', { 'specialHome':  myTitle === '椰雕锡胆酒杯' || myTitle === '椰壳镶银里雕人物诗句套杯'}]">
      <div class="myTitle is-mobile">{{ 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">
          <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>

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

      <div class="main-info">
        <div class="myTitle is-pc">{{ 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" 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="" />
        <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",
  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: {
    // 本地化 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, flag) {
      if (flag) return
      this.myInd += num
    },
    // 点击查看大图
    lookImg(url) {
      let dom = this.$refs.viewer.$viewer
      this.lookPics = [url]
      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 {
  font-family: 'fzFont';
  background: url("../assets/images/pc/hot_bg.png") no-repeat center center;
  background-color: rgba(transparent, 0.8);
  background-size: 100% 100%;
  border-radius: 10px;
  color: #F7E7DC;
  .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 75px;
    left: -226px;
    height: 4px;
  }
  :deep(.swiper-pagination-bullet-active) {
    background: #70573d !important;
  }
  :deep(.swiper-pagination-bullet) {
    width: 26px;
    height: 4px;
    border-radius: 2px;
    background: #FFFFFF;
    opacity: 1;
  }
  .viewerCla img {
    display: none;
  }
  width: 100%;
  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: 30px 50px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    &-info {
      flex: 1;
    }
    .myTitle {
      font-size: 24px;
      margin-bottom: 25px;
      text-align: center;

      &.is-mobile {
        display: none;
      }
    }
    .mainCon {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      width: 47%;
      max-width: 420px;
      height: 320px;
      margin: 0 26px 0 0;
      .oneTabNum {
        z-index: 10;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
      }

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

        .modelBox,
        .videoBox,
        .imgBox {
          width: 100%;
          height: 100%;
        }
        .modelBox {
          iframe {
            width: 100%;
            height: 100%;
          }
        }
        .videoBox {
          padding: 0px 50px;
          video {
            width: 100%;
            height: 100%;
          }
        }
        .imgBox {
          .smImgBox {
            width: 100%;
            height: 100%;
            // cursor: zoom-in;
            & > img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
            img[lazy='loading'] {
              object-fit: cover;
            }
          }
        }
      }
      .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 {
      .flooTxtBox {
        width: 100%;
        height: 100%;
        max-height: 300px;
        overflow-y: auto;
        //隐藏滚动条
        // &::-webkit-scrollbar {
        //   display: none;
        // }
        .myTxt {
          font-size: 18px;
          color: #F7E7DC;
          line-height: 26px;
        }
        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 3px;
          /*高宽分别对应横竖滚动条的尺寸*/
          height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px transparent;
          background: #fabb78;
        }
        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          -webkit-box-shadow: inset 0 0 5px transparent;
          border-radius: 10px;
          background: transparent;
        }
      }
    }
    .flooTxtOne {
      height: 600px;
    }
  }

  .specialHome {
    flex-direction: column;
    .myTitle {
      &.is-mobile {
        display: block;
      }
    }
    .mainCon {
      margin: 0;
      width: 100%;
      max-width: 100%;
      .contenBoxMain {
        .swiper-wrapper {
          justify-content: center;
          .contenBox {
            width: 100%;
          }
        }
      }
    }
    .main-info {
      .myTitle {
        display: none;
      }
    }
  }

  // 底部
  .flooTabBox {
    z-index: 10;
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    .tabRow {
      width: 60px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      // background-color: #dedede;
      color: black;
      border-radius: 18px;
      & > img {
        width: 40px;
        display: inline-block;
        margin-bottom: 3px;
      }
      & > div {
        min-width: 40px;
        text-align: center;
      }
    }
    .tabRowAc {
      // background-color: #c8aa7d;
      pointer-events: none;
      // color: #c7aa7c;
    }
  }
}
// 移动端
@media screen and (max-width: 800px) {
  .home {
    #myAudio {
      width: 90vw;
      max-width: 500px;
    }
    .main {
      width: 100%;
      height: 100%;
      padding: 0;
      position: absolute;
      flex-direction: column;
      &-info {
        margin-top: -5px;
        width: 100%;
        padding: 10px 15px 0px 15px;
        max-height: 98px;
      }
      .myTitle {
        font-size: 16px;
        margin-bottom: 20px;

        &.is-pc {
          display: none;
        }
        &.is-mobile {
          display: block;
        }
      }
      .mainCon {
        border-radius: 0;
        margin: 0;
        width: 100%;
        height: calc(100% - 195px);
        .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: 28px;
          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 {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        .flooTxtBox {
          .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>