jingcai/pages/promotion/promotion.vue

<template>
	<view class="background1">
		<view class="background2">
			<view class="title"> 推廣計劃 </view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg1.png" mode=""></image>
					<view class="wen">會員</view>
				</view>
				<view class="wenben"> 充值100U就是有效會員</view>
			</view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg2.png" mode=""></image>
					<view class="wen">V1</view>
				</view>
				<view class="wenben"> 推薦2個有效會員，自由場流水1%，體驗 場流水0.1% </view>
			</view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg3.png" mode=""></image>
					<view class="wen">V2</view>
				</view>
				<view class="wenben"> 推薦3個有效會員，其中2個V1，自由場流 水2%，體驗場流水0.2% </view>
			</view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg4.png" mode=""></image>
					<view class="wen">V3</view>
				</view>
				<view class="wenben"> 推薦4個有效會員，其中2個V2，自由場流 水3%，體驗場流水0.3% </view>
			</view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg5.png" mode=""></image>
					<view class="wen">V4</view>
				</view>
				<view class="wenben"> 推薦5個有效會員，其中2個V3，自由場流 水4%，體驗場流水0.4% </view>
			</view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg6.png" mode=""></image>
					<view class="wen">V5</view>
				</view>
				<view class="wenben"> 推薦6個有效會員，其中2個V4，自由場流 水5%，體驗場流水0.5% </view>
			</view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg7.png" mode=""></image>
					<view class="wen">V6</view>
				</view>
				<view class="wenben"> 推薦7個有效會員，其中2個V5，自由場流 水6%，體驗場流水0.6% </view>
			</view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg8.png" mode=""></image>
					<view class="wen">V7</view>
				</view>
				<view class="wenben"> 推薦8個有效會員，其中2個V6，自由場流 水7%，體驗場流水0.7% </view>
			</view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg9.png" mode=""></image>
					<view class="wen">V8</view>
				</view>
				<view class="wenben"> 推薦9個有效會員，其中2個V7，自由場流 水8%，體驗場流水0.8% </view>
			</view>
			<view class="top">
				<view class="hy">
					<image class="icon" src="../../static/icon/tg10.png" mode=""></image>
					<view class="wen">平級獎</view>
				</view>
				<view class="wenben"> 直推流水收益的10% </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
	};
</script>

<style lang="scss">
	.background1 {
		position: relative;
		// width: 100vw;
		width: 750rpx;
		height: 2400rpx;
		// height: calc(100vh - var(--status-bar-height));
		background: url("/index/static/img/tuiguang2.png");
		background-size: 100% 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}

	.background2 {
		background-image: url("/index/static/img/tuiguang1.png");
		position: absolute;
		background-size: 100% 100%;
		width: 650rpx;
		height: 1930rpx;
		top: 53%;
		left: 50%;
		transform: translate(-50%, -60%);
	}
	.title {
		margin-top: 95rpx;
		margin-left: 253rpx;
		height: 36rpx;
		font-size: 37rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #d7b271;
		line-height: 10rpx;
	}
	.hy {
		display: flex;
		justify-content: start;
	}
	.icon {
		width: 66rpx;
		height: 49rpx;
		margin-left: 60rpx;
		margin-top: 70rpx;
	}
	.wen {
		margin-left: 20rpx;
		margin-top: 75rpx;
		height: 34rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #201809;
		line-height: 36rpx;
	}
	.wenben {
		margin-left: 60rpx;
		margin-top: 25rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #201809;
		line-height: 36rpx;
	}
</style>