/* ========================================================================== 严川物联网（四川）有限公司 — 官网设计系统 品牌色取自 logo VI：主蓝 #1E489D / 辅红 #E7161A ========================================================================== */ /* ---------- Design Tokens ---------- */ :root { /* 品牌色 */ --brand: #1E489D; --brand-700: #14346F; --brand-800: #0F2A5C; --brand-900: #0B1F45; --brand-600: #2A5AB8; --brand-300: #7C9BD8; --brand-100: #DCE6F7; --brand-050: #F0F5FD; /* 辅助色 */ --accent: #E7161A; --accent-600: #C41115; --accent-050: #FEF0F0; --cyan: #4FC3F7; --cyan-050: #ECF8FE; /* 中性色 */ --ink: #0E1726; --ink-2: #2C3A4F; --body: #55617A; --muted: #8A94A6; --line: #E4E9F2; --line-2: #EFF3F9; --bg: #FFFFFF; --bg-soft: #F5F8FC; --bg-mist: #FAFCFE; /* 排版：全站统一 Noto Sans SC，字体文件本地自托管（见 assets/css/fonts.css， 按 unicode-range 分成 101 片，浏览器只取页面实际用到的片）。 后面挂的系统字体只在 webfont 下载完之前（font-display: swap 的过渡帧）、 或字体请求被拦掉时兜底，不参与最终呈现。 */ --font-sans: "Noto Sans SC", "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* 数字字体栈：原先刻意只放拉丁字体（DIN Alternate / Bahnschrift），让数字与中文 字形拉开层次；按需求已统一为 Noto Sans SC。 变量保留成独立一项，将来若要单独回退数字字体，只改这里即可。 */ --font-num: "Noto Sans SC", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* 容器 */ --container: 1240px; --gutter: 24px; /* 圆角 */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* 阴影 */ --sh-xs: 0 1px 2px rgba(14, 23, 38, .05); --sh-sm: 0 2px 8px rgba(14, 23, 38, .06); --sh-md: 0 10px 30px -12px rgba(14, 23, 38, .16); --sh-lg: 0 24px 60px -24px rgba(11, 31, 69, .28); --sh-brand: 0 12px 28px -12px rgba(30, 72, 157, .5); --ease: cubic-bezier(.22, .61, .36, 1); --header-h: 72px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* ⚠ 全站唯一一条 !important，必须留着。 UA 样式表里的 [hidden]{display:none} 特异性是 (0,1,0)，和 .news-card / .case-card 这类组件选择器同级，但作者样式永远赢 —— 于是任何自带 display:flex/grid 的组件 加上 hidden 属性都不会消失。分页（main.js 用 el.hidden 折页）就踩过这个坑： 页码算得对、点了也有反馈，条目却一条不藏，看起来就是"点了没反应"。 归一化写法（normalize.css 同款）一次兜住，不必逐个组件补 [hidden] 规则。 */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } /* 减弱动效模式下不依赖 transition 完成，直接呈现最终状态（含延迟项） */ .reveal, .reveal[data-d] { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0s !important; } /* 落点高亮同理：不做扩散动画，改用一圈静止描边，JS 到点后自己摘掉 */ .is-hit { animation: none !important; box-shadow: 0 0 0 3px rgba(30, 72, 157, .38); } } body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.75; color: var(--body); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* 锚点落点统一避让 sticky 头部。 导航/页脚里大量链接写成 "products.html#device" 这种带文件名的形式，浏览器按原生 跳转处理、不经过 JS，所以避让只能靠在 CSS 上兜住：否则滚到位后区块标题正好被 72px 的 sticky 头部压住，看起来就像"点了没跳转"。同一逻辑只在这里定义一次， JS 里的页内锚点也改用它（scrollIntoView 会读取 scroll-margin）。 */ [id] { scroll-margin-top: calc(var(--header-h) + 18px); } /* 锚点占位元素：零高度、不占位、无 href 因此不进入焦点序列， 只作为 hash 跳转的落点（放在选项卡行之前，保证标签行留在视野内）。 */ .anchor { display: block; height: 0; } /* 无 JS 兜底： 上的 js 类由 里的内联脚本加上，main.js 是 defer 加载的。 .reveal 的初始态是 opacity:0，只有 JS 跑起来才会补上 is-in —— 一旦脚本被拦截、 加载失败或 CSP 拦掉，整页正文会永久停在"空白"状态，这是最坏的一种失效方式。 所以：没有 js 类 = JS 根本没接管，直接呈现终态，不留白。 （同理 .drawer__sub，缺了这一条二级菜单会永远展不开。） */ html:not(.js) .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html:not(.js) .drawer__sub { display: grid; } h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.28; letter-spacing: -.01em; } h1 { font-size: clamp(30px, 4vw, 52px); line-height: 1.18; letter-spacing: -.02em; } h2 { font-size: clamp(24px, 2.6vw, 36px); } h3 { font-size: 19px; } h4 { font-size: 16px; } p { margin: 0; } a { color: inherit; text-decoration: none; transition: color .22s var(--ease); } img { max-width: 100%; height: auto; display: block; } /* 只给了 height 的图片，宽度会回落到 HTML 的 width 属性（logo 是 973px）→ 宽高比被拉坏。 凡是写死 height 的地方，一律显式补 width: auto。 */ ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* 图标基类：形状由文件末尾「图标系统」里的 .ic-- 遮罩提供， 颜色跟随 color（等效于原先 symbol 内的 stroke="currentColor"）。 页面里因此不再内联 精灵。 */ .ic { display: block; width: var(--ic-sz, 20px); height: var(--ic-sz, 20px); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'/%3E"); background-color: currentColor; -webkit-mask-image: var(--ic); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: var(--ic); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } ::selection { background: var(--brand); color: #fff; } :focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; border-radius: 4px; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: 96px 0; } .section--tight { padding: 64px 0; } .section--soft { background: var(--bg-soft); } .section--mist { background: var(--bg-mist); } .section--dark { background: linear-gradient(150deg, var(--brand-900) 0%, #0D2550 55%, #123468 100%); color: rgba(255, 255, 255, .72); position: relative; overflow: hidden; } .section--dark::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%); pointer-events: none; } .section--dark > * { position: relative; z-index: 1; } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .grid { display: grid; gap: 24px; } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .g-5 { grid-template-columns: repeat(5, 1fr); } /* ---------- 区块标题 ---------- */ .sec-head { max-width: 760px; margin-bottom: 48px; } .sec-head--center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--brand)); } .sec-head--center .eyebrow::after { content: ""; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--accent)); } .section--dark .eyebrow { color: var(--cyan); } .sec-head h2 { margin-bottom: 16px; } .sec-head p { font-size: 16px; color: var(--body); } .section--dark .sec-head p { color: rgba(255,255,255,.68); } .sec-head--center p { margin: 0 auto; } /* ---------- 顶栏 ---------- */ .topbar { background: var(--brand-900); color: rgba(255, 255, 255, .68); font-size: 13px; line-height: 38px; } .topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .topbar__l { display: flex; align-items: center; gap: 8px; } .topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(231,22,26,.22); } .topbar__r { display: flex; align-items: center; gap: 22px; } .topbar__r > * { flex: none; } .topbar__r a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.68); } /* 顶栏是一行信息条，任何子项都禁止折行（否则 421–455px 会整条塌成两行） */ .topbar__in, .topbar__r, .topbar__r a, .topbar__r > span { white-space: nowrap; } .topbar__r a:hover { color: #fff; } .topbar__r .ic { width: 14px; height: 14px; opacity: .8; } .topbar__r .sep { width: 1px; height: 13px; background: rgba(255,255,255,.18); } /* ---------- 头部导航 ---------- */ .header { position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -14px rgba(11, 31, 69, .24); background: rgba(255,255,255,.96); } .header__in { display: flex; align-items: center; gap: 24px; height: var(--header-h); } .header .container { max-width: 1320px; } .logo { flex: none; display: flex; align-items: center; } .logo img { height: 42px; width: auto; } .nav { margin-left: auto; display: flex; align-items: center; gap: 2px; } /* 定位祖先刻意"让"给 .header：.nav__item 一旦不是定位元素，.drop 的 left:0/right:0 就会相对 .header（sticky、宽度等于视口）解析，二级面板 因此能做到整幅通栏；面板内容再用一个 .container 对齐到与 logo 同一条竖线。 代价是 .nav__item 不再是定位祖先，激活下划线要挂到 .nav__link 上（见下）。 */ .nav__item { position: static; display: flex; align-items: center; } .nav__link { position: relative; display: flex; align-items: center; gap: 5px; padding: 10px 13px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .nav__link .ic { width: 12px; height: 12px; opacity: .5; transition: transform .25s var(--ease); } .nav__link:hover { color: var(--brand); background: var(--brand-050); } /* :focus-within 让键盘和触屏也能打开二级菜单。 原来只有 :hover —— 键盘 Tab 到一级项时下拉始终 hidden，二级入口对键盘用户 等于不存在；触屏则更彻底，根本没有 hover 这个状态。 */ .nav__item:focus-within > .nav__link { color: var(--brand); background: var(--brand-050); } .nav__item.is-active > .nav__link { color: var(--brand); } .nav__item.is-active > .nav__link::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--brand); } .nav__item:hover > .nav__link .ic { transform: rotate(180deg); } /* 二级面板 = 整幅通栏白色横带（原来是一个居中/右对齐的圆角浮层）。 top:100% 让它与 .header 的下沿严丝合缝 —— 中间不能留缝，否则鼠标从导航项 往下移到面板时会经过一段"既不属于导航项、也不属于面板"的区域，:hover 断掉， 面板刚露头就收回去。 */ .drop { position: absolute; top: 100%; left: 0; right: 0; padding: 34px 0 38px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 28px 46px -28px rgba(11, 31, 69, .32); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; } .nav__item:hover .drop, .nav__item:focus-within .drop { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } /* 导航项（40px 高）与头部下沿（72px）之间还有约 16px 的空档，靠面板自身的 透明桥接块接住鼠标：它属于面板、也就属于 .nav__item，:hover 不会中断。 关闭态下 .drop 是 pointer-events:none，桥接块一并失效，不会挡住头部其它元素。 —— 通栏面板已不再需要旧版那种"顺带把菜单往左推"的右对齐规则。 */ .drop::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } .drop__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px 40px; } .drop__col h5 { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; } /* 负的左外边距：文字左缘与分组标题对齐，而悬停色块仍保留 10px 的内边距 */ .drop a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-2); font-weight: 500; } .drop a:hover { background: var(--brand-050); color: var(--brand); } .header__cta { flex: none; } /* 汉堡 */ /* 汉堡：必须 flex-direction: column，否则三根横杠会横着排成两道短横 */ .burger { display: none; flex: none; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; transition: border-color .24s var(--ease), background .24s var(--ease); } .burger:hover { border-color: var(--brand); background: var(--brand-050); } .burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .28s var(--ease); } .burger span + span { margin-top: 5px; } .burger:hover span { background: var(--brand); } body.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .burger span:nth-child(2) { opacity: 0; } body.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: var(--r-full); font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); } .btn .ic { width: 16px; height: 16px; transition: transform .22s var(--ease); } .btn:hover .ic { transform: translateX(3px); } .btn--primary { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); } .btn--primary:hover { background: var(--brand-700); transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(30,72,157,.6); } .btn--ghost { border: 1.5px solid var(--line); color: var(--ink-2); background: #fff; } .btn--ghost:hover { border-color: var(--brand-300); color: var(--brand); transform: translateY(-2px); } .btn--light { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.26); backdrop-filter: blur(8px); } .btn--light:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); transform: translateY(-2px); } .btn--white { background: #fff; color: var(--brand-700); } .btn--white:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0,0,0,.4); } .btn--sm { height: 38px; padding: 0 18px; font-size: 14px; } .btn--lg { height: 52px; padding: 0 30px; font-size: 16px; } .link-more { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--brand); } .link-more .ic { width: 15px; height: 15px; transition: transform .22s var(--ease); } .link-more:hover .ic { transform: translateX(4px); } /* ---------- Hero ---------- */ .hero { position: relative; isolation: isolate; padding: 104px 0 0; background: var(--brand-900); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(96deg, rgba(11,31,69,.97) 0%, rgba(11,31,69,.9) 38%, rgba(11,31,69,.5) 66%, rgba(11,31,69,.55) 100%), url("../images/hero.jpg") center right / cover no-repeat; } .hero__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; } .hero__glow--a { width: 520px; height: 520px; left: -160px; top: -140px; background: rgba(30,72,157,.55); } .hero__glow--b { width: 420px; height: 420px; right: 6%; bottom: -180px; background: rgba(79,195,247,.2); } .hero__glow--c { width: 260px; height: 260px; left: 42%; top: 8%; background: rgba(231,22,26,.13); } .hero__in { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 40px; } .hero__copy { padding-bottom: 88px; max-width: 720px; } .hero__badge { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px 0 12px; margin-bottom: 26px; border-radius: var(--r-full); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; backdrop-filter: blur(8px); } .hero__badge .ic { width: 15px; height: 15px; color: var(--cyan); } .hero h1 { color: #fff; margin-bottom: 22px; font-size: clamp(28px, 3.3vw, 46px); letter-spacing: -.015em; } .hero h1 em { font-style: normal; background: linear-gradient(100deg, #6FD0FA 0%, #A7C6FF 55%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { font-size: 17px; line-height: 1.85; color: rgba(255,255,255,.72); max-width: 560px; margin-bottom: 36px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } /* 原先这里还有 hero 右侧的「实时数据面板」（.hero__aside / .hero__panel / .hp-row 与 .hp-sub），已按需求下线：hero 只保留文案一侧，右侧留给背景图。 .hp-tag 系列保留 —— 解决方案页的运维看板（.dash__row）仍在用。 */ .hp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; background: rgba(79,195,247,.16); color: #9BE0FF; } .hp-tag--warn { background: rgba(231,22,26,.18); color: #FF9A9D; } .hp-tag--ok { background: rgba(46,204,113,.16); color: #8DE7B4; } /* Hero 底部数据条 */ .hero__stats { position: relative; border-top: 1px solid rgba(255,255,255,.12); background: rgba(6,20,46,.55); backdrop-filter: blur(10px); } .hero__stats ul { display: grid; grid-template-columns: repeat(4, 1fr); } .hero__stats li { padding: 26px 20px; text-align: center; border-left: 1px solid rgba(255,255,255,.1); } .hero__stats li:first-child { border-left: 0; } .stat__num { font-family: var(--font-num); font-size: 38px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.02em; display: flex; align-items: baseline; justify-content: center; gap: 2px; } .stat__num i { font-style: normal; font-size: 20px; color: var(--cyan); font-weight: 600; } .stat__lbl { font-size: 13.5px; color: rgba(255,255,255,.58); margin-top: 9px; } /* ---------- 页面 Hero（内页） ---------- */ .phero { position: relative; isolation: isolate; overflow: hidden; padding: 78px 0 74px; background: linear-gradient(140deg, var(--brand-900) 0%, #0E2A57 50%, #17407E 100%); } .phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 90% at 25% 40%, #000 20%, transparent 100%); } .phero::after { content: ""; position: absolute; z-index: -1; right: -140px; top: -140px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(79,195,247,.22), transparent 65%); filter: blur(30px); } .crumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,.5); margin-bottom: 20px; } .crumb a:hover { color: #fff; } .crumb .ic { width: 13px; height: 13px; opacity: .5; } .phero h1 { color: #fff; margin-bottom: 16px; max-width: 900px; } .phero p { color: rgba(255,255,255,.7); font-size: 16.5px; max-width: 720px; } /* ---------- 卡片 ---------- */ .card { position: relative; padding: 32px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); overflow: hidden; } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--brand-100); } .card:hover::before { transform: scaleX(1); } .card h3 { margin-bottom: 10px; } .card p { font-size: 14.5px; } .icon-box { width: 54px; height: 54px; border-radius: 14px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--brand-050), #E3EDFC); color: var(--brand); border: 1px solid var(--brand-100); transition: .3s var(--ease); } .icon-box .ic { width: 26px; height: 26px; } .card:hover .icon-box { background: linear-gradient(140deg, var(--brand), var(--brand-600)); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); } .icon-box--sm { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0; } .icon-box--sm .ic { width: 21px; height: 21px; } .icon-box--accent { background: linear-gradient(140deg, var(--accent-050), #FDDCDC); color: var(--accent); border-color: #FBD0D0; } .card:hover .icon-box--accent { background: linear-gradient(140deg, var(--accent), #B90F13); color: #fff; } /* 功能特性小卡 */ .feat { display: flex; gap: 16px; align-items: flex-start; } .feat__body h4 { margin-bottom: 6px; } .feat__body p { font-size: 14px; } /* ---------- 平台展示（左右分栏） ---------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; } .split--rev .split__media { order: -1; } .split__body h2 { margin-bottom: 18px; } .split__body > p { font-size: 16px; margin-bottom: 28px; } .tick-list { display: grid; gap: 14px; } .tick-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); } .tick-list .ic { flex: none; width: 20px; height: 20px; color: var(--brand); margin-top: 3px; } /* 屏幕/平台可视化（纯 CSS 模拟看板） */ .dash { border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(155deg, #0D2350, #12315F 60%, #1B4079); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--sh-lg); } .dash__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.1); } .dash__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); } .dash__bar i:first-child { background: #FF5F57; } .dash__bar i:nth-child(2) { background: #FEBC2E; } .dash__bar i:nth-child(3) { background: #28C840; } .dash__bar span { margin-left: 10px; font-size: 12.5px; color: rgba(255,255,255,.5); letter-spacing: .04em; } .dash__body { padding: 22px; display: grid; gap: 16px; } .dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .dash__kpi { padding: 14px; border-radius: var(--r-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); } .dash__kpi b { display: block; font-family: var(--font-num); font-size: 22px; color: #fff; line-height: 1.2; } .dash__kpi span { font-size: 11.5px; color: rgba(255,255,255,.5); } .dash__chart { display: flex; align-items: flex-end; gap: 7px; height: 108px; padding: 14px; border-radius: var(--r-md); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); } .dash__chart i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--cyan), rgba(79,195,247,.18)); animation: barGrow 1.1s var(--ease) both; } @keyframes barGrow { from { transform: scaleY(.05); opacity: 0; } } .dash__list { display: grid; gap: 8px; } .dash__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); font-size: 12.5px; color: rgba(255,255,255,.72); } .dash__row b { color: #fff; font-weight: 600; } /* ---------- 业务体系大卡 ---------- */ .biz-card { position: relative; overflow: hidden; padding: 34px 30px; border-radius: var(--r-xl); border: 1px solid var(--line); background: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease); display: flex; flex-direction: column; } .biz-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); } .biz-card__no { position: absolute; right: 22px; top: 16px; font-family: var(--font-num); font-size: 60px; font-weight: 700; color: var(--brand-050); line-height: 1; letter-spacing: -.03em; transition: color .3s var(--ease); } .biz-card:hover .biz-card__no { color: var(--brand-100); } .biz-card h3 { font-size: 21px; margin-bottom: 12px; } .biz-card p { font-size: 14.5px; margin-bottom: 20px; } .biz-card ul { display: grid; gap: 8px; margin-top: auto; padding-top: 20px; border-top: 1px dashed var(--line); } .biz-card ul li { font-size: 13.5px; color: var(--body); display: flex; gap: 9px; align-items: center; } .biz-card ul li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-300); flex: none; } /* ---------- 横向翻页轨道（首页「业务体系」） ---------- */ /* 轨道自身用原生横向滚动 + scroll-snap：没有 JS 时也能拖/滚着看完 9 条， 有 JS 时下方控制条再把它变成"一组一组翻"。 */ .slider { position: relative; } .slider__view { position: relative; } .slider__track { display: flex; gap: 24px; overflow-x: auto; /* overflow-x 一设成非 visible，overflow-y 的计算值也会变成 auto， 所以纵向必须留白，否则卡片 hover 时上浮的 8px 和投影会被裁掉一条边。 */ padding: 12px 0 22px; scroll-snap-type: x mandatory; scrollbar-width: thin; } .slider__track::-webkit-scrollbar { height: 6px; } .slider__track::-webkit-scrollbar-track { background: var(--line-2); border-radius: 3px; } .slider__track::-webkit-scrollbar-thumb { background: var(--brand-100); border-radius: 3px; } .slider__track::-webkit-scrollbar-thumb:hover { background: var(--brand-300); } .slider__track:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; border-radius: var(--r-lg); } /* 有 JS 时（js-live 已报到）下方就有一条真正的翻页控制条，轨道自带的滚动条 是同一件事的第二遍表达 —— 而且它 6px 高、横贯整个内容宽，视觉上像一条多余的 灰线。这里显式藏掉滚动条本身，但**不关掉 overflow-x**：滚轮 / 触控板 / 拖拽 依旧能滚，键盘左右键也照旧，只是不再画那条槽。 无 JS 时不生效 —— 那种情况下控制条整体是 hidden 的，滚动条是用户唯一能 看完后面 6 张卡的线索，必须留着。 */ html.js-live .slider__track { scrollbar-width: none; -ms-overflow-style: none; } html.js-live .slider__track::-webkit-scrollbar { height: 0; display: none; } /* 一屏 3 张：2 × 24px 的间隙从总宽里扣掉，剩下的三等分 */ .slider__track > * { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; } .slider__ctrl { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 2px; } /* 显式写这一条：上面的 display:flex 特异性高于 UA 的 [hidden]{display:none}， 不写就会让"无 JS 时整体隐藏"失效，页面上留下两个按不动的箭头。 */ .slider__ctrl[hidden] { display: none; } .slider__cap { font-size: 14px; font-weight: 600; color: var(--brand); letter-spacing: .02em; } .slider__nav { display: flex; align-items: center; gap: 14px; } .slider__btn { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2); transition: border-color .24s var(--ease), color .24s var(--ease), background .24s var(--ease); } .slider__btn .ic { width: 18px; height: 18px; } .slider__btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-050); } .slider__btn:disabled { opacity: .32; cursor: default; } /* 图标库只有 chevron-right，上一页用同一枚图标转 180° —— 不额外加图标 */ .slider__btn--prev .ic { transform: rotate(180deg); } .slider__dots { display: flex; align-items: center; gap: 8px; } .slider__dot { flex: none; width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--brand-100); transition: width .24s var(--ease), border-radius .24s var(--ease), background .24s var(--ease); } .slider__dot:hover { background: var(--brand-300); } .slider__dot[aria-current="true"] { width: 26px; border-radius: 5px; background: var(--brand); } /* ---------- 行业解决方案卡 ---------- */ .ind-card { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .ind-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--brand-100); } .ind-card__img { height: 148px; position: relative; background: linear-gradient(140deg, var(--brand-900), var(--brand-600)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92); } .ind-card__img::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 28px 28px; } .ind-card__img .ic { width: 46px; height: 46px; position: relative; z-index: 1; opacity: .95; } .ind-card__img--b { background: linear-gradient(140deg, #0E2A57, #2A5AB8); } .ind-card__img--c { background: linear-gradient(140deg, #123468, #4A86D8); } .ind-card__img--d { background: linear-gradient(140deg, #0B1F45, #1E489D 70%, #E7161A); } .ind-card__body { padding: 24px; } .ind-card__body h4 { margin-bottom: 8px; font-size: 17px; } .ind-card__body p { font-size: 14px; } .ind-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; } .tag { display: inline-block; padding: 3px 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 500; color: var(--body); background: var(--bg-soft); border: 1px solid var(--line); } .tag--brand { background: var(--brand-050); color: var(--brand); border-color: var(--brand-100); } /* ---------- 选项卡 ---------- */ .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; } .tab { padding: 9px 20px; border-radius: var(--r-full); font-size: 14.5px; font-weight: 600; color: var(--body); background: #fff; border: 1px solid var(--line); transition: .22s var(--ease); } .tab:hover { color: var(--brand); border-color: var(--brand-300); } .tab.is-active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--sh-brand); } .tab-panel { display: none; } .tab-panel.is-active { display: block; animation: fadeUp .45s var(--ease) both; } /* ---------- 列表分页（栏目页列表） ---------- */ /* 条目一次全渲染进 HTML，JS 只按 data-page-size 折页；没有 JS 时全部平铺，不会少内容。 避让量仍取自同一个 --header-h：翻页后 scrollIntoView 会读这里的 scroll-margin-top， 否则列表顶端会被 sticky 头部盖住（与锚点跳转是同一类问题）。 */ [data-page-size] { scroll-margin-top: calc(var(--header-h) + 18px); } .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; } .pager__info { font-size: 13.5px; color: var(--muted); } .pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 600; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .pager__btn:hover:not(:disabled) { color: var(--brand); border-color: var(--brand-300); } .pager__btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--sh-brand); } .pager__btn.is-active:hover { color: #fff; } .pager__btn:disabled { opacity: .42; cursor: not-allowed; } .pager__btn .ic { width: 15px; height: 15px; } .pager__btn--prev .ic { transform: rotate(180deg); } .pager__gap { min-width: 24px; text-align: center; color: var(--muted); } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } } /* ---------- 案例卡 ---------- */ .case-card { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; /* 白底卡片自带文字色：放在深色区块里也不会继承到半透明白 */ color: var(--body); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .case-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); } .case-card__top { height: 170px; padding: 22px 24px; position: relative; overflow: hidden; background: linear-gradient(150deg, #0D2350 0%, #17407E 60%, #2A5AB8 100%); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; } .case-card__top::before { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(79,195,247,.2); filter: blur(28px); } .case-card__top::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(180deg, #000, transparent 85%); } .case-card__top > * { position: relative; z-index: 1; } .case-card__top--b { background: linear-gradient(150deg, #0E2A57 0%, #23529E 60%, #3A6FC4 100%); } .case-card__top--c { background: linear-gradient(150deg, #123468 0%, #2A5AB8 60%, #4A86D8 100%); } .case-card__top--d { background: linear-gradient(150deg, #0B1F45 0%, #1E489D 58%, #9E1A1F 100%); } .case-card__cat { display: inline-block; align-self: flex-start; padding: 3px 11px; border-radius: var(--r-full); margin-bottom: 12px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); } .case-card__top h4 { color: #fff; font-size: 17px; } .case-card__body { padding: 22px 24px; } .case-card__body p { font-size: 14px; } .case-card__meta { display: flex; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); } .case-card__meta div { flex: 1; } .case-card__meta b { display: block; font-family: var(--font-num); font-size: 20px; color: var(--brand); line-height: 1.2; } .case-card__meta span { font-size: 12px; color: var(--muted); } /* ---------- 新闻 ---------- */ .news-card { display: flex; flex-direction: column; height: 100%; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .news-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--brand-100); } .news-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 12.5px; color: var(--muted); } .news-card__meta time { display: inline-flex; align-items: center; gap: 6px; } .news-card__meta .ic { width: 13px; height: 13px; } .news-card h4 { font-size: 16.5px; line-height: 1.55; margin-bottom: 12px; transition: color .22s; } .news-card:hover h4 { color: var(--brand); } .news-card p { font-size: 14px; flex: 1; } .news-card .link-more { margin-top: 20px; font-size: 14px; } .news-card--wide { flex-direction: row; gap: 26px; align-items: stretch; padding: 0; } .news-card--wide .news-card__thumb { flex: none; width: 300px; border-radius: var(--r-lg) 0 0 var(--r-lg); overflow: hidden; background: linear-gradient(150deg, #0D2350, #2A5AB8); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); position: relative; } .news-card--wide .news-card__thumb::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 24px 24px; } .news-card--wide .news-card__thumb .ic { width: 44px; height: 44px; position: relative; z-index: 1; } .news-card--wide .news-card__c { padding: 30px 30px 30px 0; display: flex; flex-direction: column; } /* ---------- 合作伙伴 ---------- */ /* 原先这里还有一套 .marquee 无限横向滚动的样式，但全站 66 个页面里没有一个元素 用过这个类（合作伙伴用的是下面的 .partner 静态卡片网格），纯死代码，已删除。 */ .partner { flex: none; width: 232px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: .28s var(--ease); } .partner:hover { border-color: var(--brand-100); box-shadow: var(--sh-sm); transform: translateY(-3px); } .partner b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 5px; } .partner span { display: block; font-size: 11.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; } .partner p { font-size: 12.5px; color: var(--body); line-height: 1.6; } /* ---------- 合作计划横幅（首页） ---------- */ /* 与「携手共建城市安全生态」区块刻意不同：那条是白底卡片网格，这条是深蓝横幅 + 左文案右要点，避免两个相邻区块看起来是同一件事的复述。 */ .coop-band { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 46px; padding: 46px 48px; border-radius: var(--r-xl); background: linear-gradient(118deg, var(--brand-900) 0%, var(--brand-800) 32%, var(--brand) 100%); color: rgba(255, 255, 255, .76); box-shadow: var(--sh-lg); } .coop-band::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 80% at 88% 16%, #000, transparent 74%); pointer-events: none; } .coop-band > * { position: relative; z-index: 1; } /* 深底上的 eyebrow 必须换成青色：默认的 --brand 落在蓝色底上等于看不见 */ .coop-band .eyebrow { color: var(--cyan); } .coop-band h2 { color: #fff; font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 16px; } .coop-band p { font-size: 15.5px; line-height: 1.85; max-width: 560px; } .coop-band__list { display: grid; gap: 18px; } .coop-band__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.72); } .coop-band__list .ic { flex: none; width: 20px; height: 20px; color: var(--cyan); margin-top: 2px; } .coop-band__list b { display: block; margin-bottom: 3px; font-size: 14.5px; color: #fff; } /* ---------- 政策条文卡（合作计划页） ---------- */ .quote-card { padding: 26px 28px; border-radius: var(--r-lg); border: 1px solid var(--line); border-left: 3px solid var(--brand); background: #fff; transition: transform .28s var(--ease), box-shadow .28s var(--ease); } .quote-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); } .quote-card h4 { font-size: 16px; margin: 16px 0 10px; } .quote-card p { font-size: 14px; line-height: 1.85; color: var(--body); } .quote-card b { color: var(--brand-700); } /* ---------- 流程步骤（合作计划页） ---------- */ .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } .steps__item { position: relative; padding-top: 22px; border-top: 2px solid var(--line); } /* 每步顶上那一小段品牌色，替代"步骤之间画连线"——连线在换行时必断，看着更乱 */ .steps__item::before { content: ""; position: absolute; left: 0; top: -2px; width: 34px; height: 2px; background: var(--brand); } .steps__no { display: block; margin-bottom: 10px; font-family: var(--font-num); font-size: 26px; font-weight: 700; color: var(--brand); letter-spacing: -.02em; } .steps__item h4 { font-size: 16px; margin-bottom: 8px; } .steps__item p { font-size: 13.5px; line-height: 1.75; } /* ---------- 数据带 ---------- */ .stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .stats-band > div { padding: 8px 24px; border-left: 1px solid rgba(255,255,255,.14); } .stats-band > div:first-child { border-left: 0; padding-left: 0; } .stats-band b { display: flex; align-items: baseline; gap: 0; font-family: var(--font-num); font-size: 42px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.02em; } /* 数字本体：显式声明，防止被组件内其它后代 span 选择器误改字号与颜色 （曾有 .stats-band span 与本条同为 (0,1,1) 特异性且位置更靠后， 把数字压成 13.5px 半透明，导致数字比单位还小、整体失衡） */ .stats-band b > span { display: inline; margin: 0; font-size: inherit; color: inherit; letter-spacing: inherit; } /* 中文量级单位（万 / 亿）：比数字弱一级的白，用中文字体，字形与 DIN 系数字不打架 */ .stats-band b > .stats-band__u { font-family: var(--font-sans); font-style: normal; letter-spacing: 0; font-size: 21px; font-weight: 600; color: rgba(255,255,255,.72); margin-left: 6px; } /* 符号（+ / % / ℃）：保留品牌青的强调语气，与全站其它数字一致 */ .stats-band b > .stats-band__s { font-family: var(--font-num); font-style: normal; letter-spacing: 0; font-size: 20px; font-weight: 600; color: var(--cyan); margin-left: 4px; } /* 「万+」是一个整体后缀：量级与符号之间收紧但留一点呼吸 */ .stats-band b > .stats-band__u + .stats-band__s { margin-left: 2px; } .stats-band__lbl { display: block; margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.6); } /* ---------- 时间轴 ---------- */ .timeline { position: relative; padding-left: 30px; } .timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--brand), var(--brand-100)); } .timeline li { position: relative; padding-bottom: 34px; } .timeline li:last-child { padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -30px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 0 0 4px var(--brand-050); } .timeline b { display: block; font-family: var(--font-num); font-size: 20px; color: var(--brand); line-height: 1.3; } .timeline h4 { margin: 6px 0 6px; font-size: 16px; } .timeline p { font-size: 14px; } /* ---------- 内容排版（文章/详情） ---------- */ .prose { max-width: 860px; } .prose h2 { font-size: 24px; margin: 40px 0 14px; } .prose h3 { font-size: 18px; margin: 30px 0 10px; } .prose p { margin-bottom: 16px; font-size: 15.5px; } .prose ul { margin: 0 0 18px; } .prose ul li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: 15.5px; } .prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-300); } .prose blockquote { margin: 24px 0; padding: 20px 24px; border-left: 3px solid var(--brand); background: var(--brand-050); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 15px; color: var(--ink-2); } /* ---------- 有序列表的序号标记 ---------- 正文里出现"1. 2. 3."这类分点时用的是真
    。全站 ul/ol 都做了 list-style:none 重置（编号自己画，才好控制字色与圆底），所以不给标记 的话就只剩一串没头没尾的行。这里与 .dart__body ol 保持同一套视觉： 品牌色圆底 + 数字。选择器只落在正文容器上，站内现有的
      全部是 .dtoc 的目录，另有自己的 dot 编号，不受影响。 */ .prose ol, .dsec ol { counter-reset: dln; margin: 0 0 20px; } .prose ol li, .dsec ol li { counter-increment: dln; position: relative; padding-left: 30px; margin-bottom: 11px; font-size: 15.5px; line-height: 1.85; color: var(--ink-2); } .prose ol li::before, .dsec ol li::before { content: counter(dln); position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-050); color: var(--brand); font-family: var(--font-num); font-size: 12px; font-weight: 700; display: grid; place-items: center; } .notice { display: flex; gap: 12px; padding: 16px 20px; border-radius: var(--r-md); background: var(--accent-050); border: 1px solid #FBD0D0; font-size: 14px; color: #8E1418; } .notice .ic { flex: none; width: 18px; height: 18px; margin-top: 3px; } .notice--brand { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-700); } /* ---------- 表单 ---------- */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; } .field--full { grid-column: 1 / -1; } .field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .field label i { color: var(--accent); font-style: normal; } .field input, .field textarea, .field select { height: 48px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; color: var(--ink); transition: border-color .22s var(--ease), box-shadow .22s var(--ease); width: 100%; } .field textarea { height: 132px; padding: 13px 16px; resize: vertical; line-height: 1.7; } .field input::placeholder, .field textarea::placeholder { color: #B4BCCB; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(30,72,157,.1); } .field.has-error input, .field.has-error textarea { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(231,22,26,.09); } .field__err { font-size: 12.5px; color: var(--accent); display: none; } .field.has-error .field__err { display: block; } .form-note { font-size: 13px; color: var(--muted); } .form-ok { display: none; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--r-md); background: #EDFBF3; border: 1px solid #C6F0DA; color: #16794E; font-size: 14px; font-weight: 600; } .form-ok.is-on { display: flex; } .form-ok .ic { width: 18px; height: 18px; } /* 提交失败提示（服务端校验未通过时由脚本填入） */ .form-err { margin-bottom: 14px; padding: 12px 16px; border-radius: var(--r-md); background: #FEF1F1; border: 1px solid #F6D0D0; color: #C0171B; font-size: 13.5px; line-height: 1.7; } /* 蜜罐栏：对用户不可见。刻意不用 display:none —— 部分脚本会跳过这类字段， 那样就失去了"诱捕"的意义 */ .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ---------- 联系信息卡 ---------- */ .contact-card { display: flex; gap: 18px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; transition: .28s var(--ease); } .contact-card:hover { border-color: var(--brand-100); box-shadow: var(--sh-sm); transform: translateY(-3px); } .contact-card h4 { margin-bottom: 4px; font-size: 15.5px; } .contact-card p { font-size: 14px; } .contact-card b { font-family: var(--font-num); font-size: 19px; color: var(--brand); letter-spacing: .01em; } /* ---------- CTA ---------- */ .cta { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 62px 56px; background: linear-gradient(120deg, var(--brand-900) 0%, #14407F 55%, #1E489D 100%); color: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .cta::after { content: ""; position: absolute; right: -100px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(79,195,247,.3), transparent 62%); } .cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 100% at 80% 50%, #000, transparent 75%); } .cta > * { position: relative; z-index: 1; } .cta h2 { color: #fff; margin-bottom: 12px; } .cta p { max-width: 560px; } .cta__actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- 页脚 ---------- */ .footer { background: var(--brand-900); color: rgba(255,255,255,.6); padding-top: 68px; position: relative; overflow: hidden; } .footer::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 20% 0%, #000, transparent 75%); } .footer > * { position: relative; z-index: 1; } .footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 40px; padding-bottom: 52px; } .footer__brand img { height: 40px; width: auto; margin-bottom: 20px; } .footer__brand p { font-size: 13.5px; line-height: 1.9; max-width: 300px; color: rgba(255,255,255,.5); } .footer__soc { display: flex; gap: 12px; margin-top: 22px; } .footer__soc a { width: 62px; height: 62px; border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 10.5px; color: rgba(255,255,255,.6); transition: .24s var(--ease); } .footer__soc a .ic { width: 20px; height: 20px; } .footer__soc a:hover { background: var(--brand); border-color: transparent; color: #fff; } .footer h5 { color: #fff; font-size: 15px; margin-bottom: 18px; font-weight: 700; } .footer__links li { margin-bottom: 11px; } .footer__links a { font-size: 13.5px; color: rgba(255,255,255,.6); } .footer__links a:hover { color: #fff; } .footer__contact li { display: flex; gap: 10px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.7; } .footer__contact .ic { flex: none; width: 16px; height: 16px; margin-top: 4px; opacity: .55; } .footer__contact b { color: rgba(255,255,255,.9); font-weight: 600; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.42); } .footer__bottom a:hover { color: #fff; } .footer__bottom .fb-l { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } /* ---------- 回到顶部 ---------- */ .totop { position: fixed; right: 26px; bottom: 26px; z-index: 800; width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; box-shadow: var(--sh-brand); opacity: 0; visibility: hidden; transform: translateY(12px); transition: .3s var(--ease); } .totop.is-on { opacity: 1; visibility: visible; transform: none; } .totop:hover { background: var(--brand-700); } .totop .ic { width: 18px; height: 18px; } /* ---------- 滚动进场 ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; } .reveal[data-d="4"] { transition-delay: .32s; } .reveal[data-d="5"] { transition-delay: .4s; } /* ---------- 落点高亮 ---------- */ /* 从导航/页脚点"大型商业综合体"这类链接进来时，落点是列表里的一张卡片。 卡片本身在 3 列网格中和邻居长得一模一样，滚到位也认不出是哪一张 —— 尤其同页跳转时页面纹丝不动，用户完全无法判断"到底跳没跳"。 这里给刚落地的目标打一圈扩散光环 + 一层淡色底色，明确回答"就是这一张"。 */ @keyframes hitRing { 0% { box-shadow: 0 0 0 0 rgba(30, 72, 157, .45); background-image: linear-gradient(rgba(30,72,157,.07), rgba(30,72,157,.07)); } 100% { box-shadow: 0 0 0 16px rgba(30, 72, 157, 0); background-image: linear-gradient(rgba(30,72,157,0), rgba(30,72,157,0)); } } .is-hit { animation: hitRing 1.5s var(--ease) 1; } /* ---------- 图片占位（后续替换实拍图） ---------- */ .ph { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(140deg, #EEF3FB, #DCE6F7); border: 1px dashed var(--brand-300); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--brand); text-align: center; padding: 28px; } .ph .ic { width: 30px; height: 30px; opacity: .55; } .ph span { font-size: 13px; font-weight: 600; } .ph small { font-size: 12px; color: var(--muted); font-weight: 400; } /* ---------- 统一占位图（2026-09-16）---------- 全站「需要图片但还没图」的位置统一指向 assets/images/placeholder.jpg， 取代原来 CSS 画的 .ph / .dfig__ph 方块和「建议尺寸…替换实拍图」的施工提示。 换图两种方式：① 直接覆盖 placeholder.jpg（全站一起换）； ② 单页换 —— 改该页 指向自己的文件（脚本里写站点根相对路径）。 ⚠️ 都是 object-fit: cover，会按比例裁切：1:1 / 缩略图会切掉左右两侧， 所以图片里不能有贴边的关键内容（placeholder.jpg 的内容就是按中间安全区画的）。 */ .ph-img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-soft); } .ph-img--43 { aspect-ratio: 4 / 3; object-fit: cover; } .ph-img--11 { aspect-ratio: 1 / 1; object-fit: cover; } .ph-img--thumb { height: 132px; object-fit: cover; border-radius: var(--r-md); } /* ---------- 移动端抽屉 ---------- */ .drawer { position: fixed; inset: 0; z-index: 950; background: #fff; padding: 0 0 40px; transform: translateX(100%); /* 关闭时必须 visibility:hidden：只靠 transform 移出屏外的话，抽屉里的 链接仍然留在 Tab 焦点序列里，键盘用户会一路 Tab 进一个看不见的抽屉。 */ visibility: hidden; transition: transform .34s var(--ease), visibility .34s var(--ease); overflow-y: auto; overscroll-behavior: contain; /* 抽屉滚到底不要带动背后的页面一起滚 */ } body.nav-open .drawer { transform: none; visibility: visible; } .drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; } .drawer__head img { height: 38px; width: auto; } .drawer__close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--line); flex: none; } .drawer__close .ic { width: 18px; height: 18px; } .drawer__nav { padding: 16px var(--gutter) 0; } .drawer__nav > li { border-bottom: 1px solid var(--line-2); } .drawer__nav a { display: block; padding: 15px 0; font-size: 16px; font-weight: 600; color: var(--ink); } .drawer__nav a.is-active { color: var(--brand); } /* 一级栏目拆成两件事：左边"文字 = 进这一页"，右边"箭头 = 展开/收起"。 原先整行是一个 preventDefault 的 ，导致"关于我们"这类入口永远点不开。 */ .drawer__row { display: flex; align-items: center; gap: 6px; } .drawer__row > a { flex: 1 1 auto; min-width: 0; } .drawer__toggle { flex: none; width: 44px; height: 44px; margin-right: -8px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--muted); background: transparent; transition: background .22s var(--ease), color .22s var(--ease); } .drawer__toggle:hover { background: var(--bg-soft); color: var(--brand); } .drawer__toggle .ic { transition: transform .28s var(--ease); } .drawer__toggle[aria-expanded="true"] { color: var(--brand); } .drawer__toggle[aria-expanded="true"] .ic { transform: rotate(180deg); } /* 子菜单默认收起。折叠状态一律由 .is-open 类表达，不再用内联 style.display —— 内联值与 CSS 默认值互相打架，正是"点开收不起来"的根源。 */ .drawer__sub { display: none; gap: 2px; padding: 0 0 14px; } .drawer__sub.is-open { display: grid; } .drawer__sub a { padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--body); background: var(--bg-soft); border-radius: var(--r-sm); } .drawer__sub a.is-active { color: var(--brand); background: var(--brand-050); } .drawer__cta { padding: 26px var(--gutter) 0; display: grid; gap: 12px; } /* ---------- FAQ 折叠 ---------- */ .faq { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; } .faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color .24s var(--ease), box-shadow .24s var(--ease); } .faq details[open] { border-color: var(--brand-100); box-shadow: var(--sh-sm); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; font-size: 15.5px; font-weight: 600; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--brand); } .faq__ic { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-050); color: var(--brand); transition: transform .28s var(--ease), background .28s; } .faq__ic .ic { width: 14px; height: 14px; } .faq details[open] .faq__ic { transform: rotate(180deg); background: var(--brand); color: #fff; } .faq__a { padding: 0 24px 20px; border-top: 1px solid var(--line-2); } .faq__a p { padding-top: 16px; font-size: 14.5px; line-height: 1.9; } /* ---------- 合作伙伴 LOGO 墙 ---------- */ .logo-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .logo-wall__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 104px; padding: 16px; text-align: center; border: 1px dashed var(--brand-300); border-radius: var(--r-md); background: linear-gradient(140deg, #FBFDFF, #F2F7FE); color: var(--brand); transition: .26s var(--ease); } .logo-wall__item:hover { border-style: solid; border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh-sm); } .logo-wall__item span { font-size: 13.5px; font-weight: 600; } .logo-wall__item small { font-size: 11.5px; color: var(--muted); font-weight: 400; } /* ---------- 表格滚动 ---------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll table { min-width: 640px; } /* ---------- 响应式 ---------- */ @media (max-width: 1180px) { .footer__top { grid-template-columns: repeat(3, 1fr); gap: 34px; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 1320px) { .header__in { gap: 20px; } .nav__link { padding: 10px 11px; font-size: 14px; } .nav__item.is-active > .nav__link::after { left: 11px; right: 11px; } } @media (max-width: 1120px) { .nav, .header__cta { display: none; } .burger { display: flex; margin-left: auto; } } @media (max-width: 1080px) { .split { grid-template-columns: 1fr; gap: 40px; } .split--rev .split__media { order: 0; } /* hero 右侧的实时数据面板已下线：不再需要为它留底部间距； .hero__in 的基础样式本来就是单列，窄屏无须重复声明。 */ .hero__copy { padding-bottom: 0; max-width: none; } .g-4, .g-5 { grid-template-columns: repeat(2, 1fr); } /* 5 列固定网格在窄屏会被最小内容宽度撑破容器（伴侣墙），逐档收列 */ .logo-wall { grid-template-columns: repeat(3, 1fr); } /* 容器变窄 → 业务体系一屏收到 2 张；合作横幅改为上下排 */ .slider__track > * { flex: 0 0 calc((100% - 24px) / 2); } .coop-band { grid-template-columns: 1fr; gap: 30px; } /* 步骤条 5 列在 1080 以下会被最小内容宽度撑破，收到 3 列 */ .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .section { padding: 68px 0; } .topbar__l { display: none; } .topbar__in { justify-content: center; } /* 只留信息本体（电话 / 邮箱），去掉"服务热线"标签与分隔线 */ .topbar__r { gap: 16px; font-size: 12.5px; } .topbar__r .hide-md { display: none; } .g-3 { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero__stats ul { grid-template-columns: repeat(2, 1fr); } .hero__stats li:nth-child(3) { border-left: 0; } .hero__stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); } .stats-band { grid-template-columns: repeat(2, 1fr); gap: 26px 0; } .stats-band > div:nth-child(odd) { border-left: 0; padding-left: 0; } /* 双列排布下收一档字号，保持数字与单位的比例关系 */ .stats-band b { font-size: 34px; } .stats-band b > .stats-band__u { font-size: 17px; margin-left: 5px; } .stats-band b > .stats-band__s { font-size: 16px; margin-left: 3px; } .cta { padding: 42px 30px; } .news-card--wide { flex-direction: column; } .news-card--wide .news-card__thumb { width: 100%; height: 170px; border-radius: var(--r-lg) var(--r-lg) 0 0; } .news-card--wide .news-card__c { padding: 0 26px 26px; } .form-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { :root { --gutter: 18px; } body { font-size: 14.5px; } .section { padding: 56px 0; } .g-2, .g-3, .g-4, .g-5 { grid-template-columns: 1fr; } /* 业务体系一屏 1 张；步骤条单列；合作横幅收窄内边距 */ .slider__track > * { flex: 0 0 100%; } .steps { grid-template-columns: 1fr; gap: 20px; } .coop-band { padding: 34px 24px; gap: 26px; } .logo-wall { grid-template-columns: repeat(2, 1fr); gap: 12px; } .hero { padding-top: 68px; } .hero__actions .btn, .cta__actions .btn { flex: 1 1 100%; } .hero__stats li { padding: 20px 10px; } .stat__num { font-size: 30px; } .card, .biz-card { padding: 26px 22px; } .footer__top { grid-template-columns: repeat(2, 1fr); } .footer__brand { grid-column: 1 / -1; } .footer__contact { grid-column: 1 / -1; } .dropdown-none { display: none; } .phero { padding: 52px 0; } .prose h2 { font-size: 20px; } } @media (max-width: 480px) { /* 小屏顶栏再收一档，保证电话 + 邮箱仍能一行排下且留有余量 */ .topbar { font-size: 12px; } .topbar__r { gap: 12px; font-size: 12px; } .topbar__r .ic { width: 13px; height: 13px; } } @media (max-width: 360px) { .topbar__r { gap: 10px; } .topbar__r .hide-sm { display: none; } } @media (max-width: 420px) { .footer__top { grid-template-columns: 1fr; } } /* ========================================================================== 内页（详情页）模板样式 4 类详情：解决方案 / 产品 / 案例 / 新闻 + 服务说明 命名约定：.d- 开头（detail） ========================================================================== */ /* ---------- 详情页头部 ---------- */ .dhero { position: relative; overflow: hidden; padding: 54px 0 46px; color: #fff; background: linear-gradient(135deg, #0B1F45 0%, #14346F 52%, #1E489D 100%); } .dhero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 260px at 88% 8%, rgba(79,195,247,.20), transparent 62%), radial-gradient(420px 220px at 6% 96%, rgba(231,22,26,.14), transparent 66%); } .dhero__in { position: relative; z-index: 1; max-width: 900px; } .dhero .crumb { color: rgba(255,255,255,.62); margin-bottom: 22px; } .dhero .crumb a { color: rgba(255,255,255,.72); } .dhero .crumb a:hover { color: #fff; } .dhero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .dhero__tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.94); } .dhero__tag--accent { background: rgba(231,22,26,.22); border-color: rgba(255,120,122,.42); } .dhero h1 { color: #fff; font-size: clamp(27px, 3.4vw, 40px); margin-bottom: 16px; } .dhero__lead { font-size: 16.5px; line-height: 1.88; color: rgba(255,255,255,.80); max-width: 780px; } .dhero__facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: 30px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; } .dhero__fact { padding-right: 34px; margin-right: 34px; border-right: 1px solid rgba(255,255,255,.14); } .dhero__fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .dhero__fact b { display: block; font-family: var(--font-num); font-size: 25px; color: #fff; line-height: 1.25; letter-spacing: -.01em; } .dhero__fact b i { font-style: normal; font-size: 15px; margin-left: 2px; color: var(--cyan); } .dhero__fact span { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 3px; } .dhero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* ---------- 主体两栏 ---------- */ .dlayout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 56px; align-items: start; padding: 62px 0 76px; } .dmain { min-width: 0; } .daside { position: sticky; top: calc(var(--header-h) + 22px); } .dside { display: flex; flex-direction: column; gap: 18px; } /* ---------- 正文分节 ---------- */ .dsec { margin-bottom: 54px; } .dsec:last-child { margin-bottom: 0; } .dsec__h { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; } .dsec__no { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-num); font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-600)); box-shadow: 0 6px 16px -8px rgba(30,72,157,.7); } .dsec__h h2 { font-size: 23px; } .dsec__h p { font-size: 14.5px; color: var(--muted); margin-top: 5px; } .dsec > p { font-size: 15.5px; line-height: 1.9; margin-bottom: 16px; } .dsec > p:last-child { margin-bottom: 0; } /* ---------- 目录（侧栏） ---------- */ .dtoc { background: var(--bg-mist); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 20px 14px; } .dtoc__t { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .04em; margin-bottom: 12px; } .dtoc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .dtoc li { counter-increment: toc; } .dtoc a { display: flex; gap: 10px; padding: 8px 10px; margin: 0 -10px; font-size: 14px; color: var(--body); border-radius: var(--r-sm); line-height: 1.6; } .dtoc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-num); font-size: 12px; color: var(--brand-300); padding-top: 2px; } .dtoc a:hover { color: var(--brand); background: var(--brand-050); } .dtoc a.is-on { color: var(--brand); font-weight: 600; background: var(--brand-050); } .dtoc a.is-on::before { color: var(--brand); } /* ---------- 侧栏卡片 ---------- */ .dcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-xs); } .dcard--brand { background: linear-gradient(150deg, var(--brand-900), var(--brand)); border-color: transparent; color: rgba(255,255,255,.86); box-shadow: var(--sh-brand); } .dcard--brand h4 { color: #fff; font-size: 16.5px; margin-bottom: 8px; } .dcard--brand p { font-size: 14px; color: rgba(255,255,255,.74); margin-bottom: 18px; } .dcard h4 { font-size: 15.5px; margin-bottom: 14px; } .dcard__list { list-style: none; margin: 0; padding: 0; } .dcard__list li { display: flex; gap: 9px; font-size: 14px; line-height: 1.7; margin-bottom: 8px; } .dcard__list li:last-child { margin-bottom: 0; } .dcard__list .ic { flex: none; width: 16px; height: 16px; color: var(--brand); margin-top: 4px; } .dcard--brand .dcard__list .ic { color: var(--cyan); } /* ---------- 规格参数表 ---------- */ .dspec { width: 100%; border-collapse: collapse; font-size: 14.5px; } .dspec caption { caption-side: top; text-align: left; font-size: 15.5px; font-weight: 700; color: var(--ink); padding-bottom: 14px; } .dspec th, .dspec td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; text-align: left; } .dspec th { width: 148px; font-weight: 600; color: var(--ink-2); background: var(--bg-mist); white-space: nowrap; } .dspec tr:last-child th, .dspec tr:last-child td { border-bottom: 0; } .dspec td { color: var(--body); } /* ---------- 痛点 / 能力网格 ---------- */ .dgrid { display: grid; gap: 16px; } .dgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dpain { display: flex; gap: 13px; padding: 18px 20px; border-radius: var(--r-md); background: var(--accent-050); border: 1px solid #FADBDC; } .dpain__ic { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 2px; } .dpain b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; } .dpain p { font-size: 14px; color: var(--body); line-height: 1.72; margin: 0; } .dabil { padding: 22px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .dabil:hover { box-shadow: var(--sh-sm); transform: translateY(-2px); } .dabil__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-050); color: var(--brand); margin-bottom: 14px; } .dabil h4 { font-size: 16px; margin-bottom: 7px; } .dabil p { font-size: 14.2px; line-height: 1.78; margin: 0; } /* 资料下载按钮（support/download.html 的「立即下载 / 联系我们获取」）。 它紧跟在 .tag 小标签之后，所以整体做得比标签"重"一点：品牌色描边 + 悬停填充， 让"这一条能不能下载"在一屏里一眼可辨。 未挂文件的条目走的是另一个分支：指向 contact/index.html 的浅灰文字链， 不做成按钮 —— 免得看起来像能下载、点下去却是联系页。 */ .dlink { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--brand); border: 1px solid var(--brand-100); background: var(--brand-050); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .dlink .ic { width: 14px; height: 14px; --ic-sz: 14px; flex: none; } .dlink:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .dlink[download]:hover .ic { transform: translateY(2px); } .dlink:not([download]) { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; color: var(--muted); font-weight: 500; } .dlink:not([download]):hover { background: transparent; border-color: transparent; color: var(--brand); } /* ---------- 数据成效条 ---------- */ .dstat { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--brand-900), var(--brand-700) 60%, var(--brand)); } .dstat > div { padding: 26px 22px; text-align: center; border-right: 1px solid rgba(255,255,255,.12); } .dstat > div:last-child { border-right: 0; } .dstat b { display: block; font-family: var(--font-num); font-size: 32px; color: #fff; line-height: 1.15; letter-spacing: -.02em; } .dstat b i { font-style: normal; font-size: 16px; margin-left: 2px; color: var(--cyan); } .dstat span { display: block; font-size: 13px; color: rgba(255,255,255,.68); margin-top: 6px; } /* ---------- 图文块 / 占位图 ---------- */ .dfig { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft); margin: 26px 0; } .dfig__ph { position: relative; height: 210px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(30,72,157,.06), rgba(79,195,247,.10)), repeating-linear-gradient(45deg, rgba(30,72,157,.045) 0 12px, transparent 12px 24px); color: var(--brand-300); } .dfig__ph .ic { width: 42px; height: 42px; opacity: .55; } .dfig__ph b { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; } .dfig figcaption { padding: 12px 18px; font-size: 13.5px; color: var(--muted); background: #fff; } .dfig img { display: block; width: 100%; height: auto; } /* ---------- 引用 ---------- */ .dquote { margin: 28px 0; padding: 26px 30px; border-radius: var(--r-lg); background: var(--bg-mist); border-left: 3px solid var(--brand); } .dquote p { font-size: 16px; line-height: 1.9; color: var(--ink-2); margin: 0 0 14px; } .dquote footer { font-size: 13.5px; color: var(--muted); } .dquote footer b { color: var(--ink); font-weight: 600; } /* ---------- 相关推荐 ---------- */ .drel { background: var(--bg-soft); padding: 66px 0; } .drel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .drel__c { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .drel__c:hover { box-shadow: var(--sh-md); transform: translateY(-3px); } .drel__c span { font-size: 12.5px; color: var(--brand); font-weight: 600; margin-bottom: 8px; } .drel__c h4 { font-size: 16.5px; margin-bottom: 8px; } .drel__c p { font-size: 14px; line-height: 1.75; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .drel__c .link-more { margin-top: auto; } /* ---------- 上下篇导航 ---------- */ .dnav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .dnav__in { display: grid; grid-template-columns: 1fr 1fr; } .dnav__i { padding: 24px 0; } .dnav__i--next { text-align: right; border-left: 1px solid var(--line); padding-left: 30px; } .dnav__i--prev { padding-right: 30px; } .dnav__i small { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; } .dnav__i a, .dnav__i .dnav__void { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.5; } .dnav__i a:hover { color: var(--brand); } /* 上/下篇到头时的占位文字：不是链接，只是灰掉的说明 */ .dnav__i.is-empty a, .dnav__i.is-empty .dnav__void { color: var(--muted); font-weight: 400; } /* ---------- 新闻正文 ---------- */ .dart { max-width: 800px; margin: 0 auto; padding: 58px 0 70px; } .dart__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); } .dart__meta .tag { font-size: 12.5px; } .dart__body { font-size: 16px; line-height: 1.95; color: var(--ink-2); } .dart__body > p { margin-bottom: 22px; } .dart__body h2 { font-size: 21px; margin: 42px 0 16px; padding-left: 14px; border-left: 3px solid var(--brand); } .dart__body h3 { font-size: 17.5px; margin: 32px 0 12px; } .dart__body ul, .dart__body ol { margin: 0 0 24px; padding-left: 0; list-style: none; } .dart__body li { position: relative; padding-left: 26px; margin-bottom: 12px; } .dart__body ul li::before { content: ""; position: absolute; left: 5px; top: 12px; width: 7px; height: 7px; border-radius: 2px; background: var(--brand); transform: rotate(45deg); } .dart__body ol { counter-reset: dl; } .dart__body ol li { counter-increment: dl; } .dart__body ol li::before { content: counter(dl); position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--brand-050); color: var(--brand); font-family: var(--font-num); font-size: 12px; font-weight: 700; display: grid; place-items: center; } .dart__body strong { color: var(--ink); font-weight: 700; } /* 正文里可能出现、但原本没有样式的两个元素 —— 后台富文本编辑器会产出它们：
      （分割线按钮）与裸 （插图按钮插进来的是

      ，不套 .dfig）。 img 的 max-width/height 由全局规则兜底，这里只补间距与圆角；.dfig 内的图不受影响。 */ .dart__body hr { margin: 34px 0; border: 0; height: 1px; background: var(--line-2); } .dart__body > p > img { margin: 24px 0; border-radius: var(--r-lg); } .dart__body .dfig img { margin: 0; border-radius: 0; } .dart__note { margin-top: 40px; padding: 20px 24px; border-radius: var(--r-md); background: var(--brand-050); font-size: 14px; color: var(--body); line-height: 1.8; } .dart__note b { color: var(--brand); } /* ---------- 列表卡片作为链接时的块级化 ---------- */ /* 注意：仅对自身【未声明 display】的卡片做块级化（.card / .ind-card / .case-card）。 .news-card 与 .biz-card 自身是 flex 容器（display:flex + flex-direction）， 若写成 a.news-card{display:block}，因选择器特异性 a.news-card(0,1,1) 高于 .news-card(0,1,0)， 会覆盖组件自身的 display，使 flex-direction 失效（曾导致 .news-card--wide 横向布局整体塌陷）。 故 flex 类卡片一律只继承颜色，display 保持组件自身声明。 */ a.ind-card, a.case-card, a.card { display: block; } /* ⚠ 这里必须写死 var(--body)，不能写 color:inherit。 .section--dark 声明了 color: rgba(255,255,255,.72)，用于它自己的深蓝底； 而卡片是白底的，继承下去就变成"白字白底"，正文直接看不见 （首页客户案例区块正是 .section--dark + .case-card，.case-card__body p 没有自己的颜色）。 白底卡片一律自带文字色，与所在区块的底色解耦。 */ a.ind-card, a.case-card, a.news-card, a.card, a.biz-card { color: var(--body); } a.card:hover h3 { color: var(--brand); } a.card:hover .link-more .ic { transform: translateX(4px); } /* 悬停时标题变品牌蓝：只适用于标题在白底区域的卡片（.card / .news-card / .ind-card）。 ⚠ .case-card 的标题在 .case-card__top 的深蓝渐变里，变蓝会与底色糊成一片、字直接读不出来 （移动端长按也会触发 hover 态），所以它被单独摘出去，见下一条。 */ a.ind-card:hover h4, a.card:hover h3, a.card:hover h4, a.news-card:hover h4 { color: var(--brand); } /* 案例卡标题恒定白色，悬停反馈交给卡片上浮 + .case-card__top 的 brightness。 这里显式钉一遍，避免日后别的 hover 规则再把它改蓝。 */ a.case-card:hover .case-card__top h4 { color: #fff; } a.ind-card:hover .ind-card__img, a.case-card:hover .case-card__top { filter: brightness(1.06); } /* ---------- 详情页响应式 ---------- */ @media (max-width: 1080px) { .dlayout { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 60px; } .daside { position: static; } .dside { flex-direction: row; flex-wrap: wrap; } .dside > * { flex: 1 1 300px; } .dtoc { flex: 1 1 100%; } } @media (max-width: 900px) { .dhero { padding: 44px 0 38px; } .dhero__fact { padding-right: 22px; margin-right: 22px; } .dhero__fact b { font-size: 21px; } .dgrid--2 { grid-template-columns: 1fr; } .drel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dstat { grid-template-columns: 1fr; } .dstat > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); } .dstat > div:last-child { border-bottom: 0; } } @media (max-width: 640px) { .dsec__h h2 { font-size: 20px; } .dhero__facts { gap: 18px 0; } .dhero__fact { padding-right: 16px; margin-right: 16px; } .dhero__fact:last-child { padding-right: 0; } .drel__grid { grid-template-columns: 1fr; } .dnav__in { grid-template-columns: 1fr; } .dnav__i--next { text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .dnav__i--prev { padding-right: 0; } .dart { padding: 40px 0 52px; } .dart__body { font-size: 15.5px; } .dquote { padding: 22px 20px; } } /* >>> ICONS-LIBRARY:BEGIN —— 由 .workbuddy/build/sync_icons.py 生成，请勿手工编辑 >>> */ /* 图标形状库：每个 .ic-- 只负责给 --ic 赋一个 SVG 遮罩， 真正绘制在文件开头的 .ic 基类里完成。 优点：① 全站 66 个页面不再各自内联一份 精灵； ② 形状随 style.css 缓存一次，页面只留 ； ③ 颜色跟随 color，hover / 禁用态可自动变色。 */ .ic--archive { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4.4' rx='1.4'/%3E%3Cpath d='M4.8 8.4v10.2a2 2 0 0 0 2 2h10.4a2 2 0 0 0 2-2V8.4M10 12.6h4'/%3E%3C/svg%3E"); } .ic--arrow-right { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .ic--arrow-up { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M6 12l6-6 6 6'/%3E%3C/svg%3E"); } .ic--award { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.8' r='5.9'/%3E%3Cpath d='M8.4 13.9L7.2 21.4l4.8-2.9 4.8 2.9-1.2-7.5'/%3E%3C/svg%3E"); } .ic--bell { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8.4a6 6 0 0 0-12 0c0 6.6-2.7 7.6-2.7 7.6h17.4S18 15 18 8.4'/%3E%3Cpath d='M13.7 20a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); } .ic--bolt { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.5L4.5 13.7h6.4l-.9 7.8 8.9-11.2h-6.4z'/%3E%3C/svg%3E"); } .ic--building { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.2' y='2.6' width='15.6' height='18.8' rx='2'/%3E%3Cpath d='M9 6.6h1.8M13.2 6.6H15M9 10.4h1.8M13.2 10.4H15M9 14.2h1.8M13.2 14.2H15M10 21.4v-3.6h4v3.6'/%3E%3C/svg%3E"); } .ic--calendar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.2'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10.5h17'/%3E%3C/svg%3E"); } .ic--camera { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4A2 2 0 0 1 5 6.4h1.8L8.4 4h7.2l1.6 2.4H19a2 2 0 0 1 2 2v8.8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='12.4' r='3.4'/%3E%3C/svg%3E"); } .ic--chart { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.6h18'/%3E%3Crect x='4.6' y='11' width='3.6' height='7' rx='1'/%3E%3Crect x='10.2' y='5.8' width='3.6' height='12.2' rx='1'/%3E%3Crect x='15.8' y='13.8' width='3.6' height='4.2' rx='1'/%3E%3C/svg%3E"); } .ic--check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.2 17.3 4 12.1'/%3E%3C/svg%3E"); } .ic--check-circle { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.3 12.3l2.6 2.6 4.8-5.4'/%3E%3C/svg%3E"); } .ic--chevron-down { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); } .ic--chevron-right { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E"); } .ic--clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8v5.6l3.4 2'/%3E%3C/svg%3E"); } .ic--cloud { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.4 19.2a4.4 4.4 0 0 0 .4-8.8 6 6 0 0 0-11.6 1.6A3.9 3.9 0 0 0 6.6 19.2z'/%3E%3C/svg%3E"); } .ic--code { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 7.4L4 12l4.6 4.6M15.4 7.4L20 12l-4.6 4.6'/%3E%3C/svg%3E"); } .ic--cpu { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2.2'/%3E%3Crect x='9.6' y='9.6' width='4.8' height='4.8' rx='1'/%3E%3Cpath d='M9.6 2.5V6M14.4 2.5V6M9.6 18v3.5M14.4 18v3.5M2.5 9.6H6M2.5 14.4H6M18 9.6h3.5M18 14.4h3.5'/%3E%3C/svg%3E"); } .ic--droplet { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l4.8 6.1a6.2 6.2 0 1 1-9.6 0z'/%3E%3C/svg%3E"); } .ic--file { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2.6H7.2a2 2 0 0 0-2 2v14.8a2 2 0 0 0 2 2h9.6a2 2 0 0 0 2-2V7.4z'/%3E%3Cpath d='M14 2.6v4.8h4.8M8.8 13h6.4M8.8 16.6h4'/%3E%3C/svg%3E"); } .ic--gear { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='M12 2.6l1.3 2.6 2.9-.5.4 2.9 2.6 1.3-1.4 2.6 1.4 2.6-2.6 1.3-.4 2.9-2.9-.5L12 21.4l-1.3-2.6-2.9.5-.4-2.9-2.6-1.3L6.2 12 4.8 9.4l2.6-1.3.4-2.9 2.9.5z'/%3E%3C/svg%3E"); } .ic--globe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15.5 15.5 0 0 1 0 18 15.5 15.5 0 0 1 0-18z'/%3E%3C/svg%3E"); } .ic--grid { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='7' height='7' rx='1.6'/%3E%3Crect x='13.6' y='3.4' width='7' height='7' rx='1.6'/%3E%3Crect x='3.4' y='13.6' width='7' height='7' rx='1.6'/%3E%3Crect x='13.6' y='13.6' width='7' height='7' rx='1.6'/%3E%3C/svg%3E"); } .ic--handshake { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17.4l-4.2-4.2a2.4 2.4 0 0 1 0-3.4l3-3a2.4 2.4 0 0 1 3.4 0L17 10.6'/%3E%3Cpath d='M15.6 6.4l3.2-2.2 2.7 2.6-3 3.4 1.2 1.2-3.4 3.4a2 2 0 0 1-2.8 0l-2.2-2.2'/%3E%3Cpath d='M2.5 4.2l2.7-2.6 3.2 2.2'/%3E%3C/svg%3E"); } .ic--layers { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6l8.8 4.8-8.8 4.8-8.8-4.8z'/%3E%3Cpath d='M3.2 12l8.8 4.8 8.8-4.8'/%3E%3Cpath d='M3.2 16.8l8.8 4.8 8.8-4.8'/%3E%3C/svg%3E"); } .ic--link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 13.2a4.8 4.8 0 0 0 6.8 0l2.8-2.8a4.8 4.8 0 0 0-6.8-6.8l-1.4 1.4'/%3E%3Cpath d='M13.8 10.8a4.8 4.8 0 0 0-6.8 0l-2.8 2.8a4.8 4.8 0 0 0 6.8 6.8l1.4-1.4'/%3E%3C/svg%3E"); } .ic--lock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.4' y='10.2' width='15.2' height='10.4' rx='2.2'/%3E%3Cpath d='M8.2 10.2V7.2a3.8 3.8 0 0 1 7.6 0v3'/%3E%3C/svg%3E"); } .ic--mail { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.2'/%3E%3Cpath d='M3 7.5l9 5.5 9-5.5'/%3E%3C/svg%3E"); } .ic--map { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.6' width='18' height='14.8' rx='2'/%3E%3Cpath d='M9 4.6v14.8M15 4.6v14.8M3 12h18'/%3E%3C/svg%3E"); } .ic--map-pin { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10.3c0 6-8 11.7-8 11.7s-8-5.7-8-11.7a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10.2' r='3'/%3E%3C/svg%3E"); } .ic--message { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.4 9.4 0 0 1-3.9-.8L3 21l1.9-4.8A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E"); } .ic--monitor { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.6' width='19' height='13.4' rx='2.2'/%3E%3Cpath d='M8.4 21.4h7.2M12 17v4.4'/%3E%3C/svg%3E"); } .ic--phone { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 16.9v2.8a1.9 1.9 0 0 1-2.1 1.9 18.9 18.9 0 0 1-8.2-2.9 18.6 18.6 0 0 1-5.7-5.7A18.9 18.9 0 0 1 2.6 4.7 1.9 1.9 0 0 1 4.5 2.6h2.8a1.9 1.9 0 0 1 1.9 1.6c.1.9.4 1.8.7 2.7a1.9 1.9 0 0 1-.4 2L8.3 10.1a15 15 0 0 0 5.7 5.7l1.2-1.2a1.9 1.9 0 0 1 2-.4c.9.3 1.8.6 2.7.7a1.9 1.9 0 0 1 1.6 1.9z'/%3E%3C/svg%3E"); } .ic--play { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10.2 8.6l6.2 3.4-6.2 3.4z'/%3E%3C/svg%3E"); } .ic--quote { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 6.4C6.6 7.6 5 10 5 13c0 2.7 1.5 4.6 3.8 4.6 2 0 3.4-1.4 3.4-3.3 0-1.9-1.3-3.2-3.1-3.2-.3 0-.6 0-.8.1.3-1.6 1.4-2.9 3-3.6zM19.4 6.4c-3 1.2-4.6 3.6-4.6 6.6 0 2.7 1.5 4.6 3.8 4.6 2 0 3.4-1.4 3.4-3.3 0-1.9-1.3-3.2-3.1-3.2-.3 0-.6 0-.8.1.3-1.6 1.4-2.9 3-3.6z'/%3E%3C/svg%3E"); } .ic--refresh { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 12a8.8 8.8 0 1 1-2.6-6.2'/%3E%3Cpath d='M20.8 3.6v5.2h-5.2'/%3E%3C/svg%3E"); } .ic--search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5L16 16'/%3E%3C/svg%3E"); } .ic--shield { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7.6-3.8 7.6-9.6V5.4L12 2.5 4.4 5.4v6.5c0 5.8 7.6 9.6 7.6 9.6z'/%3E%3Cpath d='M9.2 11.9l2.1 2.1 4.1-4.3'/%3E%3C/svg%3E"); } .ic--signal { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.8a14.6 14.6 0 0 1 20 0'/%3E%3Cpath d='M5.6 12.4a9.4 9.4 0 0 1 12.8 0'/%3E%3Cpath d='M9.2 15.9a4.4 4.4 0 0 1 5.6 0'/%3E%3Ccircle cx='12' cy='19.4' r='1.1'/%3E%3C/svg%3E"); } .ic--target { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Ccircle cx='12' cy='12' r='1.1'/%3E%3C/svg%3E"); } .ic--users { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-1.9a3.9 3.9 0 0 0-3.9-3.9H6.4a3.9 3.9 0 0 0-3.9 3.9V21'/%3E%3Ccircle cx='9.2' cy='7.2' r='3.9'/%3E%3Cpath d='M21.5 21v-1.9a3.9 3.9 0 0 0-2.9-3.8M15.6 3.4a3.9 3.9 0 0 1 0 7.6'/%3E%3C/svg%3E"); } .ic--warning { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4L1.9 20.6h20.2z'/%3E%3Cpath d='M12 9.8v4.6'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E"); } .ic--wifi { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6a10.2 10.2 0 0 1 14 0'/%3E%3Cpath d='M8.4 16a5.3 5.3 0 0 1 7.2 0'/%3E%3Ccircle cx='12' cy='19.4' r='1.1'/%3E%3Cpath d='M1.6 9.2a15.4 15.4 0 0 1 20.8 0'/%3E%3C/svg%3E"); } /* <<< ICONS-LIBRARY:END <<< */ /* ---------- 打印 ---------- */ @media print { .header, .topbar, .footer, .totop, .drawer { display: none !important; } body { color: #000; } }