JiangMenCun/web/src/components/four.vue

<template>
  <div class="four">
    <div class="comTit">{{ tit }}</div>
    <div class="comMani">
      <div class="conShow">
        <div class="conShowfloo">
          <div class="icon el-icon-arrow-left" @click="arrowClick(0)"></div>
          <div class="icon el-icon-arrow-right" @click="arrowClick(1)"></div>
          <el-carousel type="card" height="300px" :autoplay='false' arrow="never" indicator-position='none' ref="cardShow" :loop='false' :initial-index='1'>
            <el-carousel-item v-for="item in data.images" :key="item.id">
              <img :src="baseURL + item.filePath" alt="" />
            </el-carousel-item>
            <el-carousel-item
              class="videoBox"
              v-for="item in data.videos"
              :key="item.id"
            >
              <div class="videoName">{{item.name}}</div>
              <video controls :src="baseURL + item.filePath"></video>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="info" v-html="data.content"></div>
    </div>
    <div class="comBs"></div>
  </div>
</template>

<script>
import axios from "@/utils/request";
export default {
  name: "four",
  props: {
    tit: {
      type: String,
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    //这里存放数据
    return {
      baseURL: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    arrowClick(val){
      if(val===0) this.$refs.cardShow.prev()
      else this.$refs.cardShow.next()
    },
    cutBig(src, type) {},
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.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;
}
.four {
  /deep/.el-carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /deep/.el-carousel__item video {
    width: 100%;
    height: 100%;
  }

  .videoBox {
    background-color: rgba(0, 0, 0, 0.6);
    .videoName{
      position: absolute;
      top: 5px;
      left: 10px;
      color: #fff;
      font-size: 18px;
    }
  }

  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  .comMani {
    width: 100%;
    height: calc(100% - 65px);
    .conShow {
      height: 330px;
      width: 100%;
      .conShowfloo {
        position: relative;
        width: 100%;
        height: 300px;
        .icon{
          z-index: 9999;
          position: absolute;
          left: -18px;
          top: 50%;
          transform: translateY(-50%);
          width: 36px;
          height: 36px;
          background-color: rgba(0, 0, 0, 0.6);
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          cursor: pointer;
          font-size: 20px;
        }
        .el-icon-arrow-right{
          left: auto;
          right: -18px;
        }
      }
    }
    .info {
      width: 100%;
      height: 300px;
      color: #8a7351;
      font-size: 16px;
      line-height: 28px;
      overflow-y: auto;
    }
  }
}
</style>