47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { Company } from '~/data/mock'
|
|
|
|
const props = defineProps<{
|
|
company: Company
|
|
title: string
|
|
}>()
|
|
|
|
// 传统企业官网的栏目 banner + 面包屑
|
|
const covers: Record<string, string> = {
|
|
blue: 'from-blue-700/90 via-blue-600/60 to-blue-400/30',
|
|
orange: 'from-orange-700/90 via-orange-600/60 to-orange-400/30',
|
|
violet: 'from-violet-700/90 via-violet-600/60 to-violet-400/30',
|
|
emerald: 'from-emerald-700/90 via-emerald-600/60 to-emerald-400/30',
|
|
sky: 'from-sky-700/90 via-sky-600/60 to-sky-400/30',
|
|
amber: 'from-amber-700/90 via-amber-600/60 to-amber-400/30'
|
|
}
|
|
const cover = computed(() => covers[props.company.color] ?? covers.blue)
|
|
|
|
const crumbs = computed(() => [
|
|
{ label: '链通物流', to: '/' },
|
|
{ label: props.company.name, to: `/company/${props.company.slug}` },
|
|
{ label: props.title }
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- 栏目 banner -->
|
|
<div
|
|
class="bg-gradient-to-r relative"
|
|
:class="cover"
|
|
>
|
|
<UContainer class="max-w-6xl py-10 sm:py-14">
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-white drop-shadow-sm">
|
|
{{ title }}
|
|
</h1>
|
|
</UContainer>
|
|
</div>
|
|
|
|
<!-- 面包屑 -->
|
|
<UContainer class="max-w-6xl pt-4">
|
|
<UBreadcrumb :items="crumbs" />
|
|
</UContainer>
|
|
</div>
|
|
</template>
|