contact us

app/app.vue

@@ -16,7 +16,26 @@
           <img src="/img/7.jpg" alt="" class="w-full">
           <img src="/img/8.jpg" alt="" class="w-full">
           <img src="/img/9.jpg" alt="" class="w-full">
+          <div class="grid lg:grid-cols-12 gap-6 items-center">
+            <div class="col-span-12 lg: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-12 lg:col-span-7">
+              <img alt="" class="shadow-2xl" src="/img/map.png">
+            </div>
+          </div>
         </UPageSection>
           
       </Upagae>
@@ -24,4 +43,40 @@
   </UApp>
 </template>
 <script setup lang="ts">
+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>

app/components/AppHeader.vue

@@ -34,7 +34,11 @@ onUnmounted(() => window.removeEventListener('scroll', handleScroll))
     </template>
 
     <!-- 右侧区域 -->
-    <template #right/>
+    <template #right>
+      <view class="h-6 w-auto text-primary">
+        商户中心
+      </view>
+    </template>
 
 
   </UHeader>