20260831223203

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { Company } from '~/data/mock'
+
+defineProps<{
+  company: Company
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    :to="`/company/${company.slug}`"
+    class="group flex flex-col gap-4 rounded-lg bg-elevated ring ring-default hover:ring-primary/50 p-5 transition-colors"
+  >
+    <div class="flex items-start gap-3">
+      <CompanyLogo
+        :name="company.name"
+        :color="company.color"
+      />
+
+      <div class="min-w-0 flex-1">
+        <div class="flex items-center gap-1.5">
+          <h3 class="font-semibold text-default truncate group-hover:text-primary transition-colors">
+            {{ company.name }}
+          </h3>
+          <UBadge
+            v-if="company.verified"
+            icon="i-lucide-badge-check"
+            color="primary"
+            variant="soft"
+            size="sm"
+            title="平台认证企业"
+          />
+        </div>
+        <p class="text-sm text-muted truncate">{{ company.slogan }} · {{ company.city }}</p>
+      </div>
+    </div>
+
+    <p class="text-sm text-toned line-clamp-2">{{ company.description }}</p>
+
+    <div class="flex flex-wrap gap-1.5">
+      <UBadge
+        v-for="route in company.routes"
+        :key="route"
+        color="primary"
+        variant="soft"
+        size="sm"
+      >
+        {{ route }}
+      </UBadge>
+      <UBadge
+        v-for="service in company.services.slice(0, 3)"
+        :key="service"
+        color="neutral"
+        variant="soft"
+        size="sm"
+      >
+        {{ service }}
+      </UBadge>
+    </div>
+
+    <div class="flex items-center justify-between text-xs text-dimmed pt-1 border-t border-muted">
+      <span>成立于 {{ company.established }} 年 · {{ company.employees }}</span>
+      <span class="flex items-center gap-1 text-primary">
+        查看主页
+        <UIcon
+          name="i-lucide-arrow-right"
+          class="size-3.5 group-hover:translate-x-0.5 transition-transform"
+        />
+      </span>
+    </div>
+  </NuxtLink>
+</template>