chenx221/yii2-netdisk
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

实现前端头像覆盖层

Browse Source
This commit is contained in:
Chenx221 2024-03-08 17:06:56 +08:00
parent 220b1abff6
commit 9fa6c68240
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
2 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
views/user/info.php
View File

@ -72,7 +72,12 @@ $darkMode = Yii::$app->user->identity->dark_mode;
<h1><?= Html::encode($this->title) ?></h1> <h1><?= Html::encode($this->title) ?></h1>
<div class="user-profile"> <div class="user-profile">
<?= $model->getGravatar(email: $model->email, s: 100, img: true, atts: ['alt' => 'User Avatar', 'style' => 'border-radius: 50%']) ?> <div class="avatar-container">
<?= $model->getGravatar(email: $model->email, s: 100, img: true, atts: ['alt' => 'User Avatar', 'class' => 'avatar']) ?>
<div class="avatar-overlay">
<i class="fa-solid fa-pen-to-square"></i>
</div>
</div>
<div class="user-details"> <div class="user-details">
<div class="user-info"> <div class="user-info">
<p id="p-username"><?= Html::encode($model->username) ?></p> <p id="p-username"><?= Html::encode($model->username) ?></p>
@ -163,7 +168,6 @@ $darkMode = Yii::$app->user->identity->dark_mode;
<span class="legend-color" style="background-color: rgb(196,134,0);"></span> <span class="legend-color" style="background-color: rgb(196,134,0);"></span>
<span>保险箱已用空间</span> <span>保险箱已用空间</span>
<span style="margin-left: auto;"><?= $vaultUsedSpace_F ?> <span style="margin-left: auto;"><?= $vaultUsedSpace_F ?>
<!-- PENDING-->
<?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['site/index']) ?> <?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['site/index']) ?>
</span> </span>
</div> </div>

34
web/css/user-info.css
View File

@ -6,6 +6,40 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
.avatar-container {
position: relative;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.avatar-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.125);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 50%;
}
.avatar-overlay i {
color: white;
font-size: 2em;
}
.avatar-container:hover .avatar-overlay {
opacity: 1;
}
.user-details { .user-details {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;