/* 问课世界 v0.3.9：首页视觉重构 —— "划过重点的课堂笔记" 只负责：全站页头/页脚、首页首屏、首页功能区、基础字体与交互细节。 会员中心/工单/登录注册/费用说明等业务页样式仍在 pca.css。 */ :root{ --wk-ink:#1C3F78; --wk-deep:#132C55; --wk-bg:#F5F7FA; --wk-line:#DCE3EE; --wk-text:#1F2A3D; --wk-muted:#556178; --wk-yellow:#FFD93D; --wk-hl:#FFE872; --wk-red:#C8372D; } /* ---------- 基础 ---------- */ /* A2. 字体强制：html body 提高优先级，压过主题全局样式的 Manrope； Manrope 本体另由插件经 theme.json 移除（见 pca_wk_strip_manrope），此处只管渲染栈 */ html body{ font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; font-weight:400; font-size:16px; line-height:1.7; color:var(--wk-text); } /* 组件级兜底：导航链接、稿纸正文、时间码、功能说明等直接声明，不依赖继承 */ .wk-header,.wk-hero,.wk-paper,.wk-features,.wk-footer, .wk-band,.wk-sheet,.wk-auth,.wk-card{ font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; font-weight:400; } .wk-tc,.wk-duration,.wk-price-num,.pca-price,.pca-meta,.pca-ticket-time{ font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; font-variant-numeric:tabular-nums; } body.home{ background:var(--wk-bg); } ::selection{ background:var(--wk-yellow); color:var(--wk-deep); } :focus-visible{ outline:2px solid var(--wk-yellow); outline-offset:3px; } /* 内容容器：导航/首屏/功能区/页脚左边缘对齐 */ .wk-wrap{ max-width:1200px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; } /* 首屏与功能区全宽撑满（沿用主题官方全宽机制） */ .is-layout-constrained>.wk-hero.alignfull, .entry-content>.wk-hero.alignfull, .wp-block-post-content>.wk-hero.alignfull, .is-layout-constrained>.wk-features.alignfull, .entry-content>.wk-features.alignfull, .wp-block-post-content>.wk-features.alignfull{ max-width:100vw!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; } /* 首屏自身不得带主题默认的上外边距（贴紧导航） */ body.home section.wk-hero{ margin-top:0!important; margin-block-start:0!important; } /* ---------- 页头 ---------- */ .wk-header{ background:var(--wk-ink); } .wk-header-in{ display:flex; align-items:center; justify-content:space-between; height:76px; } .wk-logo{ font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-weight:900; font-size:24px; letter-spacing:.04em; line-height:1; color:#fff; text-decoration:none; } .wk-logo:hover{ color:#fff; } .wk-nav{ display:flex; align-items:center; gap:32px; } .wk-nav a{ color:rgba(255,255,255,.88); font-size:16px; text-decoration:none; border-bottom:1.5px solid transparent; padding-bottom:4px; line-height:1.5; } .wk-nav a:hover{ color:#fff; border-bottom-color:var(--wk-yellow); } /* B2：退出登录链接，72% 白色；手机端 14px 沿用 .wk-nav a 规则 */ .wk-nav a.wk-nav-logout{ color:rgba(255,255,255,.72); } .wk-nav a.wk-nav-logout:hover{ color:#fff; border-bottom-color:var(--wk-yellow); } /* ---------- 首屏 ---------- */ .wk-hero{ background:var(--wk-ink); color:#fff; } .wk-hero-grid{ display:grid; grid-template-columns:47fr 53fr; gap:64px; align-items:center; padding-top:48px; padding-bottom:48px; /* A3: 首屏底边到功能行 48px */ } .wk-hero-main,.wk-hero-demo{ min-width:0; } .wk-hero-title{ font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-weight:900; font-size:54px; line-height:1.3; letter-spacing:.02em; color:#fff; margin:0; text-align:left; } .wk-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:48px; } .wk-btn{ display:inline-flex; align-items:center; justify-content:center; height:52px; border-radius:6px; text-decoration:none; font-weight:600; font-size:17px; line-height:1; cursor:pointer; } .wk-btn-primary{ background:var(--wk-yellow); color:var(--wk-deep); padding:0 32px; border:none; box-shadow:0 2px 0 rgba(0,0,0,.18); } .wk-btn-primary:hover{ background:#FFE45C; color:var(--wk-deep); } .wk-btn-outline{ background:transparent; color:#fff; font-size:16px; border:1.5px solid rgba(255,255,255,.72); padding:0 24px; } .wk-btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; } .wk-more{ color:#fff; font-size:16px; text-decoration:underline; text-decoration-color:rgba(255,255,255,.55); text-underline-offset:5px; } .wk-more:hover{ text-decoration-color:var(--wk-yellow); } /* ---------- 示例稿纸 ---------- */ .wk-paper{ position:relative; background:#fff; color:var(--wk-text); border-radius:6px; transform:rotate(-1deg); box-shadow:0 1px 2px rgba(0,0,0,.2),0 24px 48px -16px rgba(0,0,0,.45); padding:24px 32px 32px; } /* A4. "示例"标签：绝对定位贴在稿纸右上角，不再单独占一行 */ .wk-paper-tag{ position:absolute; top:16px; right:24px; margin:0; font-size:12px; color:var(--wk-muted); line-height:1.4; border:1px solid var(--wk-line); border-radius:3px; padding:3px 8px; background:#fff; } /* 播放条右侧给标签让位，避免时长与标签重叠；播放条仍紧贴稿纸顶部内边距 */ .wk-playbar{ display:flex; align-items:center; gap:12px; padding-right:56px; } .wk-playbtn{ flex:none; width:36px; height:36px; border-radius:50%; background:var(--wk-ink); display:inline-flex; align-items:center; justify-content:center; } .wk-playbtn svg{ display:block; } .wk-playtitle{ font-size:15px; font-weight:600; color:var(--wk-deep); } .wk-duration{ margin-left:auto; font-size:13px; color:var(--wk-muted); font-variant-numeric:tabular-nums; white-space:nowrap; } .wk-progress{ display:flex; gap:3px; height:6px; margin-top:16px; } .wk-progress i{ display:block; height:6px; border-radius:3px; } .wk-lines{ list-style:none; margin:16px 0 0; padding:0; } .wk-lines li{ display:flex; align-items:flex-start; gap:16px; padding-top:12px; padding-bottom:12px; border-top:1px solid var(--wk-line); } .wk-lines li:last-child{ border-bottom:1px solid var(--wk-line); } .wk-tc{ flex:none; width:74px; font-size:13px; color:var(--wk-muted); font-variant-numeric:tabular-nums; line-height:1.7; padding-top:2px; } .wk-tx{ font-size:15px; line-height:1.7; } /* A1. 荧光笔划重点：黄色底直接画在文字 span 自身上（换行不断裂）。 硬色阶 linear-gradient 只做"中间 76% 高度的实色黄条"，不是视觉渐变。 加载 0.6s 后用 1.1s 从左向右扫出；减少动态偏好时直接完整显示。 */ .wk-hl{ background:linear-gradient(180deg, transparent 14%, #FFE872 14%, #FFE872 90%, transparent 90%) no-repeat 0 0 / 0% 100%; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 2px; animation:wk-sweep 1.1s cubic-bezier(.16,1,.3,1) .6s forwards; } @keyframes wk-sweep{ to{ background-size:100% 100%; } } @media (prefers-reduced-motion:reduce){ .wk-hl{ animation:none; background-size:100% 100%; } } /* 静态高亮（内页用）：与首页 .wk-hl 同一样式，不加动画 */ .wk-hl-static{ animation:none; background-size:100% 100%; } .wk-risk{ text-decoration:underline wavy var(--wk-red); text-decoration-thickness:1.5px; text-underline-offset:4px; } .wk-note{ display:block; margin-top:8px; font-family:"LXGW WenKai","KaiTi",serif; font-size:16px; line-height:1.6; color:var(--wk-red); } .wk-qa{ margin-top:16px; display:grid; gap:12px; } .wk-qa-row{ display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.7; } .wk-badge{ flex:none; width:24px; height:24px; border-radius:4px; margin-top:2px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; line-height:1; } .wk-badge-q{ background:var(--wk-ink); color:#fff; } .wk-badge-a{ background:var(--wk-yellow); color:var(--wk-deep); } .wk-u{ text-decoration:underline; text-underline-offset:3px; } /* ---------- 功能区 ---------- */ /* v0.5.0 A：功能区自身带内边距（上 48px / 下 64px），与首屏、页脚拉开距离； 网格不再额外加 padding；section 自身不得带主题默认的上外边距 */ body.home section.wk-features{ margin-top:0!important; margin-block-start:0!important; } /* v0.5.1：去掉功能区与页脚之间的 WP 区块间距（blockGap 19px）—— 间距落在页脚模板部件包裹层上，清掉后功能区下内边距（桌面 64px / 手机 48px） 即为功能区最后一行到页脚分隔线的实际距离 */ body.home section.wk-features + *, body.home .wp-block-template-part{ margin-top:0!important; margin-block-start:0!important; } body.home main{ padding-bottom:0!important; } body.home main .wp-block-group{ padding-top:0!important; padding-bottom:0!important; } body.home .wp-block-post-content, body.home .entry-content{ padding-bottom:0!important; } .wk-features{ background:var(--wk-bg); padding-top:48px; padding-bottom:64px; } .wk-features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; } .wk-feat{ display:flex; align-items:flex-start; gap:16px; } .wk-feat-icon{ flex:none; width:28px; height:28px; margin-top:1px; } .wk-feat-icon svg{ display:block; width:28px; height:28px; } .wk-feat h2{ font-size:18px; font-weight:600; color:var(--wk-deep); margin:0 0 8px; line-height:1.5; } .wk-feat p{ font-size:15px; color:var(--wk-muted); margin:0; line-height:1.7; } /* ---------- 页脚 ---------- */ .wk-footer{ background:var(--wk-bg); border-top:1px solid var(--wk-line); } .wk-foot-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-top:32px; padding-bottom:24px; } .wk-foot-logo{ font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-weight:900; font-size:20px; color:var(--wk-deep); margin:0 0 8px; line-height:1.4; } .wk-foot-tag{ font-size:14px; color:var(--wk-muted); margin:0; } .wk-foot-link{ font-size:15px; color:var(--wk-ink); text-decoration:underline; text-decoration-color:var(--wk-line); text-underline-offset:4px; white-space:nowrap; } .wk-foot-link:hover{ text-decoration-color:var(--wk-ink); } .wk-foot-bottom{ border-top:1px solid var(--wk-line); padding-top:16px; padding-bottom:32px; } .wk-foot-bottom p{ font-size:13px; color:var(--wk-muted); margin:0; } /* ---------- 手机端 ---------- */ @media (max-width:768px){ .wk-wrap{ padding-left:16px; padding-right:16px; } .wk-header-in{ height:60px; } .wk-logo{ font-size:20px; } .wk-nav{ gap:16px; } .wk-nav a{ font-size:14px; padding-bottom:2px; } .wk-hero-grid{ grid-template-columns:1fr; gap:32px; padding-top:32px; padding-bottom:32px; /* A3 手机：首屏底边到功能行 32px */ } .wk-hero-title{ font-size:33px; line-height:1.36; } .wk-hero-actions{ margin-top:32px; } .wk-hero-actions .wk-btn-primary{ flex:1 1 100%; } .wk-paper{ transform:none; padding:16px; } .wk-tc{ width:58px; } .wk-tx{ font-size:14px; } .wk-qa-row{ font-size:14px; } .wk-features{ padding-top:32px; padding-bottom:48px; /* v0.5.0 A 手机：上 32px / 下 48px */ } .wk-features-grid{ grid-template-columns:1fr; gap:24px; } .wk-foot-top{ flex-direction:column; align-items:flex-start; gap:16px; } } /* ============================================================ 问课世界 v0.4.0：内页设计系统 —— "划过重点的课堂笔记"推广到全站 覆盖：登录 / 注册 / 会员中心 / 工单 / 费用说明 / 功能介绍 只改视觉：文字、链接、功能、字段名、校验规则一律不动。 本文件所有内页规则以 body.wk-page 开头提权，压过 pca.css 旧样式； 不影响 wp-admin（pca-admin.css 独立）。 ============================================================ */ /* ---------- 页面脚手架 ---------- */ /* 全宽撑满：标题带 / 蓝桌面 / 内容区沿用主题官方全宽机制。 注：100vw 含垂直滚动条宽度，页面级裁掉横向溢出（标准做法，不影响内容布局） */ html,body{ overflow-x:clip; } .is-layout-constrained>.wk-band.alignfull, .entry-content>.wk-band.alignfull, .wp-block-post-content>.wk-band.alignfull, .is-layout-constrained>.wk-auth.alignfull, .entry-content>.wk-auth.alignfull, .wp-block-post-content>.wk-auth.alignfull, .is-layout-constrained>.wk-sheet.alignfull, .entry-content>.wk-sheet.alignfull, .wp-block-post-content>.wk-sheet.alignfull{ max-width:100vw!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; } /* 内页 sections 不得带主题默认上外边距；删掉区块间多余的 blockGap */ body.wk-page section.wk-band, body.wk-page section.wk-auth, body.wk-page section.wk-sheet{ margin-top:0!important; margin-block-start:0!important; } body.wk-page .wp-block-post-content>*{ margin-block-start:0!important; } body.wk-page main{ margin-top:0!important; padding:0!important; } body.wk-page main .wp-block-group{ padding-top:0!important; padding-bottom:0!important; } body.wk-page .wp-block-post-content, body.wk-page .entry-content{ padding-bottom:0!important; } /* 页面底色：内页默认冷白；墨蓝桌面页整页墨蓝（从导航一直铺到页脚） */ body.wk-page-pricing,body.wk-page-features, body.wk-page-member,body.wk-page-ticket{ background:#F5F7FA; } body.wk-desk-blue{ background:#1C3F78; } /* 蓝桌面页：内容不足一屏时整页撑满视口、页脚贴底（墨蓝从导航一直铺到页脚）。 真实 DOM 为主题的 .wp-site-blocks > header/main/footer，无 .wk-site 包裹层 */ body.wk-desk-blue .wp-site-blocks{ min-height:100vh; display:flex; flex-direction:column; } body.wk-desk-blue .wp-site-blocks > main{ flex:1 0 auto; display:flex; flex-direction:column; } body.wk-desk-blue .wp-site-blocks > main > .wk-auth{ flex:1 0 auto; } /* 静态重点标记：短语不断词换行（过长时整段下移） */ .wk-hl-static{ white-space:nowrap; } /* ---------- 墨蓝标题带 ---------- */ .wk-band{ background:#1C3F78; color:#fff; } .wk-band-in{ padding-top:40px; padding-bottom:56px; } .wk-band-title{ font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-weight:900; font-size:40px; line-height:1.3; letter-spacing:.02em; color:#fff; margin:0; text-align:left; } .wk-band-lead{ margin:16px 0 0; font-size:18px; line-height:1.75; color:rgba(255,255,255,.88); max-width:40em; } /* v0.5.0 C1：标题带分栏 —— H1 左，链接右（与标题底部对齐） */ .wk-band-split{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; } .wk-band-links{ display:flex; gap:24px; padding-bottom:8px; } .wk-band-links a{ color:#fff; font-size:15px; text-decoration:underline; text-decoration-color:rgba(255,255,255,.5); text-underline-offset:4px; white-space:nowrap; } .wk-band-links a:hover{ color:#FFD93D; text-decoration-color:#FFD93D; } /* ---------- 浅色内容区 ---------- */ .wk-sheet{ background:#F5F7FA; } .wk-sheet-in{ padding-top:56px; padding-bottom:80px; } /* ---------- 蓝桌面上的白纸卡片（登录 / 注册 / 未登录提示） ---------- */ .wk-auth-in{ padding-top:40px; padding-bottom:96px; } .wk-card{ background:#fff; border-radius:6px; max-width:440px; margin:0 auto; padding:40px; box-shadow:0 1px 2px rgba(0,0,0,.2),0 24px 48px -16px rgba(0,0,0,.45); } .wk-card-title{ font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-weight:900; font-size:28px; line-height:1.4; color:#132C55; margin:0 0 28px; text-align:left; } .wk-card-desc{ font-size:16px; line-height:1.7; color:#1F2A3D; margin:0 0 28px; } .wk-card-desc:last-child{ margin-bottom:0; } /* ---------- 按钮（全站统一） ---------- */ .btn-wk{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 28px; border-radius:6px; border:none; font-size:16px; font-weight:600; line-height:1; font-family:inherit; text-decoration:none; cursor:pointer; white-space:nowrap; box-sizing:border-box; } .btn-wk-primary{ background:#FFD93D; color:#132C55; box-shadow:0 2px 0 rgba(0,0,0,.18); } .btn-wk-primary:hover{ background:#FFE45C; color:#132C55; } .btn-wk-secondary{ background:transparent; color:#1C3F78; border:1.5px solid #1C3F78; padding:0 24px; } .btn-wk-secondary:hover{ background:rgba(28,63,120,.06); color:#1C3F78; } .btn-wk-block{ width:100%; } /* 小号按钮（v0.5.0）：高 40px，其余同主/次按钮 */ .btn-wk-sm{ height:40px; padding-left:16px; padding-right:16px; font-size:15px; } .btn-wk:disabled{ opacity:.65; cursor:not-allowed; } /* 白色面板（v0.5.0）：白底 1px 边框，圆角 6px，内边距 24px（手机 20px），无阴影 */ .wk-panel{ background:#fff; border:1px solid #DCE3EE; border-radius:6px; padding:24px; } /* 两个按钮并排：各占一半 */ .wk-btn-pair{ display:flex; gap:16px; } .wk-btn-pair .btn-wk{ flex:1 1 0; padding-left:12px; padding-right:12px; } /* 按钮行：左对齐 */ .wk-btn-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; } /* ---------- 文字链接 ---------- */ .wk-link{ color:#1C3F78; text-decoration:underline; text-decoration-color:#C5D0E0; text-underline-offset:4px; } .wk-link:hover{ text-decoration-color:#1C3F78; color:#1C3F78; } /* ---------- 表单 ---------- */ .wk-field{ margin-bottom:20px; } .wk-label{ display:block; font-size:14px; font-weight:600; color:#1F2A3D; margin:0 0 8px; line-height:1.5; } .wk-input,.wk-select{ width:100%; height:48px; box-sizing:border-box; border:1px solid #C5D0E0; border-radius:6px; background:#fff; font-size:16px; line-height:1.5; color:#1F2A3D; padding:0 14px; font-family:inherit; margin:0; } textarea.wk-input{ height:auto; min-height:120px; padding:12px 14px; line-height:1.7; resize:vertical; } .wk-input::placeholder,.wk-select::placeholder{ color:#6B778C; opacity:1; } .wk-input:focus,.wk-select:focus{ outline:none; border-color:#1C3F78; box-shadow:0 0 0 3px rgba(255,217,61,.7); } .wk-help{ font-size:13px; color:#556178; line-height:1.6; margin:8px 0 0; } .wk-form-msg{ font-size:14px; line-height:1.6; margin:12px 0 0; min-height:0; } .wk-form-msg.ok{ color:#1F6B3A; } .wk-form-msg.err{ color:#C8372D; } /* 提示框（v0.5.0）：提交课程/工单的信息用浅底圆角，无左侧色条；无信息时不占高度 */ #pca-submit-msg.wk-ok, #pca-ticket-msg.wk-ok{ background:#E3F4EA; color:#1F6B3A; border-radius:6px; padding:12px 16px; font-size:15px; line-height:1.7; } #pca-submit-msg.wk-err, #pca-ticket-msg.wk-err{ background:#FBE9E7; color:#A3291F; border-radius:6px; padding:12px 16px; font-size:15px; line-height:1.7; } #pca-submit-msg:empty, #pca-ticket-msg:empty{ display:none; } /* 区号 + 输入框：桌面左右并排，手机上下排列 */ .wk-contact-row{ display:flex; gap:12px; } .wk-contact-row .wk-select{ flex:none; width:112px; } .wk-contact-row .wk-input{ flex:1 1 auto; min-width:0; } /* 表单里的提交按钮 */ .wk-form .btn-wk-block{ margin-top:8px; } /* 卡片底部切换链接 */ .wk-switch{ text-align:center; font-size:14px; color:#556178; margin:24px 0 0; line-height:1.6; } /* ---------- 加载小 spinner ---------- */ .wk-spinner{ display:inline-block; width:16px; height:16px; flex:none; border:2px solid rgba(19,44,85,.28); border-top-color:#132C55; border-radius:50%; margin-right:8px; vertical-align:-3px; animation:wk-spin .8s linear infinite; } @keyframes wk-spin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ .wk-spinner{ animation-duration:2s; } } /* ---------- 导航当前页 ---------- */ .wk-nav a[aria-current="page"]{ color:#fff; border-bottom-color:#FFD93D; } /* ---------- 费用说明页 ---------- */ .wk-price-row{ display:flex; gap:24px; max-width:880px; margin:0 0 12px; } .wk-price-block{ flex:1 1 0; background:#fff; border:1px solid #DCE3EE; border-radius:6px; padding:32px; box-shadow:none; } .wk-price-name{ font-size:18px; font-weight:600; color:#132C55; margin:0 0 16px; line-height:1.5; } .wk-price-line{ margin:0 0 12px; line-height:1.2; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .wk-price-num{ font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-weight:900; font-size:44px; color:#1C3F78; line-height:1.1; } .wk-price-unit{ font-size:15px; color:#556178; } .wk-price-desc{ font-size:15px; color:#556178; line-height:1.7; margin:0; } /* 阅读列：两段补充说明 */ .wk-read{ max-width:720px; } .wk-note-sec{ border-top:1px solid #DCE3EE; padding-top:28px; padding-bottom:28px; } .wk-note-sec h2{ font-size:20px; font-weight:600; color:#132C55; margin:0 0 8px; line-height:1.5; } .wk-note-sec p{ font-size:16px; line-height:1.8; color:#1F2A3D; margin:0; } .wk-read .wk-btn-row{ margin-top:40px; } /* ---------- 功能介绍页 ---------- */ .wk-feat-rows{ margin:0; } .wk-feat-row{ display:flex; gap:48px; align-items:flex-start; padding-top:40px; padding-bottom:40px; border-top:1px solid #DCE3EE; } .wk-feat-row:first-child{ border-top:none; padding-top:0; } .wk-feat-left{ flex:none; width:300px; display:flex; align-items:center; gap:16px; } .wk-feat-ic{ flex:none; width:32px; height:32px; } .wk-feat-ic svg{ display:block; width:32px; height:32px; } .wk-feat-left h2{ font-size:22px; font-weight:600; color:#132C55; margin:0; line-height:1.5; } .wk-feat-right{ flex:1 1 auto; min-width:0; } .wk-feat-right p{ font-size:16px; line-height:1.85; color:#1F2A3D; margin:0; max-width:38em; } /* 使用流程 */ .wk-steps-wrap{ margin-top:40px; border-top:1px solid #DCE3EE; padding-top:56px; } .wk-steps-title{ font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-weight:900; font-size:28px; line-height:1.4; color:#132C55; margin:0 0 32px; } .wk-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; } /* 相邻圆之间的横线：整行一条，圆盖住中间部分 */ .wk-steps::before{ content:""; position:absolute; top:22px; left:22px; right:22px; height:1px; background:#C5D0E0; } .wk-step{ position:relative; margin:0; padding:0; } .wk-step-dot{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%; background:#1C3F78; color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-weight:900; font-size:20px; line-height:1; margin-bottom:20px; } .wk-step-tx{ font-size:16px; line-height:1.75; color:#1F2A3D; margin:0; } .wk-steps-wrap .wk-btn-row{ margin-top:40px; } /* ---------- 会员中心 / 工单（登录后，v0.5.0） ---------- */ .wk-sec-title{ font-size:22px; font-weight:600; color:#132C55; line-height:1.5; margin:40px 0 16px; } .wk-sec-title:first-child{ margin-top:0; } .wk-lead{ font-size:16px; line-height:1.7; color:#1F2A3D; margin:0 0 24px; } /* C2：会员中心两栏（桌面 >880px；手机单栏：问答→订单→提交，无订单时提交最前） */ .pca-dash-sec > .wk-sec-title{ margin-top:0; } @media (min-width:881px){ .pca-dash-cols{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:48px; align-items:start; } .pca-dash-main{ display:grid; gap:48px; align-content:start; min-width:0; } } @media (max-width:880px){ .pca-dash-cols{ display:flex; flex-direction:column; gap:48px; } .pca-dash-main{ display:flex; flex-direction:column; gap:48px; min-width:0; } .pca-dash-cols.pca-no-orders .pca-dash-side{ order:-1; } } /* C5：订单面板列表（一行一个订单，行间 1px 分隔线） */ body.wk-page .pca-orders-panel{ background:#fff; border:1px solid #DCE3EE; border-radius:6px; } body.wk-page .pca-order-card{ padding:20px 24px; } body.wk-page .pca-order-card + .pca-order-card{ border-top:1px solid #DCE3EE; } body.wk-page .pca-orders-empty{ padding:24px; } body.wk-page .pca-orders-empty p{ font-size:15px; margin:0 0 16px; } body.wk-page .pca-order-top{ display:flex; justify-content:space-between; align-items:center; gap:24px; } body.wk-page .pca-order-info{ flex:1 1 auto; min-width:0; } body.wk-page .pca-order-title{ font-size:18px; font-weight:600; color:#132C55; line-height:1.5; margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } body.wk-page .pca-order-meta{ display:flex; flex-wrap:wrap; column-gap:24px; row-gap:4px; font-size:14px; color:#556178; line-height:1.6; font-variant-numeric:tabular-nums; margin:6px 0 0; } body.wk-page .pca-order-btns{ flex:none; display:flex; gap:8px; } /* 续费行：距上方 12px */ body.wk-page .pca-order-renew{ margin-top:12px; } body.wk-page .pca-renew-line{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } body.wk-page .pca-renew-price{ font-size:14px; color:#556178; line-height:1.6; font-variant-numeric:tabular-nums; } body.wk-page .pca-order-renew .wk-renew-msg{ margin:8px 0 0; } body.wk-page .pca-order-renew .wk-renew-msg:empty{ display:none; } /* 续费文字链接（墨蓝；两步确认待定态变红笔） */ body.wk-page .wk-renew-link{ background:none; border:none; padding:0; font:inherit; cursor:pointer; color:#1C3F78; font-size:15px; text-decoration:underline; text-decoration-color:#C5D0E0; text-underline-offset:4px; } body.wk-page .wk-renew-link:hover{ color:#1C3F78; text-decoration-color:#1C3F78; } body.wk-page .wk-renew-link.pca-btn-danger{ background:none; border:none; box-shadow:none; color:#C8372D; text-decoration-color:#C8372D; } body.wk-page .pca-meta{ font-size:13px; color:#556178; line-height:1.6; } body.wk-page .pca-price{ color:#1C3F78; font-variant-numeric:tabular-nums; } /* 状态标签：13px，必须带文字 */ body.wk-page .pca-status, body.wk-page .pca-ticket-status{ display:inline-block; font-size:13px; line-height:1.6; font-weight:400; border-radius:4px; padding:2px 8px; white-space:nowrap; } body.wk-page .pca-status-pending_pricing, body.wk-page .pca-status-pending_payment, body.wk-page .pca-status-soon, body.wk-page .pca-ticket-open{ background:#FFF4C2; color:#7A5B00; } body.wk-page .pca-status-pending_confirm, body.wk-page .pca-status-pending_upload{ background:#E8EEF7; color:#1C3F78; } body.wk-page .pca-status-completed, body.wk-page .pca-ticket-answered{ background:#E3F4EA; color:#1F6B3A; } body.wk-page .pca-status-expired, body.wk-page .pca-ticket-closed{ background:#FBE9E7; color:#A3291F; } /* 提示框：浅底圆角，无左侧色条 */ body.wk-page .pca-expired{ background:#FBE9E7; color:#A3291F; border-radius:6px; padding:12px 16px; font-size:15px; line-height:1.7; } body.wk-page .pca-exp-warn{ color:#C8372D; font-weight:600; } body.wk-page .pca-msg{ font-size:14px; line-height:1.6; } body.wk-page .pca-msg.pca-ok{ color:#1F6B3A; } body.wk-page .pca-msg.pca-err{ color:#C8372D; } body.wk-page .pca-form-msg.ok{ color:#1F6B3A; } body.wk-page .pca-form-msg.err{ color:#C8372D; } /* 收款码：白底块，200px */ body.wk-page .pca-qrcodes{ display:flex; gap:16px; flex-wrap:wrap; margin:16px 0; } body.wk-page .pca-qrcode{ background:#fff; border:1px solid #DCE3EE; border-radius:6px; padding:16px; text-align:center; } body.wk-page .pca-qrcode img{ width:200px; height:200px; object-fit:contain; display:block; } body.wk-page .pca-qrcode p{ font-size:13px; color:#556178; margin:8px 0 0; } /* 旧按钮类映射到新规范（JS 钩子类名保留） */ body.wk-page .pca-btn{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 28px; border-radius:6px; border:none; background:#FFD93D; color:#132C55; font-size:16px; font-weight:600; line-height:1; font-family:inherit; text-decoration:none; cursor:pointer; white-space:nowrap; box-sizing:border-box; box-shadow:0 2px 0 rgba(0,0,0,.18); } body.wk-page .pca-btn:hover{ background:#FFE45C; color:#132C55; } body.wk-page .pca-btn:disabled{ opacity:.65; cursor:not-allowed; } /* 小号旧按钮：高 40px（查看/下载文档） */ body.wk-page .pca-btn.pca-btn-sm{ height:40px; padding-left:16px; padding-right:16px; font-size:15px; } body.wk-page .pca-btn-plain{ background:transparent; color:#1C3F78; border:1.5px solid #1C3F78; padding:0 24px; box-shadow:none; } body.wk-page .pca-btn-plain:hover{ background:rgba(28,63,120,.06); color:#1C3F78; } /* v0.5.1：描边小按钮（查看文档/下载文档）——优先级高于 .pca-btn 的黄色背景， 与