效果
<template>
<div class="hp-teacher-intro" v-if="item">
<div class="title">
<img class="icon" src="../../../../../../editorImg/teacher.png" alt="" />
<h2>{{ moduleProp.title || '机构介绍' }}</h2>
</div>
<div class="card">
<swiper class="swiper" :options="swiperOption" ref="mySwiper" @slideChange="slideChange">
<!-- 添加的图片 -->
<swiper-slide v-for="(v, index) in list" :key="index">
<img class="img" :src="v.image" />
<h4>{{ v.title }}</h4>
<!-- <h6>
{{ v.intro }}
</h6> -->
</swiper-slide>
</swiper>
<div v-for="(value, idx) in list" :key="idx" class="intro">
<h6 v-show="idx === current">
{{ value.intro }}
</h6>
</div>
<!-- <div class="swiper">
<a-carousel autoplay class="swiper-list">
<img src="../../../../../../editorImg/peopel1.png" alt="" />
<img src="../../../../../../editorImg/peopel2.png" alt="" />
<img src="../../../../../../editorImg/peopel3.png" alt="" />
</a-carousel>
</div> -->
</div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { getSitesEditorModuleStateKey } from '@/utils/util'
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
props: {
moduleProp: {
type: Object,
default: () => {}
}
},
data() {
return {
swiperOption: {
// 可见图片张数
slidesPerView: 3,
// 默认选中中间一张
centeredSlides: true,
centeredSlidesBounds: true,
// 无限循环
loop: true,
// effect: 'coverflow',
// 小圆点（我此处没使用，列出供参考）
pagination: {
el: '.swiper-pagination',
clickable: true
},
coverflow: {
rotate: 0, // slide做3d旋转时Y轴的旋转角度。默认50。
stretch: 200, // 每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
depth: 150, // slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
// modifier: 1, // depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
slideShadows: false // 开启slide阴影。默认 true。
},
// 自动轮播
autoplay: {
stopOnLastSlide: true,
delay: 5000
},
// 上下按钮点击轮播效果
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
list: [
{
image: require('../../../../../../editorImg/peopel1.png'),
title: '11',
intro: '11111111111111111112'
},
{
image: require('../../../../../../editorImg/peopel2.png'),
title: '222222',
intro: '222222222222223'
},
{
image: require('../../../../../../editorImg/peopel3.png'),
title: '某某某：联合创始人某某某：联合创始人',
intro:
'某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人'
}
],
current: 0
}
},
computed: {
...mapState('sitesEditor', {
item: function(state) {
return state[getSitesEditorModuleStateKey('item', this.moduleProp)]
}
}),
swiper() {
return this.$refs.mySwiper.$swiper
}
},
methods: {
...mapActions('sitesEditor', ['getModuleData']),
async initData() {
await this.getModuleData(this.moduleProp)
},
// 点击官网进行动态修改
toOrgIntroOfficial() {
const routerId = this.$route.params.id
const routeUrl = this.$router.resolve({
path: `/orgIntroOfficialEditor/edit/${routerId}`
})
window.open(routeUrl.href, '_blank')
},
slideChange() {
this.current = this.swiper.realIndex
}
},
mounted() {
// this.initData()
},
components: {
Swiper,
SwiperSlide
}
}
</script>
<style lang="stylus" scoped>
.hp-teacher-intro
// height 144px
width 100%
padding 15px
.title
display flex
align-items center
.icon
width 20px
color #ff7e2f
margin -8px 5px 0 5px
h2
// display inline-block
font-weight bold
.card
padding 19px
border-radius 10px
box-shadow 0 0 8px #cccccc
width 100%
.swiper
width 174px
border-color white
.swiper-slide
// display flex
position relative
width 60px
align-items center
justify-content center
.img
// width 60px
height 120px
width 100%
h4
display none
h6
display none
.swiper-slide-active
z-index 999
.img
width 80px
height 125px
h4
display block
width 174px
margin-left -60px
margin-top 20px
text-align center
.intro
text-align center
</style>
<template>
<div class="hp-teacher-intro" v-if="
