menber-center/components/lgSwiper.vue

<template>
	<view class="container">
		<swiper class="swiper" :circular="true" :autoplay="false" :duration="500" :previous-margin="'200rpx'"
			:next-margin="'200rpx'" :style="{ height: '320rpx' }" :current="currentIndex"
			:easing-function="easeInOutCubic" @change="changeCurrent">
			<swiper-item v-for="(slide, index) in processedSildeItems" :key="index" style="overflow: initial;"
				:class="index==currentIndex? 'swiper-item-active':'swiper-item-normal'" @click="swiperClick(slide)">
				<view :class="index==currentIndex? 'swiper-item active':'swiper-item'">
					<view style="width: 100%;height: 90%;position: relative;">
						<image style="width: 100%;height: 100%;" mode="aspectFit" :src="slide[image]"></image>
						<view style="background: linear-gradient(to bottom, rgb(255 248 248 / 86%), rgb(255 255 255 / 24%));
							position: absolute;z-index: 9999;width: 100%;height: 70rpx;"
							:class="index==currentIndex? 'end-active':'end'"
							v-if="slide.status === '2' || slide.status === '3'">
							<text style="font-size: 25rpx; padding-left:10rpx ;">已结束</text>
						</view>
					</view>
					<view class="swiper-text-box">
						<text class="swiper-text">{{ slide[title] }}</text>
					</view>
				</view>
				<!-- <view :class="index==currentIndex? 'swiper-item active':'swiper-item'" >
					<image style="width: 100%;height: 90%;" mode="aspectFit" :src="slide[image]" ></image>
					<text class="swiper-text">{{ slide[title] }}</text>
				</view> -->
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0
			};
		},
		methods: {
			changeCurrent(e) {
				this.currentIndex = e.detail.current
			},
			swiperClick(data) {
				// console.log(111, data)
				this.$emit('swiperClick', data);
			}
		},
		props: {
			sildeItems: {
				type: Array,
				required: true
			},
			image: {
				type: String,
				required: false,
				default: "image"
			},
			title: {
				type: String,
				required: false,
				default: "title"
			}
		},
		computed: {
			processedSildeItems() {
				return [...this.sildeItems, ...this.sildeItems];
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper {
		width: 100%;
		overflow: visible;
		/* 确保部分滑块可见 */
		height: 100%;
		padding: 0 25rpx;
	}

	.swiper-item-active {
		z-index: 10;
		display: flex;
		align-items: center;

		.swiper-text {
			font-weight: bold;
			display: inline-block;
			// animation: marquee 10s linear infinite;
			/* 以下属性防止文字换行 */
			white-space: nowrap;
		}
	}
	
	.end-active{
		top: 0;
		// transform: translateY(-5%);
		left: 0;
	}
	.end{
		left: 15rpx;
		top: 0;
	}

	@keyframes marquee {
		0% {
			transform: translateX(15%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.swiper-item-normal {
		z-index: 1;
		display: flex;
		align-items: center;
	}

	.swiper-item {
		display: flex;
		height: 70%;
		width: 85%;
		margin: 0 auto;
		justify-content: flex-end;
		align-items: center;
		font-size: 16rpx;
		border-radius: 10px;
		flex-direction: column;
		color: #000;

		.swiper-text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			// margin-top: 10rpx;
			margin-top: 7rpx;
		}

		.swiper-text-box {
			width: 100%;
			display: flex;
			justify-content: center;
		}
	}

	.active {
		// display: flex;
		height: 100%;
		width: 93%;
		margin: auto;
		justify-content: center;
		font-size: 25rpx;

		.swiper-text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 5rpx;
		}

		.swiper-text-box {
			width: auto;
			display: flex;
			justify-content: center;
		}
	}
</style>