<template>
	<view>
		<view style="width:100%;position: fixed;top:0;z-index:99">
			 <view class="navBarContent">
					<u-icon name="arrow-left" style="position: absolute;top:50%;left:40upx;transform: translateY(-50%);" color="#000" size="24"></u-icon>
					<text>加入分销</text>
			 </view>
			
		</view>
		<image :src="$picUrl+'/static/news3/walletBg.png'" mode="widthFix" class="bgImg"></image>
		<view class="userInfo">
			<image :src="$picUrl+'/static/news3/join.png'" mode="widthFix"></image>
			<view class="userContent">
				<image src="/static/news/avater.png" mode="aspectFill" class="avatar"></image>
				<view class="user">
					<view class="userTop">
						<text class="name">Deioio</text>
						<view class="flag">
							分销商
						</view>
					</view>
					<view class="userBottom">
						<text>加入时间2024.01.21</text>
						<view class="tixian">
							提现
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="yongjinContent">
			<view class="item">
				<text class="num">
					0.00
				</text>
				<text class="text">已提现佣金</text>
			</view>
			<view class="item">
				<text class="num">
					0
				</text>
				<text class="text">未结算佣金</text>
			</view>
		</view>
		<view class="gridContent">
			<view class="gridItem">
				<image :src="$picUrl+'/static/news3/fx1.png'" mode="widthFix"></image>
				<text>分销佣金</text>
			</view>
			<view class="gridItem">
				<image :src="$picUrl+'/static/news3/fx2.png'" mode="widthFix"></image>
				<text>分销订单</text>
			</view>
			<view class="gridItem">
				<image :src="$picUrl+'/static/news3/fx3.png'" mode="widthFix"></image>
				<text>提现明细</text>
			</view>
			<view class="gridItem">
				<image :src="$picUrl+'/static/news3/fx4.png'" mode="widthFix"></image>
				<text>我的团队</text>
			</view>
			<view class="gridItem">
				<image :src="$picUrl+'/static/news3/fx5.png'" mode="widthFix"></image>
				<text>推广二维码</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			/**
			 * 售后点击
			 */
			onApplyAftersales(){
				uni.navigateTo({
					url: '/pages/AfterSaleType/AfterSaleType',
				})
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #F7F8FA;
	min-height: 100%;
	padding-bottom: 140upx;
	padding-top:200upx;
}
.bgImg{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

.navBarContent{
	height:88upx;
	line-height: 88upx;
	text-align: center;
	position: relative;
	text{
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #000;
	}
	
}
.userInfo{
	position: relative;
	z-index:3;
	margin:0 30upx;
	image{
		width:100%;
		height:auto;
	}
	.userContent{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: flex;
		padding:52upx 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.avatar{
			width:114upx;
			height:114upx;
		}
		.user{
			margin-left:30upx;
			flex:1;
			.userTop{
				display: flex;
				align-items: center;
				.name{
					
					font-size: 36upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #785B45;
					margin-right:20upx;
				
				}
				.flag{
					height: 42upx;
					background: rgba(255,255,255,0.71);
					border-radius: 31px 31px 31px 31px;
					opacity: 1;
				
					font-size: 24upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #785B45;
					line-height: 42upx;
					text-align: center;
					padding:0 20upx;
				}
			}
			.userBottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top:26upx;
				text{
					font-size: 24upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #785B45;
				}
				.tixian{
					padding:12upx 36upx;
					background: linear-gradient(180deg, #AF8D72 0%, #7D5C45 100%);
					border-radius: 29px 29px 29px 29px;
					opacity: 1;
					font-size: 24upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					
				}
			}
		}
		
	}
}
.yongjinContent{
	background: #FFFFFF;
	border-radius: 6px 6px 6px 6px;
	opacity: 1;
	padding:42upx 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin:20upx 30upx;
	.item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.num{
			
			font-size: 40upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #414141;
			
		}
		.text{
		
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #616161;
			margin-top:10upx;
			
		}
	}
}
.gridContent{
	display: flex;
	background-color: #fff;
	flex-wrap: wrap;
	margin:0upx 30upx;
	padding:20upx 0;
	.gridItem{
		width:33%;
		margin:30upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image{
			height:auto;
			width:50upx;
		}
		text{
			
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #616161;
			margin-top:16upx;
		}
	}
}
</style>
