74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
Vue
<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> |