siyu_app/pages/user/popularize.vue

<template>
	<view class="es-pl-27 es-pr-27">
		<es-nav-bg title="我的推广" ref="esNavBg"></es-nav-bg>

		<view class="es-p-r">
			<view class="es-mt-10 banner es-icon-user-push-bg es-icon-auto es-c">
				<view class="es-fw es-fs-30 es-mt-30">累计佣金</view>
				<view class="es-fw es-fs-60">0</view>
				<view class="es es-ac es-fw-600 es-mt-2">
					<view class="banner-item es-h-88 es es-ac es-br-10">
						<view class="es-ml-29 es-w-42 es-h-41 es-icon-default es-icon"></view>
						<view class="es-ml-28">
							<view class="es-fs-24">我的收益</view>
							<view class="es-mt-2 es-fs-30" style="line-height: 1em;">0</view>
						</view>
					</view>
					<view class="es-f1"></view>
					<view class="banner-item es-h-88 es es-ac es-br-10">
						<view class="es-ml-29 es-w-46 es-h-40 es-icon-user-push-icon-2 es-icon"></view>
						<view class="es-ml-28">
							<view class="es-fs-24">我的收益</view>
							<view class="es-mt-2 es-icon-user-push-info es-icon es-w-103 es-h-21" style=""></view>
						</view>
					</view>
				</view>
			</view>

			<view class="con es-bc-white es-br-20 es-mt-20 es es-pt-10 es-pb-10 es-pl-10 es-pr-10">
				<view class="item es-icon-auto es-ver es es-pc" v-for="v,i in list" :class="v.icon">
					<view class="es-ml-22 es-fw-600">{{v.name}}</view>
					<view class="es-ml-22 es-mt-6 es-w-108 es-h-23 es-icon-user-push-info es-icon-auto"></view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '推广名片',
						url: '',
						icon: 'es-icon-user-push-1',
					},
					{
						name: '推广套餐包',
						url: '',
						icon: 'es-icon-user-push-2',
					},
					{
						name: '医生推广',
						url: '',
						icon: 'es-icon-user-push-3',
					},
					{
						name: '佣金明细',
						url: '',
						icon: 'es-icon-user-push-4',
					},
					{
						name: '推广人订单',
						url: '',
						icon: 'es-icon-user-push-5',
					},
					{
						name: '提现管理',
						url: '',
						icon: 'es-icon-user-push-6',
					},

				]

			}
		},
		onLoad(options) {


		},
		onPageScroll: function(e) {
			this.$refs.esNavBg.scrollBody(e);
		},
		methods: {


		}
	}
</script>

<style>
	page {
		background-color: #fafafa;
	}

	.banner {
		height: 286rpx;
		padding: 0 42rpx;
	}

	.con {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.banner-item {
		width: 280rpx;
		background-color: rgba(255, 255, 255, 0.47);
	}

	.es-icon-user-push-1 {
		background-image: url(/static/images/other/user/push-1.png);
	}

	.es-icon-user-push-2 {
		background-image: url(/static/images/other/user/push-2.png);
	}

	/* .es-icon-user-push-3 { background-image: url(/static/images/other/user/push-3.png); } */
	.es-icon-user-push-4 {
		background-image: url(/static/images/other/user/push-4.png);
	}

	.es-icon-user-push-5 {
		background-image: url(/static/images/other/user/push-5.png);
	}

	.es-icon-user-push-6 {
		background-image: url(/static/images/other/user/push-6.png);
	}

	.es-icon-user-push-bg {
		background-image: url(/static/images/other/user/push-bg.png);
	}

	/* .es-icon-user-push-icon-1 { background-image: url(/static/images/other/user/push-icon-1.png); } */
	.es-icon-user-push-icon-2 {
		background-image: url(/static/images/other/user/push-icon-2.png);
	}

	.es-icon-user-push-info {
		background-image: url(/static/images/other/user/push-info.png);
	}

	.item {
		margin: 10rpx;
		width: 315rpx;
		height: 150rpx;
	}
</style>