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

View File

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