JP-ChargeTeam51/pages/user/InviteFriends.vue

<template>
	<view>
		<u-navbar title="邀请好友"></u-navbar>
		<view class="InviteFriends">
			<view class="InviteFriends-head">
				<u-image width="274rpx" height="60rpx" src="/static/img/logo3.png"></u-image>
				<u-image class="textImg" width="662rpx" height="59rpx" src="/static/img/text.png"></u-image>
				<u-image width="100%" height="320rpx" src="/static/img/handshake.png"></u-image>
			</view>
			<view class="InviteFriends-main">
				<view class="InviteFriends-coupons">
					<h4>每邀请1位好友注册，将获得1张抵扣券</h4>
					<view class="coupons-price">
						<h2>5</h2><span>元</span>
					</view>
					<view class="coupons-line"></view>
					<view class="coupons-btn">
						<u-icon name="wechat-fill" custom-prefix="custom-icon" color="#fff" size="48"></u-icon>
						<span>分享至微信</span>
					</view>
				</view>
				<view class="InviteFriends-title">福利获取流程</view>
				<view class="InviteFriends-info">
					<view class="InviteFriends-info-row">
						<u-icon name="question-answer-fill" custom-prefix="custom-icon" color="#00B962" size="48"></u-icon>
						<p>1.发送链接给好友</p>
					</view>
					<view class="InviteFriends-info-row">
						<u-icon name="account-pin-circle-fill" custom-prefix="custom-icon" color="#00B962" size="48"></u-icon>
						<p>2.好友注册并登录51充电联盟</p>
					</view>
					<view class="InviteFriends-info-row">
						<u-icon name="gift-2-fill" custom-prefix="custom-icon" color="#00B962" size="48"></u-icon>
						<p>3.和好友一起领5元红包</p>
					</view>
					<view class="InviteFriends-tips">
						<span>*</span><p>邀请成功，你和好友各得5元红包，一年有效；邀请更多人，你可领最高500元红包，红包在本活动页兑换。</p>
					</view>
				</view>
				<view class="InviteFriends-title">我的奖励</view>
				<view class="InviteFriends-reward">
					<view class="reward-head">
						<p>成功邀请1人，已获得</p>
						<view class="reward-head-price">
							<h2>5</h2><span>元</span>
						</view>
					</view>
					<view class="reward-main">
						<view class="reward-info">
							<view class="reward-info-item">
								<p>待兑换</p>
								<view class="reward-info-price">
									<h2>5</h2><span>元</span>
								</view>
							</view>
							<view class="reward-info-item reward-info-item2">
								<p>已兑换</p>
								<view class="reward-info-price">
									<h2>5</h2><span>元</span>
								</view>
							</view>
						</view>
						<view class="reward-btn">兑换奖励</view>
						<view class="reward-list">
							<view class="reward-list-title">
								成功邀请记录
							</view>
							<view class="rewardList">
								<view class="rewardList-item">
									<view class="u-flex">
										<u-avatar src="/static/img/head1.png" size="72"></u-avatar>
										<span>asdas</span>
									</view>
									<p>2022-05-30</p>
								</view>
								<view class="rewardList-item">
									<view class="u-flex">
										<u-avatar src="/static/img/head1.png" size="72"></u-avatar>
										<span>asdas</span>
									</view>
									<p>2022-05-30</p>
								</view>
								<view class="rewardList-item">
									<view class="u-flex">
										<u-avatar src="/static/img/head1.png" size="72"></u-avatar>
										<span>asdas</span>
									</view>
									<p>2022-05-30</p>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="InviteFriends-foot">
					*本活动最终解释权，归51充电联盟所有。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
<style>
	page{
	}
</style>
<style lang="scss" scoped>
	.InviteFriends{
		background-image: linear-gradient(0deg, #a2e9c9 , #01b963);

	}
	.InviteFriends-head{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 36px;
		.textImg{
			margin:20px 0 10px;
		}
	}
	.InviteFriends-main{
		padding: 0 32px;
	}
	.InviteFriends-coupons{
		background-color: #fff;
		border-radius: 20px;
		padding: 20px;
		h4{
			font-size: 15px;
			font-weight: normal;
			text-align: center;
		}
		.coupons-price{
			display: flex;
			justify-content: center;
			align-items: flex-end;
			margin: 16px 0;
			h2{
				font-size: 44px;
				line-height: 44px;
				color:#FF9600;
			}
			span{
				font-size: 18px;
				margin-left: 2px;
			}
		}
		.coupons-line{
			height: 1px;
			border-bottom: 1px dashed #cacaca;
			position: relative;
			&:before{
				content: '';
				position: absolute;
				height: 15px;
				width: 15px;
				background-color:#2dc67f ;
				border-radius: 50%;
				left:-27px;
				top:-7px;
			}
			&:after{
				content: '';
				position: absolute;
				height: 15px;
				width: 15px;
				background-color:#2dc67f ;
				border-radius: 50%;
				right:-27px;
				top:-7px;
			}
		}
		.coupons-btn{
			background-color: #FF9600;
			margin-top: 20px;
			height: 50px;
			text-align: center;
			line-height: 50px;
			border-radius: 25px;
			font-size: 20px;
			color:#fff;
			span{
				margin-left: 8px;
			}
		}
	}
	.InviteFriends-title{
		color:#fff;
		margin: 40px 0 24px;
		font-size: 18px;
	}
	.InviteFriends-info{
		background-color: #fff;
		border-radius: 20px;
		padding: 20px;
		.InviteFriends-info-row{
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			&:last-child{
				margin-bottom: 0;
			}
			p{
				margin-left: 12px;
				font-size: 16px;
			}
		}
	}
	.InviteFriends-tips{
		padding-left:30px;
		margin-top: -16px;
		span{
			float: left;
			color:#FF1C1C;
		}
		p{
			color:#999;
		}
	}
	.reward-head{
		background-color: #00B962;
		border-radius: 16px 16px 0 0;
		height: 75px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		margin: 0 4px;
		p{
			color:#fff;
			font-size: 17px;
		}
		.reward-head-price{
			color:#fff;
			display: flex;
			align-items: flex-end;
			h2{
				font-size: 36px;
				line-height: 36px;
				margin-right: 2px;
			}
		}
	}
	.reward-main{
		background-color: #fff;
		border-radius: 16px;
		padding: 24px;
		margin-top: -4px;
		.reward-info{
			display: flex;
			justify-content: space-between;
			.reward-info-item{
				width: 122px;
				height: 122px;
				display: flex;
				flex-direction: column;
				align-items: center;
				border:1px solid  #CBE1D7 ;
				justify-content: center;
				border-radius: 12px;
			}
			p{
				font-size: 16px;
				color:#666;
				margin-bottom: 10px;
			}
			.reward-info-price{
				display: flex;
				align-items: flex-end;
				h2{
					font-size: 44px;
					line-height: 44px;
					margin-right: 2px;
					color:#00B962;
				}	
			}
			.reward-info-item2{
				background-color:#E6EEEA;
				border: none;
				.reward-info-price h2{
					color:#333;
				}
			}
		}
		.reward-btn{
			height: 40px;
			width: 120px;
			border-radius: 20px;
			background-color: #00B962 ;
			line-height: 40px;
			color:#fff;
			text-align: center;
			font-size: 18px;
			margin: 20px auto;
		}
	}
	.reward-list{
		border-top: 1px dashed #cacaca;
		padding-top: 20px;
		.reward-list-title{
			font-size: 18px;
			margin-bottom: 20px;
		}
		.rewardList-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12px;
			span{
				margin-left: 12px;
				font-size: 16px;
			}
			p{
				color:#999;
			}
		}
	}
	.InviteFriends-foot{
		text-align: center;
		color:#2A9563;
		padding: 20px 0 64px;
	}
</style>