fix(web/route): 解决移动端列表与空状态卡片重叠问题
1. 修复移动端下由于 .management-sidebar 高度受限导致内容溢出、与下方主面板重叠的布局 bug。 2. 将 .management-sidebar 高度锁定在最大 40vh 并限制内部 .card 溢出,同时保持线路列表自身的内部滚动,优化了上下排布时的展示效果。 3. 当移动端未选中任何线路时,直接隐藏掉右侧面板(.management-main.is-empty),避免多余的“选择左侧线路”空状态卡片挤占宝贵的手机屏幕空间。 4. 修复了桌面端误显移动端专属提示文本的问题。
This commit is contained in:
+19
-2
@@ -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 {
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user