<template>
	<view class="index">
		<view class="index-content">
			<view class="index-content-item">
				<view class="index-content-item-nav baiyin-flex baiyin-flex-c-b">
					<text></text>
					<view>邀请新用户享受下单折扣</view>
				</view>
				<view class="index-content-item-li">1.成功邀请3位新用户,可享一单9折优惠</view>
				<view class="index-content-item-li">2.成功邀请5位新用户,可享两单9折优惠</view>
				<view class="index-content-item-li">3.成功邀请10位新用户,可享三单9折优惠</view>
			</view>
			<view class="index-content-item">
				<view class="index-content-item-nav baiyin-flex baiyin-flex-c-b">
					<text></text>
					<view>
						我已邀请:
						<text>3位用户</text>
					</view>
				</view>
			</view>
		</view>
		<u-button
			text="继续邀请新用户"
			color="#2C66FF"
			:customStyle="{
				width: '710rpx',
				height: '80rpx',
				borderRadius: '10rpx',
				padding: '0rpx',
				position: 'absolute',
				left: '20rpx',
				bottom: '142rpx'
			}"
		></u-button>
	</view>
</template>

<script>
import apiBaseConfig from '@/config/index.js';
export default {
	data() {
		return {
			imgBgUrl: apiBaseConfig.imgBgUrl,
			globalData: getApp().globalData,
			scrollTopHeader: 0
		};
	},
	onLoad() {},
	methods: {}
};
</script>

<style lang="scss" scoped>
.index {
	&-content {
		margin: 24rpx 20rpx;
		width: calc(100% - 20rpx * 2);
		&-item {
			margin-bottom: 30rpx;
			&-nav {
				margin-bottom: 20rpx;
				> text {
					display: inline-block;
					width: 6rpx;
					height: 36rpx;
					background: #2c66ff;
					border-radius: 3rpx;
					margin-right: 10rpx;
				}
				> view {
					font-size: 28rpx;
					font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
					font-weight: 500;
					color: #333333;
					> text {
						color: #2c66ff;
					}
				}
			}
			&-nav:last-child {
				margin-bottom: 0rpx;
			}
			&-li {
				font-size: 24rpx;
				font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
				font-weight: 400;
				color: #333333;
				margin-bottom: 10rpx;
				padding-left: 14rpx;
			}
			&-li:last-child {
				margin-bottom: 0rpx;
			}
		}
	}
}
</style>