20260831223203

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { Company } from '~/data/mock'
+
+const company = inject<Company>('company')!
+
+useSeoMeta({
+  title: `${company.name} - 服务 - 链通物流`,
+  description: `${company.name} 的主营服务：${company.services.join('、')}。`
+})
+</script>
+
+<template>
+  <UContainer class="max-w-6xl py-8">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div
+        v-for="service in company.servicesDetail"
+        :key="service.name"
+        class="rounded-lg bg-elevated ring ring-default p-6"
+      >
+        <div class="flex items-center justify-between mb-2">
+          <h3 class="font-semibold text-default">
+            {{ service.name }}
+          </h3>
+          <UBadge
+            color="primary"
+            variant="soft"
+            size="sm"
+          >
+            在营
+          </UBadge>
+        </div>
+        <p class="text-sm text-muted leading-relaxed">
+          {{ service.description }}
+        </p>
+      </div>
+    </div>
+
+    <!-- 覆盖航线 -->
+    <div class="rounded-lg bg-elevated ring ring-default p-6 mt-6">
+      <h2 class="font-semibold text-highlighted mb-4">
+        覆盖航线
+      </h2>
+      <div class="flex flex-wrap gap-2">
+        <UBadge
+          v-for="route in company.routes"
+          :key="route"
+          color="primary"
+          variant="soft"
+          size="lg"
+        >
+          {{ route }}
+        </UBadge>
+      </div>
+      <p class="text-sm text-muted mt-4">
+        需要该企业的航线报价或服务方案？
+        <NuxtLink
+          :to="`/company/${company.slug}/contact`"
+          class="text-primary hover:underline"
+        >
+          联系他们 →
+        </NuxtLink>
+      </p>
+    </div>
+  </UContainer>
+</template>