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="change_head()" src="/static/homepages/user/basic_information/but.png"></image>
    </view>
	<view class="self_back">
		<view class="name">
		  <image class="user_name_but" @click="change_name()" src="/static/homepages/user/basic_information/but.png"></image>
		  <input v-if="n_writeable===true" class="name_text" v-model="name"></input>
		  <view v-else class="w_name">{{name}}</view>
		</view>
		<view class="self">
		  <image class="self_but" @click="change_self()" src="/static/homepages/user/basic_information/but.png"></image>
		  <textarea v-if="s_writeable===true" v-model="selftext" class="self_write"></textarea>
		  <view v-else class="self_read">{{selftext}}</view>
		</view>
		<image class="button" @click="save_change()" src="/static/homepages/user/basic_information/button.png"></image>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		name:'puppy',
		selftext:'您的个人简介',
		n_writeable:false,
		s_writeable:false,
	};
  },
  methods:{
	change_self(){
		console.log('selftext:', this.selftext);
		this.s_writeable=true;
	},
	change_name(){
		console.log('name:', this.name);
		this.n_writeable=true;
	},

    navigateTo(page) {
      uni.navigateTo({
        url: page
      });
    },
	save_change()
	{
		console.log('name:', this.name);
		console.log('selftext:', this.selftext);
		const NAME=this.name;
		this.n_writeable=false;
		this.s_writeable=false;
		this.navigateTo(`/pages/homepages/user/user/user?user_name=${NAME}`);
	},
  }
}
</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: 65%;
	height: 40%;
	top: 24%;
	left: 20%;
	color:#000000;
}
.w_name{
	position: absolute;
	font-size: 1.4em; 
	text-align: center;
	width: 65%;
	height: 40%;
	top: 26%;
	left: 20%;
	color:#000000;
}
.self_but{
	position: absolute;
	height: 13%;
	width: 10%;
	opacity: 1;
	right: 3%; /* 距右边 10% */
	bottom: 3%; 
}
.self_write{
	position: absolute;
	font-size: 1.4em; 
	width: 70%;
	height: 80%;
	top: 4%;
	right: 10%;
	color:#000000;
}
.self_read{
	position: absolute;
	font-size: 1.4em; 
	width: 70%;
	height: 80%;
	top: 4%;
	right: 10%;
	color:#000000;
}
.button{
	position: absolute;
	height: 10%;
	width: 37%;
	opacity: 1;
	right: 31%; /* 距右边 10% */
	bottom: 11%; 
}
</style>