diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1def260..492b1b9 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -4,47 +4,40 @@
       <el-carousel class="homepage-carousel" height="auto" :interval="5000" arrow="never" autoplay>
         <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
           <div class="carousel-item">
-            <el-image
-class="carousel-image" :src="useStrapiMedia(item.url || '')"
+            <el-image class="carousel-image" :src="useStrapiMedia(item.url || '')"
               :alt="item.alternativeText || `Carousel Image ${index + 1}`" fit="contain" lazy />
             <p v-if="item.caption" class="caption">{{ item.caption }}</p>
           </div>
         </el-carousel-item>
       </el-carousel>
-      <div class="recommend-production" style="padding: 2rem;">
-        <div class="section">
-          <h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">推荐产品</h2>
-          <p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p>
-          <el-carousel
-class="production-carousel" height="auto" arrow="never" indicator-position="outside"
-            :autoplay="false">
-            <el-carousel-item
-v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n"
-              class="production-list">
-              <div class="block-group">
-                <el-card
-v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
-                  class="block production-card" @click="handleProductionCardClick(item.documentId || '')">
-                  <template #header>
-                    <el-image
-:src="useStrapiMedia(item.cover?.url || '')"
-                      :alt="item.cover?.alternativeText || item.title" fit="cover"
-                      style="width: 100%; height: 200px; border-radius: 8px;" lazy />
-                  </template>
-                  <div class="card-body">
-                    <!-- Name -->
-                    <div class="text-center">
-                      <span class="production-name">{{ item.title }}</span>
-                    </div>
-                    <!-- Description -->
-                    <div class="card-description text-left opacity-25">{{ item.summary }}</div>
+      <section>
+        <h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">推荐产品</h2>
+        <p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p>
+        <el-carousel class="production-carousel" height="auto" arrow="never" indicator-position="outside"
+          :autoplay="false">
+          <el-carousel-item v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n"
+            class="production-list">
+            <div class="block-group">
+              <el-card v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
+                class="block production-card" @click="handleProductionCardClick(item.documentId || '')">
+                <template #header>
+                  <el-image :src="useStrapiMedia(item.cover?.url || '')"
+                    :alt="item.cover?.alternativeText || item.title" fit="cover"
+                    style="width: 100%; height: 200px; border-radius: 8px;" lazy />
+                </template>
+                <div class="card-body">
+                  <!-- Name -->
+                  <div class="text-center">
+                    <span class="production-name">{{ item.title }}</span>
                   </div>
-                </el-card>
-              </div>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-      </div>
+                  <!-- Description -->
+                  <div class="card-description text-left opacity-25">{{ item.summary }}</div>
+                </div>
+              </el-card>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </section>
     </div>
     <div v-else class="loading">
       <el-skeleton :rows="3" animated />
@@ -102,6 +95,16 @@ const handleProductionCardClick = (documentId: string) => {
 </script>
 
 <style scoped lang="scss">
+section {
+  padding: 0 2rem;
+}
+
+section p {
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+}
+
+
 .homepage-carousel .el-carousel__item {
   width: 100%;
   height: 33vw;
@@ -165,45 +168,34 @@ const handleProductionCardClick = (documentId: string) => {
 }
 
 
-.block {
-  width: 30%;
-  height: 100%;
-  border: 2px dashed #a3aac6;
-}
-
 .production-card {
   transition: all 0.3s ease;
   text-align: center;
 }
 
 .production-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }
 
 .production-name {
-    font-size: 1rem;
-    font-weight: 600;
+  font-size: 1rem;
+  font-weight: 600;
 }
 
 .card-description {
-    font-size: 0.8rem;
-    margin-top: 5px;
+  font-size: 0.8rem;
+  margin-top: 5px;
 }
 
 .production-card .el-image {
-    height: 150px;
-    border-radius: 4px;
+  height: 150px;
+  border-radius: 4px;
 }
 
 .card-body {
-    margin: 10px auto;
-    padding: 0px auto;
-    height: 100px;
-}
-
-.section p {
-  color: var(--el-text-color-regular);
-  line-height: 1.6;
+  margin: 10px auto;
+  padding: 0px auto;
+  height: 100px;
 }
 </style>
\ No newline at end of file