hldy_app_mini/pages/NursingNew/component/leftcontent/swipecard.vue

<template>
	<view>
		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="false" :circular="true"
		 :autoplay="false" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in indexmessage.directiveList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="uni.getStorageSync('imagebase')+item.previewFile" mode="aspectFill" ></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props:{
			indexmessage:{}
		},
		data() {
			return {
				cardCur: 0,
				dotStyle: false,
				towerStart: 0,
				direction: ''
			};
		},
		created() {
			// console.log(this.indexmessage)
		},
		methods:{
			cardSwiper(e) {
				this.cardCur = e.detail.current;
				this.$emit('current',e.detail.current)
			},
		}
	}
</script>

<style lang="less" scoped>
swiper .a-swiper-dot {
	display: inline-block;
	width: 16upx;
	height: 16upx;
	background: rgba(0, 0, 0, .3);
	border-radius: 50%;
	vertical-align: middle;
}

swiper[class*="-dot"] .wx-swiper-dots,
swiper[class*="-dot"] .a-swiper-dots,
swiper[class*="-dot"] .uni-swiper-dots {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
}

swiper.square-dot .wx-swiper-dot,
swiper.square-dot .a-swiper-dot,
swiper.square-dot .uni-swiper-dot {
	background-color: #ffffff;
	opacity: 0.4;
	width: 10upx;
	height: 10upx;
	border-radius: 20upx;
	margin: 0 8upx !important;
}

swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active,
swiper.square-dot .a-swiper-dot.a-swiper-dot-active,
swiper.square-dot .uni-swiper-dot.uni-swiper-dot-active {
	opacity: 1;
	width: 30upx;
}

swiper.round-dot .wx-swiper-dot,
swiper.round-dot .a-swiper-dot,
swiper.round-dot .uni-swiper-dot {
	width: 10upx;
	height: 10upx;
	position: relative;
	margin: 4upx 8upx !important;
}

swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after,
swiper.round-dot .a-swiper-dot.a-swiper-dot-active::after,
swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
	content: "";
	position: absolute;
	width: 10upx;
	height: 10upx;
	top: 0upx;
	left: 0upx;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #ffffff;
	border-radius: 20upx;
}

swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active,
swiper.round-dot .a-swiper-dot.a-swiper-dot-active,
swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
	width: 18upx;
	height: 18upx;
}

.screen-swiper {
	min-height: 375upx;
}

.screen-swiper image,
.screen-swiper video,
.swiper-item image  {
	width: 100%;
	display: block;
	height: 100%;
	margin: 0;
	pointer-events: none;
}

.card-swiper {
	width: 38vw;
	height: 23.5vw !important;
}

.card-swiper swiper-item {
	width: 620upx !important;
	left: 100upx;
	box-sizing: border-box;
	overflow: initial;
}

.card-swiper swiper-item .swiper-item {
	width: 100%;
	display: block;
	height: 100%;
	border-radius: 20px;
	transform: scale(0.9);
	transition: all 0.2s ease-in 0s;
	overflow: hidden;
	background: #f6f9ff;
}

.card-swiper swiper-item.cur .swiper-item {
	transform: none;
	transition: all 0.2s ease-in 0s;
}


.tower-swiper {
	height: 420upx;
	position: relative;
	max-width: 750upx;
	overflow: hidden;
}

.tower-swiper .tower-item {
	position: absolute;
	width: 300upx;
	height: 380upx;
	top: 0;
	bottom: 0;
	left: 50%;
	margin: auto;
	transition: all 0.2s ease-in 0s;
	opacity: 1;
}

.tower-swiper .tower-item.none {
	opacity: 0;
}

.tower-swiper .tower-item .swiper-item {
	width: 100%;
	height: 100%;
	border-radius: 20px;
}
</style>