修改: 首页课程轮播如果课程结束就显示已结束

components/lgSwiper.vue

@@ -2,13 +2,18 @@
 	<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">
+			: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%;">
+					<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>
@@ -34,7 +39,7 @@
 			changeCurrent(e) {
 				this.currentIndex = e.detail.current
 			},
-			swiperClick(data){
+			swiperClick(data) {
 				// console.log(111, data)
 				this.$emit('swiperClick', data);
 			}
@@ -82,27 +87,40 @@
 		z-index: 10;
 		display: flex;
 		align-items: center;
+
 		.swiper-text {
-				font-weight: bold;
-				display: inline-block;
-			  // animation: marquee 10s linear infinite;
-			  /* 以下属性防止文字换行 */
-			  white-space: nowrap;
-			}
+			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%);
-	  }
+		0% {
+			transform: translateX(15%);
+		}
+
+		100% {
+			transform: translateX(-100%);
+		}
 	}
 
 	.swiper-item-normal {
 		z-index: 1;
 		display: flex;
-		    align-items: center;
+		align-items: center;
 	}
 
 	.swiper-item {
@@ -116,6 +134,7 @@
 		border-radius: 10px;
 		flex-direction: column;
 		color: #000;
+
 		.swiper-text {
 			white-space: nowrap;
 			overflow: hidden;
@@ -123,7 +142,8 @@
 			// margin-top: 10rpx;
 			margin-top: 7rpx;
 		}
-		.swiper-text-box{
+
+		.swiper-text-box {
 			width: 100%;
 			display: flex;
 			justify-content: center;
@@ -137,16 +157,18 @@
 		margin: auto;
 		justify-content: center;
 		font-size: 25rpx;
+
 		.swiper-text {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			margin-top: 5rpx;
 		}
-		.swiper-text-box{
+
+		.swiper-text-box {
 			width: auto;
 			display: flex;
 			justify-content: center;
 		}
 	}
-</style>
+</style>