171 lines
3.8 KiB
Vue
171 lines
3.8 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="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> |