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

<template>
<view class="background">
	<image class="head_pic" src="@/static/homepages/user/user/pictures/head_pic.png"></image>
	<image class="head_button" @click="goto_user()" src="@/static/homepages/user/user/pictures/head_button.png"></image>
	<image class="bmi_button" @click="goto_bmi()" src="@/static/homepages/user/user/pictures/bmi_button.png"></image>
	<image class="eat_button" @click="goto_eat()" src="@/static/homepages/user/user/pictures/eat_button.png"></image>
	<image class="ad_button" @click="goto_exer()" src="@/static/homepages/user/user/pictures/ad_button.png"></image>
	<image class="button" @click="goto_login()" src="@/static/homepages/user/user/pictures/button.png"></image>
	<image class="point" src="@/static/homepages/user/user/pictures/point.png"></image>
	<image class="pie" src="@/static/homepages/user/user/pictures/pie.png"></image>


	<image  v-if="sex===0" class="user" src="@/static/homepages/user/user/pictures/female.png"></image>
    <image  v-if="sex===1" class="user" src="@/static/homepages/user/user/pictures/male.png"></image>


	<text class="id">{{user_name}}</text>
	<text class="hot_in">20000J</text>
	<text class="hot_out">17000J</text>
	<text class="height">{{user_height}}cm</text>
	<text class="weight">{{user_weight}}kg</text>
	<text class="bmi">{{user_bmi}}</text>
	<text class="xw">{{user_xw}}</text>
	<text class="yw">{{user_yw}}</text>
	<text class="tw">{{user_tw}}</text>
	<text class="bmi_state">很健康</text>

  </view>
  <tarbar_user></tarbar_user>
</template>

<script>
export default {
  data() {
    return {
      sex : 1,//1为男，0为女
	  user_name:'puppy',
	  user_height:'180',
	  user_weight:'75',
	  user_xw:'44.5',
	  user_yw:'34.0',
	  user_tw:'42.5',
	  user_bmi:'23.1'
    };
  },
	onLoad(options){
	  if (options.user_name) {
	    this.user_name = options.user_name;
	  };
	},
  methods:{
    navigateTo(page) {
      uni.navigateTo({
        url: page
      });
    },
	goto_user(){
		this.navigateTo(`/pages/homepages/user/basic_information/basic_information`);
	},
	
	goto_bmi(){
		this.navigateTo(`/pages/homepages/user/bmi_information/bmi_information`);
	},
	
	goto_eat(){
		this.navigateTo(`/pages/homepages/user/recipe_and_calorie/recipe_and_calorie`);
	},
	
	goto_exer(){
		this.navigateTo(`/pages/homepages/user/exercise_plans/exercise_plans`);
	},
	
	goto_login(){
		this.navigateTo(`/pages/login/account_login/account_login`);
	},
  }
}
</script>

<style scoped>
.background{
	background-image: url("@/static/homepages/user/user/pictures/background.png");
	background-size: cover;
	background-position: center;
	height: 225vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.head_pic{
	position: absolute;
	height: 4%;
	width: 20%;
	opacity: 1;
	right: 70%; 
	top: 3.5%;

}
.head_button{
	position: absolute;
	height: 1.2%;
	width: 20%;
	opacity: 1;
	right: 5%; 
	bottom: 90.7%;

}
.bmi_button{
	position: absolute;
	height: 1.2%;
	width: 20%;
	opacity: 1;
	right: 6%; 
	bottom: 60.7%;

}
.ad_button{
	position: absolute;
	height: 2%;
	width: 35%;
	opacity: 1;
	right: 57%; 
	bottom:17.5%;

}
.eat_button{
	position: absolute;
	height: 2%;
	width: 35%;
	opacity: 1;
	right: 57%; 
	bottom: 10.5%;

}
.user{
	position: absolute;
	height: 18%;
	width: 30%;
	opacity: 1;
	left: 55%;
	bottom: 26%;

}
.point{
	position: absolute;
	height: 0.3%;
	width: 2%;
	opacity: 1;
	right: 50%; 
	bottom: 48.4%;
}
.button{
	position: absolute;
	height: 4%;
	width: 90%;
	left: 5%;
	top: 90.5%;
}
.pie{
	position: absolute;
	height: 18%;
	width: 85%;
	left: 5%;
	top: 18%;
}
.id{
	position: absolute;
	opacity: 1;
	left: 37%; /* 距右边 10% */
	top: 4.7%;
	font-size: 1.5rem;
}
.hot_in{
	position: absolute;
	height: 0.2%;
	width: 5%;
	opacity: 1;
	left: 20%; /* 距右边 10% */
	top: 12.7%; 
	font-size: 0.5rem;
	color: #ffffff;
}
.hot_out{
	position: absolute;
	height: 0.2%;
	width: 5%;
	opacity: 1;
	left: 71%; /* 距右边 10% */
	top: 12.7%; 
	font-size: 0.5rem;
	color: #ffffff;
}
.height{
	position: absolute;
	height: 0.2%;
	width: 5%;
	opacity: 1;
	right: 72%; /* 距右边 10% */
	bottom: 55.3%; 
	font-size: 1.2rem;
	color: #ffffff;
}
.weight{
	position: absolute;
	height: 0.2%;
	width: 5%;
	opacity: 1;
	right: 33%; /* 距右边 10% */
	bottom: 55.3%; 
	font-size: 1.2rem;
	color: #ffffff;
}
.bmi{
	position: absolute;
	height: 0.2%;
	width: 5%;
	opacity: 1;
	right: 73%; /* 距右边 10% */
	bottom: 50.5%; 
	font-size: 1.2rem;
	color: #ffffff;
}
.xw{
	position: absolute;
	height: 0.2%;
	width: 5%;
	opacity: 1;
	right: 79%; /* 距右边 10% */
	bottom: 39.3%; 
	font-size: 1.2rem;
}
.yw{
	position: absolute;
	height: 0.2%;
	width: 5%;
	opacity: 1;
	right: 79%; /* 距右边 10% */
	bottom: 34.5%; 
	font-size: 1.2rem;
}
.tw{
	position: absolute;
	height: 0.2%;
	width: 5%;
	opacity: 1;
	right: 79%; /* 距右边 10% */
	bottom: 29.3%; 
	font-size: 1.2rem;
}
.bmi_state{
	position: absolute;
	text-align: center;
	opacity: 1;
	left: 68%;
	top: 49.4%; 
	font-size: 0.2em;
	color: #000000;
}
</style>