636 lines
25 KiB
Vue
636 lines
25 KiB
Vue
<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>
|
||
|