WindowBird/ct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加物联网解决方案

Browse Source
This commit is contained in:
WindowBird 2025-10-07 15:45:23 +08:00
parent ac0aa53392
commit 9ab546d5bb
4 changed files with 657 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/components/AppHeader.vue
View File

@ -95,8 +95,27 @@ const items = computed<NavigationMenuItem[]>(() => [
},
{
label: '物联网解决方案',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
active: route.path.startsWith('/IoTSolutions'),
children: [
{
label: '物联网应用定制',
icon: 'i-lucide-settings',
description: '规范化的开发流程，实现产品快速落地',
to: '/IoTSolutions/applicationCustomization',
},
{
label: '物联网智能硬件',
icon: 'i-lucide-cpu',
description: '支持定制，满足各类硬件场景需求',
to: '/IoTSolutions/smartHardware',
},
{
label: '物联网IoT云平台',
icon: 'i-lucide-cloud',
description: '灵活、可靠、安全，有效降低成本',
to: '/IoTSolutions/iotCloudPlatform',
}
]
},
{
label: '关于创特',

588
app/components/IoTSolutions/applicationCustomization/index.vue Normal file
View File

@ -0,0 +1,588 @@
<script lang="ts" setup>
// 物联网系统开发数据
const iotSystemDevelopment = {
title: '物联网系统开发',
subtitle: '一站式物联网解决方案提供，携手搭建物联网生态圈',
description: '专业的物联网系统开发团队，为企业提供全方位的物联网解决方案'
}
// APP/微信/小程序用户端功能
const userClientFeatures = [
{
id: 1,
title: '蓝牙连接',
icon: 'i-lucide-bluetooth',
description: '通过蓝牙连接完成APP与智能终端间的对接'
},
{
id: 2,
title: 'GPS定位',
icon: 'i-lucide-map-pin',
description: '调用GPS定位，达到定位用户位置，记录用户运动'
},
{
id: 3,
title: '数据分享',
icon: 'i-lucide-share',
description: '将运行数据、硬件数据意见分享到站外应用，如新浪微博、微信等，与更多朋友互动'
},
{
id: 4,
title: '扫码使用',
icon: 'i-lucide-qr-code',
description: '扫码使用设备，流程简单、体验佳'
},
{
id: 5,
title: '硬件数据分析',
icon: 'i-lucide-bar-chart',
description: '实时分析硬件数据，提供智能决策支持'
}
]
// PC管理端功能
const pcManagementFeatures = [
{
id: 1,
title: '设备管理',
icon: 'i-lucide-settings',
description: '全面的设备管理功能，支持设备配置、监控和维护'
},
{
id: 2,
title: '设备监控',
icon: 'i-lucide-monitor',
description: '实时监控设备状态，及时发现和处理异常情况'
},
{
id: 3,
title: '生命周期管理',
icon: 'i-lucide-clock',
description: '完整的设备生命周期管理，从采购到报废全程跟踪'
},
{
id: 4,
title: '维修工单管理',
icon: 'i-lucide-wrench',
description: '高效的维修工单管理系统，提升维护效率'
},
{
id: 5,
title: '合同管理',
icon: 'i-lucide-file-text',
description: '完善的合同管理功能，确保合规运营'
},
{
id: 6,
title: '工单流程管理',
icon: 'i-lucide-workflow',
description: '灵活的工单流程管理，支持自定义业务流程'
}
]
// APP移动运维端功能
const mobileOandMFeatures = [
{
id: 1,
title: '实时监控',
icon: 'i-lucide-activity',
description: '监控所有设备位置、运行状态，实时掌握设备情况'
},
{
id: 2,
title: '权限分配',
icon: 'i-lucide-user-check',
description: '手机权限分配，支持厂家-经销商-合同能源管理企业-用户等角色管理'
},
{
id: 3,
title: '工单流转',
icon: 'i-lucide-arrow-right-left',
description: '手机工单流转，提升工作效率'
},
{
id: 4,
title: '扫码注册',
icon: 'i-lucide-scan',
description: '扫描二维码注册，识别当前设备所有参数、运行信息、维护人员及历史消息等'
},
{
id: 5,
title: '售后服务',
icon: 'i-lucide-headphones',
description: '售后拍照回传、信息录入、抄表，提供完善的售后服务支持'
}
]
// 系统特性
const systemFeatures = [
{
id: 1,
title: '模块化设计',
icon: 'i-lucide-package',
description: '采用模块化设计，简便易用，高度自定义，无需二次开发'
},
{
id: 2,
title: '高度自定义',
icon: 'i-lucide-settings-2',
description: '根据用户需求配置各种应用模块，灵活适应不同业务场景'
},
{
id: 3,
title: '无需二次开发',
icon: 'i-lucide-zap',
description: '开箱即用的解决方案，快速部署，降低开发成本'
}
]
</script>
<template>
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
<!-- Hero Section - 物联网系统开发 -->
<section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
<!-- 背景 -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<!-- 几何图案 -->
<div class="absolute inset-0 opacity-20">
<div class="absolute inset-0">
<!-- 网格图案 -->
<div
v-for="i in 20"
:key="i"
class="absolute w-4 h-4 border border-blue-400/30 rounded"
:style="{
left: Math.random() * 100 + '%',
top: Math.random() * 100 + '%',
transform: `rotate(${Math.random() * 360}deg)`
}"
></div>
</div>
</div>
<!-- 发光圆形 -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96">
<div class="w-full h-full rounded-full border-2 border-dashed border-blue-400/50 animate-pulse"></div>
<div class="absolute inset-8 rounded-full border border-dashed border-blue-300/30 animate-pulse" style="animation-delay: 0.5s"></div>
</div>
<!-- 曲线线条 -->
<div class="absolute bottom-0 right-0 w-64 h-64">
<svg class="w-full h-full text-blue-400/30" viewBox="0 0 100 100">
<path d="M0,80 Q30,20 60,40 T100,20" stroke="currentColor" stroke-width="2" fill="none" class="animate-pulse"/>
<path d="M0,60 Q20,10 50,30 T100,10" stroke="currentColor" stroke-width="1" fill="none" class="animate-pulse" style="animation-delay: 1s"/>
</svg>
</div>
<!-- 手部线框 -->
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-32 h-32">
<svg class="w-full h-full text-blue-400" viewBox="0 0 100 100">
<path d="M20,80 L30,70 L40,75 L50,65 L60,70 L70,60 L80,65 L85,55" stroke="currentColor" stroke-width="2" fill="none"/>
<circle cx="25" cy="75" r="3" fill="currentColor"/>
<circle cx="35" cy="70" r="3" fill="currentColor"/>
<circle cx="45" cy="75" r="3" fill="currentColor"/>
<circle cx="55" cy="65" r="3" fill="currentColor"/>
<circle cx="65" cy="70" r="3" fill="currentColor"/>
<circle cx="75" cy="60" r="3" fill="currentColor"/>
<circle cx="80" cy="65" r="3" fill="currentColor"/>
<circle cx="85" cy="55" r="3" fill="currentColor"/>
</svg>
</div>
</div>
<!-- 内容 -->
<div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center text-white">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
{{ iotSystemDevelopment.title }}
</h1>
<p class="text-xl md:text-2xl text-blue-200 dark:text-blue-300 mb-8 max-w-4xl mx-auto leading-relaxed">
{{ iotSystemDevelopment.subtitle }}
</p>
<p class="text-lg md:text-xl text-blue-100 dark:text-blue-200 max-w-2xl mx-auto">
{{ iotSystemDevelopment.description }}
</p>
</div>
</div>
</section>
<!-- APP/微信/小程序用户端 -->
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- 标题区域 -->
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
APP/微信/小程序用户端
</h2>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- 手机展示 -->
<div class="relative flex justify-center items-center">
<div class="relative w-64 h-96 md:w-80 md:h-[480px]">
<!-- 手机外壳 -->
<div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
<!-- 应用界面 -->
<div class="p-4 h-full">
<!-- 通知区域 -->
<div class="flex items-center mb-4">
<div class="w-8 h-4 bg-pink-200 dark:bg-pink-800 rounded mr-2"></div>
<div class="w-12 h-4 bg-pink-200 dark:bg-pink-800 rounded"></div>
</div>
<!-- 用户信息 -->
<div class="text-center mb-6">
<div class="w-16 h-16 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-2 flex items-center justify-center">
<UIcon name="i-lucide-user" class="w-8 h-8 text-gray-600 dark:text-gray-300" />
</div>
<div class="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
<div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mx-auto"></div>
</div>
<!-- 聊天区域 -->
<div class="flex justify-end mb-4">
<div class="w-20 h-12 bg-gray-900 dark:bg-gray-100 rounded-lg flex items-center justify-center">
<div class="w-6 h-4 bg-white dark:bg-gray-800 rounded"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 功能连接点 -->
<div class="absolute inset-0">
<!-- 蓝牙连接 -->
<div class="absolute -left-8 top-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
蓝牙连接
</div>
</div>
<!-- GPS定位 -->
<div class="absolute -right-8 top-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
GPS定位
</div>
</div>
<!-- 扫码使用 -->
<div class="absolute -right-8 bottom-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
扫码使用
</div>
</div>
<!-- 硬件数据分析 -->
<div class="absolute -left-8 bottom-1/3">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
硬件数据分析
</div>
</div>
<!-- 连接线 -->
<svg class="absolute inset-0 w-full h-full pointer-events-none">
<line x1="0" y1="25%" x2="20%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
<line x1="80%" y1="25%" x2="100%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
<line x1="80%" y1="75%" x2="100%" y2="75%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
<line x1="0" y1="66%" x2="20%" y2="66%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
</svg>
</div>
</div>
</div>
<!-- 功能列表 -->
<div class="space-y-6">
<div
v-for="feature in userClientFeatures"
:key="feature.id"
class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
>
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{{ feature.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300">
{{ feature.description }}
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PC管理端 -->
<section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- 标题区域 -->
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
PC管理端
</h2>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- 功能列表 -->
<div class="space-y-6">
<div
v-for="feature in pcManagementFeatures"
:key="feature.id"
class="flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300"
>
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{{ feature.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300">
{{ feature.description }}
</p>
</div>
</div>
</div>
<!-- 电脑展示 -->
<div class="relative flex justify-center items-center">
<div class="relative w-80 h-64 md:w-96 md:h-72">
<!-- 电脑外壳 -->
<div class="absolute inset-0 bg-gray-200 dark:bg-gray-600 rounded-lg shadow-2xl">
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
<!-- 屏幕内容 -->
<div class="p-4 h-full">
<!-- 顶部卡片 -->
<div class="flex space-x-2 mb-4">
<div class="w-16 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
<div class="w-20 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
</div>
<!-- 图表区域 -->
<div class="flex space-x-4 mb-4">
<!-- 饼图 -->
<div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
<div class="w-12 h-12 bg-red-500 rounded-full"></div>
</div>
<!-- 柱状图 -->
<div class="flex-1 space-y-1">
<div class="h-3 bg-gray-200 dark:bg-gray-600 rounded"></div>
<div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
<div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
</div>
</div>
<!-- 底部图表 -->
<div class="space-y-2">
<div class="h-2 bg-red-500 rounded"></div>
<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded"></div>
<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
</div>
</div>
</div>
</div>
<!-- 功能标签 -->
<div class="absolute -top-4 -left-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
<div class="w-8 h-8 bg-red-100 dark:bg-red-900 rounded flex items-center justify-center">
<UIcon name="i-lucide-wrench" class="w-4 h-4 text-red-600 dark:text-red-400" />
</div>
</div>
<div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
<div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center">
<UIcon name="i-lucide-check-square" class="w-4 h-4 text-blue-600 dark:text-blue-400" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- APP移动运维端 -->
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- 标题区域 -->
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
APP移动运维端
</h2>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- 手机展示 -->
<div class="relative flex justify-center items-center">
<div class="relative w-64 h-96 md:w-80 md:h-[480px]">
<!-- 手机外壳 -->
<div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
<!-- 应用界面 -->
<div class="p-4 h-full">
<!-- 进度环 -->
<div class="flex justify-center mb-6">
<div class="relative w-20 h-20">
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
<circle cx="50" cy="50" r="40" stroke="#ef4444" stroke-width="8" fill="none"
stroke-dasharray="251.2" stroke-dashoffset="105.5"/>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-sm font-bold text-gray-900 dark:text-white">58%</span>
</div>
</div>
</div>
<!-- 列表项 -->
<div class="space-y-3">
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-5/6"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-2/3"></div>
</div>
</div>
</div>
</div>
<!-- 功能连接点 -->
<div class="absolute inset-0">
<!-- 实时监控 -->
<div class="absolute -left-8 top-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
实时监控
</div>
</div>
<!-- 权限分配 -->
<div class="absolute -right-8 top-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
权限分配
</div>
</div>
<!-- 工单流转 -->
<div class="absolute -left-8 top-1/2">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
工单流转
</div>
</div>
<!-- 扫码注册 -->
<div class="absolute -left-8 bottom-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
扫码注册
</div>
</div>
<!-- 售后服务 -->
<div class="absolute -right-8 bottom-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
售后服务
</div>
</div>
<!-- 连接线 -->
<svg class="absolute inset-0 w-full h-full pointer-events-none">
<circle cx="50%" cy="50%" r="45%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
</svg>
</div>
</div>
</div>
<!-- 功能列表 -->
<div class="space-y-6">
<div
v-for="feature in mobileOandMFeatures"
:key="feature.id"
class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
>
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{{ feature.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300">
{{ feature.description }}
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 系统特性 -->
<section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- 标题区域 -->
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
系统特性
</h2>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
</div>
<!-- 特性展示 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div
v-for="feature in systemFeatures"
:key="feature.id"
class="text-center p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
>
<div class="w-16 h-16 mx-auto mb-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
<UIcon :name="feature.icon" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
{{ feature.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
{{ feature.description }}
</p>
</div>
</div>
</div>
</section>
</div>
</template>
<style scoped>
/* 自定义动画 */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
/* 响应式调整 */
@media (max-width: 768px) {
.grid-cols-3 {
grid-template-columns: 1fr;
}
}
</style>

90
app/components/softwareDevelopment/MiniProgram/index.vue
View File

@ -3,7 +3,7 @@
const qualityAssurance = {
title: '品质保证 源码交付',
year: '2016',
company: 'New Yu Xi',
company: '创特',
description: '专业的软件开发团队，提供高品质的源码交付服务'
}
@ -100,42 +100,45 @@ const sevenGuarantees = [
<!-- Hero Section - 品质保证 源码交付 -->
<section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
<!-- 背景 -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<div
class="absolute inset-0 bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<!-- 星空效果 -->
<div class="absolute inset-0">
<div
v-for="i in 50"
:key="i"
class="absolute w-1 h-1 bg-white rounded-full animate-pulse"
:style="{
<div
v-for="i in 50"
:key="i"
:style="{
left: Math.random() * 100 + '%',
top: Math.random() * 100 + '%',
animationDelay: Math.random() * 3 + 's'
}"
></div>
class="absolute w-1 h-1 bg-white rounded-full animate-pulse"
/>
</div>
<!-- 地球效果 -->
<div class="absolute right-8 top-1/2 transform -translate-y-1/2 w-64 h-64 md:w-80 md:h-80">
<div class="w-full h-full rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-500 dark:to-blue-700 relative overflow-hidden">
<div
class="w-full h-full rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-500 dark:to-blue-700 relative overflow-hidden">
<!-- 地球纹理 -->
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
<div
class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"/>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"/>
<!-- 城市灯光效果 -->
<div
v-for="i in 20"
:key="i"
class="absolute w-1 h-1 bg-white rounded-full animate-ping"
:style="{
<div
v-for="i in 20"
:key="i"
:style="{
left: Math.random() * 100 + '%',
top: Math.random() * 100 + '%',
animationDelay: Math.random() * 2 + 's'
}"
></div>
class="absolute w-1 h-1 bg-white rounded-full animate-ping"
/>
</div>
</div>
</div>
<!-- 内容 -->
<div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center text-white">
@ -160,7 +163,7 @@ const sevenGuarantees = [
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- 标题区域 -->
<div class="text-center mb-16">
<div class="inline-block w-8 h-8 bg-blue-600 dark:bg-blue-500 rounded-full mb-4"></div>
<div class="inline-block w-8 h-8 bg-blue-600 dark:bg-blue-500 rounded-full mb-4"/>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-2">
五大技术核心
</h2>
@ -171,26 +174,27 @@ const sevenGuarantees = [
<!-- 技术展示 -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 md:gap-8">
<div
v-for="tech in coreTechnologies"
:key="tech.id"
class="group text-center"
<div
v-for="tech in coreTechnologies"
:key="tech.id"
class="group text-center"
>
<!-- 圆形图标 -->
<div class="relative mx-auto mb-6 w-24 h-24 md:w-28 md:h-28 lg:w-32 lg:h-32">
<div class="w-full h-full rounded-full border-2 border-blue-200 dark:border-blue-700 bg-white dark:bg-gray-700 flex items-center justify-center group-hover:border-blue-500 dark:group-hover:border-blue-400 transition-all duration-300 group-hover:scale-110">
<UIcon
:name="tech.icon"
class="w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300"
<div
class="w-full h-full rounded-full border-2 border-blue-200 dark:border-blue-700 bg-white dark:bg-gray-700 flex items-center justify-center group-hover:border-blue-500 dark:group-hover:border-blue-400 transition-all duration-300 group-hover:scale-110">
<UIcon
:name="tech.icon"
class="w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300"
/>
</div>
</div>
<!-- 标题 -->
<h3 class="text-lg md:text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
{{ tech.title }}
</h3>
<!-- 描述 -->
<p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
{{ tech.description }}
@ -211,27 +215,27 @@ const sevenGuarantees = [
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-4">
Seven guarantee
</p>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"/>
</div>
<!-- 保障卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
<div
v-for="(guarantee, index) in sevenGuarantees"
:key="guarantee.id"
class="group bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
:class="index === 6 ? 'md:col-span-2 lg:col-span-1 xl:col-span-1' : ''"
<div
v-for="(guarantee, index) in sevenGuarantees"
:key="guarantee.id"
:class="index === 6 ? 'md:col-span-2 lg:col-span-1 xl:col-span-1' : ''"
class="group bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
>
<!-- 图片区域 -->
<div class="relative h-48 md:h-56 overflow-hidden">
<img
:src="guarantee.image"
:alt="guarantee.chineseTitle"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
<img
:alt="guarantee.chineseTitle"
:src="guarantee.image"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
>
<!-- 叠加层 -->
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"/>
<!-- 标题 -->
<div class="absolute bottom-4 left-4 right-4">
<h3 class="text-2xl md:text-3xl font-bold text-white mb-1">
@ -242,7 +246,7 @@ const sevenGuarantees = [
</p>
</div>
</div>
<!-- 描述区域 -->
<div class="p-6">
<p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">

2
app/components/industrySolutions/ElectCar/item1.vue → app/pages/IoTSolutions/applicationCustomization.vue
View File

@ -4,7 +4,7 @@
<template>
<view>
145
<IoTSolutionsApplicationCustomization/>
</view>
</template>