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.
87 lines
1.4 KiB
87 lines
1.4 KiB
7 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="user-section">
|
||
|
|
<image class="bg" src="/static/user-bg.jpg"></image>
|
||
|
|
<text class="bg-upload-btn yticon icon-paizhao"></text>
|
||
|
|
<view class="portrait-box">
|
||
|
|
<image class="portrait" :src="userInfo.portrait || '/static/missing-face.png'"></image>
|
||
|
|
<text class="pt-upload-btn yticon icon-paizhao"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
mapState,
|
||
|
|
mapMutations
|
||
|
|
} from 'vuex';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
...mapState(['userInfo']),
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page{
|
||
|
|
background: $page-color-base;
|
||
|
|
}
|
||
|
|
.user-section{
|
||
|
|
display:flex;
|
||
|
|
align-items:center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 460upx;
|
||
|
|
padding: 40upx 30upx 0;
|
||
|
|
position:relative;
|
||
|
|
.bg{
|
||
|
|
position:absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
filter: blur(1px);
|
||
|
|
opacity: .7;
|
||
|
|
}
|
||
|
|
.portrait-box{
|
||
|
|
width: 200upx;
|
||
|
|
height: 200upx;
|
||
|
|
border:6upx solid #fff;
|
||
|
|
border-radius: 50%;
|
||
|
|
position:relative;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.portrait{
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.yticon{
|
||
|
|
position:absolute;
|
||
|
|
line-height: 1;
|
||
|
|
z-index: 5;
|
||
|
|
font-size: 48upx;
|
||
|
|
color: #fff;
|
||
|
|
padding: 4upx 6upx;
|
||
|
|
border-radius: 6upx;
|
||
|
|
background: rgba(0,0,0,.4);
|
||
|
|
}
|
||
|
|
.pt-upload-btn{
|
||
|
|
right: 0;
|
||
|
|
bottom: 10upx;
|
||
|
|
}
|
||
|
|
.bg-upload-btn{
|
||
|
|
right: 20upx;
|
||
|
|
bottom: 16upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|