Files
web_template/web/dist/site1/index.html
Geliebte 10979351f8 feat: 默认语言改为英语 + 导航页添加i18n三语支持
- 导航页(index.html)添加完整i18n引擎,支持zh-CN/zh-TW/en
- 导航页添加语言切换按钮(EN/中/繁)
- 所有20个前端模板默认语言从zh-CN改为en
- 导航页SEO meta标签改为英文
2026-09-09 19:48:45 +08:00

1408 lines
70 KiB
HTML
Raw Permalink 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)}
/* ============ 语言切换器 ============ */
.lang-switcher{position:relative;margin-left:8px}
.lang-btn{
display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;
font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;
background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);
transition:all .25s var(--ease);
}
.lang-btn:hover{color:#fff;background:rgba(255,255,255,0.1);border-color:rgba(0,212,255,0.3)}
.lang-btn svg{width:16px;height:16px}
.lang-dropdown{
position:absolute;top:calc(100% + 8px);right:0;min-width:160px;
background:rgba(6,24,46,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--glass-border);border-radius:var(--radius-sm);
box-shadow:0 12px 40px rgba(0,0,0,0.5);overflow:hidden;
opacity:0;transform:translateY(-8px);pointer-events:none;
transition:all .25s var(--ease);z-index:1001;
}
.lang-dropdown.open{opacity:1;transform:none;pointer-events:auto}
.lang-option{
display:flex;align-items:center;gap:10px;padding:12px 16px;
font-size:14px;color:var(--text-muted);cursor:pointer;transition:all .2s;
}
.lang-option:hover{background:rgba(0,212,255,0.1);color:#fff}
.lang-option.active{color:var(--secondary);font-weight:600}
.lang-option .check{width:16px;height:16px;opacity:0;transition:opacity .2s}
.lang-option.active .check{opacity:1}
/* ============ 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}
.lang-switcher{position:static;margin-left:0}
.lang-dropdown{right:auto;left:0}
}
</style>
</head>
<body>
<!-- 加载动画 -->
<div class="loading-screen" id="loadingScreen">
<div class="loader">
<div class="loader-ring"></div>
<p data-i18n="loading">正在加载数据…</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 data-i18n="logo_suffix">科技</span></div>
</div>
<div class="nav-links" id="navLinks">
<a href="#hero" onclick="closeNav()" data-i18n="nav_home">首页</a>
<a href="#services" onclick="closeNav()" data-i18n="nav_services">服务</a>
<a href="#news" onclick="closeNav()" data-i18n="nav_news">新闻</a>
<a href="#team" onclick="closeNav()" data-i18n="nav_team">团队</a>
<a href="#about" onclick="closeNav()" data-i18n="nav_about">关于我们</a>
<a href="#contact" onclick="closeNav()" data-i18n="nav_contact">联系我们</a>
<a href="#contact" class="nav-cta" onclick="closeNav()" data-i18n="nav_cta">免费咨询</a>
</div>
<div class="lang-switcher" id="langSwitcher">
<button class="lang-btn" id="langBtn" onclick="toggleLangDropdown()">
<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="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/></svg>
<span id="langLabel">中文</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px"><polyline points="6 9 12 15 18 9"/></polyline></svg>
</button>
<div class="lang-dropdown" id="langDropdown">
<div class="lang-option" data-lang="zh-CN" onclick="switchLang('zh-CN')">
<svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
<span>简体中文</span>
</div>
<div class="lang-option" data-lang="zh-TW" onclick="switchLang('zh-TW')">
<svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
<span>繁體中文</span>
</div>
<div class="lang-option" data-lang="en" onclick="switchLang('en')">
<svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
<span>English</span>
</div>
</div>
</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" data-i18n="hero_badge">全球领先的智能科技企业</span></div>
<h1 class="reveal d1"><span id="heroTitle" class="grad" data-i18n="hero_title">创新驱动 · 智领未来</span></h1>
<p class="lead reveal d2" id="heroDesc" data-i18n="hero_desc">正在加载企业简介…</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>
<span data-i18n="hero_cta1">探索我们的服务</span>
</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>
<span data-i18n="hero_cta2">预约咨询</span>
</a>
</div>
</div>
<div class="scroll-indicator">
<div class="mouse"></div>
<span data-i18n="scroll_hint">向下滚动</span>
</div>
</header>
<!-- 统计数据 -->
<section class="section-pad" id="stats">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow" data-i18n="stats_eyebrow">DATA · 实力见证</span>
<h2 class="section-title" data-i18n="stats_title">用数据说话</h2>
<p class="section-sub" data-i18n="stats_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" data-i18n="services_eyebrow">SOLUTIONS · 核心服务</span>
<h2 class="section-title" data-i18n="services_title">为企业数字化转型赋能</h2>
<p class="section-sub" data-i18n="services_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" data-i18n="news_eyebrow">NEWS · 新闻动态</span>
<h2 class="section-title" data-i18n="news_title">了解最新资讯</h2>
<p class="section-sub" data-i18n="news_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" data-i18n="team_eyebrow">TEAM · 核心团队</span>
<h2 class="section-title" data-i18n="team_title">汇聚行业顶尖人才</h2>
<p class="section-sub" data-i18n="team_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" data-i18n="about_eyebrow">ABOUT · 关于我们</span>
<h2 class="section-title" data-i18n="about_title">愿景与使命</h2>
<p class="section-sub" data-i18n="about_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" data-i18n="contact_eyebrow">CONTACT · 联系我们</span>
<h2 class="section-title" data-i18n="contact_title">开启合作之旅</h2>
<p class="section-sub" data-i18n="contact_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 data-i18n="logo_suffix">科技</span></div>
</div>
<p id="footerDesc" data-i18n="footer_desc">创新驱动,智领未来。致力于用前沿技术赋能每一个行业。</p>
</div>
<div class="footer-col">
<h4 data-i18n="footer_nav_title">快速导航</h4>
<a href="#hero" data-i18n="nav_home">首页</a>
<a href="#services" data-i18n="footer_core_services">核心服务</a>
<a href="#news" data-i18n="footer_news">新闻动态</a>
<a href="#team" data-i18n="footer_team">核心团队</a>
</div>
<div class="footer-col">
<h4 data-i18n="nav_about">关于我们</h4>
<a href="#about" data-i18n="footer_vision">企业愿景</a>
<a href="#about" data-i18n="footer_mission">企业使命</a>
<a href="#stats" data-i18n="footer_strength">企业实力</a>
<a href="#contact" data-i18n="nav_contact">联系我们</a>
</div>
<div class="footer-col">
<h4 data-i18n="footer_contact_title">联系方式</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="WeChat"><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="Weibo"><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="Email"><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="Link"><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>
/* =========================================================
i18n 国际化引擎
========================================================= */
const I18N_LOCALES = {
'zh-CN': {
loading: '正在加载数据…',
logo_suffix: '科技',
nav_home: '首页',
nav_services: '服务',
nav_news: '新闻',
nav_team: '团队',
nav_about: '关于我们',
nav_contact: '联系我们',
nav_cta: '免费咨询',
hero_badge: '全球领先的智能科技企业',
hero_title: '创新驱动 · 智领未来',
hero_desc: '正在加载企业简介…',
hero_cta1: '探索我们的服务',
hero_cta2: '预约咨询',
scroll_hint: '向下滚动',
stats_eyebrow: 'DATA · 实力见证',
stats_title: '用数据说话',
stats_sub: '十余年深耕,以技术与服务赢得全球客户信赖',
services_eyebrow: 'SOLUTIONS · 核心服务',
services_title: '为企业数字化转型赋能',
services_sub: '从人工智能到云计算,提供端到端的一站式技术解决方案',
news_eyebrow: 'NEWS · 新闻动态',
news_title: '了解最新资讯',
news_sub: '关注 Nexus,掌握行业前沿与企业最新动态',
team_eyebrow: 'TEAM · 核心团队',
team_title: '汇聚行业顶尖人才',
team_sub: '富有远见与执行力的领导团队,引领企业持续创新',
about_eyebrow: 'ABOUT · 关于我们',
about_title: '愿景与使命',
about_sub: '以技术为根基,以价值创造为导向',
contact_eyebrow: 'CONTACT · 联系我们',
contact_title: '开启合作之旅',
contact_sub: '无论您有任何需求,我们随时为您提供专业支持',
footer_desc: '创新驱动,智领未来。致力于用前沿技术赋能每一个行业。',
footer_nav_title: '快速导航',
footer_core_services: '核心服务',
footer_news: '新闻动态',
footer_team: '核心团队',
footer_vision: '企业愿景',
footer_mission: '企业使命',
footer_strength: '企业实力',
footer_contact_title: '联系方式',
contact_phone: '联系电话',
contact_email: '电子邮箱',
contact_address: '公司地址',
contact_website: '官方网站',
contact_card_phone: '电话',
contact_card_email: '邮箱',
contact_card_address: '地址',
contact_card_website: '网站',
contact_info_title: '随时与我们联系',
contact_info_desc: '无论您希望了解产品详情、寻求技术合作,还是加入我们,我们都期待您的来信。专业团队将在第一时间为您提供支持。',
about_vision: '企业愿景',
about_mission: '企业使命',
about_founded: '成立年份',
about_scale: '团队规模',
about_name: '企业名称',
about_official: '官方网站',
error_title: '数据加载失败',
error_desc: '无法连接到服务器,请稍后重试。',
error_reload: '重新加载',
error_network: '请检查网络连接后重试',
cat_product: '产品动态',
cat_company: '公司新闻',
cat_industry: '行业资讯',
empty_stats: '暂无统计数据',
empty_services: '暂无服务数据',
empty_news: '暂无新闻数据',
empty_team: '暂无团队数据',
copyright_suffix: '保留所有权利.'
},
'en': {
loading: 'Loading data…',
logo_suffix: 'Tech',
nav_home: 'Home',
nav_services: 'Services',
nav_news: 'News',
nav_team: 'Team',
nav_about: 'About',
nav_contact: 'Contact',
nav_cta: 'Free Consult',
hero_badge: 'World\'s Leading Smart Tech Enterprise',
hero_title: 'Innovation Drives the Future',
hero_desc: 'Loading company profile…',
hero_cta1: 'Explore Our Services',
hero_cta2: 'Book a Consultation',
scroll_hint: 'Scroll Down',
stats_eyebrow: 'DATA · Proven Results',
stats_title: 'Speaking with Data',
stats_sub: 'Over a decade of excellence, earning global trust through technology and service',
services_eyebrow: 'SOLUTIONS · Core Services',
services_title: 'Empowering Digital Transformation',
services_sub: 'End-to-end one-stop technology solutions from AI to cloud computing',
news_eyebrow: 'NEWS · Updates',
news_title: 'Latest News & Insights',
news_sub: 'Stay ahead with Nexus — industry trends and company updates',
team_eyebrow: 'TEAM · Our People',
team_title: 'Top Talent in the Industry',
team_sub: 'A visionary leadership team driving continuous innovation',
about_eyebrow: 'ABOUT · About Us',
about_title: 'Vision & Mission',
about_sub: 'Rooted in technology, driven by value creation',
contact_eyebrow: 'CONTACT · Reach Out',
contact_title: 'Start Your Journey with Us',
contact_sub: 'Whatever your needs, we\'re here to provide professional support',
footer_desc: 'Innovation drives the future. Empowering every industry with cutting-edge technology.',
footer_nav_title: 'Quick Links',
footer_core_services: 'Core Services',
footer_news: 'News',
footer_team: 'Our Team',
footer_vision: 'Vision',
footer_mission: 'Mission',
footer_strength: 'Strength',
footer_contact_title: 'Contact',
contact_phone: 'Phone',
contact_email: 'Email',
contact_address: 'Address',
contact_website: 'Website',
contact_card_phone: 'Phone',
contact_card_email: 'Email',
contact_card_address: 'Address',
contact_card_website: 'Website',
contact_info_title: 'Get in Touch',
contact_info_desc: 'Whether you want to learn about our products, explore technical partnerships, or join our team — we look forward to hearing from you. Our professional team will respond promptly.',
about_vision: 'Vision',
about_mission: 'Mission',
about_founded: 'Founded',
about_scale: 'Team Size',
about_name: 'Company',
about_official: 'Website',
error_title: 'Failed to Load Data',
error_desc: 'Unable to connect to the server. Please try again later.',
error_reload: 'Reload',
error_network: 'Please check your network connection and try again',
cat_product: 'Product',
cat_company: 'Company',
cat_industry: 'Industry',
empty_stats: 'No statistics available',
empty_services: 'No services available',
empty_news: 'No news available',
empty_team: 'No team data available',
copyright_suffix: 'All rights reserved.'
},
'zh-TW': {
loading: '正在載入資料…',
logo_suffix: '科技',
nav_home: '首頁',
nav_services: '服務',
nav_news: '新聞',
nav_team: '團隊',
nav_about: '關於我們',
nav_contact: '聯絡我們',
nav_cta: '免費諮詢',
hero_badge: '全球領先的智能科技企業',
hero_title: '創新驅動 · 智領未來',
hero_desc: '正在載入企業簡介…',
hero_cta1: '探索我們的服務',
hero_cta2: '預約諮詢',
scroll_hint: '向下捲動',
stats_eyebrow: 'DATA · 實力見證',
stats_title: '用數據說話',
stats_sub: '十餘年深耕,以技術與服務贏得全球客戶信賴',
services_eyebrow: 'SOLUTIONS · 核心服務',
services_title: '為企業數位化轉型賦能',
services_sub: '從人工智慧到雲端運算,提供端到端的一站式技術解決方案',
news_eyebrow: 'NEWS · 新聞動態',
news_title: '了解最新資訊',
news_sub: '關注 Nexus,掌握行業前沿與企業最新動態',
team_eyebrow: 'TEAM · 核心團隊',
team_title: '匯聚行業頂尖人才',
team_sub: '富有遠見與執行力的領導團隊,引領企業持續創新',
about_eyebrow: 'ABOUT · 關於我們',
about_title: '願景與使命',
about_sub: '以技術為根基,以價值創造為導向',
contact_eyebrow: 'CONTACT · 聯絡我們',
contact_title: '開啟合作之旅',
contact_sub: '無論您有任何需求,我們隨時為您提供專業支援',
footer_desc: '創新驅動,智領未來。致力於用前沿技術賦能每一個行業。',
footer_nav_title: '快速導航',
footer_core_services: '核心服務',
footer_news: '新聞動態',
footer_team: '核心團隊',
footer_vision: '企業願景',
footer_mission: '企業使命',
footer_strength: '企業實力',
footer_contact_title: '聯絡方式',
contact_phone: '聯絡電話',
contact_email: '電子信箱',
contact_address: '公司地址',
contact_website: '官方網站',
contact_card_phone: '電話',
contact_card_email: '信箱',
contact_card_address: '地址',
contact_card_website: '網站',
contact_info_title: '隨時與我們聯繫',
contact_info_desc: '無論您希望了解產品詳情、尋求技術合作,還是加入我們,我們都期待您的來信。專業團隊將在第一時間為您提供支援。',
about_vision: '企業願景',
about_mission: '企業使命',
about_founded: '成立年份',
about_scale: '團隊規模',
about_name: '企業名稱',
about_official: '官方網站',
error_title: '資料載入失敗',
error_desc: '無法連線到伺服器,請稍後重試。',
error_reload: '重新載入',
error_network: '請檢查網路連線後重試',
cat_product: '產品動態',
cat_company: '公司新聞',
cat_industry: '行業資訊',
empty_stats: '暫無統計資料',
empty_services: '暫無服務資料',
empty_news: '暫無新聞資料',
empty_team: '暫無團隊資料',
copyright_suffix: '保留所有權利.'
}
};
const LANG_LABELS = {'zh-CN':'中文','en':'EN','zh-TW':'繁中'};
let currentLang = (function(){
try{
var u=new URLSearchParams(location.search).get('lang');
if(u&&I18N_LOCALES[u]) return u;
}catch(e){}
try{var s=localStorage.getItem('lang');if(s&&I18N_LOCALES[s]) return s;}catch(e){}
var b=navigator.language||navigator.userLanguage||'';
if(b.startsWith('zh-TW')||b.startsWith('zh-Hant')) return 'zh-TW';
if(b.startsWith('zh')) return 'en';
return 'en';
})();
function t(key){return (I18N_LOCALES[currentLang]&&I18N_LOCALES[currentLang][key])||(I18N_LOCALES['zh-CN'][key])||key;}
function applyI18n(){
document.querySelectorAll('[data-i18n]').forEach(function(el){
var key=el.getAttribute('data-i18n');
el.textContent=t(key);
});
document.documentElement.lang=currentLang==='zh-TW'?'zh-TW':currentLang==='zh-CN'?'zh-CN':'en';
document.getElementById('langLabel').textContent=LANG_LABELS[currentLang]||currentLang;
document.querySelectorAll('.lang-option').forEach(function(opt){
opt.classList.toggle('active',opt.getAttribute('data-lang')===currentLang);
});
}
function switchLang(lang){
if(!I18N_LOCALES[lang]) return;
currentLang=lang;
try{localStorage.setItem('lang',lang);}catch(e){}
applyI18n();
if(typeof onLangChange==='function') onLangChange(lang);
document.getElementById('langDropdown').classList.remove('open');
}
function toggleLangDropdown(){
document.getElementById('langDropdown').classList.toggle('open');
}
document.addEventListener('click',function(e){
var sw=document.getElementById('langSwitcher');
if(sw&&!sw.contains(e.target)) document.getElementById('langDropdown').classList.remove('open');
});
/* =========================================================
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];}
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_KEY={product:'cat_product',company:'cat_company',industry:'cat_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);
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');
});
});
/* =========================================================
渲染函数(i18n-aware)
========================================================= */
function renderHero(company){
document.getElementById('heroTitle').textContent=company.slogan||t('hero_title');
document.getElementById('heroDesc').textContent=truncate(company.description,100);
document.getElementById('heroBadge').textContent=company.name||t('hero_badge');
document.title=(company.name||'Nexus '+t('logo_suffix'))+(company.slogan?(' - '+company.slogan):'');
if(company.logo){
document.querySelectorAll('.logo-mark').forEach(function(lm){
lm.style.position='relative';
lm.style.overflow='hidden';
lm.insertAdjacentHTML('beforeend','<img src="'+esc(company.logo)+'" alt="logo" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover" onerror="this.remove()">');
});
}
}
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)">'+t('empty_stats')+'</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)">'+t('empty_services')+'</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" style="position:relative;overflow:hidden">'+icon(sv.icon)+(sv.image?'<img src="'+esc(sv.image)+'" alt="'+esc(sv.title)+'" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover" onerror="this.remove()">':'')+'</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)">'+t('empty_news')+'</p>';return;}
grid.innerHTML=news.map((nw,i)=>{
var catKey=CAT_LABEL_KEY[nw.category];
var cat=catKey?t(catKey):(nw.category||'');
const date=formatDate(nw.created_at);
return '<article class="news-card glass reveal d'+((i%3)+1)+'">'+
'<div class="news-thumb">'+
(nw.image?'<img src="'+esc(nw.image)+'" alt="'+esc(nw.title)+'" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'\'">':'')+
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="'+(nw.image?'display:none':'')+'"><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>'+
'<span class="news-cat cat-'+esc(nw.category)+'">'+esc(cat)+'</span>'+
'</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)">'+t('empty_team')+'</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)+';position:relative;overflow:hidden">'+esc(firstChar(m.name))+(m.avatar?'<img src="'+esc(m.avatar)+'" alt="'+esc(m.name)+'" style="position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover" onerror="this.remove()">':'')+'</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>'+t('about_vision')+'</h3>'+
'<p>'+esc(company.vision||'')+'</p>'+
'<div class="about-meta">'+
'<div class="item"><b>'+esc(company.founded_year||'—')+'</b><span>'+t('about_founded')+'</span></div>'+
'<div class="item"><b>'+esc(company.employee_count||'—')+'</b><span>'+t('about_scale')+'</span></div>'+
'</div>'+
'</div>'+
'<div class="about-card glass reveal d2">'+
'<span class="quote">"</span>'+
'<h3><span class="tag">'+icon('target')+'</span>'+t('about_mission')+'</h3>'+
'<p>'+esc(company.mission||'')+'</p>'+
'<div class="about-meta">'+
'<div class="item"><b>'+esc(company.name||'')+'</b><span>'+t('about_name')+'</span></div>'+
'<div class="item"><b>'+esc(company.website||'')+'</b><span>'+t('about_official')+'</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>'+t('contact_info_title')+'</h3>'+
'<p>'+t('contact_info_desc')+'</p>'+
'<div class="contact-items">'+
'<div class="contact-item">'+
'<div class="ic">'+icon('phone')+'</div>'+
'<div><div class="lbl">'+t('contact_phone')+'</div><div class="val">'+esc(company.phone||'—')+'</div></div>'+
'</div>'+
'<div class="contact-item">'+
'<div class="ic">'+icon('email')+'</div>'+
'<div><div class="lbl">'+t('contact_email')+'</div><div class="val">'+esc(company.email||'—')+'</div></div>'+
'</div>'+
'<div class="contact-item">'+
'<div class="ic">'+icon('location')+'</div>'+
'<div><div class="lbl">'+t('contact_address')+'</div><div class="val">'+esc(company.address||'—')+'</div></div>'+
'</div>'+
'<div class="contact-item">'+
'<div class="ic">'+icon('website')+'</div>'+
'<div><div class="lbl">'+t('contact_website')+'</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">'+t('contact_card_phone')+'</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">'+t('contact_card_email')+'</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">'+t('contact_card_address')+'</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">'+t('contact_card_website')+'</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 '+t('logo_suffix'));
const shortName=name.replace(/科技集團|科技|集團|科技集团|科技|集团/g,'').trim()||'Nexus';
document.getElementById('footerName').innerHTML=esc(shortName)+'<span>'+t('logo_suffix')+'</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='\u00a9 '+fy+'-'+year+' '+name+'. '+t('copyright_suffix');
}
/* =========================================================
错误提示
========================================================= */
function showError(msg){
var 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>'+t('error_title')+'</h3>'+
'<p>'+esc(msg||t('error_desc'))+'</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>'+
t('error_reload')+
'</button>'+
'</div>';
['statsGrid','servicesGrid','newsGrid','teamGrid','aboutGrid','contactWrap'].forEach(function(id){
var el=document.getElementById(id);
if(el) el.innerHTML=html;
});
document.getElementById('heroTitle').textContent=t('error_title');
document.getElementById('heroDesc').textContent=msg||t('error_network');
}
/* =========================================================
语言切换回调:重新渲染动态内容
========================================================= */
var lastData={};
function onLangChange(){
applyI18n();
if(lastData.company){
renderHero(lastData.company);
renderStats(lastData.company);
renderServices(lastData.services||[]);
renderNews(lastData.news||[]);
renderTeam(lastData.team||[]);
renderAbout(lastData.company);
renderContact(lastData.company);
renderFooter(lastData.company);
}
}
/* =========================================================
主流程:获取数据并渲染
========================================================= */
async function bootstrap(){
applyI18n();
try{
const res=await fetch('/api/v1/enterprise/all',{headers:{'Accept':'application/json'}});
if(!res.ok) throw new Error('Server error ('+res.status+')');
const json=await res.json();
if(json.code!==0) throw new Error(json.message||'API error');
const data=json.data||{};
lastData={
company:data.company||{},
services:data.services||[],
news:data.news||[],
team:data.team||[]
};
renderHero(lastData.company);
renderStats(lastData.company);
renderServices(lastData.services);
renderNews(lastData.news);
renderTeam(lastData.team);
renderAbout(lastData.company);
renderContact(lastData.company);
renderFooter(lastData.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||'Network error');
}
}
bootstrap();
</script>
</body>
</html>