123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <template>
- <view>
- <view class="user-section">
- <image class="bg" :src="imgUrl+'user-bg.jpg'"></image>
- <text class="bg-upload-btn yticon icon-paizhao"></text>
- <view class="portrait-box">
- <image class="portrait" :src="userInfo.portrait || imgUrl+'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 {
- imgUrl: getApp().globalData.imgUrl
- };
- },
- 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>
|