/* 移动端适配补丁 v1.0 —— 独立于 style.bundle.css，加载在其之后 */ /* 站点：www.szcntop.cn 模板：template/pc/default */ /* PC 端隐藏所有移动端专属元素 */ .ep-m-toggle, .ep-m-drawer, .ep-m-mask { display: none; } @media (max-width: 991px) { /* ========== 全局：禁止横向溢出 ========== 先 hidden 再 clip：支持 clip 的浏览器用 clip（不创建滚动容器， 因此不会让 .ep-header 的 position:sticky 失效），老浏览器退回 hidden */ html, body { overflow-x: hidden; overflow-x: clip; } .ep-container, .ep-header-inner, .ep-footer-inner { padding-left: 12px; padding-right: 12px; } /* ========== 头部 ========== */ .ep-header-inner { gap: 10px; } .ep-logo img { height: 30px; } .ep-header-actions { gap: 2px; } /* 汉堡按钮 */ .ep-m-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; background: transparent; color: var(--el-text-color-primary); font-size: 19px; line-height: 1; cursor: pointer; border-radius: var(--el-border-radius-base); flex-shrink: 0; } .ep-m-toggle:active { background: var(--el-fill-color-light); } .ep-search-toggle { padding: 10px; font-size: 17px; } /* 搜索浮层：窄屏改为贴近右缘、限宽不溢出 */ .ep-search-panel { width: calc(100vw - 32px); max-width: 320px; right: -8px; } /* ========== 左侧抽屉菜单 ========== */ .ep-m-drawer { display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; width: 80%; max-width: 300px; background: #fff; box-shadow: 2px 0 14px rgba(0, 0, 0, 0.14); transform: translateX(-101%); transition: transform 0.26s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ep-m-drawer.is-open { transform: translateX(0); } .ep-m-mask { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0, 0, 0, 0.42); opacity: 0; visibility: hidden; transition: opacity 0.26s ease, visibility 0.26s ease; } .ep-m-mask.is-open { opacity: 1; visibility: visible; } .ep-m-drawer-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--el-border-color-lighter); font-size: 16px; font-weight: 600; color: var(--el-text-color-primary); } .ep-m-drawer-close { border: none; background: transparent; font-size: 20px; line-height: 1; color: var(--el-text-color-secondary); cursor: pointer; padding: 4px 6px; } .ep-m-drawer-search { padding: 14px 18px 6px; } .ep-m-drawer-search input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; font-size: 14px; border: 1px solid var(--el-border-color); border-radius: var(--el-border-radius-base); background: var(--el-fill-color-blank); color: var(--el-text-color-regular); -webkit-appearance: none; } .ep-m-drawer-search input::placeholder { color: var(--el-text-color-placeholder); } .ep-m-nav-list { list-style: none; margin: 8px 0 0; padding: 0 0 12px; } .ep-m-nav-list li { border-bottom: 1px solid var(--el-border-color-lighter); } .ep-m-nav-list li:last-child { border-bottom: none; } .ep-m-nav-list a { display: block; padding: 14px 18px; font-size: 15px; color: var(--el-text-color-regular); text-decoration: none; } .ep-m-nav-list a:active { background: var(--el-fill-color-light); } .ep-m-nav-list li.is-active > a { color: var(--el-color-primary); font-weight: 600; background: var(--el-color-primary-light-9); } .ep-m-drawer-ft { padding: 14px 18px 24px; font-size: 12px; line-height: 1.9; color: var(--el-text-color-secondary); border-top: 1px solid var(--el-border-color-lighter); } .ep-m-drawer-ft a { color: var(--el-text-color-secondary); text-decoration: none; } /* ========== 主体间距 ========== */ .ep-main { padding: 14px 0 28px; } .ep-row { gap: 16px; } .ep-col-side { min-width: 0; } .el-card { margin-bottom: 16px; } /* 卡片内边距手机上收窄，否则左右各 20px 会把内容挤成中间一条 */ .el-card__body { padding: 14px; } .el-card__header { padding: 12px 14px; } .ep-breadcrumb { font-size: 13px; margin-bottom: 12px; } /* ========== 正文 ========== */ .neirong { font-size: 16px; line-height: 1.85; } .neirong img { max-width: 100% !important; height: auto !important; } .neirong h2 { font-size: 18px; line-height: 1.5; margin: 26px 0 12px; } .neirong h3 { font-size: 16px; line-height: 1.5; margin: 22px 0 10px; } .neirong p { margin: 0 0 14px; } .neirong ul, .neirong ol { padding-left: 22px; } .neirong li { margin-bottom: 8px; } /* 宽表格与代码块改成横向滑动，不再撑破屏幕 */ .neirong table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .neirong pre, .neirong code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } /* 内联 style 写死宽高的图片一律压回自适应 */ .neirong img[width], .neirong img[style] { width: auto; max-width: 100%; } /* ========== 详情页 ========== */ .ep-show-card-body { padding: 16px; } .ep-show-title { font-size: 19px; line-height: 1.45; margin-bottom: 12px; } .ep-show-meta { gap: 10px; font-size: 12px; margin-bottom: 16px; } .ep-show-prevnext-wrap { margin-top: 20px; padding-top: 16px; } /* 相关内容：PC 三列，手机上两列 */ .ep-show-related-grid { gap: 12px; } .ep-show-related-col { flex: 1 1 calc(50% - 6px); min-width: 0; } .ep-related-cover { height: 96px; } .ep-related-desc { display: none; } /* ========== 单页（关于我们） ========== */ .ep-page-body { padding: 18px 16px; } .ep-page-title { font-size: 21px; margin-bottom: 18px; } /* ========== 列表 / 侧栏缩略图 ========== 重要：绝不能写裸 .ep-thumb / img.ep-thumb！ - 列表大图（.ep-thumb）都带 mobile-hidden，≤576px 由原 CSS 隐藏，无需管 - 置顶推荐 / 热门资讯 / 相关内容用的是 .ep-thumb--sm（72x48） 原 CSS ≤576px 有一条 .ep-thumb{width:100%;height:160px} 会连同 --sm 一起撑爆， 所以这里必须用 --sm 精确选择器把它压回小图 */ .ep-thumb--sm, img.ep-thumb--sm { width: 88px; height: 60px; flex-shrink: 0; } /* 置顶推荐行：index.html 里有内联