377 lines
14 KiB
Vue
377 lines
14 KiB
Vue
<script lang="ts" setup>
|
||
/**
|
||
* 行业解决方案页面
|
||
* 基于玉犀科技官网的行业解决方案内容
|
||
*/
|
||
|
||
// 页面SEO配置
|
||
useSeoMeta({
|
||
title: '行业解决方案 - 玉犀科技',
|
||
description: '玉犀科技提供智能电动车、智能换电柜等行业解决方案，助力各行业数字化转型',
|
||
keywords: '智能电动车,智能换电柜,行业解决方案,数字化转型,物联网',
|
||
robots: 'index, follow'
|
||
})
|
||
|
||
// 行业解决方案数据
|
||
const industrySolutions = ref([
|
||
{
|
||
id: 'smart-ebike',
|
||
title: '智能电动车',
|
||
subtitle: '打造智能电动车时代!方便用户的出行,让骑车出行便捷',
|
||
description: '智能电动车解决方案集成了GPS定位、智能锁车、远程控制等功能，为用户提供便捷、安全的出行体验。通过物联网技术，实现车辆的智能化管理和运营。',
|
||
features: [
|
||
'GPS实时定位追踪',
|
||
'智能锁车系统',
|
||
'远程控制功能',
|
||
'电池状态监控',
|
||
'用户行为分析',
|
||
'运营数据统计'
|
||
],
|
||
image: 'https://picsum.photos/800/600?random=smart-ebike',
|
||
applications: [
|
||
'共享电动车运营',
|
||
'企业通勤服务',
|
||
'景区游览车辆',
|
||
'校园出行服务'
|
||
]
|
||
},
|
||
{
|
||
id: 'smart-battery-cabinet',
|
||
title: '智能换电柜',
|
||
subtitle: '智能换电柜系统以集中换电替代用户充电，解决国内超过3.5亿辆电动车的电池续航问题',
|
||
description: '智能换电柜系统通过集中式电池管理，为用户提供快速、便捷的电池更换服务。系统支持多种电池规格，具备智能识别、安全防护、远程监控等功能。',
|
||
features: [
|
||
'智能电池识别',
|
||
'快速换电服务',
|
||
'电池状态监控',
|
||
'安全防护系统',
|
||
'远程运维管理',
|
||
'用户数据分析'
|
||
],
|
||
image: 'https://picsum.photos/800/600?random=battery-cabinet',
|
||
applications: [
|
||
'电动车换电服务',
|
||
'物流配送车辆',
|
||
'外卖配送车辆',
|
||
'共享出行平台'
|
||
]
|
||
}
|
||
])
|
||
|
||
// 行业应用场景
|
||
const industryScenarios = ref([
|
||
{
|
||
id: 'smart-restaurant',
|
||
title: '智慧餐饮',
|
||
description: '为餐饮行业提供智能点餐、排队管理、会员系统等解决方案',
|
||
icon: 'i-lucide-utensils',
|
||
features: ['智能点餐系统', '排队管理', '会员管理', '数据分析']
|
||
},
|
||
{
|
||
id: 'smart-apartment',
|
||
title: '智慧公寓',
|
||
description: '为公寓管理提供智能门锁、水电管理、租户服务等解决方案',
|
||
icon: 'i-lucide-building',
|
||
features: ['智能门锁', '水电管理', '租户服务', '物业管理']
|
||
},
|
||
{
|
||
id: 'smart-park',
|
||
title: '智慧园区',
|
||
description: '为园区提供智能停车、访客管理、设备监控等解决方案',
|
||
icon: 'i-lucide-map-pin',
|
||
features: ['智能停车', '访客管理', '设备监控', '园区服务']
|
||
},
|
||
{
|
||
id: 'smart-hospital',
|
||
title: '智慧医疗',
|
||
description: '为医疗机构提供智能设备管理、患者服务、数据统计等解决方案',
|
||
icon: 'i-lucide-heart',
|
||
features: ['设备管理', '患者服务', '数据统计', '医疗安全']
|
||
}
|
||
])
|
||
|
||
// 技术架构
|
||
const technicalArchitecture = ref([
|
||
{
|
||
title: '硬件层',
|
||
description: '智能硬件设备，支持多种通信协议',
|
||
icon: 'i-lucide-cpu',
|
||
color: 'bg-blue-100 text-blue-600'
|
||
},
|
||
{
|
||
title: '通信层',
|
||
description: '4G/5G、WiFi、蓝牙等多种通信方式',
|
||
icon: 'i-lucide-wifi',
|
||
color: 'bg-green-100 text-green-600'
|
||
},
|
||
{
|
||
title: '平台层',
|
||
description: '云端管理平台，统一设备管理',
|
||
icon: 'i-lucide-cloud',
|
||
color: 'bg-purple-100 text-purple-600'
|
||
},
|
||
{
|
||
title: '应用层',
|
||
description: '用户端APP，管理端系统',
|
||
icon: 'i-lucide-smartphone',
|
||
color: 'bg-orange-100 text-orange-600'
|
||
}
|
||
])
|
||
|
||
// 成功案例
|
||
const successCases = ref([
|
||
{
|
||
title: '某大型园区智能停车项目',
|
||
description: '部署智能停车系统，提升停车效率30%，用户满意度95%',
|
||
result: '效率提升30%',
|
||
image: 'https://picsum.photos/400/300?random=parking'
|
||
},
|
||
{
|
||
title: '共享电动车运营平台',
|
||
description: '为某城市提供共享电动车解决方案，日活用户超过10万',
|
||
result: '日活10万+',
|
||
image: 'https://picsum.photos/400/300?random=ebike-platform'
|
||
},
|
||
{
|
||
title: '智能换电柜网络',
|
||
description: '建设覆盖全市的智能换电柜网络，服务用户超过50万',
|
||
result: '服务50万+',
|
||
image: 'https://picsum.photos/400/300?random=battery-network'
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-gray-50">
|
||
<!-- 页面头部 -->
|
||
<section class="bg-gradient-to-br from-green-600 to-emerald-700 text-white py-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h1 class="text-4xl md:text-6xl font-bold mb-6">行业解决方案</h1>
|
||
<p class="text-xl md:text-2xl text-green-100 max-w-3xl mx-auto">
|
||
为各行业提供专业的物联网解决方案，助力数字化转型
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 主要解决方案 -->
|
||
<section class="py-20">
|
||
<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="space-y-20">
|
||
<div
|
||
v-for="(solution, index) in industrySolutions"
|
||
:key="solution.id"
|
||
class="group"
|
||
>
|
||
<div class="flex flex-col lg:flex-row items-center space-y-8 lg:space-y-0 lg:space-x-12"
|
||
:class="{ 'lg:flex-row-reverse lg:space-x-reverse': index % 2 === 1 }">
|
||
<!-- 图片 -->
|
||
<div class="flex-shrink-0">
|
||
<div class="relative overflow-hidden rounded-2xl shadow-xl">
|
||
<img
|
||
:src="solution.image"
|
||
:alt="solution.title"
|
||
class="w-96 h-64 object-cover group-hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<div class="flex-1">
|
||
<h3 class="text-3xl font-bold text-gray-900 mb-4">{{ solution.title }}</h3>
|
||
<p class="text-xl text-green-600 font-medium mb-6">{{ solution.subtitle }}</p>
|
||
<p class="text-gray-600 mb-8 leading-relaxed">{{ solution.description }}</p>
|
||
|
||
<!-- 特性列表 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||
<div
|
||
v-for="feature in solution.features"
|
||
:key="feature"
|
||
class="flex items-center text-gray-600"
|
||
>
|
||
<UIcon name="i-lucide-check-circle" class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" />
|
||
{{ feature }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 应用场景 -->
|
||
<div class="mb-8">
|
||
<h4 class="text-lg font-semibold text-gray-900 mb-3">应用场景：</h4>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
v-for="app in solution.applications"
|
||
:key="app"
|
||
class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm"
|
||
>
|
||
{{ app }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<NuxtLink
|
||
:to="`/yuxi/industry-solutions/${solution.id}`"
|
||
class="inline-flex items-center px-8 py-4 bg-green-600 hover:bg-green-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>
|
||
</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 industryScenarios"
|
||
:key="scenario.id"
|
||
class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100"
|
||
>
|
||
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<UIcon :name="scenario.icon" class="w-8 h-8 text-green-600" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3 text-center">{{ scenario.title }}</h3>
|
||
<p class="text-gray-600 mb-4 text-center">{{ scenario.description }}</p>
|
||
<ul class="space-y-2">
|
||
<li
|
||
v-for="feature in scenario.features"
|
||
:key="feature"
|
||
class="text-sm text-gray-500 flex items-center"
|
||
>
|
||
<UIcon name="i-lucide-check" class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||
{{ feature }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</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 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="(layer, index) in technicalArchitecture"
|
||
:key="layer.title"
|
||
class="text-center group"
|
||
>
|
||
<div class="relative">
|
||
<!-- 连接线 -->
|
||
<div
|
||
v-if="index < technicalArchitecture.length - 1"
|
||
class="hidden lg:block absolute top-10 left-full w-full h-0.5 bg-gray-300 z-0"
|
||
></div>
|
||
|
||
<div class="relative z-10">
|
||
<div class="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform"
|
||
:class="layer.color">
|
||
<UIcon :name="layer.icon" class="w-10 h-10" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3">{{ layer.title }}</h3>
|
||
<p class="text-gray-600">{{ layer.description }}</p>
|
||
</div>
|
||
</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-3 gap-8">
|
||
<div
|
||
v-for="caseItem in successCases"
|
||
:key="caseItem.title"
|
||
class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow group"
|
||
>
|
||
<div class="relative h-48 overflow-hidden">
|
||
<img
|
||
:src="caseItem.image"
|
||
:alt="caseItem.title"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
<div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-semibold">
|
||
{{ caseItem.result }}
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3">{{ caseItem.title }}</h3>
|
||
<p class="text-gray-600">{{ caseItem.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系我们 -->
|
||
<section class="py-20 bg-green-600 text-white">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 class="text-3xl font-bold mb-6">需要行业解决方案？</h2>
|
||
<p class="text-xl text-green-100 mb-8">
|
||
我们的专业团队将为您提供最适合的行业解决方案
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<NuxtLink
|
||
to="/yuxi/contact"
|
||
class="px-8 py-4 bg-white hover:bg-gray-100 text-green-600 font-semibold rounded-lg transition-colors"
|
||
>
|
||
联系我们
|
||
</NuxtLink>
|
||
<NuxtLink
|
||
to="/yuxi/shared-solutions"
|
||
class="px-8 py-4 bg-green-500 hover:bg-green-400 text-white font-semibold rounded-lg transition-colors"
|
||
>
|
||
查看共享方案
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义样式 */
|
||
.group:hover .group-hover\:scale-105 {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.group:hover .group-hover\:scale-110 {
|
||
transform: scale(1.1);
|
||
}
|
||
</style>
|
||
|