nankai-cms-website-gov/components/cms/SpecialColumn.vue

<template>
  <div class="special-column">
    <div class="title-wrap">
      <label>专题专栏</label>
      <!-- 箭头 -->
      <span/>
    </div>
    <div class="swiper-wrap">
      <swiper
        class="swiper-container"
        ref="swiper"
        :speed="500"
        :slidesPerView="4"
        :loop="true"
        :autoplay="{
          delay: 1500,
          disableOnInteraction: false // 触摸后是否停止自动移动
        }"
        :modules="modules"
        @mouseenter="$refs.swiper.$el.swiper.autoplay.stop()"
        @mouseleave="$refs.swiper.$el.swiper.autoplay.start()"
      >
        <swiper-slide v-for="(item, index) in getIcons" :key="index">
          <nuxt-link target="_blank" :to="JSON.parse(item.value).link">
            <img
              :src="getImageURL(JSON.parse(item.value).image)"
              :alt="item.title"
            />
          </nuxt-link>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/scss'
import 'swiper/scss/free-mode'
import { getImageURL } from '@/utils/util'

export default {
  name: 'SpecialColumn',
  components: { Swiper, SwiperSlide },
  props: {
    icons: {
      default: () => {
        return []
      }
    }
  },
  computed: {
    // 获取图标
    getIcons () {
      if (this.icons.length < 5 || this.icons.length > 7) {
        return this.icons
      }
      return [...this.icons, ...this.icons]
    }
  },
  data() {
    return {
      modules: []
    }
  },
  methods: {
    getImageURL
  },
  created () {
    this.modules = [Autoplay]
  }
}
</script>

<style lang="scss" scoped>
.special-column {
  display: flex;
  // 标题
  .title-wrap {
    height: 100px;
    width: 40px;
    margin: auto 20px auto 0;
    padding: 0 14px;
    background: linear-gradient(90deg, var(--primary-color-light) 0%, var(--primary-color) 100%);
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    position: relative;
    // 箭头
    & > span {
      position: absolute;
      right: -12px;
      top: calc(50% - 10px);
      width: 0;
      height: 0;
      border-bottom:10px solid transparent;
      border-top: 10px solid transparent;
      border-left: 12px solid var(--primary-color);
    }
    // 专题文字
    label {
      display: block;
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
    }
  }
  // 轮播列表
  .swiper-wrap {
    width: calc(100% - 80px);
    height: 100px;
    flex-grow: 1;
    overflow: hidden;
    // 轮播项
    .swiper-slide {
      // 给定最大宽度，避免swiper没有计算出width时图片临时性展示过大
      max-width: 25%;
      height: 100%;
      overflow: hidden;
      padding: 0 10px;
      box-sizing: border-box;
      &:first-of-type {
        padding-left: 0;
      }
      &:last-of-type {
        padding-right: 0;
      }
      & > a {
        display: block;
        height: 100px;
        cursor: pointer;
        img {
          border-radius: 20px;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
</style>