/* ============================================================ * 旧共用外壳 layouts/index.html 的「site 风格头尾」 * 全部类名带 pk- 前缀，与旧 CSS(main/styles/index/custom.css，含大量 * .footer/.btn/.wrap/#header 规则)彻底零重名，杜绝相互污染。 * 变量 --pk-* 前缀，深浅色跟随 。 * 图标沿用旧外壳已加载的 FontAwesome5 / iconfont，不引 FA6。 * ============================================================ */ :root{ --pk-blue:#1d4fe8; --pk-blue-d:#1a43c9; --pk-amber:#ffb437; --pk-amber-t:#5b3a00; --pk-ink:#17255c; --pk-text:#3f4d70; --pk-muted:#8a97b8; --pk-line:#e3eaf8; --pk-bg-alt:#f7f9ff; --pk-chip:#eaf0ff; --pk-page:#ffffff; --pk-surface:#ffffff; --pk-shadow:rgba(9,24,74,.10); --pk-shadow-sm:rgba(9,24,74,.06); --pk-rs:7px; } [data-theme="dark"]{ --pk-blue:#3b82f6; --pk-blue-d:#2563eb; --pk-ink:#eaeff8; --pk-text:#b7c2d6; --pk-muted:#7a879f; --pk-line:#28323f; --pk-bg-alt:#121826; --pk-chip:#1e2b45; --pk-page:#0d121c; --pk-surface:#161d2b; --pk-shadow:rgba(0,0,0,.5); --pk-shadow-sm:rgba(0,0,0,.32); } /* 让沿用本外壳的页面为固定导航让出高度 */ body.pk-shell{ padding-top:64px; } /* ---------- 顶部导航(恒白底深字：内页无彩色 hero 打底) ---------- */ .pk-nav{ position:fixed; top:0; left:0; right:0; z-index:1000; background:var(--pk-page); box-shadow:0 2px 18px var(--pk-shadow-sm); transition:background .3s, box-shadow .3s; } .pk-nav *{ box-sizing:border-box; } .pk-nav-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:16px; height:64px; } .pk-logo{ display:flex; align-items:center; gap:9px; font-size:18px; font-weight:500; color:var(--pk-ink); letter-spacing:1px; text-decoration:none; float:none; } .pk-logo-mark{ width:28px; height:28px; border-radius:7px; overflow:hidden; flex:0 0 auto; background:linear-gradient(135deg,var(--pk-blue),#5b86ff); box-shadow:0 4px 12px rgba(29,79,232,.28); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; } .pk-logo-mark i{ color:#fff; } .pk-logo-mark img{ width:100%; height:100%; object-fit:cover; } .pk-logo-text{ color:var(--pk-ink); font-weight:500; white-space:nowrap; } .pk-logo-img{ height:30px; max-width:180px; display:block; object-fit:contain; } .pk-menu{ display:flex; align-items:center; gap:22px; margin-left:14px; } .pk-menu a{ font-size:14px; color:var(--pk-text); transition:color .2s; text-decoration:none; } .pk-menu a:hover{ color:var(--pk-blue); } /* 导航分组下拉（与首页同款）*/ .pk-drop{ position:relative; display:inline-flex; align-items:center; } .pk-drop-t{ font-size:14px; color:var(--pk-text); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:color .2s; } .pk-drop-t::after{ content:''; width:6px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); margin-top:-3px; opacity:.7; transition:transform .2s; } .pk-drop:hover .pk-drop-t{ color:var(--pk-blue); } .pk-drop:hover .pk-drop-t::after{ transform:rotate(225deg); margin-top:2px; } .pk-drop::before{ content:''; position:absolute; top:100%; left:0; right:0; height:14px; } .pk-drop-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); min-width:174px; background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:12px; box-shadow:0 16px 40px var(--pk-shadow); padding:8px; opacity:0; visibility:hidden; transition:.2s; z-index:1001; } .pk-drop:hover .pk-drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(6px); } .pk-drop-menu a{ display:block; padding:9px 14px; font-size:13.5px; color:var(--pk-text); border-radius:8px; white-space:nowrap; text-decoration:none; } .pk-drop-menu a:hover{ background:var(--pk-bg-alt); color:var(--pk-blue); } .pk-act{ margin-left:auto; display:flex; align-items:center; gap:10px; } .pk-toggle{ display:none; margin-left:auto; background:none; border:0; color:var(--pk-ink); font-size:22px; cursor:pointer; line-height:1; } .pk-theme{ width:34px; height:34px; border-radius:8px; border:1px solid var(--pk-line); background:transparent; color:var(--pk-text); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:.2s; } .pk-theme:hover{ background:var(--pk-bg-alt); color:var(--pk-blue); } .pk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 15px; border-radius:var(--pk-rs); font-size:13px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:.2s; white-space:nowrap; text-decoration:none; } .pk-btn-amber{ background:var(--pk-amber); color:var(--pk-amber-t); } .pk-btn-amber:hover{ filter:brightness(1.05); color:var(--pk-amber-t); } .pk-reg{ border:1px solid var(--pk-blue); color:var(--pk-blue); background:transparent; } .pk-reg:hover{ background:var(--pk-chip); color:var(--pk-blue); } /* 已登录用户下拉 */ .pk-user{ position:relative; } .pk-user-menu{ position:absolute; right:0; top:46px; min-width:172px; background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:10px; box-shadow:0 16px 40px var(--pk-shadow); padding:6px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s; } .pk-user:hover .pk-user-menu{ opacity:1; visibility:visible; transform:none; } .pk-user-head{ padding:10px 12px 8px; font-size:13px; color:var(--pk-ink); border-bottom:1px solid var(--pk-line); margin-bottom:4px; } .pk-user-head b{ font-weight:600; } .pk-user-menu a{ display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:13px; color:var(--pk-text); border-radius:7px; text-decoration:none; } .pk-user-menu a:hover{ background:var(--pk-bg-alt); color:var(--pk-blue); } @media (max-width:900px){ .pk-menu{ display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--pk-surface); border-top:1px solid var(--pk-line); box-shadow:0 12px 30px var(--pk-shadow); margin:0; } .pk-menu a{ padding:14px 24px; border-bottom:1px solid var(--pk-line); } .pk-nav.pk-open .pk-menu{ display:flex; } .pk-drop{ display:block; } .pk-drop-t{ padding:14px 24px; color:var(--pk-text); } .pk-drop-t::after{ margin-left:auto; } .pk-drop::before{ display:none; } .pk-drop-menu{ position:static; transform:none !important; opacity:1; visibility:visible; box-shadow:none; border:0; background:transparent; padding:0 0 6px 24px; min-width:0; } .pk-drop-menu a{ padding:11px 24px; } .pk-toggle{ display:block; } .pk-act{ margin-left:0; } } /* ---------- 页脚 ---------- */ .pk-footer{ background:#0c1636; color:#8091c4; } .pk-footer *{ box-sizing:border-box; } [data-theme="dark"] .pk-footer{ background:#070d20; } .pk-footer-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; } .pk-footer-top{ display:grid; grid-template-columns:1.15fr 3fr; gap:56px; padding:56px 0 44px; align-items:start; } .pk-flogo{ display:flex; align-items:center; gap:10px; color:#fff; font-size:18px; font-weight:600; } .pk-flogo .pk-logo-mark{ width:32px; height:32px; font-size:16px; box-shadow:none; } .pk-fdesc{ margin:16px 0 22px; font-size:13px; line-height:1.85; color:#6f80b6; max-width:330px; } .pk-fcontact{ display:flex; flex-direction:column; gap:11px; } .pk-fcontact a{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:#aab6dd; width:max-content; transition:.2s; text-decoration:none; } .pk-fcontact a i{ width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:13px; color:#6f8ce0; transition:.2s; } .pk-fcontact a:hover{ color:#fff; } .pk-fcontact a:hover i{ background:var(--pk-blue); color:#fff; } .pk-fcols{ display:flex; flex-wrap:wrap; gap:30px 40px; } .pk-fcol{ flex:1 1 140px; min-width:140px; max-width:220px; } .pk-fcol h4{ margin:0 0 18px; font-size:14px; color:#eaf0ff; font-weight:600; } .pk-flinks{ display:flex; flex-direction:column; } .pk-flinks a{ display:block; font-size:13px; color:#7f90c2; padding:7px 0; transition:.2s; text-decoration:none; } .pk-flinks a:hover{ color:#fff; transform:translateX(3px); } .pk-fbar{ border-top:1px solid rgba(255,255,255,.07); } .pk-fbar-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1180px; margin:0 auto; padding:18px 24px; font-size:12px; color:#6274a8; flex-wrap:wrap; } .pk-fbar-in a{ color:#7f90c2; text-decoration:none; } .pk-fbar-in a:hover{ color:#fff; } .pk-fbeian{ color:#586aa0; } @media (max-width:900px){ .pk-footer-top{ grid-template-columns:1fr; gap:32px; padding:40px 0 28px; } .pk-fcols{ gap:20px 26px; } .pk-fbar-in{ justify-content:center; text-align:center; } } /* ---------- 浮动客服 ---------- */ .pk-chat{ position:fixed; right:18px; bottom:26px; z-index:900; display:flex; flex-direction:column; gap:10px; } .pk-chat *{ box-sizing:border-box; } .pk-chat-item{ position:relative; } .pk-chat-btn{ width:50px; height:50px; border-radius:14px; background:var(--pk-surface); border:1px solid var(--pk-line); display:flex; align-items:center; justify-content:center; color:var(--pk-blue); font-size:20px; cursor:pointer; box-shadow:0 8px 22px rgba(9,24,74,.12); transition:.2s; text-decoration:none; } .pk-chat-btn:hover{ background:var(--pk-blue); color:#fff; border-color:var(--pk-blue); } .pk-chat-pop{ position:absolute; right:60px; top:50%; transform:translateY(-50%) translateX(8px); min-width:180px; background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:14px; padding:14px 16px; box-shadow:0 16px 40px rgba(9,24,74,.18); opacity:0; visibility:hidden; pointer-events:none; transition:.22s; } .pk-chat-item:hover .pk-chat-pop{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(-50%) translateX(0); } .pk-chat-pop::before{ content:''; position:absolute; right:-18px; top:0; bottom:0; width:18px; } .pk-chat-pop::after{ content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%) rotate(45deg); width:12px; height:12px; background:var(--pk-surface); border-right:1px solid var(--pk-line); border-top:1px solid var(--pk-line); } .pk-cp-title{ font-size:12px; color:var(--pk-muted); margin-bottom:6px; white-space:nowrap; } .pk-cp-phone{ font-size:19px; font-weight:700; color:var(--pk-ink); white-space:nowrap; } .pk-cp-link{ display:flex; align-items:center; justify-content:space-between; gap:22px; padding:7px 0; font-size:13px; color:var(--pk-text); border-top:1px solid var(--pk-line); text-decoration:none; } .pk-cp-link:first-of-type{ border-top:0; } .pk-cp-link:hover{ color:var(--pk-blue); } .pk-cp-link b{ color:var(--pk-blue); font-weight:600; } .pk-chat-qr .pk-cp-qrs{ display:flex; gap:14px; } .pk-chat-qr .pk-cp-qr{ text-align:center; } .pk-chat-qr .pk-cp-qr img{ width:126px; height:126px; object-fit:contain; border-radius:10px; display:block; background:#fff; border:1px solid var(--pk-line); } .pk-chat-qr .pk-cp-qr span{ display:block; font-size:12px; color:var(--pk-muted); margin-top:7px; white-space:nowrap; }