bnyer-cloud-hub/pages-userInfo/extends/extends.vue

<template>
	<view class="back">
	  <view class="back-top"></view>
	  <view class="uni-radius back-con uni-shadow-sm">
	    <view class="">
	      <view class="back-con-top"> 邀请码 </view>
	      <view class="inviteCode">
				{{userInfo.inviteCode}}
	      </view>
	    </view>
		<view class="border"></view>
		<view class="">
		  <view class="back-con-top"> 邀请链接 </view>
		  <view class="inviteUrl">
				http://AFJIASD?code={{userInfo.inviteCode}}
		  </view>
		  <button class="">点击复制</button>
		</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		created() {
			const userInfoSync = uni.getStorageSync('userInfo')
			this.userInfo = userInfoSync
		}
	}
</script>

<style lang="scss">
.back {
  width: 100%;
  height: 320px;
  position: relative;
}
.back-con {
  width: 95%;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  background-color: white;
  position: relative;
  height: 440rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.back2 {
  width: 100%;
}
.back-top {
  width: 100%;
  position: absolute;
  height: 240rpx;
  background: #416bdc;
}
.back-con-top {
  font-size: 40rpx;
  font-weight: 600;
  margin: 40rpx 0 30rpx 0;
  display: flex;
  justify-content: center;
}

.border {
  width: 95%;
  height: 2rpx;
  margin-top: 19rpx;
  background-color: rgb(165, 165, 165);
}		
</style>