hemall.terabimsoft.com.cn/plugins/shop_server/components/templateTwo/case-swiper.vue

<!-- 案例轮播 -->
<template>
  <div id="case-swiper">
    <div class="case-swiper-imgbox" v-if="list.length > 0">
      <el-carousel trigger="click" arrow="never" :autoplay="true" @change="change" ref="carousel">
        <el-carousel-item v-for="(item, index) in list" :key="index">
          <img :class="[item.pc_temp_img_src? 'hoverClass':'']" :src="item.pc_temp_img_src" @click="toLink(item.id)">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="case-swiper-index">
      <div class="item" :class="{'active-item': activeIndex == i,'active-item-last': activeIndex == i+1}" @click="toLink(item.id)" @mousemove="mousemove(i)" v-for="(item,i) in list" :key="item.id">
        <img class="icon" v-if="item.img_src" :src="item.img_src" alt="">
        <div class="text">{{item.case_name}}</div>
      </div>
      <!-- <div class="item" v-for="(item,index) in surplus" :key="index"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  props:{
    datas: {
      type: Object,
      default: () => ({})
    },
  },
  data () {
    return {
      activeIndex: 0,
      list: [],
      surplus:0
    };
  },

  activated() {},

  components: {},

  computed: {},

  mounted() {
    this.list = this.datas.data;
    this.surplus = 6 - this.list.length;
  },

  methods: {
    mousemove(index){
      if(this.activeIndex != index){
        this.activeIndex = index
        this.$refs.carousel.setActiveItem(index)
        // this.$nextTick(()=>{
        //   this.activeIndex = null;
        // })
      }
    },
    change(index){
      this.activeIndex = index;
    },
    toLink(Id){
      window.location.href = this.fun.toRealURl(`case_library_detail/${Id}`);
    }
  }
}

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
#case-swiper{
  width: 100%;
  border-radius: 5px;
  .case-swiper-imgbox{
    width: 100%;
    z-index: 1;
    img{
      width: 100%;
      height: 100%;
      &:hover{
        cursor:pointer;
      }
    }
  }
  .case-swiper-index{
    height: 100px;
    // display: grid;
    // grid-template-columns: repeat(6, 1fr);
    display: flex;

    .item{
      flex: 1;
      background: #fff;
      // position: relative;
      border:1px solid #c9c9c9 ;
      border-left: none;
      display: flex;
      justify-content: center;
      padding: 0 8px;
      box-sizing: border-box;
      align-items: center;
      overflow: hidden;
      .icon{
        width: 25px;
	      height: 25px;
        margin-right: 6px;
      }
      .text{
        font-size: 20px;
        color: #404040;
        // flex: 1;
        overflow: hidden;/*超出部分隐藏*/
        text-overflow:ellipsis;/* 超出部分显示省略号 */
        white-space: nowrap;/*规定段落中的文本不进行换行 */
      }
      &:nth-child(1){
        border-left:1px solid #c9c9c9 ;
      }
      &:hover{
        cursor:pointer;
        width: 220px;
        background: #fff;
        z-index: 9999;
        box-shadow: 0px 4px 14px 2px rgba(4, 0, 0, 0.15);
      	border-radius: 5px;
        transform: translate(0px,-10px);
        transition-delay: 0s !important;
        border:1px solid #c9c9c9 ;
      }
      // &::before{
      //   content: '';
      //   position: absolute;
      //   right: 0;
      //   top: 30px;
      //   bottom: 30px;
      //   left: auto;
      //   width: 1px;
      //   background: #000;
      // }
    }
    .active-item{
      width: 220px;
      background: #fff;
      z-index: 9999;
      box-shadow: 0px 4px 14px 2px rgba(4, 0, 0, 0.15);
      border-radius: 5px;
      transform: translate(0px,-10px);
      transition-delay: 0s !important;
      border:1px solid #c9c9c9 ;
      z-index: 3;
    }
    .active-item-last{
      border-right: none;
    }
  }
}
</style>