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="numberColumns"
        :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 < this.numberColumns + 1 ||
        this.icons.length > this.numberColumns + 3
      ) {
        return this.icons
      }
      return [...this.icons, ...this.icons]
    }
  },
  data() {
    return {
      numberColumns: 4,
      modules: []
    }
  },
  methods: {
    getImageURL
  },
  created () {
    if (this.$device.isMobile) {
      this.numberColumns = 2
    }
    this.modules = [Autoplay]
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/variables";
.special-column {
  --height: 100px;
  --img-border-radius: 20px;
  // 标题宽度
  --title-width: 34px
}
@media (max-width: $--mobile-max-width) {
  .special-column {
    --height: 50px;
    --img-border-radius: 10px;
    // 标题宽度
    --title-width: 40px
  }
  .title-wrap > label{
    overflow: hidden;
    font-size: 12px!important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.special-column {
  display: flex;
  // 标题
  .title-wrap {
    height: var(--height);
    width: var(--title-width);
    margin: auto 20px auto 0;
    padding: 0 var(--gap-mini);
    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: calc(50% - 10px);
    flex-grow: 1;
    // 轮播项
    .swiper-slide {
      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;
        cursor: pointer;
        img {
          width: 90%;
          height: var(--height);
          border-radius: var(--img-border-radius);
          margin-left: var(--gap);
          object-fit: cover;
          cursor: pointer;
        }
      }
    }
  }
}
</style>