xlqx/app/app.vue
WindowBird fcba96a00b seo
2025-10-27 16:38:46 +08:00

151 lines
5.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<UApp>
<NuxtLayout>
<Upagae>
<!-- 主要内容区域 -->
<main role="main">
<img src="/img/banner.png" alt="公司服务横幅图片" class="w-full mb-4">
<UPageSection :ui="{container:'lg:py-0 lg:px-0' }">
<!-- 服务展示区域 -->
<section aria-label="服务展示">
<img src="/img/1.jpg" alt="服务项目展示图片1" class="w-full mb-4">
<img src="/img/2.jpg" alt="服务项目展示图片2" class="w-full mb-4">
<img src="/img/3.jpg" alt="服务项目展示图片3" class="w-full mb-4">
<img src="/img/4.jpg" alt="服务项目展示图片4" class="w-full mb-4">
<img src="/img/5.jpg" alt="服务项目展示图片5" class="w-full mb-4">
<img src="/img/6.jpg" alt="服务项目展示图片6" class="w-full mb-4">
<img src="/img/7.jpg" alt="服务项目展示图片7" class="w-full mb-4">
<img src="/img/8.jpg" alt="服务项目展示图片8" class="w-full mb-4">
<img src="/img/9.jpg" alt="服务项目展示图片9" class="w-full mb-4">
</section>
<!-- 联系信息区域 -->
<section aria-label="联系信息" class="grid lg:grid-cols-12 gap-6 items-center mt-8">
<div class="col-span-12 lg:col-span-5 shadow-2xl">
<UPageList divide>
<UPageCard
v-for="(user, index) in users"
:key="index"
:target="user.target"
variant="ghost"
>
<template #body>
<UUser :avatar="user.avatar" :description="user.description" :name="user.name" size="xl"/>
</template>
</UPageCard>
</UPageList>
</div>
<!-- 地图区域 -->
<div class="col-span-12 lg:col-span-7">
<img alt="公司位置地图 - 福建省福鼎市太姥山镇海埕路13号" class="shadow-2xl" src="/img/map.png">
</div>
</section>
</UPageSection>
</main>
</Upagae>
</NuxtLayout>
</UApp>
</template>
<script setup lang="ts">
// SEO优化配置
useHead({
title: '联系我们 - 专业服务公司 | 电话15280659990',
meta: [
{ name: 'description', content: '联系我们获取专业服务地址福建省福鼎市太姥山镇海埕路13号电话15280659990邮箱564737095@qq.com工作时间周一至周六 8:30-18:00' },
{ name: 'keywords', content: '联系我们,联系方式,电话,邮箱,地址,福建省福鼎市,太姥山镇,海埕路,工作时间' },
{ name: 'author', content: '专业服务公司' },
{ name: 'robots', content: 'index, follow' },
{ 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>