342 lines
14 KiB
Vue
342 lines
14 KiB
Vue
<template>
|
||
|
||
<UPage>
|
||
<!-- 主要内容区域 -->
|
||
<main role="main">
|
||
<!-- 轮播图区域 -->
|
||
<div v-if="bannerLoading" class="w-full h-64 bg-gray-200 flex items-center justify-center">
|
||
<div class="text-gray-500">加载中...</div>
|
||
</div>
|
||
<UCarousel
|
||
v-else-if="bannerItems.length > 0"
|
||
v-slot="{ item }"
|
||
arrows
|
||
:prev="{ color: 'primary' }"
|
||
:next="{ color: 'primary' }"
|
||
loop
|
||
:autoplay="{ delay: 5000 }"
|
||
:items="bannerItems"
|
||
class="w-full"
|
||
>
|
||
<div class="w-full overflow-hidden">
|
||
<img
|
||
:src="item.imgUrl"
|
||
:alt="item.remark || '轮播图'"
|
||
class="w-full object-cover"
|
||
/>
|
||
</div>
|
||
</UCarousel>
|
||
<img v-else src="/img/banner.png" alt="默认横幅" class="w-full">
|
||
<UPageSection :ui="{container:'lg:py-0 lg:px-0' }">
|
||
<!-- 服务展示区域 -->
|
||
<section aria-label="服务展示" class="mb-16">
|
||
<div class="grid grid-cols-1">
|
||
<div class="cursor-pointer">
|
||
<img src="/img/1.jpg" alt="共享电动车整体解决方案/共享电动车/电子围栏/蓝牙中控 " class="w-full rounded-lg transition-shadow duration-300">
|
||
</div>
|
||
<div class="cursor-pointer">
|
||
<img src="/img/2.jpg" alt="蓝牙道钉/用户小程序/App大数据后台+智能化运维后台+运维App+城市运营后台 " class="w-full rounded-lg transition-shadow duration-300">
|
||
</div>
|
||
<div class="cursor-pointer">
|
||
<img src="/img/3.jpg" alt="共享电动车+中控" class="w-full rounded-lg transition-shadow duration-300">
|
||
</div>
|
||
<div class="cursor-pointer">
|
||
<img src="/img/4.jpg" alt="运维端APP/大数据城市后台端+可视化运维后台" class="w-full rounded-lg transition-shadow duration-300">
|
||
</div>
|
||
<div class="cursor-pointer">
|
||
<img src="/img/5.jpg" alt="智能管理系统" class="w-full rounded-lg transition-shadow duration-300">
|
||
</div>
|
||
<div class="cursor-pointer">
|
||
<img src="/img/6.png" alt="智能监控/车辆设置定点停车区域/防盗报警/智能大数据/运营新模式" class="w-full rounded-lg transition-shadow duration-300">
|
||
</div>
|
||
<div class="cursor-pointer">
|
||
<img src="/img/7.jpg" alt="共享电动车开城指导+运营方案" class="w-full rounded-lg transition-shadow duration-300">
|
||
</div>
|
||
<div class="cursor-pointer">
|
||
<img src="/img/8.jpg" alt="多语言版本+成熟的国内外客户现场" class="w-full rounded-lg transition-shadow duration-300">
|
||
</div>
|
||
<div class="cursor-pointer">
|
||
<img src="/img/9.jpg" alt="共享电动车方案优势/易运维易管理/电子围栏设置/运维管理更方便/多城市、多地区统一管理，高效运营/市场好更专业用户刚需，需求量大，市场空间大/多地实际案例，经验丰富更专业" class="w-full rounded-lg transition-shadow duration-300">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section aria-label="服务保障" class="mb-16">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-4">服务保障</h2>
|
||
<p class="text-gray-600 text-lg">我们承诺为您提供最优质的服务保障</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<!-- 协助维权 -->
|
||
<div class="bg-white rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition-shadow duration-300">
|
||
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<UIcon name="i-lucide-shield-check" class="w-8 h-8 text-green-600" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-4">协助维权</h3>
|
||
<p class="text-gray-600 leading-relaxed">蒙受经济损失，可申请协助维权服务，我们为您提供专业的法律支持</p>
|
||
</div>
|
||
|
||
<!-- 虚假赔偿 -->
|
||
<div class="bg-white rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition-shadow duration-300">
|
||
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<UIcon name="i-lucide-badge-check" class="w-8 h-8 text-blue-600" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-4">虚假赔偿</h3>
|
||
<p class="text-gray-600 leading-relaxed">遇到品牌或资质冒用，可申请保障服务，维护您的合法权益</p>
|
||
</div>
|
||
|
||
<!-- 欺诈赔偿 -->
|
||
<div class="bg-white rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition-shadow duration-300">
|
||
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<UIcon name="i-lucide-shield-alert" class="w-8 h-8 text-red-600" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-4">欺诈赔偿</h3>
|
||
<p class="text-gray-600 leading-relaxed">遇到欺诈行为，经核查属实，可申请保障退还费用</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 联系信息区域 -->
|
||
<section aria-label="联系信息" class="mb-16">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-4">联系我们</h2>
|
||
<p class="text-gray-600 text-lg">多种方式联系我们，我们随时为您服务</p>
|
||
</div>
|
||
|
||
<div class="grid lg:grid-cols-12 gap-8 items-center">
|
||
<!-- 联系方式卡片 -->
|
||
<div class="col-span-12 lg:col-span-5">
|
||
<div class="bg-white rounded-xl shadow-lg p-8">
|
||
<h3 class="text-2xl font-semibold text-gray-800 mb-6 text-center">联系方式</h3>
|
||
<UPageList divide>
|
||
<UPageCard
|
||
v-for="(user, index) in users"
|
||
:key="index"
|
||
:target="user.target"
|
||
variant="ghost"
|
||
class="hover:bg-gray-50 transition-colors duration-200"
|
||
>
|
||
<template #body>
|
||
<UUser :avatar="user.avatar" :description="user.description" :name="user.name" size="xl"/>
|
||
</template>
|
||
</UPageCard>
|
||
</UPageList>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地图区域 -->
|
||
<div class="col-span-12 lg:col-span-7">
|
||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||
<h3 class="text-2xl font-semibold text-gray-800 mb-6 text-center">创特物联科技-公司位置</h3>
|
||
<AMapComponent
|
||
ref="mapRef"
|
||
:center="mapCenter"
|
||
:zoom="17"
|
||
|
||
height="342px"
|
||
@map-ready="onMapReady"
|
||
/>
|
||
<div class="mt-4 text-center">
|
||
<p class="text-gray-600">
|
||
<UIcon name="i-lucide-map-pin" class="w-5 h-5 inline mr-2 text-blue-500" />
|
||
福建省福鼎市太姥山镇海埕路13号
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</UPageSection>
|
||
</main>
|
||
|
||
|
||
</UPage>
|
||
</template>
|
||
<script setup lang="ts">
|
||
// SEO优化配置
|
||
import AMapComponent from "~/components/AMapComponent.vue";
|
||
import {computed, ref, onMounted} from 'vue'
|
||
import { getBannerList, type BannerItem } from '~/config/api'
|
||
|
||
const mapRef = ref(null)
|
||
const centerLng = ref(120.25834)
|
||
const centerLat = ref(27.114063)
|
||
|
||
const mapStatus = ref('加载中...')
|
||
|
||
const mapCenter = computed(() => [centerLng.value, centerLat.value])
|
||
|
||
// 轮播图相关数据
|
||
const bannerItems = ref<BannerItem[]>([])
|
||
const bannerLoading = ref(true)
|
||
|
||
// 获取轮播图数据
|
||
const fetchBannerList = async () => {
|
||
try {
|
||
bannerLoading.value = true
|
||
const banners = await getBannerList()
|
||
bannerItems.value = banners
|
||
} catch (error) {
|
||
console.error('获取轮播图失败:', error)
|
||
bannerItems.value = []
|
||
} finally {
|
||
bannerLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 页面加载时获取轮播图数据
|
||
onMounted(() => {
|
||
fetchBannerList()
|
||
})
|
||
const onMapReady = (mapInstance) => {
|
||
console.log('地图实例:', mapInstance)
|
||
mapStatus.value = '地图加载完成'
|
||
|
||
// 添加主标记点 - 公司位置
|
||
if (mapRef.value) {
|
||
|
||
|
||
// 添加一个更醒目的主标记点
|
||
mapRef.value.addMarker(mapCenter.value, {
|
||
title: '创特物联',
|
||
content: `
|
||
<div style="
|
||
width: 40px;
|
||
height: 40px;
|
||
background: linear-gradient(135deg, #2B7FFF 0%, #2B7FFF 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
|
||
border: 3px solid white;
|
||
transform: translate(-50%, -50%);
|
||
position: relative;
|
||
left: 50%;
|
||
top: 50%;
|
||
animation: pulse 2s infinite;
|
||
">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="white">
|
||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<style>
|
||
@keyframes pulse {
|
||
0% { transform: translate(-100%, -100%) scale(1); }
|
||
50% { transform: translate(-100%, -100%) scale(1.2); }
|
||
100% { transform: translate(-100%, -100%) scale(1); }
|
||
}
|
||
</style>
|
||
`
|
||
})
|
||
}
|
||
}
|
||
useHead({
|
||
title: '小鹿骑行',
|
||
meta: [
|
||
{
|
||
name: 'description',
|
||
content: '创特物联科技提供OEM电动车共享系统解决方案，含客户端/商户端小程序、智能中控硬件及管理系统。厂家直销支持定制，品质可靠。联系电话：15280659990'
|
||
},
|
||
{
|
||
name: 'keywords',
|
||
content: '共享电动车系统,电动车小程序开发,智能中控模块,OEM电动车方案,共享电单车管理系统,电动车物联网,创特物联科技,福建电动车解决方案,电动车定制开发,共享电动车中控,电动车智能硬件'
|
||
},
|
||
{
|
||
name: 'author',
|
||
content: '创特物联科技（福鼎）有限公司'
|
||
},
|
||
{
|
||
name: 'robots',
|
||
content: 'index, follow, max-snippet:150'
|
||
},
|
||
{
|
||
name: 'copyright',
|
||
content: 'Chuangte IoT Technology'
|
||
},
|
||
{ property: 'og:title', content: '联系我们 - 专业服务公司' },
|
||
{ property: 'og:description', content: '联系我们获取专业服务。地址：福建省福鼎市太姥山镇海埕路13号，电话：15280659990' },
|
||
{ property: 'og:type', content: 'website' },
|
||
{ property: 'og:url', content: 'https://yourwebsite.com/contact' },
|
||
{ property: 'og:image', content: '/img/banner.png' },
|
||
{ property: 'og:site_name', content: '专业服务公司' },
|
||
{ name: 'twitter:card', content: 'summary_large_image' },
|
||
{ name: 'twitter:title', content: '联系我们 - 专业服务公司' },
|
||
{ name: 'twitter:description', content: '联系我们获取专业服务。地址：福建省福鼎市太姥山镇海埕路13号，电话：15280659990' },
|
||
{ name: 'twitter:image', content: '/img/banner.png' }
|
||
],
|
||
link: [
|
||
{ rel: 'canonical', href: 'https://yourwebsite.com/contact' }
|
||
],
|
||
script: [
|
||
{
|
||
type: 'application/ld+json',
|
||
innerHTML: JSON.stringify({
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "专业服务公司",
|
||
"description": "提供专业服务的公司",
|
||
"url": "https://yourwebsite.com",
|
||
"contactPoint": {
|
||
"@type": "ContactPoint",
|
||
"telephone": "+86-15280659990",
|
||
"contactType": "customer service",
|
||
"email": "564737095@qq.com",
|
||
"availableLanguage": "Chinese"
|
||
},
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"streetAddress": "海埕路13号",
|
||
"addressLocality": "太姥山镇",
|
||
"addressRegion": "福鼎市",
|
||
"addressCountry": "CN",
|
||
"postalCode": "355200"
|
||
},
|
||
"openingHours": "Mo-Sa 08:30-12:00,13:30-18:00",
|
||
"sameAs": [
|
||
"https://yourwebsite.com"
|
||
]
|
||
})
|
||
}
|
||
]
|
||
})
|
||
|
||
const users = ref([
|
||
{
|
||
name: '电话',
|
||
description: '15280659990',
|
||
target: '_blank',
|
||
avatar: {
|
||
icon: 'i-lucide-phone'
|
||
}
|
||
},
|
||
{
|
||
name: '邮箱',
|
||
description: '564737095@qq.com',
|
||
target: '_blank',
|
||
avatar: {
|
||
icon: 'i-lucide-mail'
|
||
}
|
||
},
|
||
{
|
||
name: '地址',
|
||
description: '福建省福鼎市太姥山镇海埕路13号',
|
||
target: '_blank',
|
||
avatar: {
|
||
icon: 'i-lucide-map-pin',
|
||
class: 'text-blue-500'
|
||
|
||
}
|
||
},
|
||
{
|
||
name: '工作时间',
|
||
description: '周一至周六 (8:30-12:00 13:30-18:00)',
|
||
target: '_blank',
|
||
avatar: {
|
||
icon: 'i-lucide-clock'
|
||
}
|
||
}
|
||
])
|
||
</script>
|