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

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

@@ -22,20 +22,22 @@
width: 100%;
height: 100%;
position: relative;
padding: 25px;
padding: 15px 20px;
display: flex;
flex-direction: column;
}
/* 顶部绿色条 */
.top-bar {
height: 90px;
height: 70px;
background: linear-gradient(90deg, #1a5f2a, #2d8a3e, #1a5f2a);
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(26,95,42,0.3);
}
.top-title {
font-size: 36px;
font-size: 28px;
color: #fff;
font-weight: bold;
letter-spacing: 4px;
@@ -44,52 +46,44 @@
/* 中间内容区 */
.content {
display: flex;
gap: 20px;
height: calc(100% - 130px);
margin-top: 15px;
gap: 12px;
flex: 1;
margin-top: 10px;
margin-bottom: 60px;
}
/* 左侧图片区 */
.image-section {
flex: 1.3;
flex: 1.2;
display: flex;
flex-direction: column;
gap: 12px;
gap: 8px;
}
.main-image {
flex: 1;
background: #fff;
border-radius: 20px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
border: 3px solid #fff;
position: relative;
}
.main-image::after {
content: '';
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 20px;
background: radial-gradient(ellipse, rgba(0,0,0,0.15), transparent);
border: 2px solid #fff;
padding: 5px;
}
.main-image img {
max-width: 95%;
max-height: 95%;
max-width: 98%;
max-height: 98%;
object-fit: contain;
}
.sub-images {
display: flex;
gap: 10px;
height: 100px;
gap: 6px;
height: 70px;
}
.sub-image {
flex: 1;
background: #fff;
border-radius: 12px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
@@ -98,75 +92,67 @@
border: 2px solid #fff;
}
.sub-image img {
max-width: 90%;
max-height: 90%;
max-width: 92%;
max-height: 92%;
object-fit: contain;
}
/* 右侧卖点区 */
/* 右侧卖点区 - 填充满 */
.features-section {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
gap: 8px;
}
.feature-box {
flex: 1;
background: #fff;
border-radius: 15px;
padding: 18px;
border-radius: 10px;
padding: 12px 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
border-left: 4px solid #2d8a3e;
position: relative;
overflow: hidden;
}
.feature-box::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: linear-gradient(135deg, transparent 50%, rgba(45,138,62,0.05) 50%);
display: flex;
flex-direction: column;
}
.feature-icon {
width: 36px;
height: 36px;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #2d8a3e, #1a5f2a);
border-radius: 10px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
.feature-title {
font-size: 18px;
font-weight: bold;
color: #1a5f2a;
margin-bottom: 5px;
}
.feature-title {
font-size: 15px;
font-weight: bold;
color: #1a5f2a;
margin-bottom: 3px;
}
.feature-desc {
font-size: 13px;
font-size: 11px;
color: #666;
line-height: 1.5;
line-height: 1.3;
}
/* 底部 */
.bottom-bar {
position: absolute;
bottom: 25px;
left: 25px;
right: 25px;
height: 60px;
bottom: 15px;
left: 20px;
right: 20px;
height: 50px;
background: linear-gradient(90deg, #1a5f2a, #2d8a3e);
border-radius: 15px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 20px rgba(26,95,42,0.3);
}
.bottom-text {
font-size: 22px;
font-size: 18px;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
@@ -200,7 +186,7 @@
</div>
</div>
<!-- 右侧卖点 -->
<!-- 右侧卖点 - 填充满 -->
<div class="features-section">
<div class="feature-box">
<div class="feature-icon">1</div>