聚联 Meeting 远程会议协作产品页 HTML 单页源码

这是一款面向远程会议、视频协作与在线办公 SaaS 的产品官网模板。整体采用深绿到祖母绿的渐变背景，配合半透明会议卡片与高亮绿色按钮，传达出「稳定、安全、高效」的产品信任感。首屏左侧是核心卖点与双 CTA，右侧放置了一个四人会议室的界面 mockup，直观展示产品形态。

页面结构为典型 SaaS 产品页：首屏卖点 → 六宫格功能亮点（音视频、字幕翻译、白板、屏幕共享、会议纪要、安全）→ 四宫格数据条 → 三档定价（免费 / 团队 / 企业，团队版高亮推荐）。功能模块基本覆盖会议类 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>聚联 Meeting · 远程会议协作产品页</title>
<style>
  :root{
    --teal:#0f766e; --emerald:#10b981; --dk:#0b3d2e; --ink:#0f2018; --mut:#5f7068; --bg:#f3faf7;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  header{display:flex;align-items:center;justify-content:space-between;height:66px}
  .logo{font-weight:800;font-size:20px;color:var(--teal)}
  .logo span{color:var(--emerald)}
  .menu{display:flex;gap:26px;font-size:15px;color:var(--mut)}
  .menu a:hover{color:var(--teal)}
  .btn{padding:11px 22px;border-radius:999px;font-weight:600;display:inline-block;transition:.2s}
  .btn-main{background:linear-gradient(90deg,var(--teal),var(--emerald));color:#fff}
  .btn-main:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,185,129,.35)}
  /* 首屏 */
  .hero{background:radial-gradient(1000px 420px at 85% -10%,rgba(16,185,129,.18),transparent),linear-gradient(135deg,#0b3d2e,#0f5e4c);color:#e6fff5;padding:78px 0 88px}
  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
  .tag{display:inline-block;font-size:13px;padding:6px 14px;border:1px solid rgba(16,185,129,.4);border-radius:999px;color:#a7f3d0;margin-bottom:18px}
  .hero h1{font-size:46px;line-height:1.2;margin-bottom:16px}
  .hero h1 span{color:#34d399}
  .hero p.lead{color:#b6d8cc;font-size:17px;margin-bottom:26px;max-width:520px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .btn-dk{background:#fff;color:var(--teal)}
  /* 会议 mockup */
  .meet{border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
  .meet-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
  .meet-bar b{color:#fff;font-size:14px}
  .meet-bar small{color:#9fd8c4}
  .grid4{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .tile{aspect-ratio:16/10;border-radius:12px;background:linear-gradient(135deg,rgba(16,185,129,.5),rgba(15,118,110,.5));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px}
  .tile:nth-child(2){background:linear-gradient(135deg,rgba(59,130,246,.5),rgba(16,185,129,.4))}
  .tile:nth-child(3){background:linear-gradient(135deg,rgba(168,85,247,.45),rgba(16,185,129,.4))}
  .tile:nth-child(4){background:linear-gradient(135deg,rgba(245,158,11,.45),rgba(16,185,129,.4))}
  .meet-foot{display:flex;gap:10px;padding:14px;border-top:1px solid rgba(255,255,255,.1)}
  .dot{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
  .dot.go{background:var(--emerald);margin-left:auto}
  /* 功能 */
  .sec{padding:72px 0}
  .sec h2{font-size:32px;text-align:center;margin-bottom:10px}
  .sec .sub{text-align:center;color:var(--mut);margin-bottom:40px}
  .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .feat{background:#fff;border:1px solid #d7ece4;border-radius:16px;padding:26px;transition:.2s}
  .feat:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(15,118,110,.12)}
  .feat .ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--emerald));margin-bottom:16px}
  .feat h3{font-size:18px;margin-bottom:8px}
  .feat p{color:var(--mut);font-size:14px}
  /* 数据 */
  .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:8px 0 50px}
  .fact{background:#fff;border-radius:16px;padding:22px;text-align:center;border:1px solid #d7ece4}
  .fact b{display:block;font-size:30px;color:var(--teal)}
  .fact small{color:var(--mut)}
  /* 定价锚点 */
  .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
  .plan{background:#fff;border:1px solid #d7ece4;border-radius:18px;padding:28px;display:flex;flex-direction:column}
  .plan.hot{border:2px solid var(--emerald);box-shadow:0 18px 40px rgba(16,185,129,.18);position:relative}
  .plan.hot::after{content:"推荐";position:absolute;top:-12px;right:24px;background:var(--emerald);color:#fff;font-size:12px;padding:4px 12px;border-radius:999px}
  .plan h3{font-size:19px}
  .plan .num{font-size:34px;font-weight:800;color:var(--teal);margin:8px 0}
  .plan .num small{font-size:15px;color:var(--mut);font-weight:400}
  .plan ul{list-style:none;margin:14px 0 20px;flex:1}
  .plan li{padding:7px 0;color:var(--mut);font-size:14px;border-bottom:1px dashed #e6f2ec}
  .plan .btn-main{text-align:center}
  footer{padding:30px 0;text-align:center;color:var(--mut);font-size:14px;border-top:1px solid #d7ece4;margin-top:60px}
  @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:30px}.feats,.pricing,.facts{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:34px}.menu{display:none}}
  @media(max-width:520px){.feats,.pricing,.facts{grid-template-columns:1fr}}
</style>
</head>
<body>
<header>
  <div class="wrap nav" style="display:flex;align-items:center;justify-content:space-between;height:66px">
    <div class="logo">聚<span>联</span> Meeting</div>
    <nav class="menu"><a href="#feat">功能</a><a href="#price">定价</a><a href="#price">企业版</a><a href="#price">下载</a></nav>
    <a href="#price" class="btn btn-main">免费开会</a>
  </div>
</header>

<section class="hero">
  <div class="wrap hero-grid">
    <div>
      <span class="tag">已服务 5,000+ 团队远程协作</span>
      <h1>让每一次远程会议<span>都像面对面</span></h1>
      <p class="lead">高清稳定、一键入会、实时字幕与协作白板，聚联 Meeting 把分散的团队重新连成一张网。</p>
      <div class="hero-cta">
        <a href="#price" class="btn btn-main">免费创建会议</a>
        <a href="#feat" class="btn btn-dk">查看产品能力</a>
      </div>
    </div>
    <div class="meet">
      <div class="meet-bar"><b>产品周会 · 进行中</b><small>08:24</small></div>
      <div class="grid4">
        <div class="tile">主持人</div><div class="tile">设计</div>
        <div class="tile">研发</div><div class="tile">运营</div>
      </div>
      <div class="meet-foot">
        <div class="dot">麦</div><div class="dot">摄</div><div class="dot">屏</div><div class="dot go">入</div>
      </div>
    </div>
  </div>
</section>

<section class="sec" id="feat">
  <div class="wrap">
    <h2>为协作而生的能力</h2>
    <p class="sub">不只是开会，更是把讨论变成行动</p>
    <div class="feats">
      <div class="feat"><div class="ic"></div><h3>高清稳定音视频</h3><p>智能降噪与弱网自适应，地铁里也能开完一场会。</p></div>
      <div class="feat"><div class="ic"></div><h3>实时字幕与翻译</h3><p>中英自动字幕，跨国团队沟通零障碍。</p></div>
      <div class="feat"><div class="ic"></div><h3>协作白板</h3><p>边讲边画，想法即时沉淀为可分享文档。</p></div>
      <div class="feat"><div class="ic"></div><h3>一键屏幕共享</h3><p>窗口、标签页、整屏随心切换，演示更顺滑。</p></div>
      <div class="feat"><div class="ic"></div><h3>会议纪要与待办</h3><p>AI 自动整理重点，会后自动分发行动项。</p></div>
      <div class="feat"><div class="ic"></div><h3>企业级安全</h3><p>端到端加密与权限管控，合规无忧。</p></div>
    </div>
    <div class="facts">
      <div class="fact"><b>99.9%</b><small>服务可用性</small></div>
      <div class="fact"><b>1000+</b><small>单场人数</small></div>
      <div class="fact"><b>&lt;200ms</b><small>入会延迟</small></div>
      <div class="fact"><b>30s</b><small>创建会议</small></div>
    </div>
  </div>
</section>

<section class="sec" id="price" style="background:#fff">
  <div class="wrap">
    <h2>简单透明的定价</h2>
    <p class="sub">从小到大，总有一档适合你的团队</p>
    <div class="pricing">
      <div class="plan"><h3>免费版</h3><div class="num">¥0<small> / 月</small></div><ul><li>最多 100 人会议</li><li>40 分钟时长</li><li>基础屏幕共享</li><li>云端录制 5GB</li></ul><a href="#" class="btn btn-main">开始使用</a></div>
      <div class="plan hot"><h3>团队版</h3><div class="num">¥39<small> / 人 / 月</small></div><ul><li>最多 500 人会议</li><li>不限时会议</li><li>实时字幕 + 白板</li><li>AI 会议纪要</li><li>云端录制 100GB</li></ul><a href="#" class="btn btn-main">立即升级</a></div>
      <div class="plan"><h3>企业版</h3><div class="num">定制<small> / 联系销售</small></div><ul><li>1000+ 大规模会议</li><li>SSO 与权限管控</li><li>专属客户成功</li><li>私有化部署可选</li></ul><a href="#" class="btn btn-main">联系销售</a></div>
    </div>
  </div>
</section>

<footer>© 2026 聚联 Meeting · 把团队连成一张网</footer>
</body>
</html>

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