user/info存储空间部分前端(1/2)
This commit is contained in:
parent
8b0599ba98
commit
179f482c76
GPG Key ID:
D7A9EC07024C3021
@ -1,13 +1,12 @@
|
|||||||
<?php
|
<?php
|
||||||
//这个页面仿照Windows 11设置中的账户页面设计
|
//这个页面仿照Windows 11设置中的账户页面设计
|
||||||
|
|
||||||
|
|
||||||
/* @var $this yii\web\View */
|
/* @var $this yii\web\View */
|
||||||
|
|
||||||
/* @var $model app\models\User */
|
/* @var $model app\models\User */
|
||||||
|
|
||||||
use app\assets\FontAwesomeAsset;
|
use app\assets\FontAwesomeAsset;
|
||||||
use app\utils\IPLocation;
|
use app\utils\IPLocation;
|
||||||
use yii\bootstrap5\ActiveForm;
|
|
||||||
use yii\bootstrap5\Html;
|
use yii\bootstrap5\Html;
|
||||||
|
|
||||||
$this->title = '个人设置';
|
$this->title = '个人设置';
|
||||||
@ -46,7 +45,7 @@ if (is_null($details)) {
|
|||||||
<i class="fa-solid fa-clipboard-user"></i>
|
<i class="fa-solid fa-clipboard-user"></i>
|
||||||
<div class="login-info-dv">
|
<div class="login-info-dv">
|
||||||
<p class="user-login-info-title">上次登录时间</p>
|
<p class="user-login-info-title">上次登录时间</p>
|
||||||
<p class="user-login-info-content"><?= Html::encode($model->last_login) ?></p>
|
<p class="user-login-info-content"><?= Html::encode($model->last_login . ' (CST)') ?></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-last-login-ip">
|
<div class="user-last-login-ip">
|
||||||
@ -55,26 +54,107 @@ if (is_null($details)) {
|
|||||||
<p class="user-login-info-title">上次登录IP</p>
|
<p class="user-login-info-title">上次登录IP</p>
|
||||||
<p class="user-login-info-content">
|
<p class="user-login-info-content">
|
||||||
<?= Html::encode($model->last_login_ip) ?>
|
<?= Html::encode($model->last_login_ip) ?>
|
||||||
(<?= Html::encode(($details === null) ? '' : ($details->bogon ? ('Bogon IP') : ($details->city . ', ' . $details->country))) ?>)
|
(<?= Html::encode(($details === null) ? '' : ($details->bogon ? ('Bogon IP') : ($details->city . ', ' . $details->country))) ?>
|
||||||
|
)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="accordion userAccordion" id="userAccordion">
|
||||||
<?php $form = ActiveForm::begin(); ?>
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingStorage">
|
||||||
<!-- --><?php //= $form->field($model, 'username')->textInput(['maxlength' => true]) ?>
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#collapseStorage" aria-expanded="true">
|
||||||
<!-- --><?php //= $form->field($model, 'password')->passwordInput(['maxlength' => true]) ?>
|
<span class="accordion-storage-content">
|
||||||
|
<span>
|
||||||
<?= $form->field($model, 'bio')->textarea(['rows' => 6]) ?>
|
<i class="fa-solid fa-hard-drive"></i>
|
||||||
|
<span>存储空间</span>
|
||||||
<div class="form-group">
|
</span>
|
||||||
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
|
<span style="margin-right: 20px">
|
||||||
|
N/A <!-- 这里是你的容量显示 -->
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseStorage" class="accordion-collapse collapse show">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<div class="storage-info">
|
||||||
|
<div class="storage-columns">
|
||||||
|
<div class="storage-usage" style="width: 27%">
|
||||||
|
<p>当前已使用容量</p>
|
||||||
|
<span style="font-weight: 600;font-size: 1.4rem;color: black;padding-left: 2px;">N/A GB</span>
|
||||||
|
<span style="font-size: 0.9rem;">/ N/A TB</span>
|
||||||
|
</div>
|
||||||
|
<div style="width: 47%">
|
||||||
|
<p>N/A% 已用</p>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar" role="progressbar"
|
||||||
|
style="width: 25%;background-color: rgb(52,131,250)" aria-valuenow="25"
|
||||||
|
aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
<div class="progress-bar" role="progressbar"
|
||||||
|
style="width: 25%;background-color: rgb(196,134,0)" aria-valuenow="25"
|
||||||
|
aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<div class="storage-legend" style="color: rgb(140,139,139)">
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-color" style="background-color: rgb(52,131,250);"></span>
|
||||||
|
<span>网盘已用空间</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-color" style="background-color: rgb(196,134,0);"></span>
|
||||||
|
<span>保险箱已用空间</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingBio">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#collapseBio">
|
||||||
|
<i class="fa-solid fa-address-card"></i>
|
||||||
|
<span>个人简介</span>
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseBio" class="accordion-collapse collapse">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<!-- 修改bio相关内容 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingPassword">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#collapsePassword">
|
||||||
|
<i class="fa-solid fa-key"></i>
|
||||||
|
<span>修改密码</span>
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapsePassword" class="accordion-collapse collapse">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<!-- 修改密码表单相关内容 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingAdvanced">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#collapseAdvanced">
|
||||||
|
<i class="fa-solid fa-flask"></i>
|
||||||
|
<span>高级选项</span>
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseAdvanced" class="accordion-collapse collapse">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<!-- 高级选项相关内容 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php ActiveForm::end(); ?>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -30,7 +30,7 @@
|
|||||||
.user-login-info {
|
.user-login-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 40%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-last-login i, .user-last-login-ip i {
|
.user-last-login i, .user-last-login-ip i {
|
||||||
@ -47,13 +47,105 @@
|
|||||||
.user-last-login p, .user-last-login-ip p {
|
.user-last-login p, .user-last-login-ip p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.login-info-dv{
|
|
||||||
|
.login-info-dv {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
.login-info-dv .user-login-info-title{
|
|
||||||
|
.login-info-dv .user-login-info-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.login-info-dv .user-login-info-content{
|
|
||||||
color: rgb(100,96,100);
|
.login-info-dv .user-login-info-content {
|
||||||
|
color: rgb(100, 96, 100);
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.accordion-item {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
|
||||||
|
border-radius: var(--bs-border-radius);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button {
|
||||||
|
padding: 24px 22px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button i {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-right: 18px;
|
||||||
|
width: 27px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button span, .accordion-button p {
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-storage-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-storage-content span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-body {
|
||||||
|
padding: 40px 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-columns {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-columns span, .storage-columns p {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgb(140, 139, 139);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-columns p {
|
||||||
|
margin-bottom: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
width: 100%;
|
||||||
|
/*margin-top: 10px;*/
|
||||||
|
border: 1px rgb(140, 139, 139) solid;
|
||||||
|
--bs-progress-bg: white !important;
|
||||||
|
--bs-progress-height: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-legend {
|
||||||
|
/*display: flex;*/
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color {
|
||||||
|
width: 6px;
|
||||||
|
height: 17px;
|
||||||
|
margin-right: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user