472 lines
17 KiB
Vue
472 lines
17 KiB
Vue
<script lang="ts" setup>
|
||
// 智能控制器功能特性
|
||
const controllerFeatures = [
|
||
{
|
||
icon: 'i-lucide-bluetooth',
|
||
title: '蓝牙GPRS双通道解锁',
|
||
description: '支持蓝牙和GPRS双重通信，确保解锁稳定可靠'
|
||
},
|
||
{
|
||
icon: 'i-lucide-key-round',
|
||
title: '一键启动、无需钥匙',
|
||
description: '智能启动系统，告别传统钥匙，操作更便捷'
|
||
},
|
||
{
|
||
icon: 'i-lucide-map-pin',
|
||
title: '卫星定位、精准跟踪',
|
||
description: 'GPS定位技术，实时掌握车辆位置信息'
|
||
},
|
||
{
|
||
icon: 'i-lucide-shield-alert',
|
||
title: '防盗报警、不怕丢失',
|
||
description: '智能防盗系统，异常情况及时报警通知'
|
||
}
|
||
]
|
||
|
||
// 快速定制服务
|
||
const customizationServices = [
|
||
{
|
||
icon: 'i-lucide-smartphone',
|
||
title: '独立APP定制',
|
||
description: '15个工作日完成独立应用上线'
|
||
},
|
||
{
|
||
icon: 'i-lucide-zap',
|
||
title: '小程序开发',
|
||
description: '快速定制微信小程序解决方案'
|
||
},
|
||
{
|
||
icon: 'i-lucide-settings',
|
||
title: '一键管理',
|
||
description: '品牌信息一键管理，操作简单便捷'
|
||
},
|
||
{
|
||
icon: 'i-lucide-clock',
|
||
title: '快速交付',
|
||
description: '高效开发流程，确保项目按时交付'
|
||
}
|
||
]
|
||
|
||
// 用户端功能
|
||
const userFeatures = [
|
||
{
|
||
icon: 'i-lucide-battery',
|
||
title: '智能电量计算',
|
||
description: '精准计算剩余电量，合理安排出行'
|
||
},
|
||
{
|
||
icon: 'i-lucide-key',
|
||
title: '智能无钥匙启停',
|
||
description: '手机一键启动，告别传统钥匙'
|
||
},
|
||
{
|
||
icon: 'i-lucide-map',
|
||
title: '实时定位轨迹查询',
|
||
description: '实时查看车辆位置，历史轨迹一目了然'
|
||
},
|
||
{
|
||
icon: 'i-lucide-shield',
|
||
title: '智能防盗',
|
||
description: '多重防盗保护，车辆安全有保障'
|
||
},
|
||
{
|
||
icon: 'i-lucide-users',
|
||
title: '车主授权家庭共享',
|
||
description: '支持家庭成员共享使用，权限管理灵活'
|
||
},
|
||
{
|
||
icon: 'i-lucide-search',
|
||
title: '一键寻车',
|
||
description: '快速定位车辆位置，找车不再困难'
|
||
},
|
||
{
|
||
icon: 'i-lucide-lock',
|
||
title: '远程设防撤防',
|
||
description: '远程控制车辆状态，安全便捷'
|
||
},
|
||
{
|
||
icon: 'i-lucide-gauge',
|
||
title: '速度检测',
|
||
description: '实时监测行驶速度，安全驾驶提醒'
|
||
}
|
||
]
|
||
|
||
// 管理平台功能
|
||
const managementFeatures = [
|
||
{
|
||
icon: 'i-lucide-monitor',
|
||
title: '实时车辆监控',
|
||
description: '全方位监控车辆状态，数据实时更新'
|
||
},
|
||
{
|
||
icon: 'i-lucide-bell',
|
||
title: '智能异常报警',
|
||
description: '异常情况自动报警，及时处理问题'
|
||
},
|
||
{
|
||
icon: 'i-lucide-remote',
|
||
title: '远程车辆控制',
|
||
description: '远程控制车辆功能，管理更高效'
|
||
},
|
||
{
|
||
icon: 'i-lucide-database',
|
||
title: '用户数据查看',
|
||
description: '详细用户数据分析，支持决策制定'
|
||
},
|
||
{
|
||
icon: 'i-lucide-cog',
|
||
title: '智能服务设置',
|
||
description: '灵活配置服务参数，满足不同需求'
|
||
},
|
||
{
|
||
icon: 'i-lucide-user-check',
|
||
title: '权限管理',
|
||
description: '多级权限管理，确保系统安全'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="bg-gray-50 dark:bg-gray-900">
|
||
<!-- Hero Section - 创特科技倾心打造 -->
|
||
<section class="py-16 md:py-20 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<!-- 电动车图片 -->
|
||
<div class="relative">
|
||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
|
||
<img
|
||
alt="智能电动车"
|
||
class="w-full h-64 md:h-80 object-cover rounded-lg"
|
||
src="https://picsum.photos/600/400?random=electric-scooter"
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文字内容 -->
|
||
<div class="text-center lg:text-left">
|
||
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||
创特科技倾心打造
|
||
</h1>
|
||
<div class="text-2xl md:text-3xl font-semibold text-red-600 dark:text-red-400 mb-4">
|
||
APP+智能中控+数据采集+云储存
|
||
</div>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
电动车智能改造，建立智慧出行生态圈
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 智慧电动车解决方案三部分 -->
|
||
<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 font-bold text-gray-900 dark:text-white mb-4">
|
||
智慧电动车解决方案
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300">
|
||
从传统电动车到智能出行生态的完整解决方案
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<!-- 传统电动车 -->
|
||
<div class="text-center bg-gray-50 dark:bg-gray-700 rounded-2xl p-8">
|
||
<div class="mb-6">
|
||
<img
|
||
alt="传统电动车"
|
||
class="w-full h-48 object-cover rounded-lg mx-auto"
|
||
src="https://picsum.photos/300/200?random=traditional-scooter"
|
||
>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||
传统电动车
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
基础出行工具，功能单一，缺乏智能化
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 智能中控 -->
|
||
<div class="text-center bg-gray-50 dark:bg-gray-700 rounded-2xl p-8">
|
||
<div class="mb-6">
|
||
<img
|
||
alt="智能中控"
|
||
class="w-full h-48 object-cover rounded-lg mx-auto"
|
||
src="https://picsum.photos/300/200?random=smart-controller"
|
||
>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||
智能中控
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
核心控制单元，实现车辆智能化升级
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 系统软件 -->
|
||
<div class="text-center bg-gray-50 dark:bg-gray-700 rounded-2xl p-8">
|
||
<div class="mb-6">
|
||
<img
|
||
alt="系统软件"
|
||
class="w-full h-48 object-cover rounded-lg mx-auto"
|
||
src="https://picsum.photos/300/200?random=system-software"
|
||
>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||
系统软件
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
管理平台和用户端应用，完整生态闭环
|
||
</p>
|
||
</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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<!-- 图片区域 -->
|
||
<div class="relative flex justify-center items-center min-h-[400px]">
|
||
<div class="relative">
|
||
<img
|
||
alt="电动车智能控制器"
|
||
class="max-w-full h-auto rounded-lg shadow-xl"
|
||
src="https://picsum.photos/500/400?random=scooter-controller"
|
||
>
|
||
<!-- 信号效果 -->
|
||
<div class="absolute inset-0 flex justify-center items-center">
|
||
<div class="absolute w-48 h-48 rounded-full border border-red-300 animate-ping-slow"/>
|
||
<div class="absolute w-64 h-64 rounded-full border border-red-300 animate-ping-slow delay-100"/>
|
||
<div class="absolute w-80 h-80 rounded-full border border-red-300 animate-ping-slow delay-200"/>
|
||
<!-- 核心组件 -->
|
||
<div
|
||
class="absolute w-16 h-16 bg-red-600 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-lg">
|
||
芯
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文字内容 -->
|
||
<div>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
|
||
一个配件实现车辆智能化
|
||
</h2>
|
||
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
|
||
为车厂量身打造，对电动车隐蔽加装智能控制器，增加智能防盗功能。智能控制器是系统核心，具备车辆定位信息采集、数据双向传输等功能，通过联动电动车控制系统和BMS电池系统实现各应用功能。
|
||
</p>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div
|
||
v-for="feature in controllerFeatures"
|
||
:key="feature.title"
|
||
class="flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm"
|
||
>
|
||
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3 flex-shrink-0 mt-1"/>
|
||
<div>
|
||
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">{{ feature.title }}</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">{{ feature.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 快速定制能力 -->
|
||
<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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<!-- 文字内容 -->
|
||
<div>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
|
||
快速定制能力实现品牌运营
|
||
</h2>
|
||
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
|
||
独立APP/小程序快速定制，15个工作日完成独立应用上线，一键管理品牌信息。
|
||
</p>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div
|
||
v-for="service in customizationServices"
|
||
:key="service.title"
|
||
class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
|
||
>
|
||
<UIcon :name="service.icon" class="w-6 h-6 text-green-600 dark:text-green-400 mr-3 flex-shrink-0 mt-1"/>
|
||
<div>
|
||
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">{{ service.title }}</h3>
|
||
<p class="text-sm text-gray-600 dark:text-gray-300">{{ service.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片区域 -->
|
||
<div class="relative">
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<img
|
||
alt="电动车前部"
|
||
class="w-full h-48 object-cover rounded-lg shadow-lg"
|
||
src="https://picsum.photos/300/200?random=scooter-front"
|
||
>
|
||
<img
|
||
alt="电动车后部"
|
||
class="w-full h-48 object-cover rounded-lg shadow-lg"
|
||
src="https://picsum.photos/300/200?random=scooter-rear"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 智能电动车小程序/APP 和 管理平台 -->
|
||
<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 font-bold text-gray-900 dark:text-white mb-4">
|
||
完整解决方案
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300">
|
||
用户端与管理端双平台，构建完整智能出行生态
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
<!-- 用户端 - 小程序/APP -->
|
||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
|
||
<div class="text-center mb-8">
|
||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||
智能电动车
|
||
<span class="text-red-600 dark:text-red-400">小程序/APP</span>
|
||
</h3>
|
||
</div>
|
||
|
||
<!-- 手机界面模拟 -->
|
||
<div class="relative mx-auto w-64 h-96 bg-black rounded-3xl p-2 mb-8">
|
||
<div class="w-full h-full bg-white rounded-2xl overflow-hidden">
|
||
<div class="h-8 bg-gray-100 flex items-center justify-center">
|
||
<div class="w-16 h-1 bg-gray-300 rounded-full"/>
|
||
</div>
|
||
<div class="p-4 h-full bg-gradient-to-b from-red-50 to-white">
|
||
<div class="text-right mb-4">
|
||
<UButton color="gray" size="xs" variant="outline">登录</UButton>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="w-32 h-32 mx-auto mb-4 bg-red-500 rounded-lg flex items-center justify-center">
|
||
<UIcon class="w-16 h-16 text-white" name="i-lucide-zap"/>
|
||
</div>
|
||
<h4 class="text-lg font-semibold text-gray-900">智能电动车</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能列表 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div
|
||
v-for="feature in userFeatures"
|
||
:key="feature.title"
|
||
class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
|
||
>
|
||
<UIcon :name="feature.icon" class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0"/>
|
||
<span class="text-sm text-gray-700 dark:text-gray-200">{{ feature.title }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 管理端 - 管理平台 -->
|
||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
|
||
<div class="text-center mb-8">
|
||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||
智能电动车
|
||
<span class="text-red-600 dark:text-red-400">管理平台</span>
|
||
</h3>
|
||
</div>
|
||
|
||
<!-- 电脑界面模拟 -->
|
||
<div class="relative mx-auto w-80 h-48 bg-gray-200 rounded-lg p-2 mb-8">
|
||
<div class="w-full h-full bg-white rounded shadow-inner overflow-hidden">
|
||
<!-- 侧边栏 -->
|
||
<div class="flex h-full">
|
||
<div class="w-20 bg-gray-100 p-2">
|
||
<div class="space-y-2">
|
||
<div class="w-6 h-6 bg-blue-500 rounded mb-1"/>
|
||
<div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
|
||
<div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
|
||
<div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
|
||
<div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
|
||
<div class="w-6 h-6 bg-gray-300 rounded"/>
|
||
</div>
|
||
</div>
|
||
<!-- 主内容区 -->
|
||
<div class="flex-1 p-3">
|
||
<div class="h-4 bg-gray-200 rounded mb-2"/>
|
||
<div class="h-4 bg-gray-200 rounded mb-2 w-3/4"/>
|
||
<div class="space-y-1">
|
||
<div class="h-3 bg-gray-100 rounded"/>
|
||
<div class="h-3 bg-gray-100 rounded"/>
|
||
<div class="h-3 bg-gray-100 rounded w-5/6"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能列表 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div
|
||
v-for="feature in managementFeatures"
|
||
:key="feature.title"
|
||
class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
|
||
>
|
||
<UIcon :name="feature.icon" class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0"/>
|
||
<span class="text-sm text-gray-700 dark:text-gray-200">{{ feature.title }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义动画效果 */
|
||
@keyframes ping-slow {
|
||
0% {
|
||
transform: scale(0.8);
|
||
opacity: 0.5;
|
||
}
|
||
100% {
|
||
transform: scale(1.2);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.animate-ping-slow {
|
||
animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||
}
|
||
|
||
.animate-ping-slow.delay-100 {
|
||
animation-delay: 0.1s;
|
||
}
|
||
|
||
.animate-ping-slow.delay-200 {
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.grid-cols-2 {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|