admin/membank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 为亚克力机箱-单生成5张主图及转换脚本

Browse Source
This commit is contained in:
12600k-rog-d4
2026-04-04 22:12:53 +08:00
parent 4277fa4ee5
commit cad20914cc
22 changed files with 3159 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图5-场景展示.html Normal file
View File

@@ -0,0 +1,163 @@
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 800px;
height: 800px;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
background: linear-gradient(135deg, #0d3320 0%, #1a5f2a 50%, #2d8a3e 100%);
position: relative;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
padding: 50px;
}
/* 背景装饰 */
.bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(255,255,255,0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
}
/* 主标题 */
.main-title {
text-align: center;
margin-bottom: 40px;
}
.title {
font-size: 52px;
font-weight: bold;
color: #fff;
text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
letter-spacing: 5px;
}
.subtitle {
font-size: 26px;
color: #90ee90;
margin-top: 15px;
}
/* 应用场景网格 */
.scenarios {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 30px;
}
.scenario-card {
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 35px;
text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
transition: transform 0.3s;
}
.scenario-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1a5f2a, #2d8a3e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 40px;
color: #fff;
}
.scenario-title {
font-size: 28px;
font-weight: bold;
color: #1a5f2a;
margin-bottom: 12px;
}
.scenario-desc {
font-size: 18px;
color: #555;
line-height: 1.6;
}
/* 底部CTA */
.cta {
position: absolute;
bottom: 50px;
left: 50px;
right: 50px;
background: linear-gradient(90deg, #fff, #f0f8f0);
border-radius: 15px;
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.cta-text {
font-size: 32px;
font-weight: bold;
color: #1a5f2a;
}
.cta-badge {
background: #ff6b35;
color: #fff;
padding: 12px 30px;
border-radius: 30px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="bg-pattern"></div>
<div class="container">
<!-- 主标题 -->
<div class="main-title">
<div class="title">多场景应用</div>
<div class="subtitle">满足您的各种存储需求</div>
</div>
<!-- 应用场景 -->
<div class="scenarios">
<div class="scenario-card">
<div class="scenario-icon">🏠</div>
<div class="scenario-title">家庭NAS</div>
<div class="scenario-desc">家庭影音中心<br>照片备份存储<br>文件共享管理</div>
</div>
<div class="scenario-card">
<div class="scenario-icon">💼</div>
<div class="scenario-title">办公存储</div>
<div class="scenario-desc">文档集中管理<br>团队协作共享<br>数据安全备份</div>
</div>
<div class="scenario-card">
<div class="scenario-icon">🔧</div>
<div class="scenario-title">开发测试</div>
<div class="scenario-desc">开发环境搭建<br>服务器测试<br>学习实验平台</div>
</div>
<div class="scenario-card">
<div class="scenario-icon">🎮</div>
<div class="scenario-title">个人工作室</div>
<div class="scenario-desc">小型工作室存储<br>自媒体素材库<br>轻量级服务器</div>
</div>
</div>
<!-- 底部CTA -->
<div class="cta">
<div class="cta-text">开启您的私有云存储之旅</div>
<div class="cta-badge">立即选购</div>
</div>
</div>
</body>
</html>