/* ========================================== PonyTrade 公共样式 - 导航栏 / 用户区 / 登录模态框 设计系统参考 wangwang-etf.com 极简范式： 灰蓝中性底 + 白卡 8px 圆角 + 极浅阴影 + 即时反馈 支持日间/夜间模式：通过 切换变量 ========================================== */ :root { --bg: #f5f6f8; /* 页面背景（灰蓝中性） */ --surface: #ffffff; /* 卡片背景 */ --surface-soft: #f0f4f7; /* 柔和背景（表头/选中） */ --text: #202733; /* 主文字 */ --muted: #6b7280; /* 次要文字 */ --border: #d9dee6; /* 边框/分隔线 */ --primary: #f97316; /* 品牌强调色（橙） */ --primary-dark: #ea580c; --positive: #dc2626; /* 涨红 */ --negative: #16a34a; /* 跌绿 */ --radius: 8px; /* 卡片圆角 */ --radius-sm: 6px; /* 按钮圆角 */ --shadow: 0 16px 32px rgba(31,41,55,0.08); --shadow-sm: 0 1px 3px rgba(31,41,55,0.06); /* 灰阶文字 / 线条 / 填充层级（组件统一引用，勿再硬编码） */ --text-1: #111827; /* 一级文字（标题/强调） */ --text-2: #374151; /* 二级文字（正文/表单项） */ --text-3: #6b7280; /* 三级文字（次要） */ --text-4: #9ca3af; /* 四级文字（占位/弱化） */ --line: #e5e7eb; /* 常规分隔线 */ --line-2: #f3f4f6; /* 更浅分隔线 */ --hover-bg: #f5f5f4; /* 悬停填充 */ --chip-bg: #f9fafb; /* 浅填充（标签/条目） */ --active-bg: #fef3c7; /* 选中高亮（琥珀底） */ --accent-soft: #fff7ed; /* 柔和强调底（橙调） */ } [data-theme="dark"] { --bg: #0b1220; --surface: #151e2e; --surface-soft: #1e293b; --text: #e2e8f0; --muted: #94a3b8; --border: #243349; --text-1: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8; --text-4: #64748b; --line: #243349; --line-2: #1e293b; --hover-bg: #1e293b; --chip-bg: #1a2436; --active-bg: #3a2c12; --accent-soft: #2b1f10; --shadow: 0 16px 32px rgba(0,0,0,0.4); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); } * { margin: 0; padding: 0; box-sizing: border-box; } /* ====== 移动端：禁止横向滑动，仅保留纵向滚动 ====== */ html, body { overflow-x: hidden; max-width: 100vw; } /* overflow-x:hidden 会在 html/body 上创建滚动容器，部分移动端内核下破坏 #app-navbar 的 position:sticky；clip 同样裁掉横向溢出但不创建滚动容器 */ @supports (overflow-x: clip) { html, body { overflow-x: clip; } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; min-height: 100vh; transition: background-color .2s ease, color .2s ease; touch-action: pan-y; /* 触屏只响应纵向滑动，屏蔽横向滑动手势 */ } img, canvas, svg, video { max-width: 100%; } /* ====== 顶部导航栏（极简：品牌 + 文字标签 + 用户头像） ====== */ .top-navbar { height: 52px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; z-index: 1000; position: relative; } .navbar-left { display: flex; align-items: center; gap: 24px; min-width: 0; } .navbar-brand { color: var(--text-1); font-size: 16px; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; white-space: nowrap; } .page-tabs { display: flex; gap: 2px; } .page-tab { padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-3); transition: color 0.15s ease, background 0.15s ease; border: none; background: transparent; font-weight: 500; text-decoration: none; white-space: nowrap; } .page-tab:hover { color: var(--text-1); background: var(--hover-bg); } .page-tab.active { color: var(--text-1); background: var(--hover-bg); font-weight: 600; } /* 主题切换按钮（日间/夜间，SVG 图标用 currentColor） */ .theme-toggle { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-3); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--text-1); } /* 分享按钮（仅移动端显示，见底部媒体查询） */ .share-btn { display: none; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-3); font-size: 12px; white-space: nowrap; cursor: pointer; align-items: center; gap: 4px; transition: color 0.15s ease, border-color 0.15s ease; } .share-btn:hover { color: var(--text-1); } .share-btn:disabled { opacity: 0.6; cursor: default; } /* 分享图预览弹窗（结构复用 .modal-overlay/.modal-content） */ .share-tip { font-size: 12px; color: var(--text-4, #9ca3af); text-align: center; margin-bottom: 10px; } .share-preview-img { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; /* 微信等内置浏览器长按保存/转发 */ -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; pointer-events: auto; } .share-actions { display: flex; justify-content: center; gap: 12px; margin-top: 14px; } .share-action-btn { padding: 8px 24px; background: #f97316; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; } .share-action-btn:hover { background: #ea580c; } /* 汉堡按钮（仅移动端显示） */ .nav-toggle { display: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--text-2); border-radius: 1px; } /* 移动端导航菜单面板 */ .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 8px 16px rgba(0,0,0,0.06); padding: 6px 12px 10px; z-index: 999; } .nav-menu.open { display: block; } .nav-menu .page-tab { display: block; width: 100%; text-align: left; padding: 10px 12px; font-size: 14px; } /* 导航栏在线人数（绿点 + 计数，心跳窗口见 /api/online） */ .online-count { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); white-space: nowrap; } .online-count::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10b981; } /* 点击"在线"可展开弹幕气泡 */ .online-count { cursor: pointer; } /* ====== 导航栏弹幕：中部滚动条 + 在线下拉气泡 ====== */ .dm-ticker { flex: 1 1 auto; min-width: 0; max-width: 520px; height: 18px; overflow: hidden; margin: 0 8px; } .dm-ticker-item { height: 18px; line-height: 18px; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-nick { color: #3b82f6; font-weight: 500; } .dm-sep { color: var(--text-3); } /* 气泡锚点（"在线"计数外层，弹幕气泡绝对定位基准） */ .dm-anchor { position: relative; display: inline-flex; } .dm-bubble { position: absolute; top: 100%; right: 0; margin-top: 6px; width: 264px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); z-index: 1001; display: none; padding: 12px; } .dm-bubble.show { display: block; } .dm-bubble-tip { font-size: 13px; color: var(--text-2); margin-bottom: 10px; } .dm-login-btn { width: 100%; padding: 7px 0; background: #1e293b; color: #ffffff; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; } .dm-login-btn:hover { background: #334155; } .dm-recent { max-height: 78px; overflow: hidden; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); } .dm-recent-item { font-size: 12px; color: var(--text-3); line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-recent-item.dm-empty { color: var(--text-3); opacity: 0.7; } .dm-input-row { display: flex; gap: 6px; } .dm-input-row input { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text-1); outline: none; } .dm-input-row input:focus { border-color: #3b82f6; } .dm-input-row button { padding: 6px 12px; font-size: 13px; border: none; border-radius: 6px; background: #1e293b; color: #ffffff; cursor: pointer; flex-shrink: 0; } .dm-input-row button:hover { background: #334155; } .dm-input-row button:disabled { opacity: 0.6; cursor: default; } .dm-status { font-size: 12px; min-height: 16px; margin-top: 6px; color: var(--text-3); } .dm-status.err { color: #ef4444; } .dm-status.ok { color: #10b981; } /* ====== 用户区域 ====== */ .user-area { display: flex; align-items: center; gap: 8px; position: relative; flex-shrink: 0; } /* 登录后：导航栏只显示极简头像，详细信息点击后在下拉中展示 */ .user-chip { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px; border-radius: 999px; border: 1px solid transparent; transition: border-color 0.15s ease, background 0.15s ease; } .user-chip:hover { background: var(--hover-bg); border-color: var(--line); } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: #1e293b; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; user-select: none; } .login-btn { padding: 6px 14px; background: #1e293b; color: #ffffff; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s ease; } .login-btn:hover { background: #334155; } /* ====== 用户下拉菜单（点击头像后显示详细信息） ====== */ .user-dropdown { position: absolute; top: 100%; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); min-width: 220px; z-index: 1001; display: none; overflow: hidden; margin-top: 6px; } .user-dropdown.show { display: block; } .dropdown-header { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-2); } .dropdown-nickname { font-size: 14px; font-weight: 600; color: var(--text-1); } .dropdown-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-3); } .dropdown-level { padding: 2px 8px; background: var(--hover-bg); color: var(--text-2); border-radius: 6px; font-size: 11px; font-weight: 500; } .dropdown-item { padding: 11px 16px; cursor: pointer; transition: background 0.15s ease; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--hover-bg); } .dropdown-item:last-child { border-bottom: none; } .dropdown-item:hover { background: var(--chip-bg); } .dropdown-item.logout { color: #dc2626; } /* ====== 日历输入框（全局统一样式，各页面可覆盖） ====== */ .datepicker-input { padding: 8px 12px; font-size: 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-1); cursor: pointer; min-width: 140px; } .datepicker-input:hover, .datepicker-input:focus { border-color: #1e293b; outline: none; } /* ========================================== 统一组件系统（参考 wangwang-etf.com 极简范式） ========================================== */ /* ---- 页面标题区（各内容页统一） ---- */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 12px; } .page-title { font-size: 22px; font-weight: 600; color: var(--text); margin: 0; } .page-subtitle { font-size: 12px; color: var(--muted); margin-top: 4px; } /* ---- 统一按钮（即时反馈，无位移动画） ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--primary); border-color: var(--primary); color: #ffffff; } .btn-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); } .btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-secondary:hover:not(:disabled) { background: var(--surface-soft); border-color: var(--muted); } .btn-dark { background: #1e293b; border-color: #1e293b; color: #ffffff; } .btn-dark:hover:not(:disabled) { background: #334155; border-color: #334155; } /* ---- 统一数据表格（表头灰底 / 行分隔 / hover / 数字对齐） ---- */ .data-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .data-table th { background: var(--surface-soft); color: var(--muted); font-weight: 600; font-size: 12px; padding: 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; } .data-table td { padding: 8px; border-bottom: 1px solid var(--border); color: var(--text); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--hover-bg); } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; } .data-table .pos { color: var(--positive); font-weight: 600; } .data-table .neg { color: var(--negative); font-weight: 600; } /* ---- 统一卡片 ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* ---- 涨跌色工具类 ---- */ .text-up { color: var(--positive); } .text-down { color: var(--negative); } /* ====== 日历日期选择器 ====== */ .dp-calendar { position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 12px; width: 288px; max-width: calc(100vw - 24px); user-select: none; } .dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dp-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .dp-nav { width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--text-3); font-size: 15px; cursor: pointer; line-height: 1; } .dp-nav:hover { background: var(--line-2); color: var(--text-1); } .dp-weekdays, .dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-weekdays { margin-bottom: 4px; font-size: 11px; color: var(--text-4); text-align: center; } .dp-weekdays div { padding: 4px 0; } .dp-day { padding: 6px 0; text-align: center; font-size: 12px; border-radius: 6px; color: var(--text-4); } .dp-day.avail { color: var(--text-2); cursor: pointer; font-weight: 500; } .dp-day.avail:hover { background: var(--line-2); } .dp-day.selected { background: #1e293b !important; color: #ffffff; } .dp-empty-tip { padding: 12px 0; text-align: center; font-size: 12px; color: var(--text-4); } /* ====== 登录模态框 ====== */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 10000; } .modal-overlay.show { display: flex; } .modal-content { background: var(--surface); border-radius: 16px; padding: 32px; max-width: 400px; width: 90%; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .modal-title { font-size: 20px; font-weight: 600; color: var(--text-1); } .modal-close { background: none; border: none; font-size: 24px; color: var(--text-4); cursor: pointer; transition: all 0.2s ease; } .modal-close:hover { color: var(--text-3); } /* ====== 登录表单 ====== */ .login-form { display: flex; flex-direction: column; gap: 16px; } .login-form .form-group { display: flex; flex-direction: column; gap: 6px; } .login-form .form-group label { font-size: 13px; font-weight: 500; color: var(--text-2); } .login-form .form-group input { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; color: var(--text-2); background: var(--surface); outline: none; transition: border-color 0.2s; } .login-form .form-group input:focus { border-color: #1e293b; box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08); } .login-form .submit-btn { padding: 12px; background: #1e293b; color: #ffffff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; margin-top: 4px; } .login-form .submit-btn:hover { background: #334155; } .login-form .submit-btn:disabled { background: var(--line-2); color: var(--text-4); cursor: not-allowed; } .login-form .switch-mode { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 4px; } .login-form .code-row { display: flex; gap: 8px; } .login-form .code-row input { flex: 1; min-width: 0; } .login-form .code-row .send-code-btn { flex-shrink: 0; padding: 10px 14px; border: 1px solid #1e293b; border-radius: 10px; background: #ffffff; color: #1e293b; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s; } .login-form .code-row .send-code-btn:hover:not(:disabled) { background: #1e293b; color: #ffffff; } .login-form .code-row .send-code-btn:disabled { border-color: var(--line-2); background: var(--surface); color: var(--text-4); cursor: not-allowed; } /* ====== 订阅弹窗 / 用户下拉 ====== */ #subscribeModal .modal-content { max-width: 560px; } .dropdown-expire { font-size: 11px; color: #f97316; padding: 2px 0; margin-top: -4px; } .dropdown-item.upgrade { color: #f97316; font-weight: 600; } .plan-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .plan-card { flex: 1; min-width: 130px; max-width: 170px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 12px; text-align: center; position: relative; transition: border-color 0.2s, box-shadow 0.2s; } .plan-card:hover { border-color: #f97316; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15); } .plan-name { font-size: 14px; font-weight: 600; color: var(--text-2); } .plan-price { margin: 8px 0 2px; color: #f97316; } .plan-amount { font-size: 28px; font-weight: 700; } .plan-days { font-size: 12px; color: var(--text-4); } .plan-badge { position: absolute; top: -8px; right: -8px; background: #ef4444; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; } .plan-btn { margin-top: 12px; width: 100%; padding: 8px 0; background: #f97316; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .plan-btn:hover { background: #ea580c; } /* 支付方式（订阅弹窗） */ .pay-type-row { display: flex; justify-content: center; margin-top: 16px; } .pay-type-label { font-size: 13px; color: var(--text-2); } .plan-benefits { margin-top: 18px; padding: 14px 16px; background: var(--surface-2, rgba(249, 115, 22, 0.06)); border-radius: 10px; } .plan-benefits-title { font-size: 13px; font-weight: 600; color: #f97316; margin-bottom: 8px; } .plan-benefits ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-3); line-height: 1.9; } .plan-note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--text-3); padding: 8px; border-radius: 8px; } .plan-note.success { color: #16a34a; background: rgba(22, 163, 74, 0.08); } .plan-note.error { color: #dc2626; background: rgba(220, 38, 38, 0.08); } /* 小程序内升级渠道提示：引导到 ponytrade.top 浏览器端升级 */ .upgrade-channel-tip { margin-top: 12px; padding: 10px 12px; background: var(--chip-bg); border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; color: var(--text-2); text-align: center; line-height: 1.6; } .upgrade-channel-tip .tip-domain { color: #f97316; font-weight: 600; } /* 订阅弹窗：协议与合规声明 */ .plan-agreement { margin-top: 12px; font-size: 12px; color: var(--text-4); line-height: 1.7; text-align: center; } .plan-agreement a { color: #f97316; text-decoration: none; } .plan-agreement a:hover { text-decoration: underline; } .login-form .switch-mode a { color: var(--text-1); cursor: pointer; text-decoration: none; font-weight: 500; } .login-form .switch-mode a:hover { text-decoration: underline; } .login-form .error-msg { color: #ef4444; font-size: 13px; text-align: center; display: none; } /* ====== 已购买策略列表 ====== */ .purchased-strategies { max-height: 200px; overflow-y: auto; margin-top: 12px; } .strategy-item-purchased { padding: 8px 12px; border-radius: 8px; background: var(--chip-bg); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } .strategy-item-purchased .name { font-weight: 500; font-size: 13px; } .strategy-item-purchased .expire { font-size: 11px; color: var(--text-4); } .strategy-item-purchased .days { background: rgba(59,130,246,0.12); color: #3b82f6; padding: 2px 8px; border-radius: 10px; font-size: 11px; } /* ====== 响应式布局 ====== */ @media (max-width: 768px) { /* 移动端导航栏置顶：滚动页面时固定在顶部不跟随内容滚走 */ #app-navbar { position: sticky; top: 0; z-index: 1000; } .top-navbar { height: 48px; padding: 0 12px; } .navbar-brand { font-size: 15px; } /* 移动端：标签页收进汉堡菜单，导航栏只保留 品牌 + 用户区 + 汉堡 */ .page-tabs { display: none; } /* 移动端导航栏右上角显示分享入口 */ .share-btn { display: flex; } .nav-toggle { display: flex; } .navbar-left { gap: 10px; } .login-btn { padding: 5px 12px; font-size: 12px; } .user-dropdown { min-width: 200px; } /* 移动端弹幕滚动条收窄（标签页已折叠进汉堡菜单，中部仍有空位） */ .dm-ticker { max-width: 110px; margin: 0 4px; } .dm-bubble { width: 240px; } .modal-content { padding: 20px; margin: 16px; } } @media (max-width: 480px) { /* 极窄屏隐藏滚动条，保留"在线"气泡入口 */ .dm-ticker { display: none; } } @media (min-width: 769px) { .nav-menu { display: none !important; } } /* 移动端日历触控目标放大 (26px 按钮低于移动端最低触控标准) */ @media (max-width: 768px) { .dp-nav { width: 36px; height: 36px; font-size: 17px; } .dp-day { padding: 10px 0; font-size: 13px; } } /* ========================================== 三态组件 (加载/空/错误) 统一样式 — PtState ========================================== */ .pt-state { text-align: center; padding: 48px 20px; color: var(--text-4); font-size: 14px; } .pt-state-msg { margin-bottom: 14px; } .pt-retry-btn { padding: 8px 24px; background: #f97316; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; } .pt-retry-btn:hover { background: #ea580c; } /* ========================================== 未登录/付费引导卡片统一样式 (plate / views / models / index 各页共用) ========================================== */ .subscribe-prompt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 20px; text-align: center; } .sp-title { font-size: 16px; font-weight: 600; color: var(--text-1); } .sp-desc { font-size: 13px; color: var(--text-4); max-width: 360px; line-height: 1.7; } .sp-btn, .login-guide-btn { margin-top: 4px; padding: 10px 28px; background: #f97316; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; } .sp-btn:hover, .login-guide-btn:hover { background: #ea580c; } /* ========================================== ICP 备案信息 (全站统一: 文档流页脚, 始终位于 页面内容最底部, 非悬浮) ========================================== */ .icp-footer { text-align: center; padding: 16px 12px 18px; font-size: 12px; line-height: 1.6; color: var(--text-4, #9ca3af); } .icp-footer a { color: inherit; text-decoration: none; } .icp-footer a:hover { color: var(--text-3, #6b7280); } .icp-footer a { color: inherit; text-decoration: none; } .icp-footer a:hover { color: var(--text-3, #6b7280); }