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.
163 lines
3.2 KiB
163 lines
3.2 KiB
<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> |