Feature:产品总览页 & Strapi API

app/pages/index.vue

@@ -1,5 +1,76 @@
 <template>
-    <div>
-        <NuxtWelcome />
+  <div class="homepage">
+    <div class="hero-section">
+      <h1>{{ $t('company-name') }}</h1>
+      <p>{{ $t('company-description') }}</p>
+      <el-button type="primary" size="large">
+        {{ $t('learn-more') }}
+      </el-button>
     </div>
-</template>
+    
+    <div class="content-sections">
+      <div class="section">
+        <h2>{{ $t('productions') }}</h2>
+        <p>{{ $t('productions-desc') }}</p>
+      </div>
+      
+      <div class="section">
+        <h2>{{ $t('solutions') }}</h2>
+        <p>{{ $t('solutions-desc') }}</p>
+      </div>
+      
+      <div class="section">
+        <h2>{{ $t('support') }}</h2>
+        <p>{{ $t('support-desc') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.homepage {
+  padding: 2rem;
+}
+
+.hero-section {
+  text-align: center;
+  padding: 4rem 0;
+  background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary));
+  border-radius: 8px;
+  margin-bottom: 3rem;
+  color: white;
+}
+
+.hero-section h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.hero-section p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+}
+
+.content-sections {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+.section {
+  padding: 2rem;
+  background: var(--el-bg-color);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section h2 {
+  color: var(--el-color-primary);
+  margin-bottom: 1rem;
+}
+
+.section p {
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+}
+</style>

app/pages/productions/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="productions-container">
+        <production-card
+v-for="production in productions" :key="production.title" :image-url="production.image_url"
+            :name="production.title" :description="production.summary" />
+    </div>
+
+</template>
+
+
+
+<script setup lang="ts">
+const { find } = useStrapi()
+
+const baseUrl = 'http://192.168.86.5:1337';
+
+class ProductionInfo {
+    title: string;
+    summary: string;
+    image_url: string;
+
+    constructor(title: string, summary: string, image_url: string) {
+        this.title = title;
+        this.summary = summary;
+        this.image_url = baseUrl + image_url;
+    }
+}
+
+interface StrapiProduction {
+    title: string;
+    summary: string;
+    production_image?: {
+        url: string;
+    };
+}
+
+const productions = ref<ProductionInfo[]>();
+
+onMounted(async () => {
+    const response = await find<StrapiProduction>('productions', {
+        populate: '*',
+    })
+    productions.value = response.data.map((item: StrapiProduction) => {
+        return new ProductionInfo(
+            item.title,
+            item.summary,
+            item.production_image?.url || ''
+        );
+    });
+});
+
+</script>
+
+<style scoped>
+.productions-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+}
+</style>