Feature: 联系我们界面 & 产品列表增添CMS筛选功能

app/pages/about/contact-us.vue

@@ -1,3 +1,60 @@
 <template>
-    <p>还没做</p>
-</template>
+    <div>
+        <el-breadcrumb class="breadcrumb" separator="/">
+            <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
+                {{ $t('navigation.home') }}
+            </el-breadcrumb-item>
+            <el-breadcrumb-item class="text-sm opacity-50">
+                {{ $t('contact-info') }}
+            </el-breadcrumb-item>
+        </el-breadcrumb>
+
+        <div class="content">
+            <markdown-renderer :content="content || ''" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const { findOne } = useStrapi()
+const { getStrapiLocale } = useLocalizations()
+
+const strapiLocale = getStrapiLocale()
+
+const content = ref<string>('')
+
+onMounted(async () => {
+    try {
+        const response = await findOne<StrapiContactInfo>('contact-info', undefined, {
+            populate: '*',
+            locale: strapiLocale,
+        })
+        if (response.data) {
+            content.value = response.data.content || ''
+        } else {
+            console.warn('No contact info data found')
+        }
+    } catch (error) {
+        console.error('Failed to fetch contact info:', error)
+    }
+})
+</script>
+
+<style scoped>
+.breadcrumb {
+    padding: 1rem 1rem;
+}
+
+.content {
+    padding: 1rem;
+    margin-bottom: 2rem;
+}
+
+:deep(.markdown-body p) {
+    margin-bottom: 1rem;
+}
+
+:deep(.markdown-body h2) {
+    text-align: center;
+}
+</style>