本源码是一款企业官网常见的「品牌大事记 / About Timeline」单页模板，适合展示公司从创立到当下的重要节点。首屏使用深蓝紫渐变 Hero 区域，配合四项核心数据（年限、客户、团队、城市）快速建立信任感，页面整体商务稳重但不呆板。
核心亮点是左右交替的响应式时间轴：PC 端节点沿中央轴线两侧错落分布，移动端自动切换为单侧时间线；每个节点都可用顶部筛选条按「创业起步」「产品迭代」「融资扩张」「行业认可」分类查看；荣誉墙采用四卡片展示奖项认证，底部还有深色 CTA 引导访问者深入了解企业。时间轴节点带滚动淡入动画，交互自然流畅。
适合科技公司、SaaS 企业、咨询机构、制造业品牌作为官网关于页使用。将企业真实事件替换进时间轴节点与荣誉区，即可快速上线一个专业的品牌故事页面。
使用教程
1. 下载与保存
将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。
2. 本地预览
直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。
3. 自定义修改
替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。
4. 上线部署
将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。
HTML 源码
复制下方完整代码，保存为 .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:#f5f6f8;
--paper:#ffffff;
--ink:#171c26;
--ink-2:#3d4759;
--muted:#7a869a;
--line:#e3e7ee;
--indigo:#4f46e5;
--indigo-l:#818cf8;
--amber:#f59e0b;
--teal:#0d9488;
--rose:#e11d48;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
background:var(--bg);color:var(--ink);line-height:1.75;
-webkit-font-smoothing:antialiased;
}
.container{max-width:1000px;margin:0 auto;padding:0 24px}
/* ---------- Hero ---------- */
.hero{
background:linear-gradient(140deg,#312e81 0%,#4f46e5 55%,#6366f1 100%);
color:#fff;padding:78px 0 96px;position:relative;overflow:hidden;
}
.hero::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(circle at 12% 20%, rgba(255,255,255,.14), transparent 40%),
radial-gradient(circle at 88% 78%, rgba(129,140,248,.35), transparent 45%);
}
.hero .container{position:relative;z-index:2}
.eyebrow{
display:inline-block;padding:5px 14px;border-radius:20px;
background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
font-size:12px;letter-spacing:.2em;margin-bottom:22px;
}
.hero h1{font-size:clamp(30px,5.2vw,46px);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.hero p{
margin-top:16px;max-width:560px;font-size:16px;color:rgba(255,255,255,.82);
}
.hero-stats{
display:flex;flex-wrap:wrap;gap:36px;margin-top:38px;
}
.hero-stats div b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em}
.hero-stats div span{font-size:12.5px;color:rgba(255,255,255,.7);letter-spacing:.08em}
/* ---------- 筛选条 ---------- */
.filters{
display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
margin:-30px auto 0;position:relative;z-index:5;
background:var(--paper);padding:14px;border-radius:16px;
box-shadow:0 12px 34px rgba(23,28,38,.1);max-width:640px;
}
.chip{
padding:7px 17px;border-radius:22px;font-size:13px;cursor:pointer;
border:1px solid var(--line);background:#fafbfc;color:var(--ink-2);transition:.2s;
user-select:none;
}
.chip:hover{border-color:var(--indigo-l);color:var(--indigo)}
.chip.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
/* ---------- 时间轴 ---------- */
.timeline-wrap{padding:64px 0 40px}
.tl{position:relative;padding:10px 0}
.tl::before{
content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
transform:translateX(-50%);
background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
}
.node{
position:relative;width:50%;padding:0 44px 46px 0;
}
.node:nth-child(even){margin-left:50%;padding:0 0 46px 44px}
.node::before{
content:"";position:absolute;top:22px;right:-8px;
width:16px;height:16px;border-radius:50%;background:var(--paper);
border:3px solid var(--indigo);z-index:3;
box-shadow:0 0 0 5px rgba(79,70,229,.1);
}
.node:nth-child(even)::before{right:auto;left:-8px}
.node.t-amber::before{border-color:var(--amber);box-shadow:0 0 0 5px rgba(245,158,11,.12)}
.node.t-teal::before{border-color:var(--teal);box-shadow:0 0 0 5px rgba(13,148,136,.12)}
.node.t-rose::before{border-color:var(--rose);box-shadow:0 0 0 5px rgba(225,29,72,.12)}
.box{
background:var(--paper);border:1px solid var(--line);border-radius:16px;
padding:22px 24px;transition:.28s;position:relative;
}
.box:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(23,28,38,.1);border-color:#d5dbe6}
.yr{
display:inline-flex;align-items:center;gap:8px;
font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--indigo);
margin-bottom:9px;
}
.t-amber .yr{color:var(--amber)} .t-teal .yr{color:var(--teal)} .t-rose .yr{color:var(--rose)}
.yr .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.box h3{font-size:17.5px;font-weight:650;letter-spacing:-.01em;margin-bottom:8px}
.box p{font-size:14px;color:var(--ink-2);line-height:1.78}
.meta{
display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;
}
.meta span{
font-size:11.5px;padding:3px 10px;border-radius:6px;
background:#f1f3f7;color:var(--muted);
}
.badge-big{
position:absolute;top:18px;right:20px;font-size:34px;font-weight:800;
color:#f0f2f6;letter-spacing:-.03em;line-height:1;pointer-events:none;
}
/* ---------- 荣誉墙 ---------- */
.honor{background:var(--paper);border-top:1px solid var(--line);padding:66px 0}
.sec-head{text-align:center;margin-bottom:40px}
.sec-head small{
font-size:12px;letter-spacing:.28em;color:var(--indigo);text-transform:uppercase;
}
.sec-head h2{font-size:27px;font-weight:700;margin-top:8px;letter-spacing:-.01em}
.sec-head p{font-size:14.5px;color:var(--muted);margin-top:8px}
.honor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hcard{
border:1px solid var(--line);border-radius:14px;padding:22px 18px;text-align:center;
background:linear-gradient(170deg,#fbfcfd,#f4f6fa);transition:.25s;
}
.hcard:hover{transform:translateY(-4px);border-color:var(--indigo-l)}
.hcard .ic{
width:44px;height:44px;margin:0 auto 12px;border-radius:12px;
display:flex;align-items:center;justify-content:center;color:#fff;
background:linear-gradient(140deg,var(--indigo),var(--indigo-l));
}
.hcard:nth-child(2) .ic{background:linear-gradient(140deg,#f59e0b,#fbbf24)}
.hcard:nth-child(3) .ic{background:linear-gradient(140deg,#0d9488,#2dd4bf)}
.hcard:nth-child(4) .ic{background:linear-gradient(140deg,#e11d48,#fb7185)}
.hcard b{display:block;font-size:14.5px;margin-bottom:5px}
.hcard span{font-size:12.5px;color:var(--muted)}
/* ---------- CTA ---------- */
.cta{
padding:60px 0;text-align:center;
background:linear-gradient(120deg,#171c26,#2a3242);color:#fff;
}
.cta h2{font-size:25px;font-weight:700;margin-bottom:10px}
.cta p{color:#a9b3c4;font-size:14.5px;margin-bottom:26px}
.cta a{
display:inline-block;padding:13px 34px;border-radius:10px;
background:linear-gradient(120deg,var(--indigo),var(--indigo-l));color:#fff;
text-decoration:none;font-size:14.5px;font-weight:500;transition:.25s;
}
.cta a:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(79,70,229,.4)}
footer{background:#0f131b;color:#6b7788;text-align:center;padding:24px;font-size:12.5px}
@media(max-width:820px){
.honor-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
.tl::before{left:9px}
.node,.node:nth-child(even){width:100%;margin-left:0;padding:0 0 34px 34px}
.node::before,.node:nth-child(even)::before{left:1px;right:auto}
.badge-big{font-size:26px;top:14px;right:14px}
.hero{padding:56px 0 80px}
.hero-stats{gap:24px}
}
</style>
</head>
<body>
<header class="hero">
<div class="container">
<span class="eyebrow">SINCE 2014 · 品牌大事记</span>
<h1>十二年，从三个人的办公室<br>到服务两万家企业</h1>
<p>青梧科技一路走来的每一个关键节点，都由用户的信任与团队的坚持共同写就。</p>
<div class="hero-stats">
<div><b>12<span style="font-size:15px">年</span></b><span>持续深耕</span></div>
<div><b>21,600+</b><span>服务企业</span></div>
<div><b>486</b><span>团队成员</span></div>
<div><b>7</b><span>城市分部</span></div>
</div>
</div>
</header>
<div class="container">
<div class="filters">
<div class="chip on">全部节点</div>
<div class="chip">创业起步</div>
<div class="chip">产品迭代</div>
<div class="chip">融资扩张</div>
<div class="chip">行业认可</div>
</div>
</div>
<div class="container timeline-wrap">
<div class="tl">
<div class="node">
<div class="box">
<span class="badge-big">01</span>
<div class="yr"><span class="dot"></span>2014 年 3 月</div>
<h3>公司成立，第一间办公室</h3>
<p>三位创始人在杭州文三路一间 40 平米的民房里写下第一行代码，产品原型只有一个登录页和一张报表。</p>
<div class="meta"><span>创业起步</span><span>团队 3 人</span><span>杭州</span></div>
</div>
</div>
<div class="node t-teal">
<div class="box">
<span class="badge-big">02</span>
<div class="yr"><span class="dot"></span>2015 年 9 月</div>
<h3>首个正式版本上线</h3>
<p>青梧云 1.0 发布，主打中小企业协同办公。上线首月注册企业突破 500 家，验证了最初的产品判断。</p>
<div class="meta"><span>产品迭代</span><span>500 家企业</span><span>V1.0</span></div>
</div>
</div>
<div class="node t-amber">
<div class="box">
<span class="badge-big">03</span>
<div class="yr"><span class="dot"></span>2017 年 6 月</div>
<h3>完成 A 轮融资</h3>
<p>获得知名基金 6000 万元 A 轮投资，团队扩充至 80 人，正式启动技术中台与数据平台建设。</p>
<div class="meta"><span>融资扩张</span><span>6000 万</span><span>团队 80 人</span></div>
</div>
</div>
<div class="node t-teal">
<div class="box">
<span class="badge-big">04</span>
<div class="yr"><span class="dot"></span>2019 年 4 月</div>
<h3>青梧云 3.0 全面重构</h3>
<p>基于微服务架构完成全线重构，页面首屏加载时间降低 68%，同时上线开放平台与 200+ API 接口。</p>
<div class="meta"><span>产品迭代</span><span>性能 +68%</span><span>开放平台</span></div>
</div>
</div>
<div class="node t-rose">
<div class="box">
<span class="badge-big">05</span>
<div class="yr"><span class="dot"></span>2021 年 11 月</div>
<h3>荣获年度企业服务创新奖</h3>
<p>在中国企业数字化峰会上获评「年度最佳企业服务产品」，同年通过 ISO 27001 信息安全管理体系认证。</p>
<div class="meta"><span>行业认可</span><span>ISO 27001</span><span>年度大奖</span></div>
</div>
</div>
<div class="node t-amber">
<div class="box">
<span class="badge-big">06</span>
<div class="yr"><span class="dot"></span>2023 年 5 月</div>
<h3>C 轮融资 & 七城布局</h3>
<p>完成 3.5 亿元 C 轮融资，先后在北京、深圳、成都、西安、武汉、上海设立分公司，服务网络覆盖全国。</p>
<div class="meta"><span>融资扩张</span><span>3.5 亿</span><span>7 座城市</span></div>
</div>
</div>
<div class="node t-teal">
<div class="box">
<span class="badge-big">07</span>
<div class="yr"><span class="dot"></span>2025 年 8 月</div>
<h3>智能助手全量发布</h3>
<p>将大模型能力深度接入协同场景，自动生成周报、会议纪要与数据洞察，人均事务性工作时长下降 32%。</p>
<div class="meta"><span>产品迭代</span><span>AI 能力</span><span>效率 +32%</span></div>
</div>
</div>
<div class="node">
<div class="box">
<span class="badge-big">08</span>
<div class="yr"><span class="dot"></span>2026 年 至今</div>
<h3>服务企业突破两万家</h3>
<p>累计服务企业客户 21,600 家，日活用户超 180 万。我们依然相信：好产品，是陪客户一起长出来的。</p>
<div class="meta"><span>里程碑</span><span>21,600 家</span><span>DAU 180 万</span></div>
</div>
</div>
</div>
</div>
<section class="honor">
<div class="container">
<div class="sec-head">
<small>Honors</small>
<h2>一路同行的认可</h2>
<p>感谢每一份信任，它们是我们继续向前的理由</p>
</div>
<div class="honor-grid">
<div class="hcard">
<div class="ic"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M8 21h8M12 17v4M6 3h12v6a6 6 0 0 1-12 0V3z"/><path d="M18 5h3v2a3 3 0 0 1-3 3M6 5H3v2a3 3 0 0 0 3 3"/></svg></div>
<b>年度创新产品</b><span>2021 中国企服峰会</span>
</div>
<div class="hcard">
<div class="ic"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M12 2l2.9 6.2 6.6.9-4.8 4.7 1.2 6.7L12 17.3 6.1 20.5l1.2-6.7L2.5 9.1l6.6-.9L12 2z"/></svg></div>
<b>高新技术企业</b><span>2019 年首次认定</span>
</div>
<div class="hcard">
<div class="ic"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M12 3l8 4v5c0 5-3.4 8.6-8 9.9C7.4 20.6 4 17 4 12V7l8-4z"/><path d="M9 12l2.2 2.2L15.5 10"/></svg></div>
<b>ISO 27001 认证</b><span>信息安全管理体系</span>
</div>
<div class="hcard">
<div class="ic"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M17 20h5v-2a4 4 0 0 0-3-3.9M9 20H2v-2a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v2H9z"/><circle cx="8" cy="7" r="3.4"/><path d="M15.5 3.6a3.4 3.4 0 0 1 0 6.6"/></svg></div>
<b>最佳雇主品牌</b><span>2024 人力资源年会</span>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<h2>下一个节点，希望有你参与</h2>
<p>无论是成为我们的客户，还是加入我们的团队</p>
<a href="#">了解青梧科技 →</a>
</div>
</section>
<footer>© 2026 青梧科技有限公司 · 本页面为演示模板</footer>
<script>
var chips = document.querySelectorAll(".chip");
var nodes = document.querySelectorAll(".node");
chips.forEach(function(c){
c.addEventListener("click", function(){
chips.forEach(function(x){x.classList.remove("on")});
c.classList.add("on");
var key = c.textContent.trim();
nodes.forEach(function(n){
var tags = n.innerText;
n.style.display = (key === "全部节点" || tags.indexOf(key) > -1) ? "" : "none";
});
});
});
// 滚动淡入
if("IntersectionObserver" in window){
var io = new IntersectionObserver(function(es){
es.forEach(function(e){
if(e.isIntersecting){ e.target.style.opacity=1; e.target.style.transform="none"; }
});
},{threshold:.15});
nodes.forEach(function(n){
n.style.opacity=0; n.style.transform="translateY(24px)";
n.style.transition="opacity .6s ease, transform .6s ease";
io.observe(n);
});
}
</script>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1805.html
微信扫一扫 
支付宝扫一扫 
