xlqx/app/app.vue

246 lines
10 KiB
Vue
Raw Normal View History

2025-10-27 16:22:18 +08:00
<template>
<UApp>
<NuxtLayout>
2025-10-27 16:53:46 +08:00
<UPage>
2025-10-27 16:38:46 +08:00
<!-- 主要内容区域 -->
<main role="main">
2025-10-27 16:53:46 +08:00
<img src="/img/banner.png" alt="" class="w-full">
2025-10-27 16:38:46 +08:00
<UPageSection :ui="{container:'lg:py-0 lg:px-0' }">
2025-10-27 16:22:18 +08:00
2025-10-27 16:38:46 +08:00
<!-- 服务展示区域 -->
2025-10-27 16:53:46 +08:00
<section aria-label="服务展示" class="mb-16">
<div class="grid grid-cols-1">
2025-10-28 10:13:47 +08:00
<div class=" cursor-pointer">
<img src="/img/1.jpg" alt="服务项目展示图片1" class="w-full rounded-lg transition-shadow duration-300">
2025-10-27 16:53:46 +08:00
</div>
2025-10-28 10:13:47 +08:00
<div class=" cursor-pointer">
<img src="/img/2.jpg" alt="服务项目展示图片2" class="w-full rounded-lg transition-shadow duration-300">
2025-10-27 16:53:46 +08:00
</div>
2025-10-28 10:13:47 +08:00
<div class=" cursor-pointer">
<img src="/img/3.jpg" alt="服务项目展示图片3" class="w-full rounded-lg transition-shadow duration-300">
2025-10-27 16:53:46 +08:00
</div>
2025-10-28 10:13:47 +08:00
<div class=" cursor-pointer">
<img src="/img/4.jpg" alt="服务项目展示图片4" class="w-full rounded-lg transition-shadow duration-300">
2025-10-27 16:53:46 +08:00
</div>
2025-10-28 10:13:47 +08:00
<div class=" cursor-pointer">
<img src="/img/5.jpg" alt="服务项目展示图片5" class="w-full rounded-lg transition-shadow duration-300">
2025-10-27 16:53:46 +08:00
</div>
2025-10-28 10:13:47 +08:00
<div class=" cursor-pointer">
<img src="/img/6.jpg" alt="服务项目展示图片6" class="w-full rounded-lg transition-shadow duration-300">
2025-10-27 16:53:46 +08:00
</div>
2025-10-28 10:13:47 +08:00
<div class=" cursor-pointer">
<img src="/img/7.jpg" alt="服务项目展示图片7" class="w-full rounded-lg transition-shadow duration-300">
2025-10-27 16:53:46 +08:00
</div>
2025-10-28 10:13:47 +08:00
<div class=" cursor-pointer">
<img src="/img/8.jpg" alt="服务项目展示图片8" class="w-full rounded-lg transition-shadow duration-300">
2025-10-27 16:53:46 +08:00
</div>
2025-10-28 10:13:47 +08:00
<div class=" cursor-pointer">
<img src="/img/9.jpg" alt="服务项目展示图片9" class="w-full rounded-lg transition-shadow duration-300">
2025-10-27 16:53:46 +08:00
</div>
</div>
2025-10-27 16:38:46 +08:00
</section>
2025-10-27 16:53:46 +08:00
<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>
2025-10-27 16:38:46 +08:00
2025-10-27 16:53:46 +08:00
<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>
2025-10-27 16:38:46 +08:00
2025-10-27 16:53:46 +08:00
<!-- 欺诈赔偿 -->
<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>
2025-10-27 16:38:46 +08:00
</div>
2025-10-27 16:53:46 +08:00
<div class="grid lg:grid-cols-12 gap-8 items-start">
<!-- 联系方式卡片 -->
<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>
<img
alt="公司位置地图 - 福建省福鼎市太姥山镇海埕路13号"
class="w-full rounded-lg shadow-md"
src="/img/map.png"
>
<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>
2025-10-27 16:38:46 +08:00
</div>
</section>
2025-10-27 16:53:46 +08:00
2025-10-27 16:38:46 +08:00
</UPageSection>
</main>
2025-10-27 16:22:18 +08:00
2025-10-27 17:03:30 +08:00
<!-- 悬浮置顶按钮组件 -->
<ScrollToTop />
2025-10-27 16:53:46 +08:00
</UPage>
2025-10-27 16:22:18 +08:00
</NuxtLayout>
</UApp>
</template>
<script setup lang="ts">
2025-10-27 16:38:46 +08:00
// SEO优化配置
useHead({
title: '联系我们 - 专业服务公司 | 电话15280659990',
meta: [
2025-10-28 10:13:47 +08:00
{
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'
},
2025-10-27 16:38:46 +08:00
{ 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"
]
})
}
]
})
2025-10-27 16:30:32 +08:00
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'
}
}
])
2025-10-27 17:03:30 +08:00
</script>