JiangMenCun/web/src/components/one.vue

<template>
  <div class="one">
    <div class="comTit">{{ tit }}</div>
    <div class="comMani">
      <div class="info sroolStop" v-html="data.content"></div>
      <div class="conShow">
        <!-- 数据加载中 -->
        <div class="conShowLoad" v-show="conShowLoad">
          <img src="../assets/img/loading.gif" alt="">
        </div>
        <!--基础存放容器-->
        <div class="swiper-container">
          <!-- 需要进行轮播的部分 -->
          <div class="swiper-wrapper">
            <!-- 每个节点 -->
            <div
              class="swiper-slide"
              v-for="item in data.images"
              :key="item.id"
            >
              <img :src="baseURL + item.filePath" alt=""/>
            </div>
            <div
              class="swiper-slide swiperVideo"
              v-for="item in data.videos"
              :key="item.id"
            >
            <div class="videoName">{{item.name}}</div>
              <video controls :src="baseURL + item.filePath"></video>
            </div>
          </div>

          <!-- 如果需要使用分页器 -->
          <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->

          <!-- 如果需要使用前进后退按钮 -->
          <!-- <div class="swiper-button-prev swiper-button-white"></div>
          <div class="swiper-button-next swiper-button-white"></div> -->
        </div>
      </div>
    </div>
    <div class="comBs" @click="$emit('pageNext')"></div>
  </div>
</template>

<script>
import axios from "@/utils/request";
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
export default {
  name: "one",
  props: {
    tit: {
      type: String,
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    //这里存放数据
    return {
      conShowLoad:true,
      baseURL: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        new Swiper(".one .swiper-container", {
          slidesPerView: 3.5,
          spaceBetween: 20,
          // // 如果需要分页器
          // pagination: {
          //   el: ".swiper-pagination",
          //   clickable: true, // 分页器可以点击
          // },

          // // 如果需要前进后退按钮
          // navigation: {
          //   nextEl: ".swiper-button-next",
          //   prevEl: ".swiper-button-prev",
          // },
        });
        this.conShowLoad=false
      }, 1000);
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
@import "../../node_modules/swiper/dist/css/swiper.css";
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide video {
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.info::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.info::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px transparent;
  background: #8a7351;
}
.info::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px transparent;
  border-radius: 10px;
  background: transparent;
}
.one {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  .comMani {
    width: 100%;
    height: calc(100% - 65px);
    .info {
      color: #8a7351;
      font-size: 16px;
      line-height: 28px;
      width: 100%;
      height: 360px;
      padding-right: 30px;
      overflow-y: auto;
      margin-bottom: 30px;
    }
    .conShow {
      position: relative;
      height: 240px;
      flex: 1;
      .conShowLoad{
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        background-color: #fcfefc;
        justify-content: center;
        align-items: center;
      }
      .swiperVideo {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.6);
        .videoName{
          position: absolute;
          top: 1px;
          left: 5px;
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
}
</style>