You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

95 lines
1.8 KiB

<template>
<swiper class="swiper-block" circular="true" previous-margin="100rpx" next-margin="100rpx" current="0" @change="swiperChange">
<swiper-item v-for="(item, index) in list" :key="index">
<view class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @click="toDetail(item.id)">
<image mode="aspectFill" :src="item.imageInput" class="slide-image"></image>
<view class="title line1">{{item.title}}</view>
<view class="intro line2">{{item.synopsis}}</view>
</view>
</swiper-item>
</swiper>
</template>
<script>
export default{
props: {
imgs: {
type: Array,
default: []
},
list: {
type: Array,
default: []
}
},
data(){
return {
swiperIndex: 0
}
},
methods: {
swiperChange(e) {
this.swiperIndex = e.detail.current
},
toDetail(id){
this.$yrouter.push({
path: '/pages/knowledge/detail',
query: {
id: id,
},
})
},
}
}
</script>
<style lang="less">
.swiper-block {
width: 100%;
height: 780rpx;
}
swiper-item{
width: 100%;
height: 780rpx;
}
.swiper-item {
width: 420rpx;
height: 740rpx;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: unset;
position: relative;
}
.slide-image {
width: 420rpx;
height: 578rpx;
border-radius: 230rpx 230rpx 34rpx 34rpx;
border: 1rpx solid #B67827;
z-index: 1;
}
.title{
width: 420rpx;
height: 96rpx;
background: #B67827;
color: #FFCB85;
text-align: center;
line-height: 96rpx;
margin-top: -96rpx;
padding: 0 12rpx;
border-radius: 0rpx 0rpx 34rpx 34rpx;
z-index: 99;
}
.intro{
font-size: 28rpx;
color: #222;
margin-top: 20rpx;
}
.active {
transform: scale(1.1);
transition: all 0.2s linear;
z-index: 20;
}
</style>