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

实现个人设置页面(1/3)

Browse Source
This commit is contained in:
Chenx221 2024-03-01 18:04:44 +08:00
parent 95d66859aa
commit 7be1e3d07d
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
2 changed files with 140 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
views/user/info.php Normal file
View File

@ -0,0 +1,81 @@
<?php
/*
* 这个页面仿照Windows 11设置中的账户页面设计
*/
/* @var $this yii\web\View */
/* @var $model app\models\User */
use app\assets\FontAwesomeAsset;
use app\utils\IPLocation;
use yii\bootstrap5\ActiveForm;
use yii\bootstrap5\Html;
$this->title = '个人设置';
FontAwesomeAsset::register($this);
$this->registerCssFile('@web/css/user-info.css');
$details = IPLocation::getDetails($model->last_login_ip);
if (is_null($details)) {
echo '<script>console.log("IP位置信息获取失败")</script>';
}
?>
<div class="user-info">
<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="user-details">
<div class="user-info">
<p id="p-username"><?= Html::encode($model->username) ?></p>
<p><?= Html::encode($model->email) ?></p>
<p>
<?php
if ($model->role == 'user') {
echo '普通用户';
} elseif ($model->role == 'admin') {
echo '管理员';
} else {
echo Html::encode($model->role);
}
?>
</p>
</div>
<div class="user-login-info">
<div class="user-last-login">
<i class="fa-solid fa-clipboard-user"></i>
<div class="login-info-dv">
<p class="user-login-info-title">上次登录时间</p>
<p class="user-login-info-content"><?= Html::encode($model->last_login) ?></p>
</div>
</div>
<div class="user-last-login-ip">
<i class="fa-solid fa-location-dot"></i>
<div class="login-info-dv">
<p class="user-login-info-title">上次登录IP</p>
<p class="user-login-info-content">
<?= Html::encode($model->last_login_ip) ?>
(<?= Html::encode(($details === null) ? '' : ($details->bogon ? ('Bogon IP') : ($details->city . ', ' . $details->country))) ?>)
</p>
</div>
</div>
</div>
</div>
</div>
<?php $form = ActiveForm::begin(); ?>
<!-- --><?php //= $form->field($model, 'username')->textInput(['maxlength' => true]) ?>
<!-- --><?php //= $form->field($model, 'password')->passwordInput(['maxlength' => true]) ?>
<?= $form->field($model, 'bio')->textarea(['rows' => 6]) ?>
<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>

59
web/css/user-info.css Normal file
View File

@ -0,0 +1,59 @@
.user-profile {
display: flex;
flex-direction: row;
align-items: center; /* Add this line */
margin-top: 42px;
margin-bottom: 30px;
}
.user-details {
display: flex;
justify-content: space-between;
align-items: center; /* Add this line */
width: 100%; /* Take up the remaining width */
margin-left: 10px;
}
.user-details p {
margin-bottom: 0;
}
#p-username {
font-size: 1.25rem;
}
.user-details .user-info p {
font-size: 0.95rem;
line-height: 1.25;
}
.user-login-info {
display: flex;
justify-content: space-between;
width: 40%;
}
.user-last-login i, .user-last-login-ip i {
font-size: 1.5em;
margin-right: 10px;
}
.user-last-login, .user-last-login-ip {
display: flex;
align-items: center;
flex-direction: row;
}
.user-last-login p, .user-last-login-ip p {
margin: 0;
}
.login-info-dv{
margin-left: 5px;
}
.login-info-dv .user-login-info-title{
font-weight: bold;
}
.login-info-dv .user-login-info-content{
color: rgb(100,96,100);
font-size: 0.95rem;
}