449 lines
16 KiB
Vue
449 lines
16 KiB
Vue
<script lang="ts" setup>
|
||
/**
|
||
* 物联网解决方案页面
|
||
* 基于玉犀科技官网的物联网解决方案内容
|
||
*/
|
||
|
||
// 页面SEO配置
|
||
useSeoMeta({
|
||
title: '物联网解决方案 - 玉犀科技',
|
||
description: '玉犀科技提供物联网应用定制、物联网智能硬件、物联网IOT云平台等物联网解决方案',
|
||
keywords: '物联网,智能硬件,IOT云平台,物联网应用定制,物联网解决方案',
|
||
robots: 'index, follow'
|
||
})
|
||
|
||
// 物联网解决方案数据
|
||
const iotSolutions = ref([
|
||
{
|
||
id: 'application-customization',
|
||
title: '物联网应用定制',
|
||
subtitle: '规范化的开发流程，实现产品快速落地',
|
||
description: '根据客户具体需求，提供定制化的物联网应用开发服务。从需求分析到系统设计，从开发实现到部署上线，全程专业服务。',
|
||
features: [
|
||
'需求分析评估',
|
||
'系统架构设计',
|
||
'定制化开发',
|
||
'系统集成测试',
|
||
'部署上线支持',
|
||
'运维维护服务'
|
||
],
|
||
technologies: ['IoT协议', '云平台', '大数据', 'AI算法'],
|
||
image: 'https://picsum.photos/800/600?random=iot-customization',
|
||
link: '/yuxi/iot-solutions/application-customization'
|
||
},
|
||
{
|
||
id: 'smart-hardware',
|
||
title: '物联网智能硬件',
|
||
subtitle: '支持定制，满足各类硬件场景需求',
|
||
description: '提供专业的物联网智能硬件解决方案，包括传感器、控制器、通信模块等。支持多种通信协议，满足不同场景的硬件需求。',
|
||
features: [
|
||
'智能传感器',
|
||
'通信控制器',
|
||
'边缘计算设备',
|
||
'数据采集终端',
|
||
'无线通信模块',
|
||
'电源管理系统'
|
||
],
|
||
technologies: ['LoRa', 'NB-IoT', 'WiFi', '蓝牙', '4G/5G'],
|
||
image: 'https://picsum.photos/800/600?random=smart-hardware',
|
||
link: '/yuxi/iot-solutions/smart-hardware'
|
||
},
|
||
{
|
||
id: 'iot-cloud-platform',
|
||
title: '物联网IOT云平台',
|
||
subtitle: '灵活、可靠、安全，有效降低成本',
|
||
description: '基于云计算的物联网平台，提供设备管理、数据存储、分析处理、应用开发等一站式服务。支持大规模设备接入，提供稳定可靠的服务。',
|
||
features: [
|
||
'设备管理',
|
||
'数据存储',
|
||
'实时监控',
|
||
'数据分析',
|
||
'应用开发',
|
||
'安全防护'
|
||
],
|
||
technologies: ['云计算', '大数据', 'AI', '区块链'],
|
||
image: 'https://picsum.photos/800/600?random=iot-cloud',
|
||
link: '/yuxi/iot-solutions/iot-cloud-platform'
|
||
}
|
||
])
|
||
|
||
// 物联网应用场景
|
||
const iotScenarios = ref([
|
||
{
|
||
id: 'smart-city',
|
||
title: '智慧城市',
|
||
description: '城市基础设施智能化管理，提升城市运营效率',
|
||
icon: 'i-lucide-building-2',
|
||
applications: ['智能交通', '环境监测', '公共安全', '能源管理']
|
||
},
|
||
{
|
||
id: 'smart-factory',
|
||
title: '智慧工厂',
|
||
description: '工业4.0智能制造，提升生产效率和质量',
|
||
icon: 'i-lucide-factory',
|
||
applications: ['设备监控', '生产管理', '质量控制', '供应链管理']
|
||
},
|
||
{
|
||
id: 'smart-agriculture',
|
||
title: '智慧农业',
|
||
description: '精准农业管理，提高农作物产量和质量',
|
||
icon: 'i-lucide-sprout',
|
||
applications: ['环境监测', '精准灌溉', '病虫害防治', '产量预测']
|
||
},
|
||
{
|
||
id: 'smart-healthcare',
|
||
title: '智慧医疗',
|
||
description: '医疗设备智能化，提升医疗服务水平',
|
||
icon: 'i-lucide-heart-pulse',
|
||
applications: ['远程监护', '设备管理', '数据采集', '健康分析']
|
||
}
|
||
])
|
||
|
||
// 技术架构
|
||
const iotArchitecture = ref([
|
||
{
|
||
layer: '感知层',
|
||
description: '传感器、RFID、摄像头等数据采集设备',
|
||
components: ['传感器', 'RFID标签', '摄像头', 'GPS定位'],
|
||
icon: 'i-lucide-scan',
|
||
color: 'bg-blue-100 text-blue-600'
|
||
},
|
||
{
|
||
layer: '网络层',
|
||
description: '通信网络，数据传输和路由',
|
||
components: ['WiFi', '4G/5G', 'LoRa', 'NB-IoT'],
|
||
icon: 'i-lucide-network',
|
||
color: 'bg-green-100 text-green-600'
|
||
},
|
||
{
|
||
layer: '平台层',
|
||
description: '云计算平台，数据处理和存储',
|
||
components: ['云服务器', '数据库', '消息队列', 'API网关'],
|
||
icon: 'i-lucide-cloud',
|
||
color: 'bg-purple-100 text-purple-600'
|
||
},
|
||
{
|
||
layer: '应用层',
|
||
description: '业务应用，用户界面和服务',
|
||
components: ['Web应用', '移动APP', '管理后台', '数据分析'],
|
||
icon: 'i-lucide-smartphone',
|
||
color: 'bg-orange-100 text-orange-600'
|
||
}
|
||
])
|
||
|
||
// 核心优势
|
||
const coreAdvantages = ref([
|
||
{
|
||
title: '技术领先',
|
||
description: '采用最新的物联网技术，确保系统的先进性和可靠性',
|
||
icon: 'i-lucide-zap'
|
||
},
|
||
{
|
||
title: '安全可靠',
|
||
description: '多重安全防护机制，保障数据和设备安全',
|
||
icon: 'i-lucide-shield-check'
|
||
},
|
||
{
|
||
title: '易于扩展',
|
||
description: '模块化设计，支持系统灵活扩展和升级',
|
||
icon: 'i-lucide-expand'
|
||
},
|
||
{
|
||
title: '成本优化',
|
||
description: '合理的架构设计，有效降低开发和运维成本',
|
||
icon: 'i-lucide-trending-down'
|
||
}
|
||
])
|
||
|
||
// 成功案例
|
||
const successCases = ref([
|
||
{
|
||
title: '智慧园区物联网项目',
|
||
description: '为某大型园区部署物联网系统，实现设备统一管理，提升运营效率40%',
|
||
result: '效率提升40%',
|
||
image: 'https://picsum.photos/400/300?random=smart-park'
|
||
},
|
||
{
|
||
title: '工业设备监控系统',
|
||
description: '为制造企业开发设备监控系统，实现设备故障预警，减少停机时间60%',
|
||
result: '停机减少60%',
|
||
image: 'https://picsum.photos/400/300?random=industrial-monitoring'
|
||
},
|
||
{
|
||
title: '农业物联网平台',
|
||
description: '为农业合作社建设物联网平台，实现精准农业管理，提高产量25%',
|
||
result: '产量提高25%',
|
||
image: 'https://picsum.photos/400/300?random=agriculture-iot'
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-gray-50">
|
||
<!-- 页面头部 -->
|
||
<section class="bg-gradient-to-br from-indigo-600 to-purple-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-indigo-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 iotSolutions"
|
||
: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-indigo-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-indigo-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="tech in solution.technologies"
|
||
:key="tech"
|
||
class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm"
|
||
>
|
||
{{ tech }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<NuxtLink
|
||
:to="solution.link"
|
||
class="inline-flex items-center px-8 py-4 bg-indigo-600 hover:bg-indigo-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 iotScenarios"
|
||
: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-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<UIcon :name="scenario.icon" class="w-8 h-8 text-indigo-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="app in scenario.applications"
|
||
:key="app"
|
||
class="text-sm text-gray-500 flex items-center"
|
||
>
|
||
<UIcon name="i-lucide-check" class="w-4 h-4 text-indigo-500 mr-2 flex-shrink-0" />
|
||
{{ app }}
|
||
</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 iotArchitecture"
|
||
:key="layer.layer"
|
||
class="text-center group"
|
||
>
|
||
<div class="relative">
|
||
<!-- 连接线 -->
|
||
<div
|
||
v-if="index < iotArchitecture.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.layer }}</h3>
|
||
<p class="text-gray-600 mb-4">{{ layer.description }}</p>
|
||
<div class="space-y-1">
|
||
<div
|
||
v-for="component in layer.components"
|
||
:key="component"
|
||
class="text-sm text-gray-500"
|
||
>
|
||
{{ component }}
|
||
</div>
|
||
</div>
|
||
</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="advantage in coreAdvantages"
|
||
:key="advantage.title"
|
||
class="text-center group"
|
||
>
|
||
<div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-indigo-200 transition-colors">
|
||
<UIcon :name="advantage.icon" class="w-10 h-10 text-indigo-600" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3">{{ advantage.title }}</h3>
|
||
<p class="text-gray-600">{{ advantage.description }}</p>
|
||
</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-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-indigo-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-indigo-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-indigo-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-indigo-600 font-semibold rounded-lg transition-colors"
|
||
>
|
||
联系我们
|
||
</NuxtLink>
|
||
<NuxtLink
|
||
to="/yuxi/software-development"
|
||
class="px-8 py-4 bg-indigo-500 hover:bg-indigo-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>
|
||
|