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>