This commit is contained in:
张威33321
2026-09-07 17:34:56 +08:00
parent 6ed4efe281
commit 19ee3a0498
99 changed files with 1034 additions and 214 deletions

View File

@@ -0,0 +1,289 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>飞牛 NAS 三大系列对比</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 1500px;
font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
background: #eef2f7;
color: #1f2937;
-webkit-font-smoothing: antialiased;
}
.page { width: 1500px; background: #ffffff; padding: 0 0 56px; }
/* 头部 */
.header {
background: linear-gradient(135deg, #0f2f5c 0%, #1e5aa8 60%, #2b7bd4 100%);
padding: 58px 60px 52px;
color: #fff;
position: relative;
}
.header .badge {
display: inline-block;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.35);
border-radius: 999px;
padding: 8px 22px;
font-size: 24px;
letter-spacing: 2px;
margin-bottom: 22px;
}
.header h1 { font-size: 66px; font-weight: 800; letter-spacing: 2px; }
.header p { margin-top: 18px; font-size: 28px; color: rgba(255,255,255,.85); line-height: 1.6; }
/* 决策条 */
.decision {
margin: 44px 60px 0;
background: linear-gradient(90deg, #fff8e8, #fffdf7);
border: 2px solid #f5d99a;
border-radius: 18px;
padding: 30px 36px;
font-size: 32px;
line-height: 1.7;
}
.decision .t { font-weight: 800; color: #b47500; margin-right: 14px; }
.decision b { color: #c2410c; }
/* 三系列卡片 */
.cards { display: flex; gap: 26px; padding: 44px 60px 0; }
.card {
flex: 1;
border-radius: 22px;
overflow: hidden;
border: 2px solid #e2e8f0;
background: #fff;
box-shadow: 0 6px 18px rgba(15,47,92,.06);
}
.card .top { padding: 30px 26px 24px; color: #fff; text-align: center; }
.card .top .name { font-size: 52px; font-weight: 800; letter-spacing: 4px; }
.card .top .pos { margin-top: 12px; font-size: 27px; opacity: .95; }
.card .body { padding: 22px 26px 26px; }
.card .row { display: flex; padding: 13px 0; border-bottom: 1px dashed #e2e8f0; }
.card .row:last-child { border-bottom: none; }
.card .row .k { width: 132px; flex: none; color: #64748b; font-size: 25px; }
.card .row .v { flex: 1; font-size: 26px; font-weight: 600; line-height: 1.55; }
.c1 .top { background: linear-gradient(135deg, #64748b, #94a3b8); }
.c2 .top { background: linear-gradient(135deg, #1d6fd0, #3fa0f0); }
.c3 .top { background: linear-gradient(135deg, #c2410c, #f59e0b); }
.c1 { border-color: #cbd5e1; } .c2 { border-color: #bfdbfe; } .c3 { border-color: #fed7aa; }
/* 对比表 */
.sec-title {
margin: 56px 60px 0;
font-size: 38px;
font-weight: 800;
color: #0f2f5c;
padding-left: 20px;
border-left: 10px solid #2b7bd4;
line-height: 1.2;
}
.table-wrap { margin: 26px 60px 0; border: 2px solid #dbe3ec; border-radius: 18px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
thead th {
background: #0f2f5c;
color: #fff;
font-size: 30px;
padding: 24px 18px;
text-align: center;
font-weight: 700;
}
thead th.dim { background: #0b2447; font-size: 27px; }
thead th.s1 { background: #475f7d; }
thead th.s2 { background: #1d6fd0; }
thead th.s3 { background: #d97706; }
tbody td {
padding: 20px 18px;
font-size: 25px;
line-height: 1.55;
text-align: center;
border-top: 1px solid #e8edf3;
vertical-align: middle;
word-break: break-word;
}
tbody td.dim {
background: #f6f9fc;
font-weight: 700;
color: #334155;
text-align: left;
padding-left: 24px;
width: 232px;
}
tbody tr:nth-child(even) td { background: #fcfdfe; }
tbody tr:nth-child(even) td.dim { background: #f1f6fb; }
tbody tr.key td { background: #fffaf0; }
tbody tr.key td.dim { background: #fdf3e0; }
.tag {
display: inline-block;
background: #f97316;
color: #fff;
font-size: 19px;
border-radius: 8px;
padding: 3px 10px;
margin-left: 8px;
vertical-align: middle;
font-weight: 700;
}
td.hl { color: #c2410c; font-weight: 700; }
tbody td b { display: block; font-size: 29px; color: #0f2f5c; margin-bottom: 8px; }
/* 场景速选 */
.pick { margin: 46px 60px 0; display: flex; gap: 22px; }
.pick .item {
flex: 1;
background: #f6f9fc;
border: 2px solid #e2e8f0;
border-radius: 18px;
padding: 26px 24px;
}
.pick .item .q { font-size: 26px; color: #475569; line-height: 1.5; }
.pick .item .a { margin-top: 14px; font-size: 34px; font-weight: 800; }
.pick .item:nth-child(1) .a { color: #64748b; }
.pick .item:nth-child(2) .a { color: #1d6fd0; }
.pick .item:nth-child(3) .a { color: #c2410c; }
.footer {
margin: 40px 60px 0;
background: #0f2f5c;
color: rgba(255,255,255,.9);
border-radius: 16px;
padding: 24px 32px;
font-size: 25px;
line-height: 1.6;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<div class="badge">飞牛 NAS · 选购指南</div>
<h1>三大系列怎么选?</h1>
<p>云启=低成本尝鲜 云优=长期省心 云卓=性能与可玩性拉满</p>
</div>
<div class="decision">
<span class="t">决策一句话</span>只在乎「能不能用」选 <b>云启</b>;在乎「能不能一直稳定用」选 <b>云优</b>;在乎「能玩到什么程度」选 <b>云卓</b>
</div>
<div class="cards">
<div class="card c1">
<div class="top">
<div class="name">云启</div>
<div class="pos">入门尝鲜 · 偶尔使用</div>
</div>
<div class="body">
<div class="row"><div class="k">适合</div><div class="v">新手、偶尔使用者</div></div>
<div class="row"><div class="k">使用强度</div><div class="v">偶尔开机、轻度负载</div></div>
<div class="row"><div class="k">关键差异</div><div class="v">普通 DC 电源<br>二线 / 三线内存与硬盘</div></div>
<div class="row"><div class="k">关键词</div><div class="v">先用起来</div></div>
</div>
</div>
<div class="card c2">
<div class="top">
<div class="name">云优</div>
<div class="pos">稳定耐用 · 兴趣研究</div>
</div>
<div class="body">
<div class="row"><div class="k">适合</div><div class="v">兴趣研究、轻度至稳定使用</div></div>
<div class="row"><div class="k">使用强度</div><div class="v">经常开机、中等负载</div></div>
<div class="row"><div class="k">关键差异</div><div class="v">3C 认证安全稳定电源<br>一线品牌内存与硬盘</div></div>
<div class="row"><div class="k">关键词</div><div class="v">用得久</div></div>
</div>
</div>
<div class="card c3">
<div class="top">
<div class="name">云卓</div>
<div class="pos">高性能 · 生产 / 发烧</div>
</div>
<div class="body">
<div class="row"><div class="k">适合</div><div class="v">生产工作用户、发烧友</div></div>
<div class="row"><div class="k">使用强度</div><div class="v">长期 7×24 开机、中高负载</div></div>
<div class="row"><div class="k">关键差异</div><div class="v">3C 认证大功率电源<br>一线品牌 + 部分 DDR4</div></div>
<div class="row"><div class="k">关键词</div><div class="v">玩得深</div></div>
</div>
</div>
</div>
<div class="sec-title">三大系列核心差异总览</div>
<div class="table-wrap">
<table>
<colgroup>
<col style="width:232px"><col><col><col>
</colgroup>
<thead>
<tr>
<th class="dim">对比维度</th>
<th class="s1">云启</th>
<th class="s2">云优</th>
<th class="s3">云卓</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dim">定位与适用</td>
<td><b>入门尝鲜</b>新手、偶尔使用者<br>便宜够用,基础读写与影音</td>
<td><b>稳定耐用</b>兴趣研究者、轻度至稳定使用<br>省心耐折腾,多任务 + 容器</td>
<td><b>高性能 / 发烧</b>生产工作用户、发烧友<br>性能强功能全,虚拟机 / 转码</td>
</tr>
<tr>
<td class="dim">盘位与容量</td>
<td>单 / 双盘位为主</td>
<td>双、三盘位为主</td>
<td>三、四盘位及以上,多盘阵列</td>
</tr>
<tr class="key">
<td class="dim">供电方案<span class="tag">重点</span></td>
<td>普通 DC 电源</td>
<td class="hl">3C 认证的安全稳定 DC 电源<br>/ 1U 内置电源</td>
<td class="hl">3C 认证的大功率 DC 电源<br>/ 1U 内置电源</td>
</tr>
<tr class="key">
<td class="dim">内存<br>品牌 / 规格<span class="tag">重点</span></td>
<td>二线 / 三线品牌<br>DDR3</td>
<td class="hl">三星、美光、金士顿、海力士<br>等一线品牌<br>DDR3</td>
<td class="hl">三星、美光、金士顿、海力士<br>等一线品牌<br>DDR3部分型号 DDR4</td>
</tr>
<tr class="key">
<td class="dim">硬盘品牌<span class="tag">重点</span></td>
<td>二线 / 三线品牌</td>
<td class="hl">佰维、江波龙等一线品牌</td>
<td class="hl">佰维、江波龙等一线品牌</td>
</tr>
<tr>
<td class="dim">长时间开机</td>
<td>不建议长期满载</td>
<td>可长期开机</td>
<td>为长期在线而设计</td>
</tr>
</tbody>
</table>
</div>
<div class="sec-title">三句话对号入座</div>
<div class="pick">
<div class="item">
<div class="q">没玩过 NAS想花最少的钱试试偶尔备份照片、存电影</div>
<div class="a">选 云启</div>
</div>
<div class="item">
<div class="q">折腾 Docker、做家庭影音库要求长期开机稳定省心</div>
<div class="a">选 云优</div>
</div>
<div class="item">
<div class="q">多人共享、7×24 在线;虚拟机、多盘阵列、转码全都要</div>
<div class="a">选 云卓</div>
</div>
</div>
<div class="footer">
供电决定稳不稳内存硬盘品牌决定数据放不放得心CPU 与盘位决定能玩到什么程度。<br>
具体型号与报价以各系列《价格表》为准;选型时按「用途 + 是否长期开机 + 预算」三句话描述需求即可快速匹配。
</div>
</div>
</body>
</html>