portal_website/src/views/contactUs/enterpriseQualification.vue

<template>
  <div>
    <div class="title">ENTERPRISE QUALIFICATION</div>
    <div class="subTitle">企业资质</div>
    <div class="bg">
      <div class="list1" ref="list1">
        <div class="item" v-for="i in cardList1">{{ i.usInfoDetailTitle }}</div>
      </div>
      <div class="list2" ref="list2">
        <div class="item" v-for="i in cardList2">{{ i.usInfoDetailTitle }}</div>
      </div>
    </div>
    <div class="carousel">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="i in imgList">
            <el-image
              style="width: 100%;height: 100%"
              :src="i.usInfoDetailPic"
              fit="contain"></el-image>
          </div>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

    </div>
  </div>
</template>

<script>
import banner from '@/assets/image/banner.png'
import Swiper from 'swiper';
import {Navigation, Autoplay} from 'swiper/modules'
import {getAboutUsInfoDetails} from "@/api/contactUs";

Swiper.use([Navigation, Autoplay])
export default {
  name: 'ProductCenter',
  props: ['aboutUsInfoId'],
  data() {
    return {
      banner,
      imgList: [],
      cardList1: [],
      cardList2: []
    }
  },
  methods: {
    async getData() {
      await getAboutUsInfoDetails({
        aboutUsInfoId: this.aboutUsInfoId
      }).then(e => {
        console.log(e)
        this.imgList = e.data.filter(v => v.usInfoDetailPic)
        let list = e.data.filter(v => v.usInfoDetailTitle)
        let cardList = list.filter((v, k) => v.usInfoDetailTitle.length <= 25)
        let longList = list.filter((v, k) => v.usInfoDetailTitle.length > 25)
        this.cardList1 = cardList.filter((v, k) => k % 2 === 0)
        this.cardList2 = cardList.filter((v, k) => k % 2 === 1)
        if(this.cardList1.length<=this.cardList2.length){
          this.cardList1 = this.cardList1.concat(longList.filter((v, k) => k % 2 === 0))
          this.cardList2 = this.cardList2.concat(longList.filter((v, k) => k % 2 === 1))
        }else{
          this.cardList1 = this.cardList1.concat(longList.filter((v, k) => k % 2 === 1))
          this.cardList2 = this.cardList2.concat(longList.filter((v, k) => k % 2 === 0))
        }
        this.$nextTick(()=>{
          console.log(this.$refs.list1.offsetHeight)
          console.log(this.$refs.list2.offsetHeight)
          let height = (Math.max(this.$refs.list1.offsetHeight,this.$refs.list2.offsetHeight) - 2.2 * (window.innerWidth/100)) + 'px'
          this.$refs.list1.style.height = height
          this.$refs.list2.style.height = height
        })
      })
    },
    initSwiper() {
      const swiper = new Swiper(".mySwiper", {
        slidesPerView: 4,
        spaceBetween: 30,
        loop: true,
        autoplay: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    }
  },
  async mounted() {
    await this.getData()
    await this.$nextTick()
    this.initSwiper()
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.content {
  width: 70vw;
  margin: 0 auto;
}

.title {
  padding-top: 4.2vw;
  width: 100%;
  text-align: center;
  font-size: 2.5vw;
  letter-spacing: 2px;
  color: #fff6;
}

.subTitle {
  margin-top: 0.4vw;
  width: 100%;
  text-align: center;
  font-size: 1.9vw;
  letter-spacing: 2px;
  color: #fff;
}

.bg {
  width: 100%;
  height: 23.3vw;
  background-color: @standard-color;
  position: absolute;
  top: 0;
  z-index: -1;

  .list1 {
    position: absolute;
    box-shadow: 0 0 3px #0002;
    top: 100%;
    left: 50%;
    width: 24.8vw;
    border-radius: 5px;
    background-color: #fff;
    transform: translate(calc(-100% - 2vw), -9.5vw);
  }

  .list2 {
    position: absolute;
    box-shadow: 0 0 3px #0002;
    top: 100%;
    left: 50%;
    width: 24.8vw;
    border-radius: 5px;
    background-color: #fff;
    transform: translate(2vw, -9.5vw);
  }

  .list1, .list2 {
    text-align: left;
    padding: 1.1vw 2.1vw;
    height: auto;

    .item {
      width: 100%;
      line-height: 2.5vw;
      font-size: 1vw;
      letter-spacing: 1px;
    }
  }
}

.carousel {
  width: 62vw;
  margin: 32vw auto 0 auto;
  position: relative;

  .swiper {
    width: 58vw;
    margin: 0 auto;
  }
}

.swiper-slide {
  height: 30vw;
}
</style>