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 {