mirror of
https://github.com/kuaifan/dootask.git
synced 2026-03-17 11:13:26 +00:00
feat: 使用用户头像作为封面背景
在用户详情弹窗的顶部封面区域,使用用户头像作为模糊背景, 提升视觉效果和个性化体验。 - 将用户头像通过 CSS 变量传递给封面区域 - 添加背景模糊滤镜和缩放效果 - 修复容器溢出问题
This commit is contained in:
parent
6bdefc4f03
commit
395fc155ce
@ -9,7 +9,7 @@
|
|||||||
>
|
>
|
||||||
<div class="user-detail-body">
|
<div class="user-detail-body">
|
||||||
<div class="profile-header">
|
<div class="profile-header">
|
||||||
<div class="cover-photo"></div>
|
<div class="cover-photo" :style="{ '--user-cover-photo': `url(${userData.userimg || ''})` }"></div>
|
||||||
<div class="profile-avatar">
|
<div class="profile-avatar">
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
:userid="userData.userid"
|
:userid="userData.userid"
|
||||||
|
|||||||
@ -23,16 +23,22 @@
|
|||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.user-detail-body {
|
.user-detail-body {
|
||||||
.profile-header {
|
.profile-header {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
.cover-photo {
|
.cover-photo {
|
||||||
background: $primary-color;
|
|
||||||
height: 130px;
|
height: 130px;
|
||||||
border-top-left-radius: 16px;
|
border-top-left-radius: 16px;
|
||||||
border-top-right-radius: 16px;
|
border-top-right-radius: 16px;
|
||||||
|
background: $primary-color;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
transform: scale(1.5, 1.1);
|
||||||
|
background-image: var(--user-cover-photo, 'none');
|
||||||
|
filter: blur(40px);
|
||||||
}
|
}
|
||||||
.profile-avatar {
|
.profile-avatar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user