66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<script setup lang="ts">
|
||
import type { Company } from '~/data/mock'
|
||
|
||
const company = inject<Company>('company')!
|
||
|
||
useSeoMeta({
|
||
title: `${company.name} - 服务 - 链通物流`,
|
||
description: `${company.name} 的主营服务：${company.services.join('、')}。`
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<UContainer class="max-w-6xl py-8">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div
|
||
v-for="service in company.servicesDetail"
|
||
:key="service.name"
|
||
class="rounded-lg bg-elevated ring ring-default p-6"
|
||
>
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="font-semibold text-default">
|
||
{{ service.name }}
|
||
</h3>
|
||
<UBadge
|
||
color="primary"
|
||
variant="soft"
|
||
size="sm"
|
||
>
|
||
在营
|
||
</UBadge>
|
||
</div>
|
||
<p class="text-sm text-muted leading-relaxed">
|
||
{{ service.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 覆盖航线 -->
|
||
<div class="rounded-lg bg-elevated ring ring-default p-6 mt-6">
|
||
<h2 class="font-semibold text-highlighted mb-4">
|
||
覆盖航线
|
||
</h2>
|
||
<div class="flex flex-wrap gap-2">
|
||
<UBadge
|
||
v-for="route in company.routes"
|
||
:key="route"
|
||
color="primary"
|
||
variant="soft"
|
||
size="lg"
|
||
>
|
||
{{ route }}
|
||
</UBadge>
|
||
</div>
|
||
<p class="text-sm text-muted mt-4">
|
||
需要该企业的航线报价或服务方案？
|
||
<NuxtLink
|
||
:to="`/company/${company.slug}/contact`"
|
||
class="text-primary hover:underline"
|
||
>
|
||
联系他们 →
|
||
</NuxtLink>
|
||
</p>
|
||
</div>
|
||
</UContainer>
|
||
</template>
|