gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【修复】个人中心清理掉头像后阴影效果错乱问题以及签名图片左右不饱满问题

pull/90/head
小诺 2023-03-12 00:59:38 +08:00 committed by 俞宝山
parent 47ff13c198
commit 46890f08c8
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
snowy-admin-web/src/views/sys/user/userCenter.vue
View File

@ -8,7 +8,7 @@
<img :src="userInfo.avatar" /> <img :src="userInfo.avatar" />
</a-spin> </a-spin>
<a @click="uploadLogo"> <a @click="uploadLogo">
<div class="mask"><upload-outlined /></div> <div :class="userInfo.avatar ? 'mask' : 'mask-notImg'"><upload-outlined /></div>
</a> </a>
</div> </div>
<div class="username">{{ userInfo.name }}</div> <div class="username">{{ userInfo.name }}</div>
@ -19,13 +19,13 @@
<p><i class="group"></i>{{ userInfo.orgName }}</p> <p><i class="group"></i>{{ userInfo.orgName }}</p>
<p> <p>
<i class="address"></i> <i class="address"></i>
<span>{{ userInfo.homeAddress }}</span> <span>{{ userInfo.homeAddress? userInfo.homeAddress : '暂无地址' }}</span>
</p> </p>
</div> </div>
<a-divider /> <a-divider />
<div class="account-center-team"> <div class="account-center-team">
<div class="mb-2" v-if="userInfo.signature"> <div class="mb-2" v-if="userInfo.signature" style="width: 100%">
<a-image :src="userInfo.signature" style="height: 120px; border: 1px solid rgb(236 236 236)" /> <a-image :src="userInfo.signature" width="100%" style="height: 120px; border: 1px solid rgb(236 236 236)" />
</div> </div>
<a-button @click="XnSignNameRef.show()">打开签名板</a-button> <a-button @click="XnSignNameRef.show()">打开签名板</a-button>
<XnSignName ref="XnSignNameRef" :image="userInfo.signature" @successful="signSuccess" /> <XnSignName ref="XnSignNameRef" :image="userInfo.signature" @successful="signSuccess" />
@ -173,9 +173,26 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.mask-notImg {
border-radius: 50%;
position: absolute;
margin-top: -24px;
width: 104px;
height: 104px;
background: rgba(101, 101, 101, 0.6);
color: #ffffff;
opacity: 0;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
}
.avatar a:hover .mask { .avatar a:hover .mask {
opacity: 1; opacity: 1;
} }
.avatar a:hover .mask-notImg {
opacity: 1;
}
.username { .username {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;