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

153
产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图1-正面展示.html Normal file
View File

@@ -0,0 +1,153 @@
<!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, #1a5f2a 0%, #2d8a3e 50%, #1a5f2a 100%);
position: relative;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
/* 顶部标题 */
.header {
position: absolute;
top: 30px;
left: 0;
right: 0;
text-align: center;
}
.title {
font-size: 48px;
font-weight: bold;
color: #fff;
text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
letter-spacing: 4px;
}
.subtitle {
font-size: 24px;
color: #90ee90;
margin-top: 10px;
letter-spacing: 2px;
}
/* 产品图片区域 */
.product-area {
width: 500px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
.product-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4));
}
/* 卖点标签 */
.features {
position: absolute;
bottom: 120px;
display: flex;
gap: 20px;
}
.feature-tag {
background: rgba(255,255,255,0.95);
padding: 12px 24px;
border-radius: 30px;
font-size: 20px;
color: #1a5f2a;
font-weight: bold;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* 底部信息 */
.footer {
position: absolute;
bottom: 40px;
text-align: center;
}
.brand {
font-size: 32px;
color: #fff;
font-weight: bold;
letter-spacing: 3px;
}
.slogan {
font-size: 18px;
color: #90ee90;
margin-top: 8px;
}
/* 装饰元素 */
.deco-circle {
position: absolute;
border: 3px solid rgba(255,255,255,0.2);
border-radius: 50%;
}
.deco-1 {
width: 600px;
height: 600px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.deco-2 {
width: 700px;
height: 700px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-style: dashed;
}
</style>
</head>
<body>
<div class="container">
<!-- 装饰圆圈 -->
<div class="deco-circle deco-1"></div>
<div class="deco-circle deco-2"></div>
<!-- 顶部标题 -->
<div class="header">
<div class="title">飞牛 NAS 亚克力机箱</div>
<div class="subtitle">单盘位 · 迷你静音 · DIY组装</div>
</div>
<!-- 产品图片 -->
<div class="product-area">
<img src="../image/正面.jpg" alt="亚克力机箱正面" class="product-img">
</div>
<!-- 卖点 -->
<div class="features">
<div class="feature-tag">亚克力透明</div>
<div class="feature-tag">迷你便携</div>
<div class="feature-tag">静音散热</div>
</div>
<!-- 底部品牌 -->
<div class="footer">
<div class="brand">飞牛 NAS</div>
<div class="slogan">专业NAS存储解决方案</div>
</div>
</div>
</body>
</html>

BIN
产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图1-正面展示.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 KiB

164
产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图2-配置展示.html Normal file
View File

@@ -0,0 +1,164 @@
<!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, #f8fff8 0%, #e8f5e9 100%);
position: relative;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
padding: 40px;
position: relative;
}
/* 顶部标题 */
.header {
text-align: center;
margin-bottom: 30px;
}
.title {
font-size: 42px;
font-weight: bold;
color: #1a5f2a;
letter-spacing: 3px;
}
.subtitle {
font-size: 22px;
color: #4a8f5a;
margin-top: 8px;
}
/* 配置列表 */
.config-section {
display: flex;
gap: 30px;
margin-top: 20px;
}
.config-card {
flex: 1;
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 30px rgba(26, 95, 42, 0.15);
border: 2px solid #2d8a3e;
}
.config-title {
font-size: 28px;
font-weight: bold;
color: #1a5f2a;
text-align: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 3px solid #90ee90;
}
.config-item {
display: flex;
align-items: center;
margin-bottom: 18px;
font-size: 20px;
color: #333;
}
.config-label {
width: 100px;
font-weight: bold;
color: #2d8a3e;
}
.config-value {
flex: 1;
color: #555;
}
.config-tag {
display: inline-block;
background: #e8f5e9;
color: #1a5f2a;
padding: 4px 12px;
border-radius: 15px;
font-size: 16px;
margin-right: 8px;
margin-bottom: 8px;
}
/* 底部强调 */
.footer {
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
background: linear-gradient(90deg, #1a5f2a, #2d8a3e);
border-radius: 15px;
padding: 20px;
text-align: center;
}
.footer-text {
font-size: 26px;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
}
/* 装饰 */
.deco-line {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(90deg, #1a5f2a, #90ee90, #1a5f2a);
}
</style>
</head>
<body>
<div class="deco-line"></div>
<div class="container">
<!-- 顶部标题 -->
<div class="header">
<div class="title">亚克力机箱-单</div>
<div class="subtitle">灵活配置 · 满足多样需求</div>
</div>
<!-- 配置展示 -->
<div class="config-section">
<div class="config-card">
<div class="config-title">支持 CPU</div>
<div class="config-item">
<span class="config-value">
<span class="config-tag">N2840</span>
<span class="config-tag">N2930</span>
<span class="config-tag">AMD A4</span>
<span class="config-tag">1037U</span>
<span class="config-tag">J1900</span>
<span class="config-tag">J3160</span>
<span class="config-tag">i3</span>
</span>
</div>
</div>
<div class="config-card">
<div class="config-title">内存配置</div>
<div class="config-item">
<span class="config-value">
<span class="config-tag">2G-16G</span>
<span class="config-tag">2G-32G</span>
<span class="config-tag">4G-64G</span>
<span class="config-tag">4G-128G</span>
</span>
</div>
</div>
</div>
<!-- 底部强调 -->
<div class="footer">
<div class="footer-text">单 SATA 接口 · 适配所有单盘位主板</div>
</div>
</div>
</body>
</html>

BIN
产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图2-配置展示.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

195
产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图3-细节展示.html Normal file
View File

@@ -0,0 +1,195 @@
<!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: #fff;
position: relative;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
}
/* 顶部绿色条 */
.top-bar {
height: 120px;
background: linear-gradient(90deg, #1a5f2a, #2d8a3e);
display: flex;
align-items: center;
justify-content: center;
}
.top-title {
font-size: 40px;
color: #fff;
font-weight: bold;
letter-spacing: 4px;
}
/* 中间内容区 */
.content {
display: flex;
height: 560px;
padding: 30px;
gap: 30px;
}
/* 左侧图片区 */
.image-section {
flex: 1.2;
display: flex;
flex-direction: column;
gap: 20px;
}
.main-image {
flex: 1;
background: #f5f5f5;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 3px solid #e0e0e0;
}
.main-image img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
.sub-images {
display: flex;
gap: 15px;
height: 120px;
}
.sub-image {
flex: 1;
background: #f5f5f5;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 2px solid #e0e0e0;
}
.sub-image img {
max-width: 85%;
max-height: 85%;
object-fit: contain;
}
/* 右侧卖点区 */
.features-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.feature-box {
background: linear-gradient(135deg, #f8fff8, #e8f5e9);
border-radius: 15px;
padding: 25px;
border-left: 5px solid #2d8a3e;
}
.feature-icon {
width: 50px;
height: 50px;
background: #2d8a3e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24px;
font-weight: bold;
margin-bottom: 12px;
}
.feature-title {
font-size: 22px;
font-weight: bold;
color: #1a5f2a;
margin-bottom: 8px;
}
.feature-desc {
font-size: 16px;
color: #555;
line-height: 1.6;
}
/* 底部 */
.bottom-bar {
height: 120px;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
border-top: 3px solid #2d8a3e;
}
.bottom-text {
font-size: 28px;
color: #1a5f2a;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<!-- 顶部标题 -->
<div class="top-bar">
<div class="top-title">精工细作 · 品质看得见</div>
</div>
<!-- 中间内容 -->
<div class="content">
<!-- 左侧图片 -->
<div class="image-section">
<div class="main-image">
<img src="../image/侧面.jpg" alt="侧面展示">
</div>
<div class="sub-images">
<div class="sub-image">
<img src="../image/俯视图.jpg" alt="俯视图">
</div>
<div class="sub-image">
<img src="../image/底面.jpg" alt="底面">
</div>
<div class="sub-image">
<img src="../image/接口.jpg" alt="接口">
</div>
</div>
</div>
<!-- 右侧卖点 -->
<div class="features-section">
<div class="feature-box">
<div class="feature-icon">1</div>
<div class="feature-title">透明亚克力材质</div>
<div class="feature-desc">高透光率，内部硬件一目了然，科技感十足</div>
</div>
<div class="feature-box">
<div class="feature-icon">2</div>
<div class="feature-title">精密开孔设计</div>
<div class="feature-desc">接口布局合理，散热孔位科学，使用更便捷</div>
</div>
<div class="feature-box">
<div class="feature-icon">3</div>
<div class="feature-title">DIY组装乐趣</div>
<div class="feature-desc">附赠安装视频，轻松组装，享受动手乐趣</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bottom-bar">
<div class="bottom-text">飞牛 NAS · 专业品质保障</div>
</div>
</div>
</body>
</html>

BIN
产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图3-细节展示.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

209
产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图4-包装展示.html Normal file
View File

@@ -0,0 +1,209 @@
<!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(180deg, #1a5f2a 0%, #2d8a3e 40%, #f8fff8 40%, #f8fff8 100%);
position: relative;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
padding: 40px;
}
/* 顶部标题区 */
.header {
text-align: center;
margin-bottom: 30px;
}
.title {
font-size: 44px;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
letter-spacing: 4px;
}
.subtitle {
font-size: 24px;
color: #90ee90;
margin-top: 10px;
}
/* 包装内容区 */
.package-section {
display: flex;
gap: 30px;
margin-top: 20px;
}
/* 左侧包装图 */
.package-image {
flex: 1;
background: #fff;
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
align-items: center;
}
.package-img-container {
width: 100%;
height: 300px;
background: #f5f5f5;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 20px;
}
.package-img-container img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
.package-label {
font-size: 24px;
font-weight: bold;
color: #1a5f2a;
}
/* 右侧清单 */
.checklist {
flex: 1;
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.checklist-title {
font-size: 28px;
font-weight: bold;
color: #1a5f2a;
text-align: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 3px solid #90ee90;
}
.checklist-item {
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 22px;
color: #333;
}
.check-icon {
width: 32px;
height: 32px;
background: #2d8a3e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
margin-right: 15px;
font-size: 18px;
}
/* 底部保障 */
.guarantee {
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
background: linear-gradient(90deg, #1a5f2a, #2d8a3e);
border-radius: 15px;
padding: 25px;
display: flex;
justify-content: space-around;
}
.guarantee-item {
text-align: center;
color: #fff;
}
.guarantee-icon {
font-size: 36px;
margin-bottom: 8px;
}
.guarantee-text {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<!-- 顶部标题 -->
<div class="header">
<div class="title">专业包装 · 安全送达</div>
<div class="subtitle">配件齐全 · 安装无忧</div>
</div>
<!-- 包装内容 -->
<div class="package-section">
<!-- 包装图 -->
<div class="package-image">
<div class="package-img-container">
<img src="../image/包装1.jpg" alt="产品包装">
</div>
<div class="package-label">精美包装</div>
</div>
<!-- 配件清单 -->
<div class="checklist">
<div class="checklist-title">包装清单</div>
<div class="checklist-item">
<div class="check-icon">✓</div>
<span>亚克力机箱主体</span>
</div>
<div class="checklist-item">
<div class="check-icon">✓</div>
<span>安装螺丝包</span>
</div>
<div class="checklist-item">
<div class="check-icon">✓</div>
<span>SATA数据线</span>
</div>
<div class="checklist-item">
<div class="check-icon">✓</div>
<span>电源适配器（选配）</span>
</div>
<div class="checklist-item">
<div class="check-icon">✓</div>
<span>安装说明书+视频教程</span>
</div>
</div>
</div>
<!-- 底部保障 -->
<div class="guarantee">
<div class="guarantee-item">
<div class="guarantee-icon">🚚</div>
<div class="guarantee-text">顺丰包邮</div>
</div>
<div class="guarantee-item">
<div class="guarantee-icon">🛡️</div>
<div class="guarantee-text">破损包赔</div>
</div>
<div class="guarantee-item">
<div class="guarantee-icon">📞</div>
<div class="guarantee-text">技术支持</div>
</div>
<div class="guarantee-item">
<div class="guarantee-icon">↩️</div>
<div class="guarantee-text">7天退换</div>
</div>
</div>
</div>
</body>
</html>

BIN
产品/飞牛 NAS/fyd-亚克力机箱 - 单/主图/主图4-包装展示.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

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>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB