Style(专题页):模板2的轮播效果调整

2024-08-21 11:31:43 +08:00
parent 74c5c2b768
commit e08f597f58
4 changed files with 133 additions and 3 deletions
@@ -0,0 +1,112 @@
+<template>
+	<swiper
+		class="image-container"
+		previous-margin="145rpx"
+		next-margin="145rpx"
+		circular
+		autoplay
+		indicatorDots="true"
+		indicator-color="#ddd"
+		indicator-active-color="#777"
+		@change="swiperChange"
+	>
+		<swiper-item
+			v-for="(item, index) in imgList"
+			:key="item[urlKey]"
+			:class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
+		>
+			<image
+				:src="item[urlKey]"
+				:class="currentIndex == index ? 'item-img' : 'item-img-side'"
+				:style="dontFirstAnimation ? 'animation: none;' : ''"
+				lazy-load
+				mode="aspectFill"
+				@click="clickImg(item)"
+			/>
+		</swiper-item>
+	</swiper>
+</template>
+<script>
+	export default {
+		props: {
+			imgList: {
+				type: Array,
+				default() {
+					return []
+				}
+			},
+			urlKey: {
+				type: String,
+				default() {
+					return ''
+				}
+			},
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				dontFirstAnimation: true
+			}
+		},
+		methods: {
+			swiperChange(e) {
+				this.dontFirstAnimation = false
+				this.currentIndex = e.detail.current
+			},
+			clickImg(item) {
+				this.$emit('selected', item, this.currentIndex)
+			}
+		}
+	}
+</script>
+<style scoped>
+	.image-container {
+		width: 750rpx;
+		height: 840rpx;
+	}
+
+	.item-img {
+		width: 430rpx;
+		height: 700rpx;
+		border-radius: 14rpx;
+	}
+
+	.swiper-item {
+		width: 430rpx;
+		height: 700rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.item-img-side {
+		width: 344rpx;
+		height: 560rpx;
+		border-radius: 14rpx;
+	}
+
+	.swiper-item-side {
+		width: 430rpx;
+		height: 560rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	@keyframes to-mini
+	{
+		from {
+			height: 700rpx;
+		}
+		to {
+			height: 560rpx;
+		}
+	}
+	@keyframes to-big
+	{
+		from {
+			height: 560rpx;
+		}
+		to {
+			height: 700rpx;
+		}
+	}
+</style>