Update index.html

index.html

@@ -481,6 +481,7 @@
     </div>
 </section>
 
+<!-- 产品展示区 -->
 <!-- 产品展示区 -->
 <section class="products">
     <div class="section-header">
@@ -498,7 +499,7 @@
                                 stroke-width="1" stroke-dasharray="8 4"/>
                     </svg>
                 </div>
-                <div class="image-placeholder"></div>
+                <div class="image-placeholder" role="img" aria-label="产品图片"></div>
             </div>
             <div class="product-info">
                 <span class="product-category">传统系列</span>
@@ -537,7 +538,7 @@
                                 stroke-width="1" stroke-dasharray="8 4"/>
                     </svg>
                 </div>
-                <div class="image-placeholder youth-series"></div>
+                <div class="image-placeholder" role="img" aria-label="产品图片"></div>
             </div>
             <div class="product-info">
                 <span class="product-category">青春系列</span>
@@ -576,7 +577,7 @@
                                 stroke-width="1" stroke-dasharray="8 4"/>
                     </svg>
                 </div>
-                <div class="image-placeholder cocktail-series"></div>
+                <div class="image-placeholder" role="img" aria-label="产品图片"></div>
             </div>
             <div class="product-info">
                 <span class="product-category">调制系列</span>
@@ -615,7 +616,7 @@
                                 stroke-width="1" stroke-dasharray="8 4"/>
                     </svg>
                 </div>
-                <div class="image-placeholder season-series"></div>
+                <div class="image-placeholder" role="img" aria-label="产品图片"></div>
             </div>
             <div class="product-info">
                 <span class="product-category">季节限定</span>
@@ -654,7 +655,7 @@
                                 stroke-width="1" stroke-dasharray="8 4"/>
                     </svg>
                 </div>
-                <div class="image-placeholder fusion-series"></div>
+                <div class="image-placeholder" role="img" aria-label="产品图片"></div>
             </div>
             <div class="product-info">
                 <span class="product-category">融合系列</span>
@@ -693,7 +694,7 @@
                                 stroke-width="1" stroke-dasharray="8 4"/>
                     </svg>
                 </div>
-                <div class="image-placeholder premium-series"></div>
+                <div class="image-placeholder" role="img" aria-label="产品图片"></div>
             </div>
             <div class="product-info">
                 <span class="product-category">轻奢系列</span>
@@ -743,7 +744,6 @@
         </button>
     </div>
 </section>
-
 <style>
 /* 产品展示区新增样式 */
 .product-card {
@@ -918,7 +918,39 @@
 .image-placeholder {
     position: absolute;
     inset: 0;
-    background: rgba(255, 255, 255, 0.1);
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    transition: transform 0.3s ease;
+}
+
+.image-placeholder:hover {
+    transform: scale(1.05);
+}
+
+/* 产品图片样式 */
+.product-card:nth-child(1) .image-placeholder {
+    background-image: url('./img/传统系列.png');
+}
+
+.product-card:nth-child(2) .image-placeholder {
+    background-image: url('./img/青春系列.png');
+}
+
+.product-card:nth-child(3) .image-placeholder {
+    background-image: url('./img/东方气泡.png');
+}
+
+.product-card:nth-child(4) .image-placeholder {
+    background-image: url('./img/季节限定.png');
+}
+
+.product-card:nth-child(5) .image-placeholder {
+    background-image: url('./img/融合系列.png');
+}
+
+.product-card:nth-child(6) .image-placeholder {
+    background-image: url('./img/轻奢系列.png');
 }
 
 .product-decoration {