nuxt初始化

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>