c45b8eacd0
- 主图1: 正面图放大，周围留白统一 - 主图2: 改为竖向排列，标题改为可选CPU和可选内存硬盘 - 主图3: 大图周围留白减少，右侧卖点填充满 - 主图4: 竖向排列，修改文案（包邮、详细教程、标配等） - 主图5: 调整底部间距，避免重叠
167 lines
5.2 KiB
HTML
167 lines
5.2 KiB
HTML
<!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: 25px 35px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
/* 背景装饰 */
|
|
.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: 20px;
|
|
}
|
|
.title {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
|
|
letter-spacing: 5px;
|
|
}
|
|
.subtitle {
|
|
font-size: 18px;
|
|
color: #90ee90;
|
|
margin-top: 8px;
|
|
}
|
|
/* 应用场景网格 */
|
|
.scenarios {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 15px;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 55px;
|
|
}
|
|
.scenario-card {
|
|
background: rgba(255,255,255,0.95);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
|
}
|
|
.scenario-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(135deg, #1a5f2a, #2d8a3e);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 12px;
|
|
font-size: 26px;
|
|
color: #fff;
|
|
}
|
|
.scenario-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #1a5f2a;
|
|
margin-bottom: 6px;
|
|
}
|
|
.scenario-desc {
|
|
font-size: 12px;
|
|
color: #555;
|
|
line-height: 1.4;
|
|
}
|
|
/* 底部CTA */
|
|
.cta {
|
|
position: absolute;
|
|
bottom: 25px;
|
|
left: 35px;
|
|
right: 35px;
|
|
background: linear-gradient(90deg, #fff, #f0f8f0);
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
|
|
}
|
|
.cta-text {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #1a5f2a;
|
|
}
|
|
.cta-badge {
|
|
background: #ff6b35;
|
|
color: #fff;
|
|
padding: 8px 20px;
|
|
border-radius: 20px;
|
|
font-size: 16px;
|
|
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> |