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

942 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="翠恒咨询 — 战略致远 · 洞见价值">
<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>