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

44
apps/admin/src/views/AgentManager.vue
View File

@@ -2173,8 +2173,8 @@ provide(agentPlayerActionsKey, {
.mgr-toolbar-actions {
position: absolute;
right: 0;
top: 0;
right: 16px;
top: 14px;
z-index: 2;
display: flex;
align-items: center;
@@ -2238,12 +2238,9 @@ provide(agentPlayerActionsKey, {
display: flex;
flex-direction: column;
}
.mgr-top-tabs :deep(.el-tabs__header) {
margin-bottom: 8px;
}
.mgr-top-tabs :deep(.el-tabs__item) {
font-size: 14px;
font-weight: 500;
font-weight: 700;
}
.freeze-agent-intro {
@@ -2258,19 +2255,7 @@ provide(agentPlayerActionsKey, {
gap: 10px;
}
/* ─── Table toolbar ─── */
.list-panel-toolbar {
flex-shrink: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 10px 0 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
--list-chrome-control-h: 32px;
--el-component-size: 32px;
}
/* ─── Table toolbar（间距见 App.vue 全局 .list-panel-toolbar） ─── */
.list-panel-toolbar .list-chrome__grow {
flex: 1 1 280px;
min-width: 0;
@@ -2280,19 +2265,6 @@ provide(agentPlayerActionsKey, {
.list-panel-toolbar .list-chrome__actions {
flex-shrink: 0;
}
.list-panel-toolbar :deep(.el-form-item) {
margin-bottom: 0 !important;
margin-right: 12px;
}
.list-panel-toolbar :deep(.el-input__wrapper),
.list-panel-toolbar :deep(.el-select__wrapper) {
height: var(--list-chrome-control-h) !important;
min-height: var(--list-chrome-control-h) !important;
}
.list-panel-toolbar :deep(.el-button:not(.is-link)) {
height: var(--list-chrome-control-h) !important;
min-height: var(--list-chrome-control-h) !important;
}
/* ─── Expansion ─── */
.expand-panel {
@@ -2526,14 +2498,6 @@ provide(agentPlayerActionsKey, {
gap: 8px;
}
.mgr-top-tabs :deep(.el-tabs__item) {
font-weight: 700;
}
.list-panel-toolbar {
border-bottom-color: var(--border-soft);
}
.expand-panel {
background: #fbfaf7;
border-color: var(--border);

12
apps/admin/src/views/Matches.vue
View File

@@ -719,13 +719,11 @@ function onLeagueArchived() {
margin-bottom: 16px;
}
/* 列表表格随内容增高，滚动交给外层 table-wrap（仅赛事行） */
.matches-page .table-wrap .el-table {
height: auto !important;
}
.matches-page .table-wrap :deep(.el-table__header),
.matches-page .table-wrap :deep(.el-table__body) {
width: 100% !important;
/* 联赛列表沿用 admin-list-page 内滚：表头固定、分页贴底 */
.matches-page .table-wrap :deep(.el-table__header-wrapper) {
position: sticky;
top: 0;
z-index: 2;
}
.list-panel :deep(.row-navigable) {

2
apps/admin/src/views/agent/AgentDirectPlayersView.vue
View File

@@ -211,7 +211,7 @@ onUnmounted(() => {
}
.agent-direct-players-page :deep(.admin-subnav) {
margin-bottom: 10px;
margin-bottom: 14px;
}
.agent-direct-players-page .list-panel {

9
apps/admin/src/views/matches/LeagueMatchesPage.vue
View File

@@ -192,12 +192,21 @@ watch(leagueId, () => {
min-height: 0;
}
.league-matches-page :deep(.admin-subnav) {
flex-shrink: 0;
margin-bottom: 14px;
}
.league-matches-page .list-panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: none;
background: transparent;
padding: 0;
box-shadow: none;
}
.team-country-select {

40
apps/admin/src/views/matches/LeagueMatchesPanel.vue
View File

@@ -466,7 +466,8 @@ defineExpose({ reload: load });
</div>
</div>
<el-table v-loading="loading" :data="matches" stripe row-key="id" class="nested-match-table">
<div class="nested-table-wrap">
<el-table v-loading="loading" :data="matches" stripe row-key="id" class="nested-match-table">
<el-table-column type="index" :index="(i: number) => (matchPage - 1) * matchPageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
<el-table-column :label="t('match.col.matchup')" min-width="180">
<template #default="{ row }">
@@ -579,8 +580,10 @@ defineExpose({ reload: load });
</div>
</template>
</el-table-column>
</el-table>
<p v-if="!loading && !matches.length" class="empty-hint">{{ t('match.no_fixtures') }}</p>
</el-table>
<p v-if="!loading && !matches.length" class="empty-hint">{{ t('match.no_fixtures') }}</p>
</div>
<div v-if="matchTotal > matchPageSize" class="nested-pager">
<el-pagination
v-model:current-page="matchPage"
@@ -633,21 +636,26 @@ defineExpose({ reload: load });
<style scoped>
.league-matches-panel {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
width: min(100%, calc(100vw - 272px));
max-width: calc(100vw - 272px);
padding: 10px 12px 12px;
overflow-x: auto;
overflow-y: visible;
padding: 14px 14px 14px;
overflow: hidden;
background: #fbfaf7;
}
.nested-panel-toolbar {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 10px 16px;
margin-bottom: 10px;
padding: 8px 12px;
margin: 2px 0 12px;
padding: 10px 14px;
background: #ffffff;
border: 1px solid var(--border-soft, #eaeaea);
border-radius: 6px;
@@ -677,10 +685,26 @@ defineExpose({ reload: load });
color: var(--text-muted);
white-space: nowrap;
}
.nested-table-wrap {
flex: 1;
min-height: 0;
overflow: auto;
border: 1px solid var(--border-soft, #eaeaea);
border-radius: 6px;
background: #ffffff;
}
.nested-table-wrap :deep(.el-table__header-wrapper) {
position: sticky;
top: 0;
z-index: 2;
background: var(--el-table-header-bg-color, #fafafa);
}
.nested-pager {
flex-shrink: 0;
display: flex;
justify-content: flex-end;
padding-top: 8px;
background: #fbfaf7;
}
.actions-col-header {
display: inline-flex;