feat: 首页添加内容

- 增添推荐解决方案的section

app/pages/index.vue

@@ -22,8 +22,7 @@
                 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 />
+                    :alt="item.cover?.alternativeText || item.title" fit="cover" lazy />
                 </template>
                 <div class="recommend-card-body">
                   <!-- Title -->
@@ -38,6 +37,33 @@
           </el-carousel-item>
         </el-carousel>
       </section>
+      <section>
+        <h2>推荐解决方案</h2>
+        <p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
+        <el-carousel class="recommend-carousel" height="auto" arrow="never" indicator-position="outside"
+          :autoplay="false">
+          <el-carousel-item v-for="n in Math.floor(recommend_solutions.length / 3) + 1" :key="n" class="recommend-list">
+            <div class="recommend-card-group">
+              <el-card v-for="(item, index) in recommend_solutions.slice((n - 1) * 3, n * 3)" :key="index"
+                class="recommend-card" @click="handleSolutionCardClick(item.documentId || '')">
+                <template #header>
+                  <el-image :src="useStrapiMedia(item.cover?.url || '')"
+                    :alt="item.cover?.alternativeText || item.title" fit="cover" lazy />
+                </template>
+                <div class="recommend-card-body">
+                  <!-- Title -->
+                  <div class="text-center">
+                    <span class="recommend-card-title">{{ item.title }}</span>
+                  </div>
+                  <!-- Description -->
+                  <div class="recommend-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 />
@@ -52,6 +78,7 @@ const strapiLocale = getStrapiLocale()
 
 const carouselImages = ref<StrapiImage[]>([])
 const recommend_productions = ref<Production[]>([])
+const recommend_solutions = ref<Solution[]>([])
 
 const pending = ref(true)
 
@@ -68,14 +95,23 @@ onMounted(async () => {
               populate: '*',
             },
           },
-        }
+        },
+        recommend_solutions: {
+          populate: {
+            cover: {
+              populate: '*',
+            },
+          },
+        },
       },
       locale: strapiLocale,
     })
     if (response.data) {
       carouselImages.value = response.data.carousel || []
       recommend_productions.value = response.data.recommend_productions || []
+      recommend_solutions.value = response.data.recommend_solutions || []
       console.log('推荐产品:', recommend_productions.value)
+      console.log('推荐解决方案:', recommend_solutions.value)
     }
   } catch (error) {
     console.error('Error fetching homepage data:', error)
@@ -92,6 +128,16 @@ const handleProductionCardClick = (documentId: string) => {
     router.push(localePath(`/productions/${documentId}`))
   }
 }
+
+
+const handleSolutionCardClick = (documentId: string) => {
+  // 使用路由导航到解决方案详情页
+  if (documentId) {
+    const localePath = useLocalePath()
+    const router = useRouter()
+    router.push(localePath(`/solutions/${documentId}`))
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -176,10 +222,16 @@ section p {
 
 
 .recommend-card {
+  width: 33%;
   transition: all 0.3s ease;
   text-align: center;
 }
 
+.recommend-card :deep(.el-card__header) {
+  padding: 0;
+  border: none;
+}
+
 .recommend-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
@@ -189,7 +241,6 @@ section p {
 .recommend-card-body {
   margin: 10px auto;
   padding: 0px auto;
-  height: 100px;
 }
 
 .recommend-card-title {
@@ -203,8 +254,7 @@ section p {
 }
 
 .recommend-card .el-image {
-  height: 150px;
+  width: 100%;
   border-radius: 4px;
 }
-
 </style>