ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): 优化列表布局间距、滚动固定与侧栏子路由选中

Browse Source 
统一嵌套卡片内边距与 Tabs 外壳样式，联赛单场支持表头/分页固定滚动；子页面下代理玩家菜单保持高亮。
This commit is contained in:
Mars
2026-06-22 16:48:40 +08:00
parent 78b426a388
commit b9257cc50a
7 changed files with 149 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
apps/admin/src/App.vue
View File

@@ -65,7 +65,7 @@ body::-webkit-scrollbar {
height: 100%;
min-height: 0;
overflow: hidden;
gap: 14px;
gap: 18px;
}
.admin-list-page > .page-toolbar,
.admin-list-page > .filter-card,
@@ -244,7 +244,48 @@ body::-webkit-scrollbar {
.admin-list-page > .list-panel {
border: 1px solid var(--border);
background: var(--bg-card);
padding: 0 10px 10px;
padding: 14px 16px 16px;
}
/* Tabs / 筛选壳内的 list-panel 不再套第二层卡片，避免顶边重叠 */
.admin-list-page > .mgr-tabs-shell .list-panel,
.admin-list-page .el-tab-pane > .list-panel,
.list-chrome > .list-panel {
border: none;
box-shadow: none;
background: transparent;
padding: 0;
border-radius: 0;
overflow: visible;
}
/* 代理管理等 Tabs 页：外层壳作为唯一卡片 */
.admin-list-page > .mgr-tabs-shell {
flex: 1;
min-height: 0;
border: 1px solid var(--border);
border-radius: 10px;
background: #ffffff;
box-shadow: var(--shadow);
padding: 14px 16px 16px;
}
.admin-list-page > .mgr-tabs-shell .mgr-top-tabs .el-tabs__header {
margin-bottom: 14px;
}
.admin-list-page > .filter-card .el-card__body {
padding: 16px 18px 18px;
}
.admin-list-page > .filter-card .el-tabs__header {
margin-bottom: 14px;
}
.list-chrome__row + .list-hint {
margin-top: 2px;
padding-top: 4px;
padding-bottom: 0;
}
.admin-list-page > .data-card .el-card__body {
flex: 1;
@@ -285,10 +326,43 @@ body::-webkit-scrollbar {
.admin-list-page .list-hint {
flex-shrink: 0;
margin: 0;
padding: 6px 0 8px;
padding: 4px 0 12px;
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
line-height: 1.45;
}
.admin-list-page .list-panel-toolbar + .list-hint {
padding-top: 0;
margin-top: -2px;
}
.admin-list-page .list-panel-toolbar {
flex-shrink: 0;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 2px 0 14px;
margin-bottom: 2px;
border-bottom: 1px solid var(--border-soft);
--list-chrome-control-h: 32px;
--el-component-size: 32px;
}
.admin-list-page .list-panel-toolbar :deep(.el-form-item) {
margin-bottom: 0 !important;
margin-right: 12px;
}
.admin-list-page .list-panel-toolbar :deep(.el-input__wrapper),
.admin-list-page .list-panel-toolbar :deep(.el-select__wrapper) {
height: var(--list-chrome-control-h) !important;
min-height: var(--list-chrome-control-h) !important;
}
.admin-list-page .list-panel-toolbar :deep(.el-button:not(.is-link)) {
height: var(--list-chrome-control-h) !important;
min-height: var(--list-chrome-control-h) !important;
}
.admin-list-page .pager {
flex-shrink: 0;
@@ -1250,7 +1324,7 @@ input:-webkit-autofill:focus {
.admin-list-page {
display: flex;
flex-direction: column;
gap: 16px;
gap: 18px;
color: var(--text);
}
@@ -1281,8 +1355,11 @@ input:-webkit-autofill:focus {
.list-toolbar + .table-wrap,
.filter-bar + .table-wrap,
.filters + .table-wrap,
.list-panel-toolbar + .table-wrap {
margin-top: 2px;
.list-panel-toolbar + .table-wrap,
.list-panel-toolbar + .admin-table-wrap,
.list-hint + .table-wrap,
.list-hint + .admin-table-wrap {
margin-top: 0;
}
.table-wrap,
@@ -1301,8 +1378,9 @@ input:-webkit-autofill:focus {
.list-chrome > .admin-table-wrap,
.list-chrome > .table-panel,
.list-chrome > .list-panel {
border-color: var(--border-soft);
border: none;
box-shadow: none;
background: transparent;
}
.table-scroll,