nuxt初始化

nuxt-web/pages/cases/[slug].vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const route = useRoute()
+const casePath = `/cases/${route.params.slug}`
+
+const { data: caseDoc } = await useAsyncData(`case-${route.params.slug}`, () => {
+  return queryCollection('cases').path(casePath).first()
+})
+
+if (!caseDoc.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: `Case not found: ${route.params.slug}`
+  })
+}
+
+useSeo({
+  title: caseDoc.value.title,
+  description: caseDoc.value.description,
+  keywords: caseDoc.value.keywords,
+  ogImage: caseDoc.value.cover,
+  canonicalPath: casePath
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '客户案例', to: '/cases' },
+  { label: caseDoc.value.title }
+]
+
+const relatedProducts = (caseDoc.value.relatedProducts || []).map((item) => ({
+  to: item,
+  label: item
+}))
+</script>
+
+<template>
+  <ProductDetailLayout
+    :title="caseDoc!.title"
+    :description="caseDoc!.summary"
+    :banner-image="caseDoc!.cover"
+    :breadcrumb-items="breadcrumbItems"
+    :related-products="relatedProducts"
+  >
+    <ContentRenderer :value="caseDoc" />
+  </ProductDetailLayout>
+</template>

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>

nuxt-web/pages/company/culture.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { cultureGallery } from '~/data/company'
+
+useSeo({
+  title: '团队建设',
+  description: '了解岸基科技的团队建设活动、旅行、运动和节日文化。',
+  keywords: '岸基科技,团队建设,企业文化,团建活动',
+  canonicalPath: '/company/culture'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '团队建设' }
+]
+
+const selectedCategory = ref('all')
+const categories = [
+  { id: 'all', label: '全部' },
+  { id: 'travel', label: '旅行' },
+  { id: 'party', label: '聚会' },
+  { id: 'sport', label: '运动' },
+  { id: 'holiday', label: '节日' }
+]
+
+const filteredItems = computed(() => {
+  if (selectedCategory.value === 'all') {
+    return cultureGallery
+  }
+  return cultureGallery.filter((item) => item.category === selectedCategory.value)
+})
+
+useFancybox('[data-fancybox="culture-gallery"]')
+</script>
+
+<template>
+  <div>
+    <SectionBanner
+      title="有温度的团队"
+      description="不止有代码和方案，还有球场、烧烤与山海。"
+      background-image="/images/page-title5.png"
+    />
+    <Breadcrumb :items="breadcrumbItems" />
+    <CompanySectionNav />
+
+    <main class="culture-page">
+      <div class="filter-row">
+        <button
+          v-for="category in categories"
+          :key="category.id"
+          type="button"
+          :class="['filter-chip', { active: selectedCategory === category.id }]"
+          @click="selectedCategory = category.id"
+        >
+          {{ category.label }}
+        </button>
+      </div>
+
+      <div class="culture-grid">
+        <a
+          v-for="item in filteredItems"
+          :key="`${item.title}-${item.image}`"
+          :href="item.image"
+          data-fancybox="culture-gallery"
+          class="culture-card"
+        >
+          <img :src="item.image" :alt="item.title">
+          <div class="culture-card__body">
+            <h2>{{ item.title }}</h2>
+            <p>{{ item.meta }}</p>
+          </div>
+        </a>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.culture-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+}
+
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 24px;
+}
+
+.filter-chip {
+  border: 1px solid #c6d6e7;
+  background: #fff;
+  border-radius: 999px;
+  padding: 8px 14px;
+}
+
+.filter-chip.active {
+  background: #102541;
+  color: #fff;
+}
+
+.culture-grid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.culture-card {
+  overflow: hidden;
+  border-radius: 18px;
+  background: #fff;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+  color: inherit;
+}
+
+.culture-card img {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  display: block;
+}
+
+.culture-card__body {
+  padding: 16px;
+}
+</style>

nuxt-web/pages/company/index.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { companyTimeline } from '~/data/company'
+
+useSeo({
+  title: '公司发展进程',
+  description: '查看岸基科技从成立到持续创新发展的关键里程碑与业务成长轨迹。',
+  keywords: '岸基科技,公司发展,发展进程,里程碑',
+  canonicalPath: '/company'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '公司发展进程' }
+]
+
+const timelineItems = computed(() => companyTimeline.map((item, index) => {
+  const [year, month = ''] = item.date.split('.')
+  return {
+    ...item,
+    year,
+    month,
+    side: index % 2 === 0 ? 'right' : 'left'
+  }
+}))
+</script>
+
+<template>
+  <div>
+    <SectionBanner
+      title="创新成就梦想"
+      description="通过核心软件产品推动港航业的发展与变革，为企业创造赢利点，提升中国物流运行效率。"
+      background-image="/images/page-title6.png.webp"
+    />
+    <Breadcrumb :items="breadcrumbItems" />
+    <CompanySectionNav />
+
+    <main class="company-page">
+      <section class="timeline-card">
+        <div class="timeline-card__header">
+          <h2>公司发展进程</h2>
+          <p>Progress</p>
+        </div>
+
+        <div class="history-timeline">
+          <div class="history-center-line" />
+          <article
+            v-for="item in timelineItems"
+            :key="`${item.date}-${item.title}`"
+            :class="['history-entry', item.side === 'left' ? 'history-entry-left' : 'history-entry-right', { 'history-entry-highlight': item.highlight }]"
+          >
+            <div :class="item.side === 'left' ? 'history_L' : 'history_R'">
+              <span :class="item.side === 'left' ? 'history_2006_span' : 'history_2005_span'">
+                {{ item.year }}
+                <i>{{ item.month ? `${item.month}月` : '' }}</i>
+              </span>
+              <b :class="[item.side === 'left' ? 'history_2006_b' : 'history_2005_b', { blue: item.highlight, blue_R: item.highlight && item.side === 'right' }]">
+                <span :class="item.side === 'left' ? 'history_l_text' : 'history_r_text'">{{ item.title }}<br>{{ item.summary }}</span>
+              </b>
+            </div>
+          </article>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.company-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+}
+
+.timeline-card {
+  background: #fff;
+  border-radius: 24px;
+  box-shadow: 0 16px 40px rgba(16, 37, 65, 0.08);
+  padding: 32px 28px;
+  overflow: hidden;
+}
+
+.timeline-card__header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.timeline-card__header h2 {
+  margin: 0;
+  font-size: clamp(30px, 4vw, 48px);
+  line-height: 1.1;
+  color: #102541;
+}
+
+.timeline-card__header p {
+  margin: 10px 0 0;
+  font-size: 18px;
+  color: #7f8da3;
+}
+
+.history-timeline {
+  position: relative;
+  display: grid;
+  gap: 12px;
+  padding: 16px 0;
+}
+
+.history-center-line {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  transform: translateX(-50%);
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(20, 129, 255, 0.18), rgba(20, 129, 255, 0.9), rgba(20, 129, 255, 0.18));
+}
+
+.history-entry {
+  position: relative;
+  width: 50%;
+}
+
+.history-entry-left {
+  justify-self: start;
+  padding-right: 48px;
+}
+
+.history-entry-right {
+  justify-self: end;
+  padding-left: 48px;
+}
+
+.history-entry::before {
+  content: '';
+  position: absolute;
+  top: 28px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #1481ff;
+  box-shadow: 0 0 0 6px rgba(20, 129, 255, 0.14);
+}
+
+.history-entry-left::before {
+  right: -9px;
+}
+
+.history-entry-right::before {
+  left: -9px;
+}
+
+.history_L,
+.history_R {
+  margin: 0;
+  height: auto;
+}
+
+.history_2005_span,
+.history_2006_span {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 18px;
+  color: #0169d7;
+  font-weight: 700;
+}
+
+.history_2005_span i,
+.history_2006_span i {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.history_2005_b,
+.history_2006_b {
+  display: block;
+  width: calc(100% - 110px);
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #0070d2, #1481ff);
+}
+
+.history_2005_b {
+  margin-left: 15px;
+  float: left;
+}
+
+.history_2006_b {
+  margin-right: 15px;
+  float: right;
+}
+
+.history-entry-highlight .history_2005_b,
+.history-entry-highlight .history_2006_b {
+  background: linear-gradient(135deg, #005dc0, #0169d7);
+}
+
+.history_r_text,
+.history_l_text {
+  display: block;
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.75;
+}
+
+.history_r_text,
+.history_l_text {
+  text-align: left;
+}
+
+@media (max-width: 991px) {
+  .timeline-card {
+    padding: 24px 18px;
+  }
+
+  .history-timeline {
+    padding-left: 28px;
+  }
+
+  .history-center-line {
+    left: 9px;
+    transform: none;
+  }
+
+  .history-entry,
+  .history-entry-left,
+  .history-entry-right {
+    width: 100%;
+    justify-self: stretch;
+    padding: 0 0 0 32px;
+  }
+
+  .history-entry::before,
+  .history-entry-left::before,
+  .history-entry-right::before {
+    left: 0;
+    right: auto;
+  }
+}
+
+@media (max-width: 767px) {
+  .history_2005_span,
+  .history_2006_span,
+  .history_2005_b,
+  .history_2006_b {
+    float: none;
+    width: 100%;
+    margin: 0 0 12px;
+  }
+}
+</style>

nuxt-web/pages/company/joinus.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { jobOpenings } from '~/data/company'
+
+useSeo({
+  title: '人才招聘',
+  description: '查看岸基科技当前开放岗位与招聘方向，了解我们正在寻找的团队伙伴。',
+  keywords: '岸基科技,人才招聘,技术岗位,项目经理,开发工程师',
+  canonicalPath: '/company/joinus'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '人才招聘' }
+]
+</script>
+
+<template>
+  <div>
+    <SectionBanner
+      title="我们正在寻找"
+      description="有梦想、有实力、有担当的你。"
+      background-image="/images/page-title4.webp"
+    />
+    <Breadcrumb :items="breadcrumbItems" />
+    <CompanySectionNav />
+
+    <main class="joinus-page">
+      <section class="jobs-grid">
+        <article v-for="job in jobOpenings" :key="job.title" class="job-card">
+          <div class="job-header">
+            <img :src="job.image" :alt="job.title">
+            <div>
+              <h2>{{ job.title }}</h2>
+              <p>{{ job.count }}</p>
+            </div>
+          </div>
+
+          <div class="job-section">
+            <h3>岗位职责</h3>
+            <ul>
+              <li v-for="item in job.responsibilities" :key="item">{{ item }}</li>
+            </ul>
+          </div>
+
+          <div class="job-section">
+            <h3>任职资格</h3>
+            <ul>
+              <li v-for="item in job.qualifications" :key="item">{{ item }}</li>
+            </ul>
+          </div>
+        </article>
+      </section>
+
+      <section class="cta-card">
+        <h2>我们招人了，你勇敢投简历了吗？</h2>
+        <p>绩效、效益奖金、七险一金、周末双休、午餐住宿、生日礼物、节日福利、旅游团建与培训晋升，我们希望你来一起把事情做成。</p>
+        <a href="mailto:agsoft@china-coast.com" class="cta-link">发送简历到 agsoft@china-coast.com</a>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.joinus-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+  display: grid;
+  gap: 24px;
+}
+
+.jobs-grid {
+  display: grid;
+  gap: 24px;
+}
+
+.job-card,
+.cta-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+  padding: 24px;
+}
+
+.job-header {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.job-header img {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.job-section ul {
+  padding-left: 18px;
+}
+
+.cta-link {
+  display: inline-block;
+  margin-top: 12px;
+  font-weight: 700;
+}
+</style>

nuxt-web/pages/company/tech.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+useSeo({
+  title: '公司技术升级',
+  description: '了解岸基科技如何围绕物联网、大数据与 AI 持续推进港航物流数字化技术升级。',
+  keywords: '岸基科技,技术升级,物联网,大数据,AI,港航数字化',
+  canonicalPath: '/company/tech'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '公司技术升级' }
+]
+
+const techCards = [
+  {
+    title: '面向港航业务的产品化能力',
+    description: '以行业经验沉淀产品能力，持续打磨云码头、物流链、航运电商等核心软件产品。'
+  },
+  {
+    title: '数据驱动的业务协同',
+    description: '围绕订单、作业、结算、监管等全链路数据，构建跨角色的协同底座。'
+  },
+  {
+    title: 'AI 与自动化持续融合',
+    description: '在流程自动化、智能决策、可视化分析等方向持续推进更高水平的数字化能力。'
+  }
+]
+</script>
+
+<template>
+  <div>
+    <SectionBanner
+      title="技术升级"
+      description="让港航物流业务从信息化走向智能化。"
+      background-image="/images/page-title6.png.webp"
+    />
+    <Breadcrumb :items="breadcrumbItems" />
+    <CompanySectionNav />
+
+    <main class="tech-page">
+      <section class="tech-hero">
+        <div>
+          <h2>持续升级的技术底座</h2>
+          <p>岸基科技围绕港航企业的真实业务场景持续投入研发，逐步把传统的信息系统建设升级为更开放、更智能、更可复用的产品平台，为客户的长期数字化演进打下基础。</p>
+        </div>
+        <img src="/images/zhishichanquan.webp" alt="技术升级">
+      </section>
+
+      <section class="tech-grid">
+        <article v-for="card in techCards" :key="card.title" class="tech-card">
+          <h3>{{ card.title }}</h3>
+          <p>{{ card.description }}</p>
+        </article>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.tech-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+  display: grid;
+  gap: 24px;
+}
+
+.tech-hero {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: minmax(0, 1fr) 420px;
+  align-items: center;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+  padding: 24px;
+}
+
+.tech-hero img {
+  width: 100%;
+  border-radius: 16px;
+}
+
+.tech-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.tech-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+  padding: 24px;
+}
+
+@media (max-width: 991px) {
+  .tech-hero {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

nuxt-web/pages/contact.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { companyStats, companyTimeline } from '~/data/company'
+import { siteInfo } from '~/data/site'
+
+useSeo({
+  title: '关于岸基',
+  description: '了解岸基科技的业务方向、行业积累、发展历程与联系方式。',
+  keywords: '岸基科技,关于我们,发展历程,联系方式',
+  canonicalPath: '/contact'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '关于岸基' }
+]
+</script>
+
+<template>
+  <div>
+    <SectionBanner
+      title="做有温度的数字化"
+      description="成为领先的智慧港航生态服务商。"
+      background-image="/images/page-title1.webp"
+    />
+    <Breadcrumb :items="breadcrumbItems" />
+    <CompanySectionNav />
+
+    <main class="contact-page">
+      <section class="intro-card">
+        <h2>关于我们</h2>
+        <p>岸基网络科技有限公司作为深耕产业互联网的科技型服务企业，自成立以来持续围绕港航物流供应链信息化与数字化升级进行自主研发，先后获得“国家高新技术企业”“国家科技型创新企业”“山东省瞪羚企业”等多项资质认证，并服务了大量头部港航企业。</p>
+        <p>依托物联网、大数据与 AI 等前沿技术，公司研发了覆盖港航业务全场景的核心软件产品，面向船公司、港口、货代、货主与政府部门等多类主体提供平台建设、项目实施、数据平台搭建与信息化咨询服务。</p>
+        <img src="/images/rongyu.webp" alt="岸基科技荣誉" class="intro-image">
+      </section>
+
+      <section class="stats-grid">
+        <article v-for="item in companyStats" :key="item.label" class="stats-card">
+          <h3>{{ item.value }}</h3>
+          <p>{{ item.label }}</p>
+        </article>
+      </section>
+
+      <section class="timeline-card">
+        <h2>发展历程</h2>
+        <Timeline :items="companyTimeline" />
+      </section>
+
+      <section class="contact-grid">
+        <article class="contact-card">
+          <h3>联系邮箱</h3>
+          <p>{{ siteInfo.email }}</p>
+        </article>
+        <article class="contact-card">
+          <h3>联系电话</h3>
+          <p>{{ siteInfo.phone }}</p>
+        </article>
+        <article class="contact-card">
+          <h3>公司地址</h3>
+          <p>{{ siteInfo.address }}</p>
+        </article>
+      </section>
+
+      <section class="contact-card cta-card">
+        <h2>联系我们</h2>
+        <p>如果你希望进一步了解岸基科技的产品、解决方案或合作方式，我们很愿意和你继续交流。</p>
+        <a :href="`mailto:${siteInfo.email}`" class="cta-link">发送邮件到 {{ siteInfo.email }}</a>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.contact-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+  display: grid;
+  gap: 24px;
+}
+
+.intro-card,
+.timeline-card,
+.contact-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+  padding: 24px;
+}
+
+.intro-image {
+  margin-top: 20px;
+  width: 100%;
+  border-radius: 16px;
+}
+
+.stats-grid,
+.contact-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.stats-card {
+  background: linear-gradient(135deg, #11345c, #1e5fa1);
+  color: #fff;
+  border-radius: 18px;
+  padding: 24px;
+}
+
+.stats-card h3,
+.stats-card p {
+  color: inherit;
+}
+
+.cta-link {
+  display: inline-block;
+  margin-top: 12px;
+  font-weight: 700;
+}
+</style>

nuxt-web/pages/index.vue

@@ -0,0 +1,433 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import {
+  homeHeroSlides,
+  homeIndustryStats,
+  homePartnerRows,
+  homeProductFamilies,
+  homeServiceDomains,
+  homeSolutions
+} from '~/data/home'
+import { siteInfo } from '~/data/site'
+
+useSeo({
+  title: '烟台岸基网络科技有限公司',
+  description: '烟台岸基网络科技有限公司深耕港航物流供应链数字化，提供航运电商、云码头、全程物流链与智慧供应链解决方案。',
+  keywords: '岸基网络,烟台岸基科技,智慧物流,航运电商,云码头,港口供应链,物流数字化',
+  canonicalPath: '/'
+})
+
+const heroRef = ref<HTMLElement | null>(null)
+let heroSwiper: { destroy: (deleteInstance?: boolean, cleanStyles?: boolean) => void } | null = null
+const heroInterleaveOffset = 0.5
+
+type HeroSlideElement = HTMLElement & { progress?: number }
+
+const updateHeroInterleave = (swiper: { slides: ArrayLike<HeroSlideElement>; width: number }) => {
+  for (let index = 0; index < swiper.slides.length; index += 1) {
+    const slide = swiper.slides[index]
+    const slideInner = slide.querySelector<HTMLElement>('.slide-inner')
+
+    if (!slideInner) {
+      continue
+    }
+
+    const slideProgress = slide.progress ?? 0
+    const innerOffset = swiper.width * heroInterleaveOffset
+    const innerTranslate = slideProgress * innerOffset
+
+    slideInner.style.transform = `translate3d(${innerTranslate}px, 0, 0)`
+  }
+}
+
+const resetHeroTransitions = (swiper: { slides: ArrayLike<HeroSlideElement> }) => {
+  for (let index = 0; index < swiper.slides.length; index += 1) {
+    swiper.slides[index].style.transition = ''
+  }
+}
+
+const setHeroTransitions = (swiper: { slides: ArrayLike<HeroSlideElement> }, speed: number) => {
+  for (let index = 0; index < swiper.slides.length; index += 1) {
+    const slide = swiper.slides[index]
+    const slideInner = slide.querySelector<HTMLElement>('.slide-inner')
+
+    slide.style.transition = `${speed}ms`
+
+    if (slideInner) {
+      slideInner.style.transition = `${speed}ms`
+    }
+  }
+}
+
+onMounted(async () => {
+  if (!heroRef.value) {
+    return
+  }
+
+  const { default: Swiper } = await import('swiper/bundle')
+  heroSwiper = new Swiper(heroRef.value, {
+    loop: true,
+    speed: 1000,
+    parallax: true,
+    watchSlidesProgress: true,
+    autoplay: {
+      delay: 6500,
+      disableOnInteraction: false
+    },
+    pagination: {
+      el: '.home-hero-pagination',
+      clickable: true
+    },
+    navigation: {
+      nextEl: '.home-hero-next',
+      prevEl: '.home-hero-prev'
+    },
+    on: {
+      init(this: { slides: ArrayLike<HeroSlideElement>; width: number }) {
+        updateHeroInterleave(this)
+      },
+      progress(this: { slides: ArrayLike<HeroSlideElement>; width: number }) {
+        updateHeroInterleave(this)
+      },
+      touchStart(this: { slides: ArrayLike<HeroSlideElement> }) {
+        resetHeroTransitions(this)
+      },
+      setTransition(this: { slides: ArrayLike<HeroSlideElement> }, speed: number) {
+        setHeroTransitions(this, speed)
+      }
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  heroSwiper?.destroy(true, true)
+})
+</script>
+
+<template>
+  <div>
+    <section class="hero-slider hero-style-1">
+      <div ref="heroRef" class="swiper-container home-hero-swiper">
+        <div class="swiper-wrapper">
+          <div v-for="slide in homeHeroSlides" :key="slide.title" class="swiper-slide">
+            <div class="slide-inner slide-bg-image" :style="{ backgroundImage: `url(${slide.image})` }">
+              <div class="container">
+                <div class="slide-title" data-swiper-parallax="300">
+                  <h2>{{ slide.title }}</h2>
+                </div>
+                <div class="slide-text" data-swiper-parallax="400">
+                  <p>{{ slide.description }}</p>
+                </div>
+                <div class="clearfix" />
+                <div class="slide-btns" data-swiper-parallax="500">
+                  <NuxtLink :to="slide.to" class="theme-btn-s2">了解更多</NuxtLink>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="swiper-pagination home-hero-pagination" />
+        <div class="swiper-button-next home-hero-next" />
+        <div class="swiper-button-prev home-hero-prev" />
+      </div>
+    </section>
+
+    <section class="features-section">
+      <div class="container">
+        <div class="row">
+          <div class="col col-xs-12">
+            <div class="feature-grids">
+              <div v-for="item in homeProductFamilies" :key="item.title" class="grid home-family-card">
+                <div class="header">
+                  <span class="home-feature-icon" aria-hidden="true">
+                    <svg v-if="item.iconKey === 'commerce'" viewBox="0 0 48 48" fill="none">
+                      <path d="M10 12h4l3 18h19l4-13H16" />
+                      <circle cx="20" cy="37" r="2.5" />
+                      <circle cx="34" cy="37" r="2.5" />
+                      <path d="M19 18h17" />
+                      <path d="M22 12V7" />
+                      <path d="M30 12V7" />
+                    </svg>
+                    <svg v-else-if="item.iconKey === 'logistics'" viewBox="0 0 48 48" fill="none">
+                      <path d="M7 15h22v14H7z" />
+                      <path d="M29 20h6l6 6v3h-12z" />
+                      <circle cx="16" cy="35" r="3" />
+                      <circle cx="35" cy="35" r="3" />
+                      <path d="M29 35h3" />
+                      <path d="M12 20h11" />
+                    </svg>
+                    <svg v-else-if="item.iconKey === 'port'" viewBox="0 0 48 48" fill="none">
+                      <path d="M11 36h26" />
+                      <path d="M16 36V13h9v23" />
+                      <path d="M25 16h9v20" />
+                      <path d="M20.5 13V9" />
+                      <path d="M12 18h9" />
+                      <path d="M28 20h6" />
+                      <path d="M14 28h7" />
+                      <path d="M28 28h6" />
+                    </svg>
+                    <svg v-else viewBox="0 0 48 48" fill="none">
+                      <path d="M24 8v21" />
+                      <path d="M17 18c0 4.2 3.1 7 7 7s7-2.8 7-7" />
+                      <path d="M13 34c3-1 6.5-2 11-2s8 1 11 2" />
+                      <path d="M18 39h12" />
+                      <path d="M24 29v10" />
+                    </svg>
+                  </span>
+                </div>
+                <div class="details">
+                  <h3>{{ item.title }}</h3>
+                  <p>{{ item.description }}</p>
+                  <NuxtLink :to="item.to" class="read-more">了解更多</NuxtLink>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="home-panorama-section section-padding">
+      <div class="portfolio-container home-panorama-stage">
+        <img src="/images/index/bk.webp" alt="港航供应链核心能力全景背景" class="home-panorama-background">
+        <div class="home-panorama-overlay">
+          <div class="container">
+            <div class="row">
+              <div class="col col-lg-6 col-lg-offset-3">
+                <div class="section-title-s4">
+                  <span>港航供应链核心能力全景</span>
+                  <h2>全栈服务生态，重构供应链新格局</h2>
+                </div>
+              </div>
+            </div>
+          </div>
+          <img src="/images/index/top.png" alt="全栈服务生态图" class="home-panorama-image">
+        </div>
+      </div>
+    </section>
+
+    <section class="portfolio-section section-padding">
+      <div class="container">
+        <div class="row">
+          <div class="col col-lg-6 col-lg-offset-3">
+            <div class="section-title-s4">
+              <span>按业务链路快速匹配对应方案</span>
+              <h2>全域方案 智航港航</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="portfolio-container">
+        <div class="portfolio-grids home-solution-grid">
+          <NuxtLink v-for="item in homeSolutions" :key="item.title" :to="item.to" class="grid">
+            <div class="img-holder">
+              <img :src="item.image" :alt="item.title">
+            </div>
+            <div class="details">
+              <p class="portfolio-meta">{{ item.meta }}</p>
+              <h3>{{ item.title }}</h3>
+              <p class="portfolio-desc">{{ item.description }}</p>
+              <span class="portfolio-link">查看方案</span>
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
+    </section>
+
+    <section class="services-section section-padding">
+      <div class="container">
+        <div class="row">
+          <div class="col col-md-5">
+            <div class="section-title-s2">
+              <span>我们的服务领域</span>
+              <h2>打通港航全链核心场景</h2>
+            </div>
+          </div>
+          <div class="col col-md-6 col-md-offset-1">
+            <div class="section-title-text">
+              <p>公司专注服务国内外物流实体、中介机构、金融企业、货主及监管部门，提供航运电商、物流实施、大数据平台、信息化咨询等全栈式综合信息服务，实现港航物流全领域、全主体、全链条覆盖。</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col col-xs-12">
+            <div class="service-grids clearfix">
+              <div v-for="item in homeServiceDomains" :key="item.title" class="grid">
+                <div class="icon">
+                  <i :class="['fi', item.iconClass]" />
+                </div>
+                <h3>{{ item.title }}</h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="about-section section-padding">
+      <div class="container">
+        <div class="row">
+          <div class="col col-md-7">
+            <div class="home-map-card">
+              <img src="/images/map.png" alt="岸基科技业务覆盖示意图">
+            </div>
+          </div>
+          <div class="col col-md-5">
+            <div class="details home-value-copy">
+              <div class="section-title">
+                <span>我们的行业价值</span>
+                <h2>广覆港航全链，稳居市场前列</h2>
+              </div>
+              <p>依托长达20年的行业信息化经验，我们以科技驱动航运物流供应链的创新与升级。目前，由我们提供服务的客户，其业务总量已占据全国水运货量的五分之一。</p>
+              <div class="contact-info">
+                <div>
+                  <h4>航运货物总量占比</h4>
+                  <p class="home-share-stat"><span class="home-share-number">20</span>%</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="fun-fact-section section-padding pt0">
+      <div class="container">
+        <div class="row">
+          <div class="col col-xs-12">
+            <h2>数智驱动港航业务 全景洞察运营态势</h2>
+            <div class="fun-fact-grids clearfix">
+              <div v-for="item in homeIndustryStats" :key="item.label" class="grid home-stat-grid">
+                <div class="home-stat-info">
+                  <h3 class="home-stat-heading">
+                    <span class="home-stat-value">{{ item.value.replace('+', '') }}</span>+
+                  </h3>
+                  <p class="home-stat-label">{{ item.label }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="partners-section">
+      <div class="container">
+        <div class="row">
+          <div class="col col-lg-6 col-lg-offset-3">
+            <div class="section-title-s3 home-partners-title">
+              <span>我们的合作伙伴</span>
+              <h2>聚港航精锐，启智慧新程</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="partners-marquee-wrap">
+        <div v-for="(row, rowIndex) in homePartnerRows" :key="rowIndex" class="row">
+          <div class="col col-xs-12">
+            <div class="partner-marquee">
+              <div class="partner-track">
+                <div class="partner-track-set">
+                  <div v-for="logo in row" :key="`${rowIndex}-${logo}`" class="grid">
+                    <img :src="logo" alt="合作伙伴标识" loading="lazy">
+                  </div>
+                </div>
+                <div class="partner-track-set" aria-hidden="true">
+                  <div v-for="logo in row" :key="`${rowIndex}-${logo}-duplicate`" class="grid">
+                    <img :src="logo" alt="合作伙伴标识" loading="lazy">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="separator" />
+      </div>
+    </section>
+
+    <section class="cta-section-s2">
+      <div class="container">
+        <div class="row">
+          <div class="col col-lg-8 col-sm-8">
+            <div class="text">
+              <h2>岸基科技，港航企业值得信赖的长期伙伴。</h2>
+              <p class="home-cta-copy">我们专注打造高效能“互联网 + 航运”生态平台，坚持以客户为中心，敏捷响应需求，驱动管理效能持续升级，为客户创造长期持久价值。</p>
+            </div>
+          </div>
+          <div class="col col-lg-3 col-sm-4">
+            <div class="contact-info">
+              <div class="icon">
+                <i class="fi ti-face-smile" />
+              </div>
+              <h5>{{ siteInfo.phone }}</h5>
+              <NuxtLink to="/contact" class="theme-btn-s3">联系我们</NuxtLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.fun-fact-section .home-stat-grid {
+  width: 20%;
+  float: left;
+}
+
+.fun-fact-section .home-stat-info {
+  width: auto !important;
+  max-width: none !important;
+  float: none !important;
+  margin: 0 !important;
+  text-align: center;
+}
+
+.fun-fact-section .home-stat-heading {
+  width: auto !important;
+  float: none !important;
+  margin: 0 0 0.2em !important;
+  font-size: 30px !important;
+  line-height: 1 !important;
+  color: #0453fc !important;
+  font-weight: 700 !important;
+}
+
+.fun-fact-section .home-stat-value {
+  display: inline-block !important;
+  font-size: 70px !important;
+  line-height: 1 !important;
+  color: #0453fc !important;
+  font-weight: 700 !important;
+}
+
+.fun-fact-section .home-stat-label {
+  width: auto !important;
+  float: none !important;
+  margin: 0 !important;
+  font-size: 16px !important;
+  line-height: 1.5 !important;
+  color: #8c8c8c !important;
+}
+
+@media (max-width: 767px) {
+  .fun-fact-section .home-stat-grid {
+    width: 50%;
+    margin-bottom: 50px;
+  }
+
+  .fun-fact-section .home-stat-info {
+    padding: 0 8px;
+  }
+
+  .fun-fact-section .home-stat-value {
+    font-size: 54px !important;
+  }
+
+  .fun-fact-section .home-stat-label {
+    font-size: 15px !important;
+  }
+}
+</style>

nuxt-web/pages/news/[slug].vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const route = useRoute()
+const articlePath = `/news/${route.params.slug}`
+
+const { data: article } = await useAsyncData(`news-${route.params.slug}`, () => {
+  return queryCollection('news').path(articlePath).first()
+})
+
+if (!article.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: `News article not found: ${route.params.slug}`
+  })
+}
+
+useSeo({
+  title: article.value.title,
+  description: article.value.description,
+  keywords: article.value.keywords,
+  ogImage: article.value.cover,
+  canonicalPath: articlePath
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '新闻动态', to: '/news' },
+  { label: article.value.title }
+]
+</script>
+
+<template>
+  <div>
+    <SectionBanner
+      :title="article!.title"
+      :description="article!.summary"
+      background-image="/images/page-title3.png"
+    />
+    <Breadcrumb :items="breadcrumbItems" />
+
+    <main class="article-page">
+      <article class="article-card">
+        <p class="article-date">{{ article!.date }}</p>
+        <h1>{{ article!.title }}</h1>
+        <img :src="article!.cover" :alt="article!.title" class="article-cover">
+        <ContentRenderer :value="article" />
+      </article>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.article-page {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+}
+
+.article-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+  padding: 32px;
+}
+
+.article-date {
+  color: #4f6f93;
+  font-size: 14px;
+}
+
+.article-cover {
+  width: 100%;
+  border-radius: 16px;
+  margin: 24px 0;
+}
+</style>

nuxt-web/pages/news/index.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+const { data: articles } = await useAsyncData('news-list', () => {
+  return queryCollection('news')
+    .order('date', 'DESC')
+    .all()
+})
+
+useSeo({
+  title: '新闻动态',
+  description: '了解岸基科技的最新动态、企业荣誉与行业洞察。',
+  keywords: '岸基科技,新闻动态,企业荣誉,行业洞察',
+  canonicalPath: '/news'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '新闻动态' }
+]
+</script>
+
+<template>
+  <div>
+    <SectionBanner
+      title="新闻与洞察"
+      description="了解岸基最新动态，见证每一步成长。"
+      background-image="/images/page-title6.png.webp"
+    />
+    <Breadcrumb :items="breadcrumbItems" />
+
+    <main class="news-page">
+      <article v-for="article in articles || []" :key="article.id" class="news-card">
+        <NuxtLink :to="article.path" class="news-card__link">
+          <img :src="article.cover" :alt="article.title" class="news-card__image">
+          <div class="news-card__body">
+            <p class="news-card__meta">{{ article.date }}</p>
+            <h2>{{ article.title }}</h2>
+            <p>{{ article.summary }}</p>
+          </div>
+        </NuxtLink>
+      </article>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.news-page {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+  display: grid;
+  gap: 24px;
+}
+
+.news-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+  overflow: hidden;
+}
+
+.news-card__link {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  color: inherit;
+}
+
+.news-card__image {
+  width: 100%;
+  height: 100%;
+  min-height: 220px;
+  object-fit: cover;
+}
+
+.news-card__body {
+  padding: 24px;
+}
+
+.news-card__meta {
+  color: #4f6f93;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+@media (max-width: 767px) {
+  .news-card__link {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

nuxt-web/pages/products/ecommerce/bctp.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ecommerceDetails } from '~/data/products'
+const page = ecommerceDetails.bctp
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,大宗商品贸易平台,多式联运', canonicalPath: '/products/ecommerce/bctp' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '港航电商系列产品', to: '/products/ecommerce' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="以港航数字化为核心，强化协同与运营洞察。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/ecommerce/freight-booking.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ecommerceDetails } from '~/data/products'
+
+const page = ecommerceDetails['freight-booking']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,海运订舱平台,港航电商', canonicalPath: '/products/ecommerce/freight-booking' })
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '港航电商系列产品', to: '/products/ecommerce' },
+  { label: page.title }
+]
+</script>
+
+<template>
+  <ProductDetailLayout
+    :title="page.title"
+    :description="page.description"
+    :banner-image="page.bannerImage"
+    :breadcrumb-items="breadcrumbItems"
+    :related-products="page.relatedProducts"
+    :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))"
+  >
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="从业务连接到经营决策，持续放大海运订舱运营价值。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/ecommerce/index.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ecommerceProducts } from '~/data/products'
+
+useSeo({
+  title: '港航电商系列产品',
+  description: '查看岸基科技港航电商系列产品，包括海运订舱、网络货运、大宗贸易与网上业务大厅平台。',
+  keywords: '岸基科技,港航电商,海运订舱,网络货运,业务大厅',
+  canonicalPath: '/products/ecommerce'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '港航电商系列产品' }
+]
+
+const familyTabs = [
+  { label: '全程物流链系列产品', to: '/products/logistics' },
+  { label: '港航电商平台系列产品', to: '/products/ecommerce' },
+  { label: '云码头系列产品', to: '/products/port' },
+  { label: '航运数字系列产品', to: '/products/shipping' }
+]
+</script>
+
+<template>
+  <div>
+    <section class="page-title page-title2">
+      <div class="container">
+        <div class="row">
+          <div class="col col-xs-12">
+            <h2>智慧产品矩阵</h2>
+            <p>通覆盖全角色，贯穿全流程</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="blog-pg-section service-single-section section-padding">
+      <div class="container">
+        <div class="row">
+          <div class="col col-md-12">
+            <div class="service-tab-nav">
+              <div class="widget service-list-widget">
+                <ul>
+                  <li v-for="tab in familyTabs" :key="tab.to" :class="{ current: tab.to === '/products/ecommerce' }">
+                    <NuxtLink :to="tab.to">{{ tab.label }}</NuxtLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col col-md-12">
+            <div class="product-cards">
+              <ProductCard
+                v-for="item in ecommerceProducts"
+                :key="item.to"
+                :title="item.title"
+                :description="item.description"
+                :image="item.image"
+                :to="item.to"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>

nuxt-web/pages/products/ecommerce/net-cargo.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ecommerceDetails } from '~/data/products'
+const page = ecommerceDetails['net-cargo']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,网络货运平台,车货匹配', canonicalPath: '/products/ecommerce/net-cargo' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '港航电商系列产品', to: '/products/ecommerce' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="围绕协同、透明与成本优化的综合能力。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/ecommerce/obh.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ecommerceDetails } from '~/data/products'
+const page = ecommerceDetails.obh
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,网上业务大厅,客户服务平台', canonicalPath: '/products/ecommerce/obh' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '港航电商系列产品', to: '/products/ecommerce' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="以高可用架构和数据联通能力，支撑港航客户服务持续升级。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/logistics/cargo-agent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { logisticsDetails } from '~/data/products'
+const page = logisticsDetails['cargo-agent']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,货运代理系统,货代系统', canonicalPath: '/products/logistics/cargo-agent' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '全程物流链系列产品', to: '/products/logistics' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="围绕货代作业标准化与自动化，提升效率与准确性。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/logistics/index.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { logisticsProducts } from '~/data/products'
+
+useSeo({
+  title: '全程物流链系列产品',
+  description: '查看岸基科技全程物流链系列产品，包括平台、车辆运输、仓储、船舶代理与货运代理系统。',
+  keywords: '岸基科技,物流链平台,仓储管理,车辆运输,船舶代理,货运代理',
+  canonicalPath: '/products/logistics'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '全程物流链系列产品' }
+]
+
+const familyTabs = [
+  { label: '全程物流链系列产品', to: '/products/logistics' },
+  { label: '港航电商平台系列产品', to: '/products/ecommerce' },
+  { label: '云码头系列产品', to: '/products/port' },
+  { label: '航运数字系列产品', to: '/products/shipping' }
+]
+</script>
+
+<template>
+  <div>
+    <section class="page-title page-title2">
+      <div class="container">
+        <div class="row">
+          <div class="col col-xs-12">
+            <h2>智慧产品矩阵</h2>
+            <p>通覆盖全角色，贯穿全流程</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="blog-pg-section service-single-section section-padding">
+      <div class="container">
+        <div class="row">
+          <div class="col col-md-12">
+            <div class="service-tab-nav">
+              <div class="widget service-list-widget">
+                <ul>
+                  <li v-for="tab in familyTabs" :key="tab.to" :class="{ current: tab.to === '/products/logistics' }">
+                    <NuxtLink :to="tab.to">{{ tab.label }}</NuxtLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col col-md-12">
+            <div class="product-cards">
+              <ProductCard
+                v-for="item in logisticsProducts"
+                :key="item.to"
+                :title="item.title"
+                :description="item.description"
+                :image="item.image"
+                :to="item.to"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>

nuxt-web/pages/products/logistics/platform.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { logisticsDetails } from '~/data/products'
+const page = logisticsDetails.platform
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,全程物流链平台,物流协同', canonicalPath: '/products/logistics/platform' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '全程物流链系列产品', to: '/products/logistics' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="我们不止于功能领先，更在于价值落地。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/logistics/ship-agent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { logisticsDetails } from '~/data/products'
+const page = logisticsDetails['ship-agent']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,船舶代理系统,船代系统', canonicalPath: '/products/logistics/ship-agent' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '全程物流链系列产品', to: '/products/logistics' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="强化船代核心作业链条与集团管控能力。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/logistics/vehicle-transport.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { logisticsDetails } from '~/data/products'
+const page = logisticsDetails['vehicle-transport']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,车辆运输管理系统,TMS', canonicalPath: '/products/logistics/vehicle-transport' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '全程物流链系列产品', to: '/products/logistics' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="以路线、跟踪、成本和结算能力支撑运输精细化运营。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/logistics/warehouse.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { logisticsDetails } from '~/data/products'
+const page = logisticsDetails.warehouse
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,仓储管理系统,WMS', canonicalPath: '/products/logistics/warehouse' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '全程物流链系列产品', to: '/products/logistics' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="帮助仓储环节实现库存准确、作业提效与经营可视。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/port/cdi-bulk.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { portDetails } from '~/data/products'
+const page = portDetails['cdi-bulk']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,散杂货码头系统,云码头散杂货系统', canonicalPath: '/products/port/cdi-bulk' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '云码头系列产品', to: '/products/port' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="围绕散杂货码头的作业数字化与云化运营能力。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/port/cdi-container.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { portDetails } from '~/data/products'
+const page = portDetails['cdi-container']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,集装箱码头系统,云码头集装箱系统', canonicalPath: '/products/port/cdi-container' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '云码头系列产品', to: '/products/port' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="围绕集装箱码头的自动计划、配载和场桥调度能力持续提效。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/port/cdi.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { portDetails } from '~/data/products'
+const page = portDetails.cdi
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,云码头一体化系统,码头智能操作系统', canonicalPath: '/products/port/cdi' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '云码头系列产品', to: '/products/port' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="我们不止于功能领先，更在于价值落地。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/port/cloud-yard.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { portDetails } from '~/data/products'
+const page = portDetails['cloud-yard']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,云场站系统,场站智能操作系统', canonicalPath: '/products/port/cloud-yard' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '云码头系列产品', to: '/products/port' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="把场站运营数据沉淀为标准流程、自动执行和经营决策能力。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="围绕船舶收费监管和港口场站管理，验证场站产品在真实业务场景中的落地能力。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/port/index.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { portProducts } from '~/data/products'
+
+useSeo({
+  title: '云码头系列产品',
+  description: '查看岸基科技云码头系列产品，包括一体化、集装箱、散杂货与云场站智能操作系统。',
+  keywords: '岸基科技,云码头,集装箱码头,散杂货码头,云场站',
+  canonicalPath: '/products/port'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '云码头系列产品' }
+]
+
+const familyTabs = [
+  { label: '全程物流链系列产品', to: '/products/logistics' },
+  { label: '港航电商平台系列产品', to: '/products/ecommerce' },
+  { label: '云码头系列产品', to: '/products/port' },
+  { label: '航运数字系列产品', to: '/products/shipping' }
+]
+</script>
+
+<template>
+  <div>
+    <section class="page-title page-title2">
+      <div class="container">
+        <div class="row">
+          <div class="col col-xs-12">
+            <h2>智慧产品矩阵</h2>
+            <p>通覆盖全角色，贯穿全流程</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="blog-pg-section service-single-section section-padding">
+      <div class="container">
+        <div class="row">
+          <div class="col col-md-12">
+            <div class="service-tab-nav">
+              <div class="widget service-list-widget">
+                <ul>
+                  <li v-for="tab in familyTabs" :key="tab.to" :class="{ current: tab.to === '/products/port' }">
+                    <NuxtLink :to="tab.to">{{ tab.label }}</NuxtLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col col-md-12">
+            <div class="product-cards">
+              <ProductCard
+                v-for="item in portProducts"
+                :key="item.to"
+                :title="item.title"
+                :description="item.description"
+                :image="item.image"
+                :to="item.to"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>

nuxt-web/pages/products/shipping/boat.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { shippingDetails } from '~/data/products'
+const page = shippingDetails.boat
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,船舶管理系统,船舶运营管理', canonicalPath: '/products/shipping/boat' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '航运数字系列产品', to: '/products/shipping' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="把船舶经营、运营、体系与财务管理拉到一个统一工作台里。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/shipping/company.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { shippingDetails } from '~/data/products'
+const page = shippingDetails.company
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,船公司运营管理系统,航运数字化', canonicalPath: '/products/shipping/company' })
+const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '航运数字系列产品', to: '/products/shipping' }, { label: page.title }]
+</script>
+
+<template>
+  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
+    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
+    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
+    <ProductAdvantagesGrid heading="产品优势" summary="围绕船公司经营链路，强化智能化、可视化、全球化运营能力。" :items="page.advantages" />
+    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
+  </ProductDetailLayout>
+</template>

nuxt-web/pages/products/shipping/index.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { shippingProducts } from '~/data/products'
+
+useSeo({
+  title: '航运数字系列产品',
+  description: '查看岸基科技航运数字系列产品，包括船公司运营管理系统和船舶管理系统。',
+  keywords: '岸基科技,船公司系统,船舶管理系统,航运数字化',
+  canonicalPath: '/products/shipping'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '航运数字系列产品' }
+]
+
+const familyTabs = [
+  { label: '全程物流链系列产品', to: '/products/logistics' },
+  { label: '港航电商平台系列产品', to: '/products/ecommerce' },
+  { label: '云码头系列产品', to: '/products/port' },
+  { label: '航运数字系列产品', to: '/products/shipping' }
+]
+</script>
+
+<template>
+  <div>
+    <section class="page-title page-title2">
+      <div class="container">
+        <div class="row">
+          <div class="col col-xs-12">
+            <h2>智慧产品矩阵</h2>
+            <p>通覆盖全角色，贯穿全流程</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="blog-pg-section service-single-section section-padding">
+      <div class="container">
+        <div class="row">
+          <div class="col col-md-12">
+            <div class="service-tab-nav">
+              <div class="widget service-list-widget">
+                <ul>
+                  <li v-for="tab in familyTabs" :key="tab.to" :class="{ current: tab.to === '/products/shipping' }">
+                    <NuxtLink :to="tab.to">{{ tab.label }}</NuxtLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col col-md-12">
+            <div class="product-cards">
+              <ProductCard
+                v-for="item in shippingProducts"
+                :key="item.to"
+                :title="item.title"
+                :description="item.description"
+                :image="item.image"
+                :to="item.to"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>

nuxt-web/pages/services/changzhan.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { services } from '~/data/services'
+const page = services.changzhan
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,集装箱场站管理系统,服务页', canonicalPath: '/services/changzhan' })
+</script>
+
+<template>
+  <ServicePageLayout v-bind="page" />
+</template>

nuxt-web/pages/services/chuandai.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { services } from '~/data/services'
+const page = services.chuandai
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,船代管理信息系统,服务页', canonicalPath: '/services/chuandai' })
+</script>
+
+<template>
+  <ServicePageLayout v-bind="page" />
+</template>

nuxt-web/pages/services/dianshang.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { services } from '~/data/services'
+const page = services.dianshang
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,港航电商平台系统,服务页', canonicalPath: '/services/dianshang' })
+</script>
+
+<template>
+  <ServicePageLayout v-bind="page" />
+</template>

nuxt-web/pages/services/ilog.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { services } from '~/data/services'
+const page = services.ilog
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,全程物流链管理系统,服务页', canonicalPath: '/services/ilog' })
+</script>
+
+<template>
+  <ServicePageLayout v-bind="page" />
+</template>

nuxt-web/pages/services/jining.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { services } from '~/data/services'
+const page = services.jining
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,全程物流链管理系统,服务页', canonicalPath: '/services/jining' })
+</script>
+
+<template>
+  <ServicePageLayout v-bind="page" />
+</template>

nuxt-web/pages/services/yunmatou.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { services } from '~/data/services'
+const page = services.yunmatou
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,云码头智能管理系统,服务页', canonicalPath: '/services/yunmatou' })
+</script>
+
+<template>
+  <ServicePageLayout v-bind="page" />
+</template>

nuxt-web/pages/solutions/inland-river-shipping.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { solutions } from '~/data/solutions'
+const page = solutions['inland-river-shipping']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,内河港航一体化,解决方案', canonicalPath: '/solutions/inland-river-shipping' })
+</script>
+
+<template>
+  <SolutionPageLayout v-bind="page" />
+</template>

nuxt-web/pages/solutions/logistics-chain.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { solutions } from '~/data/solutions'
+const page = solutions['logistics-chain']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,全程物流链,解决方案', canonicalPath: '/solutions/logistics-chain' })
+</script>
+
+<template>
+  <SolutionPageLayout v-bind="page" />
+</template>

nuxt-web/pages/solutions/port-supply-chain.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { solutions } from '~/data/solutions'
+const page = solutions['port-supply-chain']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,港口供应链,解决方案', canonicalPath: '/solutions/port-supply-chain' })
+</script>
+
+<template>
+  <SolutionPageLayout v-bind="page" />
+</template>

nuxt-web/pages/solutions/supply-chain.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { solutions } from '~/data/solutions'
+const page = solutions['supply-chain']
+useSeo({ title: page.title, description: page.description, keywords: '岸基科技,大宗货物供应链,解决方案', canonicalPath: '/solutions/supply-chain' })
+</script>
+
+<template>
+  <SolutionPageLayout v-bind="page" />
+</template>