86 lines
2.5 KiB
Vue
86 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
import type { Company } from '~/data/mock'
|
||
|
||
const company = inject<Company>('company')!
|
||
|
||
const contacts = computed(() => [
|
||
{ icon: 'i-lucide-phone', label: '联系电话', value: company.contact.phone },
|
||
{ icon: 'i-lucide-mail', label: '电子邮箱', value: company.contact.email },
|
||
{ icon: 'i-lucide-map-pin', label: '办公地址', value: company.contact.address },
|
||
{ icon: 'i-lucide-clock', label: '工作时间', value: company.contact.hours }
|
||
])
|
||
|
||
useSeoMeta({
|
||
title: `${company.name} - 联系方式 - 链通物流`,
|
||
description: `联系${company.name}：电话 ${company.contact.phone}，地址 ${company.contact.address}。`
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<!-- 联系信息 -->
|
||
<div class="lg:col-span-2 rounded-lg bg-elevated ring ring-default p-6">
|
||
<h2 class="font-semibold text-highlighted mb-5">
|
||
联系方式
|
||
</h2>
|
||
<div class="space-y-5">
|
||
<div
|
||
v-for="item in contacts"
|
||
:key="item.label"
|
||
class="flex items-start gap-3"
|
||
>
|
||
<div class="flex items-center justify-center size-9 rounded-lg bg-primary/10 shrink-0">
|
||
<UIcon
|
||
:name="item.icon"
|
||
class="size-4.5 text-primary"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm text-dimmed">
|
||
{{ item.label }}
|
||
</p>
|
||
<p class="text-default font-medium">
|
||
{{ item.value }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 在线沟通（示例） -->
|
||
<div class="rounded-lg bg-elevated ring ring-default p-6 flex flex-col">
|
||
<h2 class="font-semibold text-highlighted mb-3">
|
||
在线沟通
|
||
</h2>
|
||
<p class="text-sm text-muted leading-relaxed">
|
||
登录后可通过站内私信与该企业直接沟通，咨询航线报价、服务方案与合作事宜。
|
||
</p>
|
||
<UBadge
|
||
color="warning"
|
||
variant="soft"
|
||
icon="i-lucide-clock"
|
||
class="mt-4 self-start"
|
||
>
|
||
示例阶段未开放
|
||
</UBadge>
|
||
|
||
<div class="flex flex-col gap-2 mt-auto pt-6">
|
||
<UButton
|
||
label="发私信"
|
||
icon="i-lucide-message-circle"
|
||
disabled
|
||
block
|
||
/>
|
||
<UButton
|
||
label="加入行业群聊"
|
||
icon="i-lucide-messages-square"
|
||
color="neutral"
|
||
variant="outline"
|
||
disabled
|
||
block
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|