518-JSSWLT/定制化热点/src/views/Home.vue

<template>
  <div class="Home">
    <!-- 标题 -->
    <div class="title">{{ myTitle || "热点" }}</div>
    <!-- 主体带滚动条的盒子 -->
    <div class="main">
      <!-- 图片 -->
      <div class="imgBox" :class="{ imgBoxOne: !myTxt }">
        <Swiper class="warpper" ref="mySwiper" :options="swiperOptions">
          <SwiperSlide v-for="item in myImgArr" :key="item">
            <!-- 线上数据 -->
            <img :src="item" alt="" @click="lookImg(item)" />

            <!-- 本地化部署 -->
            <!-- <img
              :src="item.replace('https://super.4dage.com', '')"
              alt=""
              @click="lookImg(item.replace('https://super.4dage.com', ''))"
            /> -->
          </SwiperSlide>
        </Swiper>
        <!-- 索引 -->
        <div class="myIndBox" v-if="myImgArr.length">
          {{ myInd + 1 }} / <span>{{ myImgArr.length }}</span>
        </div>
      </div>
      <!-- 介绍 -->
      <div class="txtBox" v-if="myTxt" v-html="myTxt || '暂无内容'"></div>
    </div>
    <!-- 查看图片 -->
    <viewer class="viewerCla" ref="viewer" :images="lookPics">
      <img :src="lookPics[0]" alt="" />
    </viewer>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      m: this.$route.query.m,
      id: this.$route.query.id,
      // 标题
      myTitle: "",
      // 图片数组
      myImgArr: [],
      // 简介
      myTxt: "",
      // 图片索引
      myInd: 0,
      // 轮播图设置
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 0,
        centeredSlides: true,
        on: {
          slideChangeTransitionEnd: () => {
            let swiper = this.$refs.mySwiper.$swiper;
            let activeIndex = swiper.activeIndex;
            this.myInd = activeIndex;
          },
        },
      },
      // 查看图片
      lookPics: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 点击查看大图
    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/${
        // 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];
      if (!resData) return alert("热点解析错误");
      this.myTitle = resData.title;
      this.myImgArr = resData.images || [];
      this.myTxt = resData.content;
    },
  },
  created() {},
  mounted() {
    this.getData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Home {
  width: 100%;
  height: 100%;
  background-color: black;
  color: #fff;
  .viewerCla img {
    display: none;
  }
  .title {
    height: 50px;
    line-height: 49px;
    padding: 0 50px 0 10px;
    border-bottom: 1px solid #ccc;
  }
  .main {
    height: calc(100% - 50px);
    width: 100%;
    overflow-y: auto;

    .imgBox {
      height: 80vh;
      position: relative;
      .warpper {
        width: 100%;
        height: 100%;
        .swiper-wrapper {
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
      .myIndBox {
        z-index: 9;
        pointer-events: none;
        font-size: 12px;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid #ccc;
        border-radius: 15px;
        padding: 6px 10px;
        & > span {
          opacity: 0.6;
        }
      }
    }
    .imgBoxOne {
      height: 100%;
    }
    .txtBox {
      padding: 40px 15px;
      font-size: 14px;
      line-height: 20px;
      color: black;
      background-color: #fff;
      border-radius: 8px 8px 0 0;
      min-height: 80vh;
      position: relative;
      &::before {
        content: "";
        width: 35px;
        height: 4px;
        background: #444;
        border-radius: 13px 13px 13px 13px;
        opacity: 1;
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
@media screen and (min-width: 1200px) {
  .Home {
    .main {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px transparent;
        background: #ccc;
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px transparent;
        border-radius: 10px;
        background: transparent;
      }
      .imgBox {
        .warpper {
          .swiper-wrapper {
            img {
              cursor: pointer;
            }
          }
        }
      }
    }

    // 本地化
    .title {
      height: 70px;
      line-height: 70px;
      font-size: 22px;
    }
    .main {
      height: calc(100% - 70px);
      .imgBox {
        height: 72vh;
      }
      .txtBox {
        padding: 30px 20px 40px;
        min-height: 72vh;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 4px;
      }
    }
  }
}
</style>