82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
|
<UApp>
|
|
<NuxtLayout>
|
|
<Upagae>
|
|
|
|
<UPageSection
|
|
:ui="{container:'py-9 lg:px-0' }">
|
|
|
|
<img src="/img/banner.png" alt="" class="w-full">
|
|
<img src="/img/1.jpg" alt="" class="w-full">
|
|
<img src="/img/2.jpg" alt="" class="w-full">
|
|
<img src="/img/3.jpg" alt="" class="w-full">
|
|
<img src="/img/4.jpg" alt="" class="w-full">
|
|
<img src="/img/5.jpg" alt="" class="w-full">
|
|
<img src="/img/6.jpg" alt="" class="w-full">
|
|
<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>
|
|
</NuxtLayout>
|
|
</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> |