434 lines
15 KiB
Vue
434 lines
15 KiB
Vue
<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>
|