145 lines
3.1 KiB
Vue
145 lines
3.1 KiB
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>
|