zhgdyun/src/views/projectAdmin/fourEngin/quality/rightBottom.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: 125%;

  .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 {
        width: 80px;
        height: 34px;
        background-image: url("../assets/images/command-center/block4-active.png");
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
  }
  .swiper {
    width: 102%;
    height: 120%;
    cursor: pointer;
    background-image: url("~@/assets/images/zjsj/frameBG.png") ;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .swiper1 {
      height: 85%;
      width: 88%;
      position: relative;
       margin-top: 27px;
      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>