/* 布局与视觉基础样式表 */ :root { /* 色彩系统 · 调暖：主色蓝灰（更温和）、强调色暖橘金（去掉金属冷感） */ --xa-navy: #2C3E50; /* 主色：暖调深蓝灰（柔化） */ --xa-navy-deep: #1A2530; /* 更深 */ --xa-silver: #6B7280; /* 银灰：次要文字 */ --xa-bronze: #C77F3D; /* 暖橘金：点缀，亲和温暖 */ --xa-bg: #FFFFFF; /* 纯白底（09-10 去米黄，原 #FAF8F5） */ --xa-white: #FFFFFF; --xa-line: #EAE6E0; /* 分隔线（暖灰） */ --xa-ink: #1F2937; /* 标题（深灰而非纯黑） */ --xa-text: #4B5563; /* 正文 */ --xa-mute: #9A9A9A; /* 次要 */ --xa-accent: #C77F3D; /* 强调（与 bronze 一致） */ /* 字体 */ --xa-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif; --xa-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --xa-en: "Inter", -apple-system, sans-serif; /* 间距 */ --xa-s-1: 4px; --xa-s-2: 8px; --xa-s-3: 16px; --xa-s-4: 24px; --xa-s-5: 32px; --xa-s-6: 48px; --xa-s-7: 64px; --xa-s-8: 96px; --xa-s-9: 128px; /* 容器 */ --xa-container: 1240px; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: var(--xa-sans); color: var(--xa-text); background: var(--xa-bg); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* 容器 */ .xa-container { max-width: var(--xa-container); margin: 0 auto; padding: 0 var(--xa-s-4); } /* 字体类 */ .xa-h1 { font-family: var(--xa-serif); font-size: 56px; font-weight: 500; line-height: 1.2; color: var(--xa-ink); letter-spacing: -0.5px; } .xa-h2 { font-family: var(--xa-serif); font-size: 38px; font-weight: 500; line-height: 1.3; color: var(--xa-ink); letter-spacing: -0.3px; } .xa-h3 { font-family: var(--xa-serif); font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--xa-ink); } .xa-eyebrow { font-family: var(--xa-en); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--xa-bronze); } .xa-lead { font-size: 17px; line-height: 1.8; color: var(--xa-text); } .xa-body { font-size: 15px; color: var(--xa-text); } .xa-small { font-size: 13px; color: var(--xa-mute); } /* 按钮 */ .xa-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-size: 14px; font-weight: 500; letter-spacing: 1px; transition: all .3s ease; border: 1px solid; } .xa-btn--ink { background: var(--xa-navy); color: var(--xa-white); border-color: var(--xa-navy); } .xa-btn--ink:hover { background: var(--xa-navy-deep); } .xa-btn--line { background: transparent; color: var(--xa-ink); border-color: var(--xa-ink); } .xa-btn--line:hover { background: var(--xa-ink); color: var(--xa-white); } .xa-btn--ghost { background: transparent; color: var(--xa-white); border-color: rgba(255,255,255,.4); } .xa-btn--ghost:hover { background: var(--xa-white); color: var(--xa-ink); border-color: var(--xa-white); } /* === 导航 === */ .xa-nav { position: sticky; top: 0; z-index: 50; background: #FFFFFF; backdrop-filter: blur(8px); border-bottom: 1px solid var(--xa-line); } .xa-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .xa-logo { font-family: var(--xa-serif); font-size: 22px; font-weight: 600; color: var(--xa-ink); letter-spacing: 1px; } .xa-logo span { color: var(--xa-bronze); margin-left: 2px; } .xa-nav__menu { display: flex; gap: 40px; } .xa-nav__menu a { font-size: 14px; color: var(--xa-text); padding: 6px 0; position: relative; transition: color .2s; } .xa-nav__menu a:hover { color: var(--xa-ink); } .xa-nav__menu a.xa-on { color: var(--xa-ink); font-weight: 500; } .xa-nav__menu a.xa-on::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--xa-bronze); } .xa-nav__cta { display: flex; gap: 12px; align-items: center; } /* `.xa-lang`（原样板的 CN/EN 语言标识）已于 2026-09-10 随 base.html 一并移除： 本站纯中文，没有可切换的语言，该元素是死控件。定义不再保留。 */ /* === Hero（大气非对称） === */ .xa-hero { position: relative; background: var(--xa-navy); color: var(--xa-white); overflow: hidden; } .xa-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; min-height: 440px; padding: 52px 0; } .xa-hero__copy { position: relative; z-index: 2; } .xa-hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--xa-bronze); font-family: var(--xa-en); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; padding-bottom: 20px; } .xa-hero__eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--xa-bronze); } .xa-hero__title { font-family: var(--xa-serif); font-size: 60px; font-weight: 400; line-height: 1.18; letter-spacing: 1px; margin-bottom: 20px; } .xa-hero__title em { font-style: normal; color: var(--xa-bronze); } .xa-hero__sub { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.75); max-width: 520px; margin-bottom: 40px; } .xa-hero__actions { display: flex; gap: 16px; align-items: center; } .xa-hero__visual { position: relative; } .xa-hero__visual img { width: 100%; height: 480px; object-fit: cover; border-radius: 2px; } .xa-hero__badge { position: absolute; bottom: 24px; left: 24px; background: rgba(255,255,255,.95); color: var(--xa-ink); padding: 16px 20px; font-size: 13px; } .xa-hero__badge b { display: block; font-size: 24px; font-weight: 600; color: var(--xa-navy); font-family: var(--xa-serif); margin-bottom: 2px; } .xa-hero__pattern { position: absolute; inset: 0; opacity: .06; background-image: linear-gradient(45deg, rgba(184,149,106,.3) 25%, transparent 25%, transparent 50%, rgba(184,149,106,.3) 50%, rgba(184,149,106,.3) 75%, transparent 75%, transparent); background-size: 80px 80px; pointer-events: none; } /* === 通用 section === */ /* 2026-09-10 区块留白统一收紧约 40%（用户反馈：区块之间的空白条太宽）。 相邻区块之间的 margin 本来都是 0，视觉上那条空白 = 上区块 padding-bottom + 下区块 padding-top 两段叠加（实测首页最大一条 40+40=80px），所以只能两块一起收。改后同一条缝 = 24+24=48px。 手机端 900px 断点的 30px 同步按同比例收成 18px。 */ .xa-sec { padding: 24px 0; } .xa-sec--tight { padding: 20px 0; } .xa-sec--alt { background: var(--xa-white); } .xa-sec--ink { background: var(--xa-navy); color: var(--xa-white); } .xa-sec__head { max-width: 720px; margin-bottom: 32px; } .xa-sec__head--center { margin-left: auto; margin-right: auto; text-align: center; } .xa-sec__eyebrow { color: var(--xa-bronze); font-family: var(--xa-en); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; } .xa-sec__title { font-family: var(--xa-serif); font-size: 36px; font-weight: 500; line-height: 1.22; color: var(--xa-ink); margin-bottom: 14px; letter-spacing: -0.3px; } .xa-sec--ink .xa-sec__title { color: var(--xa-white); } .xa-sec__sub { font-size: 16px; line-height: 1.8; color: var(--xa-silver); } .xa-sec--ink .xa-sec__sub { color: rgba(255,255,255,.7); } .xa-sec__rule { width: 48px; height: 1px; background: var(--xa-bronze); margin: 20px 0 0; } .xa-sec__head--center .xa-sec__rule { margin: 20px auto 0; } /* === 产品卡片 === */ .xa-grid { display: grid; gap: 32px; } .xa-grid--5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1100px) { .xa-grid--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .xa-grid--5 { grid-template-columns: repeat(2, 1fr); } } .xa-card { position: relative; background: var(--xa-white); transition: all .4s ease; border: 1px solid var(--xa-line); } .xa-card:hover { transform: translateY(-4px); border-color: var(--xa-bronze); } .xa-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #F2F4F6; } .xa-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .xa-card:hover .xa-card__media img { transform: scale(1.04); } .xa-card__body { padding: 20px 20px 24px; } .xa-card__index { font-family: var(--xa-en); font-size: 11px; color: var(--xa-mute); letter-spacing: 2px; margin-bottom: 12px; } .xa-card__title { font-family: var(--xa-serif); font-size: 20px; color: var(--xa-ink); margin-bottom: 10px; line-height: 1.4; } .xa-card__desc { font-size: 13px; color: var(--xa-silver); line-height: 1.7; margin-bottom: 16px; min-height: 4em; } .xa-card__more { font-size: 13px; color: var(--xa-bronze); letter-spacing: 1px; display: inline-flex; gap: 6px; align-items: center; } .xa-card__more::after { content: '→'; transition: transform .3s; } .xa-card:hover .xa-card__more::after { transform: translateX(4px); } /* === 教学课件列表（2026-09-10 参考视频卡片布局重做：5 列小卡 → 3 列大卡，16:9 封面 + 播放钮 + 时长） === */ .xa-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 1100px) { .xa-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } @media (max-width: 720px) { .xa-cgrid { grid-template-columns: 1fr; gap: 16px; } } .xa-ccard { display: flex; flex-direction: column; background: var(--xa-white); border: 1px solid var(--xa-line); border-radius: 4px; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .xa-ccard:hover { transform: translateY(-4px); border-color: var(--xa-bronze); box-shadow: 0 16px 38px rgba(44,62,80,.10); } .xa-ccard__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--xa-navy) 0%, var(--xa-navy-deep) 100%); } .xa-ccard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .xa-ccard:hover .xa-ccard__media img { transform: scale(1.045); } .xa-ccard__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--xa-serif); font-size: 60px; color: rgba(255,255,255,.34); } .xa-ccard__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.93); color: var(--xa-navy); display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; padding-left: 3px; box-shadow: 0 6px 20px rgba(15,25,35,.28); transition: transform .3s ease, background .3s ease; } .xa-ccard:hover .xa-ccard__play { transform: translate(-50%,-50%) scale(1.09); background: var(--xa-white); } .xa-ccard__dur { position: absolute; right: 10px; bottom: 10px; background: rgba(20,32,46,.78); color: #fff; font-family: var(--xa-en); font-size: 11.5px; letter-spacing: .6px; padding: 2px 8px; border-radius: 2px; } .xa-ccard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; } .xa-ccard__title { font-family: var(--xa-serif); font-size: 17px; font-weight: 500; color: var(--xa-ink); line-height: 1.45; margin: 0 0 8px; } .xa-ccard__desc { font-size: 13px; color: var(--xa-silver); line-height: 1.7; margin: 0 0 14px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xa-ccard__cat { align-self: flex-start; font-size: 11.5px; letter-spacing: 1px; color: var(--xa-bronze); background: rgba(199,127,61,.10); padding: 3px 10px; border-radius: 2px; } /* === 应用案例列表（2026-09-10 A 站自持模板：3 列卡片，有几条就展示几条） === */ .xa-casegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 1100px) { .xa-casegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } @media (max-width: 720px) { .xa-casegrid { grid-template-columns: 1fr; gap: 16px; } } .xa-casecard { display: flex; flex-direction: column; background: var(--xa-white); border: 1px solid var(--xa-line); border-radius: 4px; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .xa-casecard:hover { transform: translateY(-4px); border-color: var(--xa-bronze); box-shadow: 0 16px 38px rgba(44,62,80,.10); } .xa-casecard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, var(--xa-navy) 0%, var(--xa-navy-deep) 100%); } .xa-casecard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .xa-casecard:hover .xa-casecard__media img { transform: scale(1.045); } .xa-casecard__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #F2F4F6; font-size: 12.5px; letter-spacing: 3px; color: var(--xa-mute); } .xa-casecard__tag { position: absolute; left: 10px; top: 10px; font-size: 11.5px; letter-spacing: .6px; color: #fff; background: rgba(20,32,46,.72); padding: 3px 10px; border-radius: 2px; } /* 产品页「应用案例」兜底卡：标明该案例来自哪台设备（2026-09-11） */ .xa-casecard__src { position: absolute; right: 10px; top: 10px; font-size: 11.5px; letter-spacing: .6px; color: #fff; background: rgba(199,127,61,.94); padding: 3px 10px; border-radius: 2px; } .xa-casecard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .xa-casecard__title { font-family: var(--xa-serif); font-size: 18px; font-weight: 500; color: var(--xa-ink); line-height: 1.45; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xa-casecard__meta { font-size: 12px; color: var(--xa-mute); letter-spacing: .5px; margin-bottom: 10px; } .xa-casecard__desc { font-size: 13px; color: var(--xa-silver); line-height: 1.7; margin: 0 0 16px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .xa-casecard__more { font-size: 13px; color: var(--xa-bronze); letter-spacing: 1px; display: inline-flex; gap: 6px; align-items: center; } .xa-casecard__more::after { content: '→'; transition: transform .3s; } .xa-casecard:hover .xa-casecard__more::after { transform: translateX(4px); } .xa-empty { padding: 80px 0; text-align: center; color: var(--xa-mute); font-size: 14px; } /* === 优势（4 列图标） === */ .xa-feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--xa-line); border-bottom: 1px solid var(--xa-line); } .xa-feat__item { padding: 22px 20px; border-left: 1px solid var(--xa-line); } .xa-feat__item:first-child { border-left: none; } @media (max-width: 900px) { .xa-feat { grid-template-columns: repeat(2, 1fr); } .xa-feat__item:nth-child(3) { border-left: none; } .xa-feat__item { border-top: 1px solid var(--xa-line); } } .xa-feat__num { font-family: var(--xa-serif); font-size: 28px; color: var(--xa-bronze); margin-bottom: 12px; line-height: 1; } .xa-feat__title { font-family: var(--xa-serif); font-size: 18px; color: var(--xa-ink); margin-bottom: 12px; } .xa-feat__desc { font-size: 14px; color: var(--xa-silver); line-height: 1.7; } /* === 案例 === */ .xa-case { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; } @media (max-width: 900px) { .xa-case { grid-template-columns: 1fr; } } .xa-case__main { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--xa-navy); } .xa-case__main img { width: 100%; height: 100%; object-fit: cover; } .xa-case__main__cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px; color: var(--xa-white); background: linear-gradient(to top, rgba(15,30,60,.95), transparent); } .xa-case__main__cap h4 { font-family: var(--xa-serif); font-size: 22px; font-weight: 500; margin-bottom: 8px; } .xa-case__main__cap p { font-size: 13px; color: rgba(255,255,255,.8); } .xa-case__side { display: flex; flex-direction: column; gap: 24px; } .xa-case__item { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #F2F4F6; } .xa-case__item img { width: 100%; height: 100%; object-fit: cover; } .xa-case__item__cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px; background: linear-gradient(to top, rgba(15,30,60,.92), transparent); color: var(--xa-white); } .xa-case__item__cap h5 { font-family: var(--xa-serif); font-size: 17px; font-weight: 500; } /* === 信任数据 === */ .xa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } @media (max-width: 900px) { .xa-stats { grid-template-columns: repeat(2, 1fr); } } .xa-stat { text-align: center; padding: 24px 20px; border-left: 1px solid var(--xa-line); } .xa-stat:first-child { border-left: none; } .xa-stat__num { font-family: var(--xa-serif); font-size: 40px; color: #FFFFFF; font-weight: 500; line-height: 1; margin-bottom: 8px; letter-spacing: -1px; } .xa-stat__num em { font-style: normal; color: var(--xa-bronze); } .xa-stat__label { font-size: 13px; color: rgba(255,255,255,.75); letter-spacing: 1px; } /* === 底部 CTA === */ .xa-cta { text-align: center; } .xa-cta__title { font-family: var(--xa-serif); font-size: 34px; color: var(--xa-ink); margin-bottom: 14px; font-weight: 500; } .xa-cta__title em { color: var(--xa-bronze); font-style: normal; } .xa-cta__sub { font-size: 16px; color: var(--xa-silver); max-width: 560px; margin: 0 auto 26px; line-height: 1.8; } .xa-cta__actions { display: inline-flex; gap: 16px; } /* === 页脚（2026-09-10 重设计：四列 -> 左品牌 / 右链接两栏，390px -> ~190px； 二次微调：去掉 logo 图片，标题上提 + 下方本站描述） === */ .xa-foot { background: #131A22; color: rgba(255,255,255,.6); padding: 30px 0 18px; font-size: 13px; } .xa-foot__main { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); } .xa-foot__title { font-family: var(--xa-serif); font-size: 18.5px; color: var(--xa-white); font-weight: 600; letter-spacing: .3px; line-height: 1.3; margin: 0 0 11px; } .xa-foot__slogan { line-height: 1.75; color: rgba(255,255,255,.46); font-size: 12.5px; margin: 0; max-width: 360px; } .xa-foot__links { display: flex; flex-direction: column; gap: 12px; padding-top: 3px; } .xa-foot__nav { display: flex; flex-wrap: wrap; gap: 7px 20px; } .xa-foot__nav a { color: rgba(255,255,255,.74); font-size: 13px; } .xa-foot__nav a:hover { color: var(--xa-bronze); } .xa-foot__contact { display: flex; flex-wrap: wrap; gap: 5px 20px; color: rgba(255,255,255,.46); font-size: 12.5px; } .xa-foot__free { color: var(--xa-bronze) !important; } .xa-foot__free:hover { text-decoration: underline; } .xa-foot__bot { padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: rgba(255,255,255,.4); } .xa-foot__bot a { color: rgba(255,255,255,.4); } .xa-foot__bot a:hover { color: var(--xa-bronze); } @media (max-width: 900px) { .xa-foot { padding: 26px 0 16px; } .xa-foot__main { grid-template-columns: 1fr; gap: 18px; } } /* === 工具类 === */ .xa-hr { height: 1px; background: var(--xa-line); border: none; margin: 0; } .xa-flex { display: flex; } .xa-flex--between { justify-content: space-between; align-items: center; } /* 响应式 */ @media (max-width: 900px) { .xa-h1 { font-size: 38px; } .xa-h2, .xa-sec__title { font-size: 30px; } .xa-hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 60px 0; min-height: auto; } .xa-hero__title { font-size: 40px; } .xa-hero__visual img { height: 320px; } .xa-sec { padding: 18px 0; } .xa-sec__head { margin-bottom: 24px; } .xa-nav__menu { display: none; } } /* ====== 产品详情页 ====== */ .xa-crumb { padding: 13px 0; border-bottom: 1px solid var(--xa-line); font-size: 13px; color: var(--xa-mute); } .xa-crumb a { color: var(--xa-silver); } .xa-crumb a:hover { color: var(--xa-ink); } .xa-crumb b { color: var(--xa-ink); font-weight: 500; } .xa-detail { padding: 32px 0; } .xa-detail__head { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: stretch; margin-bottom: 40px; } @media (max-width: 900px) { .xa-detail__head { grid-template-columns: 1fr; gap: 40px; align-items: start; } } .xa-detail__media { position: relative; background: var(--xa-white); border: 1px solid var(--xa-line); display: flex; flex-direction: column; } .xa-detail__info { display: flex; flex-direction: column; } .xa-detail__info > .xa-btn { align-self: flex-start; } /* 大图 + 4 小图轮换 */ .xa-gallery { display: flex; flex-direction: column; gap: 10px; padding: 10px; } .xa-gallery__main { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #F2F4F6; } .xa-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; } .xa-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .xa-thumb { padding: 0; border: 2px solid transparent; background: transparent; cursor: pointer; aspect-ratio: 4/3; overflow: hidden; border-radius: 0; transition: border-color .15s; } .xa-thumb:hover { border-color: var(--xa-line-strong, #d4dbe4); } .xa-thumb.active { border-color: var(--xa-bronze); box-shadow: 0 0 0 1px var(--xa-bronze); } .xa-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .xa-detail__info h1 { font-family: var(--xa-serif); font-size: 42px; font-weight: 500; color: var(--xa-ink); line-height: 1.25; margin-bottom: 16px; letter-spacing: -0.5px; } .xa-detail__tag { font-family: var(--xa-en); font-size: 12px; letter-spacing: 2px; color: var(--xa-bronze); text-transform: uppercase; margin-bottom: 20px; display: block; } .xa-detail__lead { font-size: 17px; line-height: 1.9; color: var(--xa-text); margin-bottom: 28px; } .xa-detail__actions { display: flex; gap: 14px; margin-bottom: 40px; margin-top: auto; padding-top: 8px; } /* 内容块 */ .xa-block { margin-bottom: 72px; } /* 09-11 产品详情页留白收紧（用户反馈区块间空白过高）；只作用于 .xa-detail 内，其他页不受影响 */ .xa-detail .xa-block { margin-bottom: 38px; } .xa-detail .xa-block:last-child { margin-bottom: 0; } .xa-block__title { display: flex; align-items: baseline; gap: 20px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--xa-line); } .xa-block__title h2 { font-family: var(--xa-serif); font-size: 30px; font-weight: 500; color: var(--xa-ink); } .xa-block__title span { font-family: var(--xa-en); font-size: 12px; letter-spacing: 2px; color: var(--xa-mute); } .xa-block__body { font-size: 15px; line-height: 1.9; color: var(--xa-text); } .xa-block__body p { margin-bottom: 16px; } /* 特性列表 */ .xa-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 720px) { .xa-feats { grid-template-columns: 1fr; } } .xa-feat-item { display: flex; gap: 16px; padding: 20px; background: var(--xa-white); border: 1px solid var(--xa-line); align-items: flex-start; } .xa-feat-item__no { font-family: var(--xa-serif); font-size: 20px; color: var(--xa-bronze); min-width: 34px; } .xa-feat-item p { font-size: 14px; line-height: 1.7; color: var(--xa-text); } /* 参数表 */ .xa-tbl { width: 100%; border-collapse: collapse; background: var(--xa-white); } .xa-tbl th, .xa-tbl td { border: 1px solid var(--xa-line); padding: 14px 20px; font-size: 14px; text-align: left; } .xa-tbl th { background: var(--xa-navy); color: var(--xa-white); font-weight: 500; letter-spacing: 1px; font-size: 13px; width: 160px; } .xa-tbl td { color: var(--xa-text); } .xa-tbl tr:nth-child(even) td { background: #F7F8FA; } /* 曲线区（旧版两列大卡 · 09-11 起产品详情页改用下方 .xa-gsec 双分区，此处保留兼容） */ .xa-curves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 900px) { .xa-curves { grid-template-columns: 1fr; } } .xa-curve { background: var(--xa-white); border: 1px solid var(--xa-line); padding: 20px; } .xa-curve img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .xa-curve p { font-size: 13px; color: var(--xa-silver); margin-top: 12px; } /* ===== 设备图片 / 测试曲线 · 双分区图文清单（样式五加强版 2026-09-11） ===== */ .xa-gsec { margin-bottom: 34px; } .xa-gsec:last-child { margin-bottom: 0; } .xa-gsec__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .xa-gsec__hd h3 { font-family: var(--xa-serif); font-size: 17px; font-weight: 500; color: var(--xa-ink); } .xa-gsec__hd em { font-style: normal; font-family: var(--xa-en); font-size: 10.5px; letter-spacing: 1.4px; color: var(--xa-bronze); border: 1px solid rgba(199,127,61,.35); background: rgba(199,127,61,.06); padding: 1px 7px; border-radius: 3px; } .xa-gsec__hd i { font-style: normal; font-size: 12px; color: var(--xa-mute); } .xa-gsec__hd::after { content: ""; flex: 1; height: 1px; background: var(--xa-line); } /* 两列；一行两张 */ .xa-glist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; } .xa-gli { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--xa-line); background: var(--xa-white); transition: border-color .15s; } .xa-gli:hover { border-color: #D4DBE4; } .xa-gli__ph { position: relative; overflow: hidden; background: #F2F4F6; aspect-ratio: 3/2; cursor: zoom-in; } .xa-gli__ph img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s ease; } .xa-gli:hover .xa-gli__ph img { transform: scale(1.04); } /* 曲线：白底 + 完整显示不裁切（刻度不能掉） */ .xa-gli__ph--chart { background: #fff; border: 1px solid var(--xa-line); padding: 8px; box-sizing: border-box; } .xa-gli__ph--chart img { object-fit: contain; } .xa-gli:hover .xa-gli__ph--chart img { transform: none; } .xa-gli__no { display: block; font-family: var(--xa-en); font-size: 10.5px; letter-spacing: 1px; color: var(--xa-bronze); margin-bottom: 5px; } .xa-gli__tx h4 { font-family: var(--xa-serif); font-size: 14.5px; font-weight: 500; color: var(--xa-ink); margin-bottom: 5px; } .xa-gli__tx p { font-size: 12px; color: var(--xa-mute); line-height: 1.68; } /* 图片点击放大（全局 lightbox，无外部依赖） */ .xa-gallery__main img { cursor: zoom-in; } .xa-lightbox { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 44px 40px; background: rgba(16,24,34,.88); } .xa-lightbox.is-open { display: flex; } .xa-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; background: var(--xa-white); box-shadow: 0 24px 70px rgba(0,0,0,.45); } .xa-lightbox__close { position: absolute; right: 24px; top: 20px; width: 42px; height: 42px; font-size: 22px; line-height: 1; color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.32); border-radius: 50%; cursor: pointer; transition: background .15s; font-family: var(--xa-en); } .xa-lightbox__close:hover { background: rgba(255,255,255,.24); } @media (max-width: 620px) { .xa-lightbox { padding: 58px 14px 24px; } .xa-lightbox img { max-width: 100%; max-height: 76vh; } } @media (max-width: 1100px) { .xa-glist { grid-template-columns: 1fr; } } @media (max-width: 620px) { .xa-gli { grid-template-columns: 1fr; gap: 11px; } } /* 页眉小 banner */ .xa-pagehead { background: var(--xa-navy); color: var(--xa-white); padding: 72px 0 64px; } .xa-pagehead__eyebrow { font-family: var(--xa-en); font-size: 12px; letter-spacing: 3px; color: var(--xa-bronze); text-transform: uppercase; margin-bottom: 16px; } .xa-pagehead h1 { font-family: var(--xa-serif); font-size: 44px; font-weight: 500; line-height: 1.3; margin-bottom: 16px; letter-spacing: -0.5px; } .xa-pagehead p { font-size: 16px; color: rgba(255,255,255,.7); max-width: 640px; } /* ====== 下拉导航 ====== */ /* 下拉导航 · 升级质感 */ .xa-nav__menu li { position: relative; list-style: none; } .xa-nav__menu .xa-has-sub > a::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 6px; opacity: .5; transition: transform .25s, opacity .25s; } .xa-nav__menu .xa-has-sub:hover > a::after { transform: translateY(1px) rotate(225deg); opacity: .9; } .xa-nav__menu .xa-sub { position: absolute; top: calc(100% + 8px); left: -20px; min-width: 240px; background: rgba(255,255,255,.98); backdrop-filter: blur(12px); border: 1px solid var(--xa-line); border-radius: 8px; padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transition: opacity .25s ease, transform .28s cubic-bezier(.2,.8,.25,1), visibility 0s .25s; z-index: 60; box-shadow: 0 16px 40px rgba(15,30,60,.10), 0 4px 12px rgba(15,30,60,.06), 0 0 0 1px rgba(15,30,60,.04); } .xa-nav__menu .xa-sub::before { content: ''; position: absolute; top: -6px; left: 32px; width: 12px; height: 12px; background: rgba(255,255,255,.98); border-left: 1px solid var(--xa-line); border-top: 1px solid var(--xa-line); transform: rotate(45deg); border-top-left-radius: 3px; } .xa-nav__menu .xa-has-sub:hover .xa-sub, .xa-nav__menu .xa-has-sub:focus-within .xa-sub { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity .25s ease, transform .28s cubic-bezier(.2,.8,.25,1), visibility 0s 0s; } .xa-nav__menu .xa-sub a { display: flex; align-items: center; gap: 10px; padding: 10px 22px; font-size: 13px; color: var(--xa-text); border-left: 2px solid transparent; transition: all .2s; position: relative; } .xa-nav__menu .xa-sub a::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--xa-bronze); opacity: 0; transform: scale(0); transition: all .25s; flex-shrink: 0; } .xa-nav__menu .xa-sub a:hover { background: linear-gradient(90deg, rgba(199,127,61,.06) 0%, rgba(199,127,61,.02) 100%); color: var(--xa-ink); border-left-color: var(--xa-bronze); padding-left: 24px; font-weight: 500; } .xa-nav__menu .xa-sub a:hover::before { opacity: 1; transform: scale(1); } /* ====== 整体缩小响应式容器 ====== */ .xa-card__desc { min-height: 3.4em; } /* ====== Logo 图片（替换文字 logo） ====== */ .xa-logo { display: inline-flex; align-items: center; line-height: 1; } .xa-logo img { height: 26px; width: auto; display: block; } /* 图片缺失占位（首字） */ .xa-ph-initial { display: flex; align-items: center; justify-content: center; font-family: var(--xa-serif); font-size: 56px; color: var(--xa-navy); background: #F2F4F6; } /* ====================================================================== 产品中心页 · ① 完整测试链路时间线（xa-flow） ====================================================================== */ .xa-flow { background: var(--xa-white); padding: 72px 0 64px; } .xa-flow__head { max-width: 760px; margin-bottom: 48px; } .xa-flow__head--sm { margin-bottom: 36px; } .xa-flow__head--sm .xa-sec__title { font-size: 32px; } .xa-flow__head--sm .xa-sec__sub { font-size: 15px; } .xa-flow__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } @media (max-width: 1100px) { .xa-flow__steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (max-width: 720px) { .xa-flow__steps { grid-template-columns: repeat(2, 1fr); } } .xa-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: #F7F8FA; border: 1px solid var(--xa-line); padding: 26px 18px 20px; transition: all .35s ease; } .xa-step:hover { transform: translateY(-5px); border-color: var(--xa-bronze); box-shadow: 0 16px 36px rgba(26,37,48,.09); } .xa-step--off { opacity: .5; cursor: not-allowed; } .xa-step--off:hover { transform: none; border-color: var(--xa-line); box-shadow: none; } .xa-step__node { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--xa-navy); color: #E9D5B8; font-family: var(--xa-serif); font-size: 16px; font-weight: 600; line-height: 1; margin-bottom: 14px; transition: all .3s ease; } .xa-step:hover .xa-step__node { background: var(--xa-bronze); color: #fff; transform: scale(1.08); } .xa-step__lvl { font-family: var(--xa-en); font-size: 10.5px; letter-spacing: 1.6px; color: var(--xa-bronze); margin-bottom: 7px; } .xa-step__nm { font-family: var(--xa-serif); font-size: 15.5px; font-weight: 600; color: var(--xa-ink); margin-bottom: 6px; } .xa-step__rl { font-size: 11.5px; color: var(--xa-silver); line-height: 1.6; } .xa-step__go { margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--xa-bronze); letter-spacing: 1px; opacity: 0; transform: translateY(5px); transition: all .3s ease; } .xa-step:hover .xa-step__go { opacity: 1; transform: translateY(0); } .xa-step__go::after { content: ' →'; } .xa-step--off .xa-step__go { display: none; } .xa-flow__tail { margin-top: 26px; background: var(--xa-navy-deep); color: rgba(255,255,255,.85); padding: 16px 26px; display: flex; align-items: center; gap: 18px; font-size: 13.5px; line-height: 1.7; } .xa-flow__tail b { color: #E9D5B8; font-family: var(--xa-serif); font-weight: 600; letter-spacing: .5px; white-space: nowrap; } .xa-flow__tail-arrow { color: #5C7390; letter-spacing: 5px; font-size: 12px; white-space: nowrap; } @media (max-width: 900px) { .xa-flow__tail { flex-wrap: wrap; } } /* ====================================================================== 产品中心页 · ② 旗舰大卡（xa-phero） ====================================================================== */ .xa-phero { display: grid; grid-template-columns: 1.12fr .88fr; gap: 0; background: var(--xa-white); border: 1px solid var(--xa-line); transition: box-shadow .4s ease; } .xa-phero:hover { box-shadow: 0 24px 56px rgba(26,37,48,.10); } @media (max-width: 980px) { .xa-phero { grid-template-columns: 1fr; } } .xa-phero__media { position: relative; min-height: 480px; background: #F2F4F6; overflow: hidden; } .xa-phero__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } @media (max-width: 980px) { .xa-phero__media { min-height: auto; } .xa-phero__media img { position: static; height: 340px; } .xa-phero__media .xa-ph-initial { min-height: 340px; } } .xa-phero__flag { position: absolute; left: 18px; top: 18px; z-index: 2; background: var(--xa-bronze); color: #fff; font-size: 11px; letter-spacing: 2px; padding: 5px 14px; font-family: var(--xa-en); } .xa-phero__info { padding: 42px 46px 38px; display: flex; flex-direction: column; } @media (max-width: 1200px) { .xa-phero__info { padding: 34px 32px 30px; } } .xa-phero__tag { font-family: var(--xa-en); font-size: 11.5px; letter-spacing: 2.5px; color: var(--xa-bronze); text-transform: uppercase; margin-bottom: 14px; } .xa-phero__info h2 { font-family: var(--xa-serif); font-size: 32px; font-weight: 600; color: var(--xa-ink); line-height: 1.35; letter-spacing: .5px; margin-bottom: 14px; } .xa-phero__lead { font-size: 14.5px; line-height: 1.9; color: var(--xa-text); margin-bottom: 22px; } .xa-phero__feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; margin: 0 0 22px; } @media (max-width: 520px) { .xa-phero__feats { grid-template-columns: 1fr; } } .xa-phero__feats li { position: relative; font-size: 13px; color: var(--xa-text); padding-left: 20px; line-height: 1.6; } .xa-phero__feats li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--xa-bronze); font-size: 13px; } .xa-phero__app { font-size: 12.5px; color: var(--xa-silver); border-top: 1px dashed var(--xa-line); padding-top: 14px; margin-bottom: 26px; line-height: 1.8; } .xa-phero__app b { color: var(--xa-ink); font-weight: 600; } .xa-phero__acts { display: flex; gap: 14px; margin-top: auto; flex-wrap: wrap; } /* ====================================================================== 产品中心页 · ③ 4 列入口 + 参数 chip ====================================================================== */ .xa-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1100px) { .xa-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .xa-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 16px; } } .xa-card__ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .xa-card__chip { font-size: 11px; color: #7C6A55; background: #F4F5F7; border: 1px solid #E5DCCB; padding: 2px 9px; white-space: nowrap; font-family: var(--xa-serif); letter-spacing: .3px; } /* ====================================================================== /* ====================================================================== 首页 · 5 设备展示（Bento 5 格大方块：1 大 + 1 宽 + 2 小 + 1 底部全宽横条） ====================================================================== */ .xa-bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 240px 252px 176px; gap: 14px; } .xa-bento__cell { background: var(--xa-white); border: 1px solid var(--xa-line); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: all .25s ease; display: flex; flex-direction: column; } .xa-bento__cell:hover { border-color: var(--xa-bronze); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(199,127,61,.15); } .xa-bento__cell.c1 { grid-row: span 2; } .xa-bento__cell.c2 { grid-column: span 2; flex-direction: row; } .xa-bento__cell.c5 { grid-column: span 3; flex-direction: row; } .xa-bento__media { flex: 1; min-height: 0; overflow: hidden; position: relative; } /* 图片高度按各格比例分配：c1 竖高 / c2 左宽 / c3·c4 小横条 / c5 底部长条 */ .xa-bento__cell.c1 .xa-bento__media { flex: none; height: 284px; } .xa-bento__cell.c1 .xa-bento__info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .xa-bento__cell.c2 .xa-bento__media { flex: 0 0 284px; } .xa-bento__cell.c3 .xa-bento__media, .xa-bento__cell.c4 .xa-bento__media { flex: 0 0 112px; } .xa-bento__cell.c3 .xa-bento__info, .xa-bento__cell.c4 .xa-bento__info { padding: 15px 20px 17px; } .xa-bento__cell.c3 .xa-bento__desc, .xa-bento__cell.c4 .xa-bento__desc { -webkit-line-clamp: 1; } .xa-bento__cell.c5 .xa-bento__media { flex: 0 0 252px; } .xa-bento__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--xa-navy); background: #F2F4F6; } .xa-bento__cell.c1 .xa-bento__ph, .xa-bento__cell.c2 .xa-bento__ph { background: transparent; } .xa-bento__cell.c3 .xa-bento__ph, .xa-bento__cell.c4 .xa-bento__ph, .xa-bento__cell.c5 .xa-bento__ph { background: transparent; } /* Bento 产品实拍图（后台「首页内容」上传后显示，object-fit 裁剪不变形） */ .xa-bento__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .xa-bento__mark { font-family: var(--xa-serif); font-weight: 600; line-height: 1; opacity: .3; } .xa-bento__cell.c1 .xa-bento__mark { font-size: 96px; } .xa-bento__cell.c2 .xa-bento__mark { font-size: 64px; } .xa-bento__cell.c3 .xa-bento__mark, .xa-bento__cell.c4 .xa-bento__mark { font-size: 56px; } .xa-bento__cell.c5 .xa-bento__mark { font-size: 60px; } .xa-bento__ph-txt { font-size: 11px; letter-spacing: 2px; opacity: .55; } .xa-bento__info { padding: 18px 22px 22px; } .xa-bento__c2-info, .xa-bento__c5-info { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; } .xa-bento__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .xa-bento__num { font-family: var(--xa-serif); font-size: 18px; color: var(--xa-bronze); font-weight: 600; } .xa-bento__series { font-size: 10px; letter-spacing: 1.5px; color: var(--xa-mute); } .xa-bento__title { font-family: var(--xa-serif); font-size: 18px; color: var(--xa-ink); margin: 0 0 6px; font-weight: 600; line-height: 1.4; } .xa-bento__c2-info .xa-bento__title, .xa-bento__c5-info .xa-bento__title { font-size: 20px; } .xa-bento__desc { font-size: 12px; color: var(--xa-silver); line-height: 1.6; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xa-bento__more { font-size: 12px; color: var(--xa-bronze); font-family: var(--xa-serif); letter-spacing: .5px; } @media (max-width: 1100px) { .xa-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; } .xa-bento__cell.c1, .xa-bento__cell.c2 { grid-row: auto; grid-column: auto; flex-direction: column; } /* c5 通栏横排，与桌面版一致 */ .xa-bento__cell.c5 { grid-column: span 2; flex-direction: row; } .xa-bento__cell.c1 .xa-bento__media, .xa-bento__cell.c2 .xa-bento__media, .xa-bento__cell.c3 .xa-bento__media, .xa-bento__cell.c4 .xa-bento__media { flex: none; height: 172px; } .xa-bento__cell.c5 .xa-bento__media { flex: 0 0 220px; } /* 单栏/双栏下描述不再压行 */ .xa-bento__cell.c3 .xa-bento__desc, .xa-bento__cell.c4 .xa-bento__desc { -webkit-line-clamp: 2; } .xa-bento__cell.c3 .xa-bento__info, .xa-bento__cell.c4 .xa-bento__info { padding: 18px 22px 22px; } } @media (max-width: 720px) { .xa-bento { grid-template-columns: 1fr; grid-template-rows: repeat(5, auto); } .xa-bento__cell.c1, .xa-bento__cell.c2, .xa-bento__cell.c5 { grid-row: auto; grid-column: auto; flex-direction: column; height: auto; } .xa-bento__cell.c1 .xa-bento__media, .xa-bento__cell.c2 .xa-bento__media, .xa-bento__cell.c3 .xa-bento__media, .xa-bento__cell.c4 .xa-bento__media, .xa-bento__cell.c5 .xa-bento__media { flex: none; width: auto; height: 168px; } } /* ====================================================================== 首页 · 应用案例区（B+C 方案：stats bar + 1 大 3 小可切换 + 底部证言） ====================================================================== */ .xa-sec--cases { background: #FFFFFF; } .xa-cases-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--xa-navy); color: #fff; border-radius: 6px; margin: 24px auto 14px; overflow: hidden; } .xa-cases-stats__item { text-align: center; padding: 22px 12px; position: relative; } .xa-cases-stats__item + .xa-cases-stats__item::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,.18); } .xa-cases-stats__num { font-family: var(--xa-serif); font-size: 36px; line-height: 1; font-weight: 600; color: var(--xa-bronze); letter-spacing: 1px; } .xa-cases-stats__num em { font-style: normal; font-size: 18px; opacity: .8; margin-left: 2px; } .xa-cases-stats__label { font-size: 12px; letter-spacing: 2px; opacity: .75; margin-top: 8px; } .xa-cases-hint { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #7C6A55; letter-spacing: .5px; background: #F7F8FA; border: 1px dashed #E0D3B8; padding: 8px 14px; border-radius: 4px; max-width: 980px; margin: 0 auto 14px; } .xa-cases-hint__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--xa-bronze); animation: pulse 1.6s ease-in-out infinite; } .xa-cases-hint__name { color: var(--xa-navy); font-weight: 600; font-family: var(--xa-serif); margin-left: 4px; } .xa-cases { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; max-width: 1280px; margin: 0 auto; align-items: stretch; } .xa-case-main { display: grid; grid-template-rows: auto 1fr; background: #FFFFFF; border: 1px solid var(--xa-line); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: all .25s ease; position: relative; } .xa-case-main:hover { box-shadow: 0 8px 28px rgba(44,62,80,.12); transform: translateY(-2px); } .xa-case-main.is-switch { animation: caseSwitch .55s ease; } .xa-case-main__media { position: relative; aspect-ratio: 21/9; background: #F2F4F6; overflow: hidden; } .xa-case-main__media img { width: 100%; height: 100%; object-fit: cover; } .xa-case-main__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--xa-navy); } .xa-case-main__placeholder.is-fade { animation: fadeOut .22s ease; } .xa-case-main__placeholder.is-fade.is-back { animation: fadeIn .22s ease; } .xa-case-main__mark { font-family: var(--xa-serif); font-size: 72px; line-height: 1; opacity: .25; font-weight: 600; } .xa-case-main__txt { font-size: 12px; letter-spacing: 2px; opacity: .55; } .xa-case-main__badge { position: absolute; top: 14px; left: 14px; background: var(--xa-bronze); color: #fff; font-size: 11px; padding: 4px 10px; letter-spacing: .8px; border-radius: 3px; } .xa-case-main__cap { padding: 22px 26px 26px; } .xa-case-main__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .xa-case-main__tag { font-size: 11px; letter-spacing: 1.5px; padding: 4px 10px; background: var(--xa-navy); color: #fff; border-radius: 2px; } .xa-case-main__ix { font-size: 11px; color: #aaa; letter-spacing: 1px; font-family: var(--xa-serif); } .xa-case-main__title { font-family: var(--xa-serif); font-size: 26px; color: var(--xa-navy); margin: 6px 0 12px; font-weight: 600; line-height: 1.3; } .xa-case-main__desc { font-size: 14px; color: #4a4a4a; line-height: 1.75; margin: 0 0 16px; } .xa-case-main__equips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .xa-case-main__equips span { font-size: 11px; padding: 4px 10px; background: #F4F5F7; border: 1px solid #E5DCCB; color: #7C6A55; font-family: var(--xa-serif); letter-spacing: .3px; } .xa-case-main__loc { font-size: 12px; color: #888; padding-top: 10px; border-top: 1px dashed var(--xa-line); } .xa-case-side { display: flex; flex-direction: column; gap: 16px; min-height: 100%; } .xa-case-side__item { display: grid; grid-template-columns: 130px 1fr; gap: 0; background: #FFFFFF; border: 1px solid var(--xa-line); border-radius: 5px; overflow: hidden; text-decoration: none; color: inherit; transition: all .2s ease; cursor: pointer; flex: 1 1 0; min-height: 0; } .xa-case-side__item:hover { border-color: var(--xa-bronze); transform: translateX(-3px); box-shadow: 0 4px 14px rgba(199,127,61,.15); } .xa-case-side__item.is-on { border-color: var(--xa-bronze); box-shadow: 0 4px 14px rgba(199,127,61,.2); } .xa-case-side__item.is-from { animation: cardFrom .55s ease; } .xa-case-side__media { position: relative; aspect-ratio: 1/1; background: #F2F4F6; overflow: hidden; } .xa-case-side__media img { width: 100%; height: 100%; object-fit: cover; } .xa-case-side__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--xa-navy); } .xa-case-side__mark { font-family: var(--xa-serif); font-size: 32px; opacity: .3; font-weight: 600; } .xa-case-side__txt { font-size: 9px; letter-spacing: 1px; opacity: .5; } .xa-case-side__badge { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9px; padding: 2px 6px; letter-spacing: 1px; border-radius: 2px; } .xa-case-side__info { padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; } .xa-case-side__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .xa-case-side__tag { font-size: 9px; letter-spacing: 1px; padding: 2px 6px; background: #F4F5F7; color: var(--xa-navy); border-radius: 1px; } .xa-case-side__ix { font-size: 9px; color: #bbb; font-family: var(--xa-serif); letter-spacing: 1px; } .xa-case-side__title { font-family: var(--xa-serif); font-size: 16px; color: var(--xa-navy); margin: 2px 0 4px; font-weight: 600; line-height: 1.3; } .xa-case-side__short { font-size: 12px; color: #777; line-height: 1.5; margin: 0 0 8px; } .xa-case-side__meta { font-size: 11px; color: var(--xa-bronze); letter-spacing: .5px; } .xa-cases-quote { display: flex; align-items: flex-start; gap: 16px; background: linear-gradient(135deg, var(--xa-navy) 0%, #1f2f44 100%); color: #fff; padding: 22px 30px; border-radius: 6px; max-width: 1280px; margin: 28px auto 0; position: relative; overflow: hidden; } .xa-cases-quote::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: var(--xa-bronze); } .xa-cases-quote__mark { font-family: var(--xa-serif); font-size: 56px; line-height: .8; color: var(--xa-bronze); font-weight: 700; } .xa-cases-quote__body { flex: 1; } .xa-cases-quote__text { font-size: 14px; line-height: 1.8; margin: 0 0 8px; opacity: .92; } .xa-cases-quote__author { font-size: 11px; letter-spacing: 1.5px; opacity: .6; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } } @keyframes caseSwitch { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes cardFrom { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeOut { to { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 960px) { .xa-cases { grid-template-columns: 1fr; } .xa-cases-stats { grid-template-columns: repeat(2, 1fr); } .xa-cases-stats__item + .xa-cases-stats__item::before { display: none; } .xa-cases-stats__item:nth-child(odd)::after { content: ''; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,.18); } } @media (max-width: 640px) { .xa-cases-stats { grid-template-columns: 1fr; } .xa-case-side__item { grid-template-columns: 90px 1fr; } .xa-case-main__title { font-size: 22px; } } /* ========================================================================== 技术服务板块（首页 xa-svc） + 技术服务单页（xa-svcpg） ========================================================================== */ .xa-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 32px; } .xa-svc__card { display: block; background: var(--xa-white); border: 1px solid var(--xa-line); padding: 30px 26px 24px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .xa-svc__card:hover { transform: translateY(-4px); border-color: var(--xa-bronze); box-shadow: 0 10px 30px rgba(26, 37, 48, .08); } .xa-svc__icon { width: 44px; height: 44px; border: 1px solid var(--xa-line); display: flex; align-items: center; justify-content: center; color: var(--xa-bronze); margin-bottom: 20px; } .xa-svc__title { font-family: var(--xa-serif); font-size: 17px; color: var(--xa-ink); margin: 0 0 10px; } .xa-svc__desc { font-size: 13px; color: var(--xa-silver); line-height: 1.8; margin: 0 0 16px; } .xa-svc__more { font-size: 13px; color: var(--xa-bronze); } .xa-svc__card:hover .xa-svc__more { text-decoration: underline; } @media (max-width: 1000px) { .xa-svc { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .xa-svc { grid-template-columns: 1fr; } } /* 技术服务单页内容（page.html 的 item.content 内使用） */ .xa-svcpg__intro { font-size: 15px; color: var(--xa-text); line-height: 1.9; padding: 22px 26px; background: #F7F8FA; border-left: 3px solid var(--xa-bronze); margin: 0 0 34px; } .xa-svcpg__block { background: var(--xa-white); border: 1px solid var(--xa-line); padding: 34px 36px 30px; margin-bottom: 26px; } .xa-svcpg__block h2 { font-family: var(--xa-serif); font-size: 21px; color: var(--xa-ink); margin: 0 0 6px; } .xa-svcpg__lead { font-size: 13px; color: var(--xa-bronze); letter-spacing: 1px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--xa-line); } .xa-svcpg__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 34px; margin: 0; padding: 0; list-style: none; } .xa-svcpg__cols li { position: relative; padding-left: 18px; font-size: 14px; color: var(--xa-text); line-height: 1.8; } .xa-svcpg__cols li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; background: var(--xa-bronze); } .xa-svcpg__txt { font-size: 14px; color: var(--xa-text); line-height: 1.9; margin: 0 0 14px; } .xa-svcpg__note { background: #F7F8FA; border-left: 3px solid var(--xa-navy); padding: 18px 24px; font-size: 13px; color: var(--xa-silver); line-height: 1.9; } @media (max-width: 720px) { .xa-svcpg__cols { grid-template-columns: 1fr; } .xa-svcpg__block { padding: 24px 20px; } } /* ═══════════ 案例详情页 v20260906b（富文本分块自动美化）═══════════ */ /* 深蓝灰 pagehead 精致变体：青铜金眉标 + 暖金标签徽章 */ .xa-case-pagehead { position: relative; background: var(--xa-navy); color: var(--xa-white); padding: 88px 0 84px; overflow: hidden; } .xa-case-pagehead::after { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 260px at 88% -10%, rgba(199,127,61,.22) 0%, transparent 62%), radial-gradient(480px 300px at 8% 110%, rgba(255,255,255,.05) 0%, transparent 60%); pointer-events: none; } .xa-case-pagehead__wrap { position: relative; z-index: 1; max-width: 880px; } .xa-case-pagehead__eyebrow { font-family: var(--xa-en); font-size: 12px; letter-spacing: 4px; color: var(--xa-bronze); text-transform: uppercase; margin-bottom: 14px; } .xa-case-pagehead__title { font-family: var(--xa-serif); font-size: 40px; font-weight: 500; line-height: 1.32; letter-spacing: -0.4px; margin: 0 0 18px; } .xa-case-pagehead__tag { display: inline-flex; align-items: center; padding: 5px 15px; border-radius: 30px; font-size: 12.5px; letter-spacing: 1px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); color: #F0C896; margin-bottom: 18px; } .xa-case-pagehead__meta { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.6); font-family: var(--xa-en); letter-spacing: .4px; } .xa-case-pagehead__prod { color: rgba(255,255,255,.72); } @media (max-width: 720px) { .xa-case-pagehead { padding: 56px 0 48px; } .xa-case-pagehead__title { font-size: 28px; } } /* 封面大图（带底纹层） */ .xa-case-hero { background: var(--xa-bg); padding: 0; } .xa-case-hero__media { position: relative; overflow: hidden; border-radius: 0 0 2px 2px; } .xa-case-hero__media img { display: block; width: 100%; height: 460px; object-fit: cover; } .xa-case-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 62%, rgba(255,255,255,.9) 100%); } @media (max-width: 720px) { .xa-case-hero__media img { height: 260px; } } /* 摘要引语块 */ .xa-case-lead { background: var(--xa-bg); padding: 6px 0 0; } .xa-case-lead__inner { position: relative; margin: 0; padding: 36px 56px 34px 92px; background: var(--xa-white); border: 1px solid var(--xa-line); border-left: 4px solid var(--xa-bronze); border-radius: 8px; box-shadow: 0 10px 30px rgba(44,62,80,.05); } .xa-case-lead__q { position: absolute; left: 14px; top: 6px; font-family: var(--xa-serif); font-size: 62px; line-height: 1; color: var(--xa-bronze); opacity: .35; } .xa-case-lead__text { font-family: var(--xa-serif); font-size: 17px; line-height: 1.9; color: var(--xa-ink); margin: 0; } @media (max-width: 720px) { .xa-case-lead__inner { padding: 22px 18px 20px 46px; } } /* 窄版正文容器（⚠️ 已弃用，2026-09-10） 全站页面统一 1240 通栏；常见问题页曾是唯一使用者，现也已改通栏。 仅保留定义以防历史产物引用，勿在新模板里使用。 */ .xa-container--narrow { max-width: 860px; } /* 富文本正文（只作用于 .xa-prose--case 内部，不污染全局） 同事在后台富文本里用 h2 分节 / p / ul / img / table / blockquote， 此处自动美化成分区质感。 */ .xa-prose--case { font-family: var(--xa-sans); color: var(--xa-text); font-size: 15.5px; line-height: 1.95; } /* v20260906g 通栏左对齐排版：所有文字从左铺满到右，段首缩进 2 格，不做居中窄版 */ .xa-prose--case p { margin: 0 0 18px; text-indent: 2em; } /* 含图的段落取消段首缩进、解除宽限，让图通栏铺开或两列铺开 */ .xa-prose--case p:has(img) { max-width: none; margin: 0 0 28px; text-indent: 0; } .xa-prose--case p:has(img):has(.grid-2) { margin: 0 0 8px; } .xa-prose--case img { display: block; width: 100%; height: auto; max-width: 100%; margin: 6px 0 20px; border-radius: 8px; box-shadow: 0 8px 30px rgba(44,62,80,.10); } /* 两列网格：同事在富文本里用

……

即可 */ .xa-prose--case p.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; max-width: 100%; margin: 0 0 26px; padding: 0; } .xa-prose--case p.grid-2 img { width: 100%; max-width: 100%; margin: 0; } @media (max-width: 720px) { .xa-prose--case p.grid-2 { grid-template-columns: 1fr; gap: 14px; } } .xa-prose--case h2 { font-family: var(--xa-serif); font-size: 26px; color: var(--xa-ink); font-weight: 500; letter-spacing: -0.2px; margin: 56px 0 20px; padding: 0 0 14px 20px; border-bottom: 1px solid var(--xa-line); position: relative; } .xa-prose--case h2::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 14px; width: 4px; background: linear-gradient(180deg, var(--xa-bronze), rgba(199,127,61,.2)); border-radius: 2px; } .xa-prose--case h3 { font-family: var(--xa-serif); font-size: 20px; color: var(--xa-ink); font-weight: 500; margin: 32px 0 14px; } .xa-prose--case h4 { font-size: 16px; color: var(--xa-navy); font-weight: 600; margin: 24px 0 10px; } .xa-prose--case ul, .xa-prose--case ol { width: 100%; margin: 0 0 22px; padding-left: 4px; } .xa-prose--case li { margin-bottom: 8px; padding-left: 20px; position: relative; list-style: none; } .xa-prose--case li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; background: var(--xa-bronze); border-radius: 50%; } .xa-prose--case blockquote { width: 100%; max-width: 100%; margin: 28px 0; padding: 22px 26px; background: #F7F8FA; border-left: 3px solid var(--xa-navy); border-radius: 0 6px 6px 0; font-family: var(--xa-serif); color: var(--xa-ink); box-sizing: border-box; } .xa-prose--case blockquote p { margin: 0 0 6px; text-indent: 0; } .xa-prose--case table { width: 100%; border-collapse: collapse; margin: 22px 0 26px; font-size: 14px; } .xa-prose--case th { background: var(--xa-navy); color: #fff; font-weight: 500; text-align: left; padding: 12px 16px; } .xa-prose--case td { padding: 11px 16px; border-bottom: 1px solid var(--xa-line); color: var(--xa-text); } .xa-prose--case tr:nth-child(even) td { background: #F7F8FA; } .xa-prose--case a { color: var(--xa-bronze); text-decoration: underline; } .xa-prose--case a:hover { color: var(--xa-navy); } /* 空态（正文未填时） */ .xa-case-empty { text-align: center; padding: 70px 24px; border: 1px dashed var(--xa-line); border-radius: 12px; background: #F7F8FA; } .xa-case-empty__mark { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--xa-navy); color: var(--xa-bronze); font-family: var(--xa-serif); font-size: 30px; display: flex; align-items: center; justify-content: center; } .xa-case-empty p { font-family: var(--xa-serif); font-size: 17px; color: var(--xa-ink); margin: 0 0 10px; } .xa-case-empty__sub { font-family: var(--xa-sans) !important; font-size: 13.5px !important; color: var(--xa-mute) !important; } .xa-case-empty__sub a { color: var(--xa-bronze); text-decoration: underline; } /* CTA（深藏底） */ .xa-case-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .xa-case-cta__copy h2 { font-family: var(--xa-serif); font-size: 28px; font-weight: 500; color: var(--xa-white); margin: 0 0 10px; } .xa-case-cta__copy p { font-size: 15px; color: rgba(255,255,255,.7); margin: 0; } .xa-case-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; } @media (max-width: 720px) { .xa-case-cta { flex-direction: column; align-items: flex-start; } } /* 相关案例 3 连卡 */ .xa-case-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; } .xa-case-related__card { background: var(--xa-white); border: 1px solid var(--xa-line); border-radius: 10px; overflow: hidden; transition: transform .28s, box-shadow .28s; display: block; } .xa-case-related__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(44,62,80,.10); } .xa-case-related__media { height: 168px; overflow: hidden; background: var(--xa-navy); } .xa-case-related__media img { width: 100%; height: 100%; object-fit: cover; } .xa-case-related__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); font-family: var(--xa-serif); font-size: 34px; } .xa-case-related__body { padding: 18px 20px 20px; } .xa-case-related__tag { display: inline-block; font-size: 11.5px; color: var(--xa-bronze); letter-spacing: 1px; margin-bottom: 8px; } .xa-case-related__title { font-family: var(--xa-serif); font-size: 17px; color: var(--xa-ink); font-weight: 500; line-height: 1.4; margin: 0 0 8px; } .xa-case-related__desc { font-size: 13px; color: var(--xa-mute); line-height: 1.7; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xa-case-related__more { font-size: 13px; color: var(--xa-bronze); } @media (max-width: 900px) { .xa-case-related { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .xa-case-related { grid-template-columns: 1fr; } } /* ============================================================ 公司动态 + 行业新闻 区块（各页页脚上方通用横卡） 图片：150×150 正方形（后台新闻配图，未传图用占位） ============================================================ */ .xa-nblock { padding: 18px 0; background: var(--xa-bg); } .xa-nblock--alt { background: var(--xa-white); } /* 2026-09-10 整块瘦身：505 → ~380px（页头收紧 + 卡片间距/图片缩小 + 摘要 3→2 行） */ .xa-nblock .xa-sec__head { margin-bottom: 22px; } .xa-nblock .xa-sec__eyebrow { margin-bottom: 8px; } .xa-nblock .xa-sec__title { font-size: 32px; margin-bottom: 11px; } .xa-nblock .xa-sec__sub { font-size: 15px; line-height: 1.7; } .xa-nblock .xa-sec__rule { margin: 14px auto 0; } .xa-nblock__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .xa-ncard { display: flex; gap: 16px; align-items: flex-start; padding: 16px; background: var(--xa-white); border: 1px solid var(--xa-line); border-radius: 8px; text-decoration: none; transition: transform .28s, box-shadow .28s, border-color .28s; } .xa-nblock--alt .xa-ncard { background: #F7F8FA; } .xa-ncard:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(44,62,80,.09); border-color: var(--xa-bronze); } .xa-ncard__thumb { position: relative; flex: none; width: 150px; height: 150px; overflow: hidden; border-radius: 6px; background: #F2F4F6; } .xa-ncard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .xa-ncard__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--xa-serif); font-size: 46px; color: rgba(44,62,80,.18); } .xa-ncard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .xa-ncard__cat { align-self: flex-start; font-size: 11.5px; letter-spacing: 1px; color: var(--xa-bronze); background: rgba(199,127,61,.10); padding: 3px 10px; border-radius: 2px; margin-bottom: 8px; } .xa-ncard__cat--industry { color: var(--xa-navy); background: rgba(44,62,80,.07); } .xa-ncard__title { font-family: var(--xa-serif); font-size: 17px; font-weight: 500; color: var(--xa-ink); line-height: 1.45; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xa-ncard__desc { font-size: 13.5px; color: var(--xa-text); line-height: 1.7; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xa-ncard__date { font-family: var(--xa-en); font-size: 12px; color: var(--xa-mute); margin-top: auto; } @media (max-width: 900px) { .xa-nblock__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .xa-ncard { flex-direction: column; } .xa-ncard__thumb { width: 100%; height: auto; aspect-ratio: 1/1; } } /* ====== 下拉分隔线（产品与服务：产品组 | 技术服务）====== */ .xa-nav__menu .xa-sub li.xa-sub__sep { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--xa-line); } /* ====== 教学课件 · 录制中占位卡 ====== */ .xa-ccard--soon { cursor: default; } .xa-ccard--soon:hover { transform: none; box-shadow: none; border-color: var(--xa-line); } .xa-ccard--soon .xa-ccard__media { background: #F2F4F6; } .xa-ccard--soon .xa-ccard__ph { color: rgba(44,62,80,.20); } .xa-ccard__soonwin { position: absolute; top: 10px; left: 10px; font-size: 11.5px; letter-spacing: 1px; color: #fff; background: rgba(44,62,80,.60); padding: 3px 9px; border-radius: 2px; } .xa-ccard__soonn { align-self: flex-start; font-size: 11.5px; letter-spacing: .4px; color: var(--xa-silver); background: rgba(44,62,80,.06); padding: 4px 10px; border-radius: 2px; } /* ====== 教学课件页 · 操作指南图文区 ====== */ .xa-guide { background: var(--xa-white); border: 1px solid var(--xa-line); border-radius: 8px; padding: 34px 38px; } .xa-guide__head { margin-bottom: 20px; } .xa-guide__eyebrow { font-family: var(--xa-en); font-size: 11.5px; letter-spacing: 3px; color: var(--xa-bronze); text-transform: uppercase; margin-bottom: 10px; } .xa-guide__title { font-family: var(--xa-serif); font-size: 24px; font-weight: 500; color: var(--xa-ink); margin: 0; } .xa-guide__body { color: var(--xa-text); font-size: 14px; line-height: 1.85; } .xa-guide__body h3 { font-family: var(--xa-serif); font-size: 16px; font-weight: 500; color: var(--xa-ink); margin: 22px 0 8px; } .xa-guide__body h3:first-child { margin-top: 0; } .xa-guide__body p { margin: 0 0 10px; } .xa-guide__body b { color: var(--xa-ink); } @media (max-width: 720px) { .xa-guide { padding: 24px 20px; } } /* ====== 操作指南页 · 顶部标签 + 单面板（方案 C）====== */ /* 2026-09-10 选中态强化：原来只有「细铜色下划线 + 深蓝字」，隔着屏幕不易察觉。 现改为「实底深蓝 + 白字 + 铜色下边条」；未选中为浅灰字，hover 给淡米底做引导。*/ .xa-gtabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--xa-line); } .xa-gtab { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--xa-sans); font-size: 14.5px; color: var(--xa-silver); padding: 13px 20px 15px; position: relative; letter-spacing: .2px; white-space: nowrap; transition: color .22s, background .22s; } .xa-gtab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--xa-bronze); transform: scaleX(0); transform-origin: center; transition: transform .28s ease; } .xa-gtab:hover { color: var(--xa-navy); background: #F7F8FA; } /* 选中：整块深蓝实底，最醒目 */ .xa-gtab--on { background: var(--xa-navy); color: #fff; font-weight: 500; } .xa-gtab--on:hover { background: var(--xa-navy); color: #fff; } .xa-gtab--on::after { transform: scaleX(1); } .xa-gtab:focus-visible { outline: 2px solid var(--xa-bronze); outline-offset: 2px; } /* 标签上的计数（如「5 款」），不干扰文字但补充信息 */ .xa-gtab span { font-family: var(--xa-en); font-size: 11px; opacity: .55; margin-left: 6px; } .xa-gpanels { margin-top: 34px; } .xa-gpanel { display: none; background: var(--xa-white); border: 1px solid var(--xa-line); border-radius: 8px; padding: 38px 42px 30px; } .xa-gpanel--on { display: block; animation: xa-gfade .32s ease both; } @keyframes xa-gfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .xa-gpanel__head { padding-bottom: 22px; border-bottom: 1px solid var(--xa-line); margin-bottom: 26px; } .xa-gpanel__eyebrow { font-family: var(--xa-en); font-size: 11.5px; letter-spacing: 3px; color: var(--xa-bronze); text-transform: uppercase; margin-bottom: 10px; } .xa-gpanel__title { font-family: var(--xa-serif); font-size: 27px; font-weight: 500; color: var(--xa-ink); line-height: 1.35; margin: 0; } .xa-gpanel__sub { font-size: 14px; color: var(--xa-silver); margin: 10px 0 0; } .xa-gpanel__apply { font-size: 13px; color: var(--xa-text); margin: 14px 0 0; line-height: 1.7; } .xa-gpanel__apply span { display: inline-block; font-size: 11.5px; letter-spacing: 1px; color: var(--xa-bronze); border: 1px solid rgba(199,127,61,.35); border-radius: 2px; padding: 2px 8px; margin-right: 10px; } .xa-gpanel__body { color: var(--xa-text); font-size: 14.5px; line-height: 1.9; } .xa-gpanel__body h3 { font-family: var(--xa-serif); font-size: 17px; font-weight: 500; color: var(--xa-ink); margin: 26px 0 10px; padding-left: 14px; border-left: 3px solid var(--xa-bronze); line-height: 1.4; } .xa-gpanel__body h3:first-child { margin-top: 0; } .xa-gpanel__body p { margin: 0 0 6px; } .xa-gpanel__body b { color: var(--xa-ink); } .xa-gpanel__body p.safe { margin-top: 24px; background: #FDF6F1; border-left: 3px solid #C0552B; border-radius: 0 4px 4px 0; padding: 12px 16px; font-size: 13.5px; color: #8A4A2A; line-height: 1.8; } .xa-gpanel__body p.safe b { color: #A8471F; } .xa-gpanel__foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--xa-line); } .xa-gpanel__link { font-size: 13.5px; color: var(--xa-navy); text-decoration: none; border-bottom: 1px solid rgba(199,127,61,.5); padding-bottom: 2px; transition: color .2s, border-color .2s; } .xa-gpanel__link:hover { color: var(--xa-bronze); border-color: var(--xa-bronze); } @media (max-width: 900px) { .xa-gtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; } .xa-gtabs::-webkit-scrollbar { display: none; } .xa-gtab { padding: 11px 14px 13px; font-size: 14px; } .xa-gpanel { padding: 26px 20px 22px; } .xa-gpanel__title { font-size: 22px; } .xa-gpanels { margin-top: 24px; } } /* ========================================================================== 2026-09-10 新增：常见问题页 / 新闻资讯合并页 / 关于我们合并页 / 富文本正文 ========================================================================== */ /* ---------- 富文本正文（page / about 等单页）---------- */ .xa-block__body h2 { font-family: var(--xa-serif); font-size: 24px; font-weight: 500; color: var(--xa-ink); margin: 34px 0 14px; } .xa-block__body h2:first-child { margin-top: 0; } .xa-block__body h3 { font-family: var(--xa-serif); font-size: 19px; font-weight: 500; color: var(--xa-ink); margin: 26px 0 10px; } .xa-block__body ul, .xa-block__body ol { margin: 0 0 16px; padding-left: 4px; list-style: none; } .xa-block__body li { position: relative; padding-left: 20px; margin-bottom: 8px; } .xa-block__body li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; background: var(--xa-bronze); } .xa-block__body b, .xa-block__body strong { color: var(--xa-ink); font-weight: 600; } .xa-block__body a { color: var(--xa-bronze); border-bottom: 1px solid rgba(199,127,61,.45); } /* ---------- 常见问题页：折叠手风琴 ---------- */ .xa-faqcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .xa-faqcat { appearance: none; border: 1px solid var(--xa-line); background: var(--xa-white); color: var(--xa-text); font-size: 13px; padding: 8px 20px; border-radius: 999px; transition: all .2s; } .xa-faqcat:hover { border-color: var(--xa-bronze); color: var(--xa-navy); } .xa-faqcat--on { background: var(--xa-navy); border-color: var(--xa-navy); color: #fff; } .xa-faqlist { border-top: 1px solid var(--xa-line); } .xa-faq { border-bottom: 1px solid var(--xa-line); } .xa-faq__q { display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 24px 4px; cursor: pointer; list-style: none; font-family: var(--xa-serif); font-size: 17px; font-weight: 500; color: var(--xa-ink); line-height: 1.55; transition: color .2s; } .xa-faq__q::-webkit-details-marker { display: none; } .xa-faq__q:hover { color: var(--xa-bronze); } .xa-faq__no { flex: none; font-family: var(--xa-en); font-size: 12px; letter-spacing: 1px; color: var(--xa-bronze); border: 1px solid rgba(199,127,61,.35); border-radius: 2px; padding: 2px 7px; margin-top: 3px; } .xa-faq__txt { flex: 1; } .xa-faq__sign { flex: none; position: relative; width: 18px; height: 18px; margin-top: 5px; } .xa-faq__sign::before, .xa-faq__sign::after { content: ''; position: absolute; background: var(--xa-silver); transition: transform .28s, background .2s; } .xa-faq__sign::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); } .xa-faq__sign::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); } .xa-faq[open] .xa-faq__sign::after { transform: translateX(-50%) scaleY(0); } .xa-faq[open] .xa-faq__sign::before { background: var(--xa-bronze); } .xa-faq[open] .xa-faq__q { color: var(--xa-navy); } /* 答案左缩进 51px = 行内左 padding 4 + 编号块 31 + gap 16，正好与问题文字左沿对齐 */ .xa-faq__a { padding: 0 4px 24px 51px; font-size: 14.5px; line-height: 1.9; color: var(--xa-text); } .xa-faq__a p { margin: 0 0 8px; } .xa-faq__a p:last-child { margin-bottom: 0; } .xa-faq__a ul { list-style: none; margin: 0 0 8px; } .xa-faq__a li { position: relative; padding-left: 18px; margin-bottom: 6px; } .xa-faq__a li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; background: var(--xa-bronze); } /* 底部「还需要帮助」条 */ .xa-help { margin-top: 46px; background: var(--xa-white); border: 1px solid var(--xa-line); border-radius: 8px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .xa-help__title { font-family: var(--xa-serif); font-size: 20px; font-weight: 500; color: var(--xa-ink); margin: 0 0 6px; } .xa-help__sub { font-size: 13.5px; color: var(--xa-silver); margin: 0; } .xa-help__acts { display: flex; gap: 12px; flex-wrap: wrap; } /* ---------- 新闻资讯页：筛选 chips + 分区 + 编辑式列表行 ---------- */ .xa-chips { display: flex; flex-wrap: wrap; gap: 8px; } .xa-chip { appearance: none; border: 1px solid var(--xa-line); background: var(--xa-white); color: var(--xa-text); font-size: 13.5px; padding: 9px 22px; border-radius: 999px; transition: all .2s; } .xa-chip:hover { border-color: var(--xa-bronze); color: var(--xa-navy); } .xa-chip--on { background: var(--xa-navy); border-color: var(--xa-navy); color: #fff; } .xa-chip span { font-family: var(--xa-en); font-size: 11px; opacity: .62; margin-left: 6px; } .xa-nsec { padding: 34px 0 10px; } .xa-nsec + .xa-nsec { border-top: 1px solid var(--xa-line); } .xa-nsec--hide { display: none; } .xa-nsec__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; } .xa-nsec__title { font-family: var(--xa-serif); font-size: 26px; font-weight: 500; color: var(--xa-ink); margin: 0; } .xa-nsec__count { font-family: var(--xa-en); font-size: 12px; color: var(--xa-mute); letter-spacing: 1px; } .xa-nsec__sub { font-size: 13.5px; color: var(--xa-silver); margin: 0 0 18px; } .xa-nlist { border-top: 1px solid var(--xa-line); } .xa-nrow { display: flex; gap: 26px; padding: 24px 4px; border-bottom: 1px solid var(--xa-line); transition: background .2s; } .xa-nrow:hover { background: rgba(199,127,61,.045); } .xa-nrow__date { flex: none; width: 88px; } .xa-nrow__date b { display: block; font-family: var(--xa-serif); font-size: 30px; font-weight: 500; color: var(--xa-navy); line-height: 1.1; } .xa-nrow__date span { font-family: var(--xa-en); font-size: 11.5px; color: var(--xa-mute); letter-spacing: 1px; } .xa-nrow__body { flex: 1; min-width: 0; } .xa-nrow__chip { display: inline-block; font-size: 11.5px; letter-spacing: 1px; color: var(--xa-bronze); background: rgba(199,127,61,.10); padding: 2px 9px; border-radius: 2px; margin-bottom: 9px; } .xa-nrow__chip--industry { color: var(--xa-navy); background: rgba(44,62,80,.07); } .xa-nrow__chip--case { color: #0F6E56; background: rgba(15,110,86,.09); } .xa-nrow__title { font-family: var(--xa-serif); font-size: 18px; font-weight: 500; color: var(--xa-ink); line-height: 1.5; margin: 0 0 8px; transition: color .2s; } .xa-nrow:hover .xa-nrow__title { color: var(--xa-bronze); } .xa-nrow__desc { font-size: 13.5px; color: var(--xa-silver); line-height: 1.75; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xa-nrow__more { font-size: 12.5px; color: var(--xa-bronze); letter-spacing: .5px; } .xa-nrow__more::after { content: ' →'; } /* ---------- 关于我们页：联系方式卡片 ---------- */ .xa-cinfo { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--xa-line); border-bottom: 1px solid var(--xa-line); } .xa-cinfo__item { padding: 24px 22px; border-left: 1px solid var(--xa-line); } .xa-cinfo__item:first-child { border-left: none; } .xa-cinfo__k { font-family: var(--xa-en); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--xa-bronze); margin-bottom: 10px; } .xa-cinfo__v { font-family: var(--xa-serif); font-size: 17px; color: var(--xa-ink); line-height: 1.5; word-break: break-all; } .xa-cinfo__n { font-size: 12.5px; color: var(--xa-silver); margin-top: 6px; } .xa-cinfo__acts { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; } @media (max-width: 900px) { .xa-cinfo { grid-template-columns: repeat(2, 1fr); } .xa-cinfo__item { border-top: 1px solid var(--xa-line); } .xa-cinfo__item:nth-child(-n+2) { border-top: none; } .xa-cinfo__item:nth-child(odd) { border-left: none; } } @media (max-width: 720px) { .xa-faq__q { font-size: 16px; padding: 18px 2px; } .xa-faq__a { padding-left: 0; } .xa-help { padding: 24px 20px; } .xa-nrow { gap: 16px; padding: 20px 2px; } .xa-nrow__date { width: 56px; } .xa-nrow__date b { font-size: 22px; } .xa-nrow__desc { -webkit-line-clamp: 3; } } @media (max-width: 520px) { .xa-cinfo { grid-template-columns: 1fr; } .xa-cinfo__item { border-left: none; border-top: 1px solid var(--xa-line); } .xa-cinfo__item:first-child { border-top: none; } } /* ========================================================================== 2026-09-10 「服务与支持」聚合页（/support/）—— 左信息流 + 右快捷栏 版式=方案五。左侧把 操作指南/常见问题/资料下载/视频课程 混排成一条流； 右侧是卡片块（顺序可调，首块为转化入口，次块为资料下载卡）。 …哪些条目上、排第几，全部由后台「服务与支持编排」页决定， 前台只是把 support_block 表里的编排结果画出来。 ========================================================================== */ /* 页头下方一条“快速直达”：解决信息流“按类别找不直接”的问题 */ .xa-supcats { background: var(--xa-white); border-bottom: 1px solid var(--xa-line); } .xa-supcats__in { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 13px var(--xa-s-4); } .xa-supcats__lb { font-family: var(--xa-en); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--xa-bronze); } .xa-supcats__in a { font-size: 14px; color: var(--xa-ink); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .xa-supcats__in a:hover { color: var(--xa-navy); border-bottom-color: var(--xa-bronze); } .xa-sup { display: grid; grid-template-columns: 1.85fr 1fr; gap: 44px; align-items: start; } /* ---------- 左：信息流 ---------- */ .xa-sup__head { padding-bottom: 20px; border-bottom: 1px solid var(--xa-line); } .xa-sup__head h2 { font-family: var(--xa-serif); font-size: 26px; font-weight: 500; color: var(--xa-ink); margin: 0 0 8px; } .xa-sup__head p { font-size: 13.5px; color: var(--xa-silver); margin: 0; } .xa-sup__it { display: flex; gap: 22px; padding: 22px 4px; border-bottom: 1px solid var(--xa-line); transition: background .22s; } .xa-sup__it:hover { background: #FAFBFC; } .xa-sup__ix { flex: none; width: 54px; font-family: var(--xa-en); font-size: 11px; letter-spacing: 1px; color: var(--xa-bronze); padding-top: 4px; } .xa-sup__bd { flex: 1; min-width: 0; display: block; } .xa-sup__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .xa-sup__tag { display: inline-block; font-size: 11px; letter-spacing: .5px; padding: 2px 9px; border-radius: 2px; } .xa-sup__tag--guide { background: #EAF0F6; color: #2C5271; } .xa-sup__tag--faq { background: #F4F5F7; color: #8A6A45; } .xa-sup__tag--doc { background: #EDF4EC; color: #3F6B4A; } .xa-sup__tag--course { background: #F5EEF3; color: #7A4A67; } .xa-sup__note { font-size: 11px; color: var(--xa-bronze); border: 1px solid #E8D9C6; background: #F4F5F7; padding: 1px 7px; border-radius: 2px; } .xa-sup__t { display: block; font-family: var(--xa-serif); font-size: 17px; color: var(--xa-ink); line-height: 1.5; margin: 8px 0 5px; transition: color .2s; } .xa-sup__it:hover .xa-sup__t { color: var(--xa-navy); } .xa-sup__d { display: block; font-size: 13px; color: var(--xa-silver); line-height: 1.7; } /* ---------- 右：卡片块 ---------- */ .xa-sup__aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; } .xa-sup__cta { background: var(--xa-navy); color: var(--xa-white); padding: 26px 26px 24px; border-radius: 3px; } .xa-sup__cta h3 { font-family: var(--xa-serif); font-size: 19px; font-weight: 500; color: var(--xa-white); margin: 0 0 10px; } .xa-sup__cta p { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.75; margin: 0 0 18px; } .xa-sup__ctabtn { display: block; text-align: center; padding: 12px 18px; background: var(--xa-bronze); color: var(--xa-white); font-size: 13.5px; letter-spacing: 1px; border-radius: 2px; transition: background .25s; } .xa-sup__ctabtn:hover { background: #B26E30; color: var(--xa-white); } .xa-sup__card { background: var(--xa-white); border: 1px solid var(--xa-line); border-radius: 3px; padding: 24px 24px 20px; } .xa-sup__card h3 { font-family: var(--xa-serif); font-size: 18px; font-weight: 500; color: var(--xa-ink); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--xa-line); } .xa-sup__cardsub { font-size: 12.5px; color: var(--xa-silver); margin: -6px 0 12px; } .xa-sup__dl { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--xa-line); } .xa-sup__dl:last-of-type { border-bottom: 0; } .xa-sup__ico { flex: none; font-family: var(--xa-en); font-size: 9.5px; letter-spacing: .5px; color: var(--xa-bronze); border: 1px solid #E8D9C6; background: #F4F5F7; padding: 3px 6px; border-radius: 2px; } .xa-sup__dt { flex: 1; min-width: 0; font-size: 13px; color: var(--xa-ink); line-height: 1.6; transition: color .2s; } .xa-sup__dl:hover .xa-sup__dt { color: var(--xa-navy); } .xa-sup__sz { flex: none; font-family: var(--xa-en); font-size: 11px; color: var(--xa-mute); } .xa-sup__more { display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--xa-bronze); } .xa-sup__more:hover { color: #B26E30; } .xa-sup__lk { display: block; font-size: 13px; color: var(--xa-ink); padding: 9px 0; border-bottom: 1px solid var(--xa-line); transition: color .2s; } .xa-sup__lk:last-child { border-bottom: 0; } .xa-sup__lk:hover { color: var(--xa-navy); } .xa-sup__none { font-size: 13px; color: var(--xa-mute); margin: 0; } @media (max-width: 900px) { .xa-sup { grid-template-columns: 1fr; gap: 30px; } .xa-sup__aside { position: static; } .xa-supcats__in { gap: 16px; } } @media (max-width: 720px) { .xa-sup__it { gap: 14px; padding: 18px 2px; } .xa-sup__ix { width: 42px; font-size: 10px; } .xa-sup__t { font-size: 15.5px; } .xa-supcats__in { gap: 12px; padding: 12px var(--xa-s-4); } .xa-supcats__in a { font-size: 13px; } } /* ====================================================================== 移动端导航（≤900px）：汉堡按钮 + 右侧抽屉 ---------------------------------------------------------------------- 2026-09-10 新增。此前 ≤900px 时 .xa-nav__menu 直接 display:none， 且没有任何替代入口 —— 手机上 6 个顶级栏目全部消失、整站不可达（P0）。 现方案：纯 CSS checkbox（#xa-navtoggle）驱动抽屉，不依赖 JS； 二级菜单用
折叠，同样零 JS。 桌面端（>900px）这些元素一律 display:none，不影响原有导航。 ====================================================================== */ .xa-navtoggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .xa-burger, .xa-drawer, .xa-scrim { display: none; } /* 顺带修（2026-09-10）：.xa-hero__inner 自己写了 `padding: 52px 0`（窄屏 60px 0 / 42px 0）， 把 .xa-container 的横向 24px 内边距覆盖成 0 —— 视口 ≤1240px 时容器不再有居中留白， 英雄区内容就贴了左右边，窄屏下大标题首字被 .xa-hero{overflow:hidden} 裁掉。 只在 ≤1240px 补回横向内边距（>1240px 桌面端维持原有宽度，避免标题多折一行）。 */ @media (max-width: 1240px) { .xa-container.xa-hero__inner { padding-left: var(--xa-s-4); padding-right: var(--xa-s-4); } } @media (max-width: 900px) { .xa-nav__inner { height: 60px; } /* 「免费测试」按钮收进抽屉，顶栏只留 logo + 汉堡 */ .xa-nav__cta .xa-nav__free { display: none; } /* --- 汉堡按钮 --- */ .xa-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; margin-right: -8px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .18s; } .xa-burger span { display: block; width: 18px; height: 1.5px; background: var(--xa-ink); border-radius: 1px; transition: transform .3s cubic-bezier(.2,.8,.25,1), opacity .2s; } .xa-burger span + span { margin-top: 4px; } /* 抽屉打开时汉堡淡出：抽屉自带右上角 × 关闭按钮，位置与汉堡基本重合， 两个叉叠在一起会有重影。 */ #xa-navtoggle:checked ~ .xa-nav .xa-burger { opacity: 0; } /* 键盘可达：checkbox 原生可聚焦（Tab 到它、空格切换），聚焦时给汉堡画轮廓 */ .xa-navtoggle:focus-visible ~ .xa-nav .xa-burger, .xa-navtoggle:focus-visible ~ .xa-drawer .xa-drawer__close { outline: 2px solid var(--xa-bronze); outline-offset: 3px; } /* --- 抽屉本体 --- */ .xa-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 342px); background: #fff; z-index: 90; box-shadow: -14px 0 44px rgba(20,29,38,.18); transform: translateX(102%); visibility: hidden; transition: transform .32s cubic-bezier(.2,.8,.25,1), visibility 0s .32s; } #xa-navtoggle:checked ~ .xa-drawer { transform: translateX(0); visibility: visible; transition: transform .32s cubic-bezier(.2,.8,.25,1), visibility 0s; } .xa-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--xa-line); flex-shrink: 0; } .xa-drawer__close { font-size: 26px; line-height: 1; color: var(--xa-silver); padding: 4px 10px; margin-right: -10px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .xa-drawer__nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; } .xa-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; font-size: 15px; color: var(--xa-ink); text-decoration: none; border-bottom: 1px solid var(--xa-line); cursor: pointer; list-style: none; } .xa-drawer__top::-webkit-details-marker { display: none; } .xa-drawer__caret { width: 7px; height: 7px; border-right: 1.5px solid var(--xa-mute); border-bottom: 1.5px solid var(--xa-mute); transform: rotate(45deg) translate(-1px, -1px); transition: transform .25s; flex-shrink: 0; } details[open] > .xa-drawer__top .xa-drawer__caret { transform: rotate(225deg) translate(-3px, 1px); } .xa-drawer__sub { background: var(--xa-bg); border-bottom: 1px solid var(--xa-line); padding: 6px 0 10px; } .xa-drawer__sub a { display: block; padding: 11px 18px 11px 30px; font-size: 14px; color: var(--xa-text); text-decoration: none; } .xa-drawer__sub a:active { background: rgba(199,127,61,.09); } .xa-drawer__all { color: var(--xa-bronze) !important; font-size: 13px !important; padding-bottom: 8px !important; } .xa-drawer__foot { padding: 16px 18px 24px; border-top: 1px solid var(--xa-line); flex-shrink: 0; } .xa-drawer__foot .xa-btn { display: flex; width: 100%; justify-content: center; } .xa-drawer__tel { margin-top: 14px; font-size: 12.5px; color: var(--xa-silver); line-height: 1.9; } /* --- 遮罩：点空白处收起 --- */ .xa-scrim { display: block; position: fixed; inset: 0; background: rgba(18,26,34,.46); z-index: 80; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } #xa-navtoggle:checked ~ .xa-scrim { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; } /* 抽屉打开时锁定背景滚动 */ body:has(#xa-navtoggle:checked) { overflow: hidden; } /* --- 顺带修：英雄区大标题在窄屏溢出被裁（.xa-hero 有 overflow:hidden， 所以 scrollWidth 量不出来，只有截图可见） --- */ .xa-hero__title { overflow-wrap: break-word; word-break: break-word; } } /* 顺带修（2026-09-10）：富文本正文里的表格在窄屏会撑破页面 —— 全站 42 页 × 4 档宽度扫描，只有 /cases/pct-xingneng/ 命中（5 列表格，360px 溢出 67px、430px 溢出 1px）。 窄屏改为「表格块级 + 横向滚动 + 单元格不折行」：列宽保持正常，超出部分横向滑动查看， 比让浏览器把每列压成两三个字要可读。 */ @media (max-width: 720px) { .xa-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .xa-prose table th, .xa-prose table td { white-space: nowrap; } } @media (max-width: 620px) { .xa-hero__inner { padding: 42px 0 46px; gap: 32px; } .xa-hero__title { font-size: 27px; line-height: 1.32; letter-spacing: 0; margin-bottom: 16px; } .xa-hero__eyebrow { font-size: 11px; letter-spacing: 2px; padding-bottom: 14px; } .xa-hero__sub { font-size: 15px; line-height: 1.75; margin-bottom: 26px; } .xa-hero__actions { flex-wrap: wrap; gap: 12px; } .xa-hero__visual img { height: 220px; } .xa-hero__badge { bottom: 14px; left: 14px; padding: 12px 16px; } .xa-hero__badge b { font-size: 20px; } } @media (max-width: 380px) { .xa-hero__title { font-size: 24px; } .xa-drawer { width: 92vw; } } /* ====== 新闻详情页 · 方案 1 经典深蓝头（09-11 定稿） ====== */ /* 页头复用 .xa-pagehead 深蓝底，与「新闻资讯 / 应用案例 / 关于我们」等栏目页视觉一致 */ .xa-nd-hero { padding: 58px 0 50px; } /* 长标题两行时均衡断行（40px 下 ≤29 字仍是一行，不会被误拆） */ .xa-nd-hero h1 { text-wrap: balance; font-size: 40px; line-height: 1.36; margin-bottom: 0; } .xa-nd-meta { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.72); } .xa-nd-chip { border: 1px solid rgba(199,127,61,.75); color: var(--xa-bronze); font-size: 12px; padding: 3px 11px; border-radius: 2px; letter-spacing: .5px; } .xa-nd-meta i { width: 1px; height: 12px; background: rgba(255,255,255,.3); } .xa-nd-body { background: #fff; padding: 52px 0 72px; } .xa-nd-inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .xa-nd-content { font-size: 17px; line-height: 1.98; color: var(--xa-text); } /* 正文段落：首行缩进两个汉字 */ .xa-nd-content > p { text-indent: 2em; margin-bottom: 26px; } /* 整段只有一张图时不缩进、不叠加段落下边距，保证图片水平居中且间距均匀 */ .xa-nd-content > p:has(> img:only-child) { text-indent: 0; margin-bottom: 0; } /* 正文插图默认居中（后台即使没点"居中对齐"也居中显示） */ .xa-nd-content img { display: block; max-width: 100%; height: auto; margin: 34px auto; border-radius: 2px; } .xa-nd-content figure { margin: 34px 0; } .xa-nd-content figcaption { text-align: center; font-size: 12.5px; color: var(--xa-mute); margin-top: 12px; font-style: italic; } .xa-nd-content h2 { font-family: var(--xa-serif); font-size: 24px; font-weight: 500; color: var(--xa-ink); margin: 36px 0 14px; } .xa-nd-content h3 { font-family: var(--xa-serif); font-size: 19px; font-weight: 500; color: var(--xa-ink); margin: 28px 0 12px; } .xa-nd-content ul, .xa-nd-content ol { margin: 0 0 24px; padding-left: 22px; } .xa-nd-content li { margin-bottom: 10px; } .xa-nd-content a { color: var(--xa-bronze); border-bottom: 1px solid rgba(199,127,61,.4); } /* 上一条 / 下一条：细边框卡 */ .xa-nd-nav { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--xa-line); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .xa-nd-nav a { display: block; border: 1px solid var(--xa-line); border-radius: 2px; padding: 16px 18px; transition: .25s; } .xa-nd-nav a:hover { border-color: var(--xa-bronze); background: #FDFAF6; } .xa-nd-nav span { display: block; font-family: var(--xa-en); font-size: 11px; letter-spacing: 2px; color: var(--xa-bronze); text-transform: uppercase; margin-bottom: 7px; } .xa-nd-nav h5 { font-size: 14.5px; font-weight: 500; color: var(--xa-ink); line-height: 1.55; } .xa-nd-nav .is-next { text-align: right; } @media (max-width: 760px) { .xa-nd-hero { padding: 42px 0 34px; } .xa-nd-hero h1 { font-size: 27px; letter-spacing: -.3px; } .xa-nd-body { padding: 34px 0 48px; } .xa-nd-content { font-size: 16px; } .xa-nd-nav { grid-template-columns: 1fr; } .xa-nd-nav .is-next { text-align: left; } } /* ====== 免费测试页 · 左侧时间轴（09-11 定稿，后台步骤数可变） ====== */ /* 页头复用 .xa-pagehead 深蓝底，与「新闻资讯 / 应用案例 / 关于我们」等栏目页视觉一致 */ .xa-sec--ft { padding: 56px 0 88px; } .xa-ft-lead { font-size: 17.5px; line-height: 1.95; color: var(--xa-ink); max-width: 820px; margin: 0 0 46px; } .xa-ft-lead a { color: var(--xa-bronze); border-bottom: 1px solid rgba(199,127,61,.45); } .xa-ft-steps { position: relative; } .xa-ft-step { display: grid; grid-template-columns: 54px 1fr; gap: 26px; padding-bottom: 38px; position: relative; } .xa-ft-step:last-child { padding-bottom: 0; } /* 竖向连线：从圆点下方一直拉到下一步圆点上方 */ .xa-ft-step::before { content: ''; position: absolute; left: 26.5px; top: 56px; bottom: -2px; width: 1px; background: var(--xa-line); } .xa-ft-step:last-child::before { display: none; } .xa-ft-no { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--xa-bronze); color: var(--xa-bronze); display: flex; align-items: center; justify-content: center; font-family: var(--xa-serif); font-size: 19px; background: #fff; position: relative; z-index: 1; } .xa-ft-body h4 { font-size: 18px; font-weight: 500; color: var(--xa-ink); margin: 8px 0 8px; } .xa-ft-body p { font-size: 15px; line-height: 1.9; color: var(--xa-text); margin: 0; max-width: 720px; } .xa-ft-contact { margin-top: 52px; } @media (max-width: 760px) { .xa-sec--ft { padding: 40px 0 56px; } .xa-ft-lead { font-size: 16px; margin-bottom: 32px; } .xa-ft-step { grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: 28px; } .xa-ft-no { width: 44px; height: 44px; font-size: 16px; } .xa-ft-step::before { left: 21.5px; top: 46px; } .xa-ft-body h4 { font-size: 16.5px; margin-top: 5px; } .xa-ft-contact { margin-top: 34px; } }