nuxt初始化

nuxt-web/pages/cases/index.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { caseCategories } from '~/data/case-categories'
+import ProductCard from '~/components/ProductCard.vue'
+
+const selectedCategory = ref('all')
+
+const legacyOrder = [
+  'tangshan-ore-terminal',
+  'zhongshan-port-service',
+  'qinhuangdao-cargo-system',
+  'zhongshan-container-terminal',
+  'shanghai-hanghua-ship-agent',
+  'fangchenggang-railway-container',
+  'shanggang-liandai-booking',
+  'weihai-gate-yard',
+  'anhui-port-hefei',
+  'smart-wuzhou-port',
+  'zhongshan-xiaolan-remote',
+  'yulong-terminal-system',
+  'guangzhou-port-authority',
+  'hengtong-logistics',
+  'guangzhou-anzhida-logistics',
+  'rizhao-hongyuan-logistics',
+  'qiaoyi-logistics',
+  'mobile-machinery-dispatch',
+  'zhujiang-shipping',
+  'hainan-strait-shipping',
+  'hede-international-shipping',
+  'shanghai-haihua-shipping',
+  'jinjiang-shipping-ecommerce',
+  'jiahua-shipping-system',
+  'tianjin-zhongyun-shipping',
+  'lianyungang-china-korea-ferry',
+  'hede-global-supply-chain',
+  'yantai-hanitek-container',
+  'tangshan-haitong-shipping',
+  'huanghua-vehicle-analysis',
+  'beibuwan-shuttle-bus',
+  'rizhao-huahai-shipping',
+  'shanggang-liandai-integration',
+  'shanghai-port-coastal-system',
+  'tangshan-bigdata-platform',
+  'shanghai-hanghua-cloud',
+  'shanghai-penghua-platform',
+  'shanghai-xinhai-freight',
+  'canal-logistics-supervision'
+] as const
+
+const legacyOrderMap = new Map(legacyOrder.map((slug, index) => [slug, index]))
+
+const { data: cases } = await useAsyncData('cases-list', () => {
+  return queryCollection('cases')
+    .all()
+})
+
+useSeo({
+  title: '客户案例',
+  description: '查看岸基科技服务的港口、航运、物流与供应链客户案例。',
+  keywords: '岸基科技,客户案例,港口案例,航运案例,物流案例',
+  canonicalPath: '/cases'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '客户案例' }
+]
+
+const filteredCases = computed(() => {
+  if (!cases.value) {
+    return []
+  }
+
+  const ordered = [...cases.value].sort((a, b) => {
+    const orderA = legacyOrderMap.get(a.slug) ?? Number.MAX_SAFE_INTEGER
+    const orderB = legacyOrderMap.get(b.slug) ?? Number.MAX_SAFE_INTEGER
+    return orderA - orderB
+  })
+
+  if (selectedCategory.value === 'all') {
+    return ordered
+  }
+
+  return ordered.filter((item) => item.categories?.includes(selectedCategory.value))
+})
+</script>
+
+<template>
+  <div>
+    <section class="page-title page-title3">
+      <div class="container">
+        <div class="row">
+          <div class="col col-xs-12">
+            <h2>创新引领未来，合作成就卓越</h2>
+            <p>以客户为中心，以响应为使命，以价值为承诺</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="service-tab-nav-fullwidth">
+      <div class="service-tab-nav">
+        <div class="widget service-list-widget">
+          <ul>
+            <li
+              v-for="category in caseCategories"
+              :key="category.id"
+              :class="{ current: selectedCategory === category.id }"
+            >
+              <a href="#" @click.prevent="selectedCategory = category.id">{{ category.label }}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <section class="services-section section-padding" style="background-color: #fff;">
+      <div class="container">
+        <div class="product-cards" id="caseCards">
+          <ProductCard
+            v-for="item in filteredCases"
+            :key="item.id"
+            :title="item.title"
+            :description="item.summary"
+            :image="item.cover"
+            :to="item.path"
+          />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>