1. 小蓝资源网首页
  2. 网站源码

鹰瞰 SKYVIEW 无人机航拍服务官网 HTML 单页源码

小蓝IT • • 网站源码

天空蓝与日落橙撞色的无人机航拍服务落地页，含项目服务、作品案例与报价方案。

鹰瞰 SKYVIEW 是一款面向无人机航拍服务公司的展示与获客落地页。它覆盖了工程进度航拍、楼盘全景、宣传片拍摄、正射影像、三维建模、巡检排查与活动纪实等典型业务场景，用清晰的服务卡片与案例画廊让潜在客户快速判断’你们能不能做我的项目’。

页面以天空蓝为主色，搭配云白与日落橙，营造出开阔、高空、专业的视觉感受。无人机飞行动画、数据条、波浪分割线与服务矩阵让页面既有科技感又不失商业落地能力，报价方案、设备清单与安全承诺进一步建立信任。

适合航拍公司、测绘团队、影视工作室、活动直播团队用作官网模板，也适合学习如何在单页中整合服务介绍、作品案例、价格表与询价表单。

鹰瞰 SKYVIEW 无人机航拍服务官网 HTML 单页源码

使用教程

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">
<title>鹰瞰 SKYVIEW · 无人机航拍服务 | 换一个高度看你的项目</title>
<style>
:root{
  --sky:#1b7fd4;
  --sky-d:#0f5c9e;
  --sky-l:#57aef0;
  --cloud:#f2f8fd;
  --white:#ffffff;
  --sun:#ff7a35;
  --sun-l:#ffa062;
  --slate:#16283a;
  --slate2:#54697d;
  --line:#dbe7f2;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--slate);background:var(--white);line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* 顶栏 */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:.5px}
.brand .mark{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,var(--sky),var(--sky-l));
  display:grid;place-items:center;color:#fff;font-size:18px;
  box-shadow:0 6px 16px rgba(27,127,212,.32);
}
.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:2.5px;color:var(--sky);margin-top:-3px}
nav ul{display:flex;gap:28px;list-style:none;font-size:15px;font-weight:500}
nav a{color:var(--slate2);transition:.2s}
nav a:hover{color:var(--sky)}
.cta-s{background:var(--sun);color:#fff;padding:10px 22px;border-radius:9px;font-size:14.5px;font-weight:700;box-shadow:0 6px 16px rgba(255,122,53,.3);transition:.25s}
.cta-s:hover{background:var(--sun-l);transform:translateY(-2px)}
.mb{display:none;background:none;border:0;font-size:24px;color:var(--slate)}

/* Hero */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,#0d5fa6 0%,#1b7fd4 45%,#57aef0 100%);
  padding:96px 0 190px;text-align:center;
}
.cloudy{position:absolute;border-radius:50%;background:rgba(255,255,255,.28);filter:blur(2px)}
.c1{width:230px;height:70px;top:70px;left:-40px}
.c2{width:160px;height:52px;top:150px;right:6%}
.c3{width:300px;height:86px;bottom:150px;left:14%;background:rgba(255,255,255,.18)}
.c4{width:120px;height:42px;top:44px;right:26%;background:rgba(255,255,255,.22)}
.hero .badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.35);
  padding:7px 18px;border-radius:100px;font-size:13px;font-weight:600;letter-spacing:.5px;
  backdrop-filter:blur(4px);margin-bottom:26px;position:relative;z-index:3;
}
.hero h1{font-size:56px;line-height:1.2;font-weight:800;letter-spacing:-1px;position:relative;z-index:3}
.hero h1 span{
  background:linear-gradient(90deg,#ffd9a8,var(--sun-l));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p.sub{max-width:640px;margin:22px auto 36px;font-size:18px;opacity:.94;position:relative;z-index:3}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:3}
.b1{background:#fff;color:var(--sky-d);padding:15px 34px;border-radius:11px;font-weight:700;font-size:15.5px;transition:.25s;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.b1:hover{transform:translateY(-3px)}
.b2{border:1.5px solid rgba(255,255,255,.7);color:#fff;padding:15px 34px;border-radius:11px;font-weight:700;font-size:15.5px;transition:.25s}
.b2:hover{background:rgba(255,255,255,.15)}
/* 无人机 */
.drone{position:absolute;left:50%;transform:translateX(-50%);bottom:82px;z-index:4;animation:hover 3.4s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-14px)}}
.drone .body{width:92px;height:26px;background:#16283a;border-radius:8px;position:relative;margin:0 auto;box-shadow:0 14px 30px rgba(0,0,0,.28)}
.drone .body:after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-13px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 32% 32%,#5ac8fa,#0f5c9e);border:3px solid #0b1c2a}
.arm{position:absolute;top:8px;width:56px;height:5px;background:#22384d;border-radius:4px}
.arm.l{left:-52px}.arm.r{right:-52px}
.rotor{position:absolute;top:-5px;width:56px;height:6px;background:rgba(255,255,255,.75);border-radius:50%;animation:spin .12s linear infinite}
.arm.l .rotor{left:-14px}.arm.r .rotor{right:-14px}
@keyframes spin{0%{transform:scaleX(1)}50%{transform:scaleX(.25)}100%{transform:scaleX(1)}}
.wave{position:absolute;bottom:-2px;left:0;width:100%;line-height:0}
.wave svg{width:100%;height:110px;display:block}

/* 数据条 */
.strip{background:var(--cloud);border-bottom:1px solid var(--line)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:44px 0;text-align:center}
.strip b{display:block;font-size:36px;font-weight:800;color:var(--sky);line-height:1.2}
.strip small{font-size:13.5px;color:var(--slate2);font-weight:500}

/* 通用节 */
section{padding:88px 0}
.head{text-align:center;max-width:660px;margin:0 auto 54px}
.head .kicker{font-size:12px;font-weight:800;letter-spacing:3.5px;color:var(--sun);text-transform:uppercase}
.head h2{font-size:38px;font-weight:800;letter-spacing:-.5px;margin:10px 0 14px}
.head p{color:var(--slate2);font-size:16.5px}

/* 服务 */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.s-card{border:1px solid var(--line);border-radius:18px;padding:32px 28px;transition:.32s;background:#fff;position:relative;overflow:hidden}
.s-card:after{content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;background:rgba(27,127,212,.06);transition:.4s}
.s-card:hover{border-color:var(--sky-l);transform:translateY(-7px);box-shadow:0 18px 44px rgba(22,40,58,.1)}
.s-card:hover:after{transform:scale(1.4)}
.s-card .ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(140deg,var(--sky),var(--sky-l));color:#fff;display:grid;place-items:center;font-size:23px;margin-bottom:18px;position:relative;z-index:2}
.s-card h3{font-size:20px;font-weight:800;margin-bottom:9px;position:relative;z-index:2}
.s-card p{font-size:14.8px;color:var(--slate2);position:relative;z-index:2}
.s-card ul{list-style:none;margin-top:16px;position:relative;z-index:2}
.s-card li{font-size:13.8px;color:var(--slate2);padding-left:20px;position:relative;line-height:2}
.s-card li:before{content:"✓";position:absolute;left:0;color:var(--sky);font-weight:800}

/* 案例画廊 */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shot{
  border-radius:16px;aspect-ratio:1/1.12;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:20px;color:#fff;
  font-weight:700;font-size:15.5px;transition:.35s;cursor:pointer;
}
.shot:hover{transform:scale(1.03)}
.shot small{display:block;font-size:12px;font-weight:500;opacity:.85;margin-top:2px}
.shot:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.62))}
.shot>div{position:relative;z-index:2}
.g1{background:linear-gradient(150deg,#0f5c9e,#57aef0)}
.g2{background:linear-gradient(150deg,#1f7a5c,#7ec9a3)}
.g3{background:linear-gradient(150deg,#8a4a1e,#ffa062)}
.g4{background:linear-gradient(150deg,#3a2c62,#7d6bc4)}
.g5{background:linear-gradient(150deg,#0d4a66,#3ba9c9)}
.g6{background:linear-gradient(150deg,#6b1f36,#d4657f)}
.g7{background:linear-gradient(150deg,#2f4a1c,#8fb96a)}
.g8{background:linear-gradient(150deg,#1b2c44,#5c7ea8)}

/* 设备 */
.gear{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.gear-tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.gear-tbl th{
  text-align:left;padding:14px 16px;background:var(--slate);color:#fff;
  font-size:13px;letter-spacing:1px;font-weight:700;
}
.gear-tbl th:first-child{border-radius:10px 0 0 0}
.gear-tbl th:last-child{border-radius:0 10px 0 0}
.gear-tbl td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--slate2)}
.gear-tbl tr:nth-child(even) td{background:var(--cloud)}
.gear-tbl td:first-child{font-weight:700;color:var(--slate)}
.gear-note{background:var(--cloud);border-left:4px solid var(--sun);border-radius:0 12px 12px 0;padding:22px 24px;font-size:14.5px;color:var(--slate2);margin-top:22px}

/* 价格 */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{border:1.5px solid var(--line);border-radius:20px;padding:36px 30px;background:#fff;display:flex;flex-direction:column;transition:.3s;position:relative}
.plan:hover{box-shadow:0 16px 40px rgba(22,40,58,.09);transform:translateY(-5px)}
.plan.hot{border-color:var(--sun);box-shadow:0 18px 44px rgba(255,122,53,.16)}
.flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--sun);color:#fff;font-size:12px;font-weight:800;letter-spacing:1.5px;padding:5px 18px;border-radius:100px}
.plan h3{font-size:20px;font-weight:800}
.plan .pr{font-size:44px;font-weight:800;color:var(--sky);margin:14px 0 4px;letter-spacing:-1.5px}
.plan .pr small{font-size:15px;color:var(--slate2);font-weight:600}
.plan .desc{font-size:14px;color:var(--slate2);padding-bottom:20px;border-bottom:1px dashed var(--line);margin-bottom:20px}
.plan ul{list-style:none;flex:1}
.plan li{font-size:14.3px;color:var(--slate2);padding:8px 0 8px 24px;position:relative}
.plan li:before{content:"✦";position:absolute;left:0;color:var(--sun)}
.plan .pick{margin-top:24px;text-align:center;padding:14px;border-radius:11px;font-weight:700;font-size:15px;background:var(--cloud);color:var(--sky-d);transition:.25s;display:block}
.plan.hot .pick{background:var(--sun);color:#fff}
.plan .pick:hover{background:var(--sky);color:#fff}

/* 流程 */
.tl{position:relative;padding-left:0}
.tl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.tl-grid:before{content:"";position:absolute;top:24px;left:9%;right:9%;height:2px;background:var(--line)}
.node{text-align:center;position:relative;z-index:2}
.node .dot{width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:#fff;border:2px solid var(--sky);color:var(--sky);display:grid;place-items:center;font-weight:800;font-size:16px}
.node h4{font-size:16px;font-weight:800;margin-bottom:6px}
.node p{font-size:13.3px;color:var(--slate2)}

/* CTA */
.cta{background:linear-gradient(120deg,var(--slate),#1f3b57);color:#fff;border-radius:26px;padding:60px 46px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.cta h2{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1.34}
.cta p{opacity:.82;font-size:16px;margin-top:14px}
.form-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:28px}
.form-card label{display:block;font-size:12.5px;font-weight:700;letter-spacing:1px;opacity:.82;margin-bottom:7px}
.form-card input,.form-card select{
  width:100%;padding:12px 14px;margin-bottom:16px;border-radius:10px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);
  color:#fff;font-size:14.5px;font-family:inherit;
}
.form-card input::placeholder{color:rgba(255,255,255,.5)}
.form-card select option{color:#16283a}
.form-card input:focus,.form-card select:focus{outline:none;border-color:var(--sun-l)}
.form-card button{width:100%;padding:15px;border:0;border-radius:11px;background:var(--sun);color:#fff;font-size:15.5px;font-weight:800;letter-spacing:1px;cursor:pointer;transition:.25s;font-family:inherit}
.form-card button:hover{background:var(--sun-l)}

/* footer */
footer{background:#0e1e2d;color:rgba(255,255,255,.6);padding:52px 0 26px;font-size:14px}
.f-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-g h5{color:#fff;font-size:14.5px;font-weight:800;margin-bottom:14px;letter-spacing:.5px}
.f-g ul{list-style:none}
.f-g li{line-height:2.1;font-size:13.6px}
.f-g a:hover{color:var(--sky-l)}
.cp{text-align:center;padding-top:22px;font-size:12.8px;opacity:.55}

@media(max-width:980px){
  nav ul,.cta-s{display:none}.mb{display:block}
  .hero h1{font-size:36px}.hero{padding:70px 0 150px}
  .strip-grid{grid-template-columns:1fr 1fr;gap:28px}
  .svc,.price-grid,.gear{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .tl-grid{grid-template-columns:1fr}.tl-grid:before{display:none}
  .node{padding:18px 0;border-bottom:1px solid var(--line)}
  .cta{grid-template-columns:1fr;padding:40px 26px}
  .f-g{grid-template-columns:1fr 1fr}
  .head h2{font-size:28px}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <a href="#" class="brand">
      <span class="mark">🛩</span>
      <span>鹰瞰 SKYVIEW<small>AERIAL STUDIO</small></span>
    </a>
    <nav><ul>
      <li><a href="#svc">服务内容</a></li>
      <li><a href="#case">案例作品</a></li>
      <li><a href="#gear">设备参数</a></li>
      <li><a href="#price">报价方案</a></li>
      <li><a href="#flow">合作流程</a></li>
    </ul></nav>
    <a href="#quote" class="cta-s">免费出方案</a>
    <button class="mb">☰</button>
  </div>
</header>

<div class="hero">
  <div class="cloudy c1"></div><div class="cloudy c2"></div>
  <div class="cloudy c3"></div><div class="cloudy c4"></div>
  <div class="wrap">
    <span class="badge">✅ 民航局 CAAC 执照 · 全员持证飞行</span>
    <h1>换一个高度，<br>重新看见<span>你的项目</span></h1>
    <p class="sub">工程进度、楼盘全景、文旅宣传、活动纪实——从 4K 到 8K，从单机到编队，我们负责把地面上讲不清的那部分，飞到天上讲明白。</p>
    <div class="hero-btns">
      <a href="#quote" class="b1">获取拍摄方案与报价</a>
      <a href="#case" class="b2">▶ 看往期作品</a>
    </div>
  </div>
  <div class="drone">
    <div class="body">
      <div class="arm l"><div class="rotor"></div></div>
      <div class="arm r"><div class="rotor"></div></div>
    </div>
  </div>
  <div class="wave">
    <svg viewBox="0 0 1440 110" preserveAspectRatio="none"><path fill="#ffffff" d="M0,54 C240,110 420,10 720,44 C1020,78 1200,18 1440,60 L1440,110 L0,110 Z"></path></svg>
  </div>
</div>

<div class="strip">
  <div class="wrap strip-grid">
    <div><b>1,280+</b><small>累计飞行架次</small></div>
    <div><b>320</b><small>合作企业与机构</small></div>
    <div><b>8K</b><small>最高输出分辨率</small></div>
    <div><b>0</b><small>安全事故记录</small></div>
  </div>
</div>

<section id="svc">
  <div class="wrap">
    <div class="head">
      <div class="kicker">Services</div>
      <h2>我们能飞什么</h2>
      <p>不只是"拍好看"，更要拍得能用——能交付给甲方、能上宣传片、能作为工程存档</p>
    </div>
    <div class="svc">
      <div class="s-card">
        <div class="ico">🏗</div>
        <h3>工程进度航拍</h3>
        <p>按月/按周固定机位、固定航线复飞，形成可对比的进度影像档案，方便向业主与监理汇报。</p>
        <ul><li>固定航点自动复飞</li><li>同角度对比图输出</li><li>可附进度标注版本</li></ul>
      </div>
      <div class="s-card">
        <div class="ico">🏙</div>
        <h3>楼盘与园区全景</h3>
        <p>日景 + 夜景 + 黄金时刻三段式拍摄，出片包含 720° 全景、区位鸟瞰与配套周边串联镜头。</p>
        <ul><li>720° 可交互全景</li><li>区位关系镜头</li><li>夜景灯光通程</li></ul>
      </div>
      <div class="s-card">
        <div class="ico">🎬</div>
        <h3>宣传片与广告航拍</h3>
        <p>与地面摄制组配合，提供穿越机穿梭镜头、大范围横移与升格素材，可直接对接后期调色流程。</p>
        <ul><li>FPV 穿越机镜头</li><li>4K 120fps 升格</li><li>提供 LOG 原始素材</li></ul>
      </div>
      <div class="s-card">
        <div class="ico">🗺</div>
        <h3>正射影像与三维建模</h3>
        <p>倾斜摄影五镜头采集，输出 DOM/DSM 与实景三维模型，可用于测绘、土方量估算与规划汇报。</p>
        <ul><li>厘米级 GSD 精度</li><li>OSGB / OBJ 成果</li><li>土方量计算报告</li></ul>
      </div>
      <div class="s-card">
        <div class="ico">🔍</div>
        <h3>巡检与安全排查</h3>
        <p>光伏板热斑、输电线路、大跨桥梁与高层外墙，用变焦与红外双载荷替人上高空，风险归零。</p>
        <ul><li>红外热成像</li><li>30× 混合变焦</li><li>缺陷点位坐标标注</li></ul>
      </div>
      <div class="s-card">
        <div class="ico">🎉</div>
        <h3>活动与赛事纪实</h3>
        <p>马拉松、开工仪式、音乐节、村晚。多机位并飞 + 现场图传直出，活动当天即可交付精剪短片。</p>
        <ul><li>双机同飞不断电</li><li>现场图传大屏直出</li><li>当日交付 60s 短片</li></ul>
      </div>
    </div>
  </div>
</section>

<section id="case" style="background:var(--cloud)">
  <div class="wrap">
    <div class="head">
      <div class="kicker">Portfolio</div>
      <h2>往期作品</h2>
      <p>点击任意一格可查看该项目的完整拍摄手记与成片（演示占位）</p>
    </div>
    <div class="gal">
      <div class="shot g1"><div>滨江天际线<small>城市宣传片 · 日夜双版</small></div></div>
      <div class="shot g2"><div>茶山万亩梯田<small>文旅推广 · 春茶季</small></div></div>
      <div class="shot g3"><div>跨海大桥合龙<small>工程纪实 · 18 个月</small></div></div>
      <div class="shot g4"><div>电音节主舞台<small>活动纪实 · 三机并飞</small></div></div>
      <div class="shot g5"><div>光伏电站巡检<small>红外热成像 · 缺陷 37 处</small></div></div>
      <div class="shot g6"><div>古城夜灯会<small>非遗记录 · 8K</small></div></div>
      <div class="shot g7"><div>高标农田改造<small>正射影像 · 3.2cm</small></div></div>
      <div class="shot g8"><div>产业园区招商<small>720° 全景 + 鸟瞰</small></div></div>
    </div>
  </div>
</section>

<section id="gear">
  <div class="wrap">
    <div class="head">
      <div class="kicker">Equipment</div>
      <h2>机队与设备</h2>
      <p>所有机器每季度送厂检修，飞行前后双人核对清单，全程投保</p>
    </div>
    <div class="gear">
      <div>
        <table class="gear-tbl">
          <tr><th>机型</th><th>传感器 / 载荷</th><th>典型用途</th></tr>
          <tr><td>四轴旗舰 M4E</td><td>4/3 CMOS · 8K 30fps</td><td>宣传片、楼盘全景</td></tr>
          <tr><td>五镜头倾斜 P5</td><td>2.4 亿像素倾斜摄影</td><td>三维建模、正射影像</td></tr>
          <tr><td>行业机 H30T</td><td>红外 + 30× 变焦双载荷</td><td>巡检、安全排查</td></tr>
          <tr><td>FPV 穿越机 ×4</td><td>4K 120fps 广角</td><td>穿梭镜头、动感短视频</td></tr>
          <tr><td>系留悬停平台</td><td>持续供电 · 8 小时</td><td>大型活动长时间直播</td></tr>
        </table>
        <div class="gear-note">
          <b>关于空域：</b>所有城区与近机场作业均提前 3 个工作日报备并取得批复，我们承担全部报备流程；若因空域管制导致改期，不收取任何违约费用。
        </div>
      </div>
      <div>
        <div class="s-card" style="border-radius:20px">
          <div class="ico">🛡</div>
          <h3>三重安全保障</h3>
          <p style="margin-bottom:14px">飞得漂亮的前提是飞得安全。这是我们从不打折的部分。</p>
          <ul>
            <li>飞手持 CAAC 超视距执照，飞行时长均 800h+</li>
            <li>每架次投保第三方责任险，单次保额 200 万</li>
            <li>双人作业制：一人操机、一人观察空域与地面</li>
            <li>风力超 6 级、能见度不足 3km 一律停飞改期</li>
            <li>素材当天双备份，原始文件保留 90 天</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="price" style="background:var(--cloud)">
  <div class="wrap">
    <div class="head">
      <div class="kicker">Pricing</div>
      <h2>常用报价方案</h2>
      <p>以下为市区内常规作业价，含飞手、设备、报备与基础剪辑；跨市差旅另计</p>
    </div>
    <div class="price-grid">
      <div class="plan">
        <h3>单次拍摄</h3>
        <div class="pr">￥2,800<small> / 半天</small></div>
        <div class="desc">适合一次性需求：开工仪式、门店开业、单个楼盘补拍。</div>
        <ul>
          <li>4 小时内单机作业</li>
          <li>4K 原始素材全部交付</li>
          <li>精修照片 20 张</li>
          <li>60 秒成片剪辑一条</li>
          <li>交付周期 3 个工作日</li>
        </ul>
        <a href="#quote" class="pick">选择此方案</a>
      </div>
      <div class="plan hot">
        <div class="flag">最 受 欢 迎</div>
        <h3>宣传片套餐</h3>
        <div class="pr">￥12,800<small> / 项目</small></div>
        <div class="desc">适合企业年度宣传片、文旅推广片、招商片，含分镜与配乐。</div>
        <ul>
          <li>2 天拍摄（日景 + 夜景 + 黄金时刻）</li>
          <li>旗舰机 + FPV 穿越机双机型</li>
          <li>脚本分镜与航线设计</li>
          <li>3 分钟成片 + 3 条竖版短视频</li>
          <li>提供 LOG 原片，支持二次调色</li>
          <li>两轮免费修改</li>
        </ul>
        <a href="#quote" class="pick">选择此方案</a>
      </div>
      <div class="plan">
        <h3>年度进度包</h3>
        <div class="pr">￥36,000<small> / 年</small></div>
        <div class="desc">适合施工单位、地产项目做长期影像存档与阶段汇报。</div>
        <ul>
          <li>每月 1 次固定航线复飞（共 12 次）</li>
          <li>同角度进度对比图</li>
          <li>季度剪辑汇报片 4 条</li>
          <li>竣工总回顾片 1 条</li>
          <li>专属项目群 + 云端素材库</li>
          <li>临时加飞按 8 折结算</li>
        </ul>
        <a href="#quote" class="pick">选择此方案</a>
      </div>
    </div>
  </div>
</section>

<section id="flow">
  <div class="wrap">
    <div class="head">
      <div class="kicker">Workflow</div>
      <h2>合作流程</h2>
      <p>从聊需求到拿成片，通常 5 到 10 个工作日</p>
    </div>
    <div class="tl">
      <div class="tl-grid">
        <div class="node"><div class="dot">01</div><h4>需求沟通</h4><p>说清场地、用途与交付形式，我们判断可行性。</p></div>
        <div class="node"><div class="dot">02</div><h4>方案报价</h4><p>出航线图、机型配置与明细报价，无隐藏费用。</p></div>
        <div class="node"><div class="dot">03</div><h4>空域报备</h4><p>提前 3 个工作日提交报备，取得批复后定档。</p></div>
        <div class="node"><div class="dot">04</div><h4>现场拍摄</h4><p>双人作业，现场图传给你实时看，当场确认镜头。</p></div>
        <div class="node"><div class="dot">05</div><h4>交付与修改</h4><p>云盘交付原片与成片，含两轮免费修改。</p></div>
      </div>
    </div>
  </div>
</section>

<section id="quote" style="padding-top:0">
  <div class="wrap">
    <div class="cta">
      <div>
        <h2>把地点和用途告诉我们，<br>24 小时内给你一份航线方案</h2>
        <p>不确定能不能飞？也可以直接发定位过来，我们先帮你查空域，查完再谈钱。咨询与方案设计全程免费。</p>
        <p style="margin-top:18px;opacity:.95;font-weight:700">📞 400-728-6510　✉️ fly@skyview-demo.com</p>
      </div>
      <form class="form-card" onsubmit="event.preventDefault();alert('需求已提交，我们会在 24 小时内联系您。');">
        <label>联系人 / 公司</label>
        <input type="text" placeholder="如：李工 / 某建设集团" required>
        <label>联系电话</label>
        <input type="tel" placeholder="方便接通的手机号" required>
        <label>拍摄需求类型</label>
        <select>
          <option>工程进度航拍</option>
          <option>楼盘 / 园区全景</option>
          <option>宣传片与广告</option>
          <option>正射影像 / 三维建模</option>
          <option>巡检与安全排查</option>
          <option>活动与赛事纪实</option>
        </select>
        <label>拍摄地点</label>
        <input type="text" placeholder="城市 + 大致位置即可">
        <button type="submit">提交需求 · 免费出方案</button>
      </form>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f-g">
      <div>
        <h5>鹰瞰 SKYVIEW 航拍工作室</h5>
        <p style="line-height:1.9">成立于 2017 年，八人小队，机队 11 架。我们相信好的航拍不是炫技，而是把甲方在地面上说不清的那件事，用一个镜头讲明白。</p>
      </div>
      <div><h5>服务</h5><ul>
        <li><a href="#svc">工程进度航拍</a></li>
        <li><a href="#svc">宣传片拍摄</a></li>
        <li><a href="#svc">三维建模</a></li>
        <li><a href="#svc">设备巡检</a></li>
      </ul></div>
      <div><h5>资源</h5><ul>
        <li><a href="#case">案例作品集</a></li>
        <li><a href="#gear">设备清单</a></li>
        <li><a href="#price">报价说明</a></li>
        <li><a href="#flow">空域报备指南</a></li>
      </ul></div>
      <div><h5>联系</h5><ul>
        <li>400-728-6510</li>
        <li>fly@skyview-demo.com</li>
        <li>周一至周日 08:00–21:00</li>
        <li>基地：航空产业园 C 栋 3F</li>
      </ul></div>
    </div>
    <div class="cp">© 2026 鹰瞰 SKYVIEW · 本页为 HTML 单页示例模板，机构、资质与数据均为虚构演示</div>
  </div>
</footer>

</body>
</html>

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

496 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
岐黄堂中医养生理疗馆 HTML 单页源码
上一篇 1小时前
麦浪 MALTWAVE 精酿啤酒屋 HTML 单页源码
下一篇 56分钟前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服