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

app/components/ProductionCard.vue

@@ -1,15 +1,18 @@
 <template>
     <el-card class="production-card" @click="handleClick">
-        <!-- Image -->
-        <el-image class="production-image" :src="imageUrl" fit="contain" />
-        <template #footer>
+        <template #header>
+            <!-- Image -->
+            <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>
-        </template>
+            <div class="card-description text-left opacity-25">{{ description }}</div>
+        </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>