94 lines
3.1 KiB
Vue
94 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
import type { Company } from '~/data/mock'
|
||
|
||
const props = defineProps<{
|
||
company: Company
|
||
}>()
|
||
|
||
// 企业 hero：品牌色全宽大区，作为导航下方的内容区头部（不是导航栏信息）
|
||
const covers: Record<string, string> = {
|
||
blue: 'from-blue-700 via-blue-600 to-blue-500',
|
||
orange: 'from-orange-700 via-orange-600 to-orange-500',
|
||
violet: 'from-violet-700 via-violet-600 to-violet-500',
|
||
emerald: 'from-emerald-700 via-emerald-600 to-emerald-500',
|
||
sky: 'from-sky-700 via-sky-600 to-sky-500',
|
||
amber: 'from-amber-700 via-amber-600 to-amber-500'
|
||
}
|
||
const cover = computed(() => covers[props.company.color] ?? covers.blue)
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
class="relative bg-gradient-to-br overflow-hidden"
|
||
:class="cover"
|
||
>
|
||
<!-- 右上光晕，增强官网沉浸感 -->
|
||
<div class="absolute inset-0 bg-[radial-gradient(120%_120%_at_100%_0%,rgba(255,255,255,0.18),transparent_55%)]" />
|
||
|
||
<UContainer class="relative max-w-6xl py-12 sm:py-16">
|
||
<div class="flex flex-col sm:flex-row sm:items-center gap-6">
|
||
<CompanyLogo
|
||
:name="company.name"
|
||
:color="company.color"
|
||
size="lg"
|
||
/>
|
||
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center gap-3 flex-wrap">
|
||
<h1 class="text-2xl sm:text-3xl font-bold text-white drop-shadow-sm truncate">
|
||
{{ company.name }}
|
||
</h1>
|
||
<span
|
||
v-if="company.verified"
|
||
class="inline-flex items-center gap-1 rounded-full bg-white/20 text-white text-xs font-medium px-2.5 py-1"
|
||
>
|
||
<UIcon
|
||
name="i-lucide-badge-check"
|
||
class="size-3.5"
|
||
/>
|
||
平台认证
|
||
</span>
|
||
</div>
|
||
|
||
<p class="text-white/85 text-base mt-2 truncate">
|
||
{{ company.slogan }}
|
||
</p>
|
||
|
||
<div class="flex flex-wrap items-center gap-2 mt-4 text-sm text-white/90">
|
||
<span class="inline-flex items-center gap-1">
|
||
<UIcon
|
||
name="i-lucide-map-pin"
|
||
class="size-4"
|
||
/>
|
||
{{ company.city }}
|
||
</span>
|
||
<span class="text-white/50">·</span>
|
||
<span>成立于 {{ company.established }}</span>
|
||
<span class="text-white/50">·</span>
|
||
<span>{{ company.employees }}</span>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap gap-2 mt-4">
|
||
<span
|
||
v-for="route in company.routes"
|
||
:key="route"
|
||
class="inline-flex items-center rounded-full bg-white/15 text-white text-xs font-medium px-2.5 py-1"
|
||
>
|
||
{{ route }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2 shrink-0">
|
||
<UButton
|
||
:to="`/company/${company.slug}/contact`"
|
||
icon="i-lucide-message-circle"
|
||
label="在线咨询"
|
||
class="bg-white text-gray-900 hover:bg-white/90"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</UContainer>
|
||
</div>
|
||
</template>
|