deepChartVueApp/pages/setting/share.vue

<template>
	<view class="all">
		<img class="img-share" src="/static/my/shareBackground.png" />
		<img class="img-greenBack" src="/static/my/greenBackground.png" />
		<img class="img-QRcode" src="/static/my/QRcode.png" />
		<img class="img-award" src="/static/my/award.png" />
		<img class="img-myFriends" src="/static/my/myFriends.png" />
		<img class="img-friends" src="/static/my/shareFriends.png" />
		<text class="jwcode">{{ jwcode }}</text>
		<button class="invite">立即邀请</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const jwcode = ref('90047681')
</script>

<style>
	.all {
		position: relative;
		width: 750rpx;
		height: auto;
	}

	.img-share {
		width: 750rpx;
		height: 2118rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.img-QRcode{
		width:320rpx;
		height:320rpx;
		position:absolute;
		top:26vh;
		left:215rpx;
		z-index: 3;
	}

	.img-greenBack {
		width: 670rpx;
		height: 1740rpx;
		position: absolute;
		top: 16vh;
		/* 为什么要用这个替代 margin-top */
		left: 40rpx;
		/* 还有 padding-left */
		z-index: 2;
	}

	.img-friends {
		width: 602rpx;
		height: 840rpx;
		position: absolute;
		top: 68vh;
		left: 74rpx;
		z-index: 3;
	}

	.img-award {
		width: 300rpx;
		height: 120rpx;
		position: absolute;
		top: 61vh;
		left: 75rpx;
		z-index: 3;
	}

	.img-myFriends {
		width: 300rpx;
		height: 88rpx;
		position: absolute;
		top: 61vh;
		right: 75rpx;
		z-index: 3;
	}

	.jwcode {
		width: 320rpx;
		height: 38rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 19vh;
		left: 212rpx;
		z-index: 999;
	}

	.invite {
		width: 320rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: black;
		color:white;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 50.7vh;
		left: 212rpx;
		z-index: 999;
	}
</style>