front/pages/homepages/user/basic_information/basic_information.vue

<template>
<view class="background">
    <view class="user_head">
      <image class="head" src="/static/homepages/user/basic_information/head.png"></image>
	  <image class="head_pic" src="/static/homepages/user/basic_information/head_pic.png"></image>
      <image class="head_but" @click="" src="/static/homepages/user/basic_information/but.png"></image>
    </view>
	<view class="self_back">
		<view class="name">
		  <image class="user_name_but" @click="" src="/static/homepages/user/basic_information/but.png"></image>
		  <text class="name_text">puppy</text>
		</view>
		<view class="self">
		  <image class="self_but" @click="" src="/static/homepages/user/basic_information/but.png"></image>
		  <text class="self_write"></text>
		</view>
		<image class="button" src="/static/homepages/user/basic_information/button.png"></image>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods:{
    navigateTo(page) {
      uni.navigateTo({
        url: page
      });
    },
  }
}
</script>

<style lang="scss">
.background{
	background-image: url("/static/homepages/user/basic_information/img.png");
	background-size: cover;
	background-position: center;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.self_back{
	background-image: url("/static/homepages/user/basic_information/back.png");
	background-size: cover;
	flex:1;
	height: 80vh;
	width: 57.3vh;
	position: absolute;
	bottom:-7%
}
.name{
	background-image: url("/static/homepages/user/basic_information/user_name.png");
	background-size: cover;
	background-position: center;
	height: 30vh;
	flex:1;
	align-items: center;
	position: absolute;
	height: 10.1vh;
	width: 45vh;
	right: 10.5%;
	bottom: 71%;
}
.self{
	background-image: url("/static/homepages/user/basic_information/self_back.png");
	background-size: cover;
	background-position: center;
	height: 20vh;
	flex:1;
	align-items: center;
	position: absolute;
	height: 36vh;
	width: 45vh;
	right: 10.5%;
	bottom: 23%;
}
.user_head{
	background-image: url("/static/homepages/user/basic_information/user_back.png");
	background-size: cover;
	flex:1;
	height: 30vh;
	width: 57.3vh;
	position: absolute;
	bottom:70%
}
.head{
	position: absolute;
	height: 55%;
	width: 30%;
	opacity: 1;
	right: 34%; /* 距右边 10% */
	bottom: -20%; 
	z-index: 1;
}
.head_pic{
	position: absolute;
	height: 50%;
	width: 25%;
	opacity: 1;
	right: 36.7%; /* 距右边 10% */
	bottom: -10%; 
	z-index: 1;
}
.head_but{
	position: absolute;
	height: 14%;
	width: 7%;
	opacity: 1;
	right: 34%; /* 距右边 10% */
	bottom: -17%; 
	z-index: 1;
}
.user_name_but{
	position: absolute;
	height: 47%;
	width: 10%;
	opacity: 1;
	right: 3%; /* 距右边 10% */
	bottom: 30%; 
}
.name_text{
	position: absolute;
	font-size: 1.4em; 
	text-align: center;
	width: 100%;
	height: 20%;
	top: 17%;
	color:#000000;
	font-weight: bold;
}
.self_but{
	position: absolute;
	height: 13%;
	width: 10%;
	opacity: 1;
	right: 3%; /* 距右边 10% */
	bottom: 3%; 
}
.self_write{
	position: absolute;
	font-size: 1em; 
	text-align: center;
	width: 100%;
	height: 20%;
	top: 4%;
	color:#000000;
}
.button{
	position: absolute;
	height: 10%;
	width: 37%;
	opacity: 1;
	right: 31%; /* 距右边 10% */
	bottom: 11%; 
}
</style>