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

- 主图1: 正面图放大，周围留白统一
- 主图2: 改为竖向排列，标题改为可选CPU和可选内存硬盘
- 主图3: 大图周围留白减少，右侧卖点填充满
- 主图4: 竖向排列，修改文案（包邮、详细教程、标配等）
- 主图5: 调整底部间距，避免重叠

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

@@ -22,7 +22,9 @@
             width: 100%;
             height: 100%;
             position: relative;
-            padding: 50px;
+            padding: 25px 35px;
+            display: flex;
+            flex-direction: column;
         }
         /* 背景装饰 */
         .bg-pattern {
@@ -38,84 +40,86 @@
         /* 主标题 */
         .main-title {
             text-align: center;
-            margin-bottom: 40px;
+            margin-bottom: 20px;
         }
         .title {
-            font-size: 52px;
+            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: 26px;
+            font-size: 18px;
             color: #90ee90;
-            margin-top: 15px;
+            margin-top: 8px;
         }
         /* 应用场景网格 */
         .scenarios {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
-            gap: 30px;
-            margin-top: 30px;
+            gap: 15px;
+            flex: 1;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 55px;
         }
         .scenario-card {
             background: rgba(255,255,255,0.95);
-            border-radius: 20px;
-            padding: 35px;
+            border-radius: 12px;
+            padding: 20px;
             text-align: center;
             box-shadow: 0 10px 40px rgba(0,0,0,0.3);
-            transition: transform 0.3s;
         }
         .scenario-icon {
-            width: 80px;
-            height: 80px;
+            width: 50px;
+            height: 50px;
             background: linear-gradient(135deg, #1a5f2a, #2d8a3e);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            margin: 0 auto 20px;
-            font-size: 40px;
+            margin: 0 auto 12px;
+            font-size: 26px;
             color: #fff;
         }
         .scenario-title {
-            font-size: 28px;
+            font-size: 20px;
             font-weight: bold;
             color: #1a5f2a;
-            margin-bottom: 12px;
+            margin-bottom: 6px;
         }
         .scenario-desc {
-            font-size: 18px;
+            font-size: 12px;
             color: #555;
-            line-height: 1.6;
+            line-height: 1.4;
         }
         /* 底部CTA */
         .cta {
             position: absolute;
-            bottom: 50px;
-            left: 50px;
-            right: 50px;
+            bottom: 25px;
+            left: 35px;
+            right: 35px;
             background: linear-gradient(90deg, #fff, #f0f8f0);
-            border-radius: 15px;
-            padding: 25px;
+            border-radius: 10px;
+            padding: 15px;
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 30px;
+            gap: 15px;
             box-shadow: 0 8px 30px rgba(0,0,0,0.3);
         }
         .cta-text {
-            font-size: 32px;
+            font-size: 22px;
             font-weight: bold;
             color: #1a5f2a;
         }
         .cta-badge {
             background: #ff6b35;
             color: #fff;
-            padding: 12px 30px;
-            border-radius: 30px;
-            font-size: 24px;
+            padding: 8px 20px;
+            border-radius: 20px;
+            font-size: 16px;
             font-weight: bold;
         }
     </style>
@@ -160,4 +164,4 @@
         </div>
     </div>
 </body>
-</html>
+</html>