feat: 使用用户头像作为封面背景

在用户详情弹窗的顶部封面区域,使用用户头像作为模糊背景,
提升视觉效果和个性化体验。

- 将用户头像通过 CSS 变量传递给封面区域
- 添加背景模糊滤镜和缩放效果
- 修复容器溢出问题
This commit is contained in:
kuaifan 2026-01-07 03:11:21 +00:00
parent 6bdefc4f03
commit 395fc155ce
2 changed files with 8 additions and 2 deletions

View File

@ -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"

View File

@ -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;