app/pages/index.vue

@@ -6,32 +6,32 @@
           <div class="carousel-item">
             <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>
+            <p v-if="item.caption" class="carousel-image-caption">{{ item.caption }}</p>
           </div>
         </el-carousel-item>
       </el-carousel>
       <section>
-        <h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">推荐产品</h2>
+        <h2>推荐产品</h2>
         <p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p>
-        <el-carousel class="production-carousel" height="auto" arrow="never" indicator-position="outside"
+        <el-carousel class="recommend-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">
+            class="recommend-list">
+            <div class="recommend-card-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 || '')">
+                class="recommend-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="recommend-card-body">
+                  <!-- Title -->
                   <div class="text-center">
-                    <span class="production-name">{{ item.title }}</span>
+                    <span class="recommend-card-title">{{ item.title }}</span>
                   </div>
                   <!-- Description -->
-                  <div class="card-description text-left opacity-25">{{ item.summary }}</div>
+                  <div class="recommend-card-description text-left opacity-25">{{ item.summary }}</div>
                 </div>
               </el-card>
             </div>
@@ -96,7 +96,14 @@ const handleProductionCardClick = (documentId: string) => {
 
 <style scoped lang="scss">
 section {
-  padding: 0 2rem;
+  padding: 2rem;
+}
+
+section h2 {
+  color: var(--el-text-color-primary);
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
 }
 
 section p {
@@ -131,7 +138,7 @@ section p {
   height: 100%;
 }
 
-.caption {
+.carousel-image-caption {
   position: absolute;
   bottom: 10px;
   left: 50%;
@@ -143,7 +150,7 @@ section p {
   font-size: 14px;
 }
 
-.production-carousel :deep(.el-carousel__button) {
+.recommend-carousel :deep(.el-carousel__button) {
   /* 指示器按钮样式 */
   width: 8px;
   height: 8px;
@@ -152,13 +159,13 @@ section p {
   transition: all 0.3s ease;
 }
 
-.production-list {
+.recommend-list {
   display: flex;
   padding: 1rem;
   height: 400px;
 }
 
-.block-group {
+.recommend-card-group {
   display: flex;
   gap: 1rem;
   width: 100%;
@@ -168,34 +175,36 @@ section p {
 }
 
 
-.production-card {
+.recommend-card {
   transition: all 0.3s ease;
   text-align: center;
 }
 
-.production-card:hover {
+.recommend-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }
 
-.production-name {
-  font-size: 1rem;
-  font-weight: 600;
-}
 
-.card-description {
-  font-size: 0.8rem;
-  margin-top: 5px;
-}
-
-.production-card .el-image {
-  height: 150px;
-  border-radius: 4px;
-}
-
-.card-body {
+.recommend-card-body {
   margin: 10px auto;
   padding: 0px auto;
   height: 100px;
 }
+
+.recommend-card-title {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.recommend-card-description {
+  font-size: 0.8rem;
+  margin-top: 5px;
+}
+
+.recommend-card .el-image {
+  height: 150px;
+  border-radius: 4px;
+}
+
 </style>