/* ========================================================= mobile.css · 移动端适配层 --------------------------------------------------------- 为什么单独一层：workspace.css 已经是 128KB 的多轮主题叠加，同一个 .sidebar 在里面被 !important 重写了七八次。直接改它等于在每一层都改一遍，改漏一处就前功尽弃。所以移动端规则收在这一个文件里、最后加载，只用一个 .yp-m 前缀提权覆盖。 .yp-m 由 js/mobile.js 在 head 里同步打到上（不等 DOMContentLoaded，避免抽屉先展开再收起的闪烁）。选择器 `.yp-m body .sidebar` 特异度 (0,2,2)，压得住 workspace.css 里最高的 `.workspace-page .sidebar` (0,2,0)。断点沿用站内既有的 880 / 640 / 420，不再新造一套。 ========================================================= */ /* --------------------------------------------------------- 0. 全局：不分屏幕宽度都该有的基础卫生 --------------------------------------------------------- */ /* 横向永不出滚动条。移动端最刺眼的问题就是页面能左右拽动，一拽内容就跑偏。这里必须是 clip 而不是 hidden：hidden 会把元素变成滚动容器，于是 .topbar 的 position:sticky 改为相对 body 的滚动盒吸附，而真正滚动的是 html —— 结果顶栏完全不吸附，跟着内容滚没了（实测 scrollTop=2600 时顶栏 top=-2592）。clip 只裁剪、不建滚动容器，sticky 照常工作。 clip 需要 Chrome 90+ / Safari 16+；更老的浏览器退化成不裁剪，但下面各断点已经把溢出源（4 列指数条、宽表格）逐个消掉了，实测文档宽度正好等于视口宽度，退化后也不会真的出横向滚动。 */ html.yp-m, html.yp-m body { max-width: 100%; overflow-x: clip; } /* iOS Safari 在 font-size < 16px 的输入框获得焦点时会自动放大整页，放大后不会自动还原，用户得手动双指缩回去——这是移动端体验被骂得最多的一条。所有输入控件兜底 16px。为什么要把 .yp-m 重复四遍：站内把控件字号压到 12px 的规则藏在很深的选择器里，例如 site-tech.css 的 .workspace-feature-board .cycle-wrap .control-row .field input 特异度 (0,4,1) 且 !important。普通写法 `html.yp-m input` 只有 (0,1,2)，压不住——实测龙头周期页 4 个筛选控件仍是 12px。重复类名是提特异度最直接的手段（(0,4,2) 刚好高一档），比把每个深选择器都抄一遍再维护要可靠。 */ @media (max-width: 880px) { html.yp-m.yp-m.yp-m.yp-m input, html.yp-m.yp-m.yp-m.yp-m select, html.yp-m.yp-m.yp-m.yp-m textarea { font-size: 16px !important; } } /* 汉堡按钮和抽屉里那份「套餐/支持/联系」副本是 mobile.js 无条件注入的（DOM 只建一次，不随视口变化重建），它们的样式又都写在 ≤880px 的媒体查询里。桌面宽度下没有样式≠不渲染：按钮会变成 topbar 左上角一个空白方块，副本链接会多挂在侧边栏底部。这里显式收掉。 */ @media (min-width: 881px) { .yp-drawer-btn, .yp-drawer-scrim, .yp-drawer-links { display: none !important; } } /* 点击时的灰色高亮块在深色卡片上非常脏，统一关掉，交互反馈交给各自的 :active 样式。 */ html.yp-m a, html.yp-m button, html.yp-m [role="button"], html.yp-m .sub-tab, html.yp-m .side-item { -webkit-tap-highlight-color: transparent; } /* --------------------------------------------------------- 1. ≤880px：侧边栏改成侧滑抽屉 --------------------------------------------------------- 原方案是把 sidebar 压成顶部横向条（repeat(5,...) 装 6 个功能，于是第 6 个换行 + 横向溢出）。实测 iPhone 375×812 上 sidebar 215px + topbar 73px + subnav 51px = 339px， 42% 的首屏在放导航。抽屉化后这块降到 ~100px。 --------------------------------------------------------- */ @media (max-width: 880px) { /* 880 断点原本把 .layout 改成 column 让 sidebar 顶到上面，抽屉方案里 sidebar 脱离文档流，恢复 row 即可。 */ .yp-m body .layout { display: block !important; min-height: 100vh; } .yp-m body .sidebar { position: fixed !important; z-index: 1001; top: 0; bottom: 0; left: 0; display: flex !important; width: min(80vw, 300px) !important; min-height: 0 !important; max-height: 100vh; flex-direction: column !important; padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)) !important; overflow-y: auto; border-right: 1px solid var(--ui-border, #ccd9e8) !important; border-bottom: 0 !important; box-shadow: 0 0 40px rgba(10, 37, 64, 0.18) !important; transform: translateX(-101%); transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .yp-m.yp-drawer-open body .sidebar { transform: translateX(0); } /* 抽屉打开时锁住背景滚动，否则手指划到抽屉边缘会带着底层页面一起滚，松手后位置全乱。锁必须下在上：真正的滚动容器是它，只给 body 加 overflow:hidden 页面照样能滚。 */ .yp-m.yp-drawer-open, .yp-m.yp-drawer-open body { overflow: hidden !important; } .yp-drawer-scrim { position: fixed; z-index: 1000; inset: 0; background: rgba(8, 25, 45, 0.44); opacity: 0; pointer-events: none; transition: opacity 0.26s ease; backdrop-filter: blur(2px); } .yp-m.yp-drawer-open .yp-drawer-scrim { opacity: 1; pointer-events: auto; } /* 抽屉里恢复纵向列表：880 断点原本为横向条隐藏了这些。 */ .yp-m body .side-nav { display: flex !important; grid-template-columns: none !important; flex-direction: column !important; gap: 4px !important; overflow: visible !important; } .yp-m body .side-label, .yp-m body .side-foot { display: block !important; } .yp-m body .side-item { width: 100% !important; min-height: 52px !important; justify-content: flex-start !important; padding: 10px 12px !important; border-radius: 12px !important; } .yp-m body .side-item .si-tx { display: flex !important; flex-direction: column; overflow: hidden; white-space: normal !important; font-size: 15px !important; line-height: 1.35 !important; } /* 功能描述在窄抽屉里放出来，比只剩标题更好认（原 880 规则把它隐藏了）。 */ .yp-m body .side-item .si-tx small { display: block !important; overflow: hidden; font-size: 11.5px !important; line-height: 1.4 !important; opacity: 0.7; text-overflow: ellipsis; white-space: nowrap; } .yp-m body .sidebar .brand { margin-bottom: 12px !important; padding-bottom: 12px !important; } /* 套餐 / 支持 / 联系：topbar 上放不下，由 mobile.js 搬进抽屉底部。 */ .yp-drawer-links { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ui-border, #ccd9e8); } .yp-drawer-links a { display: flex; min-height: 44px; align-items: center; padding: 0 12px; border-radius: 10px; color: inherit; font-size: 14.5px; font-weight: 600; opacity: 0.82; text-decoration: none; } .yp-drawer-links a:active { background: rgba(43, 102, 246, 0.09); } /* ------- 顶栏：一行放下汉堡 / 标题 / 账户 ------- */ /* 注意 flex-direction 必须显式写死：workspace.css 里 `.workspace-page .main-area > .topbar` 在 ≤640 把顶栏改成了 column（标题一行、账户一行），只覆盖 align-items 不够，汉堡/标题/账户会竖着排三行占掉 139px。 */ .yp-m body .main-area .topbar, .yp-m body .main-area > .topbar { position: sticky !important; z-index: 900; /* 必须 !important：workspace.css 给吸附顶栏留了 8px 的浮起间隙，通栏之后这 8px 会变成一条能看见正文滚过去的缝。 */ top: 0 !important; display: flex !important; min-height: 0 !important; flex-direction: row !important; align-items: center !important; padding: 8px 12px !important; padding-top: calc(8px + env(safe-area-inset-top)) !important; flex-wrap: nowrap !important; gap: 10px !important; /* 桌面版顶栏是块浮起的卡片（width: min(1100px, 100% - 40px)、 margin: 18px auto、圆角）。吸附之后卡片两侧和上方会露出正在滚动的正文，像有东西从缝里漏过去。移动端改成通栏贴边。 */ width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; } .yp-m body .page-title { display: block !important; overflow: hidden; min-width: 0; flex: 1 1 auto; font-size: 15px !important; text-overflow: ellipsis; white-space: nowrap; } /* AI REVIEW / MARKET DATA 这类 eyebrow 徽标在窄屏挤掉真标题，信息量又低于标题本身，移动端直接不展示。 */ .yp-m body .page-title::before { display: none !important; content: none !important; } .yp-m body .topbar nav { display: flex !important; width: auto !important; flex: 0 0 auto !important; align-items: center; overflow: visible !important; } /* 这三个二级入口已搬进抽屉，顶栏只留账户区。 */ .yp-m body .topbar-primary, .yp-m body .topbar-divider { display: none !important; } .yp-m body .topbar-account { display: flex !important; align-items: center; gap: 8px; } .yp-m body .topbar-account a { padding: 7px 12px !important; font-size: 13px !important; white-space: nowrap; } /* 汉堡按钮 */ .yp-drawer-btn { display: inline-flex; width: 38px; height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ui-border, #ccd9e8); border-radius: 11px; background: rgba(255, 255, 255, 0.7); color: inherit; cursor: pointer; } .yp-drawer-btn:active { background: rgba(43, 102, 246, 0.1); } .yp-drawer-btn svg { width: 19px; height: 19px; } /* ------- 子页签：不换行、可横滑、不露滚动条 ------- */ .yp-m body .subnav { display: flex !important; margin: 0 0 14px !important; padding: 0 !important; gap: 6px !important; overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .yp-m body .subnav::-webkit-scrollbar { display: none; } /* 做成实心胶囊而不是沿用桌面的下划线页签：胶囊自带边界，半个露在屏幕外时用户一眼能看出「右边还有，能滑」。 */ .yp-m body .sub-tab { min-height: 44px !important; flex: 0 0 auto !important; padding: 0 14px !important; border: 1px solid var(--ui-border, #ccd9e8) !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.72) !important; font-size: 14px !important; scroll-snap-align: start; white-space: nowrap; } .yp-m body .sub-tab.active { border-color: transparent !important; background: var(--ui-primary, #2b66f6) !important; color: #fff !important; } /* 桌面版用 ::after 画选中下划线，胶囊里不需要。 */ .yp-m body .sub-tab::after { display: none !important; content: none !important; } /* ------- 内容区 ------- */ .yp-m body .main-area .content { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 14px 14px calc(24px + env(safe-area-inset-bottom)) !important; } } /* --------------------------------------------------------- 2. ≤640px：栅格塌陷与排版收敛 --------------------------------------------------------- 375px 上 .idx-strip 还在排 4 列，"13774.65" 被切成 "13774.6"， .theme-grid 3 列同理。数字被截断比少显示一行更糟。 --------------------------------------------------------- */ @media (max-width: 640px) { .yp-m body .idx-strip, .yp-m body .kpi-row, .yp-m body .kpi-grid, .yp-m body .head-kpis, .yp-m body .theme-grid, .yp-m body .risk-grid, .yp-m body .check-grid, .yp-m body .viz-grid, .yp-m body .bi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .yp-m body .panel-2col, .yp-m body .grid2, .yp-m body .trend-grid, .yp-m body .radar-wrap, .yp-m body .channel-grid, .yp-m body .guide-grid, .yp-m body .lad-cards, .yp-m body .health, .yp-m body .tot-card, .yp-m body .dc-rows, .yp-m body .dc-foot, .yp-m body .analyze-bar { grid-template-columns: 1fr !important; } /* 任何栅格单元都允许收缩，否则 min-content 撑破容器造成横向溢出。 */ .yp-m body [class*="grid"] > *, .yp-m body .idx-strip > *, .yp-m body .kpi-row > * { min-width: 0; } .yp-m body .main-area .content { padding-left: 12px !important; padding-right: 12px !important; } /* 大号 Hero 字号在窄屏会占掉整屏。 */ .yp-m body .ix-title { font-size: 26px !important; line-height: 1.25 !important; } .yp-m body .ix-hero { padding: 22px 16px !important; } /* 卡片内边距整体收一档，窄屏上 24px 的留白等于少一列数据。 */ .yp-m body .panel, .yp-m body .card, .yp-m body .ladder-panel { padding: 16px 14px !important; } /* 按钮铺满宽度，比居中小按钮好点得多。 */ .yp-m body .ab-btn, .yp-m body .btn-primary-lg { width: 100% !important; } } /* --------------------------------------------------------- 3. 表格：包一层横滑容器 --------------------------------------------------------- 交割归因页的表有 8+ 列，窄屏无论如何塞不下。与其压字号压到看不清，不如让表整体横滑、外层页面不动。容器由 mobile.js 注入。 --------------------------------------------------------- */ @media (max-width: 880px) { .yp-m .yp-tablewrap { width: 100%; margin: 0 0 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } /* 必须是 max-content 且 !important：站内有 `table { width: 100% }` 这类规则，表格盒会被钉在容器宽度上，单元格靠 nowrap 撑开后是溢出到盒子外面而不是把盒子撑大 —— 于是外层 wrap 的 scrollWidth 等于 clientWidth，滚动条不出现，右侧几列直接被裁掉看不到。 max-content 让表格盒真正等于内容宽度，wrap 才有得滚。 */ .yp-m .yp-tablewrap > table { width: max-content !important; max-width: none !important; min-width: 100%; } .yp-m .yp-tablewrap th, .yp-m .yp-tablewrap td { white-space: nowrap; } /* 已经在现成滚动容器里的表（如交割归因的 .tbl-scroll）， mobile.js 只打标记不再包一层，样式在这里补齐。 */ .yp-m table.yp-table-wide { width: max-content !important; max-width: none !important; min-width: 100%; } .yp-m table.yp-table-wide th, .yp-m table.yp-table-wide td { white-space: nowrap; } /* ECharts 容器在窄屏给固定高度，避免 0 高度或过高留白。 */ .yp-m body .module-chart, .yp-m body #mainChart { height: 260px !important; min-height: 0 !important; } } /* --------------------------------------------------------- 4. 触控目标 --------------------------------------------------------- iOS HIG / Material 都要求 ≥44px。站内很多筛选小按钮是 26~30px 高，手指点不中要点两三次。 --------------------------------------------------------- */ @media (max-width: 880px) { .yp-m body .side-item, .yp-m body .sub-tab, .yp-m body .account-pill, .yp-m body button:not(.yp-drawer-btn):not([class*="close"]), .yp-m body .btn, .yp-m body select { min-height: 40px; } } /* --------------------------------------------------------- 5. 安装为桌面 App 后的形态（standalone） --------------------------------------------------------- 从主屏启动时没有浏览器地址栏，顶部要自己让出刘海高度，底部要让出 Home Indicator，否则内容会被系统 UI 压住。 --------------------------------------------------------- */ @media (display-mode: standalone) { html.yp-m body { /* 独立窗口没有浏览器的橡皮筋回弹遮挡，整页禁用过卷更像原生。 */ overscroll-behavior-y: none; } html.yp-m body .main-area .topbar { padding-top: calc(10px + env(safe-area-inset-top)) !important; } } /* --------------------------------------------------------- 5.5 会员套餐 / 客服 / 联系 / 个人中心四页的特异度加压 --------------------------------------------------------- global-pages.css 给这四页单独复制了一整套老的「侧边栏压成顶部横条」移动端方案，选择器形如 body.workspace-page:is(.contact-page,.profile-page, .pricing-page,.support-page) .sidebar { position: relative !important } 特异度 (0,4,1) 且全部 !important，上面 .yp-m 前缀的 (0,3,1) 压不住——实测 pricing.html 上侧栏仍占 382px、顶栏仍竖排 150px。这里按同样的形状重写一遍，多出的 .yp-m 让特异度到 (0,5,1)。（治本是把 global-pages.css 里那段删掉，但它和这四页的配色、间距耦合在一起，属于另一件事，不在本次改动范围内。） --------------------------------------------------------- */ @media (max-width: 880px) { .yp-m body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) .layout { display: block !important; flex-direction: column !important; } .yp-m body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) .sidebar { position: fixed !important; z-index: 1001; top: 0; bottom: 0; left: 0; display: flex !important; width: min(80vw, 300px) !important; flex-direction: column !important; padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)) !important; overflow-y: auto; border-right: 1px solid var(--gp-line, #ccd9e8) !important; border-bottom: 0 !important; box-shadow: 0 0 40px rgba(10, 37, 64, 0.18) !important; transform: translateX(-101%); transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1); overscroll-behavior: contain; } .yp-m.yp-drawer-open body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) .sidebar { transform: translateX(0); } .yp-m body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) .side-nav { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 4px !important; overflow: visible !important; } .yp-m body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) :is(.side-label, .side-foot) { display: block !important; } .yp-m body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) .side-item .si-tx small { display: block !important; } .yp-m body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) .main-area > .topbar { position: sticky !important; z-index: 900; top: 0 !important; display: flex !important; width: 100% !important; max-width: 100% !important; flex-direction: row !important; align-items: center !important; margin: 0 !important; padding: 8px 12px !important; padding-top: calc(8px + env(safe-area-inset-top)) !important; border-radius: 0 !important; flex-wrap: nowrap !important; gap: 10px !important; } /* 这里的 nav 同样被 global-pages.css 按 width:100% 撑满，结果标题被挤成 0 宽——pricing.html 上顶栏只剩「☰ 登录」，「会员套餐」四个字整个消失。 */ .yp-m body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) .main-area > .topbar nav { width: auto !important; flex: 0 0 auto !important; } .yp-m body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) .main-area > .topbar .page-title { overflow: hidden; min-width: 0 !important; flex: 1 1 auto !important; font-size: 15px !important; text-overflow: ellipsis; white-space: nowrap; } .yp-m body.workspace-page:is(.contact-page, .profile-page, .pricing-page, .support-page) .main-area > .content { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 14px 14px calc(24px + env(safe-area-inset-bottom)) !important; } } /* --------------------------------------------------------- 6. 安装引导条 --------------------------------------------------------- Android/桌面 Chrome 走 beforeinstallprompt；iOS Safari 不支持，只能提示用户手动「分享 → 添加到主屏幕」。样式共用。 --------------------------------------------------------- */ .yp-install-bar { position: fixed; z-index: 1200; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; display: flex; align-items: center; padding: 12px 14px; border: 1px solid rgba(210, 220, 231, 0.9); border-radius: 16px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 12px 40px rgba(10, 37, 64, 0.18); gap: 12px; transform: translateY(140%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); backdrop-filter: blur(16px); } .yp-install-bar.show { transform: translateY(0); } .yp-install-bar img { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; } .yp-install-txt { min-width: 0; flex: 1 1 auto; color: #0b1f3a; font-size: 13px; line-height: 1.45; } .yp-install-txt b { display: block; font-size: 14px; font-weight: 800; } .yp-install-txt span { color: #5f758f; } .yp-install-bar button { flex: 0 0 auto; padding: 9px 14px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #2b66f6, #1e52d1); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; } .yp-install-bar .yp-install-close { width: 30px; padding: 0; border: 0; background: none; color: #8a9bad; font-size: 20px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .yp-m body .sidebar, .yp-drawer-scrim, .yp-install-bar { transition: none !important; } }