异业券多皮肤上传

components/integralArea/InviteGift.less

@@ -8,19 +8,27 @@
 		color: #333333;
 		margin-bottom: 20rpx;
 		display: block;
+
+		&.item-4 {
+			color: #FFF0DF;
+		}
 	}
 
 	.invite_card {
 		position: relative;
 		width: 100%;
 		height: 254rpx;
-		background: rgba(255, 255, 255, 0.3);
+		background: rgba(255, 255, 255, 0.2);
 		border-radius: 30rpx;
 		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
 		padding: 30rpx;
 		box-sizing: border-box;
 		overflow: hidden;
 
+		&.item-4 {
+			background: rgba(255, 255, 255, 0.1);
+		}
+
 		.card_content {
 			position: relative;
 			height: 100%;
@@ -32,18 +40,26 @@
 				font-size: 36rpx;
 				font-weight: bold;
 				color: #1c1c1c;
+
+				&.item-4 {
+					color: #FFF0DF;
+				}
 			}
 
 			.card_description {
 				font-size: 24rpx;
 				color: #999999;
 				margin-top: 10rpx;
+
+				&.item-4 {
+					color: #FFF0DF;
+				}
 			}
 
 			.invite_button {
 				width: 172rpx;
 				height: 62rpx;
-				background: linear-gradient(90deg, #A07B4D 0%, #C09A60 100%);
+				background: linear-gradient(to right, #A07B4D 0%, #C09A60 100%);
 				border-radius: 30rpx;
 				display: flex;
 				margin-top: 30rpx;
@@ -62,6 +78,22 @@
 				&:active {
 					transform: scale(0.95);
 				}
+
+				&.item-1 {
+					background: linear-gradient(to right, #5089C1 0%, #6FA2D5 100%);
+				}
+
+				&.item-2 {
+					background: linear-gradient(to right, #7253A5 0%, #9879CC 100%);
+				}
+
+				&.item-3 {
+					background: linear-gradient(to right, #CDA36B 0%, #E0B97D 100%);
+				}
+
+				&.item-4 {
+					background: linear-gradient(to right, #000000 0%, #2C1500 100%);
+				}
 			}
 		}
 
@@ -82,12 +114,24 @@
 				font-size: 24rpx;
 				color: #999999;
 				margin-right: 8rpx;
+
+				&.item-4 {
+					color: #D7D7D7;
+				}
 			}
 
 			.record_arrow {
 				font-size: 20rpx;
 				color: #999999;
 				font-weight: bold;
+
+				&.item-4 {
+					color: #D7D7D7;
+				}
+			}
+
+			&.item-4 {
+				background: rgba(255, 255, 255, 0.36);
 			}
 
 			&:active {

components/integralArea/InviteGift.vue

 <template>
-	<view class="invite_gift_container">
+	<view class="invite_gift_container" :class="`item-${itemIndex}`">
 		<!-- 主标题 -->
-		<text class="invite_gift_title">邀请得好礼</text>
+		<text class="invite_gift_title" :class="`item-${itemIndex}`">邀请得好礼</text>
 		
 		<!-- 邀请卡片 -->
-		<view class="invite_card">
+		<view class="invite_card" :class="`item-${itemIndex}`">
 			<!-- 卡片内容区域 -->
 			<view class="card_content">
 				<!-- 卡片标题 -->
-				<text class="card_title">邀请好友注册得好礼</text>
+				<text class="card_title" :class="`item-${itemIndex}`">邀请好友注册得好礼</text>
 				
 				<!-- 描述文字 -->
-				<text class="card_description">成功邀请一位好友注册即可获得XXX</text>
+				<text class="card_description" :class="`item-${itemIndex}`">成功邀请一位好友注册即可获得XXX</text>
 				
 				<!-- 去邀请按钮 -->
-				<button class="invite_button" @tap="handleInviteClick" open-type="share">
+				<button class="invite_button" :class="`item-${itemIndex}`" @tap="handleInviteClick" open-type="share">
 					<text class="invite_button_text">去邀请</text>
 				</button>
 			</view>
@@ -27,9 +27,9 @@
 				/>
 			</view>
 			<!-- 邀请记录按钮 -->
-			<view class="record_button" @click="handleRecordClick">
-				<text class="record_text">邀请记录</text>
-				<text class="record_arrow">{{`>`}}</text>
+			<view class="record_button" :class="`item-${itemIndex}`" @click="handleRecordClick">
+				<text class="record_text" :class="`item-${itemIndex}`">邀请记录</text>
+				<text class="record_arrow" :class="`item-${itemIndex}`">{{`>`}}</text>
 			</view>
 			
 			<!-- 3D星星角色 -->
@@ -45,11 +45,24 @@
 </template>
 
 <script setup>
-import { defineEmits } from 'vue';
+import { defineProps, defineEmits, onMounted } from 'vue';
+
+// Props 定义
+const props = defineProps({
+	itemIndex: {
+		type: Number,
+		default: 0
+	}
+});
 
 // Emits 定义
 const emit = defineEmits(['invite', 'record']);
 
+// 在 onMounted 中打印 itemIndex
+onMounted(() => {
+	console.log('InviteGift itemIndex:', props.itemIndex);
+});
+
 // 去邀请按钮点击事件
 const handleInviteClick = () => {
 	console.log('去邀请按钮点击');

views/Integral.less

@@ -475,11 +475,15 @@
 .signin_reward_container {
 	width: 686rpx;
 	height: 418rpx;
-	background: rgba(255, 255, 255, 0.3);
+	background: rgba(255, 255, 255, 0.2);
 	border-radius: 30rpx;
 	margin-top: 30rpx;
 	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); // 更柔和的阴影
 
+	&.item-4 {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
 	// 标题区域
 	.signin_title_area {
 		display: flex;
@@ -959,10 +963,26 @@
 		margin-bottom: 30rpx;
 		padding: 0 30rpx 0 30rpx;
 		display: block;
+
+		&.item-1 {
+			color: #284A6C;
+		}
+
+		&.item-2 {
+			color: #322D6F;
+		}
+
+		&.item-3 {
+			color: #814912;
+		}
+
+		&.item-4 {
+			color: #FFF0DF;
+		}
 	}
 
 	.yiyequan_card {
-		background: rgba(255, 255, 255, 0.3);
+		background: rgba(255, 255, 255, 0.2);
 		height: 472rpx;
 		border-radius: 30rpx;
 		padding-left: 24rpx;
@@ -972,10 +992,14 @@
 		margin-right: 32rpx;
 		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
 
+		&.item-4 {
+			background: rgba(255, 255, 255, 0.2);
+		}
+
 		.yiyequan_card_header {
 			padding-top: 24rpx;
 			display: flex;
-			justify-content: space-between;
+			// justify-content: space-between;
 			align-items: center;
 			margin-bottom: 30rpx;
 
@@ -983,11 +1007,21 @@
 				font-size: 32rpx;
 				font-weight: bold;
 				color: #333333;
+
+				&.item-4 {
+					color: #FFF0DF;
+				}
 			}
 
 			.card_count {
 				font-size: 24rpx;
 				color: #666666;
+
+				margin-left: 30rpx;
+
+				&.item-4 {
+					color: #FFF0DF;
+				}
 			}
 		}
 
@@ -1059,6 +1093,10 @@
 								line-clamp: 2;
 								-webkit-box-orient: vertical;
 								color: #333333;
+
+								&.item-4 {
+									color: #FFF0DF;
+								}
 								font-weight: normal;
 								height: 80rpx;
 							}
@@ -1089,6 +1127,22 @@
 								text-align: center;
 								line-height: 62rpx;
 
+								&.item-1 {
+									background: linear-gradient(90deg, #5089C1 0%, #6FA2D5 100%);
+								}
+
+								&.item-2 {
+									background: linear-gradient(90deg, #7253A5 0%, #9879CC 100%);
+								}
+
+								&.item-3 {
+									background: linear-gradient(90deg, #CDA36B 0%, #E0B97D 100%);
+								}
+
+								&.item-4 {
+									background: linear-gradient(90deg, #000000 0%, #2C1500 100%);
+								}
+
 								.exchange_text {
 									font-size: 24rpx;
 									color: #FFFFFF;
@@ -1129,6 +1183,10 @@
 					color: #333333;
 					text-align: left;
 					overflow: hidden;
+
+					&.item-4 {
+						color: #FFF0DF;
+					}
 					text-overflow: ellipsis;
 					white-space: nowrap;
 					width: 100%;
@@ -1151,6 +1209,22 @@
 					align-items: center;
 					justify-content: center;
 
+					&.item-1 {
+						background: linear-gradient(90deg, #5089C1 0%, #6FA2D5 100%);
+					}
+
+					&.item-2 {
+						background: linear-gradient(90deg, #7253A5 0%, #9879CC 100%);
+					}
+
+					&.item-3 {
+						background: linear-gradient(90deg, #CDA36B 0%, #E0B97D 100%);
+					}
+
+					&.item-4 {
+						background: linear-gradient(90deg, #000000 0%, #2C1500 100%);
+					}
+
 					.exchange_text {
 						font-size: 24rpx;
 						color: #FFFFFF;

views/Integral.vue

@@ -223,8 +223,8 @@
 				:src="$baseUrl + `integral/${tupianBanben}/zhankaiBtn${itemIndex}.png`" mode="aspectFit" />
 		</view>
 
-		<!-- 7天连续签到奖励容器 -->
-		<view class="signin_reward_container" v-if="true">
+	<!-- 7天连续签到奖励容器 -->
+	<view class="signin_reward_container" :class="`item-${itemIndex}`" v-if="true">
 			<!-- 标题区域 -->
 			<view class="signin_title_area" :class="`item-${itemIndex}`">
 				<text class="signin_main_title">连签7天，奖励翻5倍</text>
@@ -273,8 +273,8 @@
 		</view>
 		<!-- 积分限时购 -->
 		<SeckillSection :isdebug="isdebug" @credits-sale-click="handleCreditsSaleClick" />
-		<!-- 邀请得好礼组件 -->
-		<InviteGift v-if="true" class="invite_container" @invite="handleInviteClick" @record="handleRecordClick" />
+	<!-- 邀请得好礼组件 -->
+	<InviteGift v-if="true" class="invite_container" :itemIndex="itemIndex" @invite="handleInviteClick" @record="handleRecordClick" />
 		<!-- 会员活动 -->
 		<view class="vip-active-area" v-if="vipActive?.length > 0">
 			<text class="vip-title" :style="{ color: itemIndex === 4 ? '#fff0df' : '#1d1e25' }">会员活动</text>
@@ -288,17 +288,17 @@
 			</swiper>
 		</view>
 
-		<!-- 异业券权益区域 -->
-		<view class="yiyequan_area">
-			<!-- 主标题 -->
-			<text class="yiyequan_title">异业券权益</text>
+	<!-- 异业券权益区域 -->
+	<view class="yiyequan_area" :class="`item-${itemIndex}`">
+		<!-- 主标题 -->
+		<text class="yiyequan_title" :class="`item-${itemIndex}`">异业券权益</text>
 
-			<!-- 权益卡片 -->
-			<view class="yiyequan_card">
+		<!-- 权益卡片 -->
+		<view class="yiyequan_card" :class="`item-${itemIndex}`">
 				<!-- 卡片头部 -->
 				<view class="yiyequan_card_header">
-					<text class="card_title">积分兑换惊喜福利</text>
-					<text class="card_count">您有{{ availableBenefits }}个权益可兑换</text>
+					<text class="card_title" :class="`item-${itemIndex}`">积分兑换惊喜福利</text>
+					<text class="card_count" :class="`item-${itemIndex}`">您有{{ availableBenefits }}个权益可兑换</text>
 				</view>
 
 				<!-- 权益列表 -->
@@ -316,7 +316,7 @@
 							<!-- 单个商品时的内容区域 -->
 							<view class="benefit_content" v-if="benefitList.length === 1">
 								<!-- 权益名称 -->
-								<text class="benefit_name">{{ benefit.goodsName }}</text>
+								<text class="benefit_name" :class="`item-${itemIndex}`">{{ benefit.goodsName }}</text>
 
 								<!-- 积分价格容器 -->
 								<view class="benefit_points_container">
@@ -324,7 +324,7 @@
 								</view>
 
 								<!-- 兑换按钮 -->
-								<view class="exchange_button" @click="handleExchangeClick(benefit, index)">
+								<view class="exchange_button" :class="`item-${itemIndex}`" @click="handleExchangeClick(benefit, index)">
 									<text class="exchange_text">兑换</text>
 								</view>
 							</view>
@@ -332,13 +332,13 @@
 							<!-- 多个商品时的内容区域 -->
 							<template v-else>
 								<!-- 权益名称 -->
-								<text class="benefit_name">{{ benefit.goodsName }}</text>
+								<text class="benefit_name" :class="`item-${itemIndex}`">{{ benefit.goodsName }}</text>
 
 								<!-- 积分价格 -->
 								<text class="benefit_points">{{ benefit.credits }}积分</text>
 
 								<!-- 兑换按钮 -->
-								<view class="exchange_button" @click="handleExchangeClick(benefit, index)">
+								<view class="exchange_button" :class="`item-${itemIndex}`" @click="handleExchangeClick(benefit, index)">
 									<text class="exchange_text">兑换</text>
 								</view>
 							</template>