Update index.html

index.html

@@ -289,7 +289,7 @@ <h2 class="subtitle has-text-centered">
 </section>
  -->
 
-<section class="hero is-light is-small">
+<!-- <section class="hero is-light is-small">
   <div class="hero-body">
     <div class="container">
       <!-- 图片轮播 -->
@@ -325,10 +325,51 @@ <h2 class="subtitle has-text-centered">
       padding: 20px; /* 增加内边距，避免内容被挤压 */
     }
   </style>
+</section> -->
+
+
+<section class="hero is-light is-small">
+  <div class="hero-body">
+    <div class="container">
+      <!-- 图片展示 -->
+      <div id="results-grid" class="columns is-centered is-multiline">
+        <div class="column is-one-third">
+          <figure class="image is-square">
+            <img src="./static/images/more_result_chair.png" alt="Chair Image" class="result-image">
+          </figure>
+        </div>
+        <div class="column is-one-third">
+          <figure class="image is-square">
+            <img src="./static/images/more_result_hotdog.png" alt="Hotdog Image" class="result-image">
+          </figure>
+        </div>
+        <div class="column is-one-third">
+          <figure class="image is-square">
+            <img src="./static/images/more_result_mic.png" alt="Mic Image" class="result-image">
+          </figure>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <style>
+    #results-grid {
+      margin-top: 20px; /* 图片与上方内容的间距 */
+    }
+
+    .result-image {
+      max-width: 100%; /* 图片宽度自适应容器 */
+      height: auto; /* 保持图片比例 */
+      border: 1px solid #ddd; /* 可选：添加边框 */
+      padding: 5px; /* 可选：图片内边距 */
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 可选：图片阴影 */
+    }
+  </style>
 </section>
 
 
 
+