/* ========================================================================= 东旭激光设备 · 运营中心 · 网站模板样式 (CMS 适配版) ------------------------------------------------------------------------- 1) 色系切换：由 HTML 标签 控制，共 10 套： —— 深色系 —— —— 亮色系 —— 1 = 激光橙（默认） 2 = 科技蓝 7 = 纯白·靛蓝 3 = 青蓝 4 = 中国红 8 = 浅灰·石墨 5 = 翡翠绿 6 = 紫罗兰 9 = 米白·砖橙 10 = 暗夜靛（深底冷紫） 另支持 URL 参数预览：index.html?theme=7 2) 每套色系自带的变量（改色只改对应 [data-theme="n"] 那一行）： --bg / --bg2 / --pn 整页底色 / 次级底色 / 卡片底色 --bgr / --bg2r 上面两者的 RGB 三通道（半透明导航栏、图片压暗层用） --tx / --mu / --dm 正文 / 次要文字 / 更弱文字（深色系用浅字，亮色系用深字） --ln 分隔线与边框（深色系用白透明，亮色系用黑透明） --ac / --ac2 / --acr 主色 / 辅色 / 主色 RGB 三通道 --onac 主色按钮上的文字颜色（浅色主色配深字，深色主色配白字） 3) 想再加一套：复制一整行 html[data-theme="11"]{...}， 然后把 index.html 头部脚本里的 MAX 改成 11，并在 TITLE 里加个名称即可。 ========================================================================= */ :root{ --bg:#0b0e14;--bg2:#0f1420;--pn:#151c29;--ln:rgba(255,255,255,.08); --tx:#e9eef6;--mu:#9aa6b8;--dm:#6f7b8e;--rd:4px; --ac:#ff8a1f;--ac2:#ffc35c;--acr:255,138,31;--onac:#16130d; --bgr:11,14,20; /* --bg 的 RGB：半透明导航栏 / 图片压暗层 */ --bg2r:15,20,32; /* --bg2 的 RGB */ --grid:rgba(255,255,255,.035); /* hero 网格线（亮色系改深色线） */ --lns:rgba(var(--acr),.45); } /* =========================== 深色系（1~6、10） =========================== */ /* ---- 色系 1：激光橙（默认，冷调深灰底） ---- */ html[data-theme="1"]{--bg:#0b0e14;--bg2:#0f1420;--pn:#151c29;--bgr:11,14,20;--bg2r:15,20,32;--tx:#e9eef6;--mu:#9aa6b8;--dm:#6f7b8e;--ln:rgba(255,255,255,.08);--ac:#ff8a1f;--ac2:#ffc35c;--acr:255,138,31;--onac:#16130d} /* ---- 色系 2：科技蓝（深藏青底） ---- */ html[data-theme="2"]{--bg:#070d1a;--bg2:#0b1424;--pn:#111d33;--bgr:7,13,26;--bg2r:11,20,36;--tx:#e9eef6;--mu:#9aa6b8;--dm:#6f7b8e;--ln:rgba(255,255,255,.08);--ac:#2f7dff;--ac2:#7fb4ff;--acr:47,125,255;--onac:#ffffff} /* ---- 色系 3：青蓝（深青墨底） ---- */ html[data-theme="3"]{--bg:#04100f;--bg2:#071a1c;--pn:#0c2628;--bgr:4,16,15;--bg2r:7,26,28;--tx:#e9eef6;--mu:#9aa6b8;--dm:#6f7b8e;--ln:rgba(255,255,255,.08);--ac:#00b6c9;--ac2:#5fe0ee;--acr:0,182,201;--onac:#ffffff} /* ---- 色系 4：中国红（深酒红底） ---- */ html[data-theme="4"]{--bg:#12080a;--bg2:#1a0d10;--pn:#261316;--bgr:18,8,10;--bg2r:26,13,16;--tx:#e9eef6;--mu:#9aa6b8;--dm:#6f7b8e;--ln:rgba(255,255,255,.08);--ac:#e63232;--ac2:#ff7a70;--acr:230,50,50;--onac:#ffffff} /* ---- 色系 5：翡翠绿（深墨绿底） ---- */ html[data-theme="5"]{--bg:#05110c;--bg2:#081a12;--pn:#0e2618;--bgr:5,17,12;--bg2r:8,26,18;--tx:#e9eef6;--mu:#9aa6b8;--dm:#6f7b8e;--ln:rgba(255,255,255,.08);--ac:#1fae6b;--ac2:#6ee2a8;--acr:31,174,107;--onac:#ffffff} /* ---- 色系 6：紫罗兰（深葡萄紫底） ---- */ html[data-theme="6"]{--bg:#0d0918;--bg2:#130e22;--pn:#1c1531;--bgr:13,9,24;--bg2r:19,14,34;--tx:#e9eef6;--mu:#9aa6b8;--dm:#6f7b8e;--ln:rgba(255,255,255,.08);--ac:#8b5cf6;--ac2:#c4aaff;--acr:139,92,246;--onac:#ffffff} /* ---- 色系 10：暗夜靛（深底冷紫，亮色系之外的第三组深色） ---- */ html[data-theme="10"]{--bg:#080c18;--bg2:#0c1224;--pn:#131b33;--bgr:8,12,24;--bg2r:12,18,36;--tx:#e9eef6;--mu:#9aa6b8;--dm:#6f7b8e;--ln:rgba(255,255,255,.08);--ac:#6d8cff;--ac2:#b3c7ff;--acr:109,140,255;--onac:#0b1024} /* =========================== 亮色系（7~9） =========================== 亮色系要点：底色浅 → 文字改成深色、分隔线改成黑透明、图片压暗层改成白透明； 同时主色换成同色系里更深的一档，保证按钮上的白字/深字对比度达标。 */ /* ---- 色系 7：纯白·靛蓝（通透明亮） ---- */ html[data-theme="7"]{--bg:#ffffff;--bg2:#f4f6fb;--pn:#ffffff;--bgr:255,255,255;--bg2r:244,246,251;--tx:#141821;--mu:#525c6e;--dm:#7d8798;--ln:rgba(20,24,33,.12);--ac:#3157e0;--ac2:#4a6cf0;--acr:49,87,224;--onac:#ffffff} /* ---- 色系 8：浅灰·石墨（朴素工业感） ---- */ html[data-theme="8"]{--bg:#eef0f4;--bg2:#f8f9fb;--pn:#ffffff;--bgr:238,240,244;--bg2r:248,249,251;--tx:#1b2028;--mu:#545d6b;--dm:#828b99;--ln:rgba(27,32,40,.13);--ac:#3f4a5a;--ac2:#5d6b80;--acr:63,74,90;--onac:#ffffff} /* ---- 色系 9：米白·砖橙（温暖亲和） ---- */ html[data-theme="9"]{--bg:#fdf8f1;--bg2:#f7efe3;--pn:#ffffff;--bgr:253,248,241;--bg2r:247,239,227;--tx:#221a12;--mu:#6b5a48;--dm:#98866f;--ln:rgba(34,26,18,.13);--ac:#c2510d;--ac2:#e0701d;--acr:194,81,13;--onac:#ffffff} /* 深色系统一用白色网格线，亮色系统一用深色网格线 */ html[data-theme="1"],html[data-theme="2"],html[data-theme="3"],html[data-theme="4"], html[data-theme="5"],html[data-theme="6"],html[data-theme="10"]{--grid:rgba(255,255,255,.035)} html[data-theme="7"],html[data-theme="8"],html[data-theme="9"]{--grid:rgba(20,24,33,.05)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:86px} body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.7;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .ct{width:100%;max-width:1160px;margin:0 auto;padding:0 20px} /* topbar */ .tp{background:var(--bg2);border-bottom:1px solid var(--ln);font-size:13px;color:var(--mu)} .tp .ct{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;align-items:center;min-height:40px;padding-top:6px;padding-bottom:6px} .ti{display:flex;align-items:center;gap:7px} .ti b{color:var(--ac2);font-weight:700} .tr{display:flex;align-items:center;gap:7px} /* header */ .hd{position:sticky;top:0;z-index:50;background:rgba(var(--bgr),.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)} .nv{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:16px} .bd{display:flex;align-items:center;gap:12px;min-width:0} .bm{flex:none;width:42px;height:42px;border:1px solid var(--lns);border-radius:var(--rd);display:grid;place-items:center;background:linear-gradient(160deg,rgba(var(--acr),.16),rgba(var(--acr),.02))} .bm img{width:24px;height:24px} .bn{line-height:1.25} .bn .c{display:block;font-size:18px;font-weight:900;letter-spacing:.5px} .bn .e{display:block;font-size:11px;color:var(--mu);letter-spacing:2px;text-transform:uppercase} .mn{display:none} .mn a{position:relative;font-size:15px;color:var(--tx);padding:6px 2px;white-space:nowrap} .mn a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .2s ease} .mn a:hover::after,.mn a.active::after{transform:scaleX(1)} .nc{display:none;align-items:center;gap:8px;background:var(--ac);color:var(--onac);font-weight:700;font-size:15px;padding:9px 16px;border-radius:var(--rd)} .nc img{flex:none;width:16px;height:16px} .nc:hover{background:var(--ac2)} .br{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px} .br span{width:24px;height:2px;background:var(--tx);display:block} @media(min-width:1100px){.mn{display:flex;gap:18px}.br{display:none}} @media(min-width:1200px){.nc{display:inline-flex}} /* 移动端展开的菜单面板（脚本只切换 .open 类，配色走主题变量） */ .mn.open{display:flex;flex-direction:column;gap:14px;position:absolute;left:20px;right:20px;top:66px;z-index:60;padding:16px;background:var(--pn);border:1px solid var(--ln);box-shadow:0 18px 40px rgba(0,0,0,.45)} /* hero */ .hr{position:relative;background:var(--bg2);overflow:hidden} .hr::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 78% 8%,rgba(var(--acr),.16),transparent 62%),radial-gradient(700px 500px at 8% 90%,rgba(var(--acr),.10),transparent 60%);pointer-events:none} .hg{position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:52px 52px;pointer-events:none} .hi{position:relative;padding:54px 26px 56px;display:grid;grid-template-columns:1fr;gap:34px} .ey{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--ac2);font-weight:700} .ey::before{content:"";width:30px;height:2px;background:var(--ac)} .hc h1{font-size:30px;line-height:1.3;font-weight:900;margin:16px 0 14px} .hc h1 .hl{color:var(--ac2)} .su{color:var(--mu);font-size:15px;max-width:600px} .hm{margin-top:22px;border-left:3px solid var(--ac);padding:4px 0 4px 14px;font-size:13.5px;color:var(--mu);display:grid;gap:4px} .hm b{color:var(--tx);font-weight:700} .hst{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln);border:1px solid var(--ln)} .ht{background:rgba(var(--bg2r),.9);padding:18px 10px;text-align:center} .ht .nu{font-size:30px;font-weight:900;color:var(--ac2);line-height:1} .ht .nu small{font-size:15px;font-weight:700} .ht .lb{font-size:12px;color:var(--mu);margin-top:7px} .hf{position:relative} .hf img{width:100%;border:1px solid var(--ln);border-radius:2px;filter:saturate(1.05)} .hf .tg{position:absolute;left:-6px;bottom:16px;background:var(--ac);color:var(--onac);font-weight:700;font-size:13px;padding:7px 14px;letter-spacing:1px} @media(min-width:900px){.hi{grid-template-columns:1.05fr .95fr;align-items:center;padding:78px 0 82px}.hc h1{font-size:44px}} /* section */ .sc{padding:60px 0} .al{background:var(--bg2);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)} .sh{max-width:720px;margin-bottom:34px} .sh .ey{margin-bottom:14px} .sh h2{font-size:26px;font-weight:900;line-height:1.35;margin-bottom:12px} .sh p{color:var(--mu);font-size:14.5px} .sh.c{text-align:center;margin-left:auto;margin-right:auto} .sh.c .ey{justify-content:center} .sh.c .ey::before{display:none} .sh.c .ey::after{content:"";width:30px;height:2px;background:var(--ac)} /* about */ .ag{display:grid;grid-template-columns:1fr;gap:30px;align-items:center} .ac h2{font-size:26px;font-weight:900;line-height:1.35;margin:14px 0 16px} .ac .ld{font-size:16px;font-weight:700;margin-bottom:14px} .ac p{color:var(--mu);font-size:14.5px;margin-bottom:12px} .company-intro .ac{min-width:0} .company-intro .ac h2{font-size:clamp(22px,2.4vw,30px);overflow-wrap:anywhere} .company-intro .shop-article-content{font-size:15px;line-height:2;margin-top:0} .company-intro .shop-article-content p{font-size:inherit;line-height:inherit;margin-bottom:16px;text-align:justify} .ac .sv{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .ac .sv span{font-size:12.5px;color:var(--ac2);border:1px solid var(--lns);background:rgba(var(--acr),.06);padding:4px 10px;border-radius:2px;letter-spacing:.5px} .as{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .ast{border:1px solid var(--ln);background:var(--pn);padding:20px 18px;position:relative;overflow:hidden} .ast::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac)} .ast .nu{font-size:32px;font-weight:900;color:var(--ac2);line-height:1} .ast .nu small{font-size:15px} .ast .lb{font-size:13px;color:var(--mu);margin-top:8px} @media(min-width:900px){.ag{grid-template-columns:1.1fr .9fr}} /* product gallery */ .gt{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px} .gb{background:var(--pn);border:1px solid var(--ln);color:var(--mu);font-size:15px;font-weight:700;padding:11px 24px;cursor:pointer;border-radius:2px;transition:all .2s ease;font-family:inherit} .gb:hover{border-color:var(--lns);color:var(--tx)} .gb.active{background:var(--ac);border-color:var(--ac);color:var(--onac)} .gg{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .gg[hidden]{display:none} .gi{position:relative;overflow:hidden;border:1px solid var(--ln);background:var(--pn)} .gi img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .45s ease;display:block} .gi:hover img{transform:scale(1.06)} .gi figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;background:linear-gradient(transparent,rgba(var(--bgr),.94))} .gi .c1{display:block;font-size:12.5px;color:var(--tx);font-weight:700;line-height:1.4} .gi .kw{display:block;font-size:10.5px;color:var(--ac2);line-height:1.5;margin-top:2px} .gc{margin-top:22px;text-align:center;font-size:13px;color:var(--dm)} .gc b{color:var(--ac2)} @media(min-width:500px){.gg{grid-template-columns:repeat(3,1fr)}} @media(min-width:768px){.gg{grid-template-columns:repeat(4,1fr)}} /* industry */ .ind{margin-top:34px;background:var(--bg2);border:1px solid var(--ln);padding:20px 22px} .ind .it{font-size:13px;letter-spacing:2px;color:var(--ac2);font-weight:700;margin-bottom:12px} .ind .itg{display:flex;flex-wrap:wrap;gap:8px} .ind .itg span{font-size:12.5px;color:var(--mu);background:rgba(255,255,255,.03);border:1px solid var(--ln);padding:4px 11px;border-radius:2px} /* strength */ .sg{display:grid;grid-template-columns:1fr;gap:16px} .scd{border:1px solid var(--ln);background:var(--pn);padding:24px 22px;position:relative} .scd .no{font-size:12px;letter-spacing:2px;color:var(--dm);font-weight:700} .scd h3{font-size:18px;font-weight:900;margin:6px 0 10px} .scd p{color:var(--mu);font-size:13.5px} .scd .ba{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac)} @media(min-width:768px){.sg{grid-template-columns:repeat(2,1fr)}} /* process */ .sr{display:grid;grid-template-columns:1fr;gap:18px} .st{border:1px solid var(--ln);background:var(--bg2);padding:22px 20px;position:relative} .st .no{font-size:38px;font-weight:900;color:rgba(var(--acr),.22);line-height:1;font-family:Georgia,serif} .st h3{font-size:17px;font-weight:900;margin:8px 0 8px} .st p{color:var(--mu);font-size:13.5px} @media(min-width:768px){.sr{grid-template-columns:repeat(4,1fr);gap:14px}.st{border-top:2px solid var(--ac)}} /* faq */ .fl{max-width:860px;margin:0 auto;display:grid;gap:12px} .fq{background:var(--pn);border:1px solid var(--ln)} .fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-size:15.5px;font-weight:700} .fq summary::-webkit-details-marker{display:none} .fq summary .q{color:var(--ac);font-weight:900;margin-right:10px} .fq summary .ic{flex:none;width:22px;height:22px;position:relative} .fq summary .ic::before,.fq summary .ic::after{content:"";position:absolute;background:var(--ac);transition:transform .2s ease} .fq summary .ic::before{left:3px;right:3px;top:10px;height:2px} .fq summary .ic::after{top:3px;bottom:3px;left:10px;width:2px} .fq[open] summary .ic::after{transform:scaleY(0)} .fa{padding:0 20px 20px;color:var(--mu);font-size:14px;border-top:1px dashed var(--ln);margin:0 20px;padding-left:0;padding-right:0} /* shop article and uploaded product images */ .shop-article-content{color:var(--mu);font-size:14.5px;line-height:1.9;overflow-wrap:anywhere;margin-top:16px} .shop-article-content h2{font-size:26px;color:var(--tx);line-height:1.4;margin:0 0 20px} .shop-article-content h3{font-size:19px;color:var(--tx);margin:22px 0 12px} .shop-article-content p{margin:0 0 14px} .shop-article-content img,.shop-article-content video,.shop-article-content iframe{max-width:100%;height:auto} .shop-article-content table{display:block;max-width:100%;overflow-x:auto} .shop-article-content ul,.shop-article-content ol{padding-left:24px;margin-bottom:14px} .shop-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .shop-products .gi img{height:auto;aspect-ratio:4/3;object-fit:cover} .shop-products .gi figcaption{position:static;padding:12px;background:var(--pn);border-top:1px solid var(--ln)} .shop-products .gi .c1{font-size:13px;line-height:1.6;overflow-wrap:anywhere} .product-categories.with-showcase{margin-top:32px;padding-top:26px;border-top:1px solid var(--ln)} @media(min-width:500px){.shop-products{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:768px){.shop-products{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(min-width:1100px){.shop-products{grid-template-columns:repeat(5,minmax(0,1fr))}} /* contact / footer */ .ctc{background:var(--bg2);border-top:1px solid var(--ln);padding:60px 0 44px} .ctc .sh{margin-bottom:26px} .cg{display:grid;grid-template-columns:1fr;gap:34px} .ci{display:grid;gap:12px;color:var(--mu);font-size:14.5px} .ci .rw{display:flex;gap:10px;align-items:flex-start} .ci .k{color:var(--dm);flex:none;width:88px} .ci .v b{color:var(--ac2);font-weight:800} .cs p{color:var(--mu);font-size:14px;margin-bottom:14px} .cs .nm{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px} .cs .nb{flex:1 1 150px;border:1px solid var(--ln);background:var(--pn);padding:16px 16px;text-align:center} .cs .nb .lg{font-size:24px;font-weight:900;color:var(--ac2)} .cs .nb .sm{font-size:12.5px;color:var(--mu)} .cp{display:inline-flex;align-items:center;gap:10px;background:var(--ac);color:var(--onac);font-weight:900;font-size:16px;padding:12px 22px;border-radius:var(--rd)} .cp img{width:18px;height:18px} .cp:hover{background:var(--ac2)} .ft{background:var(--bg);border-top:1px solid var(--ln);padding:22px 0;font-size:12.5px;color:var(--dm);text-align:center} .ft b{color:var(--mu)} .ft p+p{margin-top:6px} @media(min-width:900px){.cg{grid-template-columns:1fr 1fr;align-items:start}} /* ------------------------------------------------------------------------- 友情链接（CMS 可替换区域） 特点：字号小(.lk)、行内紧凑排列、间距小、可放大批链接不撑高页面 可选参数：给 .lkg 加 class="lkg lkg-2" 变为两列，class="lkg lkg-1" 变为单列 ------------------------------------------------------------------------- */ .lk{margin-top:20px;padding-top:14px;border-top:1px solid var(--ln);text-align:left} .lk .lkh{font-size:12px;font-weight:700;color:var(--mu);letter-spacing:.5px;margin-bottom:5px} .lk .lkh span{color:var(--ac2)} .lkg{display:flex;flex-wrap:wrap;align-items:center;gap:1px 8px} .lkg a{font-size:12px;line-height:1.45;color:var(--dm);padding:0;white-space:nowrap;transition:color .18s ease} .lkg a:hover{color:var(--ac);text-decoration:underline;text-underline-offset:2px} .lkg a::after{content:"|";color:var(--ln);margin-left:8px;font-size:11px} .lkg a:last-child::after{content:"";margin:0} /* 大量链接时可选：定宽多列，行距更紧凑 */ .lkg.lkg-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px} .lkg.lkg-1{display:grid;grid-template-columns:1fr;gap:0} .lkg.lkg-2 a,.lkg.lkg-1 a{overflow:hidden;text-overflow:ellipsis} @media(min-width:768px){ .lk{margin-top:24px;padding-top:14px} .lk .lkh{margin-bottom:6px} } /* 色系预览角标（仅在 URL 带 ?theme=n 时由脚本创建，点击可循环 1~6 预览，CMS 站点不会出现） */ .tsw{position:fixed;right:12px;bottom:12px;z-index:99;background:rgba(var(--bgr),.92);border:1px solid var(--ln);border-radius:var(--rd);padding:8px 12px;font-size:12px;color:var(--mu);display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none} .tsw:hover{border-color:var(--lns)} .tsw b{color:var(--ac2)} .tsw i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ac);margin-right:6px;vertical-align:middle}