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