You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
1.9 KiB
111 lines
1.9 KiB
<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>
|