实现前端头像覆盖层
This commit is contained in:
parent
220b1abff6
commit
9fa6c68240
@ -72,7 +72,12 @@ $darkMode = Yii::$app->user->identity->dark_mode;
|
||||
<h1><?= Html::encode($this->title) ?></h1>
|
||||
|
||||
<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-info">
|
||||
<p id="p-username"><?= Html::encode($model->username) ?></p>
|
||||
@ -163,8 +168,7 @@ $darkMode = Yii::$app->user->identity->dark_mode;
|
||||
<span class="legend-color" style="background-color: rgb(196,134,0);"></span>
|
||||
<span>保险箱已用空间</span>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -6,6 +6,40 @@
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
Loading…
Reference in New Issue
Block a user