From 8b6a0b4e274e187a130bb45e954acedf58ca3cce Mon Sep 17 00:00:00 2001 From: guoju0808 Date: Wed, 26 Aug 2026 11:47:04 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Publicity=20=E5=85=AC=E7=A4=BA=E9=A1=B5?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D=20(=E9=A1=B6?= =?UTF-8?q?=E6=A0=8F=E7=B4=A7=E5=87=91=20+=20nav=20=E6=A8=AA=E6=BB=9A=20+?= =?UTF-8?q?=20=E5=88=97=E8=A1=A8=E5=8D=A1=E7=89=87=E5=8C=96)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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, 自动响应) --- ry-vue3/src/views/portal/Publicity.vue | 58 ++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/ry-vue3/src/views/portal/Publicity.vue b/ry-vue3/src/views/portal/Publicity.vue index 47116aa..3b09844 100644 --- a/ry-vue3/src/views/portal/Publicity.vue +++ b/ry-vue3/src/views/portal/Publicity.vue @@ -694,4 +694,62 @@ main.container { 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; } +}