91 lines
1.8 KiB
Vue
91 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="carousel">
|
||
|
|
<el-carousel
|
||
|
|
ref="carousel"
|
||
|
|
motion-blur
|
||
|
|
:pause-on-hover="true"
|
||
|
|
>
|
||
|
|
<el-carousel-item v-for="item in data" :key="item.id">
|
||
|
|
<nuxt-link target="_blank" :to="JSON.parse(item.value).link">
|
||
|
|
<img :src="getImageURL(JSON.parse(item.value).image)" :alt="item.title"/>
|
||
|
|
<p>{{ item.title }}</p>
|
||
|
|
</nuxt-link>
|
||
|
|
</el-carousel-item>
|
||
|
|
</el-carousel>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getImageURL } from '@/utils/util'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Carousel',
|
||
|
|
props: {
|
||
|
|
// 轮播数据
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getImageURL
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.carousel {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
:deep(.el-carousel) {
|
||
|
|
// 原点占位宽度
|
||
|
|
--indicators-width: 200px;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
.el-carousel__container {
|
||
|
|
height: 100% !important;
|
||
|
|
}
|
||
|
|
// 轮播项
|
||
|
|
.el-carousel__item {
|
||
|
|
background-color: #efdfdf;
|
||
|
|
a {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
left: 0;
|
||
|
|
margin: 0;
|
||
|
|
bottom: 0;
|
||
|
|
padding: 8px var(--indicators-width) 8px 20px;
|
||
|
|
background-color: rgba(0, 0, 0, .3);
|
||
|
|
color: var(--color-white);
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 轮播圆点
|
||
|
|
.el-carousel__indicators {
|
||
|
|
width: var(--indicators-width);
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
bottom: 5px;
|
||
|
|
left: initial;
|
||
|
|
transform: none;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|