<script lang="ts" setup>
/**
 * 玉犀科技官网首页
 * 基于 https://www.yuxiit.com/index.html 的内容
 */

import { ref, onMounted } from 'vue'

// 页面SEO配置
useSeoMeta({
  title: '玉犀科技 - 万物互联 智启未来',
  description: '玉犀科技专注于共享陪护床，共享电动车，共享汽车，共享充电桩，共享家居电器，共享按摩椅，共享充电宝，共享滑板车等共享软件开发及物联网解决方案',
  keywords: '共享软件,物联网解决方案,智能硬件,APP开发,小程序开发,共享单车,共享电动车,共享充电宝',
  author: '深圳市玉犀科技有限公司',
  robots: 'index, follow',
  language: 'zh-CN'
})

// 轮播图数据
const carouselData = ref([
  {
    id: 1,
    title: '共享陪护床',
    subtitle: '解决医院陪护家属未配有床位，休息不便的问题',
    description: '解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同事，给患者家属更舒适的修养环境。',
    image: 'https://picsum.photos/1920/1080?random=hospital-bed',
    link: '/yuxi/shared-solutions/hospital-bed'
  },
  {
    id: 2,
    title: '共享单车',
    subtitle: '解决大型园区或短距离出行麻烦，提高出行效率',
    description: '解决大型园区或短距离出行麻烦，提高出行效率，分时租赁单车，无桩共享，是一种新型的经济环保出行方式。',
    image: 'https://picsum.photos/1920/1080?random=bike-sharing',
    link: '/yuxi/shared-solutions/bike-sharing'
  },
  {
    id: 3,
    title: '共享电单车',
    subtitle: '解决人们最后三公里的出行，促进环保和健康出行',
    description: '解决人们最后三公里的出行，促进环保和健康出行，电动助力，省力高效。',
    image: 'https://picsum.photos/1920/1080?random=ebike',
    link: '/yuxi/shared-solutions/ebike'
  },
  {
    id: 4,
    title: '共享电动车',
    subtitle: '电动车相比续航能力更强，适用于各种出行场景',
    description: '电动车相比续航能力更强，适用于各种出行场景，一站式提供硬件设备与软件开发',
    image: 'https://picsum.photos/1920/1080?random=electric-car',
    link: '/yuxi/shared-solutions/electric-car'
  },
  {
    id: 5,
    title: '共享滑板车',
    subtitle: '滑板车相对更加轻便，可穿梭于狭窄街巷',
    description: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合用户的短距离出行需求。',
    image: 'https://picsum.photos/1920/1080?random=scooter',
    link: '/yuxi/shared-solutions/scooter'
  }
])

// 当前轮播图索引
const currentCarouselIndex = ref(0)

// 应用场景数据
const applicationScenarios = ref([
  {
    id: 'smart-home',
    title: '智能家居',
    icon: 'i-lucide-home',
    items: ['智能门锁', '智能空调', '智能电饭煲', '智能窗帘']
  },
  {
    id: 'smart-mobility',
    title: '智慧出行',
    icon: 'i-lucide-car',
    items: ['共享单车', '共享汽车', '共享滑板车', '共享电动车']
  },
  {
    id: 'smart-medical',
    title: '智慧医疗',
    icon: 'i-lucide-heart',
    items: ['共享陪护床', '智能安防', '共享打印机', '共享充电宝']
  },
  {
    id: 'smart-park',
    title: '智慧园区',
    icon: 'i-lucide-building',
    items: ['智能自提柜', '共享健身房', '共享洗衣机', '智能门禁']
  }
])

// 软件开发服务数据
const softwareServices = ref([
  {
    id: 'ios',
    title: 'iOS开发',
    description: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。',
    icon: 'i-lucide-smartphone'
  },
  {
    id: 'android',
    title: 'Android开发',
    description: '针对主流的android系统，提供一站式APP咨询、策划、开发服务。',
    icon: 'i-lucide-smartphone'
  },
  {
    id: 'wechat',
    title: '微信开发',
    description: '针对企业需求提供专业微信公众平台开发服务。',
    icon: 'i-lucide-message-circle'
  },
  {
    id: 'miniprogram',
    title: '小程序开发',
    description: '无需安装APP，就可以带来更流畅快速的体验。',
    icon: 'i-lucide-zap'
  }
])

// 智能硬件数据
const smartHardware = ref({
  title: '联网智能硬件',
  subtitle: '专业智能锁具与联网控制器解决方案，为传统设备提供智能化升级服务',
  products: [
    {
      id: 'smart-lock',
      title: '锁',
      description: 'N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏（延伸），远程授权自动开锁，支持应急开锁（延伸），支持短信远程修改相关参数。',
      image: 'https://picsum.photos/600/400?random=smart-lock'
    },
    {
      id: 'network-controller',
      title: '联网控制器',
      description: '通过改造传统传感器/PLC/变频器等实现快速联接（无需部署新设备）。通过灵活部署，快速形成各领域的物联网解决方案；有效降低用户改造、部署、维护成本。',
      image: 'https://picsum.photos/600/400?random=controller'
    }
  ]
})

// 开发资讯数据
const developmentNews = ref({
  solutions: [
    { title: '共享单车解决方案', date: '2024-01-15' },
    { title: '共享滑板车解决方案', date: '2024-01-10' },
    { title: '共享陪护床解决方案', date: '2024-01-08' },
    { title: '共享电动车解决方案', date: '2024-01-05' },
    { title: '共享充电宝解决方案', date: '2024-01-03' }
  ],
  industry: [
    { title: '智慧餐饮解决方案', date: '2024-01-12' },
    { title: '智慧公寓解决方案', date: '2024-01-09' },
    { title: '智能电动车解决方案', date: '2024-01-06' }
  ],
  software: [
    { title: '微信开发服务', date: '2024-01-14' },
    { title: 'APP开发服务', date: '2024-01-11' },
    { title: '小程序开发服务', date: '2024-01-07' }
  ],
  hardware: [
    { title: '物联网应用定制', date: '2024-01-13' },
    { title: '物联网智能硬件', date: '2024-01-04' },
    { title: '物联网IOT云平台', date: '2024-01-02' }
  ]
})

// 公司信息
const companyInfo = ref({
  name: '深圳市玉犀科技有限公司',
  phone: '18123752516',
  servicePhone: '0755-85225123',
  email: 'yuxi@yuxiit.com',
  address: '深圳市龙华新区1970文化创意产业园A栋206',
  icp: '粤ICP备14055703号-1',
  copyright: 'Copyright © 2013-2025深圳市玉犀科技有限公司'
})

// 轮播图自动播放
let carouselTimer: NodeJS.Timeout | null = null

onMounted(() => {
  startCarousel()
})

onUnmounted(() => {
  if (carouselTimer) {
    clearInterval(carouselTimer)
  }
})

const startCarousel = () => {
  carouselTimer = setInterval(() => {
    currentCarouselIndex.value = (currentCarouselIndex.value + 1) % carouselData.value.length
  }, 5000)
}

const stopCarousel = () => {
  if (carouselTimer) {
    clearInterval(carouselTimer)
    carouselTimer = null
  }
}

const goToCarousel = (index: number) => {
  currentCarouselIndex.value = index
  stopCarousel()
  setTimeout(() => {
    startCarousel()
  }, 3000)
}
</script>

<template>
  <div class="min-h-screen bg-white">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <!-- Logo -->
          <div class="flex items-center">
            <NuxtLink to="/yuxi" class="text-2xl font-bold text-blue-600">
              玉犀科技
            </NuxtLink>
          </div>

          <!-- 导航菜单 -->
          <div class="hidden md:flex items-center space-x-8">
            <NuxtLink to="/yuxi" class="text-gray-700 hover:text-blue-600 font-medium">首页</NuxtLink>
            <NuxtLink to="/yuxi/shared-solutions" class="text-gray-700 hover:text-blue-600 font-medium">共享解决方案</NuxtLink>
            <NuxtLink to="/yuxi/industry-solutions" class="text-gray-700 hover:text-blue-600 font-medium">行业解决方案</NuxtLink>
            <NuxtLink to="/yuxi/software-development" class="text-gray-700 hover:text-blue-600 font-medium">软件应用开发</NuxtLink>
            <NuxtLink to="/yuxi/iot-solutions" class="text-gray-700 hover:text-blue-600 font-medium">物联网解决方案</NuxtLink>
            <NuxtLink to="/yuxi/about" class="text-gray-700 hover:text-blue-600 font-medium">关于玉犀</NuxtLink>
            <NuxtLink to="/yuxi/contact" class="text-gray-700 hover:text-blue-600 font-medium">联系我们</NuxtLink>
          </div>

          <!-- 移动端菜单按钮 -->
          <div class="md:hidden">
            <button class="text-gray-700 hover:text-blue-600">
              <UIcon name="i-lucide-menu" class="w-6 h-6" />
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主横幅 -->
    <section class="relative h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
      <div class="absolute inset-0 overflow-hidden">
        <img 
          :src="carouselData[currentCarouselIndex].image" 
          :alt="carouselData[currentCarouselIndex].title"
          class="w-full h-full object-cover opacity-20"
        />
        <div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-indigo-900/20"></div>
      </div>
      
      <div class="relative z-10 text-center max-w-4xl mx-auto px-4">
        <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 drop-shadow-lg">
          万物互联 智启未来
        </h1>
        <p class="text-xl md:text-2xl text-blue-100 mb-8 drop-shadow-md">
          {{ carouselData[currentCarouselIndex].subtitle }}
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <NuxtLink 
            :to="carouselData[currentCarouselIndex].link"
            class="px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors shadow-lg"
          >
            查看详情
          </NuxtLink>
          <NuxtLink 
            to="/yuxi/contact"
            class="px-8 py-4 bg-white/20 hover:bg-white/30 text-white font-semibold rounded-lg transition-colors backdrop-blur-sm"
          >
            联系我们
          </NuxtLink>
        </div>
      </div>

      <!-- 轮播图指示器 -->
      <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2">
        <button
          v-for="(item, index) in carouselData"
          :key="item.id"
          @click="goToCarousel(index)"
          class="w-3 h-3 rounded-full transition-colors"
          :class="index === currentCarouselIndex ? 'bg-white' : 'bg-white/50'"
        ></button>
      </div>
    </section>

    <!-- 产品展示区域 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">共享解决方案</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            针对不同类型使用场景需求，量身定制解决方案
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            v-for="item in carouselData"
            :key="item.id"
            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow group"
          >
            <div class="relative h-48 overflow-hidden">
              <img 
                :src="item.image" 
                :alt="item.title"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ item.title }}</h3>
              <p class="text-gray-600 mb-4">{{ item.subtitle }}</p>
              <p class="text-sm text-gray-500 mb-4">{{ item.description }}</p>
              <NuxtLink 
                :to="item.link"
                class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
              >
                查看详情
                <UIcon name="i-lucide-arrow-right" class="w-4 h-4 ml-1" />
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 应用场景 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">多场景应用</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            通过专业的智能硬件与软件系统开发，解决物联网平台在各类复杂场景下的应用问题
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="scenario in applicationScenarios"
            :key="scenario.id"
            class="text-center group"
          >
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
              <UIcon :name="scenario.icon" class="w-10 h-10 text-blue-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ scenario.title }}</h3>
            <ul class="space-y-2">
              <li
                v-for="item in scenario.items"
                :key="item"
                class="text-gray-600"
              >
                {{ item }}
              </li>
            </ul>
          </div>
        </div>

        <div class="text-center mt-12">
          <NuxtLink 
            to="/yuxi/industry-solutions"
            class="inline-flex items-center px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
          >
            了解更多
            <UIcon name="i-lucide-arrow-right" class="w-5 h-5 ml-2" />
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- 软件开发服务 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">软件应用开发</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="service in softwareServices"
            :key="service.id"
            class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow text-center"
          >
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <UIcon :name="service.icon" class="w-8 h-8 text-green-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ service.title }}</h3>
            <p class="text-gray-600">{{ service.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 智能硬件 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">{{ smartHardware.title }}</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            {{ smartHardware.subtitle }}
          </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div
            v-for="(product, index) in smartHardware.products"
            :key="product.id"
            class="group"
          >
            <div class="flex flex-col lg:flex-row items-center space-y-6 lg:space-y-0 lg:space-x-8"
                 :class="{ 'lg:flex-row-reverse lg:space-x-reverse': index % 2 === 1 }">
              <div class="flex-shrink-0">
                <img 
                  :src="product.image" 
                  :alt="product.title"
                  class="w-64 h-48 object-cover rounded-lg shadow-lg group-hover:shadow-xl transition-shadow"
                />
              </div>
              <div class="flex-1">
                <h3 class="text-2xl font-bold text-gray-900 mb-4">{{ product.title }}</h3>
                <p class="text-gray-600 leading-relaxed">{{ product.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center mt-12">
          <NuxtLink 
            to="/yuxi/iot-solutions"
            class="inline-flex items-center px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
          >
            了解更多
            <UIcon name="i-lucide-arrow-right" class="w-5 h-5 ml-2" />
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- 开发资讯 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">开发资讯</h2>
          <p class="text-xl text-gray-600">NEWS</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <!-- 解决方案 -->
          <div class="bg-white rounded-xl p-6 shadow-lg">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">解决方案</h3>
            <ul class="space-y-3">
              <li
                v-for="item in developmentNews.solutions"
                :key="item.title"
                class="border-b border-gray-100 pb-2 last:border-b-0"
              >
                <NuxtLink 
                  to="/yuxi/news"
                  class="text-gray-600 hover:text-blue-600 transition-colors"
                >
                  {{ item.title }}
                </NuxtLink>
                <p class="text-sm text-gray-400 mt-1">{{ item.date }}</p>
              </li>
            </ul>
          </div>

          <!-- 行业方案 -->
          <div class="bg-white rounded-xl p-6 shadow-lg">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">行业方案</h3>
            <ul class="space-y-3">
              <li
                v-for="item in developmentNews.industry"
                :key="item.title"
                class="border-b border-gray-100 pb-2 last:border-b-0"
              >
                <NuxtLink 
                  to="/yuxi/news"
                  class="text-gray-600 hover:text-blue-600 transition-colors"
                >
                  {{ item.title }}
                </NuxtLink>
                <p class="text-sm text-gray-400 mt-1">{{ item.date }}</p>
              </li>
            </ul>
          </div>

          <!-- 软件开发 -->
          <div class="bg-white rounded-xl p-6 shadow-lg">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">软件开发</h3>
            <ul class="space-y-3">
              <li
                v-for="item in developmentNews.software"
                :key="item.title"
                class="border-b border-gray-100 pb-2 last:border-b-0"
              >
                <NuxtLink 
                  to="/yuxi/news"
                  class="text-gray-600 hover:text-blue-600 transition-colors"
                >
                  {{ item.title }}
                </NuxtLink>
                <p class="text-sm text-gray-400 mt-1">{{ item.date }}</p>
              </li>
            </ul>
          </div>

          <!-- 智能硬件 -->
          <div class="bg-white rounded-xl p-6 shadow-lg">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">智能硬件</h3>
            <ul class="space-y-3">
              <li
                v-for="item in developmentNews.hardware"
                :key="item.title"
                class="border-b border-gray-100 pb-2 last:border-b-0"
              >
                <NuxtLink 
                  to="/yuxi/news"
                  class="text-gray-600 hover:text-blue-600 transition-colors"
                >
                  {{ item.title }}
                </NuxtLink>
                <p class="text-sm text-gray-400 mt-1">{{ item.date }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <!-- 解决方案 -->
          <div>
            <h3 class="text-lg font-semibold mb-4">解决方案</h3>
            <ul class="space-y-2">
              <li><NuxtLink to="/yuxi/shared-solutions/bike" class="text-gray-300 hover:text-white transition-colors">共享单车</NuxtLink></li>
              <li><NuxtLink to="/yuxi/shared-solutions/scooter" class="text-gray-300 hover:text-white transition-colors">共享滑板车</NuxtLink></li>
              <li><NuxtLink to="/yuxi/shared-solutions/hospital-bed" class="text-gray-300 hover:text-white transition-colors">共享陪护床</NuxtLink></li>
              <li><NuxtLink to="/yuxi/shared-solutions/ebike" class="text-gray-300 hover:text-white transition-colors">共享电动车</NuxtLink></li>
              <li><NuxtLink to="/yuxi/shared-solutions/charger" class="text-gray-300 hover:text-white transition-colors">共享充电宝</NuxtLink></li>
            </ul>
          </div>

          <!-- 行业方案 -->
          <div>
            <h3 class="text-lg font-semibold mb-4">行业方案</h3>
            <ul class="space-y-2">
              <li><NuxtLink to="/yuxi/industry-solutions/restaurant" class="text-gray-300 hover:text-white transition-colors">智慧餐饮</NuxtLink></li>
              <li><NuxtLink to="/yuxi/industry-solutions/apartment" class="text-gray-300 hover:text-white transition-colors">智慧公寓</NuxtLink></li>
              <li><NuxtLink to="/yuxi/industry-solutions/ebike" class="text-gray-300 hover:text-white transition-colors">智能电动车</NuxtLink></li>
            </ul>
          </div>

          <!-- 软件开发 -->
          <div>
            <h3 class="text-lg font-semibold mb-4">软件开发</h3>
            <ul class="space-y-2">
              <li><NuxtLink to="/yuxi/software-development/wechat" class="text-gray-300 hover:text-white transition-colors">微信开发</NuxtLink></li>
              <li><NuxtLink to="/yuxi/software-development/app" class="text-gray-300 hover:text-white transition-colors">APP开发</NuxtLink></li>
              <li><NuxtLink to="/yuxi/software-development/miniprogram" class="text-gray-300 hover:text-white transition-colors">小程序开发</NuxtLink></li>
            </ul>
          </div>

          <!-- 智能硬件 -->
          <div>
            <h3 class="text-lg font-semibold mb-4">智能硬件</h3>
            <ul class="space-y-2">
              <li><NuxtLink to="/yuxi/iot-solutions/customization" class="text-gray-300 hover:text-white transition-colors">物联网应用定制</NuxtLink></li>
              <li><NuxtLink to="/yuxi/iot-solutions/hardware" class="text-gray-300 hover:text-white transition-colors">物联网智能硬件</NuxtLink></li>
              <li><NuxtLink to="/yuxi/iot-solutions/cloud" class="text-gray-300 hover:text-white transition-colors">物联网IOT云平台</NuxtLink></li>
            </ul>
          </div>
        </div>

        <!-- 联系我们 -->
        <div class="mt-12 pt-8 border-t border-gray-700">
          <div class="text-center">
            <h3 class="text-lg font-semibold mb-4">联系我们</h3>
            <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-8 text-gray-300">
              <div class="flex items-center">
                <UIcon name="i-lucide-phone" class="w-5 h-5 mr-2" />
                <span>客服电话：{{ companyInfo.servicePhone }}</span>
              </div>
              <div class="flex items-center">
                <UIcon name="i-lucide-phone" class="w-5 h-5 mr-2" />
                <span>商务合作：{{ companyInfo.phone }}</span>
              </div>
              <div class="flex items-center">
                <UIcon name="i-lucide-mail" class="w-5 h-5 mr-2" />
                <span>反馈建议：{{ companyInfo.email }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 版权信息 -->
        <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
          <p class="mb-2">{{ companyInfo.copyright }}</p>
          <p class="mb-2">{{ companyInfo.icp }}</p>
          <p>{{ companyInfo.address }}</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 自定义样式 */
.carousel-enter-active,
.carousel-leave-active {
  transition: all 0.5s ease;
}

.carousel-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.carousel-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
</style>

