:root { --primary: #EB3C00; --primary-dark: #C53000; --primary-soft: #FFF1ED; --primary-shadow: 0 4px 14px rgba(235,60,0,0.20); --text: #000000; --text-2: #0A0A0B; --text-light: #1A1A1A; --text-muted: #5A5A5A; --border: #E5E7EB; --border-2: #D1D5DB; --bg: #FFFFFF; --bg-soft: #F7F8FA; --bg-soft-2: #EEF1F5; --ink: #1D1D1F; --ink-2: #2D2D2F; --ink-3: #4A4A4A; --success: #10B981; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #000000; background: var(--bg); line-height: 1.65; font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "ss03"; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.5px; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; } strong, b { font-weight: 600; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ============== Nav ============== */ .nav { background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .nav-inner { display: flex; justify-content: space-between; align-items: center; height: 64px; } .nav-brand { display: inline-flex; align-items: center; } .nav-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .nav-brand-name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; } .nav-brand-sub { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.5px; margin-top: 2px; } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-links a { color: var(--text-2); font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: all .15s; } .nav-links a:hover { color: var(--text); background: var(--bg-soft); } .nav-cta { background: var(--primary); color: #FFFFFF !important; padding: 10px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 12px rgba(235,60,0,0.25); transition: all .15s; } .nav-cta:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(235,60,0,0.30); } /* ============== Hero ============== */ .hero { padding: 80px 0 64px; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .hero h1 { font-size: 38.4px; margin: 0 0 16px; font-weight: 800; letter-spacing: 0; line-height: 1.3; color: var(--text); } .hero h1 .accent { color: var(--primary); } .hero .sub { font-size: 17px; color: var(--ink-3); max-width: 640px; margin: 0 0 32px; line-height: 1.7; letter-spacing: 0.1px; } .btn-group-hero { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: flex-start; width: 100%; } .btn-dl { position: relative; min-height: 44px; padding: 10px 24px; font-size: 14px; border-radius: 10px; cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px; transition: all .2s; box-sizing: border-box; font-family: inherit; min-width: 180px; text-align: center !important; white-space: nowrap; flex-direction: row; margin: 0; line-height: 1 !important; vertical-align: middle; color: #FFFFFF !important; } .btn-dl::before { content: '' !important; width: 18px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; flex-shrink: 0; display: inline-block !important; } .btn-dl[data-os='win'] { background: linear-gradient(135deg, #FF7849 0%, #EB3C00 50%, #C53000 100%); color: #fff; border: none; box-shadow: 0 4px 14px rgba(235,60,0,0.30); font-weight: 600; } .btn-dl[data-os='win']:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(235,60,0,0.40); } .btn-dl[data-os='win']::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 5.5L10.5 4.5v7H3v-6zM11.5 4.3L21 3v9.5h-9.5V4.3zM3 12.5h7.5v7L3 18.5v-6zM11.5 12.5H21V21l-9.5-1.3v-7.2z'/%3E%3C/svg%3E"); } .btn-dl[data-os='mac'] { background: linear-gradient(135deg, #2D2D2F 0%, #0A0A0B 100%); color: #fff; border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.25); font-weight: 600; } .btn-dl[data-os='mac']:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); } .btn-dl[data-os='mac']::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.4 12.7c0-2.3 1.9-3.4 2-3.4-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.9-.8-3.1-.8-1.6 0-3.1.9-3.9 2.4-1.7 2.9-.4 7.2 1.2 9.5.8 1.1 1.7 2.4 3 2.4 1.2 0 1.7-.8 3.1-.8 1.4 0 1.9.8 3.1.8 1.3 0 2.1-1.2 2.9-2.3.9-1.3 1.3-2.6 1.3-2.7-.1 0-2.7-1-2.7-4.2z'/%3E%3C/svg%3E"); } .btn-dl .btn-text { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px; line-height: 1 !important; text-align: center !important; vertical-align: middle; } .btn-dl .main { font-size: 14px; font-weight: 700; line-height: 1 !important; text-align: center !important; display: block !important; color: #FFFFFF !important; } .btn-dl .btn-sub { font-size: 11px; font-weight: 500; line-height: 1 !important; opacity: 1 !important; text-align: center !important; display: block !important; color: rgba(255,255,255,0.92) !important; } .hero-img img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); } .hero-os-support { color: var(--text-muted); font-size: 14px; margin-top: 16px; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero-text { text-align: center; } .hero h1 { font-size: 28.8px; } .hero .sub { margin-left: auto; margin-right: auto; } .btn-group-hero { justify-content: center; } .hero-img { max-width: 480px; margin: 0 auto; } } @media (max-width: 600px) { .btn-dl { width: 100%; } .btn-group-hero { width: 100%; } } /* ============== Trust Bar ============== */ .trust-bar { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; } .trust-bar-inner { justify-content: center !important; } .trust-bar-inner .trust-tag { background: #FFFFFF !important; color: #1D1D1F !important; border: 1px solid #E5E7EB !important; font-weight: 500 !important; padding: 6px 12px !important; font-size: 13px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; } .trust-bar-inner .trust-tag:hover { border-color: #EB3C00 !important; color: #EB3C00 !important; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(235,60,0,0.15) !important; } .trust-bar-inner .trust-tag svg { flex-shrink: 0; opacity: 0.65; } .trust-bar-inner .trust-tag:hover svg { opacity: 1; } .trust-bar-inner { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 16px; } .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .trust-tag { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: all .15s; letter-spacing: 0.1px; } .tag-green { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; } .tag-red { background: #FFF1ED; color: #C53000; border: 1px solid #FEC8B4; } /* ============== Section 通用 ============== */ .section { padding: 64px 0; background: #fff; } .section.alt { background: var(--bg-soft); } .section-header { margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; } .section-title { font-size: 32px; color: var(--text); margin: 0; font-weight: 700; letter-spacing: -0.5px; } .section-subtitle { font-size: 15px; color: var(--text-muted); margin: 0; max-width: 480px; text-align: right; } /* ============== categorySection: 7 应用 + 全套筛选 ============== */ .cat-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 28px; flex-wrap: wrap; } .cat-tab { padding: 14px 22px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 16px; font-weight: 600; color: var(--text-light); transition: all .15s; } .cat-tab-name { line-height: 1.2; } .cat-tab-desc { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 3px; } .cat-tab:hover { color: var(--text); } .cat-tab.active { color: var(--text); border-bottom-color: var(--primary); } .cat-tab.active .cat-tab-desc { color: var(--text-light); } .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } } .sw-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid var(--border); border-radius: 12px; transition: all .2s; cursor: pointer; } .sw-card:hover { border-color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-2px); } .sw-card-icon { width: 44px; height: 44px; background: var(--bg-soft); border-radius: 8px; padding: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .sw-card-icon img { width: 100%; height: 100%; object-fit: contain; } .sw-card-text { flex: 1; min-width: 0; } .sw-card-name { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 2px; } .sw-card-desc { font-size: 12px; color: var(--text-light); line-height: 1.4; margin: 0; } /* kwopt3: 授权方式与价格咨询结构区 (不展示金额) */ .lic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; } @media (max-width: 900px) { .lic-grid { grid-template-columns: 1fr; } } .lic-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px 22px; } .lic-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--text); } .lic-card ul { margin: 0; padding-left: 20px; } .lic-card li { font-size: 14px; line-height: 1.9; color: var(--text-2); } .lic-note { font-size: 12px; color: var(--text-light); margin-top: 10px; } /* ============== swVersionsBlock (统一 Office 全套, 不分产品) ============== */ .sw-versions-block { background: #fff; border: 1px solid var(--border); border-radius: 14px; margin-top: 24px; padding: 24px; } .sw-detail-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; min-height: 48px; } .sw-detail-icon { width: 56px; height: 56px; background: var(--primary-soft); border-radius: 12px; padding: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .sw-detail-icon-img { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; height: 100%; } .sw-detail-icon-img img { width: 100%; height: 100%; object-fit: contain; } .sw-detail-titles { flex: 1; min-width: 0; } .sw-detail-name { font-size: 22px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -0.3px; } .sw-detail-subname { font-size: 13px; color: var(--text-light); margin: 2px 0 0; } .sw-head-actions { display: flex; flex-direction: row; gap: 8px; flex-shrink: 0; } /* 版本卡 3 列 (Office 全套 4 序列: 2024 / 2021 / 2019 / 2016) */ .version-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1024px) { .version-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .version-grid { grid-template-columns: 1fr; } } .version-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; transition: all .15s; cursor: pointer; position: relative; } .version-card:hover { border-color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-2px); } .version-card.active { border-color: #EB3C00; background: linear-gradient(180deg, #FFF1ED 0%, #FFFFFF 100%); box-shadow: 0 4px 16px rgba(235,60,0,0.20); } /* 默认版本卡: 空心圆 */ .version-card { padding-right: 44px !important; } .version-card::after { content: '○'; position: absolute; top: 14px; right: 16px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: #c8c8c8; } /* 选中: 实心圆 + 橙色 */ .version-card.active::after { content: '●'; color: #EB3C00; } .version-card-info { display: flex; flex-direction: column; gap: 2px; } .version-card-name { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.35; letter-spacing: -0.2px; } .version-card-meta { font-size: 11px; color: var(--text-light); } .version-card-includes { font-size: 12px; color: var(--text-muted); line-height: 1.5; padding-top: 6px; border-top: 1px dashed var(--border); } .version-card-includes strong { color: var(--text-2); } .version-card-sizes { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px dashed var(--border); } .version-card-size { font-size: 12px; color: var(--text-2); } .size-os { display: inline-block; min-width: 28px; padding: 0 4px; background: var(--bg-soft); color: var(--text-light); font-size: 10px; font-weight: 600; border-radius: 3px; text-align: center; margin-right: 4px; } /* ============== featureShowcase ============== */ .feature-section { background: #fff; } .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .feature-card { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16/9; cursor: pointer; display: block; } .feature-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .feature-card:hover img { transform: scale(1.04); } .feature-icon { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; z-index: 2; } .feature-icon span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 800; } .feature-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 50px 18px 18px; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 60%, transparent 100%); color: #fff; } .feature-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; } .feature-desc { font-size: 13px; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.4; } /* ============== faqSection ============== */ .faq-section { background: var(--bg-soft); } .faq-list { max-width: 1200px; margin: 0; } .faq-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; cursor: pointer; overflow: hidden; } .faq-q { font-weight: 600; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: var(--text); } .faq-q::after { content: '+'; font-size: 22px; font-weight: 300; color: var(--text-light); } .faq-item.open .faq-q::after { content: '×'; } .faq-a { color: var(--ink-3); font-size: 15px; line-height: 1.7; padding: 0 22px 18px; display: none; } .faq-item.open .faq-a { display: block; } /* ============== compareSection ============== */ .compare-section { background: #fff; } .compare-table { width: 100%; max-width: 920px; margin: 0 auto; border-collapse: collapse; } .compare-table thead th { padding: 14px 20px; font-size: 14px; font-weight: 700; color: var(--text); background: transparent; border-bottom: 2px solid var(--text); text-align: left; } .compare-table thead th:first-child { width: 14%; } .compare-table thead th:nth-child(2) { width: 43%; color: var(--text-light); } .compare-table thead th:nth-child(3) { width: 43%; color: var(--primary); } .compare-table tbody td { padding: 18px 20px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 15px; line-height: 1.55; color: var(--text-2); } .compare-table tbody td:first-child { color: var(--text); font-weight: 700; font-size: 15px; } .compare-table tbody td:nth-child(2) { color: var(--text-light); } .compare-table tbody td:nth-child(3) { color: var(--text); } .compare-table tbody td b { display: inline; font-weight: 700; color: inherit; } .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table tbody tr:hover td { background: var(--bg-soft); transition: background 0.15s; } @media (max-width: 768px) { .compare-table thead th, .compare-table tbody td { padding: 12px 10px; font-size: 13px; } .compare-table tbody td { line-height: 1.5; } } /* ============== CTA ============== */ .cta-section { background: var(--bg-soft); text-align: center; } /* ============== Footer ============== */ .footer { background: var(--bg-soft); padding: 32px 0 20px; border-top: 1px solid var(--border); } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; margin-bottom: 20px; } .footer-brand-col { max-width: 320px; } .footer-brand { font-size: 18px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: baseline; gap: 6px; } .footer-brand-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.5px; } .footer-tagline { font-size: 14px; color: var(--text-light); line-height: 1.6; } .footer-col h4 { font-size: 14px; font-weight: 600; margin-bottom: 10px; } .footer-col a { display: block; color: var(--text-light); font-size: 14px; margin-bottom: 5px; } .footer-col a:hover { color: var(--primary); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 16px; font-size: 13px; color: var(--text-light); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } @media (max-width: 600px) { .footer-inner { flex-direction: column; } .footer-bottom { flex-direction: column; text-align: center; } } /* hero-keywords (v54 chip) */ .hero-keywords { display: flex; gap: 8px; margin-top: 24px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; } .hero-keywords-label { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; margin-right: 2px; opacity: 0.65; line-height: 1; cursor: help; } .kw-chip { display: inline-flex; align-items: center; padding: 6px 14px; background: rgba(0,122,255,0.08); color: var(--primary); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.1px; border: 1px solid rgba(0,122,255,0.20); transition: all .15s ease; line-height: 1.3; } .kw-chip:hover { background: rgba(0,122,255,0.15); transform: translateY(-1px); border-color: rgba(0,122,255,0.40); } @media (max-width: 768px) { .hero-keywords { gap: 6px; margin-top: 16px; } .kw-chip { padding: 5px 11px; font-size: 12px; } .hero-keywords-label { font-size: 14px; } } /* ============== 平台自适应 · 蓄水版 (V45s_os) ============== 客户口径: Windows 分支 = 正常下载入口 ; Mac 分支 = 【咨询 / 预约】入口 (Mac 版安装器尚未实现, 不能给下载; 也绝不给"点了没反应"的死按钮) 机制: nginx 在 head 最前面给 html 打上 is-win / is-mac 兜底: 没有平台类时 (no-JS / 爬虫) -> 只露 Windows 分支, 页面自洽 注意: .btn-dl 自带 display:inline-flex important, 会盖掉行内 display:none, 所以"显示"规则必须同用 important 且优先级高于 .btn-dl */ html:not(.is-mac) [data-os-only="mac"] { display: none !important; } html.is-mac [data-os-only="win"] { display: none !important; } html.is-mac a[data-os-only="mac"], html.is-mac button[data-os-only="mac"] { display: inline-flex !important; } html.is-mac p[data-os-only="mac"], html.is-mac div[data-os-only="mac"] { display: block !important; } /* ============== OFFICE_LAYOUT_20261014: 正文两端对齐(与 maya / cad / sketchup / 3dsmax 同口径) ============== */ .hero .sub, .section .sub, .section-subtitle, .faq-a, .feature-section p, .hero-os-support, .trust p, .category-desc { text-align: justify; text-justify: inter-ideograph; -webkit-text-align-last: left; text-align-last: left; } .faq-q { text-align: left; } /* 问题行保持左对齐, 不参与两端对齐 */ /* ============== OFFICE_CARDS_20261014: 版本卡统一(居中 + 平台行 + 系统要求 + 分平台体积) ============== */ .version-card { text-align: center; align-items: center; gap: 10px; padding: 22px 18px 18px; border: 1px solid #E3E8EE; border-radius: 8px; background: #fff; } .version-card:hover { border-color: #B7CBDF; box-shadow: 0 6px 18px rgba(31,60,90,.07); transform: translateY(-2px); } .version-card.active { border-color: #EB3C00; background: linear-gradient(180deg, #FFF6F2 0%, #ffffff 100%); box-shadow: 0 6px 18px rgba(235,60,0,.14); } .version-card-info { align-items: center; gap: 0; } .version-card-name { font-size: 16px; font-weight: 700; letter-spacing: -.2px; } .version-card-name::after { content: "Windows 版 · 一键安装"; display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: #5b6470; letter-spacing: 0; } html.is-mac .version-card-name::after { content: "Mac 版 · 一键安装"; } .version-card-meta { font-size: 12px; color: #5b6470; margin-top: 4px; } .version-card-includes { width: 100%; font-size: 12px; color: #5b6470; padding-top: 12px; border-top: 1px solid #E3E8EE; } .version-card-includes strong { color: #2A3742; } .version-card-sizes { width: 100%; align-items: center; gap: 4px; padding-top: 12px; border-top: 1px solid #E3E8EE; } /* SYSREQ_API_ONLY_20261024: 原来这里写死「系统要求 Windows 10 / 11（64 位）」「macOS 12 或更高」。 现在改成读 office/index.html 从 /api/products/118/versions 写入的 data-req-text: 接口没给值 / 请求失败 -> 属性不存在 -> content 为空 -> 这一行不显示, 绝不回退到写死文案。字号/颜色/间距与原来一致。 */ .version-card-sizes::before { content: attr(data-req-text); font-size: 12px; font-weight: 600; color: #5b6470; } html.is-mac .version-card-sizes::before { content: attr(data-req-text); } .version-card-size { font-size: 14px; font-weight: 800; color: #111111; } .version-card-size .size-os { display: none; } /* 平台行已说明系统, 这里不重复 Win/Mac 前缀 */ html.is-mac .version-card-size:nth-child(1) { display: none; } /* Mac 访客只看 Mac 体积 */ html:not(.is-mac) .version-card-size:nth-child(2) { display: none; } /* Windows 访客只看 Win 体积 */ .version-card { padding-right: 18px !important; } /* 原来给右上角留的 44px 不再需要 */ /* ============== OFFICE_HEROEQ_20261014: hero 左右两栏等高 ============== */ .hero-grid { align-items: stretch; } /* 两栏拉伸到同一行高 */ .hero-text { display: flex; flex-direction: column; justify-content: center; } .hero-img { display: flex; } @media (min-width: 901px) { .hero-img { height: 100%; } .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; } } /* ============== OFFICE_REVIEW_20261014: 按 UI 评审整改 ============== */ /* ① 右下空洞: 三行说明列表 */ .hero-spec { list-style: none; margin: 28px 0 0; padding: 0; max-width: 620px; border-top: 1px solid #E7E9EC; } .hero-spec li { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #E7E9EC; } .hero-spec li > span { font-size: 13px; line-height: 1.8; color: #6B7280; } .hero-spec li > b { font-size: 14px; line-height: 1.7; font-weight: 600; color: #2A3742; } /* ② 信任条: 去掉灰底带子, 改成贴着正文的一行文本 */ [class*="trust"], [class*="badge"] { background: none !important; border-top: 0 !important; border-bottom: 0 !important; } [class*="trust"] *, [class*="badge"] * { font-size: 14px !important; color: #5A5F66 !important; } [class*="trust"] svg, [class*="badge"] svg { width: 16px; height: 16px; flex: none; color: var(--primary, #EB3C00); stroke-width: 1.75; } /* ③ 移动端 H1 / 正文不再右溢出 */ .hero h1, .hero .sub, .hero-spec { overflow-wrap: anywhere; } @media (max-width: 480px) { .hero h1 { font-size: 24px; line-height: 1.35; } } /* ⑤ 配图避免切头 */ .hero-img img { object-position: 62% 45%; } /* ⑥ 对比度: 区块说明文字加深(原 #9A9A9A = 2.68:1) */ .section .sub, .section-subtitle, .category-desc, .faq-a, .feature-section p { color: #5A5F66; } /* ⑦ 间距阶梯 */ .hero-text h1 { margin-bottom: 24px; } @media (min-width: 901px) { .hero { padding-top: 64px; } } /* ============== OFFICE_HEROTIDY_20261014: 一行式信息条(替代三行说明表) ============== */ .hero-meta { margin: 18px 0 0; font-size: 13.5px; line-height: 1.6; color: #5A5F66; letter-spacing: .2px; } .hero-spec { display: none !important; } /* 旧的三行说明表(若残留)不再显示 */ /* ============== OFFICE_HEROCTA_20261014: hero 立即下载按钮 ============== */ .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; } .hero-cta .btn-dl { min-height: 46px; padding: 0 30px; } /* ============== OFFICE_TRUSTMOVE_20261014: 信任标签在 hero 左栏内的排版 ============== */ .hero-text .trust-bar-inner, .hero-text [class*="trust-bar"] { max-width: none; margin: 22px 0 0; padding: 0; justify-content: flex-start; } .hero-text .trust-bar-inner > *, .hero-text [class*="trust-bar"] > * { font-size: 13px; } /* ============== OFFICE_TRUSTMOVE2_20261014: 标签一行放下 + 右图跟随更高的左栏拉伸 ============== */ .hero-text .trust-bar, .hero-text .trust-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; margin: 22px 0 0; padding: 0; max-width: none; } .hero-text .trust-tag { font-size: 12.5px; padding: 5px 10px; } .hero-grid { align-items: stretch !important; } .hero-img { align-self: stretch !important; height: auto !important; } .hero-img img { height: 100% !important; object-fit: cover; } /* ============== OFFICE_TRUSTMOVE3_20261014: 信任条(全页唯一)压成一行 + 右图与左栏等高 ============== */ .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; align-items: stretch !important; } .hero-grid > .trust-bar, .hero-grid > [class*="trust-bar"] { grid-column: 1 / 2; align-self: start; } .trust-bar, .trust-bar-inner { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; gap: 8px 10px !important; margin: 20px 0 0 !important; padding: 0 !important; max-width: none !important; background: none !important; border: 0 !important; } .trust-tag { font-size: 12.5px !important; padding: 5px 10px !important; } .hero-img { align-self: stretch !important; } .hero-img img { height: 100% !important; object-fit: cover; } /* ============== OFFICE_HEROIMG_20261014: 图片不拉高, 固定 16:10 + 两栏垂直居中 ============== */ .hero-grid { align-items: center !important; } .hero-img { align-self: center !important; height: auto !important; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; } .hero-img img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 58% 45%; display: block; } .hero-text { justify-content: center; } /* ============== OFFICE_TRUSTROW_20261014: C 方案 —— 信任标签回到 hero 下方整行, 居中一行 ============== */ .trust-bar { display: block; margin: 6px 0 34px; } .trust-bar-inner { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center !important; gap: 10px 12px !important; margin: 0 auto !important; padding: 0 !important; max-width: 1200px; } .trust-tag { font-size: 13px !important; padding: 6px 12px !important; } /* 左栏不再承载标签, 内容自然更短; 图文仍垂直居中 */ .hero-grid { align-items: center !important; } /* ============== OFFICE_HEROIMG2_20261014: 配图原始比例 + 收窄限宽(只变矮, 不裁切) ============== */ .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important; align-items: center !important; } .hero-img { aspect-ratio: auto !important; width: 100%; max-width: 470px; margin-left: auto; height: auto !important; overflow: hidden; border-radius: 14px; } .hero-img img { width: 100% !important; height: auto !important; object-fit: fill !important; display: block; } /* ============== OFFICE_TYPO_20261014: 照参考站口径的字体与字号 ============== */ .hero, .section, .faq-section, .feature-section, .trust-bar { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft JhengHei", "Segoe UI", Roboto, Arial, sans-serif; } .hero h1 { font-size: 40px !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -.5px !important; } .hero .sub { font-size: 15.5px !important; line-height: 1.8 !important; color: #5A5F66 !important; } .hero .sub strong { color: #2A3742; font-weight: 700; } .hero-cta .btn-dl .main { font-size: 16px !important; font-weight: 600 !important; } .trust-tag { font-size: 13px !important; } .section .sub, .section-subtitle, .faq-a, .feature-section p { font-size: 15px; line-height: 1.8; } .version-card-name { font-size: 17px !important; } @media (max-width: 900px) { .hero h1 { font-size: 30px !important; } .hero .sub { font-size: 15px !important; } } /* ============== OFFICE_SUBCOLOR_20261014: 副标题更大 + 深墨色(不用灰) ============== */ .hero .sub { font-size: 17.5px !important; line-height: 1.85 !important; color: #2A3742 !important; } .hero .sub strong { color: #111111 !important; font-weight: 700; } .section .sub, .section-subtitle { font-size: 15.5px; color: #3A4652; } @media (max-width: 900px) { .hero .sub { font-size: 16px !important; } } /* ============== OFFICE_TIGHTEN_20261014: 收紧首屏死白(hero 下沿 -> 信任行 -> 下一区块) ============== */ .hero { padding-bottom: 22px !important; } .trust-bar { margin: 10px 0 26px !important; } .hero-grid { row-gap: 18px !important; } #categorySection { padding-top: 34px !important; } /* 信任行与 hero 同宽同轴, 不再"悬在中间" */ .trust-bar-inner { justify-content: center !important; } /* ============== OFFICE_SUBFLAT_20261014: 副标题统一字重与墨色（不再粗细混排） ============== */ .hero .sub, .hero .sub strong, .hero .sub b { font-weight: 400 !important; color: #2A3742 !important; } /* ============== OFFICE_REVIEWS_20261014: 用户评价区 ============== */ .review-section { background: #F7F9FB; } .review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; } .review-card { background: #fff; border: 1px solid #E3E8EE; border-radius: 10px; padding: 22px 22px 20px; } .review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .review-avatar { width: 40px; height: 40px; border-radius: 50%; background: #FFF1EC; color: #C83200; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex: none; } .review-head b { display: block; font-size: 15px; font-weight: 700; color: #1F2328; } .review-head i { font-style: normal; font-size: 12.5px; color: #5B6470; } .review-stars { color: #F5A623; font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; } .review-text { margin: 0; font-size: 14.5px; line-height: 1.8; color: #2A3742; text-align: justify; text-justify: inter-ideograph; } @media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } } /* ============== OFFICE_CARDSTRONG_20261014: 版本卡视觉权重加强（布局不动） ============== */ .version-card { border: 1px solid #D8E0E9 !important; box-shadow: 0 2px 8px rgba(18,32,48,.06) !important; background: #fff !important; } .version-card:hover { border-color: #B7CBDF !important; box-shadow: 0 8px 20px rgba(18,32,48,.10) !important; } .version-card-name { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.3px !important; color: #1F2328 !important; } .version-card-meta { font-size: 12.5px !important; color: #5B6470 !important; } .version-card-includes { font-size: 12.5px !important; color: #3A4652 !important; } .version-card-size { font-size: 18px !important; font-weight: 800 !important; color: #111111 !important; } /* 选中卡：一眼可辨 */ .version-card.active { border: 2px solid #EB3C00 !important; background: linear-gradient(180deg, #FFF4EF 0%, #FFFFFF 62%) !important; box-shadow: 0 10px 24px rgba(235,60,0,.16) !important; } .version-card.active .version-card-name { color: #C53000 !important; } .version-card.active .version-card-size { color: #C53000 !important; } /* ============== OFFICE_CARDBTN_20261014: 卡片内「立即安装」按钮 ============== */ .v-btn-card { display: flex !important; width: 100% !important; min-height: 44px !important; margin-top: 16px !important; padding: 0 16px !important; justify-content: center !important; border-radius: 8px !important; font-size: 14px !important; } .v-btn-card .btn-text { align-items: center !important; } .v-btn-card .main { font-size: 14px !important; } .version-card-sizes { padding-top: 12px !important; } /* ============== OFFICE_CARDBTN3_20261014: 卡内按钮可见性 + 系统要求行兜底 ============== */ .version-card { height: auto !important; min-height: 0 !important; overflow: visible !important; } .v-btn-card { flex: none !important; position: relative !important; z-index: 2 !important; visibility: visible !important; opacity: 1 !important; } .version-card > .btn-dl, .version-card a.btn-dl { margin-top: auto !important; } .version-card-sizes { display: block !important; width: 100% !important; padding-top: 12px !important; border-top: 1px solid #E3E8EE !important; } .version-card-sizes::before { content: attr(data-req-text) !important; font-size: 12px !important; font-weight: 600 !important; color: #5B6470 !important; } html.is-mac .version-card-sizes::before { content: attr(data-req-text) !important; } /* ============== OFFICE_SECTIONBG_20261014: 段落交替底色（白色软件卡因此突出） ============== */ .hero { background: #F4F7FA !important; } .feature-section, .faq-section, .review-section { background: #F4F7FA !important; } #categorySection { background: #FFFFFF !important; } /* 浅底上的场景/应用卡补一点白与投影，避免糊成一片 */ .feature-section .sw-card, .feature-section .scene-card, .feature-section [class*="card"] { box-shadow: 0 2px 8px rgba(18,32,48,.06); } footer, .site-footer { background: #EEF2F7 !important; } /* ============== OFFICE_LAYERS_20261014: 段层次感（浅底 + 白色面板层 + 标题短线 + 节奏） ============== */ .section { padding: 72px 0 !important; } .section > .container { background: #FFFFFF; border-radius: 16px; padding: 48px 44px !important; box-shadow: 0 1px 2px rgba(18,32,48,.04), 0 12px 32px -12px rgba(18,32,48,.10); max-width: 1248px; } /* 首屏与评价区不套面板（它们本身已是整块底） */ .hero .container, .review-section .container { box-shadow: none !important; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; } /* 段落标题：橙色短线 + 更清晰的层级 */ .section-header .section-title, .section > .container > .section-title, .section h2.section-title { position: relative; padding-top: 18px; font-size: clamp(24px, 2.2vw, 30px) !important; font-weight: 800 !important; letter-spacing: -.4px !important; } .section-header .section-title::before, .section > .container > .section-title::before, .section h2.section-title::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; background: #EB3C00; border-radius: 2px; } .section-subtitle { margin-top: 10px !important; color: #5B6470 !important; font-size: 14.5px !important; } /* 面板内的卡片：靠白+描边分层，不再和面板抢投影 */ #categorySection .version-card, .sw-card, .review-card { box-shadow: 0 1px 2px rgba(18,32,48,.05) !important; } @media (max-width: 900px) { .section { padding: 44px 0 !important; } .section > .container { padding: 28px 20px !important; border-radius: 12px; } } /* ============== OFFICE_ALIGN_20261014: 版本卡所在子面板与段落面板对齐（去掉"面板套面板"的错位） ============== */ .section > .container > *:has(.version-card) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .section > .container > *:has(.version-card) > * { max-width: 100% !important; } /* 段落面板内的内容区与面板左右内边距对齐（表格/网格不越界） */ .section > .container > .section-header + * { margin-top: 0 !important; } /* ============== OFFICE_ALIGN2_20261014: 版本卡所在【最内层】祖先面板与段落对齐 ============== */ .section .container *:has(.version-card):not(:has(*:has(.version-card))) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .section .container *:has(.version-card):not(:has(*:has(.version-card))) > * { max-width: 100% !important; } /* ============== OFFICE_SPACEALIGN_20261014: 段落间隔统一收窄 + 左右对齐 ============== */ /* ① 间隔：每段上下各 36px（相邻两段之间 72px），所有段落一律相同 */ .section, .feature-section, .faq-section, .review-section, #categorySection { padding: 36px 0 !important; margin: 0 !important; } .section > .container { padding: 44px 44px !important; margin: 0 auto !important; } /* ② 对齐：所有段落面板同宽同左右边距 */ .section > .container { max-width: 1248px !important; width: 100% !important; } /* 面板首个/末个子元素不额外顶出或内缩 */ .section > .container > *:first-child { margin-top: 0 !important; } .section > .container > *:last-child { margin-bottom: 0 !important; } /* ③ 版本卡所在子面板：去掉框/内边距/底色，与段落面板对齐 */ .version-grid { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .version-grid > * { max-width: 100% !important; } /* ============== OFFICE_ALIGN3_20261014: 段落面板内所有直接子块拉平对齐 ============== */ .section > .container > div, .section > .container > section { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* 只有确实需要"卡中卡"的那层（版本卡外层、应用卡外层）不加框，其余内层框一律去掉 */ .section > .container > div { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } /* 段落之间再加一点点呼吸，但统一 */ .section { padding: 40px 0 !important; } /* ============== OFFICE_ALIGN4_20261014: 段落面板内的子块一律撑满（左右对齐） ============== */ .section .container > div[class], .section .container > div[class] > div[class] { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* 但网格本身要保留列结构，只放开容器宽度 */ .section .container > div[class] { width: 100% !important; } /* ============== OFFICE_CARDGAP_20261014: 版本卡行左右加间隙（不再试图加宽外层内容） ============== */ /* 收回前面几条加宽尝试的副作用：只取消宽度/边距的强制，不动网格列结构 */ .section > .container > div, .section > .container > section { width: auto !important; } /* 版本卡行：左右留出与面板内容一致的间隙，卡间距略放大 */ .version-grid { padding: 4px 20px 0 !important; column-gap: 18px !important; row-gap: 18px !important; } .version-grid .version-card { } /* ============== OFFICE_SWALIGN_20261014: 版本卡所在块与其它段落面板左右对齐（按实测数据） ============== */ #swVersionsBlock.sw-versions-block { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #categorySection > .container { max-width: 1248px !important; padding: 44px 44px !important; } #versionGrid.version-grid { padding-left: 0 !important; padding-right: 0 !important; } /* ============== OFFICE_SWFRAME_20261014: 恢复「Office 全套」外框 + 保持左右对齐 ============== */ #swVersionsBlock.sw-versions-block { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 24px !important; border: 1px solid #E3E8EE !important; border-radius: 14px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(18,32,48,.05) !important; } /* 卡片行回到该框内、左右留出与框一致的间隙 */ #versionGrid.version-grid { padding-left: 0 !important; padding-right: 0 !important; } /* ============== OFFICE_SWEDGE_20261014: 「Office 全套」外框与段落面板外缘齐平 ============== */ #swVersionsBlock.sw-versions-block { width: calc(100% + 88px) !important; max-width: none !important; margin-left: -44px !important; margin-right: -44px !important; padding: 24px !important; border: 1px solid #E3E8EE !important; border-radius: 14px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(18,32,48,.05) !important; } /* ============== OFFICE_SWNOWIDEN_20261014: 卡片行宽度还原（框仍与段落外缘齐平） ============== */ #versionGrid.version-grid { padding-left: 69px !important; padding-right: 69px !important; } @media (max-width: 1248px) { #versionGrid.version-grid { padding-left: 24px !important; padding-right: 24px !important; } } @media (max-width: 900px) { #versionGrid.version-grid { padding-left: 0 !important; padding-right: 0 !important; } } /* ============== OFFICE_CARDGAP2_20261014: 版本卡之间加大间隙（铺满框宽，卡宽不变） ============== */ #versionGrid.version-grid { column-gap: 36px !important; row-gap: 20px !important; } @media (max-width: 1248px) { #versionGrid.version-grid { column-gap: 20px !important; } } @media (max-width: 900px) { #versionGrid.version-grid { column-gap: 16px !important; } } /* ============== OFFICE_ALIGNUP_20261014: 版本卡行与上方内容左右对齐 + 间隙 50px + 卡宽不变 ============== */ #versionGrid.version-grid { padding-left: 20px !important; padding-right: 20px !important; column-gap: 50px !important; } @media (max-width: 1248px) { #versionGrid.version-grid { padding-left: 12px !important; padding-right: 12px !important; column-gap: 24px !important; } } @media (max-width: 900px) { #versionGrid.version-grid { padding-left: 0 !important; padding-right: 0 !important; column-gap: 16px !important; } } /* 卡内系统要求行不再折行 */ .version-card-sizes { font-size: 12px !important; white-space: nowrap !important; } .version-card.active .version-card-sizes { font-size: 11.5px !important; } /* ============== OFFICE_FIVE_20261014 ============== */ /* 1 版本卡悬浮 */ .version-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } .version-card:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 30px rgba(18,32,48,.14) !important; border-color: #C9D6E4 !important; } /* 2 卡内下载按钮 */ .v-btn-card { display: flex !important; width: 100% !important; min-height: 44px !important; margin: 16px 0 0 !important; padding: 0 14px !important; justify-content: center !important; align-items: center !important; border-radius: 8px !important; font-size: 14px !important; } .v-btn-card .main { font-size: 14px !important; } /* 3 信任行 -> 分隔条 */ .trust-bar { background: #F1F5F9 !important; border-top: 1px solid #E3E8EE !important; border-bottom: 1px solid #E3E8EE !important; } .trust-bar-inner { padding: 14px 0 !important; } /* 4 区块标题行淡背景 */ .section-header { background: #F7F9FB !important; border: 1px solid #EDF1F5 !important; border-radius: 10px !important; padding: 14px 18px !important; } .section-title::before { display: none !important; } /* 标题行已有底色，短线去掉更干净 */ .section-title { padding-top: 0 !important; } /* 5 每段上下间隔统一 */ .section, .feature-section, .faq-section, .review-section, #categorySection, .cta-section { padding-top: 40px !important; padding-bottom: 40px !important; margin: 0 !important; } /* ============== OFFICE_BTNVISIBLE_20261014: 卡内按钮独立底色（不再依赖 data-os） ============== */ .v-btn-card { background: #EB3C00 !important; color: #FFFFFF !important; border: 0 !important; box-shadow: 0 3px 10px rgba(235,60,0,.22) !important; font-weight: 700 !important; transition: background .15s ease, transform .12s ease; } .v-btn-card:hover { background: #C53000 !important; transform: translateY(-1px) !important; } .v-btn-card:active { background: #A82A00 !important; transform: translateY(0) !important; } .v-btn-card::before { display: none !important; } /* 卡内按钮不要平台图标，保持纯文字 */ .v-btn-card .main, .v-btn-card .btn-text { color: #FFFFFF !important; } /* ============== OFFICE_TRUSTRV_20261014 ============== */ /* 1 信任行：紧贴标题区 + 更深的底色（与标题栏区分） */ .hero { padding-bottom: 0 !important; } .trust-bar { margin: 0 !important; background: #E7EEF6 !important; border-top: 1px solid #D3DEEA !important; border-bottom: 1px solid #D3DEEA !important; } .trust-bar-inner { padding: 13px 0 !important; } .trust-bar-inner .trust-tag, .trust-bar-inner > * { color: #33414F !important; font-weight: 600 !important; } .trust-bar-inner svg, .trust-bar-inner img { color: #C83200 !important; opacity: 1 !important; } /* 2 用户评价区：加白面板外框（与其它段落一致） */ .review-section > .container { background: #FFFFFF !important; border-radius: 16px !important; padding: 44px 44px !important; box-shadow: 0 1px 2px rgba(18,32,48,.04), 0 12px 32px -12px rgba(18,32,48,.10) !important; } .review-section .section-header { background: #F7F9FB !important; border: 1px solid #EDF1F5 !important; border-radius: 10px !important; padding: 14px 18px !important; } /* ============== OFFICE_TOPFLAT_20261014: 顶部统一底色（消除突兀的浅灰叠浅灰） ============== */ .hero { background: #FFFFFF !important; padding-bottom: 8px !important; } .trust-bar { background: transparent !important; border-top: 1px solid #E6EBF1 !important; border-bottom: 1px solid #E6EBF1 !important; margin: 0 !important; } .trust-bar-inner { padding: 14px 0 !important; } .trust-bar-inner .trust-tag, .trust-bar-inner > * { color: #46505C !important; font-weight: 600 !important; } .trust-bar-inner svg, .trust-bar-inner img { color: #C83200 !important; } /* 第一段（应用/版本区）紧接信任行，不留第二层浅底 */ #categorySection { background: #FFFFFF !important; padding-top: 28px !important; } /* ============== OFFICE_TOPTINT_20261014: 顶部淡品牌暖色（与下方纯白段落形成冷暖分层） ============== */ .hero { background: linear-gradient(180deg, #FFF4EE 0%, #FFFAF7 68%, #FFFFFF 100%) !important; padding-bottom: 8px !important; } .hero h1 { color: #1F2328 !important; } .hero .sub { color: #33414F !important; } .trust-bar { background: transparent !important; border-top: 1px solid #F0E1D8 !important; border-bottom: 1px solid #EDE3DC !important; } .trust-bar-inner .trust-tag, .trust-bar-inner > * { color: #4A4038 !important; font-weight: 600 !important; } /* ============== OFFICE_PANELB_20261014: B 方案 —— 面板描边 1.5px #D6DEE7 + 投影加深 ============== */ .section > .container, .review-section > .container, .cta-section > .container { border: 1.5px solid #D6DEE7 !important; box-shadow: 0 3px 6px rgba(18,32,48,.07), 0 26px 50px -22px rgba(18,32,48,.24) !important; } /* 面板里的小卡保持轻描边，避免"框套框"太吵 */ .version-card, .review-card, .sw-card { border-width: 1px !important; border-color: #E3E8EE !important; } /* 段落之间留白略增，投影有地方落 */ .section, .feature-section, .faq-section, .review-section, #categorySection, .cta-section { padding-top: 48px !important; padding-bottom: 48px !important; } /* ============== OFFICE_PANELB2_20261014: 「Office 全套」嵌套块用同款描边/投影 ============== */ #swVersionsBlock.sw-versions-block { border: 1.5px solid #D6DEE7 !important; box-shadow: 0 3px 6px rgba(18,32,48,.07), 0 26px 50px -22px rgba(18,32,48,.24) !important; } /* ============== OFFICE_BELOWPLAIN_20261014: 只留顶部暖色，下方段落不再有底色 ============== */ #categorySection, .feature-section, .faq-section, .review-section, .cta-section, .section, section.section { background: transparent !important; } /* 面板仍是纯白 + 描边 + 投影（层次靠这个，不靠底色） */ .section > .container, .review-section > .container, .cta-section > .container, #swVersionsBlock.sw-versions-block { background: #FFFFFF !important; } /* ============== OFFICE_CENTERFIX2_20261014: 仅 CTA 区的副标题居中（含"立即下载 Office 办公软件"那节） ============== */ .cta-section .section-subtitle { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .cta-section .section-title { text-align: center !important; } .cta-section .section-header { text-align: center !important; } /* ============== OFFICE_UNIWIDTH_20261014: 全站统一版心 1140px（实测：原本 1200/1248 两套 -> 造成"有的窄有的宽"） ============== */ .container, .hero .container, .hero-grid { max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; } .section > .container, .review-section > .container, .cta-section > .container { max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; } /* 全套块仍按段落内边距 44px 外扩，左右与段落外缘齐平 */ #swVersionsBlock.sw-versions-block { width: calc(100% + 88px) !important; max-width: none !important; margin-left: -44px !important; margin-right: -44px !important; } /* ============== OFFICE_FIXCAT_20261014: 统一 #categorySection 容器到 1140（实测它曾是 1248） ============== */ #categorySection > .container, #categorySection.section > .container { max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; padding: 44px 44px !important; } /* ============== OFFICE_WEDGEFIX_20261014: 全套外框外扩量按实测修正（-44/+88 -> -24/+48），与各段落面板对齐 ============== */ #swVersionsBlock.sw-versions-block { width: calc(100% + 48px) !important; max-width: none !important; margin-left: -24px !important; margin-right: -24px !important; box-sizing: border-box !important; } /* ============== OFFICE_MACOPT2_20261014: Mac 访客的卡片文案（平台行 + 系统要求行） ============== */ .version-card-name::after { content: "Windows 版 · 一键安装" !important; } html.is-mac .version-card-name::after { content: "Mac 版 · 一键安装" !important; } .version-card-sizes::before { content: attr(data-req-text) !important; } html.is-mac .version-card-sizes::before { content: attr(data-req-text) !important; } /* Mac 访客：hero 的支撑文案也换成 Mac 口径（对应 Windows 侧那句） */ html.is-mac .hero-os-support { color: #33414F !important; } /* SYSREQ_API_ONLY_20261024: 以下 4 条按版本写死的 Mac 系统要求已删 —— 现在四张卡都读接口(DB) 的 requirements。 */ /* ============== OFFICE_NAV3_20261014: 顶栏三件套样式（搬自 sketchup，与 3ds Max/PS 口径一致） ============== */ .nav-actions { display: flex; gap: 8px; align-items: center; } .nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; transition: all 0.2s; white-space: nowrap; } .nav-btn-outline { background: transparent; color: var(--text-pale); border: 1px solid var(--primary-light); } .nav-btn-outline:hover { background: rgba(74,142,212,0.15); color: #fff; border-color: var(--primary); } .nav-btn-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); } .nav-btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--primary-shadow); } /* ============== 平台自适应 · 蓄水版 (V45s_os) ============== 客户口径(2026-10-14 更新): Windows / Mac 分支 = 各自的正常下载入口 (Mac 版各版本安装包已齐全; 平台不对就不显示, 也绝不给"点了没反应"的死按钮) 机制: nginx 在 head 最前面给 html 打上 is-win / is-mac 兜底: 没有平台类时 (no-JS / 爬虫) -> 只露 Windows 分支, 页面自洽 注意: 本站按钮是 .v-btn / .nav-btn (display:inline-flex), 所以"显示"规则要给回 inline-flex */ html:not(.is-mac) [data-os-only="mac"] { display: none !important; } /* ============== OFFICE_NAVLINKS_20261014: 导航左侧链接容器（搬自 sketchup） ============== */ .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links a { font-size: 14px; color: var(--text-pale); transition: color 0.2s; } .nav-links a:hover { color: #fff; } .nav-links { display: none; } /* ============== OFFICE_NAVUNI_20261014: 顶栏三颗按钮完全一致（同尺寸/同色/同样式） ============== */ .nav-actions { display: flex !important; align-items: center !important; gap: 10px !important; } .nav-actions .nav-btn, .nav-actions > a, .nav-actions > div, .nav-actions [role="button"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; min-width: 110px !important; padding: 0 14px !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; border: 1px solid #D6DEE7 !important; border-radius: 8px !important; background: #FFFFFF !important; color: #1F2328 !important; box-shadow: none !important; transition: background .15s ease, border-color .15s ease; } .nav-actions .nav-btn:hover, .nav-actions > a:hover, .nav-actions > div:hover, .nav-actions [role="button"]:hover { background: #F5F8FB !important; border-color: #C2CFDD !important; color: #111417 !important; } .nav-actions svg, .nav-actions img { width: 15px !important; height: 15px !important; margin-right: 6px !important; flex: none !important; } /* ===== RVSK-END ===== */ /* ============== SKETCHUP_PAYFOCUS_20261014: 弹窗输入框只保留一条边框(聚焦变蓝), 去掉叠加的外描边 ============== */ #payMask .pay-input, #suMask .pay-input { border: 1px solid var(--border); border-radius: 4px; } #payMask .pay-input:focus, #suMask .pay-input:focus { border-color: var(--primary); } #payMask .pay-input:focus-visible, #suMask .pay-input:focus-visible { outline: none !important; } /* ============== OFFICE_NAVLINKSFIX_20261014: 修 .nav-links 被隐藏（实测 display:none） ============== */ .nav .nav-links, .nav-inner .nav-links, .nav-actions ~ .nav-links, div.nav-links { display: flex !important; align-items: center !important; gap: 22px !important; } .nav .nav-links > a, .nav-inner .nav-links > a, div.nav-links > a { display: inline-flex !important; align-items: center !important; color: #1F2328 !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; padding: 6px 2px !important; white-space: nowrap !important; } .nav .nav-links > a:hover, div.nav-links > a:hover { color: #EB3C00 !important; } /* 让导航内部成为一行：品牌 | 链接 | 动作按钮 */ .nav-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; } .nav-actions { margin-left: auto !important; } /* ============== OFFICE_NAVGAP_20261014: 品牌与导航链接之间留出间距 ============== */ .nav .nav-links, .nav-inner .nav-links, div.nav-links { margin-left: 32px !important; margin-right: 16px !important; } .nav .nav-actions, div.nav-actions { margin-left: auto !important; } .nav-inner { gap: 0 !important; } /* ============== Modal (严按同行) ============== */ .modal-mask{ position: fixed; inset: 0; background: rgba(17,39,84,0.85); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; } .modal-mask.open{ display: flex; } .modal{ background: #fff; border-radius: 16px; padding: 32px 28px; max-width: 480px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.50); position: relative; max-height: 88vh; overflow: auto; } .modal-close{ position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); color: var(--ink); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .modal-close:hover{ background: var(--border); } .modal-title{ font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 6px; text-align: center; } .modal-sub{ text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 22px; } .modal-options{ display: grid; gap: 12px; } .modal-opt{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg-soft-3); border: 2px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--ink); transition: all 0.2s; cursor: pointer; } .modal-opt:hover{ border-color: var(--primary); background: #fff; box-shadow: var(--primary-shadow); transform: translateY(-1px); } .modal-opt-icon{ width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; border: 1px solid var(--border); } .modal-opt-icon.win{ color: var(--primary); } .modal-opt-icon.mac{ color: var(--ink-2); } .modal-opt-text{ flex: 1; } .modal-opt-name{ font-size: 15px; font-weight: 700; color: var(--ink); } .modal-opt-desc{ font-size: 12px; color: var(--text-muted); margin-top: 2px; } .modal-opt-arrow{ color: var(--text-muted); font-size: 18px; } /* ============== OFFICE_MODALCSS4_20261014: 弹窗/遮罩定形（取自 cad/engine.css 的 .pay-*） ============== */ /* ============== 弹窗骨架 (登录 / 我的订单 / 支付) ============== 来源: /adobe/app.css .pay-mask / .pay-modal / .pay-modal-header / .pay-modal-body / .pay-modal-close */ .pay-mask{ position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .pay-mask[hidden]{ display: none !important; } .pay-modal{ background: #fff; border-radius: 14px; width: 100%; max-width: 420px; max-height: 95vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25); } .pay-modal-header{ display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 700; color: var(--ink); } .pay-modal-close{ background: none; border: none; font-size: 22px; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 0; } .pay-modal-close:hover{ background: #F5F5F7; color: #1D1D1F; } .pay-modal-body{ padding: 22px; } /* ============== 表单控件 (支付 / 登录 / 订单查询) ============== */ .pay-input{ width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; outline: none; box-sizing: border-box; color: var(--ink); background: #fff; } .pay-input:focus{ border-color: var(--primary); } .pay-input:focus-visible{ outline: 2px solid var(--primary) !important; outline-offset: 2px; } /* CAD: 原值 #001E36 / #001A2E 是 Adobe 品牌深蓝 -> 改成本站 --primary 系 */ .pay-btn-primary{ width: 100%; padding: 12px; background: var(--primary); color: #fff; border-radius: 8px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; } .pay-btn-primary:hover{ background: var(--primary-dark); } .pay-btn-primary:disabled{ background: #C7C7CC; cursor: not-allowed; } .pay-btn-secondary{ width: 100%; padding: 12px; background: var(--bg-soft); color: var(--ink); border-radius: 8px; border: 1px solid var(--border); font-size: 15px; font-weight: 600; cursor: pointer; } .pay-btn-secondary:hover{ background: #F5F5F7; } /* ============== Windows 分支不露"钱" (客户既有口径, 照搬 /adobe/app.css) ============== */ body.is-win .pay-bar, body.is-win .pay-bar-wrap, body.is-win .paybar, body.is-win [id^="payBar"], body.is-win [class*="pay-bar"]:not(.pay-bar-price), body.is-win .v-price-bundle, body.is-win .version-option-price{ display: none !important; } /* CAD_MODAL91_20261012_063209: 套用 9.1 终稿（瑞士网格派）视觉 —— 仅本页、仅 #payMask 支付弹窗 令牌沿用 CAD 自己的: --ink #112754 / --primary #2060b0 / --border #C8D9EE / --text-muted #4A7AAA 间距阶梯 4/8/12/16/24/32；圆角统一 4px；选中态 = 整行浅底 #EAF2FA + 左侧 3px 强调竖条（不用发光） ✗ 未改任何 id / 事件 / 模板字符串 / 支付逻辑；✗ 价格显示保持现状（不渲染）*/ #payMask .pay-modal{ border-radius: 4px; } #payMask .pay-modal-body{ padding: 10px 20px 16px; } #payModalBody .pay-input{ height: 44px; padding: 0 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 4px; } #payModalBody .pay-btn-primary{ height: 44px; margin-top: 24px !important; font-size: 15px; font-weight: 600; border-radius: 4px; } #payModalBody .version-option:focus-visible, #payModalBody .pay-btn-primary:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; } #payModalBody .pay-btn-primary:active{ transform: translateY(1px); } /* CAD_V3_$TS: 分区步骤式（3 段小标题 + 段间 1px 线）—— 仅本页、仅 #payModalBody 字号 12/14/15；间距 8/12/20/24；纸白底 + 1 条线分组；无卡片套卡片；无渐变/发光 */ #payModalBody .pay-selected-version, #payModalBody .version-options{ margin-top: 8px; } #payModalBody .pay-selected-version{ padding: 14px 16px; background: #EAF2FA; border: 2px solid var(--primary); border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } #payModalBody .pay-input{ height: 44px; padding: 0 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 4px; } #payModalBody .pay-btn-primary{ height: 44px; margin-top: 8px !important; font-size: 15px; font-weight: 600; border-radius: 4px; } #payModalBody .pay-btn-primary:active{ transform: translateY(1px); } /* CAD_NOSEC_20261012_065544: 去掉三段编号文案后，把两条 1px 分组线改挂到相邻块 —— 线① = 版本区下沿（#versionOptions / .pay-selected-version 的 border-bottom） 线② = 手机号区下沿（#payMsg 的 border-bottom）⇒ 观感仍是「版本区 ─ 手机号区 ─ 支付区」*/ #payModalBody .version-options, #payModalBody .pay-selected-version{ padding-bottom: 20px; border-bottom: 1px solid var(--border); } /* 完成态平时不占高（复核 ✔）*/ #payMask:has(.sd-root) .pay-modal-body{ padding: 6px 20px 8px; } /* 仅当弹窗体内是成功页时生效；共享规则 #payMask .pay-modal-body 不动 */ html body .pay-mask[hidden]{ display: none; } /* ② 隐藏标题文字（id 保留 ✔）*/ #payMask:has(.sd-root) .pay-modal-header{ justify-content: flex-end; padding: 6px 12px; } /* ① 按钮 13.5 → 14px */ #payMask:has(.sd-root) #payModalBody .pay-input{ border-radius: 6px; } #payModalBody #subEmail, #payModalBody .pay-input{ border-radius: 0; border-color: #8a8a8a; font-size: 14px; } #lineMask .pay-modal-header span{ font-size: 22px; line-height: 1.2; letter-spacing: 0; font-weight: 600; } #lineMask .pay-modal-header span{ color: #000; } /* CAD_TITLESCOPE_20261013_051735: 标题规则去掉 #payModalBody 前缀（标题在 .pay-modal-header 里，不是 #payModalBody 的后代 ⇒ 旧规则永不命中 ✗）*/ #payMask .pay-modal-header span{ font-size: 22px; line-height: 1.2; font-weight: 600; color: #000; letter-spacing: 0; } #payMask .pay-modal-header .pay-title-sub{ display: block; font-size: 14px; line-height: 1.45; font-weight: 400; color: #212121; } /* 10 → 14（可见按钮；主按钮已隐藏）*/ /* CAD_TOPSHRINK_20261013_051909: 只从上方收（支付弹窗体上内距 22 → 12px ✔ 仅上方 ✔ 字号/文案/二维码未动 ✔）*/ #payMask .pay-modal-body{ padding-top: 4px; } #payMask .pay-modal-header{ border-bottom-color: #e5e5e5; } #payMask .pay-modal-header span{ font-size: 17px; line-height: 1.25; } #payMask .pay-modal-header .pay-title-sub{ display: inline; font-size: 13px; line-height: 1.25; font-weight: 400; color: #212121; margin-left: 6px; } #payMask .pay-modal-body{ padding-top: 0; } #payMask:has(.qrcode-img) .pay-modal-header{ padding-bottom: 10px; } #payMask:has(.install-guide) .pay-modal-header{ justify-content: flex-end; padding: 6px 12px; } /* CAD_P0_20261013_073442: P0-A 两行合并为页尾注 ｜ P0-B 去标题栏底带+×浮右上 ｜ P1-A 间距尺 16/8/8/16 ✗ 不用 !important ✔ */ #payMask:has(.install-guide) .pay-modal-header{ background: #fff; border-bottom: 0; padding: 0; min-height: 0; position: relative; } #payMask:has(.install-guide) .pay-modal-close{ position: absolute; right: 10px; top: 8px; } #orders-mask .pay-modal-header span, #orders-mask .modal-title{ font-size: 21px; line-height: 1.2; font-weight: 600; color: #000; } #orders-mask .pay-modal-header{ border-bottom: 1px solid #e5e5e5; } #orders-mask .order-input, #orders-mask .pay-input{ font-size: 14px; line-height: 1.5; color: #212121; letter-spacing: 0; } /* CAD_ORDERSAC_20261013_074441: 部件A 订单视图圆角 14→2px（仅两个订单视图）｜ 部件C 手机号查询版套同一体系 ✗ 不用 !important ✔ 只覆盖、不改共享类 ✔ */ #orders-mask .pay-modal, #orders-mask .modal, #ordersMask .pay-modal, #ordersMask .modal{ border-radius: 2px; } #ordersMask .pay-modal-header span, #ordersMask .modal-title{ font-size: 21px; line-height: 1.2; font-weight: 600; color: #000; } #ordersMask .pay-modal-header{ border-bottom: 1px solid #e5e5e5; } #ordersMask, #ordersMask .pay-modal{ color: #212121; } #ordersMask .pay-input, #ordersMask #ordersPhone{ height: 44px; font-size: 14px; color: #212121; border-radius: 2px; box-sizing: border-box; } #actqMask .pay-modal, #orderDetailMask .pay-modal, #cadActqMask .pay-modal, #actqMask .modal, #orderDetailMask .modal, #cadActqMask .modal{ border-radius: 2px; } #actqMask .pay-modal-header span, #orderDetailMask .pay-modal-header span, #cadActqMask .pay-modal-header span{ font-size: 21px; line-height: 1.2; font-weight: 600; color: #000; } #actqMask .pay-modal-header, #orderDetailMask .pay-modal-header, #cadActqMask .pay-modal-header{ border-bottom: 1px solid #e5e5e5; } #actqMask .pay-input, #orderDetailMask .pay-input, #cadActqMask .pay-input{ height: 44px; font-size: 14px; color: #212121; border-radius: 2px; box-sizing: border-box; } #actqMask .pay-btn-primary, #orderDetailMask .pay-btn-primary, #cadActqMask .pay-btn-primary, #actqMask #cadActqSubmit, #orderDetailMask #cadActqSubmit, #cadActqMask #cadActqSubmit{ height: 44px; padding: 0 20px; background: #000; border: 1px solid #000; border-radius: 2px; color: #FFFFFF; font-size: 14px; font-weight: 600; letter-spacing: 0; } #actqMask .pay-btn-secondary, #orderDetailMask .pay-btn-secondary, #cadActqMask .pay-btn-secondary{ height: 44px; padding: 0 20px; background: #FFFFFF; border: 1px solid #8a8a8a; border-radius: 2px; color: #000; font-size: 14px; font-weight: 600; letter-spacing: 0; } /* ============== OFFICE_LOGINST_20261014: VIP 徽标样式（取自 cad/engine.css） ============== */ .topbar-vip-badge{ display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%); color: #1D1D1F; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(245,158,11,0.25); margin-left: 6px; cursor: default; user-select: none; } /* ============== 会员横幅 (VIP 分支; CAD 页当前不会走到, 保留以免引擎报错) ============== */ .vip-member-banner{ background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%); color: #1D1D1F; padding: 16px 20px; border-radius: 14px; margin-bottom: 16px; text-align: center; font-weight: 700; font-size: 16px; box-shadow: 0 8px 24px rgba(255,165,0,0.30); border: 1px solid #FFA500; } /* ============== OFFICE_NAVCENTER_20261014: 顶栏三颗按钮内容居中（含 cad 替换进来的登录按钮） ============== */ .nav-actions #btn-login, .nav-actions #btn-orders, .nav-actions #btn-kefu, .nav-actions .nav-btn, .nav-actions > a, .nav-actions > div { justify-content: center !important; align-items: center !important; text-align: center !important; padding-left: 14px !important; padding-right: 14px !important; } .nav-actions #btn-login-text, .nav-actions .nav-btn span, .nav-actions > a span, .nav-actions > div span { text-align: center !important; flex: 0 1 auto !important; margin: 0 !important; } /* 图标与文字间距一致 */ .nav-actions svg, .nav-actions img { margin-left: 0 !important; margin-right: 7px !important; flex: none !important; } /* ============== OFFICE_NAVVCENTER_20261014: 三颗按钮内容垂直居中（修"手机号太靠上"） ============== */ .nav-actions #btn-login, .nav-actions #btn-orders, .nav-actions #btn-kefu, .nav-actions .nav-btn, .nav-actions > a, .nav-actions > div { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .nav-actions #btn-login > *, .nav-actions #btn-orders > *, .nav-actions #btn-kefu > *, .nav-actions #btn-login-text { display: inline-flex !important; align-items: center !important; line-height: 1 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle !important; } .nav-actions #btn-login svg, .nav-actions #btn-orders svg, .nav-actions #btn-kefu svg { display: block !important; vertical-align: middle !important; } /* ============== OFFICE_ORDERSMASK_CSS_20261014: 订单弹窗样式（取自 cad/engine.css） ============== */ /* ============== 我的订单 (表格式弹窗) ============== 来源: /adobe/app.css .modal-mask / .modal-wide / .modal-header / .modal-close-x / .modal-body / .order-query-form / .order-input / .action-btn-primary / .order-result / .order-table / .order-download-btn ★ 注意: app.css 里也有一个 .modal-mask (是 SketchUp 皮肤的 OS 弹窗, display:none 直到 .open)。 本文件在 app.css 之后加载, 这里显式给出 [hidden] 规则, 保证两种用法都不串。 */ .modal-mask{ position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; } .order-input{ flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--ink); background: #fff; font-family: inherit; } .order-input:focus{ outline: 2px solid var(--primary); border-color: var(--primary); } .order-table{ width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; } .order-table tr{ border-bottom: 1px solid var(--border); } .order-table tr:last-child{ border-bottom: none; } .order-table th{ text-align: left; padding: 10px 12px; color: var(--ink-3); font-weight: 500; background: var(--bg-soft); } .order-table td{ padding: 10px 12px; color: var(--ink); word-break: break-all; } /* CAD_ORDERS1_20261013_074145: 表格版「我的订单」字体族+标题21/1.2/600/#000+正文14/1.5/#212121+小字12.5/1.45+分隔线1px #e5e5e5 ✗ 未动圆角/按钮/emoji/另一视图 ✔ 不用 !important ✔ */ #orders-mask, #orders-mask *{ font-family: ArtifaktElement, Arial, sans-serif; letter-spacing: 0; } #orders-mask .pay-modal-header span, #orders-mask .modal-title{ font-size: 21px; line-height: 1.2; font-weight: 600; color: #000; } #orders-mask .pay-modal-header{ border-bottom: 1px solid #e5e5e5; } #orders-mask .order-table, #orders-mask .order-table td, #orders-mask .order-table th, #orders-mask .order-result, #orders-mask #ordersList{ font-size: 14px; line-height: 1.5; color: #212121; } #orders-mask .order-table tr{ border-bottom: 1px solid #e5e5e5; } #orders-mask .order-table th{ border-bottom: 1px solid #e5e5e5; color: #212121; } #orders-mask .order-input, #orders-mask .pay-input{ font-size: 14px; line-height: 1.5; color: #212121; letter-spacing: 0; } #orders-mask small, #orders-mask .order-sub, #orders-mask .order-meta{ font-size: 12.5px; line-height: 1.45; color: #212121; } /* CAD_ORDERS2_20261013_074228: 部件二 表格版「我的订单」按钮套参考体系（主=纯黑44px方角/次=白底1px #8a8a8a/禁用=中性灰）✗ 未动圆角/emoji/另一视图 ✔ 不用 !important ✔ */ #orders-mask .action-btn-primary{ height: 44px; padding: 0 20px; background: #000; border: 1px solid #000; border-radius: 2px; color: #FFFFFF; font-size: 14px; font-weight: 600; letter-spacing: 0; } #orders-mask .action-btn-primary:hover{ background: #000; border-color: #000; } #orders-mask .action-btn-primary:disabled{ background: #e5e5e5; border-color: #e5e5e5; color: #5c5c5c; cursor: not-allowed; } #orders-mask .order-download-btn{ height: 36px; padding: 0 16px; background: #FFFFFF; border: 1px solid #8a8a8a; border-radius: 2px; color: #000; font-size: 14px; font-weight: 600; letter-spacing: 0; } #orders-mask .order-download-btn:hover{ background: #FFFFFF; border-color: #000; color: #000; } /* CAD_ORDERSAC_20261013_074441: 部件A 订单视图圆角 14→2px（仅两个订单视图）｜ 部件C 手机号查询版套同一体系 ✗ 不用 !important ✔ 只覆盖、不改共享类 ✔ */ #orders-mask .pay-modal, #orders-mask .modal, #ordersMask .pay-modal, #ordersMask .modal{ border-radius: 2px; } /* ============== OFFICE_MASKGUARD_20261014: 任何带 hidden 的遮罩必须真正隐藏（含 .modal-mask） ============== */ [hidden], .modal-mask[hidden], .pay-mask[hidden], #orders-mask[hidden], #loginMask[hidden], #ordersMask[hidden], #payMask[hidden], #loginMask[hidden] { display: none !important; } /* ============== OFFICE_MODALWIDE_20261014: .modal 整套（取自 cad 的 engine.css/app.css） ============== */ cad/engine.css — AutoCAD 落地页「登录 / 在线支付 / 我的订单 / 下载」引擎样式 ---------------------------------------------------------------------------- 来源: /adobe/app.css 中这些组件所需的规则(逐条抠出, 选择器与属性值原样保留) 适配: 只有【品牌色】改成本站 SketchUp 皮肤的变量 (--primary / --primary-dark), 这样弹窗、按钮、二维码区与页面观感一致; 版式尺寸/padding/圆角/层级一字未改。 加载顺序: 必须在 ./app.css 之后 (本文件覆盖 app.css 的同名 .modal-mask 等) 本文件是新增文件, 不涉及备份。 ========================================================================== */ /* --ink-1 在本站皮肤里没有定义, 但 PS 引擎的内联样式里用到了 var(--ink-1); 这里给它一个等价映射, 避免取到空值。 */ :root{ --ink-1: var(--ink); } /* ============== 我的订单 (表格式弹窗) ============== 来源: /adobe/app.css .modal-mask / .modal-wide / .modal-header / .modal-close-x / .modal-body / .order-query-form / .order-input / .action-btn-primary / .order-result / .order-table / .order-download-btn ★ 注意: app.css 里也有一个 .modal-mask (是 SketchUp 皮肤的 OS 弹窗, display:none 直到 .open)。 本文件在 app.css 之后加载, 这里显式给出 [hidden] 规则, 保证两种用法都不串。 */ .modal-mask{ position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-mask[hidden]{ display: none !important; } .modal-wide{ width: 760px; max-width: 100%; } .modal-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .modal-header span{ font-size: 18px; font-weight: 700; color: var(--ink); } .modal-close-x{ background: #F5F5F7; color: var(--ink); border: none; padding: 4px 10px; border-radius: 4px; font-weight: 600; font-size: 14px; cursor: pointer; } .modal-body{ padding: 0; } /* CAD: .modal-mask 本体是遮罩, 里面的白卡在 PS 里叫 .modal, 会被 app.css 的 .modal 规则接管, 那套是 SketchUp 皮肤的(白底16px圆角32px内边距), 观感正好合适, 所以这里不重复定义。 */ .modal-mask > .modal{ background: #fff; color: var(--ink); } /* CAD_ORDERS1_20261013_074145: 表格版「我的订单」字体族+标题21/1.2/600/#000+正文14/1.5/#212121+小字12.5/1.45+分隔线1px #e5e5e5 ✗ 未动圆角/按钮/emoji/另一视图 ✔ 不用 !important ✔ */ #orders-mask, #orders-mask *{ font-family: ArtifaktElement, Arial, sans-serif; letter-spacing: 0; } #orders-mask .pay-modal-header span, #orders-mask .modal-title{ font-size: 21px; line-height: 1.2; font-weight: 600; color: #000; } #orders-mask .pay-modal-header{ border-bottom: 1px solid #e5e5e5; } #orders-mask .order-table, #orders-mask .order-table td, #orders-mask .order-table th, #orders-mask .order-result, #orders-mask #ordersList{ font-size: 14px; line-height: 1.5; color: #212121; } #orders-mask .order-table tr{ border-bottom: 1px solid #e5e5e5; } #orders-mask .order-table th{ border-bottom: 1px solid #e5e5e5; color: #212121; } #orders-mask .order-input, #orders-mask .pay-input{ font-size: 14px; line-height: 1.5; color: #212121; letter-spacing: 0; } #orders-mask small, #orders-mask .order-sub, #orders-mask .order-meta{ font-size: 12.5px; line-height: 1.45; color: #212121; } /* CAD_ORDERS2_20261013_074228: 部件二 表格版「我的订单」按钮套参考体系（主=纯黑44px方角/次=白底1px #8a8a8a/禁用=中性灰）✗ 未动圆角/emoji/另一视图 ✔ 不用 !important ✔ */ #orders-mask .action-btn-primary{ height: 44px; padding: 0 20px; background: #000; border: 1px solid #000; border-radius: 2px; color: #FFFFFF; font-size: 14px; font-weight: 600; letter-spacing: 0; } #orders-mask .action-btn-primary:hover{ background: #000; border-color: #000; } #orders-mask .action-btn-primary:disabled{ background: #e5e5e5; border-color: #e5e5e5; color: #5c5c5c; cursor: not-allowed; } #orders-mask .order-download-btn{ height: 36px; padding: 0 16px; background: #FFFFFF; border: 1px solid #8a8a8a; border-radius: 2px; color: #000; font-size: 14px; font-weight: 600; letter-spacing: 0; } #orders-mask .order-download-btn:hover{ background: #FFFFFF; border-color: #000; color: #000; } /* CAD_ORDERSAC_20261013_074441: 部件A 订单视图圆角 14→2px（仅两个订单视图）｜ 部件C 手机号查询版套同一体系 ✗ 不用 !important ✔ 只覆盖、不改共享类 ✔ */ #orders-mask .pay-modal, #orders-mask .modal, #ordersMask .pay-modal, #ordersMask .modal{ border-radius: 2px; } /* ============== Modal (严按同行) ============== */ .modal-mask{ position: fixed; inset: 0; background: rgba(17,39,84,0.85); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; } .modal-mask.open{ display: flex; } .modal{ background: #fff; border-radius: 16px; padding: 32px 28px; max-width: 480px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.50); position: relative; max-height: 88vh; overflow: auto; } .modal-close{ position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); color: var(--ink); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .modal-close:hover{ background: var(--border); } .modal-title{ font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 6px; text-align: center; } .modal-sub{ text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 22px; } .modal-options{ display: grid; gap: 12px; } .modal-opt{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg-soft-3); border: 2px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--ink); transition: all 0.2s; cursor: pointer; } .modal-opt:hover{ border-color: var(--primary); background: #fff; box-shadow: var(--primary-shadow); transform: translateY(-1px); } .modal-opt-icon{ width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; border: 1px solid var(--border); } .modal-opt-icon.win{ color: var(--primary); } .modal-opt-icon.mac{ color: var(--ink-2); } .modal-opt-text{ flex: 1; } .modal-opt-name{ font-size: 15px; font-weight: 700; color: var(--ink); } .modal-opt-desc{ font-size: 12px; color: var(--text-muted); margin-top: 2px; } .modal-opt-arrow{ color: var(--text-muted); font-size: 18px; } /* ============== OFFICE_MODALFIX2_20261014: 遮罩显示 + 宽度对齐 cad（实测 760px） ============== */ .modal-mask:not([hidden]), #orders-mask:not([hidden]), #ordersMask:not([hidden]) { display: flex !important; align-items: center !important; justify-content: center !important; position: fixed !important; inset: 0 !important; z-index: 2000 !important; } .modal.modal-wide { width: 760px !important; max-width: min(760px, calc(100vw - 40px)) !important; } /* ============== OFFICE_LINEMASK_CSS_20261014: 选择方式弹层样式（取自 cad） ============== */ /* CAD_QSTYLE_20261012_072531: 二维码态 + 支付成功态 统一到 #lineMask 的 .n10-* 视觉 对齐项: 圆角 6px ｜ 主按钮 42px 黑底白字 ｜ 次按钮 42px 白底描边 ｜ 提示 12px #8A8A93 ｜ 分隔线 1px #EFEFF1 ｜ 正文 13.5px 作用域限定在 #payModalBody（二维码/成功态都渲染在它里面）⇒ 不影响登录弹窗、订单弹窗等其它层 */ #payModalBody .qrcode-area{ display: flex; flex-direction: column; align-items: center; padding: 8px 0 0; } /* CAD_LINEFONT2_20261013_045032: 收敛版——只保留线上真实存在的类名（范围只减不增 ✔ 颜色/圆角/间距仍未动 ✔）*/ #lineMask, #lineMask *{ font-family: ArtifaktElement, Arial, sans-serif; } #lineMask .pay-modal-header span{ font-size: 22px; line-height: 1.2; letter-spacing: 0; font-weight: 600; } #lineMask .n10-opt, #lineMask .n10-opt *{ font-size: 14px; font-weight: 600; letter-spacing: 0; } #lineMask .n10-sub, #lineMask .n10-hint, #lineMask .n10-note, #lineMask #lineHint{ font-size: 12.5px; line-height: 1.45; letter-spacing: 0; } #lineMask .n10-inp, #lineMask #linePhone{ font-size: 14px; } #lineMask .n10-cta, #lineMask #lineConfirmBtn, #lineMask button{ font-size: 14px; font-weight: 600; } /* CAD_LINETHEME_20261013_045232: 「选择购买方式」面板整套黑白灰（含颜色 ✔ 选中态/禁用态用黑白灰重新表达 ✔ 尺寸/间距未动 ✔）*/ #lineMask{ color: #212121; } #lineMask .pay-modal-header span{ color: #000; } #lineMask .n10-sub, #lineMask .n10-hint, #lineMask #lineHint, #lineMask .n10-note{ color: #212121; } #lineMask .n10-opt, #lineMask .n10-opt-name, #lineMask .n10-opt-main, #lineMask .n10-opt-desc, #lineMask .n10-tag{ color: #212121; } #lineMask .n10-opt{ border: 1px solid #8a8a8a; border-radius: 0; background: #fff; } #lineMask .n10-opt.is-sel, #lineMask .n10-opt.selected{ border: 2px solid #000; background: #fff; box-shadow: none; } #lineMask .n10-opt.is-sel::before, #lineMask .n10-opt.selected::before{ content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: #000; vertical-align: middle; } #lineMask .n10-opts, #lineMask .n10-note{ border-color: #e5e5e5; } #lineMask .n10-inp, #lineMask #linePhone{ border: 1px solid #8a8a8a; border-radius: 0; color: #212121; } #lineMask .n10-inp:focus, #lineMask #linePhone:focus{ outline: 2px solid #000; outline-offset: 1px; border-color: #000; } #lineMask .n10-cta, #lineMask #lineConfirmBtn{ background: #000; color: #fff; border: 1px solid #000; border-radius: 0; } #lineMask .n10-cta:disabled, #lineMask #lineConfirmBtn:disabled{ background: #e5e5e5; color: #5c5c5c; border-color: #e5e5e5; cursor: not-allowed; } /* ============== OFFICE_BUYFLOW_20261014: Mac 卡片"一卡一按钮"（新按钮走 cad 购买流程） ============== */ html.is-mac .version-card .btn-dl:not(.v-buy) { display: none !important; } html.is-mac .version-card .v-buy { display: inline-flex !important; } /* ============== OFFICE_MODALVARS_20261014: 弹层专用变量（取自 cad/app.css 的 :root，作用域限定） ============== */ @font-face { font-family:"ArtifaktElement"; src:url("./assets/fonts/Artifakt Element Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"ArtifaktElement"; src:url("./assets/fonts/Artifakt Element Semi Bold.woff") format("woff"); font-weight:600 650; font-style:normal; font-display:swap; } @font-face { font-family:"ArtifaktElement"; src:url("./assets/fonts/Artifakt_Element_Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"ArtifaktElement"; src:url("./assets/fonts/Artifakt_Element_Black.woff2") format("woff2"); font-weight:800 900; font-style:normal; font-display:swap; } #lineMask, #loginMask, #ordersMask, #orders-mask, #payMask, .modal-mask, .modal { /* 严按同行 b1.ruanvip.cn/ct-nfgmwz/ 严色码 (深蓝灰 + 浅蓝白) */ --primary: #2060b0; --primary-dark: #1a4e98; --primary-light: #4a8ed4; --primary-soft: #edf3fb; --primary-deeper: #112754; --primary-deep: #1B3A6B; --primary-shadow: 0 4px 14px rgba(32,96,176,0.25); /* 背景层次 (严按同行 5 层渐变) */ --bg-page: #112754; /* 最深主背景 */ --bg-section: #0d1c38; /* 极深 sections */ --bg-card-on-dark: #1B3A6B; /* 深色上的卡片 */ --bg-soft: #edf3fb; /* 浅蓝白 sections */ --bg-soft-2: #ddeaf5; /* 略深浅蓝 */ --bg-soft-3: #EEF5FF; /* 极浅蓝 */ --bg-soft-4: #E0EDFF; /* 极浅蓝 2 */ --bg-card-light: #ffffff; /* 卡片白底 (在深色 section 上) */ /* 文字 (严按同行) */ --ink: #112754; --ink-2: #1B3A6B; --ink-3: #2D5A8E; --text-muted: #4A7AAA; --text-light: #5A8AC0; --text-pale: #9EC4F0; --text-on-dark: #ffffff; --text-on-dark-muted: #C8DCEE; --border: #C8D9EE; --border-2: #B8D0EA; --border-on-dark: #1B3A6B; /* 状态色 */ --success: #10B981; --warning: #F59E0B; --rating: #FF9500; } /* ============== OFFICE_LINELAYOUT_20261014: 购买方式/扫码弹窗版式（加高·按钮居中·底部留白） ============== */ #lineMask .pay-modal { min-height: 560px !important; padding-bottom: 0 !important; border-radius: 14px !important; } #lineMask .pay-modal-header { padding: 22px 24px 14px !important; } #lineMask .pay-modal-header span { font-size: 22px !important; font-weight: 700 !important; } #lineMask .pay-modal-body { padding: 16px 24px 26px !important; } /* 底部 0 -> 26px 自然留白 */ #lineMask .n10-sub { font-size: 14px !important; color: #3A4652 !important; margin: 0 0 14px !important; text-align: center !important; } #lineMask .n10-field { margin-bottom: 16px !important; } #lineMask .n10-inp { height: 46px !important; font-size: 15px !important; } #lineMask .n10-hint { text-align: center !important; margin: 14px 0 0 !important; font-size: 13px !important; color: #606A75 !important; } #lineMask .n10-cta, #lineMask #officeGetBtn { display: block !important; width: 100% !important; max-width: 320px !important; margin: 18px auto 0 !important; height: 48px !important; line-height: 48px !important; padding: 0 !important; text-align: center !important; border-radius: 8px !important; font-size: 15px !important; } #lineMask img[alt="支付二维码"] { display: block !important; margin: 6px auto 0 !important; width: 230px !important; height: 230px !important; } #lineMask #officePayHint { min-height: 22px !important; } #lineMask .n10-note { margin-top: 16px !important; text-align: center !important; } /* ============== OFFICE_SCANUI_20261015: 扫码页（状态圆圈·返回按钮·订单号·自动跳转） ============== 设计约束（客户原话）: · 状态圆圈 = 橙色脉冲圆点 + 「等待支付…」 · 返回按钮回到「选择购买方式」——★ 不销毁原选择界面: 扫码页渲染在 .pay-modal-body 里【另加的一块容器】#officeScanPane 中, 原选择界面的节点原地保留, 返回时只把 pane 摘掉 + 去掉 body 的 .is-scanning 类 ✓ （上一版用 body.innerHTML 覆盖 => 选择界面被销毁, 返回无从恢复 ✗ 本次不再重犯） · 弹窗不能太矮 / 按钮居中 / 底部自然留白（沿用上面 LINELAYOUT 的高度与留白） 作用域全部限定在 #lineMask, 因此不影响登录弹窗、订单弹窗等其它层。 */ /* —— 扫码进行中: 把 .pay-modal-body 的其它内容收起来（只隐藏, 不删除） —— */ #lineMask .pay-modal-body.is-scanning > *:not(#officeScanPane) { display: none !important; } /* 上面只隐藏 body 的【直接子节点】; 而手机号输入框和提示文字装在 .n10-field / .n10-opts 这类子容器里, 不会被那条规则覆盖 -> 这里把这两块也一起收起来(仍然只隐藏, 不删除)。 .n10-note 本来就是 body 的直接子节点, 已由上面那条覆盖, 这里保留它更安全。 */ #lineMask .pay-modal-body.is-scanning .n10-field, #lineMask .pay-modal-body.is-scanning .n10-opts, #lineMask .pay-modal-body.is-scanning .n10-note { display: none !important; } #lineMask .pay-modal-body.is-scanning { padding: 14px 24px 26px !important; } /* —— 扫码页容器: flex 竖排, 底部自然留白 —— */ #lineMask #officeScanPane { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0 6px; } #lineMask #officeScanPane .os-title { font-size: 15px; font-weight: 600; color: #212121; margin: 0 0 2px; line-height: 1.4; } #lineMask #officeScanPane .os-sub { font-size: 12.5px; color: #606A75; margin: 0 0 10px; line-height: 1.45; } /* —— 状态圆圈: 橙色脉冲圆点 + 文案（等待支付…） —— */ #lineMask #officeScanPane .os-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 14px; background: #FFF7ED; border: 1px solid #FDE3C0; border-radius: 999px; font-size: 13px; font-weight: 600; color: #B45309; line-height: 1.2; } #lineMask #officeScanPane .os-dot { width: 9px; height: 9px; border-radius: 50%; background: #F59E0B; flex: 0 0 auto; position: relative; animation: officeScanPulse 1.5s ease-out infinite; } @keyframes officeScanPulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); } 70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } } /* 已支付 / 出错 时的状态色（脚本换类名） */ #lineMask #officeScanPane .os-status.is-paid { background: #ECFDF5; border-color: #A7F3D0; color: #047857; } #lineMask #officeScanPane .os-status.is-paid .os-dot { background: #10B981; animation: none; } #lineMask #officeScanPane .os-status.is-warn { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; } #lineMask #officeScanPane .os-status.is-warn .os-dot { background: #EF4444; animation: none; } /* —— 二维码 —— */ #lineMask #officeScanPane .os-qr { display: block; margin: 2px auto 10px; width: 230px; height: 230px; padding: 8px; border: 1px solid #E5E5E5; border-radius: 10px; background: #fff; box-sizing: content-box; } #lineMask #officeScanPane .os-tip { font-size: 13px; color: #212121; margin: 0 0 10px; line-height: 1.5; font-weight: 600; } #lineMask #officeScanPane .os-amount { font-size: 17px; font-weight: 700; color: #000; margin: 0 0 10px; } /* —— 订单号（可复制, 显示清楚） —— */ #lineMask #officeScanPane .os-order { font-size: 12.5px; color: #212121; margin: 0 0 4px; line-height: 1.6; word-break: break-all; } #lineMask #officeScanPane .os-order b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: 0.2px; color: #000; } /* —— 按钮: 居中 + 底部自然留白 —— */ #lineMask #officeScanPane .os-btn { display: block; width: 100%; max-width: 320px; margin: 14px auto 0; height: 48px; line-height: 46px; padding: 0; text-align: center; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; box-sizing: border-box; } #lineMask #officeScanPane .os-btn-primary { background: #000; color: #fff; border: 1px solid #000; } #lineMask #officeScanPane .os-btn-primary:disabled { background: #e5e5e5; color: #5c5c5c; border-color: #e5e5e5; cursor: not-allowed; } #lineMask #officeScanPane .os-btn-ghost { background: #fff; color: #212121; border: 1px solid #8a8a8a; } #lineMask #officeScanPane .os-btn-ghost:hover { background: #F5F5F7; } /* —— 支付成功页 —— */ #lineMask #officeScanPane .os-done-icon { width: 54px; height: 54px; border-radius: 50%; background: #ECFDF5; color: #10B981; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; line-height: 1; margin: 4px 0 12px; } #lineMask #officeScanPane .os-card { width: 100%; max-width: 340px; box-sizing: border-box; margin: 4px auto 0; padding: 14px 16px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; text-align: left; font-size: 13.5px; line-height: 1.7; color: #212121; } #lineMask #officeScanPane .os-card .os-kv { word-break: break-all; } #lineMask #officeScanPane .os-card .os-kv b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; color: #000; } #lineMask #officeScanPane .os-note { font-size: 12.5px; color: #606A75; margin: 10px 0 0; line-height: 1.5; } #lineMask #officeScanPane .os-foot { font-size: 12px; color: #8A8A93; margin: 14px 0 0; line-height: 1.6; } /* ============================================================================ OFFICE_NAVMAC_20261015(客户 2026-10-15 拍板): Windows 访客不保留顶栏 「登录 / 我的订单 / 客服」—— 这三颗只在 Mac 显示(Windows 访客走页脚的"在线客服")。 根因(实测定位): 本文件第 266 行 html:not(.is-mac) [data-os-only="mac"] { display: none !important; } 被第 ~906 行 .nav-actions #btn-login, .nav-actions #btn-orders, .nav-actions #btn-kefu, .nav-actions .nav-btn, .nav-actions > a, .nav-actions > div { display: inline-flex !important; } 压掉 —— 两条都是 !important, 比的是特异性: 后者(0,2,1) > 前者(0,2,0) => Windows 也显示 ✗ 修法(只做加法, 一条规则, 不动上面任何既有行): 用同样的 .nav-actions #id 结构再加 html:not(.is-mac) 前缀 => 特异性 (0,3,1) 更高 => Windows 下真正隐藏; Mac(html.is-mac) 完全不受影响: 三颗按钮的尺寸/颜色/居中(justify-content:center)全由 既有规则照旧生效 ✓ 回滚: 删掉本块即可(改 index.html 里 app.css?v= 穿透缓存)。 ========================================================================== */ html:not(.is-mac) .nav-actions #btn-login, html:not(.is-mac) .nav-actions #btn-orders, html:not(.is-mac) .nav-actions #btn-kefu { display: none !important; } /* ============================================================================ OFFICE_SUBCAD_20261015(客户 2026-10-15 追加口径): 账号版支付成功页【照 cad 订阅版成功页】 做法: 逐字复用 cad/engine.css 里 .sub-done/.sd-* 那一套规则的【取值与顺序】, 只把作用域 #payModalBody 换成本页成功页容器 #lineMask #officeScanPane(保持级联顺序 ⇒ 计算样式与 cad 订阅版一致)。本页已加载 /cad/engine.css, 但它那套规则作用域是 #payModalBody, 对本页 成功页(#lineMask 内)不生效, 所以这里按同一份取值补一遍作用域。 ★ 纯追加: 不修改 app.css 里任何既有规则, 不动 index.html 的结构性样式。 ============================================================================ */ @media (max-width: 420px) { #lineMask #officeScanPane .sd-cta { width: 100%; } } #lineMask #officeScanPane .sd-root{ max-height: none; overflow: visible; padding: 4px 20px 16px; } #lineMask #officeScanPane .sd-note{ margin: 0; font-size: 12.5px; line-height: 20px; color: #212121; } #lineMask #officeScanPane .sd-step{ margin: 0; padding: 16px 0 0; border-top: 1px solid var(--border); } #lineMask #officeScanPane .sd-idx{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 14px; font-weight: 600; margin-right: 12px; vertical-align: middle; font-variant-numeric: tabular-nums; } #lineMask #officeScanPane .sd-title{ font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); vertical-align: middle; } #lineMask #officeScanPane .sd-desc{ margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--text-muted); } #lineMask #officeScanPane .sd-actions{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #lineMask #officeScanPane .sd-actions--mt{ margin-top: 4px; } #lineMask #officeScanPane .sd-actions--between{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #lineMask #officeScanPane .sd-divider{ height: 0; background: none; border-top: 1px solid #EFEFF1; margin: 0; } #lineMask #officeScanPane .sd-cta{ display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 1px solid var(--primary); border-radius: 6px; background: #0A0A0B; border-color: #0A0A0B; color: #FFFFFF; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; } #lineMask #officeScanPane .sd-cta:active{ transform: translateY(1px); } #lineMask #officeScanPane .sd-cta:disabled{ background: var(--primary-soft); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; } #lineMask #officeScanPane .sd-cta:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; } #lineMask #officeScanPane .sd-cta--ghost{ background: #FFFFFF; color: var(--ink); border-color: var(--border-2); text-decoration: none; } #lineMask #officeScanPane .sd-field{ flex: 1 1 220px; min-width: 160px; box-sizing: border-box; } #lineMask #officeScanPane .sd-tip{ margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--text-muted); } #lineMask #officeScanPane label.sd-tip{ margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-3); } #lineMask #officeScanPane .sd-msg{ margin: 4px 0 0; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink); } #lineMask #officeScanPane .sd-err{ text-align: center; padding: 32px 24px; } #lineMask #officeScanPane .sd-err__t{ font-size: 18px; color: #B4232A; } #lineMask #officeScanPane .sd-head__t{ margin: 0; font-size: 22px; line-height: 30px; font-weight: 650; letter-spacing: .01em; color: var(--ink); } #lineMask #officeScanPane .sd-head__s{ margin: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); } #lineMask #officeScanPane .sd-note{ margin: 0; padding: 0 0 0 12px; border-left: 3px solid var(--border-2); } #lineMask #officeScanPane .sd-ok{ margin: 4px 0 0; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink); } #lineMask #officeScanPane .sd-ok[hidden]{ display: none; } #lineMask #officeScanPane .sd-idx.is-done{ background: var(--primary); color: #FFFFFF; } #lineMask #officeScanPane .sd-note b{ color: inherit; font-weight: 500; } #lineMask #officeScanPane .sd-cta{ font-size: 14px; } #lineMask #officeScanPane .sd-actions--mt{ margin-top: 8px; } #lineMask #officeScanPane .sd-tip{ color: var(--ink-3); } #lineMask #officeScanPane .sd-head__t{ font-size: 17px; line-height: 24px; } #lineMask #officeScanPane .sd-title{ font-size: 14px; } #lineMask #officeScanPane .sd-step{ padding: 10px 0; border-top: 1px solid #E8EDF3; } #lineMask #officeScanPane .sd-desc, #lineMask #officeScanPane .sd-tip{ margin-top: 4px; } #lineMask #officeScanPane .sd-divider{ margin: 20px 0; } #lineMask #officeScanPane .sd-idx{ width: 8px; height: 8px; min-width: 8px; border: 0; background: var(--ink-3); color: transparent; font-size: 0; border-radius: 50%; margin-top: 6px; } #lineMask #officeScanPane .sd-step.is-current .sd-idx{ background: var(--primary); } #lineMask #officeScanPane .sd-step.is-done .sd-idx{ background: var(--ink-3); } #lineMask #officeScanPane .sd-actions{ align-items: center; } #lineMask #officeScanPane .sd-divider{ display: none; } #lineMask #officeScanPane .sd-root, #lineMask #officeScanPane .sd-root *{ font-family: ArtifaktElement, Arial, sans-serif; } #lineMask #officeScanPane .sd-title{ font-size: 14px; line-height: 1.4; letter-spacing: 0; color: #000; } #lineMask #officeScanPane .sd-idx{ border-radius: 0; background: #000; } #lineMask #officeScanPane .sd-cta{ border-radius: 0; background: #000; border-color: #000; font-size: 14px; font-weight: 600; } #lineMask #officeScanPane .sd-cta--ghost{ background: #fff; color: #000; border: 1px solid #8a8a8a; border-radius: 2px; } #lineMask #officeScanPane .sd-divider{ border-top-color: #e5e5e5; } #lineMask #officeScanPane .sd-step{ border-top-color: #e5e5e5; } #lineMask #officeScanPane .sd-note{ padding-left: 0; border-left: 0; } #lineMask #officeScanPane .sd-note{ font-size: 12.5px; line-height: 1.45; } #lineMask #officeScanPane .sd-desc, #lineMask #officeScanPane .sd-tip, #lineMask #officeScanPane .sd-msg, #lineMask #officeScanPane .sd-ok{ font-size: 14px; line-height: 1.5; letter-spacing: 0; color: #212121; } /* --- OFFICE_SUBCAD_ADAPT_20261015: 本页容器与既有节点的适配(只覆盖布局/中性化, 不改 cad 的字体字号配色) --- */ /* 成功页容器是 flex 居中(见 #lineMask #officeScanPane), cad 的清单式是左对齐整栏 */ #lineMask #officeScanPane .sd-root { align-self: stretch; width: 100%; max-width: 460px; box-sizing: border-box; padding: 4px 4px 12px; } #lineMask #officeScanPane .sd-step, #lineMask #officeScanPane .sd-desc, #lineMask #officeScanPane .sd-note, #lineMask #officeScanPane .sd-msg, #lineMask #officeScanPane .sd-title { text-align: left; } /* 账号信息卡: 保留既有 .os-card/#officeScanCard 节点与类名, 视觉上去掉卡片外壳 => 与 cad 的正文行一致 */ #lineMask #officeScanPane .sd-root .os-card { width: auto; max-width: none; margin: 4px 0 0; padding: 0; background: none; border: 0; border-radius: 0; text-align: left; } #lineMask #officeScanPane .sd-root .os-card .os-kv { margin: 4px 0 0; font-size: 14px; line-height: 1.5; letter-spacing: 0; color: #212121; word-break: break-all; text-align: left; } #lineMask #officeScanPane .sd-root .os-card .os-kv b { font-family: inherit; font-size: inherit; font-weight: 600; color: #000; } /* 「返回上一步」: 沿用 cad 次级按钮观感(pay-btn-secondary sd-cta sd-cta--ghost), 但保持在本页居中、与控制台一致 */ #lineMask #officeScanPane > .sd-cta { align-self: center; margin-top: 14px; } /* ============================================================================ OFFICE_ORDERVIEW_UI_20261015(客户 2026-10-15 评审清单 1-10 条): 【仅订单详情页】 作用域: #lineMask #officeScanPane.is-od … —— 购买成功页(#officeScanPane 无 .is-od)完全不受影响。 规格: 主按钮 #1f2328 实心/两颗 42 高; 注意段移到主按钮上方(原文不动/400/左 3px 竖线); 键值"标签在上值在下" + 等宽值; 间距只用 4/8/12/16/24/32; 左右内边距 32/32; 分隔线 1px #ececec 与内容同宽(margin 0 32px); 文字灰收 3 个(#1f2328/#4a4a4a/#767676); 字号收 3 档(24/17/16, 产品行 14、底部 13、按钮 15); × 命中区 40×40 / hover #f5f5f5。 ============================================================================ */ #lineMask:has(#officeScanPane.is-od) .pay-modal-header { padding:16px 32px 0 !important; } #lineMask:has(#officeScanPane.is-od) .pay-modal-header span { font-size:24px !important; line-height:32px !important; font-weight:600 !important; color:#1f2328 !important; letter-spacing:0 !important; } #lineMask:has(#officeScanPane.is-od) #lineModalClose { width:40px; min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:8px; background:transparent; color:#1f2328; font-size:12px; line-height:12px; cursor:pointer; } #lineMask:has(#officeScanPane.is-od) #lineModalClose:hover { background:#f5f5f5; } #lineMask:has(#officeScanPane.is-od) #lineModalClose:active { transform:translateY(1px); } #lineMask:has(#officeScanPane.is-od) #lineModalClose:focus-visible { outline:2px solid #1f2328; outline-offset:2px; } #lineMask #officeScanPane.is-od { display:block; text-align:left; align-items:stretch; width:100%; box-sizing:border-box; padding:0; } #lineMask #officeScanPane.is-od .od-sub { margin:16px 32px 12px !important; font-size:14px !important; line-height:20px !important; font-weight:400 !important; color:#4a4a4a !important; } #lineMask #officeScanPane.is-od .od-sec { padding:0 32px; } #lineMask #officeScanPane.is-od .od-h { margin:0 0 8px; font-size:17px; line-height:24px; font-weight:600; color:#1f2328; } #lineMask #officeScanPane.is-od .od-sec:first-of-type .od-h { margin-top:24px; } #lineMask #officeScanPane.is-od .od-kv { padding:12px 0; border-top:1px solid #ececec; } #lineMask #officeScanPane.is-od .od-kv--first, #lineMask #officeScanPane.is-od .od-kv:first-child { border-top:0; } #lineMask #officeScanPane.is-od .od-k { font-size:13px; line-height:20px; font-weight:400; color:#6a6a6a; } #lineMask #officeScanPane.is-od .od-v { margin-top:4px; font-size:16px; line-height:24px; font-weight:600; color:#1f2328; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric:tabular-nums; word-break:break-all; } #lineMask #officeScanPane.is-od .od-note { margin:12px 0 12px; padding-left:8px; border-left:3px solid #1f2328; font-size:16px; line-height:24px; font-weight:400; color:#4a4a4a; } #lineMask #officeScanPane.is-od .od-actions { display:flex; flex-direction:column; gap:8px; margin:12px 0 0; } #lineMask #officeScanPane.is-od .od-btn { width:100%; height:42px; padding:0 16px; border-radius:6px; font-size:15px; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } #lineMask #officeScanPane.is-od .od-btn--primary { background:#1f2328; border:1px solid #1f2328; color:#ffffff; font-weight:600; } #lineMask #officeScanPane.is-od .od-btn--secondary { background:#ffffff; border:1px solid #d0d0d0; color:#1f2328; font-weight:400; } #lineMask #officeScanPane.is-od .od-btn:active { transform:translateY(1px); } #lineMask #officeScanPane.is-od .od-btn:focus-visible { outline:2px solid #1f2328; outline-offset:2px; } #lineMask #officeScanPane.is-od .od-btn:disabled { opacity:.6; cursor:not-allowed; } #lineMask #officeScanPane.is-od .od-msg { margin:8px 0 0; font-size:13px; line-height:20px; font-weight:400; color:#767676; } #lineMask #officeScanPane.is-od .od-sep { height:0; border-bottom:1px solid #ececec; margin:24px 32px; } #lineMask #officeScanPane.is-od .od-foot { margin:0; padding:0 32px 24px; font-size:13px; line-height:20px; font-weight:400; color:#767676; } #lineMask #officeScanPane.is-od .od-foot .od-link { color:#1f2328; text-decoration:none; border-bottom:1px solid #dcdcdc; } #lineMask #officeScanPane.is-od .od-foot .od-bar { display:inline-block; width:1px; height:13px; background:#dcdcdc; margin:0 8px; vertical-align:-2px; } /* ══ OFFICE_PAYSUCCESS_E18_20261016 ══ 支付成功页(账号版)视觉重做 —— 完整方案见 _ui_variants/office_pay/E18_panel.html 作用域严格限定在 #lineMask #officeScanPane:not(.is-od)，购买成功页(.is-od)与其它三站零影响。 只做加法：不覆盖任何既有选择器，靠"作用域更具体"取胜。 */ #lineMask #officeScanPane:not(.is-od){ --e18-ink:#1f2328; --e18-ink2:#4a4a4a; --e18-ink3:#6b6b6b; --e18-line:#e0e0e0; --e18-bd:#d8d8d8; --e18-ctl:#949494; } /* 头部：产品行与已完成支付胶囊 */ #lineMask #officeScanPane:not(.is-od) .os-sub{ font-size:13px; line-height:20px; color:var(--e18-ink2); margin:0 0 4px; } #lineMask #officeScanPane:not(.is-od) .os-status.is-paid{ display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; font-size:14px; line-height:20px; font-weight:600; color:var(--e18-ink); } #lineMask #officeScanPane:not(.is-od) .os-status.is-paid .os-dot{ width:8px; height:8px; border-radius:50%; background:#0f9d63; flex:none; } /* 凭据卡片：单块容器 + 内部发丝线，行高 44，值用等宽 */ #lineMask #officeScanPane:not(.is-od) .os-card{ border:1px solid var(--e18-bd); border-radius:12px; background:#fff; padding:0; overflow:hidden; margin:0 0 12px; } #lineMask #officeScanPane:not(.is-od) .os-card .os-kv{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-top:1px solid var(--e18-line); font-size:13px; line-height:20px; color:var(--e18-ink3); } #lineMask #officeScanPane:not(.is-od) .os-card .os-kv:first-child{border-top:0} #lineMask #officeScanPane:not(.is-od) .os-card .os-kv b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px; font-weight:600; color:var(--e18-ink); word-break:break-all; font-variant-numeric:tabular-nums; } /* 提示条：可读性优先，双行/单行呼吸感一致 */ #lineMask #officeScanPane:not(.is-od) .sd-msg{ display:flex; align-items:center; gap:9px; min-height:50px; margin:10px 0 0; padding:5px 14px; background:#fffaf0; border:1px solid #f2e2c4; border-radius:12px; font-size:12.5px; line-height:19px; color:#4a4a4a; } /* 主按钮：全卡最大最重 */ #lineMask #officeScanPane:not(.is-od) .sd-cta{ width:100%; min-height:52px; border-radius:10px; font-size:15px; font-weight:600; letter-spacing:0; } /* 步骤标题降一档，不与 CTA 争 */ #lineMask #officeScanPane:not(.is-od) .sd-title{font-size:14px; font-weight:600; color:var(--e18-ink2)} #lineMask #officeScanPane:not(.is-od) .sd-idx{color:var(--e18-ink3)} #lineMask #officeScanPane:not(.is-od) .sd-desc{font-size:12px; line-height:18px; color:var(--e18-ink3)} #lineMask #officeScanPane:not(.is-od) .sd-divider{background:var(--e18-line)} /* 尾行：指引与动作同一层；页脚独立在线下 */ #lineMask #officeScanPane:not(.is-od) .sd-note{ margin-top:10px; padding-top:10px; border-top:1px solid var(--e18-line); font-size:12px; line-height:18px; color:var(--e18-ink3); text-align:center; } #lineMask #officeScanPane:not(.is-od) .sd-note a{color:var(--e18-ink2); text-decoration:underline; text-underline-offset:3px} /* 返回上一步：降为链接态，不与下载 CTA 争 */ #lineMask #officeScanPane:not(.is-od) #officeScanBack2{ background:transparent; border:0; color:var(--e18-ink2); text-decoration:underline; text-underline-offset:3px; font-weight:400; box-shadow:none; min-height:32px; } #lineMask #officeScanPane:not(.is-od) #officeScanBack2:hover{color:var(--e18-ink); background:transparent} /* 焦点环：可见性达标 */ #lineMask #officeScanPane:not(.is-od) :is(.sd-cta,#officeScanBack2):focus-visible{ outline:2px solid var(--e18-ink); outline-offset:2px; } /* 空提示容器不许显示成空琥珀框（#officeSubDlMsg 默认空，由 JS 填） */ #lineMask #officeScanPane:not(.is-od) .sd-msg:empty{display:none} /* 既有 bug：①/② 序号被压成 ▪ —— 交回字形控制权 */ #lineMask #officeScanPane:not(.is-od) .sd-idx{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; line-height:22px; font-variant-emoji:text; } /* 「已完成支付」去胶囊壳 → 内联状态 + 圆点（E18 设计） */ #lineMask #officeScanPane:not(.is-od) .os-status.is-paid{ background:transparent; border:0; border-radius:0; padding:0; } /* ══ OFFICE_PAYSUCCESS_E18_PATCH_END ══ */ /* ══ OFFICE_PAYSUCCESS_E18_JS_CSS ══ 配 JS 半场：商品行+金额、复制圆 */ #lineMask #officeScanPane:not(.is-od) .os-payline{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 6px; font-size:14px; line-height:20px; color:var(--e18-ink2,#4a4a4a); } #lineMask #officeScanPane:not(.is-od) .os-payline__prod{min-width:0} #lineMask #officeScanPane:not(.is-od) .os-payline__amt{ margin-left:auto; font-size:20px; font-weight:700; color:var(--e18-ink,#1f2328); font-variant-numeric:tabular-nums; white-space:nowrap; } #lineMask #officeScanPane:not(.is-od) .os-card .os-kv{position:relative} #lineMask #officeScanPane:not(.is-od) .os-card .os-kv:has(.os-cp){padding-right:56px} #lineMask #officeScanPane:not(.is-od) .os-cp{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid #949494; border-radius:999px; background:#f4f5f6; color:var(--e18-ink2,#4a4a4a); } #lineMask #officeScanPane:not(.is-od) .os-cp:hover{background:#eef0f2; border-color:#6b6b6b} #lineMask #officeScanPane:not(.is-od) .os-cp.is-done{background:#f2fbf7; border-color:#8fd3b3; color:#0f9d63} #lineMask #officeScanPane:not(.is-od) .os-cp:focus-visible{outline:2px solid var(--e18-ink,#1f2328); outline-offset:2px} /* ══ E18_FLATTEN_ODKV ══ 你截图里的卡片是「标签一行 / 值一行」(.od-k + .od-v) ⇒ 4 行被撑到 8 行。 这里把 od-kv 塌成 flex 单行：标签左、值右，行高 44。 作用域: #lineMask #officeScanPane.is-od —— 订单详情页 */ #lineMask #officeScanPane.is-od .od-kv{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-top:1px solid #ececec; } #lineMask #officeScanPane.is-od .od-kv:first-child{border-top:0} #lineMask #officeScanPane.is-od .od-kv .od-k{ flex:none; width:64px; font-size:13px; line-height:20px; color:#6b6b6b; } #lineMask #officeScanPane.is-od .od-kv .od-v{ flex:1; min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px; line-height:20px; font-weight:600; color:#1f2328; word-break:break-all; font-variant-numeric:tabular-nums; } /* 标题与提示也跟着收一档，别再往下堆 */ #lineMask #officeScanPane.is-od .od-h{font-size:14px; line-height:20px; margin:14px 0 8px; font-weight:600; color:#4a4a4a} #lineMask #officeScanPane.is-od .od-note{ display:flex; align-items:center; gap:9px; min-height:50px; margin:10px 0 0; padding:5px 14px; background:#fffaf0; border:1px solid #f2e2c4; border-radius:12px; font-size:12.5px; line-height:19px; color:#4a4a4a; } #lineMask #officeScanPane.is-od .od-btn{min-height:52px; border-radius:10px; font-size:15px; font-weight:600} #lineMask #officeScanPane.is-od .od-note:empty{display:none} /* ══ E18_ODKV_CP_ROOM ══ 复制圆挂在 .od-kv 上，需要定位上下文与右侧让位 */ #lineMask #officeScanPane.is-od .od-kv{position:relative} #lineMask #officeScanPane.is-od .od-kv:has(.os-cp){padding-right:56px} #lineMask #officeScanPane.is-od .od-kv .os-cp{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid #949494; border-radius:999px; background:#f4f5f6; color:#4a4a4a; } #lineMask #officeScanPane.is-od .od-kv .os-cp:hover{background:#eef0f2; border-color:#6b6b6b} #lineMask #officeScanPane.is-od .od-kv .os-cp.is-done{background:#f2fbf7; border-color:#8fd3b3; color:#0f9d63} /* ══ E18_COMPRESS ══ 用户反馈「整个界面太高」——撤掉 560px 硬底线并收紧 is-od 全部间距。 原因: L1129 给 .pay-modal 定了 min-height:560px !important(弹窗至少 560 高); L1396 .od-kv padding:12px 0 + 标签20 + 值24 + margin4 = 每行 72px, 四行 288px。 */ #lineMask .pay-modal{min-height:auto !important} #lineMask:has(#officeScanPane.is-od) .pay-modal-header{padding:14px 20px 0 !important} #lineMask:has(#officeScanPane.is-od) .pay-modal-header span{font-size:19px !important; line-height:26px !important} #lineMask .pay-modal-body{padding:10px 20px 16px !important} /* 凭据行：44px 单行，标签左值右 */ #lineMask #officeScanPane.is-od .od-kv{ display:flex !important; align-items:center; gap:10px; min-height:44px !important; padding:0 14px !important; border-top:1px solid #ececec !important; } #lineMask #officeScanPane.is-od .od-kv:first-child, #lineMask #officeScanPane.is-od .od-kv--first{border-top:0 !important} #lineMask #officeScanPane.is-od .od-k{ flex:none !important; width:64px !important; margin:0 !important; font-size:13px; line-height:20px; color:#6b6b6b; } #lineMask #officeScanPane.is-od .od-v{ flex:1 !important; min-width:0 !important; margin:0 !important; font-size:15px !important; line-height:20px !important; font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-all; font-variant-numeric:tabular-nums; } /* 段标题/副标题/分隔线全收一档 */ #lineMask #officeScanPane.is-od .od-h{font-size:14px !important; line-height:20px !important; margin:12px 0 6px !important; font-weight:600; color:#4a4a4a} #lineMask #officeScanPane.is-od .od-sec{padding:0 20px !important} #lineMask #officeScanPane.is-od .od-sub{margin:10px 20px 8px !important; font-size:13px !important; line-height:19px !important} #lineMask #officeScanPane.is-od .od-sep{margin:14px 20px !important} /* 提示条：去掉左边色条(反模式) + 收到 12.5px */ #lineMask #officeScanPane.is-od .od-note{ margin:10px 20px !important; padding:9px 14px !important; border:1px solid #f2e2c4 !important; border-left:1px solid #f2e2c4 !important; border-radius:12px; background:#fffaf0; font-size:12.5px !important; line-height:19px !important; color:#4a4a4a !important; } #lineMask #officeScanPane.is-od .od-note:empty{display:none !important} #lineMask #officeScanPane.is-od .od-btn{min-height:48px !important; height:48px !important; border-radius:10px !important} #lineMask #officeScanPane.is-od .od-msg{margin:6px 20px 0 !important; font-size:12px !important; line-height:18px !important} #lineMask #officeScanPane.is-od .od-foot{padding:8px 20px 14px !important; font-size:12px !important; line-height:18px !important} /* 卡片本体也收一下 */ #lineMask #officeScanPane.is-od #officeScanCard, #lineMask #officeScanPane.is-od .od-card{border:1px solid #d8d8d8; border-radius:12px; overflow:hidden} /* 复制圆 */ #lineMask #officeScanPane.is-od .od-kv{position:relative} #lineMask #officeScanPane.is-od .od-kv:has(.os-cp){padding-right:56px !important} #lineMask #officeScanPane.is-od .os-cp{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid #949494; border-radius:999px; background:#f4f5f6; color:#4a4a4a; } /* == E18_DEDUP_SUB == 订单详情页产品行重复: 模板里有一个 #officeViewSub, JS(L1860) 在 #officeViewRoot 内又 innerHTML 新建一个同 id 元素。 L1838 update 的是模板那一个 -> 两行都渲染。这里隐藏【面板直系子级】的那一个, 保留 root 内的。 */ #lineMask #officeScanPane.is-od > #officeViewSub{display:none !important} #lineMask #officeViewRoot > #officeViewSub, #lineMask #officeViewRoot .od-sub{display:block !important; margin:10px 20px 8px !important} /* == E18_HIDE_DLHINT == 客户 2026-10-16: 去掉「下载链接 2 小时内有效」提示 对应 markup L1868/L1896

。 用 display:none 而非删 markup —— 保留 id 以防有 JS 引用，且可随时还原。 */ #lineMask #officeDlHint, #lineMask #officeScanPane #officeDlHint{display:none !important} /* == E18_SHOW_DLHINT == 客户要「装好后用上方账号登录即可使用」在支付成功页可见。 该页走 .is-od 分支, 原来这个位置是「下载链接 2 小时内有效」-> 文案已换, 这里撤销隐藏。 */ #lineMask #officeScanPane.is-od #officeDlHint{display:block !important; margin:8px 20px 0 !important; font-size:13px !important; line-height:19px !important; color:#4a4a4a !important} /* == E18_VAL_FONT == 客户: 账号/密码字体太丑。 原来 od-v 用 ui-monospace -> 在 macOS/Safari 落到 typewriter 字体。 改成系统 UI 字体, 并用 tabular-nums 保持数字/等宽感。 */ #lineMask #officeScanPane.is-od .od-v{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Arial,sans-serif !important; font-variant-numeric:tabular-nums; letter-spacing:0; font-weight:600; } #lineMask #officeScanPane:not(.is-od) .os-card .os-kv b, #lineMask #officeScanPane:not(.is-od) .val{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Arial,sans-serif !important; font-variant-numeric:tabular-nums; letter-spacing:0; } /* == E18_HIDE_OSTITLE == 客户 2026-10-16: 永久版「支付成功」重复。 弹窗顶栏(.pay-modal-header)已是「支付成功」, 正文 head 里又有一行 .os-title「支付成功」-> 隐藏正文那行。 只影响永久版: 账号版走 headSub, 本来没有 .os-title。 */ #lineMask #officeScanPane .os-title{display:none !important} /* 顺带: 正文的绿勾图标与「已完成支付」保留 —— 它们是状态, 不是标题 */ #lineMask #officeScanPane .os-done-icon{margin:0 auto 10px} /* == E18_HIDE_EMPTY_ODMSG == 空的 .od-msg 不要占位(永久版已清空 #officeDlHint) */ #lineMask #officeScanPane.is-od .od-msg:empty{display:none !important} /* == E18_GUIDE_SCOPE == 客户要 CAD 的【定稿】安装教程样式。 cad/engine.css 里那套定稿挂在 #payModalBody 名下, 而 office 的容器是 #lineMask -> 定稿规则一条都不命中, 掉进了 engine.css 未加作用域的兜底版(浅蓝圆框) = 客户看到的丑。 这里把 4+6 条定稿规则逐条照抄, 只把作用域换成 #lineMask。 */ #lineMask .install-guide{padding:16px 0 0} #lineMask .install-guide-header{display:flex; align-items:center; gap:8px} #lineMask .install-guide-icon{font-size:16px; line-height:1; display:inline-flex; align-items:center} #lineMask .install-guide-title{font-size:14px; line-height:1.4; font-weight:600; color:#000} #lineMask .install-guide-link{display:flex; align-items:center; gap:10px; padding:0 14px; height:44px; min-height:44px; background:#fff; border:1px solid #8a8a8a; border-radius:2px; text-decoration:none; color:inherit; margin:8px 0 16px; transition:none} #lineMask .install-guide-link:hover{background:#fff; box-shadow:none; transform:none} #lineMask .install-guide-link-icon{font-size:20px; line-height:1; display:inline-flex; align-items:center} #lineMask .install-guide-link-text{flex:1} #lineMask .install-guide-link-title{display:block; font-size:14px; font-weight:600; color:#000} #lineMask .install-guide-link-arrow{color:#000; font-size:16px; font-weight:400; display:inline-flex; align-items:center} #lineMask .install-guide, #lineMask .install-guide *{font-family:inherit} /* == OFFICE_PICKPRICE_20261016 == 选择版本界面: 「选择」左侧显示价格 */ #lineMask .n10-opt-price-go{flex:0 0 auto; font-size:14px; font-weight:700; color:#0A0A0B; white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:0} /* ============================================================================ OFFICE_MOBILEFIX_20261024 —— 手机端横向溢出修复（只做加法，不改上面任何既有行） 根因（headless 实测 390 视口 / iPhone UA）: · .nav-actions 三颗按钮被 OFFICE_NAVUNI 强制 min-width:110px + gap:10px => .nav-actions 固定 354px，从 x=212 起排 => 右边界 566 => 文档 scrollWidth=566 · .nav-links 被 OFFICE_NAVLINKSFIX 用 display:flex !important 强制显示（手机端也不收）， 吃掉左侧 ~100px，把品牌名挤成竖排 照抄对象: /sketchup/ /cad/ /maya/ /3dsmax/ —— 它们同样在 <=900px 收掉 .nav-links， 按钮用自然宽度（min-width:auto / padding 8px 14px），390 视口下 scrollWidth=390 ✓ 本块作用域只用 @media，桌面(>900px)一行规则都不命中 => 桌面 1440 完全不变。 回滚: 删除本块（并把 index.html 里 app.css?v= 改回 160）。 ============================================================================ */ /* (1) 与全站其它 5 站一致：<=900px 收起导航文字链接（品牌 + 按钮仍在一行） */ @media (max-width: 900px) { .nav .nav-links, .nav-inner .nav-links, .nav-actions ~ .nav-links, div.nav-links { display: none !important; } } /* (2) <=600px：按钮改弹性（自然宽度）+ 允许换行，品牌名不竖排、不压缩 */ @media (max-width: 600px) { .nav-inner { height: auto !important; min-height: 56px !important; padding: 8px 12px !important; flex-wrap: wrap !important; row-gap: 8px !important; column-gap: 8px !important; } .nav-inner .nav-brand, .nav-brand { flex: 0 0 auto !important; flex-shrink: 0 !important; min-width: 0 !important; } .nav-brand .nav-brand-text, .nav-brand-text { flex-direction: row !important; flex-wrap: nowrap !important; align-items: baseline !important; white-space: nowrap !important; } .nav-brand .nav-brand-name, .nav-brand-name { white-space: nowrap !important; flex-shrink: 0 !important; font-size: 16px !important; letter-spacing: -0.2px !important; } /* 三颗按钮：去掉写死的 110px 最小宽，改自然宽度 + 收窄内边距 */ .nav-actions { flex: 0 1 auto !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center !important; gap: 6px !important; margin-left: auto !important; max-width: 100% !important; } .nav-actions #btn-login, .nav-actions #btn-orders, .nav-actions #btn-kefu, .nav-actions .nav-btn, .nav-actions > a, .nav-actions > div, .nav-actions [role="button"] { min-width: 0 !important; width: auto !important; max-width: 100% !important; height: 32px !important; padding: 0 10px !important; font-size: 12.5px !important; gap: 0 !important; flex: 0 0 auto !important; white-space: nowrap !important; } .nav-actions svg, .nav-actions img { width: 13px !important; height: 13px !important; margin-right: 4px !important; flex: none !important; } } /* (3) <=480px：兜底（iPhone 390 / 375 / 360 都在这里） */ @media (max-width: 480px) { .nav-inner { padding: 8px 10px !important; } .nav-brand-name { font-size: 15px !important; } .nav-actions { gap: 5px !important; } .nav-actions #btn-login, .nav-actions #btn-orders, .nav-actions #btn-kefu, .nav-actions .nav-btn, .nav-actions > a, .nav-actions > div, .nav-actions [role="button"] { padding: 0 9px !important; font-size: 12px !important; height: 30px !important; } } /* ============================================================================ OFFICE_MOBILEFIX2_20261024 —— 第二处溢出：软件分类卡网格（.cat-grid / .sw-card） 实测 390 视口: #categorySection > .container 左右 padding 44px（桌面口径被带到手机）， 容器仅 302px；.cat-grid 仍是 repeat(2, 1fr)，而每张卡的 min-content（图标44 + 内边距36 + gap12 + 名称不可断行）≈180px => 轨道被撑到 180.6px，第 2 张卡右边界 395.3 => 文档 scrollWidth 395（导航修好后剩下的 5px 溢出就是它）。 修法: 手机上把轨道改成 minmax(0,1fr) 让卡片可缩、卡片内边距/图标同步收小、 分类区容器留白收到 16px（桌面不受影响）。 ============================================================================ */ @media (max-width: 600px) { #categorySection > .container, #categorySection.section > .container { padding: 20px 16px !important; } .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .sw-card { min-width: 0 !important; padding: 12px 10px !important; gap: 8px !important; } .sw-card-icon { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; padding: 3px !important; } .sw-card-name { font-size: 13px !important; } .sw-card-desc { font-size: 11px !important; line-height: 1.45 !important; } } /* ============================================================================ OFFICE_MOBILEFIX3_20261024 —— 首屏两栏（.hero-grid）在手机上恢复单栏 app.css 第 380 行用 !important 把 .hero-grid 锁成 minmax(0,1.12fr) minmax(0,0.88fr)， 连 <=900px 的 1fr 规则（第 77 行）都被压掉 => 390 视口下正文只剩 200px 宽（一行 ~12 字）， 右图被压成 157×88。第 77 行本来就是「手机单栏」的原始设计，这里用同特异性的媒体查询 把它是找回来（桌面 >900px 不命中，一行都不改）。 ============================================================================ */ @media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px !important; align-items: start !important; } .hero-text { justify-content: flex-start !important; } .hero-img { max-width: 560px !important; width: 100% !important; margin: 0 auto !important; height: auto !important; } .hero-img img { width: 100% !important; height: auto !important; object-fit: fill !important; } } /* ============================================================================ OFFICE_MOBILEFIX4_20261024 —— 首屏左右留白（手机） `.hero .container` 被桌面规则设成 padding-left/right:0（为了和下方面板左右齐平）， 桌面有 1140 版心居中所以看不出问题；390 视口下就变成正文贴边（左 0 / 右 390）。 只在 <=900px 给回 18px 内边距，桌面不受影响。 ============================================================================ */ @media (max-width: 900px) { .hero .container, .hero > .container { padding-left: 18px !important; padding-right: 18px !important; } } /* ============================================================================ OFFICE_MOBILEFIX5_20261024 —— H1 在 390 视口下的断行 390 视口（内容宽 354）下 30px 的 H1 把「Mac 版下载」挤成「Mac 版下 / 载」单字孤行。 app.css 第 324 行原本就有 `@media (max-width:480px){ .hero h1{font-size:24px} }`， 但被第 389/396 行的 40px/30px !important 压掉了；这里按原设计在 <=480 恢复 24px （24px 时整句「Office 中文版 · Mac 版下载」正好一行放下）。 ============================================================================ */ @media (max-width: 480px) { .hero h1 { font-size: 24px !important; line-height: 1.35 !important; letter-spacing: 0 !important; } }