优化ActivityItem组件：1. 优化左右布局结构 2. 调整组件间距和样式 3. 完善组件覆盖效果

components/ActivityItem.vue

@@ -1,19 +1,27 @@
 <template>
 	<view class="activity-item flex" @click="handleClick">
 		<view class="left flex flex-col justify-between align-center">
-			<image :src="item.brandLogo" style="width: 140rpx;height: 140rpx;"></image>
+			<image :src="item.brandLogo" style="width: 140rpx;height: 140rpx;border-radius: 6rpx;"></image>
-			<text>活动状态</text>
+			<text style="color: #606060;font-size: 24rpx;font-weight: bold;white-space: nowrap;">
-			<view v-if="item.audit_status == 0" style="color: #9E9E9E;font-size: 24rpx;">待审核</view>
+				<block v-if="activityState === 'recruiting'">活动招募还剩</block>
-			<view v-if="item.audit_status == 2" style="color: #DE3C4B;font-size: 24rpx;">未通过</view>
+				<block v-else-if="activityState === 'inProgress'">距离达成还剩</block>
-			<view v-if="item.audit_status == 1">
+			</text>
-				<block v-if="item.activity_status == 1">
+			<view class="status-box">
-					<view class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募进行中</view>
+				<block v-if="activityState === 'recruiting'">
-					<view>
+					<view class="days-left">
-						<text style="font-size: 72rpx; color: #DE3C4B;">{{item.remainingDays}}</text>天
+						<text style="font-size: 72rpx; color: #DE3C4B;">{{item.remainingDays}}</text>
+						<text style="font-size: 24rpx;color: #606060;">天</text>
 					</view>
 				</block>
-				<block v-else>
+				<block v-else-if="activityState === 'inProgress'">
-					<view style="color: #9E9E9E;font-size: 24rpx;">活动已结束</view>
+					<view v-if="item.remainingBeerCount > 0">
+						<text style="font-size: 24rpx;color: #0B0E26;">{{item.remainingBeerCount}}</text>
+						<text style="font-size: 24rpx;color: #0B0E26;">桶</text>
+					</view>
+				</block>
+				<block v-else-if="activityState === 'completed'">
+					<view v-if="!item.barAwardStatus" style="font-size: 24rpx;color: #19367A;font-weight: bold;">待兑付</view>
+					<view v-else style="font-size: 24rpx;color: #19367A;font-weight: bold;">已完成</view>
 				</block>
 			</view>
 		</view>
@@ -30,6 +38,7 @@
 				<text v-if="item.activityRewardType == 2 || (item.activityRewardType == 1 && item.activityRewardGoods)" class="zeng">赠</text>
 				<text v-if="item.activityRewardType == 1 && item.activityRewardGoods" style="color: #0B0E26;font-size: 24rpx;">{{item.activityRewardGoods.goodsName}} * {{item.activityRewardCount}}</text>
 				<text v-if="item.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{item.activityRewardCount}}个</text>
+				<text v-if="item.barAwardStatus" style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
 			</view>
 		</view>
 	</view>
@@ -44,6 +53,18 @@ export default {
 			required: true
 		}
 	},
+	computed: {
+		activityState() {
+			if (this.item.activityStatus === 1) {
+				return 'recruiting';
+			} else if (this.item.activityStatus === 2) {
+				return 'inProgress';
+			} else if (this.item.activityStatus === 3) {
+				return 'completed';
+			}
+			return '';
+		}
+	},
 	methods: {
 		handleClick() {
 			this.$emit('click', this.item)
@@ -56,54 +77,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* 活动项容器样式 */
 .activity-item {
-	border-radius: 20rpx;
+	position: relative;
-	background: #FDFDFD;
-	box-sizing: border-box;
-	border: 1px solid #F2F2F2;
 	width: 702rpx;
-	margin-bottom: 32rpx;
+	margin-bottom: 48rpx;
+	
+	// &:last-child {
+	// 	margin-bottom: 0;
+	// }
 	
-	.left {
-		padding: 24rpx 20rpx;
-		border-radius: 20rpx;
-		background: #FFFFFF;
-		box-sizing: border-box;
-		border: 1px solid #EFEDE9;
-		width: 180rpx;
-		margin-top: -10rpx;
-		margin-bottom: -10rpx;
-	}
-
 	.right {
-		padding: 20rpx;
+		width: 702rpx;
-		flex: 1;
+		min-height: 428rpx;
-		
+		background: #FFFFFF;
+		border-radius: 20rpx;
+		padding: 24rpx 24rpx 24rpx 200rpx;
+		box-sizing: border-box;
+		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
+
 		.title {
-			font-family: Source Han Sans;
+			font-size: 32rpx;
-			font-size: 28rpx;
 			font-weight: bold;
-			line-height: 30rpx;
+			line-height: 48rpx;
 			color: #0B0E26;
-			margin-bottom: 20rpx;
+			margin-bottom: 16rpx;
 		}
 
 		.sub {
-			font-family: Source Han Sans;
+			font-size: 28rpx;
-			font-size: 24rpx;
 			font-weight: 500;
-			line-height: 30rpx;
+			line-height: 40rpx;
 			color: #0B0E26;
 			margin-bottom: 16rpx;
 		}
 
 		.scroll-img {
-			width: 500rpx;
+			width: 100%;
 			display: flex;
 			flex-direction: row;
 			white-space: nowrap;
 			height: 144rpx;
-			margin-bottom: 20rpx;
+			margin-bottom: 18rpx;
+			overflow-x: auto;
 
 			.beer-box {
 				width: 100rpx;
@@ -119,9 +135,8 @@ export default {
 				}
 			}
 		}
-		
+
 		.zeng {
-			font-family: Source Han Sans;
 			font-size: 20rpx;
 			font-weight: bold;
 			line-height: normal;
@@ -133,5 +148,67 @@ export default {
 			margin-right: 20rpx;
 		}
 	}
+
+	.left {
+		position: absolute;
+		left: 0;
+		top: -12rpx;
+		height: calc(100% + 24rpx);
+		width: 180rpx;
+		padding: 24rpx 16rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		border: 1px solid #EFEDE9;
+		z-index: 1;
+		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+
+		.brand-logo {
+			width: 148rpx;
+			height: 148rpx;
+			border-radius: 12rpx;
+			margin-bottom: 16rpx;
+		}
+
+		.brewery-name {
+			font-size: 24rpx;
+			font-weight: bold;
+			color: #0B0E26;
+			text-align: center;
+			margin-bottom: 8rpx;
+		}
+
+		.city {
+			font-size: 20rpx;
+			color: #9D9D9D;
+			text-align: center;
+			margin-bottom: 16rpx;
+		}
+
+		.status-text {
+			font-size: 20rpx;
+			color: #0B0E26;
+			text-align: center;
+			margin-bottom: 8rpx;
+		}
+
+		.remaining-days {
+			font-size: 40rpx;
+			font-weight: bold;
+			color: #D42E78;
+			text-align: center;
+			margin-bottom: 8rpx;
+		}
+
+		.days-unit {
+			font-size: 20rpx;
+			color: #D42E78;
+			text-align: center;
+		}
+	}
 }
 </style>