liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台UI优化：统计区间改为右上角紧凑悬浮控件

Browse Source 
- 将基础模板中的统计区间从整行卡片改为右上角小胶囊控件\n- 保留原有 timeRange 与 loadData 功能，不影响统计页面交互\n- 新布局减少纵向占用，避免挤压主内容区
This commit is contained in:
liuwei
2026-04-16 16:50:18 +08:00
parent 6b07be6a33
commit 3b633b1b1d
1 changed files with 44 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
admin/dashboard/templates/base.html
View File

@@ -634,6 +634,40 @@
flex-wrap: wrap;
}
.time-range-float {
position: sticky;
top: 8px;
z-index: 80;
margin-left: auto;
margin-bottom: 10px;
width: fit-content;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(148, 163, 184, 0.16);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.time-range-float .el-select .el-input__inner {
height: 32px !important;
border-radius: 999px !important;
padding-left: 12px !important;
padding-right: 30px !important;
min-width: 110px;
font-size: 12px !important;
}
.time-range-float .el-button {
min-height: 32px !important;
padding: 0 10px !important;
border-radius: 999px !important;
}
.v-modal {
background: rgba(15, 23, 42, 0.16) !important;
backdrop-filter: blur(4px);
@@ -734,24 +768,16 @@
<div class="layout-shell">
<main class="content">
<div class="content-inner">
<el-row v-if="showTimeRangeSelector" :gutter="12" style="margin-bottom: 18px;">
<el-col :span="24">
<el-card class="toolbar-card">
<el-form :inline="true" size="small" class="time-filter-form">
<el-form-item label="统计区间" style="margin-bottom:0;">
<el-select v-model="timeRange" @change="loadData">
<el-option label="最近7天" value="7"></el-option>
<el-option label="最近30天" value="30"></el-option>
<el-option label="最近90天" value="90"></el-option>
</el-select>
</el-form-item>
<el-form-item style="margin-bottom:0;">
<el-button type="primary" @click="loadData">刷新数据</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
<div v-if="showTimeRangeSelector" class="time-range-float">
<el-select v-model="timeRange" size="mini" @change="loadData">
<el-option label="最近7天" value="7"></el-option>
<el-option label="最近30天" value="30"></el-option>
<el-option label="最近90天" value="90"></el-option>
</el-select>
<el-button size="mini" type="primary" plain @click="loadData">
<i class="el-icon-refresh"></i>
</el-button>
</div>
{% block content %}{% endblock %}
</div>