<template>
	<view class="page">
		<navbar title="会员" />

		<view class="swipe">
			<uv-swiper :list="bannerList" indicator height="320rpx" keyName="url"></uv-swiper>
		</view>

		<view class="middle">
			<view class="rights">会员权益</view>
			<view class="middle-one">会员条件：一次性购买50斤大米即成为会员50斤*20元/斤=1000元会员权益</view>

			<view class="middle-boxs">
				<view class="middle-two-1">权益一</view>
				<view class="middle-box">
					<view class="middlex-minBox">
						<view class="middle-box-one">
							<view>赠送价值</view>
							<view style="color: #D15206; font-size: 28rpx;">100元</view>
							<view>的三诺血糖</view>
						</view>
						<view>检测仪*1台</view>
					</view>
				</view>
				<view class="img">
					<image src="../../static/image/member/1.png" mode="aspectFill"></image>
				</view>
			</view>


			<view class="middle-boxs">
				<view style="padding: 20rpx;"></view>
				<view class="middle-two-2">权益二</view>
				<view class="middle-box">
					<view class="middlex-minBox-2">
						<view class="middle-box-one">
							<view>会员推荐朋友购买会员，</view>
							<view>第一个</view>
						</view>
						<view>返利10%、第二个返利20%、第三个返利30%、</view>
						<view style="display: flex; align-items: center;">
							<view>第四个返利40%、</view>
							<text style="color: #474747; font-size: 24rpx;">四四循环</text>
						</view>
					</view>
				</view>
				<view class="img-2">
					<image src="../../static/image/member/2.png" mode="aspectFill"></image>
				</view>
			</view>


			<view class="middle-boxs">
				<view class="middle-two-3">权益三</view>
				<view class="middle-box">
					<view class="middlex-minBox">
						<view>所推荐朋友购买产品及今后产生复购</view>
						<view class="middle-box-one">
							<view>产品的</view>
							<view style="color: #D15206; font-size: 28rpx;">返15%佣金</view>
							<view>（体验价不计算在内）</view>
						</view>
					</view>
				</view>
				<view class="img">
					<image src="../../static/image/member/3.png" mode="aspectFill"></image>
				</view>
			</view>

			<view class="middle-bottom">
				<view>*仅限前</view>
				<text>1000名</text>
				<view>充值会员</view>
			</view>
		</view>


		<tabber select="member" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	export default {
		components: {
			tabber,
		},
		data() {
			return {
				bannerList: [{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					},
				],
			};
		}
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		color: #F3F3F3;
		z-index: 0;

		.swipe {
			overflow: hidden;
			border-radius: 20rpx;
			margin: 20rpx;
		}

		.middle {
			margin: 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
			padding-top: 20rpx;

			.rights {
				margin-left: 20rpx;
				padding: 0 20rpx;
				color: #474747;
				font-size: 32rpx;
				font-weight: 600;
				border-left: 6rpx solid #A3D250;
			}

			.middle-one {
				font-size: 28rpx;
				padding: 10rpx 120rpx 10rpx 40rpx;
				color: #D15206;

			}

			.middle-boxs {
				padding: 40rpx 40rpx 20rpx 20rpx;
				position: relative;
				margin-top: 40rpx;


				.middle-two-1,
				.middle-two-2,
				.middle-two-3 {
					display: inline-block;
					font-size: 32rpx;
					font-weight: 600;
					color: #474747;
					padding: 10rpx 40rpx;
					background-color: #F6CD59;
					border-radius: 30rpx;
				}

				.middle-two-2 {
					position: absolute;
					top: 10rpx;
					right: 0;
				}

				.middle-box {
					margin-top: -30rpx;
					min-height: 160rpx;
					background-color: #FFFBF2;

					.middlex-minBox {
						display: flex;
						flex-direction: column;
						padding: 60rpx 0rpx 0rpx 40rpx;
						font-size: 24rpx;
						color: #474747;

						.middle-box-one {
							display: flex;
							align-items: center;
						}
					}

					.middlex-minBox-2 {
						display: flex;
						padding: 80rpx 0rpx 30rpx 40rpx;
						font-size: 24rpx;
						color: #474747;
						flex-direction: column;
						justify-content: center;
						margin-right: 10rpx;

						.middle-box-one {
							display: flex;
							justify-content: flex-end;
							align-items: center;
						}

						view:nth-child(2) {
							font-size: 28rpx;
							color: #D15206;
						}

						view:nth-child(3) {
							font-size: 28rpx;
							color: #D15206;
						}
					}
				}

				.img {
					position: absolute;
					height: 220rpx;
					width: 180rpx;
					top: -40rpx;
					right: 80rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}


				.img-2 {
					position: absolute;
					height: 220rpx;
					width: 180rpx;
					top: -40rpx;
					left: 50rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.middle-bottom {
				display: flex;
				color: #CCCCCC;
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				text {
					color: #D15206;
				}
			}

		}
	}
</style>