fix(web/route): 解决移动端列表与空状态卡片重叠问题

1. 修复移动端下由于 .management-sidebar 高度受限导致内容溢出、与下方主面板重叠的布局 bug。
2. 将 .management-sidebar 高度锁定在最大 40vh 并限制内部 .card 溢出,同时保持线路列表自身的内部滚动,优化了上下排布时的展示效果。
3. 当移动端未选中任何线路时,直接隐藏掉右侧面板(.management-main.is-empty),避免多余的“选择左侧线路”空状态卡片挤占宝贵的手机屏幕空间。
4. 修复了桌面端误显移动端专属提示文本的问题。
This commit is contained in:
2026-08-07 23:41:47 +08:00
parent 6605c67f23
commit 0a37c0cba2
2 changed files with 23 additions and 5 deletions
+19 -2
View File
@@ -477,6 +477,9 @@ tr:hover td {
.mobile-only {
display: none;
}
.mobile-only-inline {
display: none;
}
@media (max-width: 980px) {
:root { --sidebar-width: 260px; }
@@ -4749,11 +4752,25 @@ body.jr-admin-login-page {
}
.jr-admin-route-page .management-sidebar {
width: 100%;
max-height: 380px;
height: 380px;
max-height: 40vh;
}
.jr-admin-route-page .management-sidebar .card {
height: 100%;
overflow: hidden;
}
.jr-admin-route-page .management-main {
overflow: visible;
min-height: 400px;
min-height: auto;
}
.jr-admin-route-page .management-main.is-empty {
display: none !important;
}
.desktop-only {
display: none !important;
}
.mobile-only-inline {
display: inline-block !important;
}
.jr-admin-route-page .editor-toolbar {
+4 -3
View File
@@ -8,7 +8,7 @@
<title>线路规划|FSE铁路运输票务系统</title>
<link rel="icon" type="image/png" href="/FSE-ticket.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/style.css?v=16">
<link rel="stylesheet" href="/style.css?v=17">
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
@@ -159,7 +159,7 @@
</div>
</div>
<!--右侧面板-->
<div class="management-main">
<div class="management-main" :class="{'is-empty': !selectedLine}">
<div class="card mb-4">
<div class="flex between">
<div v-if="selectedLine">
@@ -174,7 +174,8 @@
</div>
</div>
<div v-else>
<h4>选择左侧线路进行管理</h4>
<h4 class="desktop-only">选择左侧线路进行管理</h4>
<h4 class="mobile-only-inline">请选择上方线路进行管理</h4>
</div>
<div class="flex">