活动专享卷其他状态样式完成

pagesMy/exclusiveScroll.vue

@@ -9,13 +9,15 @@
 		<div class="list">
 			<up-list @scrolltolower="scrolltolower" style="height: 100%;">
 				<up-list-item v-for="(item, index) in list" :key="index">
-					<div class="box" :style="{'margin-top':index===0?0:'24rpx'}">
+					<div class="box" :style="{'margin-top':index===0?0:'24rpx'}" :class="{'grey':tidx!==0}">
+						<image class="box-img" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/4320f839-19f2-484f-a827-f2b403bb00ff.png" v-if="tidx===1"></image>
+						<image class="box-img" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/106a02e0-e979-42a5-979b-0d934d6690f6.png" v-if="tidx===2"></image>
 						<div class="box-top">
 							<div class="box-top-title">{{'活动专享卷'}}</div>
 							<div class="box-top-tip">{{'环保知识知多少? 让孩子成为大自然的守护者！'}}</div>
 							<div class="box-top-date adfacjb">
 								<div class="box-top-date-left">有效期至{{'2025.07.30 23:59'}}</div>
-								<div class="box-top-date-right">立即使用</div>
+								<div class="box-top-date-right" v-if="tidx===0">立即使用</div>
 							</div>
 						</div>
 						<div class="box-bottom adf" @tap="handleExpand(item,index)">
@@ -104,6 +106,14 @@
 			overflow: auto;
 			
 			.box{
+				position: relative;
+				&-img{
+					width: 128rpx;
+					height: 118rpx;
+					position: absolute;
+					top: 0;
+					right: 0;
+				}
 				&-top{
 					border-radius: 24rpx 24rpx 0 0;
 					padding: 40rpx 24rpx 24rpx;
@@ -176,6 +186,17 @@
 						padding-top: 4rpx;
 					}
 				}
+				&.grey{
+					.box-top{
+						background: #FFFFFF;
+						&-title{
+							color: #657588;
+						}
+						&-tip,&-date-left{
+							color: #A4A4A4;
+						}
+					}
+				}
 			}
 		}	
 	}