siyu_app/pages/index/share/share.vue

<template>
	<view>
		<view class="es-fix-top es-c-white">
			<es-top></es-top>
			<view class="es-h-88 es-view-w-x es es-ac">
				<view class="es-w-100">
					<view class="es-icon-ret-white" @tap="close"></view>
				</view>
				<view class="es-f1 es es-ac es-pc">邀请好友</view>
				<view class="es-w-100"></view>
			</view>
		</view>
		
		<view class="es-block">
			<view class="" style="padding-top: 61%;"></view>
		</view>
		
		
		<view class="es es-pe es-p-r">
			<view class="es es-c es-fw-n es-fs-30 es-h-60 es-br es es-ac es-pc" style="background-color: #FFE8DC;margin-right: 60rpx;width:378rpx">
				海量芳华币等你拿
			</view>
			<view class="es-icon es-w-43 es-h-47 es-icon-user-share-notice"></view>
		</view>
		<view class="es-mt-38 es-br-30 es-view-w-y es-bc-white">
			<view class="money es es-ac es-pc">
				<view class="es-icon-user-share-money es-icon-auto"></view>
			</view>
			<view class="award es es-ac es-pc">
				<view class="es-icon-user-share-icon es-icon-auto"></view>
			</view>
			<view class="block">
			</view>
			
			<view class="con es es-ver">
				<view class="es-icon-auto es-h-71 es-wp-100 es-icon-user-share-bg3"></view>
				<view class="es-ml-45 es-mr-45 es es-ac es-pt-25 es-pb-45 es-pc es-icon-user-share-bg2 es-icon-auto" style="margin-top: -45rpx;">
					<view class="es es-ac es-pc qr1 es-ver">
						<view class="es-bc-tint qr-con es es-ac es-pc">
							<view class="qr es-icon">
								<image src="/static/images/other/user/share-qr.png"></image>
							</view>
						</view>
						
						<view class="es-pb-15 es es-ac es-mt-30">
							<view class="btn es-icon-auto es-icon-user-share-btn2 es es-ac es-pc">
								<view class="es-icon es-w-190 es-h-35 es-icon-user-share-btn"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="es-pt-50 es-pb-50 es es-ac es-pc">
			<view class="es-fs-26 es-c-white">被邀请的好友需实名认证后才可获得相应奖励</view>
		</view>
		<view class="es-h-10"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				
			}
		},
		onLoad(options) {
			
			
		},
		methods: {
			

		}
	}
</script>

<style>
	page{
		background-image: url(/static/images/other/user/share-bg.jpg);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	
	.es-icon-user-share-notice { background-image: url(/static/images/other/user/share-notice.png); }
	.es-icon-user-share-bg2 { background-image: url(/static/images/other/user/share-bg2.png); }
	.es-icon-user-share-bg3 { background-image: url(/static/images/other/user/share-bg3.png); }
	.es-icon-user-share-btn { background-image: url(/static/images/other/user/share-btn.png); }
	.es-icon-user-share-btn2 { background-image: url(/static/images/other/user/share-btn2.png); }
	.es-icon-user-share-icon { background-image: url(/static/images/other/user/share-icon.png); }
	.es-icon-user-share-money { background-image: url(/static/images/other/user/share-money.png); }
	.es-icon-user-share-qr { background-image: url(/static/images/other/user/share-qr.png); }
	
	.money{
		position: absolute;
		left:0;
		top:78rpx;
		width: 100%;
		z-index: 0;
	}
	
	.award{
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		z-index: 0;
	}
	
	.es-icon-user-share-money{
		width: 451rpx;
		height: 304rpx;
	}
	.es-icon-user-share-icon{
		width: 329rpx;
		height: 291rpx;
	}
	
	.es-icon-user-share-notice{
		position: absolute;
		right:48rpx;
		top:-18rpx;
	}
	.block{
		position: absolute;
		top:192rpx;
		z-index: 1;
		background-color: white;
		height: 100rpx;
		width: 100%;
		margin-top: 20rpx;
	}
	
	.con{
		margin-top: 192rpx;
		padding:0 25rpx 0 25rpx;
		z-index: 1;
	}
	
	
	.qr{
		width: 346rpx;
		height: 346rpx;
	}
	.qr-con{
		width: 394rpx;
		height: 394rpx;
	}
	.qr1{
		width: 481rpx;
		border: 1px solid #FF5C03;
		border-top: none;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		border-radius: 0 0 25rpx 25rpx;
	}
	
	.btn{
		width: 294rpx;
		height: 68rpx;
	}
	.btn image{
		width: 190px;
		height: 35px;
	}
	
</style>