Feature: 解决方案页 & 调整部分样式

app/components/ProductionCard.vue

@@ -1,15 +1,18 @@
 <template>
     <el-card class="production-card" @click="handleClick">
-        <!-- Image -->
+        <template #header>
-        <el-image class="production-image" :src="imageUrl" fit="contain" />
+            <!-- Image -->
-        <template #footer>
+            <el-image class="production-image" :src="imageUrl" fit="contain" />
+        </template>
+
+        <div class="card-body">
             <!-- Name -->
-            <div class="text-center mx-auto text-md">
+            <div class="text-center">
                 <span class="production-name">{{ name }}</span>
             </div>
             <!-- Description -->
-            <div class="mx-auto mt-5 text-center text-sm opacity-25">{{ description }}</div>
+            <div class="card-description text-left opacity-25">{{ description }}</div>
-        </template>
+        </div>
     </el-card>
 </template>
 
@@ -38,7 +41,6 @@ const handleClick = () => {
 <style scoped>
 .production-card {
     width: 20%;
-    /* margin: 20px auto; */
     cursor: pointer;
     transition: all 0.3s ease;
     text-align: center;
@@ -50,15 +52,26 @@ const handleClick = () => {
 }
 
 .production-name {
+    font-size: 1rem;
     font-weight: 600;
-    color: var(--el-text-color-primary);
+}
+
+.card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
 }
 
 .production-card .el-image {
-    height: 200px;
+    height: 150px;
     border-radius: 4px;
 }
 
+.card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+    height: 100px;
+}
+
 /* 响应式设计 */
 @media (max-width: 1200px) {
     .production-card {

app/components/SolutionCard.vue

@@ -0,0 +1,83 @@
+<template>
+    <el-card class="solution-card" body-class="card-body" header-class="card-header" @click="handleClick">
+        <template #header>
+            <!-- Cover Image -->
+            <el-image class="solution-cover" :src="coverUrl" fit="cover" />
+        </template>
+        <!-- Title -->
+        <template #default>
+            <div class="text-center mx-auto text-md">
+                <span class="solution-title">{{ title }}</span>
+            </div>
+            <!-- Summary -->
+            <div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div>
+        </template>
+    </el-card>
+</template>
+
+
+<script setup lang="ts">
+interface Props {
+    title: string
+    summary: string
+    coverUrl: string
+    documentId?: string
+}
+
+const props = defineProps<Props>()
+const localePath = useLocalePath()
+
+const handleClick = () => {
+    const routeParam = props.documentId
+    if (routeParam) {
+        navigateTo(localePath(`/solutions/${routeParam}`))
+    }
+}
+</script>
+
+
+<style scoped>
+.solution-card {
+    width: 30%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.solution-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.solution-title {
+    font-weight: 600;
+}
+
+:deep(.card-header) {
+    padding: 0;
+    border-bottom: none !important;
+}
+
+:deep(.card-body) {
+    margin: 10px auto;
+    padding: 1px auto;
+}
+
+
+.solution-card .el-image {
+    height: 250px;
+}
+
+@media (max-width: 1200px) {
+    .solution-card {
+        width: 45%;
+    }
+}
+
+@media (max-width: 768px) {
+    .solution-card {
+        width: 90%;
+        margin: 10px auto;
+    }
+}
+</style>

app/layouts/default.vue

@@ -1,12 +1,12 @@
 <template>
     <el-container class="app-container">
-        <el-header class="page-header">
+        <el-header height="auto" class="page-header">
             <jinshen-header />
         </el-header>
         <el-main class="main-content">
             <slot />
         </el-main>
-        <el-footer class="page-footer">
+        <el-footer height="auto" class="page-footer">
             <jinshen-footer />
         </el-footer>
     </el-container>
@@ -16,20 +16,21 @@
 .app-container {
     display: flex;
     flex-direction: column;
+    padding: 0;
 }
 
 .page-header {
     padding: 0px;
+    margin-bottom: auto;
 }
 
 .main-content {
     flex: 1;
-    padding: 20px;
+    padding: 0;
     flex-direction: column;
 }
 
 .page-footer {
     padding: 0px;
 }
-
 </style>

app/pages/about/contact-us.vue

@@ -63,11 +63,11 @@ onMounted(async () => {
     margin-bottom: 2rem;
 }
 
-:deep(.markdown-body p) {
-    margin-bottom: 1rem;
-}
-
 :deep(.markdown-body h2) {
     text-align: center;
 }
+
+:deep(.markdown-body ul) {
+    list-style-type: none;
+}
 </style>

app/pages/productions/[...slug].vue

@@ -63,8 +63,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Production } from '~/types/strapi/production'
-
 const route = useRoute()
 const { findOne } = useStrapi()
 const { getStrapiLocale } = useLocalizations()

app/pages/productions/index.vue

@@ -103,7 +103,7 @@ onMounted(async () => {
     font-size: 2rem;
     font-weight: bold;
     color: var(--el-color-primary);
-    margin-bottom: 20px;
+    margin-bottom: 1rem;
 }
 
 .breadcrumb {

app/pages/solutions/[...slug].vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="page-container">
+        <div v-if="solution">
+            <div class="page-header">
+                <el-breadcrumb class="breadcrumb" separator="/">
+                    <el-breadcrumb-item class="text-md opacity-50">
+                        <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item class="text-md opacity-50">
+                        <NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item class="text-md opacity-50">{{ solution.title }}</el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+            <div class="page-content">
+                <div class="solution-info">
+                    <h1>{{ solution.title }}</h1>
+                    <div class="solution-meta">
+                        <span class="solution-date">
+                            CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }}
+                        </span>
+                    </div>
+                </div>
+                <p class="summary">{{ solution.summary }}</p>
+                <div class="solution-content">
+                    <markdown-renderer :content="solution.content || ''" />
+                </div>
+            </div>
+        </div>
+        <div v-else class="loading">
+            <el-skeleton :rows="5" animated />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const { findOne } = useStrapi()
+const { getStrapiLocale } = useLocalizations()
+const strapiLocale = getStrapiLocale()
+
+const solution = ref<Solution | null>(null)
+
+// 获取路由参数(documentId)
+const documentId = computed(() => route.params.slug as string)
+
+onMounted(async () => {
+    try {
+        const response = await findOne<Solution>('solutions', documentId.value, {
+            populate: '*',
+            locale: strapiLocale,
+        })
+        if (response.data) {
+            solution.value = {
+                ...response.data,
+                // 确保 solution_type 保持原始类型
+                solution_type: response.data.solution_type,
+            }
+        }
+        console.log('Fetched Solution:', solution.value)
+    } catch (error) {
+        console.error('Failed to fetch solution:', error)
+    }
+})
+</script>
+
+<style scoped>
+.page-container {
+    padding: 1rem;
+    min-height: 60vh;
+}
+
+.breadcrumb {
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+.solution-header {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.solution-header el-image {
+    width: 200px;
+    height: 200px;
+    border-radius: 4px;
+}
+
+.page-content h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    text-align: center;
+}
+
+.solution-meta {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+}
+
+.summary {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+}
+
+.solution-content {
+    margin-top: 1rem;
+}
+
+.loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+}
+</style>

app/pages/solutions/index.vue

@@ -15,22 +15,25 @@
             <el-tabs v-model="activeName" class="solutions-tabs">
                 <el-tab-pane :label="$t('all')" name="all">
                     <div class="solution-list">
-                        <production-card
+                        <solution-card
-v-for="solution in solutions" :key="solution.documentId || solution.id"
+v-for="solution in solutions" :key="solution.documentId" :title="solution.title"
-                            :slug="solution.documentId"
+                            :summary="solution.summary || ''" :cover-url="useStrapiMedia(solution?.cover?.url || '')"
-                            :image-url="useStrapiMedia(solution?.cover?.url || '')"
+                            :document-id="solution.documentId" />
-                            :name="solution.title" :description="solution.summary || ''" />
                     </div>
                 </el-tab-pane>
-                <el-tab-pane
+                <el-tab-pane 
-v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'"
+                    v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'"
-                    :name="type || 'no-category'">
+                    :name="type || 'no-category'"
+                >
                     <div class="solution-list">
-                        <production-card
+                        <solution-card 
-v-for="solution in group" :key="solution.documentId || solution.id"
+                            v-for="solution in group" 
-                            :slug="solution.documentId"
+                            :key="solution.documentId"
-                            :image-url="useStrapiMedia(solution?.cover?.url || '')"
+                            :document-id="solution.documentId" 
-                            :name="solution.title" :description="solution.summary || ''" />
+                            :cover-url="useStrapiMedia(solution?.cover?.url || '')"
+                            :title="solution.title" 
+                            :summary="solution.summary || ''" 
+                        />
                     </div>
                 </el-tab-pane>
             </el-tabs>
@@ -104,6 +107,7 @@ onMounted(async () => {
 .page-title {
     font-size: 2rem;
     font-weight: bold;
+    margin-bottom: 1rem;
     color: var(--el-color-primary);
 }
 
@@ -114,6 +118,8 @@ onMounted(async () => {
 .solution-list {
     display: flex;
     flex-wrap: wrap;
+    padding: 1rem;
+    margin-bottom: 2rem;
     gap: 40px;
 }
 </style>

nuxt.config.ts

@@ -6,7 +6,7 @@ export default defineNuxtConfig({
   app: {
     // head
     head: {
-      title: "Jinshen Website",
+      title: "金申机械制造有限公司",
       meta: [
         { name: "viewport", content: "width=device-width, initial-scale=1" },
         {