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

fix: 优化主图布局和内容显示

Browse Source 
- 主图1: 正面图放大，周围留白统一
- 主图2: 改为竖向排列，标题改为可选CPU和可选内存硬盘
- 主图3: 大图周围留白减少，右侧卖点填充满
- 主图4: 竖向排列，修改文案（包邮、详细教程、标配等）
- 主图5: 调整底部间距，避免重叠
This commit is contained in:
12600k-rog-d4
2026-04-04 22:42:54 +08:00
parent 0109d8e98a
commit c45b8eacd0
12 changed files with 254 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,87 +21,76 @@
.container {
width: 100%;
height: 100%;
padding: 40px;
position: relative;
padding: 30px 40px;
display: flex;
flex-direction: column;
}
/* 顶部标题 */
.header {
text-align: center;
margin-bottom: 30px;
margin-bottom: 15px;
}
.title {
font-size: 42px;
font-size: 36px;
font-weight: bold;
color: #1a5f2a;
letter-spacing: 3px;
}
.subtitle {
font-size: 22px;
font-size: 16px;
color: #4a8f5a;
margin-top: 8px;
margin-top: 5px;
}
/* 配置列表 */
/* 配置列表 - 竖向排列 */
.config-section {
display: flex;
gap: 30px;
margin-top: 20px;
flex-direction: column;
gap: 15px;
flex: 1;
align-items: center;
justify-content: center;
}
.config-card {
flex: 1;
width: 100%;
background: #fff;
border-radius: 20px;
padding: 30px;
border-radius: 15px;
padding: 15px 20px;
box-shadow: 0 8px 30px rgba(26, 95, 42, 0.15);
border: 2px solid #2d8a3e;
}
.config-title {
font-size: 28px;
font-size: 22px;
font-weight: bold;
color: #1a5f2a;
text-align: center;
margin-bottom: 25px;
padding-bottom: 15px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 3px solid #90ee90;
}
.config-item {
.config-tags {
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;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.config-tag {
display: inline-block;
background: #e8f5e9;
color: #1a5f2a;
padding: 4px 12px;
padding: 6px 14px;
border-radius: 15px;
font-size: 16px;
margin-right: 8px;
margin-bottom: 8px;
font-size: 15px;
}
/* 底部强调 */
.footer {
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
background: linear-gradient(90deg, #1a5f2a, #2d8a3e);
border-radius: 15px;
padding: 20px;
border-radius: 12px;
padding: 12px;
text-align: center;
margin-top: 10px;
}
.footer-text {
font-size: 26px;
font-size: 20px;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
@@ -126,31 +115,27 @@
<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 class="config-title">可选 CPU</div>
<div class="config-tags">
<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>
</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 class="config-title">可选内存硬盘</div>
<div class="config-tags">
<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>
</div>
</div>
</div>
@@ -161,4 +146,4 @@
</div>
</div>
</body>
</html>
</html>