安屿 Ayu 财富独立理财规划师服务落地页 HTML 单页源码

这是一款面向独立理财规划师、保险经纪人、税务顾问、家族办公室顾问等服务型个人品牌的官方落地页模板。整体采用米白底 + 藏蓝主色 + 暖金点缀的稳重配色，传递出「专业、克制、有温度」的信任感，能让陌生访客在 30 秒内建立对你专业度的判断。

页面结构遵循服务型 SaaS 落地页的经典脉络：首屏核心主张 + 本月服务数据卡 → 四宫格核心服务（保障 / 投资 / 税务 / 退休）→ 四组关键数据条（从业年限 / 管理规模 / 续约率 / 0 推销）→ 顾问个人介绍 → 预约表单 CTA。整页不堆参数、不放图表，把空间留给「你能帮我解决什么问题」的答案。

适合独立理财师、保险经纪人、信托顾问、税务规划师、家族办公室顾问作为个人品牌官网或朋友圈 / 知乎引流页。替换姓名、资质、服务文案与表单字段后即可使用。

使用教程

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>安屿 Ayu 财富 · 独立理财规划</title>
<style>
  :root{
    --bg:#f7f4ee; --bg2:#fffdf9; --card:#ffffff; --line:#e6ddcf;
    --navy:#1f2a44; --navy2:#2c3a5c; --gold:#b8893b; --gold2:#caa15a; --txt:#26303f; --mut:#6b7280;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);line-height:1.7}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  header{background:rgba(247,244,238,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .nav{display:flex;align-items:center;justify-content:space-between;height:66px}
  .logo{font-weight:800;letter-spacing:1px;font-size:20px;color:var(--navy)}
  .logo b{color:var(--gold)}
  .nav a{color:var(--mut);margin-left:26px;font-size:14px}
  .nav a:hover{color:var(--navy)}
  .hero{padding:82px 0 70px;background:linear-gradient(160deg,#eef1f7,var(--bg))}
  .hero .grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  .hero .tag{color:var(--gold);letter-spacing:4px;font-size:13px}
  .hero h1{font-size:46px;line-height:1.18;margin:12px 0;color:var(--navy)}
  .hero p{color:var(--mut);max-width:480px;font-size:16px;margin-bottom:24px}
  .btn{display:inline-block;background:var(--navy);color:#fff;padding:13px 34px;border-radius:10px;font-weight:700}
  .btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1c06}
  .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 18px 40px rgba(31,42,68,.08)}
  .card h3{color:var(--navy);font-size:18px;margin-bottom:6px}
  .card .big{font-size:34px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
  .card .sub{color:var(--mut);font-size:13px}
  section{padding:66px 0}
  .tag{color:var(--gold);letter-spacing:4px;font-size:13px;text-align:center}
  h2{font-size:30px;text-align:center;color:var(--navy);letter-spacing:1px;margin:8px 0 12px}
  .lead{color:var(--mut);text-align:center;max-width:620px;margin:0 auto}
  .svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
  .s{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;transition:.2s}
  .s:hover{border-color:var(--gold);transform:translateY(-4px)}
  .s .ic{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px}
  .s h3{color:var(--navy);font-size:17px}
  .s p{color:var(--mut);font-size:13.5px;margin-top:4px}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px;text-align:center}
  .stats .c{background:var(--navy);color:#fff;border-radius:14px;padding:24px}
  .stats .c b{display:block;font-size:30px;color:var(--gold2)}
  .stats .c span{font-size:13px;opacity:.85}
  .advisor{display:grid;grid-template-columns:.7fr 1.3fr;gap:36px;align-items:center;margin-top:38px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px}
  .advisor .ava{width:120px;height:120px;border-radius:50%;margin:0 auto;background:linear-gradient(135deg,var(--gold),var(--gold2))}
  .advisor h3{color:var(--navy);font-size:20px}
  .advisor p{color:var(--mut);font-size:14.5px;margin-top:6px}
  .form{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:32px;max-width:560px;margin:38px auto 0}
  .form input,.form select{width:100%;padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--txt);margin:8px 0;font-size:14px}
  .form .btn{width:100%;text-align:center;margin-top:10px}
  footer{border-top:1px solid var(--line);padding:26px 0;text-align:center;color:var(--mut);font-size:13px}
  @media(max-width:860px){.hero .grid2{grid-template-columns:1fr}.hero h1{font-size:34px}.svc,.stats{grid-template-columns:1fr 1fr}.advisor{grid-template-columns:1fr;text-align:center}.nav a{margin-left:14px;font-size:13px}}
</style>
</head>
<body>
<header><div class="wrap nav">
  <div class="logo">安屿 <b>Ayu</b> 财富</div>
  <nav><a href="#svc">服务</a><a href="#advisor">关于顾问</a><a href="#book">预约</a></nav>
</div></header>

<section class="hero"><div class="wrap grid2">
  <div>
    <div class="tag">INDEPENDENT FINANCIAL PLANNING</div>
    <h1>让每一分钱，<br>都走到对的地方</h1>
    <p>不做产品推销，只做独立规划。我们用一套透明的方法，帮你把保障、投资与退休安排理清楚。</p>
    <a class="btn gold" href="#book">免费 30 分钟咨询</a>
  </div>
  <div class="card">
    <h3>本月已服务家庭</h3>
    <div class="big">1,286</div>
    <div class="sub">平均节省保费 18% · 配置回报提升 2.3%</div>
  </div>
</div></section>

<section id="svc"><div class="wrap">
  <div class="tag">SERVICES</div>
  <h2>四块核心服务</h2>
  <div class="lead">从风险兜底到资产增值，覆盖一个家庭完整的财务生命周期。</div>
  <div class="svc">
    <div class="s"><div class="ic">保</div><h3>保障规划</h3><p>重疾、医疗、意外与寿险的科学组合，把家庭缺口补齐。</p></div>
    <div class="s"><div class="ic">投</div><h3>投资配置</h3><p>按风险偏好搭建基金与组合，长期复利而非追涨杀跌。</p></div>
    <div class="s"><div class="ic">税</div><h3>税务筹划</h3><p>合法合规的节税与架构建议，让收入留得更久。</p></div>
    <div class="s"><div class="ic">退</div><h3>退休规划</h3><p>测算养老缺口，设计可持续的被动现金流。</p></div>
  </div>
</div></section>

<section style="background:var(--bg2)"><div class="wrap">
  <div class="tag">BY THE NUMBERS</div>
  <h2>用结果说话</h2>
  <div class="stats">
    <div class="c"><b>9 年</b><span>从业经验</span></div>
    <div class="c"><b>¥3.2亿</b><span>管理资产规模</span></div>
    <div class="c"><b>98%</b><span>客户续约率</span></div>
    <div class="c"><b>0 推销</b><span>只收咨询费</span></div>
  </div>
</div></section>

<section id="advisor"><div class="wrap">
  <div class="tag">YOUR ADVISOR</div>
  <h2>认识你的规划师</h2>
  <div class="advisor">
    <div class="ava"></div>
    <div>
      <h3>林屿 · 认证理财规划师 (CFP)</h3>
      <p>前商业银行私人银行顾问，转身做独立规划师，只站在你这边。相信财务自由的第一步，是把账算明白。</p>
    </div>
  </div>
</div></section>

<section id="book" style="background:var(--bg2)"><div class="wrap">
  <div class="tag">BOOK A CALL</div>
  <h2>预约一次免费咨询</h2>
  <div class="form">
    <input placeholder="你的称呼" />
    <input placeholder="手机号" />
    <select><option>我想聊：保障规划</option><option>我想聊：投资配置</option><option>我想聊：退休规划</option><option>我想聊：综合方案</option></select>
    <a class="btn" href="#">提交预约</a>
  </div>
</div></section>

<footer>© 2026 安屿 Ayu 财富 · 独立 · 透明 · 只为你</footer>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1997.html