.integral-container{
	width: 100%;
	min-height: 100vh;   
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: hidden;
	overflow-y: auto;

	.banner-swiper {
		width: 100%;
		height: 750rpx;
		flex-shrink: 0;
		// margin-bottom: 30rpx;
		
		.banner-img {
			width: 100%;
			height: 100%;
			// border-radius: 16rpx;
		}
		
	}

	.banner-swiper-space{
		width: 100%;
		height: 160rpx;
		flex-shrink: 0;
	}

	.vip-swiper {
		width: 687rpx;
		height: 280rpx;
		// margin-top: 15rpx;
		margin-left:auto;
		margin-right: auto;
			.vip-area {
				top: 0rpx;
				width: 692rpx;
				height: 280rpx;
				position: absolute;
				.vip-area-container{
					width: 692rpx;
					height: 280rpx;
					position: absolute;
					.vip-bg{
						top: 24rpx;
						width: 692rpx;
						height: 256rpx;
						position: absolute;
						left:50%;
						transform: translateX(-50%);
					}
					.vip-icon {
						width: 254rpx;
						height: 268rpx;
						position: absolute;
						right: 20rpx;
					}

					.current-tag {
						top: 30rpx;
						left: 0rpx;
						width: 121rpx;
						height: 40rpx;
						position: absolute;
					}

					

					.current-xingyaodengji-tips{
						position: absolute;
						top:209rpx;
						left: 40rpx;
						font-size: 18rpx;
					}

					

					.phone-button{
						width: 692rpx;
						height:256rpx;
						top: 0rpx;
						opacity: 0;
						background: #6f6d67;
					}

				}

				.saoma-tips{
						position: absolute;
						top:209rpx;
						left: 40rpx;
						font-size: 18rpx;
						display: flex;
						flex-direction: column;

						.saoma-tips-text{
							font-size: 18rpx;
							.saoma-tips-text-lv{
								font-size: 18rpx;
							}
						}

						.saoma-tips-text-tips{
							font-size: 18rpx;
							.saoma-tips-text-tips-num{
								font-size: 18rpx;
							}
							.saoma-tips-text-tips-maxnum{
								font-size: 18rpx;
							}
						}

					}
				// 积分进度条样式
				.jifen-progressbar {
						position: absolute;
						top: 207rpx;
						width: 320rpx;
						left: 40rpx;
						
						.jifen-header {
							display: flex;
							align-items: center;
							
							.jifen-label {
								font-size: 21rpx;
								color: #1d1e25;
								font-weight: 500;
								margin-right: 10rpx;
							}
							
							.jifen-value {
								font-size: 21rpx;
								font-weight: 500;
								display: flex;
								align-items: center;
								
								.current-points {
									color: #1d1e25;
								}
								
								.separator {
									color: #b27c1e;
									margin: 0 5rpx;
								}
								
								.total-points {
									color: #b27c1e;
									opacity: 0.7;
								}
							}
						}
						
						.progress-bar-container {
							position: relative;
							width: 100%;
							height: 8rpx;
							overflow: hidden;
							margin-top: 10rpx;
							
							.progress-bar-bg {
								position: absolute;
								top: 0;
								left: 0;
								width: 315rpx;
								height: 8rpx;
								z-index: 1;
							}
							
							.progress-bar-mask {
								position: absolute;
								top: 0;
								left: 0;
								width: 315rpx;
								height: 8rpx;
								overflow: hidden;
								border-radius: 4rpx;
								z-index: 2;
							}
							
							.progress-bar-fill {
								position: absolute;
								top: 0;
								left: 0;
								width: 315rpx;
								height: 8rpx;
								// transition: transform 0.3s ease;
							}
						}
					}

				.chakanshengjigonglueTxt {
					font-size: 24rpx;
					position: absolute;
					left: 40rpx;
					top: 161rpx;
				}

				
			}
	}

	.vipCardArrowRight{
		width: 15rpx;
		height: 18rpx;
		position: absolute;
		margin-top: 310rpx;
		right: 12rpx;
	}

	.vipCardArrowLeft{
		width: 15rpx;
		height: 18rpx;
		position: absolute;
		margin-top: 310rpx;
		left: 13rpx;
	}
	.integral-detail {
		height: 144rpx;
		width: 100%;
		display: flex;
		align-items: center;
		// padding: 0 32rpx;
		margin-top: 15rpx;
		
		.excharge-btn {
			width: 178rpx;
			height: 144rpx;
			margin-left: 32rpx;
		}
		
		.inte-bar-area {
			position: relative;
			// flex: 1;
			height: 144rpx;
			width: 492rpx;
			// background: url('@{baseUrl}integral/1008/inteBarAreaBg.png') no-repeat center/cover;
			margin-left: 16rpx;
			// padding: 16rpx 24rpx;
			.integralClick {
				height: 100%;
				width: 100%;
			
			.header-row {
				position: relative;
				display: flex;
				justify-content: space-between;
				
					.integral-value{
						// background-color: #6f6d67;
						margin-left: 26rpx;
						margin-top: 23rpx;
				.integral-text {
					font-size: 28rpx;
					color: #1d1e25;
							margin-right: 13rpx;
						}
						.integral-total{
							// position: absolute;
							font-size: 24rpx;
							color:#1d1e25
						}
						.next-icon{
							top: -25rpx;
							margin-left: -28rpx;
							width: 66rpx;
							height: 27rpx;
							position: relative;
						}
					}
					
			}

			.progress-bar1 {
				position: relative;
				width: 444rpx;  // 根据图片宽度设置
				height: 14rpx;  // 根据图片高度设置
				// margin: 14rpx auto 16rpx auto;

				.upLvTxt1{
					font-size: 20rpx;
					color: #1d1e25;
					position: absolute;
					margin-left: 26rpx;
					margin-top: 5rpx;

					.upLvTxt2{
						color: #b27c1e;
						font-size: 20rpx;
					}
				}
				
			}
			
				
			}
			.info-row-container {
				position: relative;
				bottom: 45rpx;
			.info-row {
				display: flex;
				flex-direction: row;
				position: relative;
				height: 26rpx;
					// margin-top: -5rpx;
				margin-left: 26rpx;
				.count-text {
						font-size: 26rpx;
					color: #b27c1e;
				}
				
				.expire-text {
						margin-top: 2rpx;
					margin-left: 15rpx;
					font-size: 22rpx;
					color: #6f6d67;
				}

					.integral-detail-arrow{
						position: absolute;
						right: 20rpx;
						top: 8rpx;
						width: 11rpx;
						height: 19rpx;
					}
				}
				
			}

			.strategy-icon {
						position: absolute;
						right: 0rpx;
						top: 0rpx;
						width: 96rpx;
						height: 49rpx;
					}



			
		}
	}

	.privilege-container {
		// padding: 48rpx 0rpx;
		width: 686rpx;
		margin-bottom: 20rpx;
		
		.privilege-header {
			display: flex;
			// justify-content: space-between;
			align-items: left;
			flex-direction: column;
			// margin-bottom: 40rpx;
			padding: 30rpx 16rpx;

			.quanyi-title{
				font-size: 32rpx;
				font-weight: bold;
			}
			
			.title-text {
				font-size: 24rpx;
				
				.highlight {
					font-weight: bold;
				}
			}
			
		}
		
		.privilege-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 36rpx;
			padding-left: 16rpx;
			.privilege-item {
				position: relative;
				width: 102rpx;
				height: 140rpx;
				.itemBg{
					position: absolute;
					top: 0rpx;
					left: 0rpx;
				}
				
				.privilege-icon {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
				}

				.quanyi-text{
					position: absolute;
					font-size: 24rpx;
					width: 125rpx;
					text-align: center;
					left: 50%;
					transform: translateX(-50%);
					top: 107rpx;
				}

				.quanyi-text-img{
					position: absolute;
					width: 35rpx;
					height: 35rpx;
					bottom: 43rpx;
					right: 7rpx;
				}


				.phone-button-qyIcon{
					top:0rpx;
					position: absolute;
					opacity: 0;
					background: #6f6d67;
				}
			}
		}
	}
	.quanyi-detail-area{
		margin-top: 40rpx;
		width: 686rpx;
	}
	.zhankai-quanyi{
		width: 686rpx;
		height: 60rpx;
		margin-top: 20rpx;
		// background-color: #6f6d67;

		.shouqi-quanyi-img{
			position: absolute;
			width: 173rpx;
			height: 23rpx;
			margin-top: 20rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		.zhankai-quanyi-img{
			position: absolute;
			margin-top: 20rpx;
			width: 172rpx;
			height: 23rpx;
			left: 50%;
			transform: translateX(-50%);
		}

	}

	// 7天连续签到奖励容器样式
	.signin_reward_container {
		width: 686rpx;
		height: 418rpx;
		background: rgba(255, 255, 255, 0.3); 
		border-radius: 30rpx;
		margin-top: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); // 更柔和的阴影

		// 标题区域
		.signin_title_area {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			// margin-bottom: 40rpx;
			flex-wrap: wrap;

			.signin_main_title {
				font-size: 32rpx;
				font-weight: bold;
				color: #383838; // 主标题字体颜色
				margin-left: 30rpx; // 左边距30rpx
				margin-right: 10rpx;
			}

			.help_icon {
				width: 24rpx;
				height: 24rpx;
				border: 2rpx solid #9EA1A5; // 空心圆圈边框
				border-radius: 50%;
				display: flex;
				align-items: center;
				// justify-content: center;
				margin-right: 10rpx;

				.help_text {
					font-size: 16rpx;
					color: #9EA1A5; // 深灰色问号
					font-weight: bold;
					width: 22rpx;
					// line-height: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.signin_sub_title {
				font-size: 24rpx;
				color: #909090; // 副标题字体颜色
				line-height: 1.4;
			}
		}

		// 奖励展示区域
		.reward_display_area {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			flex-wrap: wrap;
			width: 626rpx;
			margin-left: 30rpx;

			.daily_reward_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				width: 80rpx;

				// 奖励内容容器
				.reward_content_container {
					width: 76rpx;
					height: 112rpx;
					background: #ffffff; // 默认白色背景
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					margin-bottom: 10rpx;

					&.signed {
						background: #D3A458; // 已签到状态的金色背景
					}

					// 奖励标签样式
					.bonus_tag {
						position: absolute;
						top: -15rpx;
						right: -30rpx;
						background: #e74c3c; // 红色标签，更接近截图中的红色
						border-radius: 16rpx 16rpx 16rpx 4rpx;
						// padding: 4rpx 8rpx;
						width: 54rpx;
						height: 30rpx;
						z-index: 2;

						.bonus_text {
							position: absolute;
							// left: 50%;
							// transform: translateX(-50%);
							width: 100%;
							height: 100%;
							text-align: center;
							line-height: 28rpx;
							font-size: 20rpx;
							color: #ffffff;
							font-weight: bold;
						}
					}

					.reward_points {
						font-size: 24rpx;
						font-weight: bold;
						color: #000000; // 默认黑色（未签到状态）
						margin-bottom: 8rpx;
					}

					&.signed .reward_points {
						color: #ffffff; // 已签到状态为白色
					}

					.reward_coin {
						width: 50rpx;
						height: 50rpx;
					}

					// 已签到状态样式
					.reward_status {
						&.signed {
							.check_circle {
								width: 40rpx;
								height: 40rpx;
								background: #ffffff;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

								.check_mark {
									font-size: 24rpx;
									color: #000000;
									font-weight: bold;
								}
							}
						}
					}
				}

				.day_label {
					font-size: 20rpx;
					color: #666666; // 深灰色天数标签
				}
			}
		}

		// 签到按钮
		.signin_button {
			width: 384rpx;
			height: 86rpx;
			// background: linear-gradient(135deg, #d4a468 0%, #b27c1e 50%, #9d7a3a 100%); // 更丰富的金色渐变
			background: #D3A458;
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			margin-left: 151rpx;
			justify-content: center;
			box-shadow: 0 4rpx 15rpx rgba(178, 124, 30, 0.4); // 更明显的金色阴影
			margin-top: 46rpx;
			transition: transform 0.2s ease;

			.signin_button_text {
				font-size: 32rpx;
				color: #ffffff;
				font-weight: bold;
			}

			&:active {
				transform: scale(0.95);
			}
		}

		// 已签到任务按钮
		.task_button {
			width: 384rpx;
			height: 86rpx;
			background: rgba(255, 255, 255, 0);
			border: 1px solid #e6a23c;
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			margin-left: 151rpx;
			justify-content: center;
			margin-top: 46rpx;
			transition: transform 0.2s ease;

			.task_button_text {
				font-size: 32rpx;
				color: #e6a23c;
				font-weight: bold;
			}

			&:active {
				transform: scale(0.95);
			}
		}
	}

	.invite_container {
		height: 332rpx;
		margin: 60rpx 32rpx 0 32rpx;
	}
	
	.vip-active-area {
		width: 686rpx;
		height: auto;
		margin-top: 62rpx;

		.vip-title{
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 16rpx;
		}

		.vip-active-swiper {
			width: 100%;
			height: 200rpx;
			flex-shrink: 0;
			margin-top: 30rpx;
			
			.vip-active-img {
				width: 100%;
				height: 100%;
				border-radius: 32rpx;
			}
			
		}
		
	}

	

	.goods-container {
		width: 686rpx;
		height: auto;
		margin-top: 22rpx;
		
		
		.custom-tabs {
			display: flex;
			justify-content: space-between;
			
			.tab-item {
				width: 245rpx;
				height: 112rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				&.active {
					.tab-line1 { color: #1d1e25; }
					.select-line{
						width: 32rpx;
						height: 8rpx;
						background-color: #1d1e25;
						border-radius: 4rpx;
						margin-top: 10rpx;
					}
				}

				&.active1 {
					.tab-line1 { color: #fff0df; }
					.select-line{
						width: 32rpx;
						height: 8rpx;
						background-color: #fff0df;
						border-radius: 4rpx;
						margin-top: 10rpx;
					}
				}
				.tab-line1 {
					font-size: 28rpx;
					font-weight: bold;
					color: #6f6d67;
					line-height: 40rpx;
					margin-top: 35rpx;
				}
			}
		}
		
		.goods-content {
			position: relative;
			margin-top: 30rpx;
			// margin-bottom: 50rpx;
			height: auto;
			
			.goods-list {
				gap: 20rpx;

				display: flex;
				flex-wrap: wrap;
				
				.goods-item {
					background-color: #6f6d67;
					position: relative;
					width: 333rpx;
					height: 459rpx;
					.goods-item-container{
						width: 100%;
						height: 100%;
						position: relative;
						.goods-img {
							width: 100%;
							height: 365rpx;
							margin-bottom: 20rpx;
						}

						.title-container1{
							width: 100%;
							// height: auto;
							margin-left: 20rpx;
							// margin-bottom: 10rpx;
							margin-top: -48rpx;
							.title-text1 {
								position: relative;
								width: 294rpx;
								font-size: 28rpx;
								color: #1d1e25;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								display: block;
							}
						}

						
						.price-text {
							// height: auto;
							position: relative;
							font-size: 28rpx;
							color: #b27c1e;
							margin-top: 10rpx;
							margin-left: 20rpx;
							
							.num {
								font-size: 32rpx;
								margin-right: 5rpx;
							}
						}

						.num0 {
							position: relative;
							font-size: 28rpx;
							margin-left: 20rpx;
							color: #b27c1e;
							.price-text0{
								font-size: 20rpx;
							}
							.price-text1{
								font-size: 36rpx;
							}
						}
					}
					
				}
			}
		}
	}

	.more-container {
		// width: 686rpx;
		height: auto;
		margin-top:28rpx;
		margin-bottom: 28rpx;
		
		.more-text {
			font-size: 24rpx;
			color: #1d1e25;
			margin-right: 10rpx;
		}
		
		.more-arrow {
			width: 11rpx;
			height: 19rpx;
		}
	}

	.content{
		width: 100%;
		height: 180rpx;
	}

	// 异业券权益区域样式
	.yiyequan_area {
		width: 100%;
		margin-top: 58rpx;

		.yiyequan_title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			text-align: left;
			margin-bottom: 30rpx;
			padding: 0 30rpx 0 30rpx;
			display: block;
		}

		.yiyequan_card {
			background: rgba(255, 255, 255, 0.3);
			height: 472rpx;
			border-radius: 30rpx;
			padding-left: 24rpx;
			padding-right: 24rpx;
			margin-top: 36rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

			.yiyequan_card_header {
				padding-top: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.card_title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				.card_count {
					font-size: 24rpx;
					color: #666666;
				}
			}

			.benefits_list {
				width: 100%;
				white-space: nowrap;
				height: 360rpx;

				.benefits_container {
					display: flex;
					gap: 12rpx;
					margin-top: 0;
					
					// 当商品数量小于等于2时，调整gap并居中
					&.few-items {
						gap: 66rpx;
						justify-content: center;
						margin-top: 0;
					}
					
					// 单个商品时的横向布局
					&.single-item {
						margin-top: 40rpx;
						.benefit_item {
							width: 610rpx;
							height: 260rpx;
							flex-direction: row;
							align-items: center;
							// background: #FFFFFF;
							border-radius: 20rpx;
							// box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
							padding: 20rpx 0rpx 20rpx 0;
							box-sizing: border-box;

							.benefit_image {
								width: 260rpx;
								height: 260rpx;
								background: #F5F5F5;
								border-radius: 12rpx;
								margin-bottom: 0;
								margin-right: 40rpx;
								flex-shrink: 0;
								overflow: hidden;

								.benefit_img {
									width: 100%;
									height: 100%;
								}
							}

							.benefit_content {
								position: relative;
								width: 100%;
								height: 100%;
								padding: 20rpx 0;

								.benefit_name {
									position: absolute;
									top: 20rpx;
									left: 0;
									right: 0;
									text-align: left;
									font-size: 28rpx;
									// line-height: 1.4;
									white-space: normal;
									overflow: hidden;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									line-clamp: 2;
									-webkit-box-orient: vertical;
									color: #333333;
									font-weight: normal;
									height: 80rpx;
								}

								.benefit_points_container {
									position: absolute;
									top: 100rpx;
									left: 0;
									right: 0;
									height: 40rpx;
									line-height: 40rpx;

									.benefit_points {
										display: inline-block;
										margin-top: 17rpx;
										font-size: 32rpx;
										color: #D3A458;
									}
								}

								.exchange_button {
									position: absolute;
									bottom: 20rpx;
									width: 250rpx;
									height: 62rpx;
									background: linear-gradient(90deg, #D3A458 0%, #B8941F 100%);
									border-radius: 30rpx;
									text-align: center;
									line-height: 62rpx;
									transition: transform 0.2s ease;

									.exchange_text {
										font-size: 24rpx;
										color: #FFFFFF;
										font-weight: 500;
									}

									&:active {
										transform: scale(0.95);
									}
								}
							}
						}
					}
				}

				.benefit_item {
					flex-shrink: 0;
					width: 200rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 16rpx;
					// padding: 20rpx;
					// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

					.benefit_image {
						width: 192rpx;
						height: 192rpx;
						background: #F5F5F5;
						border-radius: 12rpx;
						margin-bottom: 16rpx;
						overflow: hidden;

						.benefit_img {
							width: 100%;
							height: 100%;
						}
					}

					.benefit_name {
						font-size: 24rpx;
						color: #333333;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
					}

					.benefit_points {
						text-align: left;
						font-size: 22rpx;
						color: #333333;
						width: 100%;
						margin-bottom: 16rpx;
					}

					.exchange_button {
						width: 100%;
						height: 60rpx;
						background: #D3A458;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: transform 0.2s ease;

						.exchange_text {
							font-size: 24rpx;
							color: #FFFFFF;
							font-weight: 500;
						}

						&:active {
							transform: scale(0.95);
						}
					}
				}
			}
		}
	}

}

// 邀请得好礼组件容器样式
.invite_container {
	width: 100%;
	padding: 0 32rpx;
	box-sizing: border-box;
}
