/* ============================================================ 智诚科技 · vue-app UI 重构 v2 — 极简风格设计系统 参考基调：collectui 极简交互 — 大留白 / 黑白灰 / 单强调色 / 细字重 / 细分割线 / 克制动效 / 网格卡片 强调色沿用品牌红 #E30001（仅小面积点缀） ============================================================ */ :root{ --bg0:#FCFCFD; --bg1:#F4F5F7; --card:#FFFFFF; --line:#E8E8EC; --line-2:#D8D9DE; --ink:#141518; --ink-2:#55575F; --mute:#9A9CA5; --acc:#E30001; --acc-soft:rgba(227,0,1,.07); --dark:#0F1115; --dark-2:#181B22; --dark-line:rgba(255,255,255,.09); --r:18px; --r-lg:26px; --r-sm:10px; --sh:0 1px 2px rgba(15,17,21,.05), 0 10px 26px -20px rgba(15,17,21,.14); --sh-lg:0 2px 6px rgba(15,17,21,.06), 0 26px 60px -28px rgba(15,17,21,.22); --ease:cubic-bezier(.22,.61,.36,1); --font:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* 顶栏高度：改这一个值，顶栏、移动菜单、栏目 banner 让位、sticky 导航全部跟着走 */ --hdr-h:110px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:var(--font);background:var(--bg0);color:var(--ink);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;} a{text-decoration:none;color:inherit;} img{max-width:100%;display:block;} ul,ol{list-style:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;} input{font-family:inherit;} ::selection{background:var(--acc);color:#fff;} .shell{max-width:1200px;margin:0 auto;padding:0 28px;} .num{font-variant-numeric:tabular-nums;} /* ---------------- Buttons ---------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.02em;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s;white-space:nowrap;} .btn svg{transition:transform .35s var(--ease);} .btn:hover svg{transform:translateX(4px);} .btn--dark{background:var(--dark);color:#fff;} .btn--dark:hover{background:var(--acc);transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--acc);} .btn--light{background:#fff;color:var(--dark);} .btn--light:hover{background:#EDEDF0;transform:translateY(-2px);} .btn--ghost{border:1px solid rgba(255,255,255,.32);color:#fff;background:transparent;} .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px);} .btn--acc{background:var(--acc);color:#fff;} .btn--acc:hover{background:#C30000;transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--acc);} .link-more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink);transition:color .25s;} .link-more svg{transition:transform .3s var(--ease);} .link-more:hover{color:var(--acc);} .link-more:hover svg{transform:translateX(5px);} /* ---------------- Header ---------------- */ .hdr{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--hdr-h);font-size:19.2px;background:#333333;border-bottom:1px solid rgba(255,255,255,.08);transition:border-color .3s,box-shadow .3s;} .hdr.scrolled{border-bottom-color:rgba(255,255,255,.12);box-shadow:0 10px 30px -22px rgba(0,0,0,.55);} /* 内容区撑满父容器（max-width:none 覆盖 .shell 的 1200px 居中）+ 高度撑满顶栏 + align-items:center ⇒ 永远上下居中 */ .hdr-in{display:flex;align-items:center;justify-content:space-between;height:100%;gap:33.6px;background:#333333;max-width:none;width:100%;margin:0;} .hdr-logo{display:flex;align-items:center;gap:14.4px;flex-shrink:0;} .hdr-mark{width:48px;height:48px;border-radius:12px;object-fit:contain;object-position:center;display:block;flex-shrink:0;background:transparent;box-shadow:none;} .hdr-title{display:flex;flex-direction:column;line-height:1.15;} .hdr-title b{font-size:20.4px;font-weight:800;letter-spacing:.06em;color:#fff;} .hdr-title span{font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.32em;text-transform:uppercase;} /* 导航铺满中间的剩余空间，各项用 justify-content 均匀平铺，宽度自适应 */ .hdr-nav{display:flex;align-items:center;gap:4px;flex:1 1 auto;justify-content:space-between;} .hdr-nav .nav-item{position:relative;} .hdr-nav .nav-item>a{position:relative;display:inline-flex;align-items:center;padding:10.8px 19.2px;font-size:19.2px;color:#fff;font-weight:700;border-radius:999px;transition:color .25s,background .25s;} .hdr-nav .nav-item>a:hover{color:#fff;background:rgba(255,255,255,.08);} .hdr-nav .nav-item>a::after{content:"";position:absolute;left:19.2px;right:19.2px;bottom:3.6px;height:2.4px;border-radius:2px;background:#E30001;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);} .hdr-nav .nav-item:hover>a::after,.hdr-nav .nav-item.is-active>a::after{transform:scaleX(1);} .hdr-nav .nav-item.is-active>a{color:#fff;font-weight:800;} .hdr-nav .nav-item.has-drop>a{display:inline-flex;align-items:center;gap:6px;} /* 桌面横向 mega 下拉 */ .hdr-drop{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(15,17,21,.3);z-index:199;} /* 下拉：容器撑满（覆盖 .shell 的 1200px 居中）。 左右内边距与列宽由 AppHeader.js 的 syncDropAlign() 按顶栏导航实测写入 CSS 变量， 使下拉的每一列与上方对应的菜单项严格对齐（无 JS 时退回等分 5 列）。 */ .hdr-drop-in{display:grid;grid-template-columns:var(--drop-cols,repeat(5,1fr));justify-content:space-between;gap:0;max-width:none;width:100%;margin:0;padding:30px var(--drop-pr,28px) 34px var(--drop-pl,28px);} .drop-col{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--bg1);padding-left:24px;} .drop-col.hot{border-left-color:var(--acc);} .drop-col .drop-title{font-size:17px;font-weight:700;color:var(--ink);padding:4px 0 12px;letter-spacing:.01em;transition:color .25s;} .drop-col.hot .drop-title{color:var(--acc);} .drop-col .drop-title:hover{color:var(--acc);} .drop-col .drop-link{font-size:15.5px;color:var(--ink-2);padding:7px 0;transition:color .2s,transform .3s var(--ease);transform:translateX(0);} .drop-col .drop-link:hover{color:var(--acc);transform:translateX(4px);} .drop-enter-active,.drop-leave-active{transition:opacity .28s var(--ease),transform .28s var(--ease);} .drop-enter-from,.drop-leave-to{opacity:0;transform:translateY(-8px);} .hdr-side{display:flex;align-items:center;gap:14.4px;flex-shrink:0;} /* 顶栏搜索按钮：点击后从顶栏下方滑出搜索面板 */ .hdr-search-btn{width:50.4px;height:50.4px;border:1px solid rgba(255,255,255,.32);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.08);flex-shrink:0;transition:.3s;} .hdr-search-btn:hover{border-color:#fff;background:rgba(255,255,255,.16);transform:rotate(8deg);} .hdr-search-btn.is-open{background:#fff;color:var(--dark);border-color:#fff;transform:rotate(90deg);} /* 从顶栏下方滑出的搜索面板 */ .hdr-spanel{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 26px 50px -26px rgba(15,17,21,.45);z-index:198;} .hdr-spanel-in{display:flex;align-items:center;gap:14px;max-width:900px;margin:0 auto;padding:26px 28px;} .hdr-spanel .sp-input{flex:1;min-width:0;height:56px;border:1px solid var(--line);border-radius:999px;padding:0 26px;font-size:17px;outline:none;background:var(--bg1);color:var(--ink);transition:border-color .25s,background .25s,box-shadow .25s;} .hdr-spanel .sp-input::placeholder{color:#A6A9B2;} .hdr-spanel .sp-input:focus{border-color:var(--acc);background:#fff;box-shadow:0 0 0 4px rgba(227,0,1,.08);} .hdr-spanel .sp-btn{height:56px;padding:0 34px;border-radius:999px;background:var(--acc);color:#fff;font-size:16px;font-weight:700;flex-shrink:0;transition:background .25s,transform .25s;} .hdr-spanel .sp-btn:hover{background:#C30000;transform:translateY(-1px);} .hdr-spanel .sp-close{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex-shrink:0;transition:background .25s,color .25s;} .hdr-spanel .sp-close:hover{background:var(--bg1);color:var(--acc);} /* 滑出/收起动画 */ .spanel-enter-active,.spanel-leave-active{transition:opacity .26s var(--ease),transform .32s var(--ease);} .spanel-enter-from,.spanel-leave-to{opacity:0;transform:translateY(-14px);} .hdr-search .s-ico:hover{border-color:#fff;color:#fff;transform:rotate(8deg);background:rgba(255,255,255,.16);} .menu-burger{display:none;flex-direction:column;gap:6px;width:52.8px;height:52.8px;align-items:center;justify-content:center;border-radius:14.4px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);} .menu-burger i{width:21.6px;height:2.4px;background:#fff;border-radius:2px;transition:.3s;display:block;} .hdr-cta{display:inline-flex;background:#E30001;color:#fff;border:none;} .hdr-cta:hover{background:#C30000;transform:translateY(-2px);box-shadow:0 14px 30px -14px #E30001;} /* 顶栏「登录」按钮 —— 最右侧，当前页跳转智诚科技CMS后台登录页 */ .hdr-login{display:inline-flex;align-items:center;gap:8.4px;height:50.4px;padding:0 21.6px;flex-shrink:0;font-size:16.8px;font-weight:700;letter-spacing:.02em;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.34);border-radius:999px;white-space:nowrap;transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s;} .hdr-login:hover{background:#fff;color:#333333;border-color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(0,0,0,.6);} .hdr-login:active{transform:translateY(0);} .hdr-login svg{flex-shrink:0;transition:transform .3s var(--ease);} .hdr-login:hover svg{transform:translateX(2px);} @media(max-width:1080px){ .hdr-nav,.hdr-cta{display:none;} .menu-burger{display:flex;} .hdr-login{height:40px;padding:0 14px;} .hdr-mobile-nav{position:fixed;top:var(--hdr-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--line);display:flex;flex-direction:column;padding:10px 22px 20px;gap:2px;z-index:199;box-shadow:var(--sh);max-height:calc(100vh - var(--hdr-h));overflow:auto;} .hdr-mobile-nav .m-item{margin-bottom:4px;} .hdr-mobile-nav .m-top{display:block;padding:12px 8px;font-size:16px;border-bottom:1px solid var(--bg1);font-weight:600;color:var(--ink);} .hdr-mobile-nav .m-top.is-active{color:var(--acc);} .hdr-mobile-nav .m-sub{display:flex;flex-direction:column;padding:4px 8px 8px;border-bottom:1px solid var(--bg1);} .hdr-mobile-nav .m-sub-link{padding:8px 8px 8px 20px;font-size:14px;color:var(--ink-2);border-left:2px solid var(--bg1);margin-left:6px;} .hdr-mobile-nav .m-sub-link:hover{color:var(--acc);} .hdr-mobile-nav a.is-active{color:var(--acc);} } /* ---------------- Hero ---------------- */ .hero{position:relative;min-height:92vh;display:flex;align-items:center;background-color:#0a0a0f;color:#fff;overflow:hidden;padding:140px 0 100px;} /* Hero 背景图：位于 ../../public/images/tb.jpg（用户指定路径） 缓慢推近：1 → 1.2 倍，3 秒，forwards 停在放大态；超出部分由 .hero 的 overflow:hidden 裁掉。 ⚠️ 动画必须等开屏遮罩滑开后再启动：遮罩会盖住整个首屏约 3 秒， 若在这里直接挂 animation，等遮罩消失时动画早已播完（只剩一张静止的放大图）。 boot-over 由 js/boot-effect.js 在开屏退场时打到 上；无开屏时立即有该类。 */ .hero::before{position:absolute;inset:0;content:"";background-image:url('/images/tb.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat;z-index:0;transform-origin:center center;will-change:transform;} @keyframes heroBgZoom{from{transform:scale(1);}to{transform:scale(1.2);}} html.boot-over .hero::before{animation:heroBgZoom 3s var(--ease) forwards;} @media (prefers-reduced-motion: reduce){html.boot-over .hero::before{animation:none;}} /* 暗色蒙版保证文字可读 */ .hero::after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,rgba(10,10,15,.55) 0%,rgba(10,10,15,.35) 45%,rgba(10,10,15,.72) 100%);z-index:1;pointer-events:none;} .hero-grid-bg{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 90% 80% at 50% 10%,#000 30%,transparent 75%);z-index:2;} .hero-glow{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;z-index:2;} .hero-glow.g1{width:480px;height:480px;background:#20305c;top:-160px;right:-80px;} .hero-glow.g2{width:380px;height:380px;background:rgba(227,0,1,.26);bottom:-140px;left:8%;} .hero-in{position:relative;z-index:2;text-align:center;width:100%;} .hero-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:13px;color:#C9CDD6;letter-spacing:.05em;background:rgba(255,255,255,.04);} .hero-chip .dot{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 4px rgba(61,220,132,.15);} .hero h1{font-size:clamp(42px,6.4vw,78px);line-height:1.06;font-weight:700;letter-spacing:-.025em;margin:30px auto 0;max-width:1040px;} .hero h1 .thin{font-weight:400;color:#A9AEB9;} .hero h1 .ac{color:#FF6B62;} .hero-sub{margin:26px auto 0;max-width:780px;color:#fff;font-size:22px;font-weight:700;line-height:1.75;letter-spacing:.01em;} .hero-actions{display:flex;gap:16px;justify-content:center;margin-top:42px;flex-wrap:wrap;} .hero-stats{display:flex;justify-content:center;gap:0;margin-top:64px;border-top:1px solid var(--dark-line);padding-top:36px;} .hero-stats .hs{flex:0 0 200px;text-align:center;} .hero-stats .hs+.hs{border-left:1px solid var(--dark-line);} .hero-stats b{font-size:34px;font-weight:700;letter-spacing:-.02em;color:#fff;display:block;} .hero-stats span{font-size:13px;color:#7C818D;letter-spacing:.08em;} /* ---- Hero 轮播（2026-09-11 新增：三页 —— 公司主形象 / ZC-MSS / 一体化智能运维平台）---- 三页用 grid 叠在同一格（grid-area:1/1），容器高度自动取最高的一页，切换时不会跳动。 非活动页 opacity:0 + pointer-events:none：透明但保留占位，且点不到里面的按钮。 */ /* 每页独立背景图，随轮播一起淡入淡出（2026-09-11 新增） 层序：.hero::before(tb.jpg, z0) → .hero-bgs(z0，DOM 顺序在其后 → 盖在上面) → .hero::after(暗色遮罩, z1) → 内容(z2) 只有配了图的页（.hero-bg.on）才铺图；bg 为空的页不铺，露出 .hero::before 的 tb.jpg。 加 background-color 打底，避免带透明通道的 PNG 透出底下的 tb.jpg。 */ .hero-bgs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;} .hero-bg{position:absolute;inset:0;background-color:#0a0a0f;background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:0;transition:opacity .8s var(--ease);} .hero-bg.on{opacity:1;} .hero-slides{position:relative;z-index:2;display:grid;width:100%;} .hero-slide{grid-area:1/1;display:flex;align-items:center;opacity:0;pointer-events:none;transition:opacity .8s var(--ease);} .hero-slide.on{opacity:1;pointer-events:auto;} /* 左右切换箭头：相对 .hero 定位，z-index 高于 ::before(0)/::after(1)/grid-bg·glow(2) 用 margin-top 负值做垂直居中（不用 transform，留给 hover 的位移用） */ .hero-arrow{position:absolute;top:50%;z-index:6;width:64px;height:64px;margin-top:-32px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);} .hero-arrow:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55);} .hero-arrow:active{transform:scale(.94);} .hero-arrow--prev{left:36px;} .hero-arrow--next{right:36px;} .hero-arrow--prev:hover{transform:translateX(-4px);} .hero-arrow--next:hover{transform:translateX(4px);} @media (max-width:900px){ .hero-arrow{width:52px;height:52px;margin-top:-26px;} .hero-arrow--prev{left:14px;} .hero-arrow--next{right:14px;} } @media (max-width:560px){ .hero-arrow{width:44px;height:44px;margin-top:-22px;} .hero-arrow--prev{left:8px;} .hero-arrow--next{right:8px;} } .hline-chars{display:inline-block;overflow:hidden;vertical-align:top;} .hline-chars i{display:inline-block;transform:translateY(110%);animation:charUp .8s var(--ease) forwards;} @keyframes charUp{to{transform:translateY(0);}} /* Hero 逐字入场 */ .hero h1 .hr{display:block;} .hero h1 .c{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.02em 0;} .hero h1 .c i{display:block;transform:translateY(125%);animation:charUp .85s var(--ease) forwards;font-style:normal;letter-spacing:-.02em;} .hero h1 .c i.thin{color:#A9AEB9;font-weight:300;} .hero h1 .c i.ac{color:#FF6B62;} @media(max-width:900px){ .hero-stats .hs{flex:1;} .hero{padding-top:110px;} } /* ---------------- Marquee ticker ---------------- */ .ticker{overflow:hidden;background:#fff;border-bottom:1px solid var(--line);padding:15px 0;white-space:nowrap;} .ticker-track{display:inline-flex;align-items:center;animation:tick 26s linear infinite;} .ticker:hover .ticker-track{animation-play-state:paused;} .ticker-track span{display:inline-flex;align-items:center;font-size:14.5px;color:var(--ink-2);font-weight:500;letter-spacing:.08em;} .ticker-track i{width:5px;height:5px;border-radius:50%;background:var(--acc);margin:0 26px;flex-shrink:0;} @keyframes tick{to{transform:translateX(-50%);}} /* ---------------- Sections ---------------- */ .sec{padding:104px 0;} .sec--tint{background:var(--bg1);} /* 首页「更多入口」区块的背景图（2026-09-16 按用户要求换成 images/xkjs.png）。 ⚠️ 故意做成**只挂这一个区块**的 .sec--more，没有写进 .sec--tint： .sec--tint 还被 ZCMSSPage / YWPage / FeaturePanel 用着，改公共类会连带影响那些页面。 ⚠️ 图片路径用绝对 /images/ 与 .hero::before 的 /images/tb.jpg 保持一致 ⇒ 需要在 public/images/ 与 public/vue-app/images/ 各放一份（两个入口 docroot 不同）。 */ .sec--more{background-image:url('/images/xkjs.png');background-size:cover;background-position:center center;background-repeat:no-repeat;} /* 同一区块：头图是深色照片，原来的深色字压上去对比度只剩 1.87:1（手机 1.18:1），几乎看不见 ⇒ 2026-09-16 按用户要求把这块标题区文字改浅色（与 .sec--star.on 同一套取值）。 */ .sec--more .sec-head .sec-title{color:#fff;} .sec--more .sec-head .sec-sub{color:rgba(255,255,255,.7);} .sec--more .sec-head .tag{color:rgba(255,255,255,.6);} .sec-head{max-width:720px;margin-bottom:58px;} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center;} .tag{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);} .tag::before{content:"";width:9px;height:9px;border-radius:2.5px;background:var(--acc);} .sec-head.center .tag::after{content:"";width:9px;height:9px;border-radius:2.5px;background:var(--acc);} .sec-head.center .tag::before{display:none;} .sec-title{font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:16px;color:var(--ink);} .sec-sub{margin-top:16px;color:var(--ink-2);font-size:16.5px;max-width:560px;} .sec-head.center .sec-sub{margin-left:auto;margin-right:auto;} /* ---------------- 首页新闻区：星空粒子背景（2026-09-16 新增，同日【已停用】） ---------------- ⚠️ 2026-09-16 按用户要求把粒子特效从新闻区移除 ⇒ 由 NewsPanel.js 里的 ENABLE_STAR_BG 常量控制， 现在置为 false，模板上的 sec--star / on 类与 .star-bg 层都不会再渲染。 **样式全部保留未删**（项目一贯做法，同 .foot-links）：把 ENABLE_STAR_BG 改回 true 即整套恢复。 插件 jquery-warpdrive（example1 那套特效）往 .star-bg 里塞一个 canvas，自己绘黑底星海。 ⚠️ section 要 position:relative + overflow:hidden： ① 给背景层定位；② 顺带把两栏「向中间汇聚」的动画（translateX ±100%）裁在本区块内， 滑入过程中不会盖到上面的跑马灯。 */ .sec--star{position:relative;overflow:hidden;} /* ⚠️ 2026-09-16：新闻区两栏「向中间汇聚」的入场动画（translateX ±100%）**必须在本区块内裁掉**， 否则动画跑的 1 秒里整页会出现 610px 横向溢出（冒横向滚动条）。 这个裁剪原来顺带挂在 .sec--star 上，粒子特效停用之后 .sec--star 不再渲染 ⇒ 会把裁剪一起带走， 所以独立成 .sec--clip 常挂在新闻区 section 上（与粒子开关无关）。 实测：无裁剪 → 横向溢出 610px；有裁剪 → 0。 */ .sec--clip{position:relative;overflow:hidden;} .sec--star .star-bg{position:absolute;inset:0;z-index:0;} .sec--star .star-bg canvas{display:block;width:100%;height:100%;} .sec--star > .shell{position:relative;z-index:1;} /* ⚠️ 黑底 + 浅色字**只挂在 .on 上**，由 JS 在星空真正画出来之后保留（见 NewsPanel.js 的 setDark）。 原来直接把 #000 写在 .sec--star 上，一旦插件没加载成功（例如脚本路径 404）， 整个新闻区就变成一片什么都没有的纯黑——踩过一次，别再改回去。 */ .sec--star.on{background:#000;} .sec--star.on .sec-head .sec-title{color:#fff;} .sec--star.on .sec-head .sec-sub{color:rgba(255,255,255,.66);} .sec--star.on .sec-head .tag{color:rgba(255,255,255,.58);} .sec-foot{display:flex;align-items:center;gap:26px;margin-top:44px;border-top:1px solid var(--line);padding-top:26px;color:var(--mute);font-size:14px;} .sec-foot .lf{flex:1;letter-spacing:.05em;} /* numbered mini-head */ .mh{display:flex;align-items:baseline;gap:14px;} .mh .no{font-size:13px;font-weight:700;color:var(--acc);letter-spacing:.1em;font-variant-numeric:tabular-nums;} .mh h3{font-size:19px;font-weight:700;letter-spacing:-.01em;} /* ---------------- Biz Grid ---------------- */ .biz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .biz{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px 26px 30px;overflow:hidden;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease);cursor:pointer;} .biz:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh-lg);} .biz .b-no{position:absolute;top:16px;right:22px;font-size:44px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px #E7E8EC;transition:.4s;} .biz:hover .b-no{color:var(--acc-soft);-webkit-text-stroke:1px transparent;} .biz .b-ic{width:48px;height:48px;border-radius:13px;background:var(--bg1);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.4s var(--ease);} .biz:hover .b-ic{background:var(--dark);color:#fff;transform:rotate(-6deg) scale(1.06);} .biz h4{font-size:18.5px;font-weight:700;margin-top:22px;letter-spacing:-.01em;} .biz .en{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:3px;font-weight:600;} .biz p{font-size:14px;color:var(--ink-2);margin-top:12px;line-height:1.65;} .biz .go{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--ink-2);transition:color .25s;} .biz:hover .go{color:var(--acc);} .biz .go svg{transition:transform .3s var(--ease);} .biz:hover .go svg{transform:translateX(4px);} /* ======================================================================== 主营业务四卡 · 复刻老站 zckjyxgs.com 的 section.busi ------------------------------------------------------------------------ 爬取来源（2026-09-10）： 结构 老站首页