feat: 增添页面内容

- 首页增添内容：推荐解决方案
- 调整页面布局：当页面内容不足时自动调整页脚至页面底部
- 调整页首布局：将导航菜单置于页首中央

app/components/JinshenHeader.vue

@@ -6,9 +6,9 @@
             </NuxtLink>
         </div>
 
+        <div class="header-menu-section">
             <!-- 导航菜单 -->
-        <el-menu
+            <el-menu :default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false"
-:default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false"
                 :persistent="false" router>
                 <el-menu-item index="productions" :route="$localePath('/productions')">
                     <span class="title">{{ $t('navigation.productions') }}</span>
@@ -23,11 +23,13 @@
                     <span class="title">{{ $t('navigation.about-us') }}</span>
                 </el-menu-item>
             </el-menu>
+        </div>
+
+
 
         <!-- 右侧功能区 -->
         <div class="header-actions">
-            <el-input
+            <el-input v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
-v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
                 :prefix-icon="Search" clearable @keyup.enter="handleSearch" />
             <el-dropdown @command="setLocale">
                 <el-link type="info" :underline="false">
@@ -90,7 +92,6 @@ onMounted(() => {
 
 <style scoped>
 .header-container {
-    margin: 0 auto;
     padding: 0 10px;
     display: flex;
     height: 80px;
@@ -101,7 +102,6 @@ onMounted(() => {
 .logo-section {
     display: flex;
     flex: 1;
-    align-items: center;
     margin-left: 20px;
 }
 
@@ -116,6 +116,14 @@ onMounted(() => {
     width: auto;
 }
 
+
+.header-menu-section {
+    flex: 2;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+}
+
 .header-menu {
     margin-right: 40px;
     border-bottom: none !important;
@@ -138,8 +146,9 @@ onMounted(() => {
 }
 
 .header-actions {
+    flex: 1;
+    justify-content: flex-end;
     display: flex;
-    align-items: center;
     gap: 16px;
 }
 

app/layouts/default.vue

@@ -16,6 +16,7 @@
 .app-container {
     display: flex;
     flex-direction: column;
+    min-height: 100vh;
     padding: 0;
 }
 
@@ -27,7 +28,7 @@
 .main-content {
     flex: 1;
     padding: 0;
-    flex-direction: column;
+    overflow-y: auto;
 }
 
 .page-footer {

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"
+                    :alt="item.cover?.alternativeText || item.title" fit="cover" lazy />
-                    style="width: 100%; height: 200px; border-radius: 8px;" 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>

app/types/strapi/singleTypes.ts

@@ -9,4 +9,5 @@ export interface StrapiContactInfo extends StrapiEntity {
 export interface StrapiHomepage extends StrapiEntity {
     carousel: StrapiImage[];
     recommend_productions: StrapiRelation<Production>[];
+    recommend_solutions: StrapiRelation<Solution>[];
 }