133 lines
3.6 KiB
Vue
133 lines
3.6 KiB
Vue
<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>
|