103 lines
2.6 KiB
Vue
103 lines
2.6 KiB
Vue
<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>
|