20260831223203

2026-08-31 22:32:03 +08:00
1 parent 4d46ce6c53
commit 3bbcafc5be
@@ -0,0 +1,93 @@
+<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>