108 lines
1.9 KiB
Vue
108 lines
1.9 KiB
Vue
<template>
|
|
<div class="swiper" :class="{dotIndicator}">
|
|
<el-carousel height="100%" :indicator-position="indicator" :arrow="arrow">
|
|
<el-carousel-item v-for="(item, index) in data" :key="index">
|
|
<img v-if="item.img" :src="item.img">
|
|
<div class="swiper-content" v-if="item.title">
|
|
<h2>{{ item.title }}</h2>
|
|
<p>{{ item.content }}</p>
|
|
</div>
|
|
<div class="pad-h20" v-else-if="item.content" v-html="item.content"/>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiSwiper',
|
|
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
dotIndicator: Boolean//点指示器
|
|
},
|
|
computed: {
|
|
arrow: v => v.dotIndicator ? 'never' : 'hover',
|
|
indicator: v => v.dotIndicator ? undefined : 'none'
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 0 0;
|
|
|
|
&.dotIndicator {
|
|
:deep(.el-carousel ) {
|
|
|
|
.el-carousel__button {
|
|
height: 8px;
|
|
width: 8px;
|
|
border-radius: 50%;
|
|
background-color: rgba(103, 123, 154, 0.5);
|
|
}
|
|
.is-active{
|
|
.el-carousel__button{
|
|
background-color: #02FEFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep( .el-carousel ) {
|
|
height: 100%;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
padding: 10px;
|
|
text-align: center;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 100%);
|
|
|
|
h2 {
|
|
margin-bottom: 4px;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
p {
|
|
line-height: 22px;
|
|
white-space: pre-line;
|
|
color: #B6DFFF;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
text-indent: 28px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|