<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>