Add web/dist/site3/index.html
This commit is contained in:
941
web/dist/site3/index.html
vendored
Normal file
941
web/dist/site3/index.html
vendored
Normal file
@@ -0,0 +1,941 @@
|
|||||||
|
<!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="翠恒咨询 — 战略致远 · 洞见价值">
|
||||||
|
<title>翠恒咨询 | 高端商务咨询</title>
|
||||||
|
<style>
|
||||||
|
/* ============ CSS 变量 / 主题 ============ */
|
||||||
|
:root{
|
||||||
|
--primary:#0F4C3A;
|
||||||
|
--primary-dark:#0a3528;
|
||||||
|
--primary-light:#1a6651;
|
||||||
|
--gold:#C9A96E;
|
||||||
|
--gold-light:#d9bd8a;
|
||||||
|
--gold-dark:#b08f53;
|
||||||
|
--cream:#FAFAF7;
|
||||||
|
--cream-deep:#F3F1EA;
|
||||||
|
--white:#FFFFFF;
|
||||||
|
--dark:#1a1a1a;
|
||||||
|
--text:#2a2a2a;
|
||||||
|
--gray:#6b6b6b;
|
||||||
|
--gray-light:#9a9a9a;
|
||||||
|
--border:#e4e2db;
|
||||||
|
--border-strong:#cfccc1;
|
||||||
|
--serif:Georgia,'Times New Roman','Songti SC','STSong','SimSun',serif;
|
||||||
|
--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
|
||||||
|
--maxw:1200px;
|
||||||
|
--ease:cubic-bezier(.22,.61,.36,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ 基础重置 ============ */
|
||||||
|
*{margin:0;padding:0;box-sizing:border-box}
|
||||||
|
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
|
||||||
|
body{
|
||||||
|
font-family:var(--sans);
|
||||||
|
background:var(--cream);
|
||||||
|
color:var(--text);
|
||||||
|
line-height:1.75;
|
||||||
|
font-size:16px;
|
||||||
|
overflow-x:hidden;
|
||||||
|
-webkit-font-smoothing:antialiased;
|
||||||
|
}
|
||||||
|
a{color:inherit;text-decoration:none}
|
||||||
|
img{max-width:100%;display:block}
|
||||||
|
ul{list-style:none}
|
||||||
|
section{position:relative}
|
||||||
|
|
||||||
|
/* ============ 通用布局 ============ */
|
||||||
|
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
|
||||||
|
.sec{padding:120px 0}
|
||||||
|
.sec-head{text-align:center;max-width:680px;margin:0 auto 72px}
|
||||||
|
.sec-eyebrow{
|
||||||
|
display:inline-block;font-family:var(--sans);font-size:13px;
|
||||||
|
letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dark);
|
||||||
|
font-weight:600;margin-bottom:18px;position:relative;padding-left:44px;
|
||||||
|
}
|
||||||
|
.sec-eyebrow::before{
|
||||||
|
content:"";position:absolute;left:0;top:50%;width:32px;height:1px;
|
||||||
|
background:var(--gold);
|
||||||
|
}
|
||||||
|
.sec-eyebrow.center{padding-left:44px;padding-right:0}
|
||||||
|
.sec-title{
|
||||||
|
font-family:var(--serif);font-size:42px;font-weight:400;line-height:1.25;
|
||||||
|
color:var(--primary);letter-spacing:.01em;
|
||||||
|
}
|
||||||
|
.sec-sub{
|
||||||
|
margin-top:20px;color:var(--gray);font-size:16px;line-height:1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ 滚动渐入 ============ */
|
||||||
|
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
|
||||||
|
.reveal.visible{opacity:1;transform:none}
|
||||||
|
.reveal.d1{transition-delay:.1s}
|
||||||
|
.reveal.d2{transition-delay:.2s}
|
||||||
|
.reveal.d3{transition-delay:.3s}
|
||||||
|
.reveal.d4{transition-delay:.4s}
|
||||||
|
.reveal.d5{transition-delay:.5s}
|
||||||
|
|
||||||
|
/* ============ 加载层 ============ */
|
||||||
|
#loader{
|
||||||
|
position:fixed;inset:0;z-index:9999;background:var(--cream);
|
||||||
|
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||||
|
transition:opacity .6s var(--ease),visibility .6s;
|
||||||
|
}
|
||||||
|
#loader.hide{opacity:0;visibility:hidden}
|
||||||
|
.loader-mark{
|
||||||
|
font-family:var(--serif);font-size:30px;color:var(--primary);
|
||||||
|
letter-spacing:.12em;margin-bottom:26px;
|
||||||
|
}
|
||||||
|
.loader-bar{
|
||||||
|
width:160px;height:2px;background:var(--border);border-radius:2px;overflow:hidden;position:relative;
|
||||||
|
}
|
||||||
|
.loader-bar::after{
|
||||||
|
content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;
|
||||||
|
background:var(--gold);animation:loadbar 1.2s var(--ease) infinite;
|
||||||
|
}
|
||||||
|
@keyframes loadbar{0%{left:-40%}100%{left:100%}}
|
||||||
|
|
||||||
|
/* ============ 导航栏 ============ */
|
||||||
|
.nav{
|
||||||
|
position:fixed;top:0;left:0;right:0;z-index:1000;
|
||||||
|
background:rgba(250,250,247,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
|
||||||
|
border-bottom:1px solid transparent;transition:all .4s var(--ease);
|
||||||
|
}
|
||||||
|
.nav.scrolled{border-bottom-color:var(--border);background:rgba(250,250,247,.95)}
|
||||||
|
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:78px;display:flex;align-items:center;justify-content:space-between}
|
||||||
|
.logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:24px;color:var(--primary);letter-spacing:.04em}
|
||||||
|
.logo-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none}
|
||||||
|
.logo span{font-weight:600}
|
||||||
|
.menu{display:flex;align-items:center;gap:42px}
|
||||||
|
.menu a{
|
||||||
|
font-size:15px;color:var(--text);position:relative;padding:6px 0;
|
||||||
|
transition:color .3s var(--ease);letter-spacing:.02em;
|
||||||
|
}
|
||||||
|
.menu a::after{
|
||||||
|
content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
|
||||||
|
background:var(--gold);transition:width .35s var(--ease);
|
||||||
|
}
|
||||||
|
.menu a:hover{color:var(--primary)}
|
||||||
|
.menu a:hover::after{width:100%}
|
||||||
|
.menu a.active{color:var(--primary)}
|
||||||
|
.menu a.active::after{width:100%}
|
||||||
|
.nav-cta{
|
||||||
|
font-size:14px;color:var(--primary);border:1px solid var(--primary);
|
||||||
|
padding:9px 22px;border-radius:2px;transition:all .3s var(--ease);letter-spacing:.04em;
|
||||||
|
}
|
||||||
|
.nav-cta:hover{background:var(--primary);color:var(--cream)}
|
||||||
|
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
|
||||||
|
.burger span{width:24px;height:2px;background:var(--primary);transition:all .3s var(--ease)}
|
||||||
|
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
|
||||||
|
.burger.open span:nth-child(2){opacity:0}
|
||||||
|
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
|
||||||
|
|
||||||
|
/* ============ Hero ============ */
|
||||||
|
.hero{padding:170px 0 110px;position:relative;overflow:hidden}
|
||||||
|
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
|
||||||
|
.hero-eyebrow{
|
||||||
|
display:inline-flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.3em;
|
||||||
|
text-transform:uppercase;color:var(--gold-dark);font-weight:600;margin-bottom:30px;
|
||||||
|
}
|
||||||
|
.hero-eyebrow::before{content:"";width:40px;height:1px;background:var(--gold)}
|
||||||
|
.hero h1{
|
||||||
|
font-family:var(--serif);font-size:62px;line-height:1.12;font-weight:400;
|
||||||
|
color:var(--primary);letter-spacing:.005em;margin-bottom:30px;
|
||||||
|
}
|
||||||
|
.hero h1 .accent{color:var(--gold-dark);font-style:italic}
|
||||||
|
.hero-desc{font-size:17px;color:var(--gray);max-width:520px;line-height:1.85;margin-bottom:42px}
|
||||||
|
.hero-cta{display:flex;gap:18px;flex-wrap:wrap}
|
||||||
|
.btn{
|
||||||
|
display:inline-flex;align-items:center;gap:10px;font-size:15px;padding:15px 34px;
|
||||||
|
border-radius:2px;cursor:pointer;transition:all .35s var(--ease);letter-spacing:.04em;
|
||||||
|
border:1px solid transparent;font-family:var(--sans);
|
||||||
|
}
|
||||||
|
.btn-gold{background:transparent;border-color:var(--gold);color:var(--primary)}
|
||||||
|
.btn-gold:hover{background:var(--gold);color:#fff;border-color:var(--gold);transform:translateY(-2px)}
|
||||||
|
.btn-solid{background:var(--primary);color:var(--cream);border-color:var(--primary)}
|
||||||
|
.btn-solid:hover{background:var(--primary-dark);transform:translateY(-2px)}
|
||||||
|
.btn .arrow{transition:transform .35s var(--ease)}
|
||||||
|
.btn:hover .arrow{transform:translateX(5px)}
|
||||||
|
|
||||||
|
/* Hero 装饰几何 */
|
||||||
|
.hero-art{position:relative;height:520px;width:100%}
|
||||||
|
.art-ring{
|
||||||
|
position:absolute;border-radius:50%;border:1px solid var(--gold);
|
||||||
|
top:50%;left:50%;transform:translate(-50%,-50%);
|
||||||
|
}
|
||||||
|
.art-ring.r1{width:420px;height:420px;opacity:.55}
|
||||||
|
.art-ring.r2{width:300px;height:300px;border-color:var(--primary);opacity:.18}
|
||||||
|
.art-ring.r3{width:160px;height:160px;border:1px solid var(--gold);opacity:.4}
|
||||||
|
.art-disc{
|
||||||
|
position:absolute;border-radius:50%;
|
||||||
|
top:50%;left:50%;transform:translate(-50%,-50%);
|
||||||
|
width:300px;height:300px;
|
||||||
|
background:radial-gradient(circle at 35% 30%,var(--primary-light),var(--primary) 70%);
|
||||||
|
opacity:.92;box-shadow:0 30px 70px rgba(15,76,58,.28);
|
||||||
|
}
|
||||||
|
.art-arc{
|
||||||
|
position:absolute;top:50%;left:50%;width:420px;height:420px;
|
||||||
|
transform:translate(-50%,-50%) rotate(-35deg);border-radius:50%;
|
||||||
|
border:2px solid transparent;border-top-color:var(--gold);border-right-color:var(--gold);
|
||||||
|
opacity:.7;
|
||||||
|
}
|
||||||
|
.art-dot{position:absolute;border-radius:50%;background:var(--gold)}
|
||||||
|
.art-dot.d1{width:14px;height:14px;top:8%;right:14%}
|
||||||
|
.art-dot.d2{width:9px;height:9px;bottom:16%;left:6%;background:var(--primary)}
|
||||||
|
.art-dot.d3{width:6px;height:6px;top:20%;left:10%;background:var(--gold-dark)}
|
||||||
|
.art-line{position:absolute;background:var(--border-strong);height:1px}
|
||||||
|
.art-line.l1{width:120px;top:74%;right:2%;transform:rotate(-25deg)}
|
||||||
|
.art-line.l2{width:80px;top:12%;left:22%;transform:rotate(20deg);background:var(--gold)}
|
||||||
|
.art-square{
|
||||||
|
position:absolute;width:70px;height:70px;border:1px solid var(--primary);
|
||||||
|
bottom:8%;right:8%;transform:rotate(12deg);opacity:.25;
|
||||||
|
}
|
||||||
|
.art-label{
|
||||||
|
position:absolute;bottom:2%;left:0;font-family:var(--serif);font-style:italic;
|
||||||
|
color:var(--gray-light);font-size:13px;letter-spacing:.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ 核心服务 ============ */
|
||||||
|
.services{background:var(--white)}
|
||||||
|
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
|
||||||
|
.svc-card{
|
||||||
|
position:relative;background:var(--white);border:1px solid var(--border);
|
||||||
|
padding:52px 38px 46px;transition:all .45s var(--ease);overflow:hidden;
|
||||||
|
}
|
||||||
|
.svc-card::before{
|
||||||
|
content:"";position:absolute;top:0;left:0;width:100%;height:3px;
|
||||||
|
background:var(--gold);transform:scaleX(.22);transform-origin:left;
|
||||||
|
transition:transform .45s var(--ease);
|
||||||
|
}
|
||||||
|
.svc-card:hover{border-color:var(--gold);transform:translateY(-8px);box-shadow:0 24px 50px rgba(15,76,58,.10)}
|
||||||
|
.svc-card:hover::before{transform:scaleX(1)}
|
||||||
|
.svc-icon{
|
||||||
|
width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
|
||||||
|
border:1px solid var(--gold);font-family:var(--serif);font-size:24px;color:var(--primary);
|
||||||
|
margin-bottom:28px;transition:all .45s var(--ease);flex:none;
|
||||||
|
}
|
||||||
|
.svc-card:hover .svc-icon{background:var(--gold);color:#fff;border-color:var(--gold)}
|
||||||
|
.svc-card h3{font-family:var(--serif);font-size:23px;color:var(--primary);font-weight:400;margin-bottom:16px;line-height:1.3}
|
||||||
|
.svc-card p{color:var(--gray);font-size:15px;line-height:1.8;margin-bottom:24px}
|
||||||
|
.svc-features{display:flex;flex-direction:column;gap:11px}
|
||||||
|
.svc-features li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text)}
|
||||||
|
.svc-features li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
|
||||||
|
|
||||||
|
/* ============ 数据成果 ============ */
|
||||||
|
.stats{background:var(--cream);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||||
|
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
|
||||||
|
.stat-item{text-align:center;padding:20px 24px;position:relative}
|
||||||
|
.stat-item:not(:last-child)::after{
|
||||||
|
content:"";position:absolute;right:0;top:22%;height:56%;width:1px;background:var(--border-strong);
|
||||||
|
}
|
||||||
|
.stat-num{font-family:var(--serif);font-size:58px;color:var(--primary);font-weight:400;line-height:1;letter-spacing:.01em}
|
||||||
|
.stat-num .unit{font-size:30px;color:var(--gold-dark);margin-left:2px}
|
||||||
|
.stat-label{margin-top:16px;font-size:14px;color:var(--gray);letter-spacing:.06em}
|
||||||
|
|
||||||
|
/* ============ 行业洞察 ============ */
|
||||||
|
.insights{background:var(--cream)}
|
||||||
|
.news-list{display:flex;flex-direction:column;gap:84px}
|
||||||
|
.news-item{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
|
||||||
|
.news-item.flip .news-media{order:2}
|
||||||
|
.news-media{
|
||||||
|
position:relative;aspect-ratio:4/3;border-radius:2px;overflow:hidden;
|
||||||
|
display:flex;align-items:flex-end;padding:28px;
|
||||||
|
}
|
||||||
|
.news-media::after{
|
||||||
|
content:"";position:absolute;inset:0;
|
||||||
|
background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.45));
|
||||||
|
}
|
||||||
|
.news-cat{
|
||||||
|
position:relative;z-index:2;align-self:flex-start;
|
||||||
|
font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
|
||||||
|
border:1px solid rgba(255,255,255,.6);padding:6px 14px;border-radius:2px;backdrop-filter:blur(4px);
|
||||||
|
}
|
||||||
|
.news-body .news-meta{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--gray-light);margin-bottom:18px}
|
||||||
|
.news-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}
|
||||||
|
.news-body h3{font-family:var(--serif);font-size:30px;color:var(--primary);font-weight:400;line-height:1.3;margin-bottom:20px}
|
||||||
|
.news-body .news-summary{color:var(--gray);font-size:16px;line-height:1.85;margin-bottom:28px}
|
||||||
|
.news-more{
|
||||||
|
display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--primary);
|
||||||
|
letter-spacing:.05em;border-bottom:1px solid transparent;padding-bottom:4px;
|
||||||
|
transition:all .3s var(--ease);cursor:pointer;
|
||||||
|
}
|
||||||
|
.news-more:hover{color:var(--gold-dark);border-bottom-color:var(--gold)}
|
||||||
|
.news-more .arrow{transition:transform .3s var(--ease)}
|
||||||
|
.news-more:hover .arrow{transform:translateX(5px)}
|
||||||
|
|
||||||
|
/* ============ 专家团队 ============ */
|
||||||
|
.team-sec{background:var(--white)}
|
||||||
|
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
|
||||||
|
.team-card{
|
||||||
|
text-align:center;padding:44px 26px 40px;border:1px solid var(--border);
|
||||||
|
transition:all .45s var(--ease);background:var(--white);
|
||||||
|
}
|
||||||
|
.team-card:hover{transform:translateY(-10px);border-color:var(--gold);box-shadow:0 24px 50px rgba(15,76,58,.10)}
|
||||||
|
.team-avatar{
|
||||||
|
width:108px;height:108px;border-radius:50%;margin:0 auto 24px;
|
||||||
|
display:flex;align-items:center;justify-content:center;
|
||||||
|
font-family:var(--serif);font-size:42px;color:#fff;font-weight:400;
|
||||||
|
box-shadow:0 12px 30px rgba(15,76,58,.22);transition:transform .45s var(--ease);
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
.team-avatar::after{
|
||||||
|
content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--gold);
|
||||||
|
opacity:0;transition:opacity .45s var(--ease);
|
||||||
|
}
|
||||||
|
.team-card:hover .team-avatar{transform:scale(1.05)}
|
||||||
|
.team-card:hover .team-avatar::after{opacity:1}
|
||||||
|
.team-card h4{font-family:var(--serif);font-size:21px;color:var(--primary);font-weight:400;margin-bottom:8px}
|
||||||
|
.team-pos{font-size:14px;color:var(--gold-dark);letter-spacing:.04em;margin-bottom:18px}
|
||||||
|
.team-bio{font-size:14px;color:var(--gray);line-height:1.75}
|
||||||
|
|
||||||
|
/* ============ 企业理念 ============ */
|
||||||
|
.philosophy{
|
||||||
|
background:var(--primary);color:var(--cream);position:relative;overflow:hidden;
|
||||||
|
}
|
||||||
|
.philosophy::before{
|
||||||
|
content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;
|
||||||
|
border-radius:50%;border:1px solid rgba(201,169,110,.18);
|
||||||
|
}
|
||||||
|
.philosophy::after{
|
||||||
|
content:"";position:absolute;bottom:-160px;left:-80px;width:360px;height:360px;
|
||||||
|
border-radius:50%;border:1px solid rgba(201,169,110,.12);
|
||||||
|
}
|
||||||
|
.phil-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;position:relative;z-index:2}
|
||||||
|
.phil-block{position:relative;padding:10px 0}
|
||||||
|
.phil-quote{
|
||||||
|
font-family:var(--serif);font-size:120px;line-height:.6;color:var(--gold);
|
||||||
|
opacity:.5;position:absolute;top:-10px;left:-8px;pointer-events:none;
|
||||||
|
}
|
||||||
|
.phil-label{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);margin-bottom:22px;position:relative;z-index:2}
|
||||||
|
.phil-block h3{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.4;margin-bottom:24px;color:#fff;position:relative;z-index:2}
|
||||||
|
.phil-block p{font-size:16px;line-height:1.95;color:rgba(250,250,247,.78);position:relative;z-index:2}
|
||||||
|
|
||||||
|
/* ============ 联系我们 ============ */
|
||||||
|
.contact{background:var(--cream)}
|
||||||
|
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
|
||||||
|
.contact-intro h3{font-family:var(--serif);font-size:36px;color:var(--primary);font-weight:400;line-height:1.3;margin-bottom:24px}
|
||||||
|
.contact-intro p{color:var(--gray);font-size:16px;line-height:1.85;max-width:440px}
|
||||||
|
.contact-list{border-left:2px solid var(--gold);padding-left:34px;display:flex;flex-direction:column;gap:30px}
|
||||||
|
.contact-row{display:flex;flex-direction:column;gap:6px}
|
||||||
|
.contact-row .ck{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-light)}
|
||||||
|
.contact-row .cv{font-size:17px;color:var(--text)}
|
||||||
|
.contact-row .cv.serif{font-family:var(--serif);color:var(--primary)}
|
||||||
|
|
||||||
|
/* ============ 页脚 ============ */
|
||||||
|
.footer{background:var(--primary-dark);color:rgba(250,250,247,.7);padding:70px 0 36px}
|
||||||
|
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
|
||||||
|
.footer-brand{font-family:var(--serif);font-size:26px;color:var(--cream);letter-spacing:.04em;margin-bottom:14px}
|
||||||
|
.footer-brand .dot{color:var(--gold)}
|
||||||
|
.footer-tag{font-size:14px;max-width:340px;line-height:1.8}
|
||||||
|
.footer-links{display:flex;gap:40px;flex-wrap:wrap}
|
||||||
|
.footer-links a{font-size:14px;transition:color .3s var(--ease)}
|
||||||
|
.footer-links a:hover{color:var(--gold-light)}
|
||||||
|
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:28px;font-size:13px;color:rgba(250,250,247,.5)}
|
||||||
|
|
||||||
|
/* ============ 文章弹窗 ============ */
|
||||||
|
.modal-mask{
|
||||||
|
position:fixed;inset:0;z-index:2000;background:rgba(15,76,58,.55);backdrop-filter:blur(6px);
|
||||||
|
display:flex;align-items:center;justify-content:center;padding:30px;
|
||||||
|
opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
|
||||||
|
}
|
||||||
|
.modal-mask.open{opacity:1;visibility:visible}
|
||||||
|
.modal{
|
||||||
|
background:var(--cream);max-width:680px;width:100%;max-height:86vh;overflow-y:auto;
|
||||||
|
padding:54px 48px;border-top:3px solid var(--gold);position:relative;
|
||||||
|
transform:translateY(24px);transition:transform .4s var(--ease);
|
||||||
|
}
|
||||||
|
.modal-mask.open .modal{transform:none}
|
||||||
|
.modal-close{
|
||||||
|
position:absolute;top:20px;right:24px;width:36px;height:36px;border-radius:50%;
|
||||||
|
border:1px solid var(--border-strong);background:var(--white);cursor:pointer;
|
||||||
|
display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--primary);
|
||||||
|
transition:all .3s var(--ease);
|
||||||
|
}
|
||||||
|
.modal-close:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
|
||||||
|
.modal-cat{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:16px}
|
||||||
|
.modal h3{font-family:var(--serif);font-size:30px;color:var(--primary);font-weight:400;line-height:1.3;margin-bottom:18px}
|
||||||
|
.modal-meta{font-size:13px;color:var(--gray-light);margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border)}
|
||||||
|
.modal-content{font-size:16px;line-height:1.95;color:var(--text);white-space:pre-line}
|
||||||
|
|
||||||
|
/* ============ 响应式 ============ */
|
||||||
|
@media(max-width:1024px){
|
||||||
|
.hero h1{font-size:50px}
|
||||||
|
.stat-num{font-size:48px}
|
||||||
|
.team-grid{grid-template-columns:repeat(2,1fr)}
|
||||||
|
}
|
||||||
|
@media(max-width:860px){
|
||||||
|
.menu{
|
||||||
|
position:fixed;top:78px;left:0;right:0;background:var(--cream);
|
||||||
|
flex-direction:column;gap:0;padding:10px 32px 30px;border-bottom:1px solid var(--border);
|
||||||
|
transform:translateY(-120%);transition:transform .4s var(--ease);align-items:flex-start;
|
||||||
|
}
|
||||||
|
.menu.open{transform:none}
|
||||||
|
.menu a{width:100%;padding:14px 0;border-bottom:1px solid var(--border)}
|
||||||
|
.menu a::after{display:none}
|
||||||
|
.nav-cta{display:none}
|
||||||
|
.burger{display:flex}
|
||||||
|
.hero{padding:140px 0 80px}
|
||||||
|
.hero-grid{grid-template-columns:1fr;gap:50px}
|
||||||
|
.hero h1{font-size:42px}
|
||||||
|
.hero-art{height:380px}
|
||||||
|
.art-disc{width:230px;height:230px}
|
||||||
|
.art-ring.r1{width:320px;height:320px}
|
||||||
|
.art-ring.r2{width:230px;height:230px}
|
||||||
|
.art-arc{width:320px;height:320px}
|
||||||
|
.sec{padding:80px 0}
|
||||||
|
.sec-title{font-size:32px}
|
||||||
|
.svc-grid{grid-template-columns:1fr}
|
||||||
|
.stats-grid{grid-template-columns:repeat(2,1fr);gap:30px 0}
|
||||||
|
.stat-item:not(:last-child)::after{display:none}
|
||||||
|
.stat-item:nth-child(odd)::after{display:block;height:56%}
|
||||||
|
.news-item,.news-item.flip{grid-template-columns:1fr;gap:28px}
|
||||||
|
.news-item.flip .news-media{order:0}
|
||||||
|
.news-body h3{font-size:24px}
|
||||||
|
.team-grid{grid-template-columns:repeat(2,1fr)}
|
||||||
|
.phil-grid{grid-template-columns:1fr;gap:50px}
|
||||||
|
.phil-block h3{font-size:26px}
|
||||||
|
.contact-grid{grid-template-columns:1fr;gap:50px}
|
||||||
|
.modal{padding:44px 28px}
|
||||||
|
}
|
||||||
|
@media(max-width:520px){
|
||||||
|
.wrap{padding:0 22px}
|
||||||
|
.hero h1{font-size:34px}
|
||||||
|
.stat-num{font-size:40px}
|
||||||
|
.team-grid{grid-template-columns:1fr}
|
||||||
|
.footer-top{flex-direction:column}
|
||||||
|
.sec-title{font-size:28px}
|
||||||
|
.hero-cta{flex-direction:column;align-items:stretch}
|
||||||
|
.btn{justify-content:center}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- 加载层 -->
|
||||||
|
<div id="loader">
|
||||||
|
<div class="loader-mark" id="loaderMark">翠恒咨询</div>
|
||||||
|
<div class="loader-bar"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="nav" id="nav">
|
||||||
|
<div class="nav-inner">
|
||||||
|
<a href="#home" class="logo"><span class="logo-dot"></span><span id="navLogo">翠恒咨询</span></a>
|
||||||
|
<ul class="menu" id="menu">
|
||||||
|
<li><a href="#home" class="active">首页</a></li>
|
||||||
|
<li><a href="#services">服务</a></li>
|
||||||
|
<li><a href="#insights">洞察</a></li>
|
||||||
|
<li><a href="#team">团队</a></li>
|
||||||
|
<li><a href="#contact">联系</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="nav-cta">预约咨询</a>
|
||||||
|
<div class="burger" id="burger"><span></span><span></span><span></span></div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<header class="hero" id="home">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div class="hero-text reveal">
|
||||||
|
<div class="hero-eyebrow">STRATEGIC ADVISORY</div>
|
||||||
|
<h1 id="heroSlogan">以战略之思<br><span class="accent">洞见</span>商业未来</h1>
|
||||||
|
<p class="hero-desc" id="heroDesc">我们致力于为成长型企业提供深度战略咨询,以专业洞察与严谨方法,助力组织在复杂环境中实现可持续增长。</p>
|
||||||
|
<div class="hero-cta">
|
||||||
|
<a href="#services" class="btn btn-gold">探索服务 <span class="arrow">→</span></a>
|
||||||
|
<a href="#contact" class="btn btn-solid">预约咨询</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-art reveal d2">
|
||||||
|
<div class="art-ring r1"></div>
|
||||||
|
<div class="art-ring r2"></div>
|
||||||
|
<div class="art-arc"></div>
|
||||||
|
<div class="art-disc"></div>
|
||||||
|
<div class="art-ring r3"></div>
|
||||||
|
<div class="art-dot d1"></div>
|
||||||
|
<div class="art-dot d2"></div>
|
||||||
|
<div class="art-dot d3"></div>
|
||||||
|
<div class="art-line l1"></div>
|
||||||
|
<div class="art-line l2"></div>
|
||||||
|
<div class="art-square"></div>
|
||||||
|
<div class="art-label">— Excellence in Consulting</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 核心服务 -->
|
||||||
|
<section class="sec services" id="services">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="sec-head reveal">
|
||||||
|
<span class="sec-eyebrow center">Our Services</span>
|
||||||
|
<h2 class="sec-title">核心服务</h2>
|
||||||
|
<p class="sec-sub">以体系化方法论覆盖企业发展的关键命题,为决策提供坚实支撑。</p>
|
||||||
|
</div>
|
||||||
|
<div class="svc-grid" id="svcGrid"><!-- JS render --></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 数据成果 -->
|
||||||
|
<section class="sec stats" id="stats" style="padding:90px 0">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="stats-grid" id="statsGrid"><!-- JS render --></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 行业洞察 -->
|
||||||
|
<section class="sec insights" id="insights">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="sec-head reveal">
|
||||||
|
<span class="sec-eyebrow center">Industry Insights</span>
|
||||||
|
<h2 class="sec-title">行业洞察</h2>
|
||||||
|
<p class="sec-sub">来自一线实践的研究与观察,分享我们对商业趋势的思考。</p>
|
||||||
|
</div>
|
||||||
|
<div class="news-list" id="newsList"><!-- JS render --></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 专家团队 -->
|
||||||
|
<section class="sec team-sec" id="team">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="sec-head reveal">
|
||||||
|
<span class="sec-eyebrow center">Our Team</span>
|
||||||
|
<h2 class="sec-title">专家团队</h2>
|
||||||
|
<p class="sec-sub">资深行业专家组合,以多元背景与深厚经验,陪伴客户走过每一个关键决策。</p>
|
||||||
|
</div>
|
||||||
|
<div class="team-grid" id="teamGrid"><!-- JS render --></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 企业理念 -->
|
||||||
|
<section class="sec philosophy" id="philosophy">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="phil-grid">
|
||||||
|
<div class="phil-block reveal">
|
||||||
|
<div class="phil-quote">“</div>
|
||||||
|
<div class="phil-label">Vision · 愿景</div>
|
||||||
|
<h3 id="visionText">成为最受信赖的战略伙伴,以洞见引领企业穿越周期。</h3>
|
||||||
|
<p id="visionDesc">我们相信,真正的战略价值源于对行业本质的深刻理解与对长期主义的坚守。</p>
|
||||||
|
</div>
|
||||||
|
<div class="phil-block reveal d2">
|
||||||
|
<div class="phil-quote">“</div>
|
||||||
|
<div class="phil-label">Mission · 使命</div>
|
||||||
|
<h3 id="missionText">以专业与诚信,赋能组织实现卓越增长。</h3>
|
||||||
|
<p id="missionDesc">我们以严谨的方法论、独立的判断与高度的责任感,为每一位客户创造可衡量的价值。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 联系我们 -->
|
||||||
|
<section class="sec contact" id="contact">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="sec-head reveal" style="text-align:left;max-width:none;margin-bottom:60px">
|
||||||
|
<span class="sec-eyebrow" style="padding-left:44px">Contact Us</span>
|
||||||
|
<h2 class="sec-title">联系我们</h2>
|
||||||
|
</div>
|
||||||
|
<div class="contact-grid">
|
||||||
|
<div class="contact-intro reveal">
|
||||||
|
<h3 id="contactName">翠恒咨询</h3>
|
||||||
|
<p id="contactDesc">如有合作意向或咨询需求,欢迎通过以下方式与我们取得联系,我们的顾问将在一个工作日内与您沟通。</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-list reveal d2" id="contactList"><!-- JS render --></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="footer-top">
|
||||||
|
<div>
|
||||||
|
<div class="footer-brand" id="footerBrand">翠恒<span class="dot">·</span>咨询</div>
|
||||||
|
<p class="footer-tag" id="footerTag">战略致远 · 洞见价值</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="#services">核心服务</a>
|
||||||
|
<a href="#insights">行业洞察</a>
|
||||||
|
<a href="#team">专家团队</a>
|
||||||
|
<a href="#contact">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<span id="footerCopy">© 2024 翠恒咨询. 保留所有权利.</span>
|
||||||
|
<span id="footerWeb">www.cuiheng-consulting.com</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- 文章弹窗 -->
|
||||||
|
<div class="modal-mask" id="modalMask">
|
||||||
|
<div class="modal">
|
||||||
|
<button class="modal-close" id="modalClose" aria-label="关闭">×</button>
|
||||||
|
<div class="modal-cat" id="modalCat"></div>
|
||||||
|
<h3 id="modalTitle"></h3>
|
||||||
|
<div class="modal-meta" id="modalMeta"></div>
|
||||||
|
<div class="modal-content" id="modalContent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(){
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var API_URL = "/api/v1/enterprise/all";
|
||||||
|
|
||||||
|
/* ---- 备用数据(API 不可用时保证页面可独立运行) ---- */
|
||||||
|
var FALLBACK = {
|
||||||
|
company:{
|
||||||
|
name:"翠恒咨询",
|
||||||
|
slogan:"以战略之思,洞见商业未来",
|
||||||
|
description:"我们致力于为成长型企业提供深度战略咨询,以专业洞察与严谨方法,助力组织在复杂环境中实现可持续增长。",
|
||||||
|
vision:"成为最受信赖的战略伙伴,以洞见引领企业穿越周期。",
|
||||||
|
mission:"以专业与诚信,赋能组织实现卓越增长。",
|
||||||
|
phone:"+86 010 8888 6688",
|
||||||
|
email:"contact@cuiheng-consulting.com",
|
||||||
|
address:"北京市朝阳区建国门外大街 8 号 翠恒大厦 28 层",
|
||||||
|
website:"www.cuiheng-consulting.com",
|
||||||
|
founded_year:"2009",
|
||||||
|
employee_count:"320+",
|
||||||
|
stats:'[{"label":"服务客户","value":580,"suffix":"+"},{"label":"行业经验","value":15,"suffix":"年"},{"label":"咨询专家","value":120,"suffix":"位"},{"label":"项目交付","value":1200,"suffix":"+"}]'
|
||||||
|
},
|
||||||
|
services:[
|
||||||
|
{title:"战略规划咨询",description:"从外部环境到内部能力,构建清晰可落地的战略路径,帮助企业在不确定性中把握方向。",icon:"S",features:'["市场进入与定位分析","增长战略设计","商业模式优化","战略落地路线图"]'},
|
||||||
|
{title:"组织与人才发展",description:"以组织效能为核心,优化架构、机制与人才体系,释放组织持续生长的内生动力。",icon:"O",features:'["组织架构诊断与设计","绩效与激励体系","领导力梯队建设","企业文化塑造"]'},
|
||||||
|
{title:"数字化转型升级",description:"结合业务场景与数据资产,制定务实可行的数字化转型方案,让技术真正服务于业务价值。",icon:"D",features:'["数字化成熟度评估","数据治理与架构","流程自动化","智能决策体系"]'},
|
||||||
|
{title:"并购与资本策略",description:"围绕战略意图提供并购、重组与资本运作的全流程支持,助力企业实现跨越式发展。",icon:"M",features:'["标的筛选与尽调","交易架构设计","投后整合规划","资本路径规划"]'},
|
||||||
|
{title:"品牌与市场策略",description:"以消费者洞察为起点,构建有韧性的品牌资产与高效的市场增长引擎。",icon:"B",features:'["品牌定位与架构","全域营销策略","客户体验设计","增长飞轮构建"]'},
|
||||||
|
{title:"运营效能提升",description:"聚焦关键价值链环节,以精益方法与数据驱动持续优化成本、效率与质量。",icon:"E",features:'["价值链诊断","精益流程优化","供应链协同","成本结构优化"]'}
|
||||||
|
],
|
||||||
|
news:[
|
||||||
|
{id:1,title:"穿越周期:不确定性环境下的战略韧性构建",summary:"当外部环境愈发复杂多变,企业需要的不再是单一的预测,而是一套能在波动中持续校准的战略机制。本文探讨韧性战略的核心要素。",content:"在充满不确定性的商业环境中,企业越来越意识到,传统的线性战略规划难以应对快速变化的市场。\n\n韧性战略的核心在于三个方面:第一,建立多元的业务组合与收入结构,避免对单一市场或客户的过度依赖;第二,构建敏捷的组织响应能力,使决策链条能够在变化发生时迅速调整;第三,培育长期主义的组织文化,在短期压力下仍能坚持核心价值判断。\n\n我们的实践表明,那些在周期波动中持续成长的企业,往往不是预测最准的,而是响应最快、调整最灵活的。战略的价值,正在于为这种灵活响应提供清晰的方向与边界。",category:"战略思考",author:"研究院",created_at:"2024-11-18"},
|
||||||
|
{id:2,title:"数字化转型的第二曲线:从工具应用到价值重构",summary:"许多企业的数字化仍停留在工具层面。真正的转型,是对价值创造方式的根本性重构。本文拆解三个关键转变。",content:"过去十年,企业数字化投入持续增长,但真正实现价值跃迁的案例仍是少数。问题往往不在于技术本身,而在于数字化是否触及了价值创造的本质。\n\n第一,从流程自动化走向决策智能化。把数据用于记录和汇报,与把数据用于实时决策,是截然不同的两个阶段。\n\n第二,从内部效率走向外部体验。以客户旅程为核心重新设计业务流程,而非简单地将现有流程搬到线上。\n\n第三,从技术项目走向组织变革。数字化转型的成败,最终取决于组织能否形成数据驱动的决策习惯与文化。",category:"数字转型",author:"技术观察",created_at:"2024-10-22"},
|
||||||
|
{id:3,title:"组织进化的底层逻辑:从科层制到敏捷网络",summary:"面对加速变化的市场,僵化的科层结构正成为企业发展的瓶颈。如何在不失秩序的前提下提升组织敏捷性?",content:"组织架构的本质,是信息流动与决策权力的分布方式。科层制在工业化时代提供了稳定的秩序与可控的效率,但在今天,它的代价——信息损耗与响应迟缓——正变得越来越高。\n\n敏捷组织并非完全抛弃层级,而是在保持战略主线清晰的前提下,赋予一线团队更大的自主决策空间。其关键支撑包括:清晰的战略意图与边界、可度量的目标体系、以及与之匹配的激励与赋能机制。\n\n我们观察到,成功的组织进化往往遵循“小步快跑、持续校准”的路径,而非一次性的颠覆式重组。秩序与敏捷,从来不是非此即彼的选择。",category:"组织发展",author:"管理评论",created_at:"2024-09-30"},
|
||||||
|
{id:4,title:"并购整合的艺术:价值创造发生在交易之后",summary:"研究显示,超过半数的并购未能实现预期价值。差异往往不在交易本身,而在投后整合的执行深度。",content:"并购的成败,真正决定于签约之后的整合阶段。许多企业将大量精力投入交易撮合与价格谈判,却低估了整合的复杂性。\n\n有效的投后整合需要把握三个平衡:战略协同与业务独立性的平衡、文化融合与保留核心人才的平衡、短期业绩与长期能力的平衡。\n\n我们建议企业在交易前就组建专门的整合团队,明确价值创造的来源与里程碑,并建立清晰的沟通机制。并购的价值,是在一砖一瓦的整合中真正落地的。",category:"资本策略",author:"并购研究院",created_at:"2024-08-15"}
|
||||||
|
],
|
||||||
|
team:[
|
||||||
|
{name:"陈志远",position:"创始合伙人 / 首席战略顾问",bio:"15年战略咨询经验,曾任职于国际顶级咨询机构,专注企业战略与增长方向。"},
|
||||||
|
{name:"林婉清",position:"合伙人 / 组织发展负责人",bio:"深耕组织设计与人才发展领域,服务过众多大型企业的组织变革项目。"},
|
||||||
|
{name:"沈明哲",position:"合伙人 / 数字化转型专家",bio:"技术与管理复合背景,主导多个行业的数字化与智能决策体系落地。"},
|
||||||
|
{name:"苏景行",position:"高级顾问 / 资本策略专家",bio:"专注于并购整合与资本运作,拥有丰富的跨境交易与投后管理经验。"}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ---- 工具函数 ---- */
|
||||||
|
function el(html){
|
||||||
|
var t=document.createElement("template");
|
||||||
|
t.innerHTML=html.trim();
|
||||||
|
return t.content.firstChild;
|
||||||
|
}
|
||||||
|
function safe(s){return s==null?"":String(s)}
|
||||||
|
function parseJSON(s,fallback){
|
||||||
|
if(s==null) return fallback;
|
||||||
|
if(typeof s==="object") return s;
|
||||||
|
try{return JSON.parse(s)}catch(e){return fallback}
|
||||||
|
}
|
||||||
|
function fmtDate(s){
|
||||||
|
if(!s) return "";
|
||||||
|
var d=s.substring(0,10);
|
||||||
|
return d.replace(/-/g,".");
|
||||||
|
}
|
||||||
|
/* 团队头像渐变 */
|
||||||
|
var GRADIENTS=[
|
||||||
|
"linear-gradient(135deg,#0F4C3A,#1a6651)",
|
||||||
|
"linear-gradient(135deg,#C9A96E,#b08f53)",
|
||||||
|
"linear-gradient(135deg,#1a6651,#2a8068)",
|
||||||
|
"linear-gradient(135deg,#b08f53,#d9bd8a)",
|
||||||
|
"linear-gradient(135deg,#0a3528,#0F4C3A)",
|
||||||
|
"linear-gradient(135deg,#d9bd8a,#C9A96E)"
|
||||||
|
];
|
||||||
|
function avatarStyle(name){
|
||||||
|
var idx=0;
|
||||||
|
if(name){for(var i=0;i<name.length;i++){idx+=name.charCodeAt(i)}}
|
||||||
|
return GRADIENTS[idx%GRADIENTS.length];
|
||||||
|
}
|
||||||
|
function initial(name){
|
||||||
|
if(!name) return "?";
|
||||||
|
return name.charAt(0);
|
||||||
|
}
|
||||||
|
/* 新闻配图渐变 */
|
||||||
|
var NEWS_GRAD=[
|
||||||
|
"linear-gradient(135deg,#0F4C3A 0%,#1a6651 100%)",
|
||||||
|
"linear-gradient(135deg,#C9A96E 0%,#b08f53 100%)",
|
||||||
|
"linear-gradient(135deg,#1a6651 0%,#0a3528 100%)",
|
||||||
|
"linear-gradient(135deg,#b08f53 0%,#0F4C3A 100%)",
|
||||||
|
"linear-gradient(135deg,#2a8068 0%,#C9A96E 100%)"
|
||||||
|
];
|
||||||
|
|
||||||
|
/* ---- 渲染:服务 ---- */
|
||||||
|
function renderServices(services){
|
||||||
|
var grid=document.getElementById("svcGrid");
|
||||||
|
grid.innerHTML="";
|
||||||
|
services.forEach(function(s,i){
|
||||||
|
var feats=parseJSON(s.features,[]);
|
||||||
|
var featHtml=feats.map(function(f){return '<li>'+safe(f)+'</li>'}).join("");
|
||||||
|
var card=el(
|
||||||
|
'<div class="svc-card reveal d'+((i%3)+1)+'">'+
|
||||||
|
'<div class="svc-icon">'+safe(s.icon||"")+'</div>'+
|
||||||
|
'<h3>'+safe(s.title)+'</h3>'+
|
||||||
|
'<p>'+safe(s.description)+'</p>'+
|
||||||
|
(featHtml?'<ul class="svc-features">'+featHtml+'</ul>':'')+
|
||||||
|
'</div>'
|
||||||
|
);
|
||||||
|
grid.appendChild(card);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 渲染:数据成果 ---- */
|
||||||
|
function renderStats(stats){
|
||||||
|
var grid=document.getElementById("statsGrid");
|
||||||
|
grid.innerHTML="";
|
||||||
|
stats.forEach(function(st,i){
|
||||||
|
var raw=safe(st.value);
|
||||||
|
var numMatch=raw.match(/\d+/);
|
||||||
|
var num=numMatch?parseInt(numMatch[0],10):0;
|
||||||
|
var suffix=safe(st.suffix);
|
||||||
|
if(!suffix){suffix=raw.replace(/^\d+/,"")}
|
||||||
|
var item=el(
|
||||||
|
'<div class="stat-item reveal d'+((i%4)+1)+'" data-num="'+num+'" data-suffix="'+suffix+'">'+
|
||||||
|
'<div class="stat-num"><span class="stat-val">0</span><span class="unit">'+suffix+'</span></div>'+
|
||||||
|
'<div class="stat-label">'+safe(st.label)+'</div>'+
|
||||||
|
'</div>'
|
||||||
|
);
|
||||||
|
grid.appendChild(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 渲染:行业洞察 ---- */
|
||||||
|
function renderNews(news){
|
||||||
|
var list=document.getElementById("newsList");
|
||||||
|
list.innerHTML="";
|
||||||
|
news.forEach(function(n,i){
|
||||||
|
var flip=(i%2===1)?"flip":"";
|
||||||
|
var grad=NEWS_GRAD[i%NEWS_GRAD.length];
|
||||||
|
var item=el(
|
||||||
|
'<article class="news-item '+flip+' reveal">'+
|
||||||
|
'<div class="news-media" style="background:'+grad+'">'+
|
||||||
|
'<span class="news-cat">'+safe(n.category||"洞察")+'</span>'+
|
||||||
|
'</div>'+
|
||||||
|
'<div class="news-body">'+
|
||||||
|
'<div class="news-meta">'+
|
||||||
|
'<span>'+fmtDate(n.created_at)+'</span>'+
|
||||||
|
'<span class="dot"></span>'+
|
||||||
|
'<span>'+safe(n.author||"")+'</span>'+
|
||||||
|
'</div>'+
|
||||||
|
'<h3>'+safe(n.title)+'</h3>'+
|
||||||
|
'<p class="news-summary">'+safe(n.summary)+'</p>'+
|
||||||
|
'<span class="news-more" data-id="'+safe(n.id)+'">阅读全文 <span class="arrow">→</span></span>'+
|
||||||
|
'</div>'+
|
||||||
|
'</article>'
|
||||||
|
);
|
||||||
|
list.appendChild(item);
|
||||||
|
});
|
||||||
|
/* 绑定阅读更多 */
|
||||||
|
list.querySelectorAll(".news-more").forEach(function(btn){
|
||||||
|
btn.addEventListener("click",function(){
|
||||||
|
openModal(news,btn.getAttribute("data-id"));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 渲染:团队 ---- */
|
||||||
|
function renderTeam(team){
|
||||||
|
var grid=document.getElementById("teamGrid");
|
||||||
|
grid.innerHTML="";
|
||||||
|
team.forEach(function(m,i){
|
||||||
|
var card=el(
|
||||||
|
'<div class="team-card reveal d'+((i%4)+1)+'">'+
|
||||||
|
'<div class="team-avatar" style="background:'+avatarStyle(m.name)+'">'+initial(m.name)+'</div>'+
|
||||||
|
'<h4>'+safe(m.name)+'</h4>'+
|
||||||
|
'<div class="team-pos">'+safe(m.position)+'</div>'+
|
||||||
|
'<p class="team-bio">'+safe(m.bio)+'</p>'+
|
||||||
|
'</div>'
|
||||||
|
);
|
||||||
|
grid.appendChild(card);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 渲染:理念 ---- */
|
||||||
|
function renderPhilosophy(company){
|
||||||
|
if(company.vision) document.getElementById("visionText").textContent=company.vision;
|
||||||
|
if(company.mission) document.getElementById("missionText").textContent=company.mission;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 渲染:联系 ---- */
|
||||||
|
function renderContact(company){
|
||||||
|
document.getElementById("contactName").textContent=safe(company.name);
|
||||||
|
document.getElementById("contactDesc").textContent="如有合作意向或咨询需求,欢迎通过以下方式与我们取得联系,我们的顾问将在一个工作日内与您沟通。";
|
||||||
|
var list=document.getElementById("contactList");
|
||||||
|
var rows=[];
|
||||||
|
if(company.phone) rows.push({k:"电话",v:company.phone,serif:true});
|
||||||
|
if(company.email) rows.push({k:"邮箱",v:company.email});
|
||||||
|
if(company.address) rows.push({k:"地址",v:company.address});
|
||||||
|
if(company.website) rows.push({k:"官网",v:company.website});
|
||||||
|
if(company.founded_year) rows.push({k:"创立年份",v:company.founded_year,serif:true});
|
||||||
|
if(company.employee_count) rows.push({k:"团队规模",v:company.employee_count,serif:true});
|
||||||
|
list.innerHTML=rows.map(function(r){
|
||||||
|
return '<div class="contact-row"><span class="ck">'+r.k+'</span><span class="cv'+(r.serif?' serif':'')+'">'+safe(r.v)+'</span></div>';
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 渲染:全局品牌信息 ---- */
|
||||||
|
function renderBrand(company){
|
||||||
|
var name=safe(company.name)||"翠恒咨询";
|
||||||
|
document.getElementById("navLogo").textContent=name;
|
||||||
|
document.getElementById("loaderMark").textContent=name;
|
||||||
|
document.getElementById("footerBrand").innerHTML=name+'<span class="dot">·</span>咨询';
|
||||||
|
document.getElementById("footerTag").textContent=safe(company.slogan)||"战略致远 · 洞见价值";
|
||||||
|
document.getElementById("footerCopy").textContent="© "+new Date().getFullYear()+" "+name+". 保留所有权利.";
|
||||||
|
document.getElementById("footerWeb").textContent=safe(company.website)||"";
|
||||||
|
if(company.slogan){
|
||||||
|
var slogan=company.slogan;
|
||||||
|
/* 把 slogan 中"洞见"类词做强调 */
|
||||||
|
document.getElementById("heroSlogan").innerHTML=slogan.replace(/(洞见|战略|价值)/g,'<span class="accent">$1</span>');
|
||||||
|
}
|
||||||
|
if(company.description) document.getElementById("heroDesc").textContent=company.description;
|
||||||
|
document.title=name+" | 高端商务咨询";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 弹窗 ---- */
|
||||||
|
function openModal(news,id){
|
||||||
|
var n=null;
|
||||||
|
for(var i=0;i<news.length;i++){if(String(news[i].id)===String(id)){n=news[i];break}}
|
||||||
|
if(!n) return;
|
||||||
|
document.getElementById("modalCat").textContent=safe(n.category||"洞察");
|
||||||
|
document.getElementById("modalTitle").textContent=safe(n.title);
|
||||||
|
document.getElementById("modalMeta").textContent=fmtDate(n.created_at)+" · "+safe(n.author||"");
|
||||||
|
document.getElementById("modalContent").textContent=safe(n.content);
|
||||||
|
document.getElementById("modalMask").classList.add("open");
|
||||||
|
document.body.style.overflow="hidden";
|
||||||
|
}
|
||||||
|
function closeModal(){
|
||||||
|
document.getElementById("modalMask").classList.remove("open");
|
||||||
|
document.body.style.overflow="";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 数字计数动画 ---- */
|
||||||
|
function animateNumber(node,target,suffix){
|
||||||
|
var dur=1800,start=0,startTime=null;
|
||||||
|
function step(ts){
|
||||||
|
if(!startTime) startTime=ts;
|
||||||
|
var p=Math.min((ts-startTime)/dur,1);
|
||||||
|
var eased=1-Math.pow(1-p,3);
|
||||||
|
var cur=Math.floor(start+(target-start)*eased);
|
||||||
|
node.textContent=cur;
|
||||||
|
if(p<1){requestAnimationFrame(step)}else{node.textContent=target}
|
||||||
|
}
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- IntersectionObserver ---- */
|
||||||
|
var io=new IntersectionObserver(function(entries){
|
||||||
|
entries.forEach(function(en){
|
||||||
|
if(en.isIntersecting){
|
||||||
|
en.target.classList.add("visible");
|
||||||
|
/* 数字计数 */
|
||||||
|
if(en.target.classList.contains("stat-item")){
|
||||||
|
var num=parseInt(en.target.getAttribute("data-num"),10)||0;
|
||||||
|
var suffix=en.target.getAttribute("data-suffix")||"";
|
||||||
|
var node=en.target.querySelector(".stat-val");
|
||||||
|
if(node && num>0){animateNumber(node,num,suffix)}
|
||||||
|
else if(node){node.textContent=num}
|
||||||
|
}
|
||||||
|
io.unobserve(en.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},{threshold:0.15});
|
||||||
|
|
||||||
|
function observeReveals(){
|
||||||
|
document.querySelectorAll(".reveal:not(.visible)").forEach(function(n){io.observe(n)});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 导航交互 ---- */
|
||||||
|
function initNav(){
|
||||||
|
var nav=document.getElementById("nav");
|
||||||
|
var burger=document.getElementById("burger");
|
||||||
|
var menu=document.getElementById("menu");
|
||||||
|
var links=menu.querySelectorAll("a");
|
||||||
|
var sections=["home","services","insights","team","contact"].map(function(id){return document.getElementById(id)});
|
||||||
|
|
||||||
|
window.addEventListener("scroll",function(){
|
||||||
|
if(window.scrollY>30){nav.classList.add("scrolled")}else{nav.classList.remove("scrolled")}
|
||||||
|
/* 高亮当前锚点 */
|
||||||
|
var cur="home";
|
||||||
|
var pos=window.scrollY+120;
|
||||||
|
sections.forEach(function(s){if(s && s.offsetTop<=pos){cur=s.id}});
|
||||||
|
links.forEach(function(a){
|
||||||
|
var href=a.getAttribute("href").replace("#","");
|
||||||
|
a.classList.toggle("active",href===cur);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
burger.addEventListener("click",function(){burger.classList.toggle("open");menu.classList.toggle("open")});
|
||||||
|
links.forEach(function(a){
|
||||||
|
a.addEventListener("click",function(){burger.classList.remove("open");menu.classList.remove("open")});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 弹窗交互 ---- */
|
||||||
|
function initModal(){
|
||||||
|
document.getElementById("modalClose").addEventListener("click",closeModal);
|
||||||
|
document.getElementById("modalMask").addEventListener("click",function(e){
|
||||||
|
if(e.target===this) closeModal();
|
||||||
|
});
|
||||||
|
document.addEventListener("keydown",function(e){if(e.key==="Escape") closeModal()});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 主流程 ---- */
|
||||||
|
function applyData(data){
|
||||||
|
var company=data.company||{};
|
||||||
|
var services=data.services||[];
|
||||||
|
var news=data.news||[];
|
||||||
|
var team=data.team||[];
|
||||||
|
var stats=parseJSON(company.stats,[]);
|
||||||
|
|
||||||
|
renderBrand(company);
|
||||||
|
renderServices(services);
|
||||||
|
renderStats(stats);
|
||||||
|
renderNews(news);
|
||||||
|
renderTeam(team);
|
||||||
|
renderPhilosophy(company);
|
||||||
|
renderContact(company);
|
||||||
|
|
||||||
|
observeReveals();
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideLoader(){
|
||||||
|
var l=document.getElementById("loader");
|
||||||
|
l.classList.add("hide");
|
||||||
|
setTimeout(function(){l.style.display="none"},700);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadData(){
|
||||||
|
fetch(API_URL,{headers:{"Accept":"application/json"}})
|
||||||
|
.then(function(r){return r.json()})
|
||||||
|
.then(function(json){
|
||||||
|
if(json && json.code===0 && json.data){
|
||||||
|
applyData(json.data);
|
||||||
|
}else{
|
||||||
|
applyData(FALLBACK);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function(){
|
||||||
|
applyData(FALLBACK);
|
||||||
|
})
|
||||||
|
.then(function(){
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 启动 ---- */
|
||||||
|
document.addEventListener("DOMContentLoaded",function(){
|
||||||
|
initNav();
|
||||||
|
initModal();
|
||||||
|
loadData();
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user