1019 lines
52 KiB
HTML
1019 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>智能制造企业官网</title>
|
|
<style>
|
|
/* ===================== 主题变量 ===================== */
|
|
:root{
|
|
--bg:#1A1A2E;
|
|
--bg-2:#16162a;
|
|
--surface:#232342;
|
|
--surface-2:#1d1d38;
|
|
--surface-3:#2a2a4a;
|
|
--accent:#FF6B35;
|
|
--accent-2:#FF8C5A;
|
|
--accent-dim:rgba(255,107,53,.16);
|
|
--accent-line:rgba(255,107,53,.32);
|
|
--warm:#A9A9B8;
|
|
--warm-2:#8E8E9E;
|
|
--text:#E8E8F0;
|
|
--text-strong:#FFFFFF;
|
|
--line:rgba(255,255,255,.08);
|
|
--line-2:rgba(255,255,255,.14);
|
|
--radius:4px;
|
|
--radius-lg:8px;
|
|
--shadow:0 20px 60px rgba(0,0,0,.45);
|
|
--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
|
|
--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
|
|
}
|
|
|
|
/* ===================== 基础重置 ===================== */
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
|
|
body{
|
|
font-family:var(--font);
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
line-height:1.7;
|
|
overflow-x:hidden;
|
|
font-size:16px;
|
|
}
|
|
a{color:inherit;text-decoration:none}
|
|
img{max-width:100%;display:block}
|
|
ul{list-style:none}
|
|
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
|
|
::selection{background:var(--accent);color:#fff}
|
|
|
|
/* 滚动条 */
|
|
::-webkit-scrollbar{width:10px;height:10px}
|
|
::-webkit-scrollbar-track{background:var(--bg-2)}
|
|
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:5px}
|
|
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
|
|
|
|
/* ===================== 通用 ===================== */
|
|
.container{max-width:1240px;margin:0 auto;padding:0 32px}
|
|
.section{padding:120px 0;position:relative}
|
|
.section-head{margin-bottom:64px;max-width:720px}
|
|
.eyebrow{
|
|
display:inline-flex;align-items:center;gap:10px;
|
|
font-size:13px;letter-spacing:.22em;text-transform:uppercase;
|
|
color:var(--accent);font-weight:700;margin-bottom:18px;
|
|
}
|
|
.eyebrow::before{content:"";width:36px;height:2px;background:var(--accent)}
|
|
.section-title{
|
|
font-size:clamp(28px,4vw,46px);font-weight:900;line-height:1.15;
|
|
color:var(--text-strong);letter-spacing:-.01em;
|
|
}
|
|
.section-title .hl{color:var(--accent)}
|
|
.section-sub{margin-top:18px;color:var(--warm);font-size:17px;max-width:600px}
|
|
|
|
/* 角标装饰 */
|
|
.corner{position:absolute;width:14px;height:14px;border:2px solid var(--accent)}
|
|
.corner.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
|
|
.corner.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
|
|
.corner.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
|
|
.corner.br{bottom:-1px;right:-1px;border-left:none;border-top:none}
|
|
|
|
/* 滚动揭示动画 */
|
|
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
|
|
.reveal.in{opacity:1;transform:none}
|
|
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
|
|
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
|
|
.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}
|
|
|
|
/* ===================== 加载遮罩 ===================== */
|
|
#loader{
|
|
position:fixed;inset:0;z-index:9999;background:var(--bg);
|
|
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
|
|
transition:opacity .6s ease,visibility .6s ease;
|
|
}
|
|
#loader.hide{opacity:0;visibility:hidden}
|
|
.loader-gear{
|
|
width:64px;height:64px;position:relative;
|
|
}
|
|
.loader-gear svg{animation:spin 2s linear infinite}
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
.loader-text{font-size:13px;letter-spacing:.3em;color:var(--warm);text-transform:uppercase}
|
|
.loader-bar{width:180px;height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden}
|
|
.loader-bar span{display:block;height:100%;width:40%;background:var(--accent);animation:load 1.2s ease-in-out infinite}
|
|
@keyframes load{0%{margin-left:-40%}100%{margin-left:100%}}
|
|
|
|
/* ===================== 导航栏 ===================== */
|
|
.nav{
|
|
position:fixed;top:0;left:0;right:0;z-index:1000;
|
|
padding:20px 0;transition:all .4s ease;
|
|
background:rgba(26,26,46,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
|
|
border-bottom:1px solid transparent;
|
|
}
|
|
.nav.scrolled{padding:12px 0;background:rgba(22,22,42,.85);border-bottom-color:var(--line)}
|
|
.nav-inner{display:flex;align-items:center;justify-content:space-between}
|
|
.logo{display:flex;align-items:center;gap:12px;font-weight:900;font-size:20px;color:var(--text-strong);letter-spacing:-.01em}
|
|
.logo-mark{
|
|
width:38px;height:38px;border:2px solid var(--accent);border-radius:var(--radius);
|
|
display:grid;place-items:center;position:relative;flex-shrink:0;
|
|
background:linear-gradient(135deg,var(--accent-dim),transparent);
|
|
}
|
|
.logo-mark::after{content:"";position:absolute;inset:4px;border:1px solid var(--accent-line)}
|
|
.logo-mark span{font-size:18px;color:var(--accent);font-weight:900}
|
|
.logo-txt small{display:block;font-size:10px;letter-spacing:.25em;color:var(--warm-2);font-weight:600;text-transform:uppercase}
|
|
|
|
.nav-menu{display:flex;align-items:center;gap:8px}
|
|
.nav-link{
|
|
position:relative;padding:10px 18px;font-size:15px;font-weight:600;color:var(--text);
|
|
transition:color .25s;
|
|
}
|
|
.nav-link::after{
|
|
content:"";position:absolute;left:18px;right:18px;bottom:4px;height:2px;
|
|
background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
|
|
}
|
|
.nav-link:hover,.nav-link.active{color:var(--accent)}
|
|
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
|
|
|
|
.nav-cta{
|
|
margin-left:12px;padding:10px 22px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;
|
|
border-radius:var(--radius);transition:all .25s;letter-spacing:.04em;
|
|
clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
|
|
}
|
|
.nav-cta:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,53,.4)}
|
|
|
|
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
|
|
.nav-toggle span{width:26px;height:2px;background:var(--text);transition:.3s}
|
|
.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{
|
|
position:relative;min-height:100vh;display:flex;align-items:center;
|
|
padding:140px 0 80px;overflow:hidden;
|
|
background:
|
|
radial-gradient(circle at 80% 20%,rgba(255,107,53,.12),transparent 45%),
|
|
radial-gradient(circle at 10% 90%,rgba(255,107,53,.08),transparent 40%),
|
|
var(--bg);
|
|
}
|
|
/* 网格线背景 */
|
|
.hero-grid{
|
|
position:absolute;inset:0;
|
|
background-image:
|
|
linear-gradient(var(--line) 1px,transparent 1px),
|
|
linear-gradient(90deg,var(--line) 1px,transparent 1px);
|
|
background-size:60px 60px;
|
|
mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 30%,transparent 80%);
|
|
-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 30%,transparent 80%);
|
|
animation:gridShift 20s linear infinite;
|
|
}
|
|
@keyframes gridShift{to{background-position:60px 60px}}
|
|
/* 几何装饰 */
|
|
.hero-shape{position:absolute;pointer-events:none}
|
|
.hero-shape.s1{top:18%;right:8%;width:220px;height:220px;border:1px solid var(--accent-line);transform:rotate(45deg);animation:floatY 8s ease-in-out infinite}
|
|
.hero-shape.s1::before{content:"";position:absolute;inset:20px;border:1px dashed var(--accent-line)}
|
|
.hero-shape.s2{bottom:16%;left:6%;width:120px;height:120px;border:2px solid var(--accent);border-radius:50%;opacity:.25;animation:floatY 10s ease-in-out infinite reverse}
|
|
.hero-shape.s3{top:40%;right:22%;width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 24px var(--accent);animation:pulse 2.5s ease-in-out infinite}
|
|
@keyframes floatY{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(-22px)}}
|
|
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
|
|
|
|
.hero-inner{position:relative;z-index:2;max-width:820px}
|
|
.hero-tag{
|
|
display:inline-flex;align-items:center;gap:10px;padding:8px 16px;
|
|
border:1px solid var(--accent-line);border-radius:40px;font-size:13px;
|
|
color:var(--accent);font-weight:600;margin-bottom:28px;letter-spacing:.05em;
|
|
background:rgba(255,107,53,.06);
|
|
}
|
|
.hero-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 2s infinite}
|
|
.hero h1{
|
|
font-size:clamp(40px,7vw,82px);font-weight:900;line-height:1.05;color:var(--text-strong);
|
|
letter-spacing:-.02em;margin-bottom:24px;
|
|
}
|
|
.hero h1 .accent{color:var(--accent);position:relative;display:inline-block}
|
|
.hero h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:14px;background:var(--accent);opacity:.18;z-index:-1}
|
|
.hero-slogan{font-size:clamp(18px,2.2vw,24px);color:var(--warm);max-width:600px;margin-bottom:40px;font-weight:300;line-height:1.6}
|
|
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
|
|
.btn{
|
|
display:inline-flex;align-items:center;gap:10px;padding:16px 34px;font-weight:700;font-size:15px;
|
|
border-radius:var(--radius);transition:all .3s;letter-spacing:.03em;position:relative;
|
|
}
|
|
.btn-primary{background:var(--accent);color:#fff;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
|
|
.btn-primary:hover{background:var(--accent-2);transform:translateY(-3px);box-shadow:0 14px 40px rgba(255,107,53,.45)}
|
|
.btn-ghost{border:1px solid var(--line-2);color:var(--text)}
|
|
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
|
|
.btn svg{width:18px;height:18px}
|
|
|
|
.hero-meta{display:flex;gap:48px;margin-top:64px;flex-wrap:wrap}
|
|
.hero-meta .item{position:relative;padding-left:20px}
|
|
.hero-meta .item::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--accent)}
|
|
.hero-meta .num{font-size:30px;font-weight:900;color:var(--text-strong);font-family:var(--mono)}
|
|
.hero-meta .lbl{font-size:13px;color:var(--warm-2);letter-spacing:.08em;text-transform:uppercase}
|
|
|
|
/* 滚动提示 */
|
|
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--warm-2);font-size:11px;letter-spacing:.25em;text-transform:uppercase}
|
|
.scroll-hint .mouse{width:22px;height:36px;border:2px solid var(--warm-2);border-radius:12px;position:relative}
|
|
.scroll-hint .mouse::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:var(--accent);border-radius:2px;animation:scrollDot 1.6s infinite}
|
|
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}}
|
|
|
|
/* ===================== 核心能力 ===================== */
|
|
#capabilities{background:var(--bg-2);position:relative}
|
|
#capabilities::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
|
|
.cap-item{
|
|
display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
|
|
margin-bottom:100px;position:relative;
|
|
}
|
|
.cap-item:last-child{margin-bottom:0}
|
|
.cap-item.flip .cap-visual{order:2}
|
|
.cap-item.flip .cap-body{order:1}
|
|
.cap-visual{position:relative;min-height:340px}
|
|
.cap-number{
|
|
position:absolute;font-size:200px;font-weight:900;line-height:1;color:transparent;
|
|
-webkit-text-stroke:1.5px var(--accent-line);top:-30px;left:-10px;z-index:1;font-family:var(--mono);
|
|
user-select:none;
|
|
}
|
|
.cap-visual-card{
|
|
position:relative;z-index:2;height:300px;margin-top:60px;
|
|
background:linear-gradient(135deg,var(--surface),var(--surface-2));
|
|
border:1px solid var(--accent-line);border-radius:var(--radius-lg);
|
|
display:flex;align-items:center;justify-content:center;overflow:hidden;
|
|
box-shadow:var(--shadow);
|
|
}
|
|
.cap-visual-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:30px 30px;opacity:.5}
|
|
.cap-icon-big{width:120px;height:120px;color:var(--accent);position:relative;z-index:2;filter:drop-shadow(0 0 20px rgba(255,107,53,.4))}
|
|
.cap-icon-big svg{width:100%;height:100%}
|
|
.cap-visual-card .badge{position:absolute;bottom:16px;right:16px;font-size:11px;color:var(--warm-2);letter-spacing:.2em;text-transform:uppercase;font-family:var(--mono)}
|
|
|
|
.cap-body{padding:0 10px}
|
|
.cap-cat{display:inline-block;padding:5px 14px;border:1px solid var(--accent-line);border-radius:40px;font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.1em;margin-bottom:18px;text-transform:uppercase}
|
|
.cap-title{font-size:clamp(24px,3vw,34px);font-weight:900;color:var(--text-strong);margin-bottom:18px;line-height:1.2}
|
|
.cap-desc{color:var(--warm);font-size:16px;margin-bottom:28px;line-height:1.8}
|
|
.cap-features{display:flex;flex-direction:column;gap:14px}
|
|
.cap-feat{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--text)}
|
|
.cap-feat .chk{
|
|
width:24px;height:24px;flex-shrink:0;border:1.5px solid var(--accent);border-radius:var(--radius);
|
|
display:grid;place-items:center;color:var(--accent);background:var(--accent-dim);
|
|
}
|
|
.cap-feat .chk svg{width:14px;height:14px}
|
|
|
|
/* ===================== 统计数据 ===================== */
|
|
#stats{background:var(--bg);position:relative;overflow:hidden}
|
|
#stats::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,107,53,.08),transparent 50%)}
|
|
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1}
|
|
.stat-card{
|
|
position:relative;padding:36px 28px;background:var(--surface);border:1px solid var(--line);
|
|
border-radius:var(--radius-lg);overflow:hidden;transition:all .4s;
|
|
}
|
|
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .4s}
|
|
.stat-card:hover{border-color:var(--accent-line);transform:translateY(-6px)}
|
|
.stat-card:hover::before{transform:scaleY(1)}
|
|
.stat-icon{width:42px;height:42px;color:var(--accent);margin-bottom:20px;opacity:.85}
|
|
.stat-icon svg{width:100%;height:100%}
|
|
.stat-val{font-size:clamp(36px,5vw,54px);font-weight:900;color:var(--accent);font-family:var(--mono);line-height:1;letter-spacing:-.02em}
|
|
.stat-lbl{margin-top:12px;font-size:14px;color:var(--warm);letter-spacing:.06em}
|
|
/* 进度条风格背景 */
|
|
.stat-bar{margin-top:20px;height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden;position:relative}
|
|
.stat-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px;width:0;transition:width 1.6s cubic-bezier(.16,1,.3,1)}
|
|
|
|
/* ===================== 新闻动态 ===================== */
|
|
#news{background:var(--bg-2);position:relative}
|
|
.news-list{position:relative;padding-left:8px}
|
|
.news-list::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--accent),transparent)}
|
|
.news-item{
|
|
position:relative;display:grid;grid-template-columns:180px 1fr;gap:40px;
|
|
padding:32px 0 32px 40px;border-bottom:1px solid var(--line);transition:all .3s;
|
|
}
|
|
.news-item:last-child{border-bottom:none}
|
|
.news-item::before{
|
|
content:"";position:absolute;left:-7px;top:42px;width:12px;height:12px;border-radius:50%;
|
|
background:var(--bg-2);border:2px solid var(--accent);transition:all .3s;
|
|
}
|
|
.news-item:hover::before{background:var(--accent);box-shadow:0 0 16px var(--accent)}
|
|
.news-date{display:flex;flex-direction:column;gap:6px}
|
|
.news-date .day{font-size:34px;font-weight:900;color:var(--text-strong);font-family:var(--mono);line-height:1}
|
|
.news-date .ym{font-size:13px;color:var(--warm-2);letter-spacing:.08em}
|
|
.news-cat{display:inline-block;width:fit-content;padding:4px 12px;background:var(--accent-dim);color:var(--accent);font-size:12px;font-weight:600;border-radius:var(--radius);margin-bottom:12px;letter-spacing:.05em}
|
|
.news-body h3{font-size:20px;font-weight:800;color:var(--text-strong);margin-bottom:12px;transition:color .25s;cursor:pointer}
|
|
.news-item:hover .news-body h3{color:var(--accent)}
|
|
.news-body p{color:var(--warm);font-size:15px;line-height:1.7}
|
|
.news-meta{margin-top:14px;font-size:13px;color:var(--warm-2);display:flex;align-items:center;gap:8px}
|
|
.news-meta svg{width:14px;height:14px}
|
|
|
|
/* ===================== 团队介绍 ===================== */
|
|
#team{background:var(--bg);position:relative}
|
|
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
|
|
.team-card{
|
|
position:relative;padding:36px 30px;background:var(--surface);border:1px solid var(--line);
|
|
border-radius:var(--radius-lg);transition:all .4s;overflow:hidden;
|
|
}
|
|
.team-card::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:var(--radius-lg);transition:border-color .4s;pointer-events:none}
|
|
.team-card:hover{transform:translateY(-8px);border-color:var(--accent-line);box-shadow:0 24px 60px rgba(0,0,0,.5)}
|
|
.team-num{position:absolute;top:24px;right:28px;font-size:42px;font-weight:900;color:var(--accent);opacity:.22;font-family:var(--mono);line-height:1}
|
|
.team-avatar{
|
|
width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
|
|
font-size:30px;font-weight:900;color:#fff;margin-bottom:24px;position:relative;
|
|
background:linear-gradient(135deg,var(--accent),#c4451f);
|
|
box-shadow:0 8px 24px rgba(255,107,53,.35);
|
|
}
|
|
.team-avatar::after{content:"";position:absolute;inset:-4px;border:1px dashed var(--accent-line);border-radius:50%}
|
|
.team-name{font-size:20px;font-weight:800;color:var(--text-strong);margin-bottom:6px}
|
|
.team-pos{font-size:14px;color:var(--accent);font-weight:600;margin-bottom:16px;letter-spacing:.02em}
|
|
.team-bio{font-size:14px;color:var(--warm);line-height:1.7}
|
|
|
|
/* ===================== 企业愿景 ===================== */
|
|
#vision{background:var(--bg-2);position:relative;overflow:hidden}
|
|
#vision::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;border:1px solid var(--accent-line);border-radius:50%;opacity:.3}
|
|
#vision::after{content:"";position:absolute;bottom:-150px;left:-50px;width:300px;height:300px;border:1px solid var(--accent-line);transform:rotate(45deg);opacity:.2}
|
|
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;position:relative;z-index:1}
|
|
.vision-card{
|
|
position:relative;padding:48px 40px;background:var(--surface);border:1px solid var(--line);
|
|
border-radius:var(--radius-lg);overflow:hidden;
|
|
}
|
|
.vision-card .quote{position:absolute;top:10px;left:24px;font-size:120px;font-weight:900;color:var(--accent);opacity:.12;line-height:1;font-family:Georgia,serif}
|
|
.vision-card .vlabel{font-size:13px;letter-spacing:.25em;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:20px;position:relative}
|
|
.vision-card .vtext{font-size:clamp(18px,2vw,22px);line-height:1.8;color:var(--text);font-weight:300;position:relative}
|
|
.vision-card .vtext .hl{color:var(--accent);font-weight:600}
|
|
|
|
/* ===================== 联系方式 ===================== */
|
|
#contact{background:var(--bg);position:relative}
|
|
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:stretch}
|
|
.contact-info{display:flex;flex-direction:column;gap:20px}
|
|
.contact-card{
|
|
display:flex;gap:22px;align-items:flex-start;padding:26px 28px;
|
|
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
|
|
transition:all .3s;position:relative;
|
|
}
|
|
.contact-card:hover{border-color:var(--accent-line);transform:translateX(6px)}
|
|
.contact-icon{
|
|
width:50px;height:50px;flex-shrink:0;border-radius:var(--radius);
|
|
background:var(--accent-dim);border:1px solid var(--accent-line);
|
|
display:grid;place-items:center;color:var(--accent);
|
|
}
|
|
.contact-icon svg{width:24px;height:24px}
|
|
.contact-card .ct-lbl{font-size:12px;color:var(--warm-2);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
|
|
.contact-card .ct-val{font-size:16px;color:var(--text-strong);font-weight:600;word-break:break-all}
|
|
.contact-map{
|
|
background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--line);
|
|
border-radius:var(--radius-lg);padding:40px;display:flex;flex-direction:column;justify-content:space-between;
|
|
position:relative;overflow:hidden;
|
|
}
|
|
.contact-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:.4}
|
|
.contact-map-inner{position:relative;z-index:1}
|
|
.contact-map .map-tag{font-size:12px;color:var(--accent);letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
|
|
.contact-map .map-addr{font-size:22px;font-weight:800;color:var(--text-strong);line-height:1.4;margin-bottom:20px}
|
|
.contact-map .map-desc{color:var(--warm);font-size:15px;line-height:1.7}
|
|
.contact-map .map-cta{position:relative;z-index:1;margin-top:28px;display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-weight:700;font-size:14px;letter-spacing:.05em}
|
|
.contact-map .map-cta svg{width:18px;height:18px;transition:transform .3s}
|
|
.contact-map .map-cta:hover svg{transform:translateX(6px)}
|
|
|
|
/* ===================== 页脚 ===================== */
|
|
.footer{background:var(--bg-2);padding:64px 0 28px;border-top:1px solid var(--line);position:relative}
|
|
.footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:200px;height:2px;background:var(--accent)}
|
|
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
|
|
.footer-brand .logo{margin-bottom:18px}
|
|
.footer-brand p{color:var(--warm);font-size:14px;line-height:1.8;max-width:320px}
|
|
.footer-col h4{font-size:14px;color:var(--text-strong);font-weight:700;margin-bottom:18px;letter-spacing:.04em}
|
|
.footer-col ul{display:flex;flex-direction:column;gap:10px}
|
|
.footer-col a{font-size:14px;color:var(--warm);transition:color .25s}
|
|
.footer-col a:hover{color:var(--accent)}
|
|
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px}
|
|
.footer-bottom p{font-size:13px;color:var(--warm-2)}
|
|
.footer-bottom .links{display:flex;gap:24px}
|
|
.footer-bottom .links a{font-size:13px;color:var(--warm-2);transition:color .25s}
|
|
.footer-bottom .links a:hover{color:var(--accent)}
|
|
|
|
/* ===================== 骨架屏 ===================== */
|
|
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-3) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}
|
|
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
|
.sk-line{height:14px;margin-bottom:12px;border-radius:var(--radius)}
|
|
.sk-line.w60{width:60%}.sk-line.w80{width:80%}.sk-line.w40{width:40%}.sk-line.w30{width:30%}
|
|
.sk-block{height:120px;border-radius:var(--radius-lg);margin-bottom:24px}
|
|
.sk-card{height:200px;border-radius:var(--radius-lg)}
|
|
|
|
/* ===================== 响应式 ===================== */
|
|
@media(max-width:980px){
|
|
.section{padding:80px 0}
|
|
.container{padding:0 24px}
|
|
.nav-menu{
|
|
position:fixed;top:0;right:-100%;bottom:0;width:75%;max-width:340px;
|
|
flex-direction:column;align-items:flex-start;justify-content:flex-start;
|
|
background:var(--bg-2);padding:90px 30px 30px;gap:6px;transition:right .4s ease;
|
|
border-left:1px solid var(--line);z-index:999;
|
|
}
|
|
.nav-menu.open{right:0}
|
|
.nav-link{width:100%;padding:14px 0;font-size:17px;border-bottom:1px solid var(--line)}
|
|
.nav-link::after{display:none}
|
|
.nav-cta{margin-left:0;margin-top:14px}
|
|
.nav-toggle{display:flex;z-index:1001}
|
|
.cap-item,.cap-item.flip{grid-template-columns:1fr;gap:30px}
|
|
.cap-item.flip .cap-visual,.cap-item.flip .cap-body{order:unset}
|
|
.cap-visual{min-height:auto}
|
|
.cap-number{font-size:140px;top:-20px}
|
|
.stats-grid{grid-template-columns:repeat(2,1fr)}
|
|
.team-grid{grid-template-columns:repeat(2,1fr)}
|
|
.vision-grid{grid-template-columns:1fr;gap:24px}
|
|
.contact-grid{grid-template-columns:1fr;gap:24px}
|
|
.footer-top{grid-template-columns:1fr 1fr;gap:30px}
|
|
.news-item{grid-template-columns:1fr;gap:16px}
|
|
}
|
|
@media(max-width:600px){
|
|
.hero{padding:120px 0 60px}
|
|
.hero-meta{gap:28px}
|
|
.hero-meta .num{font-size:24px}
|
|
.stats-grid{grid-template-columns:1fr}
|
|
.team-grid{grid-template-columns:1fr}
|
|
.footer-top{grid-template-columns:1fr}
|
|
.footer-bottom{flex-direction:column;text-align:center}
|
|
.section-head{margin-bottom:40px}
|
|
.vision-card{padding:36px 26px}
|
|
.cap-visual-card{height:240px}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 加载遮罩 -->
|
|
<div id="loader">
|
|
<div class="loader-gear">
|
|
<svg viewBox="0 0 100 100" fill="none" stroke="#FF6B35" stroke-width="3">
|
|
<circle cx="50" cy="50" r="20"/>
|
|
<circle cx="50" cy="50" r="40" stroke-dasharray="6 8"/>
|
|
<circle cx="50" cy="10" r="4" fill="#FF6B35"/>
|
|
</svg>
|
|
</div>
|
|
<div class="loader-bar"><span></span></div>
|
|
<div class="loader-text">系统加载中</div>
|
|
</div>
|
|
|
|
<!-- 导航栏 -->
|
|
<nav class="nav" id="nav">
|
|
<div class="container nav-inner">
|
|
<a href="#hero" class="logo">
|
|
<div class="logo-mark"><span>M</span></div>
|
|
<div class="logo-txt"><span id="navName">MANUFACT</span><small>智能制造</small></div>
|
|
</a>
|
|
<ul class="nav-menu" id="navMenu">
|
|
<li><a href="#hero" class="nav-link active">首页</a></li>
|
|
<li><a href="#capabilities" class="nav-link">能力</a></li>
|
|
<li><a href="#stats" class="nav-link">资质</a></li>
|
|
<li><a href="#news" class="nav-link">新闻</a></li>
|
|
<li><a href="#contact" class="nav-link">联系</a></li>
|
|
<li><a href="#contact" class="nav-cta">立即咨询</a></li>
|
|
</ul>
|
|
<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="hero-grid"></div>
|
|
<div class="hero-shape s1"></div>
|
|
<div class="hero-shape s2"></div>
|
|
<div class="hero-shape s3"></div>
|
|
<div class="container hero-inner">
|
|
<div class="hero-tag"><span class="dot"></span><span id="heroTag">智能制造 · 工业自动化解决方案</span></div>
|
|
<h1 id="heroTitle">用精密制造<br><span class="accent">驱动工业未来</span></h1>
|
|
<p class="hero-slogan" id="heroSlogan">载入中...</p>
|
|
<div class="hero-actions">
|
|
<a href="#capabilities" class="btn btn-primary">
|
|
探索核心能力
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
|
</a>
|
|
<a href="#contact" class="btn btn-ghost">联系我们</a>
|
|
</div>
|
|
<div class="hero-meta" id="heroMeta">
|
|
<div class="item"><div class="num" id="metaYear">2010</div><div class="lbl">成立年份</div></div>
|
|
<div class="item"><div class="num" id="metaEmp">2000+</div><div class="lbl">团队规模</div></div>
|
|
<div class="item"><div class="num" id="metaService">5000+</div><div class="lbl">服务客户</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="scroll-hint"><div class="mouse"></div><span>向下滚动</span></div>
|
|
</header>
|
|
|
|
<!-- 核心能力 -->
|
|
<section class="section" id="capabilities">
|
|
<div class="container">
|
|
<div class="section-head reveal">
|
|
<div class="eyebrow">Core Capabilities</div>
|
|
<h2 class="section-title">核心<span class="hl">能力</span>体系</h2>
|
|
<p class="section-sub">从智能装备到工业互联网,我们构建覆盖全产业链的制造能力矩阵,以技术深度定义行业标准。</p>
|
|
</div>
|
|
<div id="capWrap">
|
|
<!-- 骨架屏 -->
|
|
<div class="cap-item">
|
|
<div class="cap-visual"><div class="cap-visual-card skeleton"></div></div>
|
|
<div class="cap-body"><div class="skeleton sk-line w30"></div><div class="skeleton sk-line w80" style="height:28px"></div><div class="skeleton sk-line w60"></div><div class="skeleton sk-line"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 统计数据 -->
|
|
<section class="section" id="stats">
|
|
<div class="container">
|
|
<div class="section-head reveal">
|
|
<div class="eyebrow">Qualifications & Data</div>
|
|
<h2 class="section-title">资质<span class="hl">实力</span>印证</h2>
|
|
<p class="section-sub">数字背后是十余年深耕制造业的沉淀,每一项指标都印证着我们对卓越的持续追求。</p>
|
|
</div>
|
|
<div class="stats-grid" id="statsGrid">
|
|
<div class="stat-card"><div class="skeleton sk-block" style="height:80px"></div></div>
|
|
<div class="stat-card"><div class="skeleton sk-block" style="height:80px"></div></div>
|
|
<div class="stat-card"><div class="skeleton sk-block" style="height:80px"></div></div>
|
|
<div class="stat-card"><div class="skeleton sk-block" style="height:80px"></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 新闻动态 -->
|
|
<section class="section" id="news">
|
|
<div class="container">
|
|
<div class="section-head reveal">
|
|
<div class="eyebrow">News & Updates</div>
|
|
<h2 class="section-title">新闻<span class="hl">动态</span></h2>
|
|
<p class="section-sub">关注我们的最新进展、技术突破与行业洞察,见证智能制造的每一步演进。</p>
|
|
</div>
|
|
<div class="news-list" id="newsList">
|
|
<div class="news-item"><div class="skeleton sk-line w40" style="height:28px"></div><div><div class="skeleton sk-line w80" style="height:20px"></div><div class="skeleton sk-line"></div><div class="skeleton sk-line w60"></div></div></div>
|
|
<div class="news-item"><div class="skeleton sk-line w40" style="height:28px"></div><div><div class="skeleton sk-line w80" style="height:20px"></div><div class="skeleton sk-line"></div><div class="skeleton sk-line w60"></div></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 团队介绍 -->
|
|
<section class="section" id="team">
|
|
<div class="container">
|
|
<div class="section-head reveal">
|
|
<div class="eyebrow">Our Team</div>
|
|
<h2 class="section-title">核心<span class="hl">团队</span></h2>
|
|
<p class="section-sub">汇聚行业顶尖人才,以深厚的技术积淀与前瞻视野,引领企业持续创新。</p>
|
|
</div>
|
|
<div class="team-grid" id="teamGrid">
|
|
<div class="team-card"><div class="skeleton sk-card"></div></div>
|
|
<div class="team-card"><div class="skeleton sk-card"></div></div>
|
|
<div class="team-card"><div class="skeleton sk-card"></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 企业愿景 -->
|
|
<section class="section" id="vision">
|
|
<div class="container">
|
|
<div class="section-head reveal" style="text-align:center;max-width:none">
|
|
<div class="eyebrow" style="justify-content:center">Vision & Mission</div>
|
|
<h2 class="section-title">愿景与<span class="hl">使命</span></h2>
|
|
</div>
|
|
<div class="vision-grid">
|
|
<div class="vision-card reveal">
|
|
<span class="quote">“</span>
|
|
<div class="vlabel">企业愿景 / Vision</div>
|
|
<p class="vtext" id="visionText">载入中...</p>
|
|
</div>
|
|
<div class="vision-card reveal d2">
|
|
<span class="quote">“</span>
|
|
<div class="vlabel">企业使命 / Mission</div>
|
|
<p class="vtext" id="missionText">载入中...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 联系方式 -->
|
|
<section class="section" id="contact">
|
|
<div class="container">
|
|
<div class="section-head reveal">
|
|
<div class="eyebrow">Contact Us</div>
|
|
<h2 class="section-title">联系<span class="hl">我们</span></h2>
|
|
<p class="section-sub">无论您有何种需求,我们都期待与您建立连接,共同探索智能制造的无限可能。</p>
|
|
</div>
|
|
<div class="contact-grid" id="contactGrid">
|
|
<div class="contact-info">
|
|
<div class="contact-card">
|
|
<div class="contact-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg></div>
|
|
<div><div class="ct-lbl">联系电话</div><div class="ct-val" id="ctPhone">--</div></div>
|
|
</div>
|
|
<div class="contact-card">
|
|
<div class="contact-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/><path d="M22 6l-10 7L2 6"/></svg></div>
|
|
<div><div class="ct-lbl">电子邮箱</div><div class="ct-val" id="ctEmail">--</div></div>
|
|
</div>
|
|
<div class="contact-card">
|
|
<div class="contact-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg></div>
|
|
<div><div class="ct-lbl">官方网站</div><div class="ct-val" id="ctWeb">--</div></div>
|
|
</div>
|
|
<div class="contact-card">
|
|
<div class="contact-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
|
|
<div><div class="ct-lbl">公司地址</div><div class="ct-val" id="ctAddr">--</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="contact-map">
|
|
<div class="contact-map-inner">
|
|
<div class="map-tag">Headquarters</div>
|
|
<div class="map-addr" id="mapAddr">--</div>
|
|
<p class="map-desc" id="mapDesc">载入中...</p>
|
|
</div>
|
|
<a href="#hero" class="map-cta">
|
|
返回顶部
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-top">
|
|
<div class="footer-brand">
|
|
<a href="#hero" class="logo">
|
|
<div class="logo-mark"><span>M</span></div>
|
|
<div class="logo-txt"><span id="footName">MANUFACT</span><small>智能制造</small></div>
|
|
</a>
|
|
<p id="footDesc">致力于为全球客户提供智能制造与工业自动化解决方案,以技术创新驱动产业升级。</p>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>导航</h4>
|
|
<ul>
|
|
<li><a href="#hero">首页</a></li>
|
|
<li><a href="#capabilities">核心能力</a></li>
|
|
<li><a href="#stats">资质实力</a></li>
|
|
<li><a href="#news">新闻动态</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>关于</h4>
|
|
<ul>
|
|
<li><a href="#team">团队介绍</a></li>
|
|
<li><a href="#vision">企业愿景</a></li>
|
|
<li><a href="#contact">联系我们</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>联系方式</h4>
|
|
<ul>
|
|
<li><a href="tel:" id="footPhone">--</a></li>
|
|
<li><a href="mailto:" id="footEmail">--</a></li>
|
|
<li><a href="#contact">公司地址</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p id="footCopy">© 2026 智能制造企业. 保留所有权利.</p>
|
|
<div class="links">
|
|
<a href="#hero">隐私政策</a>
|
|
<a href="#hero">服务条款</a>
|
|
<a href="#hero">网站地图</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
/* ===================== SVG 图标库 ===================== */
|
|
const ICONS = {
|
|
// 服务图标
|
|
ai:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="16" height="16" rx="2"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/><circle cx="15" cy="9" r="1.5" fill="currentColor"/><path d="M9 15h6M12 9v6"/></svg>',
|
|
cloud:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17.5 19a4.5 4.5 0 100-9 5.5 5.5 0 00-10.83-1.5A4 4 0 006.5 19h11z"/></svg>',
|
|
iot:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8"/></svg>',
|
|
data:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v6c0 1.66 4 3 9 3s9-1.34 9-3V5M3 11v6c0 1.66 4 3 9 3s9-1.34 9-3v-6"/></svg>',
|
|
security:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-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.5"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><path d="M8 10h.01M12 10h.01M16 10h.01"/></svg>',
|
|
// 统计图标
|
|
users:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>',
|
|
patent:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2l2.4 7.4H22l-6 4.5 2.3 7.1-6.3-4.6L5.7 21l2.3-7.1-6-4.5h7.6z"/></svg>',
|
|
globe:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>',
|
|
revenue:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v18h18"/><path d="M7 14l4-4 3 3 5-6"/></svg>',
|
|
factory:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 20h20M4 20V8l5 3V8l5 3V8l5 3v9M8 20v-4M13 20v-4M18 20v-4"/></svg>',
|
|
cog:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>',
|
|
chip:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="6" y="6" width="12" height="12" rx="1"/><path d="M9 9h6v6H9z"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></svg>',
|
|
shield:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/></svg>'
|
|
};
|
|
function getIcon(name,fallback){
|
|
return ICONS[name]||ICONS[fallback]||ICONS.cog;
|
|
}
|
|
const checkSvg='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg>';
|
|
|
|
/* ===================== 工具函数 ===================== */
|
|
function safeParse(str,def){
|
|
try{return JSON.parse(str)}catch(e){return def||[]}
|
|
}
|
|
function pad(n){return n<10?'0'+n:''+n}
|
|
function formatDate(iso){
|
|
if(!iso)return{day:'--',ym:'----'};
|
|
const d=new Date(iso);
|
|
if(isNaN(d))return{day:'--',ym:'----'};
|
|
return{day:pad(d.getDate()),ym:d.getFullYear()+'.'+pad(d.getMonth()+1)};
|
|
}
|
|
function escapeHtml(s){
|
|
if(s==null)return'';
|
|
return String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
|
}
|
|
// 从 stats value 中提取数字与后缀用于计数
|
|
function splitNum(val){
|
|
const m=String(val).match(/^([\d.]+)(.*)$/);
|
|
if(m)return{num:parseFloat(m[1]),suffix:m[2]||''};
|
|
return{num:null,suffix:String(val)};
|
|
}
|
|
|
|
/* ===================== 数据获取 ===================== */
|
|
async function fetchData(){
|
|
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||'数据获取失败');
|
|
return json.data;
|
|
}
|
|
|
|
/* ===================== 渲染:Hero / 通用信息 ===================== */
|
|
function renderCompany(c){
|
|
if(!c)return;
|
|
const name=c.name||'智能制造企业';
|
|
document.title=name+' | 智能制造官网';
|
|
// 导航与页脚名称:取英文风格缩写
|
|
const shortName=name.replace(/科技集团|集团|科技|有限公司|股份有限公司/g,'').slice(0,8).toUpperCase()||'MANUFACT';
|
|
document.getElementById('navName').textContent=shortName;
|
|
document.getElementById('footName').textContent=shortName;
|
|
// Hero
|
|
document.getElementById('heroTitle').innerHTML=escapeHtml(c.name||'用精密制造驱动工业未来').replace(/(.{0,6})$/,'<span class="accent">$1</span>');
|
|
// 若 slogan 过短则用标题拆分;否则直接展示
|
|
if(c.slogan){
|
|
document.getElementById('heroTitle').innerHTML=
|
|
escapeHtml(c.name||'')+'<br><span class="accent">'+escapeHtml(c.slogan)+'</span>';
|
|
}
|
|
document.getElementById('heroSlogan').textContent=c.description?c.description.slice(0,120)+(c.description.length>120?'...':''):'致力于智能制造与工业自动化解决方案';
|
|
// Hero meta
|
|
document.getElementById('metaYear').textContent=c.founded_year||'2010';
|
|
document.getElementById('metaEmp').textContent=c.employee_count||'2000+';
|
|
// 联系方式
|
|
document.getElementById('ctPhone').textContent=c.phone||'--';
|
|
document.getElementById('ctEmail').textContent=c.email||'--';
|
|
document.getElementById('ctWeb').textContent=c.website||'--';
|
|
document.getElementById('ctAddr').textContent=c.address||'--';
|
|
document.getElementById('mapAddr').textContent=c.address||'--';
|
|
document.getElementById('mapDesc').textContent=c.description||'欢迎莅临我司总部,共商合作。';
|
|
/* 企业 Logo 图片注入 */
|
|
if(c.logo){
|
|
document.querySelectorAll('.logo-mark').forEach(function(lm){
|
|
lm.style.overflow='hidden';
|
|
lm.insertAdjacentHTML('beforeend','<img src="'+escapeHtml(c.logo)+'" alt="logo" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover" onerror="this.remove()">');
|
|
});
|
|
}
|
|
// 页脚
|
|
document.getElementById('footDesc').textContent=c.description?c.description.slice(0,90)+'...':'致力于为全球客户提供智能制造与工业自动化解决方案。';
|
|
document.getElementById('footPhone').textContent=c.phone||'--';
|
|
document.getElementById('footEmail').textContent=c.email||'--';
|
|
document.getElementById('footCopy').innerHTML='© '+(new Date().getFullYear())+' '+escapeHtml(name)+'. 保留所有权利.';
|
|
// 愿景使命
|
|
const vt=document.getElementById('visionText');
|
|
vt.innerHTML=highlight(escapeHtml(c.vision||''));
|
|
const mt=document.getElementById('missionText');
|
|
mt.innerHTML=highlight(escapeHtml(c.mission||''));
|
|
}
|
|
// 简单高亮:将关键短语用橙色包裹
|
|
function highlight(text){
|
|
return text
|
|
.replace(/(全球领先|创新技术|核心驱动力|创造价值|承担责任|提供平台|智能制造|工业)/g,'<span class="hl">$1</span>');
|
|
}
|
|
|
|
/* ===================== 渲染:核心能力 ===================== */
|
|
function renderServices(services){
|
|
const wrap=document.getElementById('capWrap');
|
|
if(!services||!services.length){wrap.innerHTML='<p style="color:var(--warm)">暂无能力数据</p>';return}
|
|
wrap.innerHTML=services.map((s,i)=>{
|
|
const idx=pad(i+1);
|
|
const flip=i%2===1?'flip':'';
|
|
const features=safeParse(s.features,[]);
|
|
const featHtml=features.map(f=>`
|
|
<div class="cap-feat"><div class="chk">${checkSvg}</div><span>${escapeHtml(f)}</span></div>
|
|
`).join('');
|
|
const icon=getIcon(s.icon,'factory');
|
|
return `
|
|
<div class="cap-item ${flip} reveal" style="transition-delay:${(i%2)*.1}s">
|
|
<div class="cap-visual">
|
|
<div class="cap-number">${idx}</div>
|
|
<div class="cap-visual-card">
|
|
${s.image?`<img src="${escapeHtml(s.image)}" alt="${escapeHtml(s.title)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover" onerror="this.style.display='none';this.nextElementSibling.style.display=''">`:''}
|
|
<div class="cap-icon-big" style="${s.image?'display:none':''}">${icon}</div>
|
|
<span class="badge">CAP ${idx}</span>
|
|
</div>
|
|
</div>
|
|
<div class="cap-body">
|
|
<span class="cap-cat">能力 ${idx}</span>
|
|
<h3 class="cap-title">${escapeHtml(s.title)}</h3>
|
|
<p class="cap-desc">${escapeHtml(s.description||'')}</p>
|
|
<div class="cap-features">${featHtml}</div>
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
observeReveal();
|
|
}
|
|
|
|
/* ===================== 渲染:统计数据 ===================== */
|
|
function renderStats(c){
|
|
const grid=document.getElementById('statsGrid');
|
|
const stats=safeParse(c&&c.stats,[]);
|
|
if(!stats.length){
|
|
grid.innerHTML='<p style="color:var(--warm);grid-column:1/-1;text-align:center">暂无统计数据</p>';
|
|
return;
|
|
}
|
|
// 同时更新 hero meta 的服务客户数
|
|
const clientStat=stats.find(s=>/客户|customer/i.test(s.label));
|
|
if(clientStat){document.getElementById('metaService').textContent=clientStat.value}
|
|
grid.innerHTML=stats.map((s,i)=>{
|
|
const icon=getIcon(s.icon,'revenue');
|
|
return `
|
|
<div class="stat-card reveal d${(i%4)+1}">
|
|
<div class="stat-icon">${icon}</div>
|
|
<div class="stat-val" data-num-target="${escapeHtml(s.value)}">${escapeHtml(s.value)}</div>
|
|
<div class="stat-lbl">${escapeHtml(s.label)}</div>
|
|
<div class="stat-bar"><span data-w="${80-i*5}"></span></div>
|
|
</div>`;
|
|
}).join('');
|
|
observeReveal();
|
|
// 启动计数与进度条
|
|
animateStats();
|
|
}
|
|
function animateStats(){
|
|
const els=document.querySelectorAll('.stat-val[data-num-target]');
|
|
const io=new IntersectionObserver((entries)=>{
|
|
entries.forEach(en=>{
|
|
if(en.isIntersecting){
|
|
const el=en.target;
|
|
const raw=el.getAttribute('data-num-target');
|
|
const{num,suffix}=splitNum(raw);
|
|
if(num!==null&&!isNaN(num)){
|
|
countUp(el,num,suffix,1600);
|
|
}else{
|
|
el.textContent=raw;
|
|
}
|
|
io.unobserve(el);
|
|
}
|
|
});
|
|
},{threshold:.4});
|
|
els.forEach(el=>io.observe(el));
|
|
// 进度条
|
|
const bars=document.querySelectorAll('.stat-bar span');
|
|
const io2=new IntersectionObserver((entries)=>{
|
|
entries.forEach(en=>{
|
|
if(en.isIntersecting){
|
|
const w=en.target.getAttribute('data-w')||75;
|
|
en.target.style.width=w+'%';
|
|
io2.unobserve(en.target);
|
|
}
|
|
});
|
|
},{threshold:.3});
|
|
bars.forEach(b=>io2.observe(b));
|
|
}
|
|
function countUp(el,target,suffix,dur){
|
|
const start=0;const t0=performance.now();
|
|
const isInt=Number.isInteger(target);
|
|
function step(now){
|
|
const p=Math.min((now-t0)/dur,1);
|
|
const ease=1-Math.pow(1-p,3);
|
|
const cur=start+(target-start)*ease;
|
|
el.textContent=(isInt?Math.round(cur):cur.toFixed(1))+suffix;
|
|
if(p<1)requestAnimationFrame(step);
|
|
else el.textContent=target+suffix;
|
|
}
|
|
requestAnimationFrame(step);
|
|
}
|
|
|
|
/* ===================== 渲染:新闻动态 ===================== */
|
|
const CAT_MAP={company:'企业动态',industry:'行业资讯',product:'产品发布',tech:'技术前沿',default:'企业动态'};
|
|
function renderNews(news){
|
|
const list=document.getElementById('newsList');
|
|
if(!news||!news.length){list.innerHTML='<p style="color:var(--warm)">暂无新闻动态</p>';return}
|
|
list.innerHTML=news.map((n,i)=>{
|
|
const dt=formatDate(n.created_at);
|
|
const cat=CAT_MAP[n.category]||CAT_MAP.default;
|
|
return `
|
|
<div class="news-item reveal d${(i%3)}">
|
|
<div class="news-date">
|
|
<div class="day">${dt.day}</div>
|
|
<div class="ym">${dt.ym}</div>
|
|
</div>
|
|
<div class="news-body">
|
|
${n.image?`<div style="margin-bottom:12px;border-radius:8px;overflow:hidden"><img src="${escapeHtml(n.image)}" alt="${escapeHtml(n.title)}" style="width:100%;height:140px;object-fit:cover;display:block" onerror="this.parentElement.style.display='none'"></div>`:''}
|
|
<span class="news-cat">${escapeHtml(cat)}</span>
|
|
<h3>${escapeHtml(n.title)}</h3>
|
|
<p>${escapeHtml(n.summary||'')}</p>
|
|
<div class="news-meta">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
<span>${escapeHtml(n.author||'编辑部')}</span>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
observeReveal();
|
|
}
|
|
|
|
/* ===================== 渲染:团队 ===================== */
|
|
const GRADIENTS=[
|
|
'linear-gradient(135deg,#FF6B35,#c4451f)',
|
|
'linear-gradient(135deg,#FF8C5A,#FF6B35)',
|
|
'linear-gradient(135deg,#e85d2f,#a83a18)',
|
|
'linear-gradient(135deg,#ff7e4a,#d4501e)',
|
|
'linear-gradient(135deg,#FF6B35,#8E8E9E)',
|
|
'linear-gradient(135deg,#c4451f,#FF6B35)'
|
|
];
|
|
function renderTeam(team){
|
|
const grid=document.getElementById('teamGrid');
|
|
if(!team||!team.length){grid.innerHTML='<p style="color:var(--warm)">暂无团队信息</p>';return}
|
|
grid.innerHTML=team.map((m,i)=>{
|
|
const initial=(m.name||'?').charAt(0);
|
|
const grad=GRADIENTS[i%GRADIENTS.length];
|
|
return `
|
|
<div class="team-card reveal d${(i%3)+1}">
|
|
<div class="team-num">${pad(i+1)}</div>
|
|
<div class="team-avatar" style="background:${grad};overflow:hidden">${escapeHtml(initial)}${m.avatar?`<img src="${escapeHtml(m.avatar)}" alt="${escapeHtml(m.name)}" style="position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover" onerror="this.remove()">`:''}</div>
|
|
<div class="team-name">${escapeHtml(m.name)}</div>
|
|
<div class="team-pos">${escapeHtml(m.position||'')}</div>
|
|
<p class="team-bio">${escapeHtml(m.bio||'')}</p>
|
|
</div>`;
|
|
}).join('');
|
|
observeReveal();
|
|
}
|
|
|
|
/* ===================== 滚动揭示 ===================== */
|
|
let revealObserver=null;
|
|
function observeReveal(){
|
|
if(!revealObserver){
|
|
revealObserver=new IntersectionObserver((entries)=>{
|
|
entries.forEach(en=>{
|
|
if(en.isIntersecting){
|
|
en.target.classList.add('in');
|
|
revealObserver.unobserve(en.target);
|
|
}
|
|
});
|
|
},{threshold:.12,rootMargin:'0px 0px -60px 0px'});
|
|
}
|
|
document.querySelectorAll('.reveal:not(.in)').forEach(el=>revealObserver.observe(el));
|
|
}
|
|
|
|
/* ===================== 导航交互 ===================== */
|
|
function initNav(){
|
|
const nav=document.getElementById('nav');
|
|
const toggle=document.getElementById('navToggle');
|
|
const menu=document.getElementById('navMenu');
|
|
const links=document.querySelectorAll('.nav-link');
|
|
// 滚动效果
|
|
window.addEventListener('scroll',()=>{
|
|
if(window.scrollY>40)nav.classList.add('scrolled');
|
|
else nav.classList.remove('scrolled');
|
|
// 高亮当前锚点
|
|
const sections=['hero','capabilities','stats','news','contact'];
|
|
let current='hero';
|
|
for(const id of sections){
|
|
const el=document.getElementById(id);
|
|
if(el&&el.getBoundingClientRect().top<=120)current=id;
|
|
}
|
|
links.forEach(l=>{
|
|
const href=l.getAttribute('href');
|
|
l.classList.toggle('active',href==='#'+current);
|
|
});
|
|
},{passive:true});
|
|
// 移动端菜单
|
|
toggle.addEventListener('click',()=>{
|
|
toggle.classList.toggle('open');
|
|
menu.classList.toggle('open');
|
|
});
|
|
links.forEach(l=>l.addEventListener('click',()=>{
|
|
toggle.classList.remove('open');
|
|
menu.classList.remove('open');
|
|
}));
|
|
}
|
|
|
|
/* ===================== 错误兜底 ===================== */
|
|
function showError(msg){
|
|
const loader=document.getElementById('loader');
|
|
loader.innerHTML=`
|
|
<div style="text-align:center;max-width:420px;padding:24px">
|
|
<div style="font-size:48px;margin-bottom:16px;color:var(--accent)">⚠</div>
|
|
<h3 style="color:#fff;font-size:20px;margin-bottom:10px">数据加载失败</h3>
|
|
<p style="color:var(--warm);font-size:14px;margin-bottom:24px">${escapeHtml(msg)}</p>
|
|
<button onclick="location.reload()" style="padding:12px 28px;background:var(--accent);color:#fff;border-radius:4px;font-weight:700;cursor:pointer">重新加载</button>
|
|
</div>`;
|
|
}
|
|
|
|
/* ===================== 入口 ===================== */
|
|
async function init(){
|
|
initNav();
|
|
observeReveal();
|
|
try{
|
|
const data=await fetchData();
|
|
renderCompany(data.company);
|
|
renderServices(data.services);
|
|
renderStats(data.company);
|
|
renderNews(data.news);
|
|
renderTeam(data.team);
|
|
// 隐藏加载遮罩
|
|
setTimeout(()=>{
|
|
document.getElementById('loader').classList.add('hide');
|
|
observeReveal();
|
|
},300);
|
|
}catch(err){
|
|
console.error('[Site2] 数据加载失败:',err);
|
|
showError(err.message||'未知错误,请稍后重试');
|
|
}
|
|
}
|
|
document.addEventListener('DOMContentLoaded',init);
|
|
</script>
|
|
</body>
|
|
</html>
|