Files
web_template/web/dist/site1/index.html
2026-07-10 10:06:56 +00:00

1069 lines
53 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Nexus 科技集团 - 创新驱动 · 智领未来">
<title>Nexus 科技集团</title>
<style>
/* ============ CSS 变量 / 主题 ============ */
:root{
--primary:#0A4D8C;
--primary-dark:#062E54;
--primary-light:#0E6BC0;
--secondary:#00D4FF;
--accent:#00D4FF;
--bg-deep:#04101f;
--bg:#06182e;
--bg-soft:#0a2142;
--text:#eaf2fb;
--text-muted:#8fb0d4;
--text-dim:#5d7ba0;
--glass-bg:rgba(255,255,255,0.055);
--glass-bg-strong:rgba(255,255,255,0.09);
--glass-border:rgba(255,255,255,0.14);
--glass-border-hover:rgba(0,212,255,0.55);
--shadow:0 18px 50px rgba(0,0,0,0.45);
--radius:18px;
--radius-sm:12px;
--maxw:1200px;
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ============ Reset / 基础 ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
background:var(--bg-deep);
color:var(--text);
line-height:1.7;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
body::before{
content:"";
position:fixed;inset:0;z-index:-2;
background:
radial-gradient(1100px 700px at 12% -5%,rgba(0,212,255,0.16),transparent 60%),
radial-gradient(900px 600px at 92% 8%,rgba(14,107,192,0.22),transparent 55%),
radial-gradient(1000px 800px at 50% 110%,rgba(10,77,140,0.30),transparent 60%),
linear-gradient(180deg,#04101f 0%,#06182e 45%,#04101f 100%);
}
body::after{
content:"";
position:fixed;inset:0;z-index:-1;opacity:0.4;pointer-events:none;
background-image:
linear-gradient(rgba(0,212,255,0.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,212,255,0.04) 1px,transparent 1px);
background-size:54px 54px;
mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 80%);
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
section{position:relative}
/* ============ 布局工具 ============ */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section-pad{padding:110px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 64px}
.eyebrow{
display:inline-block;font-size:13px;letter-spacing:3px;text-transform:uppercase;
color:var(--secondary);font-weight:600;margin-bottom:16px;
padding:6px 16px;border:1px solid rgba(0,212,255,0.35);border-radius:50px;
background:rgba(0,212,255,0.06);
}
.section-title{
font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.25;letter-spacing:-0.5px;
background:linear-gradient(120deg,#fff 30%,#7fd6ff 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.section-sub{color:var(--text-muted);margin-top:16px;font-size:16px}
/* ============ 玻璃卡片基础 ============ */
.glass{
background:var(--glass-bg);
border:1px solid var(--glass-border);
border-radius:var(--radius);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
box-shadow:var(--shadow);
}
/* ============ 滚动渐入 ============ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}
/* ============ 导航栏 ============ */
.nav{
position:fixed;top:0;left:0;right:0;z-index:1000;
transition:all .35s var(--ease);
}
.nav-inner{
max-width:var(--maxw);margin:0 auto;padding:18px 24px;
display:flex;align-items:center;justify-content:space-between;
}
.nav.scrolled{
background:rgba(4,16,31,0.72);
backdrop-filter:blur(18px) saturate(160%);
-webkit-backdrop-filter:blur(18px) saturate(160%);
border-bottom:1px solid rgba(255,255,255,0.08);
box-shadow:0 8px 30px rgba(0,0,0,0.35);
}
.nav.scrolled .nav-inner{padding:13px 24px}
.logo{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo-mark{
width:40px;height:40px;border-radius:11px;flex:none;
background:linear-gradient(135deg,var(--secondary),var(--primary));
display:grid;place-items:center;
box-shadow:0 6px 18px rgba(0,212,255,0.4);
}
.logo-mark svg{width:22px;height:22px}
.logo-text{font-size:19px;font-weight:800;letter-spacing:.5px}
.logo-text span{color:var(--secondary)}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{
position:relative;padding:9px 16px;border-radius:10px;font-size:15px;font-weight:500;
color:var(--text-muted);transition:all .25s var(--ease);
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,0.06)}
.nav-links a::after{
content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
width:0;height:2px;border-radius:2px;background:var(--secondary);
transition:width .25s var(--ease);
}
.nav-links a:hover::after{width:18px}
.nav-cta{
margin-left:10px;padding:10px 22px;border-radius:10px;font-weight:600;font-size:14px;
background:linear-gradient(135deg,var(--secondary),var(--primary-light));
color:#04101f;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
box-shadow:0 8px 22px rgba(0,212,255,0.3);
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,212,255,0.45)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:#fff;border-radius:2px;transition:all .3s var(--ease)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ============ Hero ============ */
.hero{
min-height:100vh;display:flex;align-items:center;
position:relative;overflow:hidden;padding:120px 0 80px;
}
.particles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.particle{
position:absolute;border-radius:50%;
background:radial-gradient(circle,var(--secondary) 0%,transparent 70%);
opacity:0;animation:floatUp linear infinite;
}
@keyframes floatUp{
0%{transform:translateY(20px) scale(.6);opacity:0}
10%{opacity:.7}
90%{opacity:.5}
100%{transform:translateY(-110vh) scale(1);opacity:0}
}
.hero-orb{
position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;
animation:drift 16s ease-in-out infinite alternate;
}
.hero-orb.o1{width:420px;height:420px;background:rgba(0,212,255,0.18);top:-80px;left:-60px}
.hero-orb.o2{width:520px;height:520px;background:rgba(14,107,192,0.22);bottom:-140px;right:-80px;animation-delay:-6s}
@keyframes drift{
0%{transform:translate(0,0)}
100%{transform:translate(40px,30px)}
}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hero-badge{
display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:50px;
background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.3);
font-size:13px;color:var(--secondary);font-weight:600;margin-bottom:28px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 0 rgba(0,212,255,0.6);animation:pulse 2s infinite}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(0,212,255,0.6)}
70%{box-shadow:0 0 0 12px rgba(0,212,255,0)}
100%{box-shadow:0 0 0 0 rgba(0,212,255,0)}
}
.hero h1{
font-size:clamp(38px,6.5vw,76px);font-weight:900;line-height:1.1;letter-spacing:-1.5px;
margin-bottom:24px;max-width:920px;
}
.hero h1 .grad{
background:linear-gradient(120deg,var(--secondary) 0%,#7fe9ff 50%,var(--secondary) 100%);
background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
animation:shine 5s linear infinite;
}
@keyframes shine{0%{background-position:0% center}100%{background-position:200% center}}
.hero p.lead{
font-size:clamp(16px,2vw,20px);color:var(--text-muted);max-width:680px;margin-bottom:40px;
}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap}
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:15px 34px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;
transition:all .3s var(--ease);border:none;
}
.btn-primary{
background:linear-gradient(135deg,var(--secondary),var(--primary-light));
color:#04101f;box-shadow:0 10px 30px rgba(0,212,255,0.35);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,212,255,0.5)}
.btn-ghost{
background:rgba(255,255,255,0.05);color:#fff;border:1px solid var(--glass-border);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:var(--secondary);transform:translateY(-3px)}
.btn svg{width:18px;height:18px}
.scroll-indicator{
position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;
display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);font-size:12px;
}
.mouse{width:24px;height:40px;border:2px solid var(--text-dim);border-radius:14px;position:relative}
.mouse::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:4px;height:8px;border-radius:3px;background:var(--secondary);animation:scrollWheel 1.8s infinite}
@keyframes scrollWheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}100%{opacity:0}}
/* ============ 统计数据 ============ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-card{
padding:36px 28px;text-align:center;position:relative;overflow:hidden;
transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.stat-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,transparent,var(--secondary),transparent);opacity:0;transition:opacity .35s;
}
.stat-card:hover{transform:translateY(-6px);border-color:var(--glass-border-hover)}
.stat-card:hover::before{opacity:1}
.stat-icon{
width:56px;height:56px;border-radius:14px;margin:0 auto 20px;display:grid;place-items:center;
background:linear-gradient(135deg,rgba(0,212,255,0.18),rgba(14,107,192,0.18));
border:1px solid rgba(0,212,255,0.25);
}
.stat-icon svg{width:28px;height:28px;color:var(--secondary)}
.stat-value{font-size:clamp(32px,4vw,46px);font-weight:900;line-height:1;letter-spacing:-1px;
background:linear-gradient(120deg,#fff,#7fd6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{margin-top:10px;color:var(--text-muted);font-size:15px;font-weight:500}
/* ============ 服务区 ============ */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.service-card{
padding:36px 32px;position:relative;overflow:hidden;
transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.service-card::after{
content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(0,212,255,0.12),transparent 60%);
opacity:0;transition:opacity .4s;
}
.service-card:hover{transform:translateY(-10px);border-color:var(--glass-border-hover);box-shadow:0 24px 60px rgba(0,212,255,0.18)}
.service-card:hover::after{opacity:1}
.service-icon{
width:64px;height:64px;border-radius:16px;display:grid;place-items:center;margin-bottom:24px;
background:linear-gradient(135deg,var(--secondary),var(--primary-light));
box-shadow:0 10px 26px rgba(0,212,255,0.3);
transition:transform .4s var(--ease);
}
.service-card:hover .service-icon{transform:rotate(-6deg) scale(1.06)}
.service-icon svg{width:32px;height:32px;color:#04101f}
.service-card h3{font-size:21px;font-weight:700;margin-bottom:12px}
.service-card .desc{color:var(--text-muted);font-size:14.5px;margin-bottom:20px}
.features{display:flex;flex-direction:column;gap:10px}
.features li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text)}
.features li .chk{
flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
background:rgba(0,212,255,0.14);border:1px solid rgba(0,212,255,0.3)
}
.features li .chk svg{width:12px;height:12px;color:var(--secondary)}
/* ============ 新闻区 ============ */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.news-card{
overflow:hidden;display:flex;flex-direction:column;
transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.news-thumb{
height:160px;position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--primary),var(--primary-light));
display:grid;place-items:center;
}
.news-thumb::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(circle at 30% 40%,rgba(0,212,255,0.4),transparent 50%),
radial-gradient(circle at 70% 60%,rgba(255,255,255,0.15),transparent 50%);
}
.news-thumb svg{width:54px;height:54px;color:rgba(255,255,255,0.85);position:relative;z-index:1}
.news-cat{
position:absolute;top:14px;left:14px;z-index:2;
padding:5px 14px;border-radius:50px;font-size:12px;font-weight:600;
background:rgba(4,16,31,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.2);color:#fff;
}
.news-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.news-meta{display:flex;align-items:center;gap:14px;color:var(--text-dim);font-size:12.5px;margin-bottom:12px}
.news-meta span{display:flex;align-items:center;gap:5px}
.news-meta svg{width:14px;height:14px}
.news-card h3{font-size:18px;font-weight:700;line-height:1.45;margin-bottom:12px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
transition:color .3s}
.news-card:hover h3{color:var(--secondary)}
.news-card .summary{color:var(--text-muted);font-size:14px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.news-card:hover{transform:translateY(-8px);border-color:var(--glass-border-hover);box-shadow:0 22px 55px rgba(0,212,255,0.15)}
.news-more{margin-top:50px;text-align:center}
.cat-product{background:rgba(0,212,255,0.85)!important;color:#04101f!important}
.cat-company{background:rgba(14,107,192,0.85)!important}
.cat-industry{background:rgba(120,90,220,0.85)!important}
/* ============ 团队区 ============ */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.team-card{
padding:38px 30px;text-align:center;
transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.team-card:hover{transform:translateY(-8px);border-color:var(--glass-border-hover)}
.team-avatar{
width:96px;height:96px;border-radius:50%;margin:0 auto 22px;
display:grid;place-items:center;font-size:36px;font-weight:800;color:#04101f;
position:relative;box-shadow:0 10px 30px rgba(0,212,255,0.3);
}
.team-avatar::after{
content:"";position:absolute;inset:-5px;border-radius:50%;
border:2px dashed rgba(0,212,255,0.4);animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.team-card h3{font-size:20px;font-weight:700}
.team-role{color:var(--secondary);font-size:14px;font-weight:600;margin:6px 0 16px}
.team-bio{color:var(--text-muted);font-size:14px}
/* ============ 关于我们 ============ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.about-card{padding:46px 40px;position:relative;overflow:hidden}
.about-card .quote{
position:absolute;top:18px;right:26px;font-size:90px;line-height:1;
font-family:Georgia,serif;color:rgba(0,212,255,0.16);font-weight:700;pointer-events:none;
}
.about-card h3{
display:flex;align-items:center;gap:12px;font-size:23px;font-weight:800;margin-bottom:20px;
}
.about-card h3 .tag{
width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
background:linear-gradient(135deg,var(--secondary),var(--primary-light));
}
.about-card h3 .tag svg{width:22px;height:22px;color:#04101f}
.about-card p{color:var(--text-muted);font-size:15.5px;line-height:1.9}
.about-meta{margin-top:24px;display:flex;gap:30px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--glass-border)}
.about-meta .item{font-size:14px}
.about-meta .item b{display:block;font-size:24px;color:var(--secondary);font-weight:800}
.about-meta .item span{color:var(--text-muted)}
/* ============ 联系我们 ============ */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.contact-info{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.contact-info h3{font-size:26px;font-weight:800;margin-bottom:14px}
.contact-info p{color:var(--text-muted);margin-bottom:30px}
.contact-items{display:flex;flex-direction:column;gap:20px}
.contact-item{display:flex;align-items:center;gap:18px}
.contact-item .ic{
width:50px;height:50px;border-radius:13px;flex:none;display:grid;place-items:center;
background:linear-gradient(135deg,rgba(0,212,255,0.16),rgba(14,107,192,0.16));
border:1px solid rgba(0,212,255,0.25);
}
.contact-item .ic svg{width:24px;height:24px;color:var(--secondary)}
.contact-item .lbl{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}
.contact-item .val{font-size:16px;font-weight:600;color:#fff;word-break:break-all}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-mini{padding:30px 26px;text-align:center;transition:transform .35s var(--ease),border-color .35s}
.contact-mini:hover{transform:translateY(-6px);border-color:var(--glass-border-hover)}
.contact-mini .ic{width:54px;height:54px;border-radius:14px;margin:0 auto 18px;display:grid;place-items:center;
background:linear-gradient(135deg,var(--secondary),var(--primary-light));box-shadow:0 8px 22px rgba(0,212,255,0.3)}
.contact-mini .ic svg{width:26px;height:26px;color:#04101f}
.contact-mini .lbl{font-size:12px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.contact-mini .val{font-size:15px;font-weight:600;word-break:break-all}
/* ============ 页脚 ============ */
.footer{border-top:1px solid var(--glass-border);padding:60px 0 30px;background:rgba(4,16,31,0.5)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.footer-brand .logo{margin-bottom:18px}
.footer-brand p{color:var(--text-muted);font-size:14px;max-width:300px}
.footer-col h4{font-size:15px;font-weight:700;margin-bottom:18px;color:#fff}
.footer-col a{display:block;color:var(--text-muted);font-size:14px;padding:6px 0;transition:color .25s,padding .25s}
.footer-col a:hover{color:var(--secondary);padding-left:6px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
padding-top:26px;border-top:1px solid var(--glass-border);color:var(--text-dim);font-size:13px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);transition:all .25s}
.footer-social a:hover{background:rgba(0,212,255,0.15);border-color:var(--secondary);transform:translateY(-3px)}
.footer-social svg{width:18px;height:18px;color:var(--text-muted)}
.footer-social a:hover svg{color:var(--secondary)}
/* ============ 加载骨架 ============ */
.loading-screen{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:var(--bg-deep);transition:opacity .6s}
.loading-screen.hide{opacity:0;pointer-events:none}
.loader{text-align:center}
.loader-ring{width:64px;height:64px;margin:0 auto 24px;position:relative}
.loader-ring::before,.loader-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid transparent}
.loader-ring::before{border-top-color:var(--secondary);animation:spin 1s linear infinite}
.loader-ring::after{border-bottom-color:var(--primary-light);animation:spin 1.5s linear infinite reverse;inset:8px}
.loader p{color:var(--text-muted);font-size:15px;letter-spacing:1px}
.skeleton{background:linear-gradient(100deg,rgba(255,255,255,0.04) 30%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.04) 70%);
background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-grid{display:grid;gap:24px}
.sk-card{height:220px;border-radius:var(--radius);border:1px solid var(--glass-border)}
/* ============ 错误提示 ============ */
.error-box{text-align:center;padding:80px 24px}
.error-box .ic{width:80px;height:80px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,90,90,0.1);border:1px solid rgba(255,90,90,0.3)}
.error-box .ic svg{width:40px;height:40px;color:#ff7a7a}
.error-box h3{font-size:22px;font-weight:700;margin-bottom:10px}
.error-box p{color:var(--text-muted);margin-bottom:24px}
/* ============ 回到顶部 ============ */
.to-top{position:fixed;right:26px;bottom:26px;z-index:900;width:48px;height:48px;border-radius:14px;
display:grid;place-items:center;cursor:pointer;border:1px solid var(--glass-border);
background:rgba(4,16,31,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
opacity:0;transform:translateY(20px);pointer-events:none;transition:all .35s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--secondary);background:rgba(0,212,255,0.15)}
.to-top svg{width:22px;height:22px;color:var(--secondary)}
/* ============ 响应式 ============ */
@media(max-width:980px){
.stats-grid{grid-template-columns:repeat(2,1fr)}
.services-grid,.news-grid,.team-grid{grid-template-columns:repeat(2,1fr)}
.about-grid{grid-template-columns:1fr}
.contact-wrap{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr 1fr}
.footer-brand{grid-column:1/-1}
}
@media(max-width:760px){
.section-pad{padding:80px 0}
.nav-links{
position:fixed;top:0;right:-100%;height:100vh;width:78%;max-width:340px;
flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;
background:rgba(6,24,46,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
padding:90px 24px 24px;transition:right .4s var(--ease);border-left:1px solid var(--glass-border);
}
.nav-links.open{right:0}
.nav-links a{padding:14px 16px;font-size:16px;border-radius:12px}
.nav-links a::after{display:none}
.nav-cta{margin-left:0;margin-top:10px;text-align:center}
.nav-toggle{display:flex;z-index:1001}
.stats-grid,.services-grid,.news-grid,.team-grid{grid-template-columns:1fr}
.contact-cards{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr}
.about-card{padding:34px 26px}
.hero-actions .btn{flex:1;justify-content:center}
}
</style>
</head>
<body>
<!-- 加载动画 -->
<div class="loading-screen" id="loadingScreen">
<div class="loader">
<div class="loader-ring"></div>
<p>正在加载数据…</p>
</div>
</div>
<!-- 导航栏 -->
<nav class="nav" id="nav">
<div class="nav-inner">
<div class="logo" onclick="scrollTo2('hero')">
<div class="logo-mark">
<svg viewBox="0 0 24 24" fill="none" stroke="#04101f" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</div>
<div class="logo-text">Nexus<span>科技</span></div>
</div>
<div class="nav-links" id="navLinks">
<a href="#hero" onclick="closeNav()">首页</a>
<a href="#services" onclick="closeNav()">服务</a>
<a href="#news" onclick="closeNav()">新闻</a>
<a href="#team" onclick="closeNav()">团队</a>
<a href="#about" onclick="closeNav()">关于我们</a>
<a href="#contact" onclick="closeNav()">联系我们</a>
<a href="#contact" class="nav-cta" onclick="closeNav()">免费咨询</a>
</div>
<button class="nav-toggle" id="navToggle" aria-label="菜单">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- Hero -->
<header class="hero" id="hero">
<div class="particles" id="particles"></div>
<div class="hero-orb o1"></div>
<div class="hero-orb o2"></div>
<div class="hero-inner">
<div class="hero-badge reveal"><span class="dot"></span><span id="heroBadge">全球领先的智能科技企业</span></div>
<h1 class="reveal d1"><span id="heroTitle" class="grad">创新驱动 · 智领未来</span></h1>
<p class="lead reveal d2" id="heroDesc">正在加载企业简介…</p>
<div class="hero-actions reveal d3">
<a href="#services" class="btn btn-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
探索我们的服务
</a>
<a href="#contact" class="btn btn-ghost">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
预约咨询
</a>
</div>
</div>
<div class="scroll-indicator">
<div class="mouse"></div>
<span>向下滚动</span>
</div>
</header>
<!-- 统计数据 -->
<section class="section-pad" id="stats">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">DATA · 实力见证</span>
<h2 class="section-title">用数据说话</h2>
<p class="section-sub">十余年深耕,以技术与服务赢得全球客户信赖</p>
</div>
<div class="stats-grid" id="statsGrid">
<div class="stat-card glass skeleton"></div>
<div class="stat-card glass skeleton"></div>
<div class="stat-card glass skeleton"></div>
<div class="stat-card glass skeleton"></div>
</div>
</div>
</section>
<!-- 服务区 -->
<section class="section-pad" id="services">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">SOLUTIONS · 核心服务</span>
<h2 class="section-title">为企业数字化转型赋能</h2>
<p class="section-sub">从人工智能到云计算,提供端到端的一站式技术解决方案</p>
</div>
<div class="services-grid" id="servicesGrid">
<div class="service-card glass skeleton"></div>
<div class="service-card glass skeleton"></div>
<div class="service-card glass skeleton"></div>
</div>
</div>
</section>
<!-- 新闻区 -->
<section class="section-pad" id="news">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">NEWS · 新闻动态</span>
<h2 class="section-title">了解最新资讯</h2>
<p class="section-sub">关注 Nexus,掌握行业前沿与企业最新动态</p>
</div>
<div class="news-grid" id="newsGrid">
<div class="news-card glass skeleton"></div>
<div class="news-card glass skeleton"></div>
<div class="news-card glass skeleton"></div>
</div>
</div>
</section>
<!-- 团队区 -->
<section class="section-pad" id="team">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">TEAM · 核心团队</span>
<h2 class="section-title">汇聚行业顶尖人才</h2>
<p class="section-sub">富有远见与执行力的领导团队,引领企业持续创新</p>
</div>
<div class="team-grid" id="teamGrid">
<div class="team-card glass skeleton"></div>
<div class="team-card glass skeleton"></div>
<div class="team-card glass skeleton"></div>
</div>
</div>
</section>
<!-- 关于我们 -->
<section class="section-pad" id="about">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">ABOUT · 关于我们</span>
<h2 class="section-title">愿景与使命</h2>
<p class="section-sub">以技术为根基,以价值创造为导向</p>
</div>
<div class="about-grid" id="aboutGrid">
<div class="about-card glass skeleton" style="height:280px"></div>
<div class="about-card glass skeleton" style="height:280px"></div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section class="section-pad" id="contact">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">CONTACT · 联系我们</span>
<h2 class="section-title">开启合作之旅</h2>
<p class="section-sub">无论您有任何需求,我们随时为您提供专业支持</p>
</div>
<div class="contact-wrap" id="contactWrap">
<div class="contact-info glass skeleton" style="height:340px"></div>
<div class="contact-cards">
<div class="contact-mini glass skeleton" style="height:160px"></div>
<div class="contact-mini glass skeleton" style="height:160px"></div>
<div class="contact-mini glass skeleton" style="height:160px"></div>
<div class="contact-mini glass skeleton" style="height:160px"></div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-top">
<div class="footer-brand">
<div class="logo">
<div class="logo-mark">
<svg viewBox="0 0 24 24" fill="none" stroke="#04101f" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</div>
<div class="logo-text" id="footerName">Nexus<span>科技</span></div>
</div>
<p id="footerDesc">创新驱动,智领未来。致力于用前沿技术赋能每一个行业。</p>
</div>
<div class="footer-col">
<h4>快速导航</h4>
<a href="#hero">首页</a>
<a href="#services">核心服务</a>
<a href="#news">新闻动态</a>
<a href="#team">核心团队</a>
</div>
<div class="footer-col">
<h4>关于我们</h4>
<a href="#about">企业愿景</a>
<a href="#about">企业使命</a>
<a href="#stats">企业实力</a>
<a href="#contact">联系我们</a>
</div>
<div class="footer-col">
<h4>联系方式</h4>
<a href="tel:" id="footPhone">400-888-9999</a>
<a href="mailto:" id="footEmail">contact@nexus-tech.com</a>
<a id="footAddr">上海市浦东新区</a>
<a id="footSite">www.nexus-tech.com</a>
</div>
</div>
<div class="footer-bottom">
<span id="copyRight">© 2026 Nexus 科技集团. 保留所有权利.</span>
<div class="footer-social">
<a href="#" aria-label="微信"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg></a>
<a href="#" aria-label="微博"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg></a>
<a href="#" aria-label="邮箱"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></a>
<a href="#" aria-label="链接"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></a>
</div>
</div>
</div>
</footer>
<!-- 回到顶部 -->
<div class="to-top" id="toTop" onclick="scrollTo2('hero')">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
</div>
<script>
/* =========================================================
SVG 图标库(纯 SVG,不使用 emoji)
========================================================= */
const ICONS = {
// 服务图标
ai:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="3"/><circle cx="9" cy="9" r="1.4"/><circle cx="15" cy="9" r="1.4"/><circle cx="9" cy="15" r="1.4"/><circle cx="15" cy="15" r="1.4"/><path d="M9 9h6M9 15h6M12 4v16"/></svg>',
cloud:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19a4.5 4.5 0 0 0 .5-9 6 6 0 0 0-11.5-1.5A4 4 0 0 0 6.5 19h11z"/><path d="M9 14l2 2 4-4"/></svg>',
iot:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2.5"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></svg>',
data:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/><path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>',
security:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>',
consulting:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 21h4"/><path d="M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z"/></svg>',
// 统计图标
users:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
patent:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2h6v4l2 2v3a4 4 0 0 1-4 4h-2a4 4 0 0 1-4-4V8l2-2V2z"/><path d="M12 15v6M9 21h6"/></svg>',
globe:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/></svg>',
revenue:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>',
// 联系图标
phone:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>',
email:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>',
location:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>',
website:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
// 通用
check:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
calendar:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>',
user:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
eye:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
target:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>',
compass:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>'
};
function icon(name){return ICONS[name]||ICONS.target;}
/* =========================================================
工具函数
========================================================= */
function safeParse(str, fallback){
if(!str) return fallback;
if(typeof str !== 'string') return str;
try{ return JSON.parse(str); }catch(e){ return fallback; }
}
function esc(s){return (s==null?'':String(s)).replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));}
function firstChar(str){return (str||'?').trim().charAt(0);}
// 头像渐变色板
const AVATAR_COLORS=[
'linear-gradient(135deg,#00D4FF,#0A4D8C)',
'linear-gradient(135deg,#7C5CFF,#3A8DFF)',
'linear-gradient(135deg,#FF8A5C,#FF5C9D)',
'linear-gradient(135deg,#2EE6A6,#0E9BE0)',
'linear-gradient(135deg,#FFB84D,#FF6B6B)',
'linear-gradient(135deg,#5CE1E6,#6C7BFF)'
];
function avatarColor(i){return AVATAR_COLORS[i%AVATAR_COLORS.length];}
// 解析数值与后缀(如 "5000+"-> {num:5000,suf:"+"}; "50亿+"->{num:50,suf:"亿+"})
function parseNum(v){
if(v==null) return {num:0,suf:''};
const s=String(v);
const m=s.match(/^(\d+(?:\.\d+)?)(.*)$/);
if(!m) return {num:0,suf:s};
return {num:parseFloat(m[1]),suf:m[2]};
}
function formatDate(d){
try{
const dt=new Date(d);
if(isNaN(dt)) return '';
return dt.getFullYear()+'-'+String(dt.getMonth()+1).padStart(2,'0')+'-'+String(dt.getDate()).padStart(2,'0');
}catch(e){return '';}
}
function truncate(s,n){s=s||'';return s.length>n?s.slice(0,n)+'…':s;}
const CAT_LABEL={product:'产品动态',company:'公司新闻',industry:'行业资讯'};
/* =========================================================
导航交互
========================================================= */
const nav=document.getElementById('nav');
const navLinks=document.getElementById('navLinks');
const navToggle=document.getElementById('navToggle');
navToggle.addEventListener('click',()=>{navLinks.classList.toggle('open');navToggle.classList.toggle('open');});
function closeNav(){navLinks.classList.remove('open');navToggle.classList.remove('open');}
window.addEventListener('scroll',()=>{
if(window.scrollY>40) nav.classList.add('scrolled'); else nav.classList.remove('scrolled');
document.getElementById('toTop').classList.toggle('show',window.scrollY>600);
});
function scrollTo2(id){const el=document.getElementById(id);if(el)el.scrollIntoView({behavior:'smooth'});closeNav();}
window.scrollTo2=scrollTo2;window.closeNav=closeNav;
/* =========================================================
Hero 粒子动画
========================================================= */
(function makeParticles(){
const box=document.getElementById('particles');
const n=36;
for(let i=0;i<n;i++){
const p=document.createElement('span');
p.className='particle';
const size=Math.random()*4+2;
p.style.width=size+'px';p.style.height=size+'px';
p.style.left=Math.random()*100+'%';
p.style.bottom='-10px';
p.style.animationDuration=(Math.random()*12+10)+'s';
p.style.animationDelay=(-Math.random()*20)+'s';
p.style.opacity=Math.random()*0.5+0.2;
box.appendChild(p);
}
})();
/* =========================================================
滚动渐入 IntersectionObserver
========================================================= */
const io=new IntersectionObserver((entries)=>{
entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});
},{threshold:0.12,rootMargin:'0px 0px -60px 0px'});
function observeReveals(){document.querySelectorAll('.reveal:not(.in)').forEach(el=>io.observe(el));}
observeReveals();
/* =========================================================
数字滚动动画
========================================================= */
function animateNum(el,num,suf,dur){
dur=dur||1600;
const start=performance.now();
const isInt=Number.isInteger(num);
function tick(now){
let p=Math.min((now-start)/dur,1);
p=1-Math.pow(1-p,3); // easeOutCubic
const cur=num*p;
el.textContent=(isInt?Math.round(cur):cur.toFixed(1))+suf;
if(p<1) requestAnimationFrame(tick);
else el.textContent=(isInt?num:num.toFixed(1))+suf;
}
requestAnimationFrame(tick);
}
const numIO=new IntersectionObserver((entries)=>{
entries.forEach(e=>{
if(e.isIntersecting){
const el=e.target;
animateNum(el,parseFloat(el.dataset.num),el.dataset.suf||'');
numIO.unobserve(el);
}
});
},{threshold:0.5});
/* =========================================================
服务卡片光标跟随
========================================================= */
document.addEventListener('mousemove',e=>{
document.querySelectorAll('.service-card').forEach(card=>{
const r=card.getBoundingClientRect();
card.style.setProperty('--mx',(e.clientX-r.left)+'px');
card.style.setProperty('--my',(e.clientY-r.top)+'px');
});
});
/* =========================================================
渲染函数
========================================================= */
function renderHero(company){
document.getElementById('heroTitle').textContent=company.slogan||'创新驱动 · 智领未来';
document.getElementById('heroDesc').textContent=truncate(company.description,100);
document.getElementById('heroBadge').textContent=company.name||'全球领先的智能科技企业';
document.title=(company.name||'Nexus 科技集团')+(company.slogan?(' - '+company.slogan):'');
}
function renderStats(company){
const stats=safeParse(company.stats,[]);
const grid=document.getElementById('statsGrid');
if(!stats.length){grid.innerHTML='<p style="grid-column:1/-1;text-align:center;color:var(--text-muted)">暂无统计数据</p>';return;}
grid.innerHTML=stats.map((s,i)=>{
const {num,suf}=parseNum(s.value);
return `<div class="stat-card glass reveal d${(i%4)+1}">
<div class="stat-icon">${icon(s.icon)}</div>
<div class="stat-value" data-num="${num}" data-suf="${esc(suf)}">0${suf}</div>
<div class="stat-label">${esc(s.label)}</div>
</div>`;
}).join('');
// 重新观察并触发动画
grid.querySelectorAll('.reveal').forEach(el=>io.observe(el));
grid.querySelectorAll('.stat-value').forEach(el=>numIO.observe(el));
}
function renderServices(services){
const grid=document.getElementById('servicesGrid');
if(!services||!services.length){grid.innerHTML='<p style="grid-column:1/-1;text-align:center;color:var(--text-muted)">暂无服务数据</p>';return;}
grid.innerHTML=services.map((sv,i)=>{
const feats=safeParse(sv.features,[]);
const featHtml=feats.map(f=>`<li><span class="chk">${icon('check')}</span><span>${esc(f)}</span></li>`).join('');
return `<div class="service-card glass reveal d${(i%3)+1}">
<div class="service-icon">${icon(sv.icon)}</div>
<h3>${esc(sv.title)}</h3>
<p class="desc">${esc(sv.description)}</p>
<ul class="features">${featHtml}</ul>
</div>`;
}).join('');
grid.querySelectorAll('.reveal').forEach(el=>io.observe(el));
}
function renderNews(news){
const grid=document.getElementById('newsGrid');
if(!news||!news.length){grid.innerHTML='<p style="grid-column:1/-1;text-align:center;color:var(--text-muted)">暂无新闻数据</p>';return;}
grid.innerHTML=news.map((nw,i)=>{
const cat=CAT_LABEL[nw.category]||nw.category||'动态';
const date=formatDate(nw.created_at);
return `<article class="news-card glass reveal d${(i%3)+1}">
<div class="news-thumb">
<span class="news-cat cat-${esc(nw.category)}">${esc(cat)}</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/><path d="M18 14h-8M15 18h-5M10 6h8v4h-8V6z"/></svg>
</div>
<div class="news-body">
<div class="news-meta">
<span>${icon('calendar')}${esc(date)}</span>
<span>${icon('user')}${esc(nw.author||'')}</span>
</div>
<h3>${esc(nw.title)}</h3>
<p class="summary">${esc(nw.summary)}</p>
</div>
</article>`;
}).join('');
grid.querySelectorAll('.reveal').forEach(el=>io.observe(el));
}
function renderTeam(team){
const grid=document.getElementById('teamGrid');
if(!team||!team.length){grid.innerHTML='<p style="grid-column:1/-1;text-align:center;color:var(--text-muted)">暂无团队数据</p>';return;}
grid.innerHTML=team.map((m,i)=>{
return `<div class="team-card glass reveal d${(i%3)+1}">
<div class="team-avatar" style="background:${avatarColor(i)}">${esc(firstChar(m.name))}</div>
<h3>${esc(m.name)}</h3>
<div class="team-role">${esc(m.position)}</div>
<p class="team-bio">${esc(m.bio)}</p>
</div>`;
}).join('');
grid.querySelectorAll('.reveal').forEach(el=>io.observe(el));
}
function renderAbout(company){
const grid=document.getElementById('aboutGrid');
grid.innerHTML=`
<div class="about-card glass reveal d1">
<span class="quote">"</span>
<h3><span class="tag">${icon('compass')}</span>企业愿景</h3>
<p>${esc(company.vision||'')}</p>
<div class="about-meta">
<div class="item"><b>${esc(company.founded_year||'—')}</b><span>成立年份</span></div>
<div class="item"><b>${esc(company.employee_count||'—')}</b><span>团队规模</span></div>
</div>
</div>
<div class="about-card glass reveal d2">
<span class="quote">"</span>
<h3><span class="tag">${icon('target')}</span>企业使命</h3>
<p>${esc(company.mission||'')}</p>
<div class="about-meta">
<div class="item"><b>${esc(company.name||'')}</b><span>企业名称</span></div>
<div class="item"><b>${esc(company.website||'')}</b><span>官方网站</span></div>
</div>
</div>`;
grid.querySelectorAll('.reveal').forEach(el=>io.observe(el));
}
function renderContact(company){
const wrap=document.getElementById('contactWrap');
const site=company.website||'';
const siteHref=site?(site.startsWith('http')?site:'https://'+site):'#';
wrap.innerHTML=`
<div class="contact-info glass reveal d1">
<h3>随时与我们联系</h3>
<p>无论您希望了解产品详情、寻求技术合作,还是加入我们,我们都期待您的来信。专业团队将在第一时间为您提供支持。</p>
<div class="contact-items">
<div class="contact-item">
<div class="ic">${icon('phone')}</div>
<div><div class="lbl">联系电话</div><div class="val">${esc(company.phone||'—')}</div></div>
</div>
<div class="contact-item">
<div class="ic">${icon('email')}</div>
<div><div class="lbl">电子邮箱</div><div class="val">${esc(company.email||'—')}</div></div>
</div>
<div class="contact-item">
<div class="ic">${icon('location')}</div>
<div><div class="lbl">公司地址</div><div class="val">${esc(company.address||'—')}</div></div>
</div>
<div class="contact-item">
<div class="ic">${icon('website')}</div>
<div><div class="lbl">官方网站</div><div class="val">${esc(site||'—')}</div></div>
</div>
</div>
</div>
<div class="contact-cards">
<a href="tel:${esc(company.phone||'')}" class="contact-mini glass reveal d1">
<div class="ic">${icon('phone')}</div>
<div class="lbl">电话</div>
<div class="val">${esc(company.phone||'—')}</div>
</a>
<a href="mailto:${esc(company.email||'')}" class="contact-mini glass reveal d2">
<div class="ic">${icon('email')}</div>
<div class="lbl">邮箱</div>
<div class="val">${esc(company.email||'—')}</div>
</a>
<div class="contact-mini glass reveal d3">
<div class="ic">${icon('location')}</div>
<div class="lbl">地址</div>
<div class="val">${esc(company.address||'—')}</div>
</div>
<a href="${siteHref}" target="_blank" rel="noopener" class="contact-mini glass reveal d4">
<div class="ic">${icon('website')}</div>
<div class="lbl">网站</div>
<div class="val">${esc(site||'—')}</div>
</a>
</div>`;
wrap.querySelectorAll('.reveal').forEach(el=>io.observe(el));
}
function renderFooter(company){
const name=company.name||'Nexus 科技集团';
const shortName=name.replace(/科技集团|科技|集团/g,'').trim()||'Nexus';
document.getElementById('footerName').innerHTML=esc(shortName)+'<span>科技</span>';
document.getElementById('footerDesc').textContent=truncate(company.description,80);
document.getElementById('footPhone').textContent=company.phone||'';
document.getElementById('footPhone').href='tel:'+(company.phone||'');
document.getElementById('footEmail').textContent=company.email||'';
document.getElementById('footEmail').href='mailto:'+(company.email||'');
document.getElementById('footAddr').textContent=truncate(company.address,12);
const site=company.website||'';
document.getElementById('footSite').textContent=site;
document.getElementById('footSite').href=site?(site.startsWith('http')?site:'https://'+site):'#';
const year=new Date().getFullYear();
const fy=company.founded_year||2010;
document.getElementById('copyRight').textContent='© '+fy+'-'+year+' '+name+'. 保留所有权利.';
}
/* =========================================================
错误提示
========================================================= */
function showError(msg){
const html=`<div class="error-box">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
<h3>数据加载失败</h3>
<p>${esc(msg||'无法连接到服务器,请稍后重试。')}</p>
<button class="btn btn-primary" onclick="location.reload()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
重新加载
</button>
</div>`;
['statsGrid','servicesGrid','newsGrid','teamGrid','aboutGrid','contactWrap'].forEach(id=>{
const el=document.getElementById(id);
if(el) el.innerHTML=html;
});
document.getElementById('heroTitle').textContent='数据加载失败';
document.getElementById('heroDesc').textContent=msg||'请检查网络连接后重试';
}
/* =========================================================
主流程:获取数据并渲染
========================================================= */
async function bootstrap(){
try{
const res=await fetch('/api/v1/enterprise/all',{headers:{'Accept':'application/json'}});
if(!res.ok) throw new Error('服务器响应异常 ('+res.status+')');
const json=await res.json();
if(json.code!==0) throw new Error(json.message||'接口返回错误');
const data=json.data||{};
const company=data.company||{};
const services=data.services||[];
const news=data.news||[];
const team=data.team||[];
renderHero(company);
renderStats(company);
renderServices(services);
renderNews(news);
renderTeam(team);
renderAbout(company);
renderContact(company);
renderFooter(company);
// 隐藏加载屏
setTimeout(()=>document.getElementById('loadingScreen').classList.add('hide'),300);
// 重新观察渐入元素(数据渲染后新增的)
setTimeout(observeReveals,50);
}catch(err){
console.error('[bootstrap]',err);
document.getElementById('loadingScreen').classList.add('hide');
showError(err.message||'网络请求失败');
}
}
bootstrap();
</script>
</body>
</html>