zhgdyun/src/views/projectAdmin/fourEngin/command/rightFour.vue

<template>
  <Card title="亮点展示">
    <div class="container">
      <div class="top">
        <div
          :class="['top-item', { active: activeIndex == index }]"
          v-for="(item, index) in headerList"
          :key="index"
          @click="handelItemClick(index)"
        >{{ item }}</div>
      </div>
      <div class="swiper">
        <swiper class="swiper1" :options="swiperOption" ref="mySwiper">
          <swiper-slide><p>中国建筑钢筋样板工程</p><img src='../assets/images/command-center/auto3.png' alt="" /></swiper-slide>
          <swiper-slide><p>中国建筑深基坑挖掘沉降观测工程</p><img src="../assets/images/command-center/auto2.png" alt="" /></swiper-slide>
          <swiper-slide><p>中国建筑混凝土强度检测工程</p><img src="../assets/images/command-center/auto1.png" alt="" /></swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
          <div class="swiper-button-next" slot="button-next" @click="next"></div>
          <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
        </swiper>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card'
import 'swiper/css/swiper.css'
export default {
  components: { Card },
  data() {
    return {
      // 头部行
      headerList: ['质量', '安全', '技术'],
      // 激活的item
      activeIndex: 0,
      swiperOption:{
        loop: true, // 设置图片循环
        observer: true,
        observeParents: true,
        autoplay: true, //设置可自动播放
        speed: 1000, //自动播放的速度，每隔1秒滑动一次
        pagination: {
         el: ".swiper-pagination",//分页器的类名
         clickable: true, //设置分页小圆点可手动点击,
        },
        navigation: {
          nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
          prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
          hideOnClick: true, //点击slide时显示/隐藏按钮
        },
      }
   }
  },
  methods: {
    /** item单击事件 */
    handelItemClick(index) {
      this.activeIndex = index
    },
    prev () {
       this.$refs.mySwiper.$swiper.slidePrev()
    },
    next () {
       this.$refs.mySwiper.$swiper.slideNext()
    },
  }
}
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  width: 100%;
  height: 100%;

  .top {
    display: flex;
    margin: 5px 0px 20px 15px;
    width: 100%;
    height: 27px;

    .top-item {
      display: grid;
      place-items: center;
      width: 64px;
      height: 100%;
      margin-right: 5px;
      background-image: url('../assets/images/command-center/block4.png');
      cursor: pointer;
      &.active {
        background-image: url('../assets/images/command-center/block4-active.png');
      }
    }
  }
  .swiper{
    .swiper1{
      height: 80%;
      width: 96%;
      position: relative;
      
      p{
        width: 100%;
        height: 25px;
        line-height: 25px;
        position: absolute;
        background-color: rgba(0,0,0,0.55);
      }
      ::v-deep .swiper-pagination-bullet-active{
        background: #fff;
      }
      ::v-deep .swiper-button-prev:after{
        color:#fff;
        font-size: 5px;
        
      }
      ::v-deep .swiper-button-next:after{
        color:#fff;
        font-size: 5px;
      }
    }
  }
}
</style>