feat: 完成网站前端的基本建设

- 网站内容展示：首页， 产品页， 解决方案， 联系信息等
- 网站跳转逻辑：通过Vue-Router实现路由跳转
- 后端通信： 通过Nuxt Strapi与后端Strapi服务进行通信

app/components/ProductionCard.vue

@@ -0,0 +1,87 @@
+<template>
+    <el-card class="production-card" @click="handleClick">
+        <template #header>
+            <!-- Image -->
+            <el-image class="production-image" :src="imageUrl" fit="contain" />
+        </template>
+
+        <div class="card-body">
+            <!-- Name -->
+            <div class="text-center">
+                <span class="production-name">{{ name }}</span>
+            </div>
+            <!-- Description -->
+            <div class="card-description text-left opacity-25">{{ description }}</div>
+        </div>
+    </el-card>
+</template>
+
+<script setup lang="ts">
+
+interface Props {
+    name: string
+    description: string
+    imageUrl: string
+    id?: string | number
+    slug?: string
+}
+
+const props = defineProps<Props>()
+const localePath = useLocalePath()
+
+const handleClick = () => {
+    // 优先使用 slug，如果没有则使用 id
+    const routeParam = props.slug || props.id
+    if (routeParam) {
+        navigateTo(localePath(`/productions/${routeParam}`))
+    }
+}
+</script>
+
+<style scoped>
+.production-card {
+    width: 20%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.production-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.production-name {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
+}
+
+.production-card .el-image {
+    height: 150px;
+    border-radius: 4px;
+}
+
+.card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+    height: 100px;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+    .production-card {
+        width: 45%;
+    }
+}
+
+@media (max-width: 768px) {
+    .production-card {
+        width: 90%;
+    }
+}
+</style>