20260831223203

code/link-site/link-nuxt/app/components/CompanyPageBanner.vue

@@ -0,0 +1,46 @@
+<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>