xlqx/app/pages/index/index.vue

<template>

      <UPage>
        <!-- 主要内容区域 -->
        <main role="main">
          <img 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="服务项目展示图片1" class="w-full rounded-lg       transition-shadow duration-300">
                </div>
                <div class="   cursor-pointer">
                  <img src="/img/2.jpg" alt="服务项目展示图片2" class="w-full rounded-lg       transition-shadow duration-300">
                </div>
                <div class="   cursor-pointer">
                  <img src="/img/3.jpg" alt="服务项目展示图片3" class="w-full rounded-lg       transition-shadow duration-300">
                </div>
                <div class="   cursor-pointer">
                  <img src="/img/4.jpg" alt="服务项目展示图片4" class="w-full rounded-lg       transition-shadow duration-300">
                </div>
                <div class="   cursor-pointer">
                  <img src="/img/5.jpg" alt="服务项目展示图片5" class="w-full rounded-lg       transition-shadow duration-300">
                </div>
                <UCarousel v-slot="{ item }" arrows  :prev="{ color: 'primary' }"
                           :next="{ color: 'primary' }" loop :items="items" class="w-full max-w-xl mx-auto">
                  <img :src="item" width="620" height="320" class="rounded-lg" alt="">
                </UCarousel>
                <div class="cursor-pointer">
                  <img src="/img/6.png" alt="服务项目展示图片6" class="w-full rounded-lg       transition-shadow duration-300">
                </div>
                <div class="   cursor-pointer">
                  <img src="/img/7.jpg" alt="服务项目展示图片7" class="w-full rounded-lg       transition-shadow duration-300">
                </div>
                <div class="   cursor-pointer">
                  <img src="/img/8.jpg" alt="服务项目展示图片8" class="w-full rounded-lg       transition-shadow duration-300">
                </div>
                <div class="   cursor-pointer">
                  <img src="/img/9.jpg" alt="服务项目展示图片9" 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>

        <!-- 悬浮置顶按钮组件 -->
        <ScrollToTop />

      </UPage>

</template>
<script setup lang="ts">
// SEO优化配置
import AMapComponent from "~/components/AMapComponent.vue";
import {computed, ref} from 'vue'
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 onMapReady = (mapInstance) => {
  console.log('地图实例:', mapInstance)
  mapStatus.value = '地图加载完成'

  // 添加一个标记点
  if (mapRef.value) {
    mapRef.value.addMarker(mapCenter.value, {
      title: '当前位置',
      content: `
    <div style="
      background: #007bff;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      text-align: center;
      transform: translate(-50%, -50%);
      position: relative;
      left: 50%;
      top: 50%;
    ">创特物联</div>
  `
    })
  }
}
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'
    }
  }
])

const items = [
  'https://picsum.photos/640/640?random=1',
  'https://picsum.photos/640/640?random=2',
  'https://picsum.photos/640/640?random=3',

]
</script>