From 8a08c8378fc0ea01e81c5c06a53aa1bede87d74c Mon Sep 17 00:00:00 2001 From: guoju0808 Date: Wed, 26 Aug 2026 11:13:12 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=80=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D=20AdminLayout=20=E6=B1=89=E5=A0=A1?= =?UTF-8?q?=E6=8A=BD=E5=B1=89=20+=2067=20=E9=A1=B5=E9=80=9A=E7=94=A8?= =?UTF-8?q?=E8=A7=84=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ry-vue3/src/assets/main.scss | 135 ++++++++++++++ ry-vue3/src/components/PortalFooter.vue | 37 +++- ry-vue3/src/layout/AdminLayout.vue | 106 +++++++++++ ry-vue3/src/views/auth/Login.vue | 2 +- ry-vue3/src/views/portal/Home.vue | 237 +++++++++++++++++++++++- 5 files changed, 513 insertions(+), 4 deletions(-) diff --git a/ry-vue3/src/assets/main.scss b/ry-vue3/src/assets/main.scss index 0469631..060f8a4 100644 --- a/ry-vue3/src/assets/main.scss +++ b/ry-vue3/src/assets/main.scss @@ -266,4 +266,139 @@ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--el-text-color text-align: center; color: var(--el-text-color-secondary); font-size: 13px; +} + +/* ============================================= + 全局移动端适配 (≤768px) — 一次定义, 67 个页面生效 + - 列表页 (el-table / el-pagination / filter-form) + - 详情/编辑 (el-dialog / el-form) + - 业务页 (el-card / el-tabs / el-descriptions / el-table) + ============================================= */ +@media (max-width: 768px) { + /* —— filter-form 已在前面定义, 这里再覆盖一次以防页面局部 scoped 抢占 —— */ + .filter-form { + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form .el-form-item { + margin-right: 0 !important; + margin-bottom: 0 !important; + width: 100%; + } + .filter-form .el-input, + .filter-form .el-select, + .filter-form .el-date-editor, + .filter-form .el-cascader, + .filter-form > .el-button, + .filter-form > button { + width: 100% !important; + min-width: 0 !important; + } + .filter-form .filter-actions { + display: flex; + gap: 8px; + margin-top: 4px; + } + .filter-form .filter-actions .el-button { flex: 1; } + + /* —— el-pagination 移动端: 全宽, 紧凑 —— */ + .el-pagination { + flex-wrap: wrap; + justify-content: center; + gap: 8px; + padding: 12px 0 !important; + } + .el-pagination .el-pagination__sizes, + .el-pagination .el-pagination__jump { display: none !important; } + .el-pagination .el-pagination__total { font-size: 12px !important; } + .el-pagination .btn-prev, + .el-pagination .btn-next, + .el-pagination .el-pager li { min-width: 28px !important; height: 28px !important; line-height: 28px !important; font-size: 12px !important; } + + /* —— el-card 移动端: 减小内边距 —— */ + .el-card { + border-radius: 4px !important; + } + .el-card__header { + padding: 12px 14px !important; + } + .el-card__body { + padding: 14px !important; + } + + /* —— el-dialog 移动端: 全屏化 —— */ + .el-dialog { + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + border-radius: 0 !important; + position: fixed !important; + inset: 0 !important; + height: 100% !important; + max-height: 100% !important; + } + .el-dialog__header { + padding: 14px 16px !important; + } + .el-dialog__title { font-size: 15px !important; } + .el-dialog__body { + padding: 14px 16px !important; + max-height: calc(100vh - 110px) !important; + overflow-y: auto !important; + } + .el-dialog__footer { + padding: 12px 16px !important; + } + /* dialog 关闭按钮稍大, 便于手指点击 */ + .el-dialog__headerbtn { font-size: 18px !important; width: 32px !important; height: 32px !important; } + + /* —— el-form-item 移动端: label 上方对齐 —— */ + .el-form-item .el-form-item__label { + line-height: 1.5 !important; + padding-bottom: 4px !important; + } + .el-form.el-form--label-top .el-form-item__label { + padding: 0 0 4px !important; + } + + /* —— el-table 移动端: 字号收紧 + 滚动提示 —— */ + .el-table { + font-size: 12px !important; + } + .el-table th.el-table__cell { font-size: 12px !important; padding: 6px 4px !important; } + .el-table td.el-table__cell { padding: 6px 4px !important; } + + /* —— el-tabs 移动端: 滚动 + 字号 —— */ + .el-tabs__nav-wrap--scrollable .el-tabs__nav-scroll { padding: 0 4px !important; } + .el-tabs__item { padding: 0 12px !important; font-size: 13px !important; height: 36px !important; line-height: 36px !important; } + + /* —— el-descriptions 移动端: 单列堆叠 —— */ + .el-descriptions { + font-size: 13px !important; + } + .el-descriptions__label, + .el-descriptions__content { + padding: 10px 8px !important; + word-break: break-word; + } + .el-descriptions-item__label.is-cell { font-size: 12px !important; } + + /* —— el-page-header / 通用业务页 header —— */ + .app-page-header, + .page-header { + flex-direction: column !important; + align-items: flex-start !important; + gap: 8px !important; + padding: 12px 0 !important; + } + .app-page-header h2, + .page-header h2 { font-size: 17px !important; } + + /* —— 通用容器/卡片 padding 收紧 —— */ + .app-container, + .page-container { padding: 0 !important; } + + /* —— 操作列 el-link 仍行内不折行 —— */ + .table-actions { flex-wrap: nowrap !important; } } \ No newline at end of file diff --git a/ry-vue3/src/components/PortalFooter.vue b/ry-vue3/src/components/PortalFooter.vue index 202e625..ce1e651 100644 --- a/ry-vue3/src/components/PortalFooter.vue +++ b/ry-vue3/src/components/PortalFooter.vue @@ -12,13 +12,13 @@

依托"健康中国2030"战略,整合医学资源,推动健康科普与公益事业,助力全民健康素养提升,共建共享健康中国。

-
+

快速导航

年度项目规划 项目公示 北京整合医学学会首页
-
+

学会项目

百姓巡常行 健康中国行动 @@ -109,4 +109,37 @@ function goPublicity() { router.push('/publicity') } @media (max-width: 900px) { .container { padding: 0 24px; } } + +/* 手机端深度适配 */ +@media (max-width: 768px) { + .container { padding: 0 16px; } + .footer { padding: 32px 0 0; } + /* footer-main 改为单列, 隐藏"快速导航"和"学会项目" */ + .footer-main { + grid-template-columns: 1fr; + gap: 24px; + padding-bottom: 24px; + } + /* 桌面: 快速导航(2)/学会项目(3) 列, 移动端隐藏 */ + .footer-col.col-nav, + .footer-col.col-projects { display: none; } + /* 联系方式列保持在品牌区下 */ + .footer-brand .brand-row { margin-bottom: 12px; } + .footer-brand-name { font-size: 15px; } + .footer-brand-en { display: none; } + .footer-desc { font-size: 12px; line-height: 1.8; } + /* 二维码列居中, 宽度受限 */ + .footer-qr { display: flex; align-items: center; gap: 12px; justify-content: flex-start; } + .qr-image { width: 80px; height: 80px; } + .qr-label { margin-top: 0; font-size: 12px; } + /* 备案/版权底部: 垂直堆叠 */ + .footer-bottom { + flex-direction: column; + align-items: flex-start; + gap: 6px; + padding: 14px 0; + font-size: 11px; + line-height: 1.6; + } +} diff --git a/ry-vue3/src/layout/AdminLayout.vue b/ry-vue3/src/layout/AdminLayout.vue index 3f39e4f..72418ad 100644 --- a/ry-vue3/src/layout/AdminLayout.vue +++ b/ry-vue3/src/layout/AdminLayout.vue @@ -4,13 +4,24 @@ v-if="!route.meta?.hideMenu" width="220px" class="aside" + :class="{ 'aside-mobile-open': mobileAsideOpen }" > + +
+
+ + + + +
+ + + + +
@@ -97,6 +144,7 @@ const userStore = useUserStore() const isScrolled = ref(false) const specialPlans = ref([]) +const drawerOpen = ref(false) async function loadSpecialPlans() { try { @@ -183,13 +231,25 @@ function handleScroll() { onMounted(() => { window.addEventListener('scroll', handleScroll, { passive: true }) loadSpecialPlans() + // portal home 移动端适配: 解除 body min-width (避免手机端 1354px 横向滚动) + document.body.classList.add('home-page-body') +}) +onBeforeUnmount(() => { + window.removeEventListener('scroll', handleScroll) + document.body.classList.remove('home-page-body') }) -onBeforeUnmount(() => window.removeEventListener('scroll', handleScroll)) function onHome() { isScrolled.value = false } function goLogin() { router.push('/login') } function goUser() { /* placeholder */ } async function goLogout() { try { await logoutApi() } catch {}; userStore.logout(); router.replace('/login') } + +// 抽屉版导航: 跳转后关闭抽屉 +function goHomeAndClose() { drawerOpen.value = false; onHome() } +function goPublicityAndClose() { drawerOpen.value = false; goPublicity() } +function goLoginAndClose() { drawerOpen.value = false; goLogin() } +function goAccountAndClose() { drawerOpen.value = false; onUserCmd('account') } +async function goLogoutAndClose() { drawerOpen.value = false; await goLogout() } async function onUserCmd(cmd) { if (cmd === 'logout') return goLogout() if (cmd === 'account') { @@ -604,4 +664,179 @@ a { color: inherit; text-decoration: none; } text-decoration: none; } +/* ========== 移动端适配 ========== */ +@media (max-width: 768px) { + /* 解除 body 最小宽度 (桌面 1354px 在手机端会横向滚动) */ + body { min-width: 0 !important; } + + /* 顶栏: 高度收窄 + padding 减小 */ + .top-nav { height: 56px !important; padding: 0 16px !important; } + .logo-title { font-size: 14px !important; } + .logo-subtitle { display: none; } + /* 桌面 nav-list + 顶部 tools 隐藏, 改用汉堡 */ + .nav-list { display: none !important; } + .top-tools { display: none !important; } + .hamburger { display: inline-flex !important; } + + /* 主体容器 padding 收紧 */ + .container { padding: 0 16px !important; } + .specialty-inner { padding: 0 16px !important; } + + /* Hero: 垂直堆叠 + 高度自适应 + CTA 不再绝对定位 */ + .hero { + margin-top: 12px !important; + height: auto !important; + min-height: 220px !important; + padding: 24px 20px 20px !important; + flex-direction: column !important; + align-items: flex-start !important; + } + .hero-tag { margin-bottom: 10px !important; } + .hero-title { font-size: 24px !important; letter-spacing: 1px !important; } + .hero-subtitle { font-size: 13px !important; letter-spacing: 2px !important; margin-bottom: 14px !important; } + .hero-desc { font-size: 13px !important; line-height: 1.7 !important; padding-bottom: 16px !important; } + .hero-desc br { display: none; } + .hero-cta { + position: static !important; + transform: none !important; + flex-direction: row !important; + width: 100%; + margin-top: 8px; + } + .hero-cta .cta-btn { padding: 10px 28px !important; font-size: 13px !important; } + + /* 总述区 */ + .overview-section { padding: 32px 0 20px !important; } + .overview-text { padding: 18px 16px !important; font-size: 13px !important; } + .plan-image { padding: 16px !important; } + .section-title { font-size: 17px !important; margin-bottom: 16px !important; } + + /* 七大专项: 单列 */ + .specialty-section { padding: 32px 0 24px !important; } + .specialty-list { grid-template-columns: 1fr !important; gap: 12px !important; } + .specialty-no { width: 56px !important; font-size: 22px !important; } + .specialty-body { padding: 14px 16px !important; } + .specialty-title { font-size: 14px !important; } +} + +/* 汉堡按钮 (桌面隐藏, 手机显示) */ +.hamburger { + display: none; + align-items: center; + justify-content: center; + background: transparent; + border: none; + color: #fff; + padding: 8px; + cursor: pointer; + margin-left: auto; + border-radius: 4px; + transition: background 0.2s; +} +.hamburger:hover { background: rgba(255, 255, 255, 0.12); } +.hamburger:active { background: rgba(255, 255, 255, 0.2); } + +/* ========== 抽屉 (手机端) ========== */ +.drawer-mask { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.45); + z-index: 1999; +} +.drawer-panel { + position: fixed; + top: 0; + right: 0; + width: 260px; + max-width: 80vw; + height: 100vh; + background: #fff; + z-index: 2000; + box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15); + display: flex; + flex-direction: column; + overflow-y: auto; +} +.drawer-header { + display: flex; + align-items: center; + justify-content: space-between; + height: 56px; + padding: 0 16px 0 20px; + border-bottom: 1px solid var(--brand-slate-200); + flex-shrink: 0; +} +.drawer-title { + font-size: 15px; + font-weight: 600; + color: var(--el-text-color-primary); +} +.drawer-close { + background: transparent; + border: none; + color: var(--el-text-color-secondary); + cursor: pointer; + padding: 6px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s, color 0.2s; +} +.drawer-close:hover { background: var(--brand-slate-100); color: var(--el-text-color-primary); } + +.drawer-nav { display: flex; flex-direction: column; padding: 8px 0; } +.drawer-link { + display: block; + padding: 12px 20px; + font-size: 14px; + color: var(--el-text-color-primary); + cursor: pointer; + transition: background 0.15s, color 0.15s; + border-left: 3px solid transparent; +} +.drawer-link:hover { background: var(--brand-slate-50); } +.drawer-link.danger { color: var(--el-color-danger); } + +.drawer-divider { height: 1px; background: var(--brand-slate-200); margin: 4px 20px; } + +.drawer-tools { display: flex; flex-direction: column; padding: 8px 0; gap: 0; } +.drawer-user { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + font-size: 13px; + color: var(--el-text-color-secondary); + border-bottom: 1px solid var(--brand-slate-100); + margin-bottom: 4px; +} +.drawer-user svg { color: var(--brand-primary); } +.drawer-login { + display: block; + margin: 4px 20px; + padding: 10px 0; + text-align: center; + background: var(--brand-primary); + color: #fff; + font-size: 14px; + font-weight: 500; + cursor: pointer; + border-radius: 4px; + transition: opacity 0.2s; +} +.drawer-login:hover { opacity: 0.9; } + +/* 抽屉过渡 */ +.drawer-fade-enter-active, .drawer-fade-leave-active { transition: opacity 0.2s; } +.drawer-fade-enter-from, .drawer-fade-leave-to { opacity: 0; } +.drawer-slide-enter-active, .drawer-slide-leave-active { transition: transform 0.25s ease; } +.drawer-slide-enter-from, .drawer-slide-leave-to { transform: translateX(100%); } + + + +