77 lines
2.6 KiB
Vue
77 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import type { Company } from '~/data/mock'
|
|
|
|
const company = inject<Company>('company')!
|
|
|
|
const qualifications = [
|
|
{ name: '营业执照', icon: 'i-lucide-file-check' },
|
|
{ name: 'NVOCC 无船承运人', icon: 'i-lucide-ship' },
|
|
{ name: '国际货运代理备案', icon: 'i-lucide-globe' },
|
|
{ name: '道路运输经营许可', icon: 'i-lucide-truck' }
|
|
]
|
|
|
|
useSeoMeta({
|
|
title: `关于我们 - ${company.name}`,
|
|
description: company.about[0]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<CompanyPageBanner :company="company" title="关于我们" />
|
|
|
|
<UContainer class="max-w-6xl py-10">
|
|
<!-- 公司介绍 -->
|
|
<div class="max-w-4xl">
|
|
<h2 class="text-xl font-bold text-highlighted mb-4">
|
|
公司介绍
|
|
</h2>
|
|
<div class="space-y-4 text-toned leading-loose">
|
|
<p v-for="(paragraph, i) in company.about" :key="i">
|
|
{{ paragraph }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 基本信息 -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12 py-8 border-y border-muted">
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-primary">{{ company.established }}</p>
|
|
<p class="text-sm text-muted mt-1">成立年份</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-primary mt-1">{{ company.employees.split(' ')[0] }}</p>
|
|
<p class="text-sm text-muted mt-1">企业规模</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-primary">{{ company.routes.length }}+</p>
|
|
<p class="text-sm text-muted mt-1">主营航线</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-primary">{{ company.services.length }}+</p>
|
|
<p class="text-sm text-muted mt-1">服务类型</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 资质证书 -->
|
|
<div class="mt-12">
|
|
<h2 class="text-xl font-bold text-highlighted mb-6">
|
|
资质证书
|
|
</h2>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div
|
|
v-for="qualification in qualifications"
|
|
:key="qualification.name"
|
|
class="flex items-center gap-3 rounded-lg bg-elevated ring ring-default p-4"
|
|
>
|
|
<div class="flex items-center justify-center size-10 rounded-lg bg-primary/10 shrink-0">
|
|
<UIcon :name="qualification.icon" class="size-5 text-primary" />
|
|
</div>
|
|
<span class="text-sm text-toned">{{ qualification.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</div>
|
|
</template>
|