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

<template>
  <Card class="max" 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 v-for="(item,index) in showList" :key="index"
            ><p>{{item.title}}</p>
            <img class="imgBox" :src="$store.state.FILEURL+item.imageUrl" alt="" 
          /></swiper-slide>
          <!-- <swiper-slide
            ><p>中国建筑深基坑挖掘沉降观测工程</p>
            <img class="imgBox" 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";
import { windowDisplayApi } from "@/assets/js/api/zhongjianFourth";

export default {
  components: { Card },
  data() {
    return {
      // 头部行
      headerList: ["质量", "安全", "技术"],
      // 激活的item
      activeIndex: 0,
      typeId: 1,
      showList:[],
      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时显示/隐藏按钮
        },
      },
    };
  },
  created() {
    this.projectSn=localStorage.getItem('sn')
    this.getData();
  },
  watch: {
    typeId: {
      deep: true,
      handler(n, o) {
        if (n != o) {
          this.getData();
        }
      },
    },
  },
  methods: {
    /** item单击事件 */
    handelItemClick(index) {
      this.activeIndex = index;
      this.typeId = index + 1;
    },
    prev() {
      this.$refs.mySwiper.$swiper.slidePrev();
    },
    next() {
      this.$refs.mySwiper.$swiper.slideNext();
    },
    getData() {
      windowDisplayApi({
        projectSn: this.projectSn,
        typeId: this.typeId,
      }).then((res) => {
        if(res.code == 200){
          console.log('数据',res)
          this.showList = res.result
        }       
      })
    },
  },
};
</script>

<style lang="less" scoped>
.max {
  position: relative;
}
.max::after {
  content: "更多 >";
  cursor: pointer;
  color: #66d4d9;
  position: absolute;
  right: 4%;
  top: 5%;
}
.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");
      background-size: 100%;
      background-repeat: no-repeat;
      cursor: pointer;
      &.active {
        background-image: url("../assets/images/command-center/block4-active.png");
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
  }
  .swiper {
    width: 100%;
    height: 73%;
    cursor: pointer;
    .swiper1 {
      height: 100%;
      width: 96%;
      position: relative;

      p {
        width: 100%;
        height: 25px;
        line-height: 25px;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.55);
      }
      .imgBox{
        width: 100%;
        height: 100%;
      }
      // img{
      //   width: 100%;
      //   height: 100%;
      // }
      // .swiper-container-horizontal > .swiper-pagination-bullets
      ::v-deep  .swiper-pagination {
        bottom: 10%;
        left: 0;
        width: 100%;
      }   
      ::v-deep .swiper-button-next,.swiper-button-prev {
        position: absolute;
        // top: 32%;
      }
      ::v-deep .swiper-pagination-bullet-active {
        background: #fff;
      }
      ::v-deep .swiper-button-prev:after , .swiper-button-next:after {
        color: #fff;
        font-size: 5px;
      }
    }
  }
}
</style>