Update index.html

index.html

@@ -297,17 +297,17 @@ <h2 class="subtitle has-text-centered">
       <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">
+            <img src="./static/images/more_result_chair.png" alt="Chair Image" height="100%" 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">
+            <img src="./static/images/more_result_hotdog.png" alt="Hotdog Image" height="100%" 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">
+            <img src="./static/images/more_result_mic.png" alt="Mic Image" height="100%" class="result-image">
           </figure>
         </div>
       </div>
@@ -326,6 +326,46 @@ <h2 class="subtitle has-text-centered">
 
 
 
+
+<section class="hero is-light is-small">
+  <div class="hero-body">
+    <div class="container">
+      <!-- 图片轮播 -->
+      <div id="results-carousel" class="carousel results-carousel">
+        <div class="item item-chair">
+          <img src="./static/images/more_result_chair.png" alt="Chair Image" height="100%" class="more-result">
+        </div>
+        <div class="item item-hotdog">
+          <img src="./static/images/more_result_hotdog.png" alt="Hotdog Image" height="100%" class="more-result">
+        </div>
+        <div class="item item-mic">
+          <img src="./static/images/more_result_mic.png" alt="Mic Image" height="100%" class="more-result">
+        </div>
+      </div>
+    </div>
+  </div>
+
+<!--   <style>
+    #results-carousel {
+      display: flex; /* 图片水平排列 */
+      justify-content: center; /* 水平居中对齐 */
+      align-items: center; /* 垂直居中对齐 */
+      gap: 20px; /* 图片之间的间距 */
+    }
+
+    .more-result {
+      width: auto; /* 宽度自动，保持比例 */
+      max-height: 300px; /* 限制图片最大高度 */
+      display: block; /* 确保图片显示为块级元素 */
+    }
+
+    .hero-body {
+      padding: 20px; /* 增加内边距，避免内容被挤压 */
+    }
+  </style> -->
+</section>
+
+