<template>
	<view class="indexPage">
		<image class="indexBG" src="/static/index/indexBG.png" mode="widthFix"></image>
		
		<view class="body">
			<view class="userBox">
				<view class="userItem">
					<view class="userInfo">
						<image class="avatar" src="/static/my/avatar.png" mode="aspectFill"></image>
						<view class="">
							<view class="name">
								<text>力仁数科</text>
								<uni-tag text="会员LV.1" size="mini" custom-style="background: linear-gradient( 321deg, #4E5379 0%, #30344E 100%); color: #FEC741;border-radius: 10rpx;"></uni-tag>
							</view>
							<text class="mobile">135****5555</text>
						</view>
					</view>
					<view class="iconBox">
						<image src="/static/index/codeIcon.png" mode="aspectFill"></image>
						<image src="/static/index/userIcon.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="userItem">
					<view class="integral">
						<text class="subTitle">我的积分</text>
						<text class="title">积分余额</text>
						<text class="number">23900 <text class="jifen">积分</text> </text>
						<button class="useBtn">立即使用</button>
					</view>
					<view class="btnGroup">
						<view class="btnItem">
							<image class="btnIcon" src="/static/index/goSign.png" mode="aspectFill"></image>
							<view class="textBox">
								<text class="title">每日签到</text>
								<text>每日签到即可获得积分</text>
							</view>
						</view>
						<view class="btnItem bg-w">
							<image class="btnIcon" src="/static/index/goShop.png" mode="aspectFill"></image>
							<view class="textBox">
								<text class="title">积分商城</text>
								<text>为您提供各种热门积分好礼</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content content1">
				<view class="barBox">
					<view class="titleBox">
						<text>购物商城</text>
						<view class="purpleBox"></view>
					</view>
					<text class="seeMore">查看更多></text>
				</view>
				<view class="card">
					<view class="cardHead">
						<text class="hotSale">热销榜单</text>
						<text>臻选品质好物</text>
					</view>
					<view class="cardBody">
						<scroll-view scroll-x="true" >
							<view class="list">
								<view class="listItem" v-for="item in 6">
									<view class="tag">
										<text>销量榜</text>
									</view>
									<text class="title">破解传统赋码困境</text>
									<text class="title">赋能企业智能升级</text>
									<text class="saleText">2400人购买</text>
									<image src="/static/myBG.png" mode="aspectFill"></image>
								</view>
							</view>
						</scroll-view>
						
					</view>
				</view>
			</view>
			<view class="content content2">
				<swiper style="height: 480rpx;" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="item in 5">
						<view class="swiper-item">
							<image class="swiper-img" src="/static/test/test1.png" mode="aspectFill"></image>
							<button class="gobtn">
								立即定制
								<image class="rightCircle" src="/static/rightCircle.png" mode="aspectFill"></image>
							</button>
						</view>
					</swiper-item>
				</swiper>
				<view class="proList">
					<view class="card" v-for="(item,index) in 4">
						<view class="cardHead">
							<image src="/static/test/test.png" mode="aspectFill"></image>
						</view>
						<view class="cardBody">
							<text class="title">智能产线升级改造配套方案定制</text>
							<view class="">
								<text class="yuan"><text class="yuanText">￥</text>12333</text>
								<text class="yuan1"><text class="yuanText1">￥</text>12333</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<diamondLine></diamondLine>
			
			<view class="content content3">
				<view class="barBox">
					<view class="titleBox">
						<text>积分商城</text>
						<view class="purpleBox"></view>
					</view>
					<text class="seeMore">查看更多></text>
				</view>
				<view class="card">
					<view class="cardLeft">
						<text class="title">兑换最多</text>
						<text>限量供应  先到先得</text>
						<image class="proImg" src="/static/test/test1.png" mode="aspectFill"></image>
						<text class="proName">新秀丽大容量拉杆箱</text>
						<view class="price">
							<text style="padding-right: 16rpx;">抢购价</text>
							
							<view class="">
								<image class="flightening" src="/static/flightening.png" mode="aspectFill"></image>
								<text class="number">20000000积分</text>
							</view>
						</view>
					</view>
					<view class="cardRight">
						<text class="title">推荐兑换</text>
						<view class="proList">
							<view class="proItem" v-for="item in 6">
								<image class="proImg" src="/static/test/test1.png" mode="aspectFill"></image>
								<view class="proRight">
									<text class="proName">东方红时间跨度混分巨兽黄大发圣诞节回复会计师</text>
									<text class="number">20000 <text class="jifen">积分</text> </text>
									<!-- <triangleTag text="超值兑换"></triangleTag> -->
									<image class="tag" src="/static/tag.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="listItem" v-for="item in 5">
						<view class="card1">
							<view class="itemHead">
								<image src="/static/test/test.png" mode="aspectFill"></image>
							</view>
							<view class="itemBody">
								<text class="title">智能产线升级改造配套方案定制</text>
								<text class="subTitle">仅可兑换一次</text>
								<view class="">
									<text class="yuan">1222<text class="yuanText">积分</text></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="content content4">
				<view class="card">
					<view class="cardHead">
						<text class="hotSale">热门兑换</text>
						<text>限量供应  先到先得</text>
					</view>
					<view class="cardBody">
						<view class="list">
							<view class="listItem" v-for="item in 6">
								<image class="proImg" src="/static/test/test1.png" mode="aspectFill"></image>
								<text class="title">sjshdsfs,m</text>
								<text class="subTitle">剩余123份可兑换</text>
								<progress :percent="20" active-color="#3A71FF" backgroundColor="#E9E9E9" 
									:show-info="false" class="progress" border-radius="10"	/>
								<view class="listBottom">
									<view class="">
										<image class="starIcon" src="/static/starIcon.png" mode="aspectFill"></image>
										<text class="num">3000</text>
									</view>
									<button class="payBtn">
										<image class="giftIcon" src="/static/giftIcon.png" mode="aspectFill"></image>
										兑换
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<diamondLine></diamondLine>
			
			<view class="content content5">
				<view class="barBox">
					<view class="titleBox">
						<text>企业资讯</text>
						<view class="purpleBox"></view>
					</view>
					<text class="seeMore">查看更多></text>
				</view>
				
			</view>
		</view>
		
		<tabbar :tabIndex="0"></tabbar>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import diamondLine from '../../components/diamondLine/diamondLine.vue';

</script>

<style lang="scss" scoped>
.indexPage{
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	position: relative;
}	
.indexBG{
	width: 100%;
	height: auto;
}
.body{
	position: relative;
	z-index: 10;
	margin-top: -100rpx;
	background: linear-gradient( 180deg, #EFF6FF 0%, #FAFBFF 100%);
	box-shadow: 0rpx -18rpx 22rpx 0rpx rgba(0,0,0,0.05);
	border-radius: 54rpx 54rpx 0rpx 0rpx;
	.userBox{
		padding: 26rpx;
		.userItem{
			@include flexBox(between,stretch);
			.userInfo{
				@include flexBox(start,center);
				@include fontStyle(24rpx,#333333,left,400,48rpx);
				.avatar{
					width: 118rpx;
					height: 118rpx;
					margin-right: 10rpx;
					border-radius: 18rpx;
				}
				.name{
					@include fontStyle(32rpx,#333333,left,bold,48rpx);
					text{
						padding-right: 10rpx;
					}
				}
			}
			.iconBox{
				@include flexBox(start,center);
				image{
					width: 56rpx;
					height: 56rpx;
					margin-left: 26rpx;
				}
			}
		
			.integral{
				margin: 26rpx 0;
				width: 330rpx;
				background: #3A71FF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				box-sizing: border-box;
				padding: 26rpx;
				@include fontStyle(28rpx,#FFFFFF,left,500,48rpx);
				@include flexBox(start,start,column);
				.subTitle{
					@include fontStyle(24rpx,#FFFFFF,left,400,48rpx);
					padding-bottom: 26rpx;
				}
				.number{					
					@include fontStyle(58rpx,#FFFFFF,left,400,68rpx);
					padding-top: 16rpx;
					.jifen{
						@include fontStyle(24rpx,#FFFFFF,left,400,48rpx);
					}
				}
				.useBtn{
					min-width: 150rpx;
					height: 46rpx;
					background: #3A71FF;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 2rpx solid #FFFFFF;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					@include flexBox();
					margin: 46rpx 0 0;
				}
			}
			
			.btnGroup{
				margin: 26rpx 0;
				@include flexBox(between,center,column);
				.bg-w{
					background: #FFFFFF !important;
					box-shadow: 0rpx 4rpx 11rpx 0rpx rgba(0,0,0,0.08);
				}
				.btnItem{
					width: 330rpx;
					background: #E6EDFF;
					border-radius: 18rpx 18rpx 18rpx 18rpx;
					box-sizing: border-box;
					padding: 26rpx; 
					@include flexBox(start,center);
					.btnIcon{
						width: 72rpx;
						height: 72rpx;
						margin-right: 16rpx;
					}
					.textBox{
						flex: 1;
						@include fontStyle(24rpx,#666666,left,400,32rpx);
						.title{
							display: block;
							@include fontStyle(32rpx,#333333,left,bold,42rpx);
						}
					}
				}
			}
			
		}
		
		
	}
}
.barBox {
	margin: 0rpx 0 26rpx;
	@include flexBox(between, center);
	@include fontStyle(34rpx, #000000, left, bold, 44rpx);

	.seeMore {
		@include fontStyle(26rpx, #666666, right, 400, 44rpx);
	}

	.titleBox {
		position: relative;
		text {
			position: relative;
			z-index: 2;
		}
		.purpleBox {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, 0%);
			width: 92rpx;
			height: 28rpx;
			background: linear-gradient(180deg, #86AAFA 0%, #C9D6FF 100%);
			opacity: 0.9;
			z-index: 1;
		}
	}
}
.content{
	margin: 0 26rpx;
}
.content1{
	.card{
		width: 100%;
		background: #E6EDFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
		padding: 26rpx;
		.cardHead{
			@include fontStyle(24rpx,#000000,left,400,48rpx);
			.hotSale{
				@include fontStyle(34rpx,#000000,left,bold,48rpx);
				padding-right: 20rpx;
			}
		}
		.cardBody{
			margin-top: 26rpx;
			.list{
				width: 100%;
				overflow-x: auto;
				@include flexBox(start,start);
				flex-wrap: nowrap;
				.listItem{
					width: 300rpx;
					min-width: 300rpx;
					height: 416rpx;
					background: #FFFFFF;
					border-radius: 18rpx 18rpx 18rpx 18rpx;
					position: relative;
					@include flexBox(start,start,column);
					box-sizing: border-box;
					padding: 60rpx 26rpx 0;
					margin-right: 20rpx;
					.tag{
						position: absolute;
						top: 0;
						left: 0;
						width: 112rpx;
						height: 48rpx;
						background: linear-gradient( 180deg, #4E86FF 0%, #9EB6FF 100%);
						border-radius: 18rpx 0 18rpx 0;
						font-weight: 500;
						font-size: 22rpx;
						color: #FFFFFF;
						@include flexBox();
					}
					.saleText{
						@include fontStyle(24rpx,#3A71FF,left,400,48rpx);
					}
					image{
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 220rpx;
						border-radius: 0 0 18rpx 18rpx;	
					}
				}
			}
		}
	}
	
}
.content2{
	margin: 26rpx;
	background: #E6EDFF;
	border-radius: 18rpx 18rpx 18rpx 18rpx;
	box-sizing: border-box;
	padding: 26rpx;
	.swiper-item{
		position: relative;
		height: 100%;
		.swiper-img{
			width: 100%;
			height: 480rpx;
		}
		.gobtn{
			position: absolute;
			top: 76%;
			left: 20rpx;
			min-width: 200rpx;
			height: 62rpx;
			background: #FFFFFF;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			@include flexBox();
			font-weight: 500;
			font-size: 28rpx;
			color: #3A71FF;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-left: 16rpx;
			}
		}
	}

	.proList {
		@include flexBox(between, center);
		flex-wrap: wrap;
		.card {
			width: 310rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 26rpx;

			.cardHead {
				image {
					width: 100%;
					height: 334rpx;
					display: block;
					margin: 0;
					border-radius: 24rpx 24rpx 0rpx 0rpx;
				}
			}

			.cardBody {
				box-sizing: border-box;
				padding: 16rpx 26rpx;

				.title {
					@include fontStyle(28rpx, #000000, left, 500, 48rpx);
					@include truncateText(1);
				}

				.subTitle {
					@include fontStyle(26rpx, #666666, left, 500, 38rpx);
					@include truncateText();
				}

				.yuan {
					@include fontStyle(36rpx, #3A71FF, left, bold, 48rpx);
					padding-right: 20rpx;

					.yuanText {
						@include fontStyle(26rpx, #3A71FF, left, bold, 48rpx);
					}
				}

				.yuan1 {
					@include fontStyle(26rpx, #666666, left, 400, 48rpx);
					text-decoration: line-through;

					.yuanText1 {
						@include fontStyle(24rpx, #666666, left, 400, 48rpx);
					}
				}
			}
		}
	}
	
	
}
.content3{
	.card{
		@include flexBox(between,start);
		.title{
			@include fontStyle(34rpx,#000000,left,bold,44rpx);				
		}
		.cardLeft{
			width: 330rpx;
			height: 540rpx;
			background: #E6EDFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			box-sizing: border-box;
			padding: 26rpx;
			@include flexBox(start,start,column);
			@include fontStyle(24rpx,#333333,left,400,44rpx);
			.proName{
				@include fontStyle(24rpx,#000000,center,500,44rpx);
				@include truncateText();
			}
			.proImg{
				width: 280rpx;
				height: 280rpx;
				margin: 16rpx 0;
				border-radius: 18rpx;
			}
			.price{
				margin: 16rpx 0;
				min-height: 50rpx;
				padding-left: 16rpx;
				border: 2rpx solid #3A71FF;
				border-radius: 46rpx 46rpx;
				@include flexBox();
				@include fontStyle(24rpx,#3A71FF,left,500,32rpx);
				&>view{
					flex: 1;
					position: relative;
					box-sizing: border-box;
					padding: 14rpx 14rpx 14rpx 26rpx;
					border-radius: 46rpx 46rpx;
					height: 100%;
					background: #3A71FF;
					@include flexBox(start,center);
					.number{
						@include fontStyle(24rpx,#FFFFFF,left,500,32rpx);
						@include truncateText(1);
					}
				}
				.flightening{
					position: absolute;
					top: 0;
					left: -10rpx;
					z-index: 10;
					width: 26rpx;
					height: 52rpx;
				}
			}
		}
		.cardRight{
			width: 330rpx;
			height: 540rpx;
			background: #E6EDFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			box-sizing: border-box;
			padding: 26rpx 10rpx 0;
			
			.proList{
				// margin-top: 20rpx;
				height: 460rpx;
				flex: 1;
				overflow-y: auto;
				scrollbar-width: none;
				
				/* 隐藏 WebKit 内核浏览器（Chrome、Safari、小程序等）的滚动条 */
				&::-webkit-scrollbar {
					display: none;
				}
				.proItem{
					margin: 10rpx 0;
					@include flexBox(start,start);
					.proImg{
						width: 144rpx;
						height: 144rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}
					.proRight{
						flex: 1;
						.proName{
							@include fontStyle(24rpx,#000000,left,500,34rpx);
							@include truncateText(1);
						}
						.number{
							padding-top: 10rpx;
							@include fontStyle(32rpx,#3A71FF,left,bold,40rpx);
							.jifen{
								@include fontStyle(24rpx,#000000,left,400,34rpx);
							}
						}
						.tag{
							width: 126rpx;
							height: auto;
							margin-top: 16rpx;
						}
					}
				}
			}
		}
	}
}
.list{
	@include flexBox(start, stretch);
	overflow-x: auto;
	scrollbar-width: none;
	
	/* 隐藏 WebKit 内核浏览器（Chrome、Safari、小程序等）的滚动条 */
	&::-webkit-scrollbar {
		display: none;
	}
	.listItem{
		.card1 {
			width: 216rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 26rpx;
			margin-right: 26rpx;
			.itemHead {
				image {
					width: 216rpx;
					height: 164rpx;
					// display: block;
					margin: 0;
					border-radius: 24rpx 24rpx 0rpx 0rpx;
				}
			}
		
			.itemBody {
				box-sizing: border-box;
				padding: 16rpx 26rpx;
		
				.title {
					@include fontStyle(26rpx, #000000, left, 500, 32rpx);
					@include truncateText(2);
				}
		
				.subTitle {
					@include fontStyle(24rpx, #666666, left, 500, 32rpx);
					@include truncateText(1);
					padding: 10rpx 0;
				}
		
				.yuan {
					@include fontStyle(36rpx, #3A71FF, left, bold, 48rpx);
					padding-right: 20rpx;
		
					.yuanText {
						@include fontStyle(26rpx, #3A71FF, left, bold, 48rpx);
						padding-left: 6rpx;
					}
				}
		
				
			}
		}
	}
}

.content4{
	.card{
		width: 100%;
		background: #E6EDFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
		padding: 26rpx;
		.cardHead{
			@include fontStyle(24rpx,#000000,left,400,48rpx);
			.hotSale{
				@include fontStyle(34rpx,#000000,left,bold,48rpx);
				padding-right: 20rpx;
			}
		}
		.cardBody{
			margin-top: 26rpx;
			.list{
				width: 100%;
				@include flexBox(between,start);
				flex-wrap: wrap;
				.listItem{
					width: 310rpx;
					background: #FFFFFF;
					border-radius: 18rpx 18rpx 18rpx 18rpx;
					position: relative;
					@include flexBox(start,start,column);
					box-sizing: border-box;
					padding: 10rpx;
					.proImg{
						width: 100%;
						height: 182rpx;
						margin-bottom: 10rpx;
						border-radius: 18rpx;
					}
					.title{
						@include fontStyle(28rpx,#333333,left,bold,38rpx);
					}
					.subTitle{
						@include fontStyle(20rpx,#999999,left,400,48rpx);
					}
					.progress{
						width: 100%;
						margin: 10rpx 0 26rpx;
					}
					.listBottom{
						width: 100%;
						@include flexBox(between,center);
						.starIcon{
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
						.num{
							@include fontStyle(28rpx,#3A71FF,left,500,38rpx);
						}
						.payBtn{
							min-width: 92rpx;
							height: 42rpx;
							background: #3A71FF;
							border-radius: 6rpx;
							@include flexBox();
							margin: 0;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
							.giftIcon{
								width: 24rpx;
								height: 24rpx;
								margin-right: 10rpx;
							}
						}
					}
					
					
				}
			}
		}
	}
}		
</style>
