workspace/code/link-site/link-nuxt/app/pages/company/[slug]/index.vue

<script setup lang="ts">
import type { Company } from '~/data/mock'
import { getCompanyArticles } from '~/data/mock'

const company = inject<Company>('company')!

const articles = getCompanyArticles(company.slug).slice(0, 4)

useSeoMeta({
  title: `${company.name} - ${company.slogan} - 链通物流`,
  description: company.description
})
</script>

<template>
  <div>
    <!-- 公司简介 -->
    <UContainer class="max-w-6xl pt-10 pb-14">
      <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-center">
        <div class="lg:col-span-3">
          <p class="text-primary font-semibold tracking-wider mb-2">关于我们 / ABOUT US</p>
          <h2 class="text-2xl font-bold text-highlighted mb-4">
            {{ company.name }}
          </h2>
          <p class="text-toned leading-relaxed mb-6">
            {{ company.about[0] }}
          </p>
          <div class="flex flex-wrap gap-8 text-sm">
            <div class="flex items-center gap-2 text-muted">
              <UIcon name="i-lucide-building-2" class="size-4 text-primary" />
              成立于 {{ company.established }} 年
            </div>
            <div class="flex items-center gap-2 text-muted">
              <UIcon name="i-lucide-users" class="size-4 text-primary" />
              {{ company.employees }}
            </div>
            <div class="flex items-center gap-2 text-muted">
              <UIcon name="i-lucide-map-pin" class="size-4 text-primary" />
              {{ company.city }}
            </div>
          </div>
          <UButton
            :to="`/company/${company.slug}/about`"
            label="了解更多"
            trailing-icon="i-lucide-arrow-right"
            variant="link"
            class="px-0 mt-2"
          />
        </div>

        <!-- 服务类型统计卡 -->
        <div class="lg:col-span-2 grid grid-cols-2 gap-4">
          <div
            v-for="service in company.services.slice(0, 4)"
            :key="service"
            class="rounded-lg bg-elevated ring ring-default p-5 text-center"
          >
            <p class="text-sm text-muted">{{ service }}</p>
            <p class="text-xs text-dimmed mt-1">主营服务</p>
          </div>
        </div>
      </div>
    </UContainer>

    <!-- 服务项目 -->
    <div class="bg-muted/40 py-14">
      <UContainer class="max-w-6xl">
        <div class="text-center mb-10">
          <p class="text-primary font-semibold tracking-wider mb-2">主营业务 / SERVICES</p>
          <h2 class="text-2xl font-bold text-highlighted">
            服务项目
          </h2>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <NuxtLink
            v-for="service in company.servicesDetail"
            :key="service.name"
            :to="`/company/${company.slug}/services`"
            class="group rounded-lg bg-elevated ring ring-default hover:ring-primary/50 p-6 transition-colors"
          >
            <div class="flex items-center justify-center size-11 rounded-lg bg-primary/10 mb-4">
              <UIcon :name="company.strengths[0]?.icon ?? 'i-lucide-package'" class="size-5 text-primary" />
            </div>
            <h3 class="font-semibold text-default mb-2 group-hover:text-primary transition-colors">
              {{ service.name }}
            </h3>
            <p class="text-sm text-muted line-clamp-3 leading-relaxed">
              {{ service.description }}
            </p>
          </NuxtLink>
        </div>
      </UContainer>
    </div>

    <!-- 核心优势 -->
    <UContainer class="max-w-6xl py-14">
      <div class="text-center mb-10">
        <p class="text-primary font-semibold tracking-wider mb-2">为什么选择我们 / WHY US</p>
        <h2 class="text-2xl font-bold text-highlighted">
          核心优势
        </h2>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div
          v-for="strength in company.strengths"
          :key="strength.title"
          class="text-center"
        >
          <div class="flex items-center justify-center size-14 rounded-full bg-primary/10 mx-auto mb-4">
            <UIcon :name="strength.icon" class="size-6 text-primary" />
          </div>
          <h3 class="font-semibold text-default mb-2">
            {{ strength.title }}
          </h3>
          <p class="text-sm text-muted leading-relaxed">
            {{ strength.description }}
          </p>
        </div>
      </div>
    </UContainer>

    <!-- 新闻资讯 -->
    <div class="bg-muted/40 py-14">
      <UContainer class="max-w-6xl">
        <div class="flex items-center justify-between mb-8">
          <div>
            <p class="text-primary font-semibold tracking-wider mb-2">公司动态 / NEWS</p>
            <h2 class="text-2xl font-bold text-highlighted">
              新闻资讯
            </h2>
          </div>
          <UButton
            :to="`/company/${company.slug}/articles`"
            label="更多文章"
            trailing-icon="i-lucide-arrow-right"
            color="neutral"
            variant="outline"
            size="sm"
          />
        </div>

        <div v-if="articles.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <ArticleCard
            v-for="article in articles"
            :key="article.id"
            :article="article"
          />
        </div>
        <p v-else class="text-muted text-center py-8">
          暂无新闻动态
        </p>
      </UContainer>
    </div>
  </div>
</template>