73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<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>
|