diff --git a/app/pages/contact/index.vue b/app/pages/contact/index.vue
new file mode 100644
index 0000000..5e0e99c
--- /dev/null
+++ b/app/pages/contact/index.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+const users = ref([
+  {
+    name: '电话',
+    description: '15280659990',
+    target: '_blank',
+    avatar: {
+      icon: 'i-lucide-phone'
+    }
+  },
+  {
+    name: '邮箱',
+    description: '564737095@qq.com',
+    target: '_blank',
+    avatar: {
+      icon: 'i-lucide-mail'
+    }
+  },
+  {
+    name: '地址',
+    description: '福建省福鼎市太姥山镇海埕路13号',
+    target: '_blank',
+    avatar: {
+      icon: 'i-lucide-map-pin',
+      class: 'text-blue-500'
+
+    }
+  },
+  {
+    name: '工作时间',
+    description: '周一至周六 (8:30-12:00 13:30-18:00)',
+    target: '_blank',
+    avatar: {
+      icon: 'i-lucide-clock'
+    }
+  }
+])
+</script>
+
+<template>
+  <UPage>
+    <img alt="" src="/img/contact/banner.png">
+    <!-- components/FiveSevenLayout.vue -->
+    <UPageSection>
+      <div class="grid grid-cols-12 gap-6 items-center">
+        <div class="col-span-5 shadow-2xl">
+          <UPageList divide>
+            <UPageCard
+                v-for="(user, index) in users"
+                :key="index"
+                :target="user.target"
+
+                variant="ghost"
+            >
+              <template #body>
+                <UUser :avatar="user.avatar" :description="user.description" :name="user.name" size="xl"/>
+              </template>
+            </UPageCard>
+          </UPageList>
+        </div>
+        <div class="col-span-7">
+          <img alt="" class="shadow-2xl" src="/img/contact/map.png">
+        </div>
+      </div>
+
+
+    </upagesection>
+  </UPage>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file