/* ★ 全站正文/标题统一用思源黑体（Source Han Sans SC，SIL OFL 开源可商用）。 按本站实际用到的字符裁过子集，两个字重共约 480KB。 裁字脚本：.fontwork/tools/make-siyuan.py —— 内容新增了字就重跑一遍。 HeroEN Archivo Expanded Black（OFL）—— 宽体拉丁字，负责英文/数字/符号 HeroCN 未来荧黑 Glow Sans SC Wide Bold（OFL）—— 宽体中文标题字 KaiWeb 霞鹜文楷 LXGW WenKai（OFL）—— 楷体，负责首屏描述文字 */ @font-face{font-family:"HeroEN";src:url("../fonts/font-hero-en.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"HeroCN";src:url("../fonts/font-hero-cn.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"KaiWeb";src:url("../fonts/font-kai.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"SiYuan";src:url("../fonts/font-siyuan-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"SiYuan";src:url("../fonts/font-siyuan-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} :root{ /* ★ 提亮+提清（2026-09-29）： --bg 底色提亮一档（#f5f7fb → #fafbfd），页面更透 --muted 次要文字加深（#646b82 → #5b6280），小字更清楚 --line 分隔线加重一点点（.11 → .14），卡片边界更利落 */ --bg:#fafbfd; --surface:#ffffff; --ink:#12172b; --muted:#5b6280; --line:rgba(18,23,43,.14); --line-strong:rgba(18,23,43,.28); --accent:#3b6fe0; /* ★ 产品详情页统一字号阶梯 —— 全页只用这 6 档，不再随手写具体 px。 层级清晰、各区域一致，是"精致感"的来源。 */ --fs-display:clamp(28px,3.4vw,40px); /* 产品名 */ --fs-h2:21px; /* 区域小标题 */ --fs-h3:19px; /* 价值点标题 */ --fs-body:16px; /* 所有正文 */ --fs-sm:14px; /* 胶囊、标签、辅助文字 */ --fs-meta:12.5px; /* 序号、分组胶囊 */ --nav-h:72px; /* 顶部导航固定高度，首屏高度按它扣减 */ --c1:#c5d5f0; --c2:#bfe3e0; --c3:#d3d0ee; --c4:#c9dff0; --c5:#d5dcef; --c6:#c2e0e8; } *{box-sizing:border-box;margin:0;padding:0} /* 锚点跳转用瞬时到位：之前开了 smooth，页面一变长就"慢慢滚过去"，点完要等很久 */ html{-webkit-font-smoothing:antialiased} body{font-family:'SiYuan',ui-sans-serif,system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .container{max-width:1240px;margin:0 auto;padding:0 32px} /* nav */ /* ★ 导航条本身保持系统字体；子菜单（下拉面板）改成思源黑体，跟正文一致 */ .nav,.nav *{font-family:ui-sans-serif,system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif} .dropdown,.dropdown *{font-family:'SiYuan',ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif} .nav{display:flex;justify-content:space-between;align-items:center;height:var(--nav-h);padding:0 32px;font-size:14px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} /* ★ 菜单白底铺满整屏宽（菜单内容仍居中在 1240px） 原因：首屏轮播图是整屏通栏，滚动时菜单吸顶，图片会从菜单左右两侧露出来， 看着像"图片越过了菜单框"。这里用一层伪元素把白底横向铺满，图片就只到菜单下边线为止。 */ .nav::before{content:"";position:absolute;top:0;bottom:-1px;left:50%;width:100vw; transform:translateX(-50%);background:var(--surface);border-bottom:1px solid var(--line);z-index:-1} .nav-brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:17px;letter-spacing:-.01em} .nav-brand img{height:38px;width:auto} .nav-links{display:flex;gap:30px} .nav-links a{color:var(--muted);transition:color .2s} .nav-links a:hover{color:var(--accent)} /* 汉堡按钮：平时隐藏，窄屏才出现 */ .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer} .nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s,opacity .22s} .nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.open .nav-toggle span:nth-child(2){opacity:0} .nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* 产品下拉子菜单 */ .nav-item{position:relative} .nav-item>a{cursor:pointer} /* 首页/新闻资讯/应用案例等直接挂在 .nav-links 下的链接也要小手 */ .nav-links a{cursor:pointer} .nav-item .caret{display:inline-block;margin-left:5px;font-size:10px;transition:transform .2s;color:var(--muted)} .nav-item.open .caret{transform:rotate(180deg)} .nav-item.open>a{color:var(--accent)} .dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);min-width:180px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(18,23,43,.12);padding:8px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s} .nav-item.open .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .dropdown a{display:block;padding:9px 14px;border-radius:7px;font-size:14px;color:var(--muted);white-space:nowrap} .dropdown a:hover{background:rgba(59,111,224,.07);color:var(--accent)} .case-card{scroll-margin-top:90px} /* ---------- hero / carousel ---------- */ /* 结构：上方文字（宽度受约束居中）→ 图片通栏铺满整屏宽 → 底部圆点 + 关注我们 桌面端整屏自适应：首屏高度 = 视口高 − 导航高，图片自动吃掉剩余高度， 所以任何分辨率下文字 / 图片 / 二维码 / 电话都完整可见，无需滚动。 */ .hero{padding:0 0 clamp(14px,2.6vh,28px)} .hero-track{position:relative} .hero-slide{position:absolute;top:0;left:0;width:100%;transition:opacity .3s ease,transform .3s ease;opacity:0;transform:translateY(10px);pointer-events:none} .hero-slide.active{position:relative;opacity:1;transform:translateY(0);pointer-events:auto} .hero-slide-inner{display:flex;flex-direction:column;gap:clamp(14px,2.4vh,30px)} .hero-content{width:100%;max-width:1256px;margin:0 auto;padding:0 32px;flex:none} /* 标题：恢复原设计 —— 拉丁 Archivo Expanded Black、中文未来荧黑宽体（字重交给字体本身） */ .hero h1{font-family:"HeroEN","HeroCN",ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif;font-weight:400;font-synthesis:none;font-size:clamp(28px,min(3.8vw,5vh),48px);line-height:1.22;letter-spacing:.005em;margin-bottom:clamp(8px,1.4vh,16px);max-width:1000px} .hero h1 em{font-style:normal;color:var(--accent)} /* 行动按钮：紧跟主题文字之后内联排布，不单独占一行 */ .hero-cta{display:inline-block;vertical-align:middle;margin-left:.45em;position:relative;top:-.06em; font-family:'SiYuan',ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif;font-weight:600;font-synthesis:weight; font-size:clamp(12px,1.5vh,14px);line-height:1.15;letter-spacing:.02em;white-space:nowrap; padding:clamp(7px,1.3vh,10px) clamp(16px,1.4vw,24px);border-radius:999px; background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px rgba(59,111,224,.55); transition:background .2s,box-shadow .2s,transform .2s} .hero-cta:hover{background:#2f5cc4;box-shadow:0 10px 24px -8px rgba(59,111,224,.62);transform:translateY(-1px)} /* 描述：恢复原设计 —— 楷体（霞鹜文楷，缺失时用系统楷体兜底） */ .hero .lead{font-family:"KaiWeb",KaiTi,'Kaiti SC',STKaiti,楷体,serif;font-size:clamp(13px,min(1.05vw,1.65vh),15px);color:#666e85;line-height:1.85;margin-bottom:0;max-width:660px} /* 图片：通栏满屏宽、无边框无底色；占满文字与底部之间的剩余空间 */ .hero-media{width:100%;display:flex;align-items:center;justify-content:center;position:relative} .hero-media img{width:100%;height:100%;object-fit:contain;object-position:top center;display:block} /* 图片在画框里缓缓来回平移（当前这张才动）*/ .hero-slide.active .hero-media img{animation:heroPan 16s ease-in-out infinite alternate} @keyframes heroPan{ from{transform:scale(1.01) translateX(-0.8%)} to {transform:scale(1.01) translateX(0.8%)} } /* 首屏图一律完整显示（contain）——保证任何屏幕都能看到全图，不再裁切 */ .hero-media.cover img{object-fit:contain} .hero-media-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(18,23,43,.32);font-size:13px;letter-spacing:.05em} .hero-media-placeholder b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:rgba(18,23,43,.42)} /* 左右翻页箭头：压在图片两侧垂直居中 */ .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:clamp(38px,4.4vh,46px);height:clamp(38px,4.4vh,46px);border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 6px 20px rgba(18,23,43,.14);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--ink);cursor:pointer;padding:0;transition:border-color .2s,color .2s,background .2s;user-select:none;z-index:5} .hero-arrow:hover{border-color:var(--accent);color:var(--accent);background:#fff} .hero-arrow.prev{left:clamp(12px,2.4vw,32px)} .hero-arrow.next{right:clamp(12px,2.4vw,32px)} /* 底部一行：左=进度圆点，右=关注我们 */ /* 首屏可左右拖动：抓手光标 */ /* 禁用图片原生拖拽，否则会抢走拖动手势 */ .hero img{-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none} .hero-track{cursor:grab} .hero-track:active{cursor:grabbing} .hero-foot{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;width:100%;max-width:1256px;margin:clamp(12px,1.8vh,26px) auto 0;padding:0 32px;flex:none} .hero-dots{display:flex;gap:9px;align-items:center} .hero-dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--line-strong);cursor:pointer;padding:0;transition:background .25s,width .25s,border-radius .25s} .hero-dots button.active{background:var(--accent);width:22px;border-radius:5px} /* 关注我们：公众号 / 视频号 / 咨询电话，任何宽度下都完整显示不压缩 */ .hero-social{display:flex;gap:10px;align-items:stretch} .hero-social-card{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;flex:0 0 auto;transition:border-color .2s,box-shadow .2s,transform .2s} .hero-social-card:hover{border-color:var(--line-strong);box-shadow:0 8px 20px -6px rgba(18,23,43,.12);transform:translateY(-2px)} .hero-social-card.is-clickable{cursor:pointer} .hero-social-card.is-clickable:hover{border-color:var(--accent)} .hero-social-qr{width:48px;height:48px;border-radius:9px;background:#fff;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)} .hero-social-qr img{width:100%;height:100%;object-fit:contain;display:block} .hero-social-qr .qr-placeholder{font-size:9px;color:#aab1c2;text-align:center;line-height:1.15;padding:2px;letter-spacing:.02em} .hero-social-info b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.01em;white-space:nowrap} .hero-social-info span{font-size:10px;color:var(--muted);letter-spacing:.03em;white-space:nowrap} .hero-social-icon{width:48px;height:48px;border-radius:11px;background:linear-gradient(135deg,var(--accent),#5b87e8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0} .hero-social-card.phone{cursor:pointer} .hero-social-card.phone .hero-social-info b{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:-.005em} /* 其他平台账号：图标 + 名称的小药丸，前面用细竖线和二维码卡分开。 图标是深色底上的白色图形（取自现有官网），所以给个深色小方块托底才能看清 */ .hero-social-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-left:14px;margin-left:4px;border-left:1px solid var(--line)} .hero-social-link{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px 0 7px;border-radius:999px; font-size:12.5px;font-weight:500;font-family:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line); white-space:nowrap;cursor:pointer;text-decoration:none; transition:border-color .2s,color .2s,transform .2s} .hero-social-link:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .hs-icon{width:28px;height:28px;border-radius:9px;background:#12172b;display:flex;align-items:center;justify-content:center; flex:none;transition:background .2s} .hs-icon img{width:16px;height:16px;display:block} .hero-social-link:hover .hs-icon{background:var(--accent)} /* 宽屏：整屏内布局，图片吃掉剩余高度，永远不溢出首屏 */ @media(min-width:1101px){ /* ★ 首屏高度改为「由图片比例决定」： 原来写死 height:calc(100vh - nav)、图片按 contain 居中 → 宽屏上左右各留一大片空白（显小）， 改窄屏 cover 又会被裁（显大）。现在图片统一成 16:9，首屏框也按 16:9 由宽度算高度， 再用 max-height 保证不超过一屏 —— 任何分辨率下都是"完整显示 + 尽量大"。 */ .hero{height:auto;min-height:0;display:block} .hero-track{flex:none} .hero-slide.active{position:relative;inset:auto} .hero-slide-inner{height:auto} /* max-height 取两者较大值：既不超过一屏（100vh 那条）， 也保证不低于 44vw —— 避免矮屏幕上图片被压得太小（至少占约 78% 宽度）*/ .hero-media{aspect-ratio:16/9;max-height:max(calc(100vh - var(--nav-h) - 76px), 44vw)} } /* 小屏 / 平板：回到自然流式高度，各元素按自身高度排列，再长也能滚动看全 */ @media(max-width:1100px){ .hero{padding:0 0 36px} .hero-slide.active{position:relative;inset:auto} .hero-slide-inner{height:auto} .hero-content,.hero-foot{padding:0 22px} .hero-media{aspect-ratio:16/9;max-height:calc(100vh - var(--nav-h) - 96px)} .hero-foot{justify-content:flex-start;gap:16px;margin-top:22px} .hero-social{order:1;flex-wrap:wrap;width:100%} .hero-dots{order:2} .hero-arrow{width:38px;height:38px;font-size:17px} .hero-arrow.prev{left:12px} .hero-arrow.next{right:12px} } @media(max-width:520px){ .hero-social{display:grid;grid-template-columns:1fr;gap:8px} .hero-social-links{padding-left:0;margin-left:0;border-left:0;padding-top:10px;margin-top:2px;border-top:1px solid var(--line)} .cta-social .hero-social-links{border-top-color:rgba(255,255,255,.16)} .cta-social{margin-top:44px;padding-top:30px} .hero-social-card{width:100%} } .btn{display:inline-block;padding:11px 22px;border-radius:8px;font-size:14px;font-weight:500;transition:all .2s} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:#2f5cc4;transform:translateY(-1px)} .btn-ghost{border:1px solid var(--line-strong);color:var(--ink)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} /* sections */ .section{padding:88px 32px;max-width:1240px;margin:0 auto} /* 显式声明：标了 hidden 的区块一定不显示（浏览器默认样式也是这个，但写死更稳） */ .section[hidden]{display:none} .section-head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:22px;margin-bottom:44px} /* 导语和标题排同一行：标题 + 导语挨着，右指标推到最右 */ .section-head.head-inline{gap:0} .section-head.head-inline .page-lead{margin:0 0 0 16px;max-width:none} .section-head.head-inline .section-meta{margin-left:auto} .section-title{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.13em} .section-meta{font-size:12px;color:var(--muted)} /* cases */ .case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px} .case-card{cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .2s,transform .2s} .case-card:hover{border-color:var(--line-strong);transform:translateY(-4px)} .case-cover{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:700;color:rgba(18,23,43,.55);letter-spacing:-.02em} /* 有海报图的封面：图铺满，底部加一条细线把图和正文分开（修饰边框）*/ .case-cover.has-img{align-items:stretch;justify-content:stretch;font-size:0;border-bottom:1px solid var(--line);overflow:hidden} .case-cover.has-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} .case-card:hover .case-cover.has-img img{transform:scale(1.03)} .c1{background:var(--c1)}.c2{background:var(--c2)}.c3{background:var(--c3)}.c4{background:var(--c4)}.c5{background:var(--c5)}.c6{background:var(--c6)} .case-link{display:block;color:inherit} .case-body{padding:20px 22px} .case-title{font-weight:600;font-size:17px;margin-bottom:6px} /* 卡片描述最多 3 行：描述长短不一时卡片高度不会参差，超出显示省略号 */ .case-desc{color:var(--muted);font-size:14px;line-height:1.6; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .case-tags{margin-top:10px;font-size:12.5px;color:var(--muted);letter-spacing:.02em} .tag{font-size:12px;color:var(--accent);background:rgba(59,111,224,.09);padding:3px 10px;border-radius:99px} /* 产品分组：每组一个小标题 + 该组卡片 */ .product-group{margin-bottom:56px} .product-group:last-child{margin-bottom:0} /* 关键：产品区用 auto-fill 而非 auto-fit。 auto-fit 会把空轨道折叠，导致"只有 1-2 个产品的分组"卡片被拉成整行超宽， 和 8 个产品的分组卡片大小不一致。auto-fill 保留空轨道，各组卡片尺寸统一。 */ .product-group .case-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .product-group-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:26px;border-bottom:1px solid var(--line)} .product-group-name{font-size:19px;font-weight:800;letter-spacing:-.012em;display:flex;align-items:center;gap:10px; -webkit-text-stroke:.32px currentColor} .product-group-name::before{content:"";width:4px;height:17px;border-radius:2px;background:var(--accent);flex:none} .product-group-desc{font-size:13px;color:var(--muted)} .product-group-count{margin-left:auto;font-size:12px;color:#C23635;background:rgba(194,54,53,.08);padding:2px 10px;border-radius:99px;white-space:nowrap} /* ============ 产品页：分类筛选条（参考图里的「产品分类」那一行） ============ */ .product-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 40px} .pf-pill{ font-family:inherit;font-size:14px;line-height:1;color:var(--muted); background:transparent;border:0;border-radius:6px;padding:9px 14px; cursor:pointer;transition:background .18s,color .18s; ;font-weight:700;-webkit-text-stroke:.3px currentColor} .pf-pill:hover{color:var(--accent);background:rgba(59,111,224,.07)} .pf-pill.is-on{background:var(--accent);color:#fff} .pf-pill.is-on:hover{background:var(--accent);color:#fff} /* ============ 产品页：产品卡改成「图标 + 名称 + 描述」大卡 ============ 只作用于产品卡（.product-card），活动页的 .case-card 不受影响。 参考图里卡片没有大色块封面，图标和标题同一行。 */ .product-group .case-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px} .product-card{display:flex;flex-direction:column;padding:24px 26px 22px;border-radius:10px} .product-card:hover{transform:none;border-color:var(--line-strong);box-shadow:0 10px 26px -14px rgba(18,23,43,.22)} .product-card .pc-head{display:flex;align-items:center;gap:14px;margin-bottom:14px} .product-card .pc-logo{ width:52px;height:52px;flex:none;border-radius:9px; display:flex;align-items:center;justify-content:center; font-size:22px;font-weight:700;color:rgba(18,23,43,.6); overflow:hidden; } /* 有真图标时：去掉色块底，图标撑满 */ .product-card .pc-logo.has-icon{background:none} .product-card .pc-logo img{width:100%;height:100%;object-fit:contain;display:block} .product-card .pc-name{ font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.35; } .product-card:hover .pc-name{color:var(--accent)} .product-card .case-desc{font-size:13.5px;line-height:1.75;-webkit-line-clamp:3} .product-card .case-tags{margin-top:auto;padding-top:14px} /* 产品下拉：16 项分 5 组，双列排布更省高度 */ /* 产品下拉 —— 按参考图（广联达那种）重做：顶部通栏搜索框 + 一行 5 列 + 右下角「更多 >> ★ 中文有个 12px 地板（Chrome/Edge 会把 <12px 的中文按 12px 渲染）， 所以标题和条目要有层级，只能把标题抬到 12px 以上。 ★ 位定：把 .nav-item 改成 static，让下拉相对整条导航定位，才放得下这个宽面板 */ #navProductsWrap{position:static} /* ★ 字号/间距按 sunflower 指定的规格： 列标题 18px Bold ／ 产品名 16px Regular（行高 32px = 字号16 + 行距16）／「更多」14px Regular 列间距 20px。字体都取自思源黑体（Regular 与 Bold 都裁了子集） 高度封顶 300px（= 横幅高度），最高那列 8 款放不下时用面板滚动条下滑看 */ #productsDropdown{ display:block; top:100%; /* 紧贴「产品」菜单，不留空隙 */ /* ★ 外层 popup 盒子：padding 24 / 限宽 820 / 弱阴影 / 圆角 4 */ padding:20px 22px; /* ★ 必须给固定宽度，不能只写 max-width： 只写 max-width 时面板"由内容撑开"（实测只有 463px）， 里面 repeat(5,1fr) 的 5 列就会各自按内容宽窄不一（86/74/86/84…）， 整排看起来就是"没对齐"。固定 820 → 5 列严格等宽 → 标题与产品名整齐对齐。 */ /* ★ 宽度由内容决定：原来固定 820px，每列 144px 而文字只占 ~112px， 每列尾部空 30~50px，整排看着间距很大。现在列宽紧贴文字。 */ width:max-content; max-width:calc(100vw - 24px); box-shadow:0 2px 8px rgba(0,0,0,.08); border-radius:4px; max-height:300px; /* 兜底：优化后约 270px，正常情况下用不到滚动 */ } /* 5 列均分 + 列间距 */ #productsDropdown .dropdown-cols{ display:grid; grid-template-columns:repeat(5,minmax(0,max-content)); /* 列宽紧贴内容 + 列间距 26px：视觉上大幅收紧 */ column-gap:26px; row-gap:12px; justify-content:start; } #productsDropdown .dropdown-col{display:flex;flex-direction:column;min-width:0;padding-inline:4px} /* 栏目标题：分组名去掉前缀后只剩 4 字（「两量管理」24px = 96px < 每列 130px），字号可以放大回来 */ #productsDropdown .dropdown-group{ font-family:"Noto Sans SC","SiYuan",ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif; font-size:14px;font-weight:700;line-height:21.6px; /* 18 → 16px，下面带分割线 */ color:var(--ink);align-self:flex-start; /* ★ 盒子宽度=文字宽度 → 横线不再拉到整列宽 */ padding-right:16px; /* 横线比文字再长出一点点，比例更舒服 */ margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid #4366e4;white-space:nowrap; } /* 产品条目：14px 一行，行距收紧 */ #productsDropdown.dropdown a{ font-family:"Noto Sans SC","SiYuan",ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif; font-size:12px;font-weight:400;line-height:22.4px; /* 16 → 14px */ color:#333;margin:0;padding:0;border-radius:0; display:block;white-space:nowrap; /* ★ 产品名前的小竖线（logo 蓝，悬停加深） */ position:relative;padding-left:11px; } #productsDropdown.dropdown a:hover{background:none;color:var(--accent)} #productsDropdown.dropdown a::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:2px;height:11px;border-radius:1px;background:#4366e4;opacity:.3; transition:opacity .18s,height .18s; } #productsDropdown.dropdown a:hover::before{opacity:1;height:13px} /* 「更多 >>」不参与产品名那套（无小竖线、无缩进） */ #productsDropdown.dropdown .dropdown-cta{padding-left:0} #productsDropdown.dropdown .dropdown-cta::before{display:none} #productsDropdown.dropdown .dropdown-cta:hover{color:var(--accent);opacity:.75} /* 「更多 >>」 */ #productsDropdown.dropdown .dropdown-cta{ /* ★ 用 margin-top:auto 压到最后一列的最底部： 列是 flex 纵向布局、高度自动撑满网格 → 它的底部就是面板的右下角。 好处：完全在原有流内，不改变面板高度 */ margin:auto 0 0 auto; display:inline-block;font-size:13px;font-weight:500;line-height:1.4; color:var(--accent);padding:0;white-space:nowrap; transition:opacity .2s; } #productsDropdown [hidden]{display:none} /* 兜底：任何下拉菜单过长都能滚动，不会顶出屏幕 */ .dropdown{max-height:min(72vh,640px);overflow-y:auto;overscroll-behavior:contain} /* 二维码放大弹层：首屏 48px 的码扫不了，点开看大图 */ .qr-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(12,16,30,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .22s ease} .qr-modal[hidden]{display:none} .qr-modal.show{opacity:1} .qr-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 30px 22px;background:#fff;border-radius:18px;box-shadow:0 30px 70px -20px rgba(12,16,30,.5);transform:translateY(10px) scale(.97);transition:transform .24s ease} .qr-modal.show .qr-box{transform:none} .qr-box .qr-pic{width:min(72vw,320px);height:min(72vw,320px);display:flex;align-items:center;justify-content:center;overflow:hidden} .qr-box .qr-pic img{width:100%;height:100%;object-fit:contain;display:block} .qr-box b{font-size:16px;font-weight:600;letter-spacing:-.01em} .qr-box span{font-size:12.5px;color:var(--muted)} .qr-close{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(18,23,43,.06);color:var(--muted);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s,color .2s} .qr-close:hover{background:rgba(18,23,43,.13);color:var(--ink)} body.qr-open{overflow:hidden} /* about */ /* ★ 照官网改成全宽单列：简介/宣传片/荣誉/文化 逐段堆叠 */ .about{display:block;max-width:1100px;margin:0 auto} .about p{color:var(--muted);font-size:16px;line-height:1.95;margin-bottom:16px} .about-intro{max-width:900px;margin:0 auto} /* 数据卡片通栏铺满：发展历程/企业荣誉隐藏后，避免它单独占左半边、右半边留空 */ #aboutStats{grid-column:1/-1} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px} .stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px} .stat b{display:block;font-size:38px;font-weight:700;letter-spacing:-.02em;color:var(--accent)} .stat span{font-size:13px;color:var(--muted)} /* about sub-blocks */ .about-block{margin-top:48px} .about-subtitle{font-size:20px;font-weight:600;margin-bottom:20px;letter-spacing:-.01em} .timeline{display:flex;flex-direction:column;gap:14px} .timeline-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 22px;display:flex;gap:20px;align-items:flex-start} .timeline-year{font-size:22px;font-weight:700;color:var(--accent);min-width:80px;letter-spacing:-.02em} .timeline-body b{display:block;font-size:16px;font-weight:600;margin-bottom:4px} .timeline-body span{color:var(--muted);font-size:14px;line-height:1.6} .honors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .honor-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:6px} .honor-card img{width:100%;aspect-ratio:500/444;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;margin-bottom:10px;display:block} .honor-card b{font-size:15px;font-weight:600} .honor-card span{font-size:12px;color:var(--accent);font-weight:600} .culture-text{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 26px;color:var(--ink);font-size:15px;line-height:1.85} .culture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:16px} .culture-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px} .culture-item b{display:block;font-size:12.5px;font-weight:600;color:var(--accent);letter-spacing:.04em;margin-bottom:7px} .culture-item span{font-size:14.5px;color:var(--ink);line-height:1.65} /* cta */ .cta{padding:100px 32px;background:#12172b;color:#fff} .cta .container{max-width:1240px;margin:0 auto;padding:0} .cta h2{font-size:clamp(34px,4.4vw,54px);line-height:1.15;letter-spacing:-.025em;font-weight:700;margin-bottom:28px} .cta h2 em{font-style:normal;color:#7ea4f5} .cta p{color:rgba(255,255,255,.62);margin-bottom:34px;font-size:17px} .cta-link{display:inline-block;padding:15px 30px;background:var(--accent);color:#fff;border-radius:8px;font-size:15px;font-weight:500} .cta-link:hover{background:#4f7fe8} /* 底部联系区：左文案 + 右留资表单卡（表单未配置时自动单列） */ .cta-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center} .cta-grid.no-form{grid-template-columns:1fr} .cta-grid h2{font-size:clamp(30px,3.6vw,46px)} /* 关注我们：挂在 CTA 这块深色底的下方，用半透明白卡片 + 白字，和深色背景协调 */ .cta-social{margin-top:64px;padding-top:40px;border-top:1px solid rgba(255,255,255,.14)} .cta-social-title{font-size:13px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:18px} .cta-social .hero-social-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)} .cta-social .hero-social-card:hover{border-color:rgba(255,255,255,.34);box-shadow:0 10px 24px -8px rgba(0,0,0,.5)} .cta-social .hero-social-card.is-clickable:hover{border-color:#7ea4f5} .cta-social .hero-social-qr{background:#fff;border-color:transparent} /* 二维码必须留白底才扫得出来 */ .cta-social .hero-social-info b{color:#fff} .cta-social .hero-social-info span{color:rgba(255,255,255,.5)} .cta-social .hero-social-card.phone .hero-social-info b{color:#7ea4f5} .cta-social .hero-social-icon{background:rgba(255,255,255,.14)} .cta-social .hero-social-links{border-left-color:rgba(255,255,255,.16)} .cta-social .hero-social-link{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff} .cta-social .hero-social-link:hover{background:rgba(255,255,255,.13);border-color:#7ea4f5;color:#7ea4f5} .cta-social .hs-icon{background:transparent} .cta-social .hero-social-link:hover .hs-icon{background:transparent} .lead-form{background:#fff;border-radius:18px;padding:26px 26px 22px;box-shadow:0 30px 70px -24px rgba(0,0,0,.55)} .lead-form-head{margin-bottom:16px} .lead-form-head b{display:block;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.012em} .lead-form-head span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.6} .lead-form-slot{min-height:1px} .lead-form-slot iframe{width:100%;border:0;display:block} @media(max-width:1100px){ .cta-grid{grid-template-columns:1fr;gap:36px} .cta{padding:72px 22px} } /* news */ .news-list{display:flex;flex-direction:column;gap:20px} .news-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 28px;transition:border-color .2s} .news-item:hover{border-color:var(--line-strong)} .news-date{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.05em;margin-bottom:8px} .news-title{font-size:19px;font-weight:600;margin-bottom:8px} .news-desc{color:var(--muted);font-size:15px;line-height:1.7} /* campaigns */ .campaign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px} /* footer */ .footer{padding:34px 32px 26px;border-top:1px solid var(--line)} .footer-bar{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:10px} /* 章节头右侧：说明 + “查看全部”入口 */ .section-head-right{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap} .section-more{font-size:13px;font-weight:500;color:var(--accent);white-space:nowrap} .section-more:hover{text-decoration:underline} /* 下拉菜单底部的“查看全部” */ .dropdown-cta{margin-top:6px;border-top:1px solid var(--line);color:var(--accent)!important;font-weight:500} /* 首页产品摘要里“还有 N 款”的卡片 */ .case-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:transparent;border:1px dashed var(--line-strong)} .case-more:hover{border-color:var(--accent);background:rgba(59,111,224,.04);transform:translateY(-4px)} .case-more b{font-size:15px;font-weight:600;color:var(--accent)} .case-more span{font-size:12.5px;color:var(--muted);line-height:1.6;padding:0 18px} /* 独立子页面：顶部标题 + 导语 */ /* ============ 子页面页头横幅 ============ 背景是桥梁实景照（原图上的标题/副标题/按钮/左右箭头/小图标都已抹掉，见 .fontwork/tools/clean-bridge.py）。 文字压在画面**上部的天空区**，那里是亮的，所以保持深色文字就能看清，不用加遮罩。 */ .page-banner{ /* 固定尺寸：宽 1875 / 高 300（屏幕不够宽时自动收窄，不会溢出） margin:0 auto 让它在页面里**左右居中**，不是靠左 */ /* ★ position:relative 必须有！下面几个 --news/--services/--campaigns 的 ::before 遮罩是 position:absolute;inset:0。父级没有定位， 它就会去找更上层的定位祖先，最后铺满整个视口 —— 那会变成一条盖住全页的灰底。 */ position:relative; width:min(1875px,100%); height:300px; margin:0 auto 52px; background:#dfe7ee; /* 具体背景图由各页修饰类指定（见 img/banners/） */ display:flex;align-items:center;justify-content:center; /* 搜索框居中 */ padding:0; } .page-banner .container{width:100%} /* 横幅里的产品搜索框 */ .banner-search{position:relative;width:min(560px,100%);margin:0 auto} .banner-search input{ width:100%;height:52px;padding:0 54px 0 20px; font-family:inherit;font-size:15px;color:var(--ink); background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.6);border-radius:10px; outline:none;box-shadow:0 10px 30px -12px rgba(12,23,43,.35); transition:background .2s,border-color .2s; } .banner-search input::placeholder{color:#7c8598} .banner-search input:focus{background:#fff;border-color:var(--accent)} .banner-search svg{ position:absolute;right:18px;top:50%;transform:translateY(-50%); color:var(--muted);pointer-events:none; } /* 搜不到东西时的提示 */ .pd-empty{font-size:15px;color:var(--muted);padding:40px 0 8px} /* ============ 新闻资讯页 横幅 ============ 和产品页横幅同尺寸（宽 1875 / 高 300，居中）；背景是桥梁实景的自然色， 左侧叠了一层很淡的深色渐变，只为让白色标题读得清 */ .page-banner--news{ background:#0e1a2e url("../img/banners/banner-news.webp") center/cover no-repeat; align-items:center; /* 文字垂直居中（产品页那版是顶部对齐） */ } /* 新背景是粒子波浪（深蓝为主但局部偏亮），左侧压一层深色渐变让白字更稳 */ .page-banner--news::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(6,12,24,.55) 0%,rgba(6,12,24,.26) 45%,rgba(6,12,24,0) 75%); } .page-banner--news .container{width:100%;position:relative} .banner-title{ font-size:clamp(30px,4vw,52px);font-weight:700;line-height:1.2; color:#fff;letter-spacing:.02em;margin:0 0 12px; } .banner-sub{font-size:clamp(14px,1.5vw,18px);color:rgba(255,255,255,.88);letter-spacing:.02em;margin:0} /* 横幅已起标题作用，新闻列表上方留白收一点 */ .section.news-section{padding-top:56px} @media(max-width:860px){ .banner-title{margin-bottom:8px} } .section.page-intro{padding-top:0} .page-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:20px} .page-back:hover{color:var(--accent)} .page-back::before{content:"←"} .page-banner .section-head,.page-intro .section-head{border-top:0;padding-top:0;margin-bottom:18px} /* ★ 关于页：企业简介的标题与"资质荣誉/企业文化"统一为居中大标题 */ .page-intro > .section-head{display:block;text-align:center;margin-bottom:34px} .page-intro > .section-head .section-title{font-size:26px;font-weight:700;text-transform:none;letter-spacing:0} .page-intro > .section-head .about-subtitle{margin-bottom:10px} .page-intro > .section-head .section-meta{display:block;font-size:14px;letter-spacing:0} .page-lead{font-size:16px;line-height:1.85;color:var(--muted);max-width:860px;margin-bottom:0} @media(max-width:860px){ .page-banner{height:200px;margin-bottom:32px} .banner-search input{height:46px;font-size:14px} } /* ---------- 产品详情页 ---------- */ /* 顶部色块头图：把产品名和概要包进一块淡淡的主色渐变里，和下方内容拉开层次 */ .pd-zone-1{position:relative;margin:0 0 52px;padding:40px 44px 38px;border-radius:22px; background:linear-gradient(118deg,rgba(59,111,224,.13),rgba(59,111,224,.035) 46%,rgba(118,203,193,.14))} /* 产品分组 + 产品名称 排在同一行 */ .pd-title-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px} .pd-group{display:inline-block;font-size:var(--fs-meta);font-weight:600;color:#fff;background:var(--accent);padding:6px 15px;border-radius:99px;white-space:nowrap;box-shadow:0 4px 12px -4px rgba(59,111,224,.55)} .pd-title{font-size:clamp(30px,3.6vw,44px);line-height:1.14;letter-spacing:-.024em;font-weight:700} /* 产品概要介绍独立一张卡 */ .pd-intro-card{max-width:none;padding:0} .pd-desc{word-break:break-word;overflow-wrap:anywhere;white-space:pre-line} .pd-desc{font-family:'SiYuan',ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif;font-size:var(--fs-sm);line-height:1.9;color:var(--ink);opacity:.78;margin-top:20px} /* 页内栏目导航 */ .pd-empty{font-size:15px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 28px;line-height:1.8} .pd-sec{margin-top:72px;scroll-margin-top:90px} .pd-sec-title{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.015em;margin-bottom:28px;display:flex;align-items:center;gap:11px} .pd-sec-title::before{content:"";width:4px;height:19px;border-radius:2px;background:var(--accent);flex:none} /* 区域二：价值点 —— 上下结构。文字在上（限宽好读）、截图在下面占满整行。 （早期做过"文字截图左右交替"的之字形，已取消 —— 那版翻转行的图片会比不翻转行窄 22%） */ .pd-values{display:flex;flex-direction:column;gap:76px} .pd-value{display:flex;flex-direction:column;gap:26px;align-items:stretch} .pd-value-text{max-width:calc(100% - 1.1em)} /* ★ 不再限 800px；太长时按"比图窄一个字"折行 */ .pd-value.no-shot{gap:0} .pd-value.no-shot .pd-value-shot{display:none} /* 价值点序号：只做信息层次，不加任何框／底色 */ .pd-value-no{display:block;font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:12px;font-variant-numeric:tabular-nums} .pd-value-text b{display:block;font-family:"Hei",'Source Han Sans SC',"Noto Sans SC",ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif;font-size:var(--fs-body);font-weight:700;letter-spacing:-.012em;line-height:1.6;margin-bottom:12px} .pd-value-text p{font-family:"Hei",'Source Han Sans SC',"Noto Sans SC",ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif;font-size:var(--fs-sm);line-height:1.9;color:var(--muted)} /* 配图统一尺寸：不管原图多大、比例多少，都裁成同一个 16:9 的框。 用 cover 让图铺满整个框 —— 这样两张图显示出来一模一样大， 也不会露出底色或边框（之前用 contain + 白底 + 描边，图没填满就会看到"相框"）。 原图比例和 16:9 不同时，边缘会被裁掉一点点（约 3%）。 */ /* 配图：★ 原样展示，不裁切、不加边框、不加圆角。 用户的截图自带边框，如果在外面再套一层 CSS 边框就成了双层框（被明确说"好丑"）； 加 aspect-ratio + cover 又会把图裁掉一圈（左右两条边框就是这么丢的）。 所以这里只限定宽度，高度按原图比例走，图完整显示。 */ .pd-value-shot{overflow:hidden} /* 配图静止不动：鼠标划过不放大、滚动时也不淡入位移 —— 浏览时图片一直老老实实待着 */ .pd-value-shot img{width:100%;height:auto;display:block} .pd-value-shot{display:flex;flex-direction:column;gap:14px} /* 一个价值点多张图时竖向堆叠 */ /* 功能介绍 */ .pd-features{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px} .pd-features li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 22px 18px 46px;font-size:15px;line-height:1.75} .pd-features li::before{content:"";position:absolute;left:20px;top:25px;width:9px;height:9px;border-radius:3px;background:var(--accent);opacity:.55} /* 适用岗位和场景 */ /* 岗位和场景合并成一整块：上下排，小标题紧贴内容，外边不加卡片框 */ .pd-scene-block + .pd-scene-block{margin-top:34px} .pd-scene-block{max-width:1000px} .pd-scene-sub{font-size:var(--fs-sm);font-weight:600;color:var(--accent);letter-spacing:.02em;margin-bottom:14px} .pd-chips{display:flex;gap:9px;flex-wrap:wrap} /* 业务场景：一行一条，长句子也排得下 */ .pd-scene-list{list-style:none;display:flex;flex-direction:column;gap:13px} .pd-scene-list li{position:relative;padding-left:19px;font-size:var(--fs-body);line-height:1.85;color:var(--ink);opacity:.82} .pd-scene-list li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:2px;background:var(--accent);opacity:.5} .pd-chip{font-size:var(--fs-sm);color:var(--ink);background:rgba(18,23,43,.05);border-radius:8px;padding:7px 15px;line-height:1.5} /* 软件体验 */ .pd-demo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 28px} .pd-demo-btn{display:inline-block;background:var(--accent);color:#fff;font-size:var(--fs-body);font-weight:500;border-radius:10px;padding:14px 32px;box-shadow:0 6px 18px -6px rgba(59,111,224,.5);transition:background .2s,box-shadow .2s,transform .2s} .pd-demo-btn:hover{background:#2f5cc4;box-shadow:0 10px 24px -8px rgba(59,111,224,.58);transform:translateY(-1px)} .pd-demo-note{font-size:var(--fs-sm);color:var(--muted)} /* 视频教程 */ .pd-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .pd-video{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;transition:border-color .2s,transform .2s} .pd-video:hover{border-color:var(--accent);transform:translateY(-3px)} .pd-video b{font-size:var(--fs-body);font-weight:600;line-height:1.5} .pd-video span{font-size:var(--fs-meta);color:var(--accent)} /* 上一个 / 下一个 */ .pd-pager{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:26px;border-top:1px solid var(--line)} .pd-pager-link{font-size:14px;color:var(--muted)} .pd-pager-link:hover{color:var(--accent)} @media(max-width:860px){ .about{grid-template-columns:1fr} .pd-scene-grid{grid-template-columns:1fr;gap:16px} .pd-values{gap:48px} .pd-value{gap:18px} /* ---- 窄屏改用汉堡菜单：原来 5 个下拉项横排约 400px，手机上会被挤出屏幕 ---- */ .nav{padding:0 18px} .nav-toggle{display:flex} .nav-brand img{height:32px} .nav-brand span{display:none} .nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 20px 44px -22px rgba(18,23,43,.3);padding:6px 18px 16px;max-height:calc(100vh - var(--nav-h));overflow-y:auto} .nav.open .nav-links{display:flex} .nav-links>a{padding:15px 4px;font-size:15px} .nav-item{width:100%;border-top:1px solid var(--line)} .nav-item>a{display:flex;justify-content:space-between;align-items:center;padding:15px 4px;font-size:15px} .nav-item.open>a{color:var(--accent)} /* 子菜单在窄屏改成"就地展开"，不再浮层 */ .dropdown{position:static;transform:none;opacity:1;visibility:visible;display:none;box-shadow:none;border:0;border-radius:0;padding:0 0 12px 10px;min-width:0;max-height:none;overflow:visible} .nav-item.open .dropdown{display:block} #productsDropdown{display:none;grid-template-columns:1fr;min-width:0;width:auto;padding:0 0 12px 10px;max-height:none} #productsDropdown .dropdown-cols{grid-template-columns:1fr;gap:0} .nav-item.open #productsDropdown{display:grid} .dropdown a{padding:11px 12px;font-size:14px} .dropdown-group{padding:10px 12px 2px;border-top:0} } /* ============ 页脚（照梦诚现网的版式：深蓝底、顶部联系行、栏目+二维码、底部版权） ============ */ .footer{background:#1c2759;font-family:'SiYuan',ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif;color:rgba(255,255,255,.72);padding:44px 0 26px;font-size:11.5px;font-weight:400} .footer .container{max-width:1240px;margin:0 auto;padding:0 32px} .footer a{color:inherit;font-weight:400} /* 页脚：除栏目名外一律不加粗 */ .footer span,.footer p,.footer div,.footer li,.footer figcaption{font-weight:400} .footer a:hover{color:#fff} /* 顶部：logo + 联系 + 关注 */ .footer-top{display:flex;align-items:center;gap:36px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)} .footer-brand{display:flex;align-items:center;gap:12px} /* ★ logo 原图是"蓝字 + 白底"，白底已挖成透明；这里再整体转白 —— 深色页脚上白 logo 最清楚 */ .footer-brand img{height:32px;width:auto;display:block;filter:brightness(0) invert(1)} .footer-contact{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .footer-label{color:rgba(255,255,255,.5);margin-left:8px;font-weight:400} .footer-contact .footer-label:first-child{margin-left:0} .footer-social{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto} .footer-social-list{display:flex;align-items:center;gap:12px} .footer-social-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;opacity:.78;transition:opacity .2s} .footer-social-icon:hover{opacity:1} /* 官方图标本身就是白色（给深色底用的），不能再加反白滤镜 —— 头条那个图标是"白底 + 深色字"，一加滤镜就变成纯白方块了 */ .footer-social-icon img{width:100%;height:100%;object-fit:contain} /* 栏目 + 二维码 */ .footer-main{display:flex;gap:48px;padding:34px 0 30px;flex-wrap:wrap} .footer-cols{display:flex;gap:56px;flex-wrap:wrap;flex:1 1 auto} .footer-col{display:flex;flex-direction:column;gap:11px;min-width:96px} .footer .footer-col-title{color:#fff;font-size:14.5px;font-weight:700;margin-bottom:3px} .footer-col-link{color:rgba(255,255,255,.68);font-weight:400} .footer-col-link:hover{color:#fff} .footer-qr{display:flex;gap:28px;flex:none;margin-left:auto} .footer-qr-item{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px} .footer-qr-item img{width:104px;height:104px;object-fit:contain;background:#fff;border-radius:4px;padding:5px;display:block} .footer-qr-item figcaption{color:rgba(255,255,255,.68);font-size:10.5px;font-weight:400} /* 底部版权 */ .footer-bottom{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:10.5px;color:rgba(255,255,255,.55);font-weight:400} .footer-bottom a:hover{color:#fff} .footer-legal{margin-left:auto;display:flex;gap:22px} .footer-legal a::after{content:"|";margin-left:22px;color:rgba(255,255,255,.22)} .footer-legal a:last-child::after{content:"";margin:0} @media(max-width:860px){ .footer-top{gap:20px;padding-bottom:20px} .footer-social{margin-left:0} .footer-cols{gap:28px 36px} .footer-qr{margin:6px 0 0;gap:20px} .footer-qr-item img{width:88px;height:88px} .footer-legal{margin-left:0} } /* ============ 关于梦诚页 横幅 ============ 和产品页/新闻页横幅同尺寸（min(1875px,100%) / 300 高 / 居中）； 背景是厂区楼体照片（已抹掉后期加的白字，保留了楼上的 MCTECH 金属字） */ .page-banner--about{ background:#1a2333 url("../img/banners/banner-about.webp") center/cover no-repeat; align-items:center; } .page-banner--about .container{width:100%} .about-banner-text{ font-size:clamp(19px,2.3vw,32px);font-weight:700;line-height:1.45; color:#fff;letter-spacing:.02em;margin:0;max-width:900px; text-shadow:0 2px 14px rgba(0,0,0,.35); } @media(max-width:860px){ .about-banner-text{font-size:clamp(16px,3.6vw,20px)} } /* ============ 服务能力页 横幅 ============ 握手照（已抹掉面包屑与后期加的白字）；尺寸同产品页/新闻页/关于页 */ .page-banner--services{ background:#20262e url("../img/banners/banner-services.webp") center/cover no-repeat; align-items:center; } .page-banner--services .container{width:100%} /* 照片整体偏亮，左侧压一层深色渐变，白色文案才立得住 */ .page-banner--services::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(10,16,26,.62) 0%,rgba(10,16,26,.34) 42%,rgba(10,16,26,0) 72%); } .page-banner--services .container{position:relative} .services-banner-text{ font-size:clamp(15px,1.75vw,25px);font-weight:700;line-height:1.5; color:#fff;letter-spacing:.02em;margin:0; max-width:none; /* ★ 原来是 1000px —— 40 个字的文案被它挤成了两行 */ text-shadow:0 2px 14px rgba(0,0,0,.4); } /* 宽屏上一律不折行（这句话 40 个字，25px 时约 1000px，版心有 1176px，放得下） */ @media(min-width:1100px){ .services-banner-text{white-space:nowrap} } /* 窄屏还是让它自然折行，避免溢出 */ @media(max-width:860px){ .services-banner-text{font-size:clamp(14px,3vw,17px)} } /* ============ 产品页 横幅 ============ 背景换成深蓝科技感波浪图（已抹掉面包屑与「企业层」）； 尺寸规则仍和原来共用，横幅里的「搜索梦诚的产品」搜索框完全不受影响 */ .page-banner--products{ background:#0d1420 url("../img/banners/banner-products.webp") center/cover no-repeat; } /* ============ 营销活动页 横幅 ============ 与新闻页同一张粒子波浪图（取景绕开了原图的文字与面包屑）； 尺寸规则与其它页共用 */ .page-banner--campaigns{ background:#0e1a2e url("../img/banners/banner-campaigns.webp") center/cover no-repeat; align-items:center; } .page-banner--campaigns .container{width:100%;position:relative} .page-banner--campaigns::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(6,12,24,.55) 0%,rgba(6,12,24,.26) 45%,rgba(6,12,24,0) 75%); } .campaigns-banner-text{ font-size:clamp(22px,2.6vw,38px);font-weight:700;line-height:1.4; color:#fff;letter-spacing:.02em;margin:0; text-shadow:0 2px 14px rgba(0,0,0,.4); } @media(max-width:860px){ .campaigns-banner-text{font-size:clamp(19px,4vw,24px)} } /* ★ 产品下拉条目样式见上方 #productsDropdown.dropdown a —— 注意选择器要写成 "#productsDropdown.dropdown a"（面板自身就带 .dropdown 类）， 不能写成 "#productsDropdown .dropdown a"（那会要求多一层 .dropdown 祖先，永远不匹配）。 */ /* ============ 产品详情页：按 tags 生成的跳转按钮 ============ */ .pd-tagbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .pd-tagbtns[hidden]{display:none} .pd-tagbtn{ display:inline-flex;align-items:center;height:38px;padding:0 18px; border:1px solid var(--accent);border-radius:999px; font-size:14.5px;font-weight:500;color:var(--accent);background:#fff; transition:background .2s,color .2s,transform .2s; } .pd-tagbtn:hover{background:var(--accent);color:#fff;transform:translateY(-1px)} @media(max-width:860px){ .pd-tagbtns{gap:8px;margin-top:16px} .pd-tagbtn{height:34px;padding:0 14px;font-size:13.5px} } /* ============ 新闻资讯页：居中标题 + 三列卡片（照梦诚现网样式） ============ 现网是「三列网格 · 图片在上 · 日期和标题在下」，这里对齐它的观感 */ .news-head{text-align:center;margin-bottom:44px} .news-head-title{font-size:clamp(26px,3vw,38px);font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:.02em} .news-head-sub{font-size:15px;font-weight:500;color:var(--accent);letter-spacing:.14em;margin:0;text-transform:uppercase} /* 三列网格；分类锚点不占格子 */ .news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px} .news-anchor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* 卡片：图片在上，日期与标题在下（无边框、浅底，贴近现网） */ .news-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); border-radius:6px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s} .news-card:hover{border-color:var(--line-strong);box-shadow:0 10px 26px -14px rgba(18,23,43,.35);transform:translateY(-2px)} .news-thumb{display:block;background:#e8edf5;overflow:hidden} .news-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .35s} .news-card:hover .news-thumb img{transform:scale(1.04)} .news-thumb[hidden]{display:none} .news-body{padding:16px 18px 20px} .news-date{font-size:13px;color:var(--muted);margin-bottom:9px;letter-spacing:.01em} .news-title{font-size:15.5px;font-weight:600;line-height:1.6;color:var(--ink);margin:0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .news-desc{font-size:13.5px;line-height:1.7;color:var(--muted);margin:8px 0 0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media(max-width:1100px){ .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:700px){ .news-grid{grid-template-columns:1fr;gap:22px} .news-head{margin-bottom:30px} } /* ============ 新闻分页 ============ */ .news-pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:44px} .news-pager-btn{min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:8px; background:var(--surface);font-size:14px;color:var(--ink);transition:border-color .2s,background .2s,color .2s} .news-pager-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} .news-pager-btn.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600} .news-pager-btn:disabled{opacity:.4;cursor:default} .news-pager-info{margin-left:10px;font-size:13px;color:var(--muted)} /* ============ 新闻详情页 ============ */ .news-detail{padding-top:56px} .news-detail-inner{max-width:860px;margin:0 auto} .news-detail-back{display:inline-block;font-size:13.5px;color:var(--accent);margin-bottom:18px} .news-detail-back::before{content:"← ";margin-right:2px} .news-detail-back:hover{text-decoration:underline} .news-detail-title{font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.5;color:var(--ink);margin:0 0 14px} .news-detail-meta{font-size:13.5px;color:var(--muted);padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--line)} .news-detail-empty{font-size:14.5px;color:var(--muted);padding:30px 0} /* 正文排版（沿用抓下来的段落结构） */ .news-detail-body{font-size:16px;line-height:1.95;color:#2a3040} .news-detail-body p{margin:0 0 18px} .news-detail-body p.center{text-align:center} .news-detail-body img{max-width:100%;height:auto;display:block;margin:22px auto;border-radius:6px} .news-detail-body .cap{display:block;text-align:center;font-size:13.5px;color:var(--muted);margin:-10px 0 22px} .news-detail-body .nd-cover{margin:0 0 26px} .news-detail-body a{color:var(--accent)} .news-detail-body strong{font-weight:600} /* ---- 案例详情正文专属（字号体系：h1 18 / h2 16 / h3 14 加粗不缩进；p 14 缩进两字） ---- */ /* 容器宽度与新闻详情一致（news-detail-inner = 860px） */ .case-detail-inner{max-width:860px;margin:0 auto} .case-detail .news-detail-body{font-family:'SiYuan',ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif;font-size:14px;line-height:2;color:#2a3040} /* 正文文字段：14px 不加粗，首行缩进两个字 */ .case-detail .news-detail-body p{font-size:14px;font-weight:400;text-indent:2em} .case-detail .news-detail-body p.center{text-indent:0} /* 一级标题段：18px 加粗 不缩进 */ .case-detail .news-detail-body p.h1{font-size:18px;font-weight:700;text-indent:0;margin:26px 0 14px} /* 二级标题段：16px 加粗 不缩进 */ .case-detail .news-detail-body p.h2{font-size:16px;font-weight:700;text-indent:0;margin:20px 0 12px} /* 三级标题段：14px 加粗 不缩进 */ .case-detail .news-detail-body p.h3{font-size:14px;font-weight:700;text-indent:0;margin:16px 0 10px} /* 图片段：统一按内容盒宽度等比缩放，宽度一致且完整不裁切 */ .case-detail .news-detail-body img{width:100%;height:auto;object-fit:contain;border-radius:6px;margin:20px auto;display:block} /* 图片段的 img 包裹段不缩进（兼容把 img 放进

的写法） */ .case-detail .news-detail-body p:has(> img){text-indent:0} .news-detail-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px;padding-top:28px;border-top:1px solid var(--line)} .nd-nav-link{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;transition:border-color .2s} .nd-nav-link:hover{border-color:var(--accent)} .nd-nav-link span{font-size:12.5px;color:var(--muted)} .nd-nav-link b{font-size:14px;font-weight:500;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nd-nav-link.next{text-align:right} .nd-nav-link.disabled{border:0} @media(max-width:700px){ .news-detail-nav{grid-template-columns:1fr} .news-detail-body{font-size:15.5px} } /* ============ 合作伙伴（首页 / 应用案例页共用） ============ 照梦诚官网现有栏目结构：居中标题 + 三个数字 + 客户墙 Logo 未就位时显示客户名称；就位后自动切图片（见 app.js renderPartners） */ /* 合作伙伴区块：与其它区块保持同一节奏（对齐新闻资讯） */ .section--partners{padding-top:88px} .pt-lead{max-width:900px;margin:0 auto 30px;text-align:center; font-size:14.5px;line-height:2.05;color:var(--muted)} /* 三个数字：与官网一致的大数字 + 小标签 */ .pt-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:20px 72px; margin:0 0 46px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .pt-stat{text-align:center;min-width:120px} .pt-stat b{display:block;font-size:clamp(26px,3.1vw,38px);font-weight:700;line-height:1.15; color:var(--accent);letter-spacing:-.01em} .pt-stat i{font-style:normal;font-size:13.5px;color:var(--muted);display:block;margin-top:6px} /* 分组 */ .pt-group{margin-bottom:30px} .pt-group-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px; padding-left:11px;border-left:3px solid var(--accent)} .pt-group-head b{font-size:15.5px;font-weight:700;color:var(--ink)} .pt-group-head span{font-size:12.5px;color:var(--muted)} .pt-list{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px} /* 单个客户：浅底卡片，名称或 Logo 居中；悬停轻微上浮 + 品牌色 */ .pt-item{display:flex;align-items:center;justify-content:center;min-height:58px; padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px; font-size:13.5px;color:var(--ink);text-align:center;line-height:1.45; transition:border-color .2s,color .2s,transform .2s,box-shadow .2s} .pt-item:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px); box-shadow:0 6px 18px -10px rgba(59,111,224,.45)} .pt-item img{max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain;display:block} /* Logo 墙：每格只放 Logo，白底、无边框干扰，悬停轻微上浮 */ .pt-list--wall{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px} .pt-list--wall .pt-item{min-height:88px;padding:16px 18px;background:var(--surface)} .pt-list--wall .pt-item img{max-height:56px} /* 名称文字卡（无 Logo 的客户退回文字显示） */ .pt-item--text{font-weight:600;letter-spacing:.01em} /* 分组模式：卡片统一高度，Logo 卡与名称卡混排也整齐 */ /* 合作伙伴：单一网格（不再分组），每排 3 个；图标与名称一行、上下居中 logo 用固定宽度槽位承载 → 各列图标严格对齐；卡片等高、留白统一 */ .pt-list{grid-template-columns:repeat(3,1fr);gap:16px} .pt-item{flex-direction:row;align-items:center;justify-content:flex-start; gap:14px;min-height:92px;padding:20px 22px;background:var(--surface); border:1px solid var(--line);border-radius:12px;text-align:left; transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease} .pt-item:hover{border-color:var(--accent);transform:translateY(-2px); box-shadow:0 10px 26px -16px rgba(59,111,224,.5)} /* logo 槽位：固定宽度，图标在其中居中 → 所有卡片的图标左对齐、视觉成列 */ /* logo 槽位：最小 66px（方形标对齐），宽幅标（如中国交建/保利长大）自动撑宽， 图标一律按 47px 高显示 —— 避免宽标被压成 19~24px 高、看着比别的标小一号 */ .pt-logo{flex:0 0 auto;min-width:66px;height:47px;display:flex;align-items:center;justify-content:flex-start} .pt-logo img{height:47px;max-height:47px;width:auto;max-width:calc(100% - 10px);display:block} .pt-item--text{justify-content:center;font-size:16px;font-weight:600;text-align:center} /* 折叠：默认隐藏第 6 排起的卡片 */ .pt-list .pt-item.pt-fold{display:none} /* 「查看更多」按钮：居中、与网格保持统一留白 */ .pt-more{display:flex;justify-content:center;margin-top:26px} .pt-more .btn{min-width:0;padding:11px 26px;text-align:center} .pt-item .pt-cap{display:block;margin:0;font-size:16px;line-height:1.3;color:var(--ink); font-weight:600;letter-spacing:-.01em;text-align:left; flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:860px){ .pt-stats{gap:18px 40px;padding:20px 0;margin-bottom:32px} .pt-stat{min-width:92px} .pt-stat b{font-size:24px} .pt-stat i{font-size:12.5px} .pt-lead{font-size:13.5px;margin-bottom:22px} .pt-list{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px} .pt-item{min-height:50px;padding:8px 8px;font-size:12.5px;border-radius:8px} .pt-list{grid-template-columns:repeat(3,1fr);gap:9px} .pt-item{min-height:64px;padding:11px 10px;gap:8px;border-radius:9px} .pt-logo{flex:0 0 auto;min-width:34px;height:29px} .pt-logo img{height:29px;max-height:29px;max-width:calc(100% - 8px)} .pt-item .pt-cap{font-size:12px;line-height:1.25} .pt-item--text{font-size:12px} .pt-list--wall{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px} .pt-list--wall .pt-item{min-height:64px;padding:10px} .pt-list--wall .pt-item img{max-height:40px} .pt-group-head b{font-size:14.5px} } @media(max-width:420px){ .pt-list{grid-template-columns:repeat(2,1fr)} } /* 产品详情页：某个板块还没填内容时的兜底提示 */ .pd-sec-empty{font-size:15px;color:var(--muted);padding:26px 0;margin:0} /* ============ 工程算量技能大赛页 ============ */ .page-banner--competition{ background:#1a2333 url("../img/banners/banner-campaigns.webp") center/cover no-repeat; } .competition-banner-text{font-size:clamp(18px,2vw,26px);font-weight:600;color:#fff;letter-spacing:.06em; text-shadow:0 1px 12px rgba(0,0,0,.45);margin:0} .comp-block{margin-bottom:40px} .comp-h{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 14px} .comp-p{font-size:15px;line-height:1.95;color:#3a4256;margin:0 0 14px} .comp-org{font-size:14.5px;line-height:2;color:#3a4256;background:var(--surface); border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px;padding:16px 20px;margin:0} .comp-news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .comp-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); border-radius:6px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s} .comp-card:hover{border-color:var(--line-strong);box-shadow:0 10px 26px -14px rgba(18,23,43,.35);transform:translateY(-2px)} .comp-card-img{display:block;background:#e8edf5;overflow:hidden} .comp-card-img img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .35s} .comp-card:hover .comp-card-img img{transform:scale(1.04)} .comp-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1} .comp-card-title{font-size:14.5px;font-weight:500;line-height:1.65;color:var(--ink);margin:0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .comp-card:hover .comp-card-title{color:var(--accent)} .comp-card-open{font-size:12.5px;color:var(--accent);margin-top:auto} .comp-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap; background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:22px 26px;margin-top:8px} .comp-cta-t{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 6px} .comp-cta-d{font-size:13.5px;color:var(--muted);margin:0} .comp-cta-btn{margin-left:auto;white-space:nowrap;font-size:14px;font-weight:600;color:#fff;background:var(--accent); border-radius:6px;padding:11px 22px;transition:opacity .2s} .comp-cta-btn:hover{opacity:.88} @media(max-width:1100px){.comp-news{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){ .comp-news{grid-template-columns:1fr;gap:18px} .comp-cta-btn{margin-left:0} } /* ============================================================ 关于梦诚页：照官网的分段方式重构 每块自成一段（分割线 + 居中标题），荣誉做横向轮播 ============================================================ */ .about-sec{padding:56px 0;border-top:1px solid var(--line)} .about-sec:first-of-type{border-top:0;padding-top:8px} .about-sec .about-subtitle{font-size:26px;font-weight:700;text-align:center;color:var(--ink); margin:0 0 30px;letter-spacing:.01em} .about-sec .section-head{border-top:0;padding-top:0} /* 企业宣传片 */ .about-video{margin:0 auto;max-width:900px} .about-video video{width:100%;aspect-ratio:16/9;display:block;border-radius:8px; background:#0d1526;border:1px solid var(--line)} /* 资质荣誉：左右箭头横向轮播 */ .honor-carousel{position:relative;display:flex;align-items:center;gap:14px} .honor-track{display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth; padding:6px 2px 18px;scrollbar-width:none;-ms-overflow-style:none} .honor-track::-webkit-scrollbar{display:none} .honor-track .honor-card{flex:0 0 208px;display:flex;flex-direction:column; align-items:center;text-align:center;gap:10px;text-decoration:none} .honor-track .honor-card img{width:100%;display:block;border-radius:6px;transition:transform .3s} .honor-track .honor-card:hover img{transform:translateY(-3px)} .honor-track .honor-card b{font-size:14px;font-weight:500;color:var(--ink);line-height:1.55} .honor-track .honor-card span{font-size:12px;color:var(--accent)} .honor-arrow{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line); background:var(--surface);color:var(--ink);font-size:22px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s} .honor-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} .honor-arrow:disabled{opacity:.28;cursor:default} /* 企业文化：橙色圆形图标卡片（照官网形式） */ .about-sec .culture-text{max-width:1080px;margin:0 0 30px;text-align:left; font-size:14.5px;line-height:1.95;color:var(--muted)} .culture-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px; max-width:980px;margin:0 auto} .culture-grid .culture-item{display:flex;gap:16px;align-items:flex-start; background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px; transition:border-color .2s,transform .2s} .culture-grid .culture-item:hover{border-color:var(--line-strong);transform:translateY(-2px)} .culture-grid .culture-item i{flex:none;width:44px;height:44px;border-radius:50%; background:linear-gradient(135deg,#ff9142,#f2601a);display:flex;align-items:center; justify-content:center} .culture-grid .culture-item i svg{width:22px;height:22px;fill:#fff;display:block} .culture-grid .culture-item b{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px;white-space:nowrap} .culture-grid .culture-item span{font-size:13.5px;color:var(--muted);line-height:1.7} @media(max-width:820px){ .about-sec{padding:40px 0} .about-sec .about-subtitle{font-size:21px;margin-bottom:22px} .culture-grid{grid-template-columns:1fr;gap:14px} .honor-track .honor-card{flex:0 0 160px} .honor-arrow{width:36px;height:36px;font-size:19px} } /* ============================================================ 关于梦诚页 · 按参考图精修 ① 企业简介：左文右图，图带蓝色偏移边框 ② 资质荣誉：一屏正好 4 张，箭头翻页 ③ 企业文化：中间大 M，六卡环绕（橙色圆图标 + 斜切底） ============================================================ */ /* ① 企业简介 */ .about-intro-wrap{display:grid;grid-template-columns:1.55fr 1fr;gap:56px; align-items:center;padding:16px 0 42px} /* 简介文字排两栏：压矮整体高度，和右边的图齐平 */ /* 两栏高度拉齐：允许段落跨栏，让浏览器自动平衡 */ .about-intro-text{columns:2;column-gap:44px;column-fill:balance} .about-intro-text p{color:var(--muted);font-size:14px;line-height:1.98; margin:0 0 13px;break-inside:auto;orphans:2;widows:2} /* 首段当导语：字大一点、颜色深一点 */ .about-intro-text p:first-child{font-size:15px;color:var(--ink);font-weight:500;line-height:1.9} .about-intro-text p:last-child{margin-bottom:0} .about-intro-photo{position:relative;margin:0} .about-intro-photo::before{content:"";position:absolute;top:22px;left:22px; width:100%;height:100%;border:2px solid #3f6fdd;border-radius:3px} .about-intro-photo img{position:relative;width:100%;display:block;border-radius:3px; box-shadow:0 14px 44px -20px rgba(18,23,43,.38)} /* ② 资质荣誉：一屏 4 张 */ .honor-track{gap:20px} .honor-track .honor-card{flex:0 0 calc((100% - 60px) / 4)} /* ③ 企业文化：六卡交错（原居中 M 底图已下线） */ .culture-wrap{position:relative;max-width:1080px;margin:0 auto;padding:16px 0 8px} .culture-wrap .culture-grid{position:relative;z-index:1; display:grid;grid-template-columns:1fr 1fr;gap:64px 0;max-width:1080px;margin:0 auto} /* 左列贴左、右列贴右，中间自然留出一条给 M 的空档 */ .culture-wrap .culture-grid > *:nth-child(odd){justify-self:start} .culture-wrap .culture-grid > *:nth-child(even){justify-self:end} .culture-wrap .culture-item{position:relative;display:flex;gap:14px;align-items:flex-start; padding:14px 20px;background:none;border:0;border-radius:0;max-width:340px} .culture-wrap .culture-item::before{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(238,242,250,.96),rgba(238,242,250,.45) 72%,rgba(238,242,250,0)); transform:skewX(-11deg);border-radius:3px;z-index:-1} .culture-wrap .culture-item i{flex:none;width:40px;height:40px;border-radius:50%; background:linear-gradient(135deg,#ff9142,#f2601a);display:flex;align-items:center;justify-content:center} .culture-wrap .culture-item i svg{width:20px;height:20px;fill:#fff;display:block} .culture-wrap .culture-item b{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:5px} .culture-wrap .culture-item span{font-size:13px;color:var(--muted);line-height:1.7} @media(max-width:1000px){ .about-intro-wrap{grid-template-columns:1fr;gap:36px} .honor-track .honor-card{flex:0 0 calc((100% - 40px) / 3)} .culture-wrap .culture-grid{gap:26px 60px} } @media(max-width:640px){ .honor-track .honor-card{flex:0 0 calc((100% - 20px) / 2)} .culture-wrap .culture-grid{grid-template-columns:1fr;gap:16px} } /* ============================================================ 企业宣传片：点简介配图弹出播放 ============================================================ */ .about-intro-photo{cursor:pointer} .about-intro-photo::after{content:"";position:absolute;left:50%;top:50%; width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%; background:rgba(255,255,255,.92);box-shadow:0 8px 28px rgba(12,20,45,.28); transition:transform .2s,background .2s;z-index:2} .about-intro-photo:hover::after{transform:scale(1.08);background:#fff} .about-intro-photo .play-tri{position:absolute;left:50%;top:50%;z-index:3; width:0;height:0;margin:-11px 0 0 -7px;border-style:solid; border-width:11px 0 11px 18px;border-color:transparent transparent transparent #3f6fdd; pointer-events:none;transition:transform .2s} .about-intro-photo:hover .play-tri{transform:scale(1.08)} .video-modal .video-box{position:relative;width:min(1080px,94vw);background:#0d1526; border-radius:10px;padding:0;overflow:hidden;transform:scale(.96); transition:transform .24s ease;box-shadow:0 24px 70px rgba(6,12,28,.5)} .video-modal.show .video-box{transform:none} .video-modal video{width:100%;aspect-ratio:16/9;display:block;background:#0d1526} .video-modal .qr-close{z-index:2} /* ============================================================ 应用案例页：分类筛选 + 案例卡片 （筛选按钮复用产品页的 .pf-pill 样式） ============================================================ */ .case-empty{margin:8px 0 40px;padding:56px 24px;text-align:center; font-size:14.5px;color:var(--muted);background:var(--surface); border:1px dashed var(--line-strong);border-radius:10px} #caseList.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;margin:0 0 48px} #caseList:empty{display:none} @media(max-width:1000px){#caseList.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){#caseList.case-grid{grid-template-columns:1fr}} /* ============================================================ 营销活动页：两张通栏大卡（照设计稿） 橙粉渐变 = 算量大赛；蓝色斜纹 = 实训营 ============================================================ */ .camp-banners{display:flex;flex-direction:column;gap:28px} .camp-banner{position:relative;display:block;overflow:hidden; border-radius:16px;padding:clamp(40px,7vh,76px) 32px; text-align:center;text-decoration:none; transition:transform .25s ease,box-shadow .25s ease} .camp-banner:hover{transform:translateY(-3px);box-shadow:0 20px 54px -26px rgba(18,23,43,.4)} /* ---------- 橙粉：算量大赛 ---------- */ .camp-banner--orange{ background: radial-gradient(130% 160% at 94% 112%, #ff9a6b 0%, rgba(255,154,107,0) 56%), radial-gradient(80% 110% at 4% 6%, #ffe9da 0%, rgba(255,233,218,0) 62%), linear-gradient(112deg, #ffe9da 0%, #ffd0b0 48%, #ffb08a 100%);} .camp-banner--orange .camp-banner-title{color:#7c1e0e} .camp-banner--orange .camp-banner-desc{color:#b04a29} .camp-banner--orange .camp-banner-tags span,.camp-banner--orange .camp-banner-tags a{background:#EE4D2C;color:#fff;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease} /* ---------- 蓝：实训营 ---------- */ .camp-banner--blue{ background: repeating-linear-gradient(114deg, rgba(255,255,255,.10) 0 22px, rgba(255,255,255,0) 22px 78px), radial-gradient(130% 150% at 92% 112%, #17b6f2 0%, rgba(23,182,242,0) 58%), linear-gradient(112deg, #1f63e8 0%, #2b8cf0 54%, #1fa9ef 100%);} .camp-banner--blue .camp-banner-title{color:#fff} .camp-banner--blue .camp-banner-desc{color:rgba(255,255,255,.9)} .camp-banner--blue .camp-banner-tags span,.camp-banner--blue .camp-banner-tags a{background:rgba(255,255,255,.92);color:#2b6be0} /* ---------- 文字 ---------- */ .camp-banner-inner{position:relative;z-index:1;max-width:1000px;margin:0 auto} .camp-banner-title{font-size:clamp(26px,3.6vw,46px);font-weight:800;font-style:italic; letter-spacing:.01em;line-height:1.25;margin:0 0 18px} .camp-banner-desc{font-size:clamp(13px,1.15vw,16px);line-height:1.7;margin:0 0 24px} .camp-banner-tags{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0} .camp-banner-tags span,.camp-banner-tags a{display:inline-block;font-size:12.5px;font-weight:600;padding:7px 18px;border-radius:999px; letter-spacing:.02em} /* ---------- 装饰：星点 ---------- */ .camp-deco{position:absolute;inset:0;pointer-events:none;z-index:0} .camp-banner--orange .camp-deco{ background: radial-gradient(circle at 9% 24%, rgba(255,255,255,.95) 0 3px, rgba(255,255,255,0) 4px), radial-gradient(circle at 13% 74%, rgba(255,255,255,.9) 0 2px, rgba(255,255,255,0) 3px), radial-gradient(circle at 5% 52%, rgba(255,255,255,.7) 0 5px, rgba(255,255,255,0) 7px), radial-gradient(circle at 88% 20%, rgba(255,255,255,.75) 0 3px, rgba(255,255,255,0) 4px), radial-gradient(circle at 78% 84%, rgba(255,255,255,.6) 0 4px, rgba(255,255,255,0) 6px);} .camp-banner--blue .camp-deco{ background: radial-gradient(circle at 14% 22%, rgba(255,255,255,.5) 0 3px, rgba(255,255,255,0) 4px), radial-gradient(circle at 86% 76%, rgba(255,255,255,.45) 0 4px, rgba(255,255,255,0) 5px);} @media(max-width:700px){ .camp-banner{padding:34px 20px;border-radius:12px} .camp-banner-title{margin-bottom:12px} .camp-banner-desc{margin-bottom:18px} } /* ============================================================ 资质荣誉卡片（照设计稿）：浅灰底卡 + 证书 + 金色麦穗 + 名称 ============================================================ */ .honor-track .honor-card{position:relative;flex:0 0 calc((100% - 60px) / 4); display:flex;flex-direction:column;align-items:center;gap:14px; text-decoration:none;padding:0} .honor-cert{position:relative;display:block;width:100%; background:linear-gradient(180deg,#f4f5f8 0%,#eef0f5 100%); border-radius:10px;padding:16px 16px 26px;box-sizing:border-box} .honor-track .honor-card .honor-img{width:100%;display:block;border-radius:3px; box-shadow:0 4px 14px -6px rgba(18,23,43,.22)} .honor-track .honor-card b{font-size:14px;font-weight:600;color:var(--ink); line-height:1.55;text-align:center} .honor-track .honor-card .honor-kind{font-size:12px;color:var(--accent); background:rgba(59,111,224,.08);border-radius:999px;padding:3px 12px} @media(max-width:1000px){.honor-track .honor-card{flex:0 0 calc((100% - 40px) / 3)}} @media(max-width:640px){.honor-track .honor-card{flex:0 0 calc((100% - 20px) / 2)}} /* ============================================================ 企业文化：深色桥梁通栏（照设计稿） 桥梁照片 + 深蓝蒙版，白字居中 ============================================================ */ /* ============================================================ 企业文化：直接用一张整图（内容都在图里） ============================================================ */ .about-sec--culture{padding:0;margin:36px 0 0;border-top:0;overflow:hidden;border-radius:0} .culture-panel{display:block;width:100%;height:auto;margin:0} .honor-track .honor-card:hover img{transform:translate(-50%,50%)} .honor-track .honor-card:hover .honor-img{transform:none} /* ============================================================ 思源黑体（Source Han Sans SC，OFL 开源可商用）—— 已按站内字符集做子集，只用在营销活动页 ============================================================ */ @font-face{font-family:"Hei";src:url("../fonts/font-hei-regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Hei";src:url("../fonts/font-hei-bold.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} body[data-page="campaigns"]{ font-family:'Hei','Source Han Sans SC','PingFang SC','Microsoft YaHei',ui-sans-serif,sans-serif} /* 页面里定死了字体的元素也跟着换 */ body[data-page="campaigns"] .section-title, body[data-page="campaigns"] .section-meta, body[data-page="campaigns"] .page-lead, body[data-page="campaigns"] .camp-banner-title, body[data-page="campaigns"] .camp-banner-desc, body[data-page="campaigns"] .camp-banner-tags span,body[data-page="campaigns"] .camp-banner-tags a{font-family:inherit} /* 那句话：放在标题下方、居中 */ body[data-page="campaigns"] .page-intro > .page-lead{ text-align:center;max-width:900px;margin:0 auto 44px; font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.8;color:var(--muted)} /* ============================================================ 关于梦诚 · 企业简介字体规格（思源黑体） 大标题 28px 粗体；正文 14px 常规 ============================================================ */ body[data-page="about"] .about-subtitle{ font-family:'Hei','Source Han Sans SC','PingFang SC','Microsoft YaHei',sans-serif; font-size:28px;font-weight:700} body[data-page="about"] .about-intro-text, body[data-page="about"] .about-intro-text p{ font-family:'Hei','Source Han Sans SC','PingFang SC','Microsoft YaHei',sans-serif; font-size:14px;font-weight:400;line-height:2} body[data-page="about"] .about-intro-text p:first-child{ font-size:14px;font-weight:400;color:var(--muted)} /* 首行缩进两个字 */ body[data-page="about"] .about-intro-text p{text-indent:2em} /* 资质荣誉：文字也用思源黑体（名称 14px 常规，类型 12px） */ body[data-page="about"] .honor-track .honor-card b{ font-family:'Hei','Source Han Sans SC','PingFang SC','Microsoft YaHei',sans-serif; font-size:14px;font-weight:400} body[data-page="about"] .honor-track .honor-card .honor-kind{ font-family:'Hei','Source Han Sans SC','PingFang SC','Microsoft YaHei',sans-serif; font-size:12px;font-weight:400} /* 蓝色偏移外框已按用户要求去掉 */ .about-intro-photo::before{display:none} /* 产品页副标题：整句一行，不折行 */ body[data-page="products"] .section-head.head-inline .section-meta{ white-space:nowrap;font-size:13px;letter-spacing:0;color:var(--muted)} @media(max-width:1100px){ body[data-page="products"] .section-head.head-inline{flex-wrap:wrap;gap:8px} body[data-page="products"] .section-head.head-inline .section-meta{ white-space:normal;margin-left:0;font-size:12.5px} } /* ============================================================ 全站自适应增强层（2026-10-08） —— 放在样式表最后，保证覆盖前面的规则 覆盖：超宽屏 / 桌面 / 平板横竖 / 手机 / 小手机 五档 ============================================================ */ /* ---------- 0. 安全网：杜绝横向滚动条 ---------- */ html,body{overflow-x:hidden} img,video{max-width:100%} /* ---------- 1. 卡片网格：窄屏不再溢出 ---------- 原来写死 minmax(300px/360px,1fr)，容器比它还窄时就会撑破屏幕。 用 min(360px,100%) 让"最小值"永远不超过容器宽度。 */ .case-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .product-group .case-grid{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))} .stats{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))} /* ---------- 2. 超宽屏（≥1600）：内容适度放宽，两端不留大片空白 ---------- */ @media(min-width:1600px){ .section,.container,.hero-content,.hero-foot{max-width:1400px} } /* ---------- 3. 小笔记本 / 平板横屏（≤1100） ---------- */ @media(max-width:1100px){ .section{padding:72px 26px} .container{padding:0 26px} .hero-content,.hero-foot{padding:0 26px} } /* ---------- 4. 平板竖屏（≤860） ---------- */ @media(max-width:860px){ .section{padding:58px 22px} /* 简介两栏在平板以下太挤 → 改单栏 */ .about-intro-text{columns:1} .about-intro-wrap{grid-template-columns:1fr;gap:32px} .about-intro-photo{max-width:560px;margin:0 auto} .container,.hero-content,.hero-foot{padding:0 22px} body[data-page="about"] .about-subtitle{font-size:24px} .hero-media{aspect-ratio:16/9;max-height:calc(100vh - var(--nav-h) - 92px)} .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} } /* ---------- 5. 手机（≤640） ---------- */ @media(max-width:640px){ .section{padding:44px 16px} .container,.hero-content,.hero-foot{padding:0 16px} body[data-page="about"] .about-subtitle{font-size:21px} /* 手机上关掉首屏图片平移，避免放大后边缘被裁 */ .hero-slide.active .hero-media img{animation:none;transform:none} .hero-media{aspect-ratio:16/9;max-height:calc(100vh - var(--nav-h) - 92px)} .hero-foot{margin-top:16px} /* 营销活动大卡 */ .camp-banner{padding:28px 18px;border-radius:12px} .camp-banner-title{font-size:21px;margin-bottom:12px} .camp-banner-desc{font-size:12.5px;line-height:1.65;margin-bottom:16px} /* 资质荣誉：一屏两张 */ .honor-track .honor-card{flex:0 0 calc((100% - 16px) / 2)} .honor-track{gap:16px} /* 筛选按钮收敛 */ .product-filter{gap:8px;margin-bottom:28px} .pf-pill{font-size:12.5px;padding:8px 11px} .product-group{margin-bottom:38px} } /* ---------- 6. 小手机（≤400） ---------- */ @media(max-width:400px){ .section{padding:38px 13px} .container,.hero-content,.hero-foot{padding:0 13px} body[data-page="about"] .about-subtitle{font-size:19px} .camp-banner-title{font-size:19px} .camp-banner-tags span,.camp-banner-tags a{font-size:11.5px;padding:6px 13px} .honor-track .honor-card{flex:0 0 82%} .stats{grid-template-columns:1fr} } /* 产品页横幅：搜索框下面的副标题（字号字体与新闻页 .banner-sub 一致，只调间距与对齐） */ .page-banner--products .banner-sub--products{ margin:14px 0 0; text-align:center; /* 与搜索框居中对齐 */ color:rgba(255,255,255,.9); } @media(max-width:700px){ .page-banner--products .banner-sub--products{font-size:13px;line-height:1.7} } /* 产品页：标题「产品」已去掉，列表直接接在横幅下面；这里只补一点上间距，避免贴太紧。 （不动 .section-head 的公共样式 —— 关于页还在用） */ /* ★ 去掉标题后要让内容"上提"，所以这里不能加内边距（加过 36px 反而往下推了）。 列表与横幅之间保留 52px 的自然间距即可。 */ .section.page-intro--products{padding-top:0} /* ============ 产品详情页 · 软件体验（按钮 + 二维码并排）============ */ .pd-demo{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .pd-demo-left{display:flex;flex-direction:column;gap:10px;min-width:0} .pd-demo-qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px} .pd-demo-qr img{width:120px;height:120px;object-fit:contain;border:1px solid var(--line); border-radius:8px;background:#fff;padding:6px;display:block} .pd-demo-qr figcaption{font-size:12.5px;color:var(--muted);letter-spacing:.02em} @media(max-width:700px){ .pd-demo{gap:18px} .pd-demo-qr img{width:96px;height:96px} } /* ============ 企业文化：背景图 + 叠加文字 ============ ★ 对齐基准 = 图里已印好的「梦诚科技」LOGO： LOGO 外接框 x 178~405 / y 60~95（原图 1920×850） → 左 9.3%、下 11.2% 所以文字：left 9.3%（与 LOGO 左对齐）、top 13.6%（紧贴 LOGO 下方） 字号用 cqw（容器宽度百分比）——随图等比缩放。无边框、无底色。 */ .culture-wrap{position:relative;container-type:inline-size;display:block} .culture-list{ position:absolute;left:9.3%;top:17.2%;width:24%; margin:0;padding:0;list-style:none; font-size:clamp(6px,0.54vw,9px);line-height:1.28;color:#4363B6; white-space:nowrap; /* ★ 不折行 */ max-height:62%; } .culture-list li{margin:0 0 .63em} .culture-list li:last-child{margin-bottom:0} .culture-list b{display:block;font-weight:700;color:#4363B6;font-size:1.45em;letter-spacing:.01em;margin-bottom:.08em;white-space:nowrap} .culture-list span{display:block;font-weight:400;color:#4363B6;font-size:1em;line-height:1.3;white-space:nowrap} @media(max-width:860px){ /* 手机上字太小，改成图下方正常排版 */ .culture-list{position:static;width:auto;font-size:14px;margin-top:18px;color:var(--ink)} .culture-list li{margin-bottom:14px} .culture-list b{display:block;font-weight:700;color:#4363B6;font-size:1.45em;letter-spacing:.01em;margin-bottom:.08em;white-space:normal} .culture-list span{display:block;font-weight:400;color:#4363B6;font-size:1em;line-height:1.3;white-space:normal} } .camp-banner-tags a:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(0,0,0,.35)} /* ============ 历届算量大赛介绍：文章区美化 ============ */ .hd-hero .section-title{ font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.01em; color:var(--accent); /* 大标题：品牌色 + 更大更粗 */ } .hd-hero .section-title::after{ content:"";display:block;width:52px;height:4px;border-radius:2px; background:var(--accent);opacity:.9;margin:16px 0 0; } .hd-article{ max-width:940px;margin:0 auto; background:#f5f8fd; /* 文章卡片背景（浅色，克制） */ border:1px solid #e6edf8; border-radius:18px; padding:clamp(26px,4vw,52px) clamp(20px,4.4vw,60px); } .hd-article .hd-h{ /* 小标题：品牌色 + 左侧竖条 */ font-size:clamp(16px,1.5vw,19px);font-weight:700;color:var(--ink); margin:34px 0 14px;padding-left:13px; border-left:4px solid var(--accent);line-height:1.5; } .hd-article .hd-h:first-child{margin-top:0} .hd-article .hd-p{ /* 正文：首行缩进 2 字 */ font-size:15.5px;line-height:2.05;color:var(--ink);opacity:.88; text-indent:2em;margin:0 0 15px;letter-spacing:.005em; } .hd-article .hd-p:last-child{margin-bottom:0} /* 实训营：文章末尾直接展示联系方式（不跳转） */ .hd-contact{max-width:940px;margin:34px auto 0;display:flex;flex-wrap:wrap;gap:12px 34px;align-items:baseline} .hd-contact-item{display:inline-flex;align-items:baseline;gap:9px;color:var(--ink);text-decoration:none} .hd-contact-label{font-size:13.5px;color:var(--muted)} .hd-contact-val{font-size:clamp(15px,1.45vw,17.5px);font-weight:700;letter-spacing:.01em} .hd-contact-item:hover .hd-contact-val{color:var(--accent)} @media(max-width:860px){ .hd-contact{margin-top:24px;gap:8px 20px} .hd-contact-val{font-size:15px} } @media(max-width:860px){ .hd-article{padding:22px 18px;border-radius:14px} .hd-article .hd-p{font-size:14.5px;line-height:1.95;margin-bottom:13px} .hd-article .hd-h{font-size:16px;margin:26px 0 12px} } /* ★ 用更高优先级覆盖 .section-title 的默认 26px */ body[data-page="campaigns"] .hd-hero .section-title{ font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.012em;color:var(--accent); } /* 历届大赛页底部按钮 */ #hdCta{ display:inline-block;background:var(--accent);color:#fff; padding:14px 34px;border-radius:999px;font-size:15px;font-weight:700; text-decoration:none;transition:transform .18s ease,box-shadow .18s ease; box-shadow:0 10px 26px -12px rgba(59,111,224,.75); } #hdCta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(59,111,224,.85)} /* ★ 历届大赛页：字体统一思源黑体 + 导语加粗加黑 + 收紧与正文的间距 */ .hd-hero, .hd-hero *, .hd-article, .hd-article *{ font-family:"Hei","Source Han Sans SC","PingFang SC","Microsoft YaHei",ui-sans-serif,sans-serif; } .hd-hero .page-lead{ /* 「赛事自 2024 年创办…」：加粗加黑 */ font-size:16.5px;font-weight:700;color:var(--ink);opacity:1;line-height:1.9;margin:0; } .hd-hero .section-meta{font-weight:600;color:var(--ink);opacity:.7} /* 原来导语和文章卡片之间约 156px，按「缩小 2/3」收到约 52px */ .hd-hero{padding-bottom:0;margin-bottom:0} .hd-hero + .section{padding-top:52px} /* ★ 用「同优先级 + 更靠后」覆盖 body[data-page=campaigns] .page-intro > .page-lead 的灰色 */ body[data-page="campaigns"] .hd-hero .page-lead{ color:var(--ink);opacity:1;font-weight:700;font-size:16.5px; } body[data-page="campaigns"] .hd-hero .section-meta{color:var(--ink);opacity:.72;font-weight:600} /* 间距：导语到卡片总共收到 ~52px */ body[data-page="campaigns"] .hd-hero + .section{padding-top:10px} /* ============ 历届大赛页：图片轮播（文章上方） ============ */ .hd-carousel-sec{padding-top:0;padding-bottom:34px} .hd-carousel{position:relative;border-radius:18px;overflow:hidden;background:#eef3fb} .hd-slide{display:none} .hd-slide.active{display:block;animation:hdFade .45s ease} @keyframes hdFade{from{opacity:0}to{opacity:1}} .hd-slide img{width:100%;aspect-ratio:4/1;object-fit:contain;display:block;background:#eef3fb} /* ★ contain：完整显示图片，宁可留边也不裁切 */ .hd-arrow{ position:absolute;top:50%;transform:translateY(-50%); width:44px;height:44px;border-radius:50%;border:0; background:rgba(18,23,43,.42);color:#fff;font-size:24px;line-height:1; cursor:pointer;display:none;align-items:center;justify-content:center; transition:background .2s ease; } .has-nav .hd-arrow{display:flex} .hd-arrow:hover{background:rgba(18,23,43,.68)} .hd-arrow--prev{left:16px} .hd-arrow--next{right:16px} .hd-dots{ position:absolute;left:0;right:0;bottom:14px; display:flex;gap:8px;justify-content:center; } .has-nav .hd-dots{display:flex} .hd-dots:not(.has-nav){display:none} .hd-dot{ width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer; background:rgba(255,255,255,.55);transition:all .2s ease; } .hd-dot.active{background:#fff;width:22px;border-radius:4px} @media(max-width:860px){ .hd-slide img{aspect-ratio:16/9} .hd-arrow{width:36px;height:36px;font-size:20px} } /* ★ 再收紧：标题色条上边距、标题行高、副标题上边距 */ body[data-page='campaigns'] .hd-hero .section-title{line-height:1.16;margin-bottom:0} body[data-page='campaigns'] .hd-hero .section-title::after{margin:6px auto 0;width:36px;height:3px} body[data-page='campaigns'] .hd-hero .section-meta{margin:5px 0 0} body[data-page='campaigns'] .hd-hero .section-head{margin-bottom:12px} body[data-page='campaigns'] .hd-hero .page-lead{margin-top:0} /* ★ 用户要求：去掉标题下方的蓝色横线 */ body[data-page='campaigns'] .hd-hero .section-title::after{display:none} /* ★ 轮播改用站点首页 hero 那套（绝对定位叠加 + 透明度切换），最稳 */ .hd-carousel{position:relative} .hd-track{position:relative;width:100%} .hd-slide{position:absolute;top:0;left:0;width:100%;opacity:0;pointer-events:none;transition:opacity .45s ease} .hd-slide.active{position:relative;opacity:1;pointer-events:auto} /* 兜底：即使别的规则干扰，也保证只显示一张 */ .hd-slide:not(.active){display:none !important} /* ★ 立即报名按钮：与文章卡片（文字背景框）对齐 —— 同宽同左边缘 */ body[data-page='campaigns'] .hd-article + .comp-block{ max-width:940px;margin:26px auto 0; } body[data-page='campaigns'] .hd-article + .comp-block #hdCta{margin-left:0} @media(max-width:860px){ body[data-page='campaigns'] .hd-article + .comp-block{margin-top:20px} } /* ★ 轮播框内的图片说明（原导语） + 正文上方的文章标题 */ .hd-carousel{padding-bottom:0} .hd-caption{ margin:0;padding:13px 20px 16px;text-align:center; font-family:"Hei","Source Han Sans SC","PingFang SC","Microsoft YaHei",ui-sans-serif,sans-serif; font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:.005em; } .hd-article-title{ max-width:940px;margin:40px auto 16px; font-family:"Hei","Source Han Sans SC","PingFang SC","Microsoft YaHei",ui-sans-serif,sans-serif; font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:.005em; } @media(max-width:860px){ .hd-caption{padding:11px 16px 14px;font-size:15px} .hd-article-title{margin:28px auto 12px;font-size:15px} } /* ★ 图片说明在图片上方；说明距框顶 = 图片距框底（上下留白一致） */ .hd-carousel{padding:16px 0 0} /* 上留白 16px，与图片下留白一致 */ .hd-track{padding-bottom:16px} .hd-caption{ margin:0;padding:0 20px 12px;text-align:center; font-family:'Hei','Source Han Sans SC','PingFang SC','Microsoft YaHei',ui-sans-serif,sans-serif; font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:.005em; } @media(max-width:860px){ .hd-track{padding-bottom:12px} .hd-caption{padding:12px 16px 9px;font-size:15px} } /* ★ 文章标题在卡片内、居中 */ .hd-article .hd-article-title{ margin:0 0 24px;text-align:center; font-family:'Hei','Source Han Sans SC','PingFang SC','Microsoft YaHei',ui-sans-serif,sans-serif; font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:.005em; } @media(max-width:860px){ .hd-article .hd-article-title{margin-bottom:18px;font-size:15px} } /* ★ 实训营：课程表区域（轮播下方单独一块） */ .hd-schedule-sec{padding-top:0;padding-bottom:8px} .hd-schedule{ max-width:940px;margin:0 auto;background:#f5f8fd;border:1px solid #e6edf8; border-radius:18px;padding:22px 22px 24px; } .hd-schedule-title{ margin:0 0 16px;text-align:center; font-family:'Hei','Source Han Sans SC','PingFang SC','Microsoft YaHei',ui-sans-serif,sans-serif; font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:.005em; } .hd-schedule img{width:100%;height:auto;display:block;border-radius:10px} @media(max-width:860px){ .hd-schedule{padding:16px 14px 18px;border-radius:14px} .hd-schedule-title{font-size:15px;margin-bottom:12px} }