feat: Publicity 公示页移动端适配 (顶栏紧凑 + nav 横滚 + 列表卡片化)
Publicity.vue 是公共项目公示页, 有完整桌面布局 (1354px min-width, 72px 顶栏, 60px padding, 36px nav 间距), 手机端需要专门的 media query 才能正常显示: ≤768px: - body min-width: 0 (解除桌面 1354 强制) - 顶栏 72→56px, padding 60→12px - logo 36→30px, title 16→14px - nav-list 横向滚动 + gap 36→16px - 顶栏用户区紧凑 (font 15→13px) - container padding 收窄 (16/12) - filter-bar 单列, filter-input 全宽 - 列表项 padding 12px, 字号适配 - 弹窗 width 100vw 全屏化 不影响桌面: 所有规则都在 @media (max-width: 768px) 内 不需要适配的页面 (已 mobile-friendly): - App.vue / PortalLayout.vue (纯容器) - views/doctor/SignContract.vue (mobile-first 设计, 固定底栏) - components/* (11 个组件用 flex + min-width:0, 自动响应)
This commit is contained in:
@@ -694,4 +694,62 @@ main.container {
|
|||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
移动端适配 (≤768px) — 不影响桌面
|
||||||
|
- 取消 body 1354px 最小宽度
|
||||||
|
- 顶栏 72→56px, padding 60→12
|
||||||
|
- nav-list 横向滚动
|
||||||
|
- 内容区单列
|
||||||
|
- 列表卡片化
|
||||||
|
======================================== */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body { min-width: 0 !important; }
|
||||||
|
|
||||||
|
/* 顶栏紧凑 */
|
||||||
|
.top-nav {
|
||||||
|
height: 56px !important;
|
||||||
|
padding: 0 12px !important;
|
||||||
|
}
|
||||||
|
.logo-icon { width: 30px !important; height: 30px !important; }
|
||||||
|
.logo-title { font-size: 14px !important; }
|
||||||
|
.logo-subtitle { font-size: 10px !important; }
|
||||||
|
|
||||||
|
/* nav-list 横向滚动 (避免 2 项就溢出) */
|
||||||
|
.nav-list {
|
||||||
|
gap: 16px !important;
|
||||||
|
margin-left: 12px !important;
|
||||||
|
flex: 1 !important;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
.nav-item { height: 56px !important; }
|
||||||
|
.nav-link { font-size: 13px !important; white-space: nowrap; }
|
||||||
|
|
||||||
|
/* 顶部工具区 */
|
||||||
|
.top-tools { font-size: 13px !important; }
|
||||||
|
.top-tools .login-btn,
|
||||||
|
.top-tools .user-link { font-size: 13px !important; padding: 4px 8px !important; }
|
||||||
|
|
||||||
|
/* 页面容器 padding 收窄 */
|
||||||
|
.container { padding: 16px 12px !important; }
|
||||||
|
.page-header { margin-bottom: 16px !important; }
|
||||||
|
.section-title { font-size: 18px !important; }
|
||||||
|
.section-subtitle { font-size: 13px !important; }
|
||||||
|
|
||||||
|
/* 筛选条单列 */
|
||||||
|
.filter-bar { flex-direction: column !important; gap: 8px !important; }
|
||||||
|
.filter-input { width: 100% !important; font-size: 14px !important; }
|
||||||
|
.filter-select-wrap { width: 100% !important; }
|
||||||
|
.filter-select { width: 100% !important; }
|
||||||
|
|
||||||
|
/* 列表项卡片化 */
|
||||||
|
.list-card { padding: 12px !important; }
|
||||||
|
.list-card-title { font-size: 15px !important; }
|
||||||
|
.list-card-meta { font-size: 12px !important; gap: 8px !important; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
/* 弹窗全屏 */
|
||||||
|
.pub-detail-dialog { width: 100vw !important; max-width: 100vw !important; }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user