321 lines
16 KiB
Vue
321 lines
16 KiB
Vue
<template>
|
||
<div class=" bg-white dark:bg-gray-900">
|
||
|
||
|
||
<div class="text-center mb-16">
|
||
<h1 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||
共享电动车 + 物联网设备
|
||
</h1>
|
||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||
智能物联技术，打造安全高效的共享出行体验
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 功能特性网格 -->
|
||
<section class="py-20">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
|
||
<!-- 物联网设备数据传输 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<!-- 图标区域 -->
|
||
<div
|
||
class="flex-shrink-0 w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||
<svg
|
||
class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="flex-1">
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||
物联网设备数据传输
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
通过联网中控及车载控制器设备实现实时数据传输，确保车辆状态实时监控
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设备示意图 -->
|
||
<div
|
||
class="mt-6 relative h-32 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/10 rounded-lg p-4">
|
||
<div class="flex items-center justify-center h-full">
|
||
<div class="flex space-x-4">
|
||
<!-- 中控设备 -->
|
||
<div class="w-12 h-8 bg-blue-500 rounded-lg relative">
|
||
<div class="absolute top-1 left-1 w-2 h-2 bg-green-400 rounded-full animate-pulse"/>
|
||
</div>
|
||
<!-- 数据传输示意 -->
|
||
<div class="flex items-center space-x-1">
|
||
<div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0s"/>
|
||
<div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.2s"/>
|
||
<div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.4s"/>
|
||
</div>
|
||
<!-- 车载控制器 -->
|
||
<div class="w-10 h-6 bg-gray-800 rounded relative">
|
||
<div class="absolute top-1 left-1 w-1 h-1 bg-yellow-400 rounded-full"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 防水防盗防高温 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<!-- 图标区域 -->
|
||
<div
|
||
class="flex-shrink-0 w-16 h-16 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||
<svg
|
||
class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="flex-1">
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||
防水防盗防高温
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
车辆及设备采用防水式设计、材料采用防高温材料，并加载智能防盗系统
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 防护示意图 -->
|
||
<div
|
||
class="mt-6 relative h-32 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/10 rounded-lg p-4">
|
||
<div class="flex items-center justify-center h-full space-x-6">
|
||
<!-- 防水图标 -->
|
||
<div class="text-center">
|
||
<div class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center mx-auto mb-2">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<span class="text-xs text-gray-600 dark:text-gray-400">防水设计</span>
|
||
</div>
|
||
|
||
<!-- 防盗图标 -->
|
||
<div class="text-center">
|
||
<div class="w-10 h-10 bg-red-400 rounded-full flex items-center justify-center mx-auto mb-2">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<span class="text-xs text-gray-600 dark:text-gray-400">智能防盗</span>
|
||
</div>
|
||
|
||
<!-- 防高温图标 -->
|
||
<div class="text-center">
|
||
<div class="w-10 h-10 bg-orange-400 rounded-full flex items-center justify-center mx-auto mb-2">
|
||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<span class="text-xs text-gray-600 dark:text-gray-400">防高温</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 出骑行区提醒 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<!-- 图标区域 -->
|
||
<div
|
||
class="flex-shrink-0 w-16 h-16 bg-yellow-100 dark:bg-yellow-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||
<svg
|
||
class="w-8 h-8 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="flex-1">
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||
出骑行区提醒
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
车辆出骑行区，车辆喇叭自动发出语音提醒，若不按语音要求返回则车辆自动断电
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提醒示意图 -->
|
||
<div
|
||
class="mt-6 relative h-32 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/10 rounded-lg p-4">
|
||
<div class="flex items-center justify-center h-full">
|
||
<div class="text-center">
|
||
<div
|
||
class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-2 animate-pulse">
|
||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">超出骑行区域</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 在线寻车 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<!-- 图标区域 -->
|
||
<div
|
||
class="flex-shrink-0 w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||
<svg
|
||
class="w-8 h-8 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
<path
|
||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="flex-1">
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||
在线寻车
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
根据车辆定位及电量信息，可在线查找最合适的可骑行车辆
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 寻车示意图 -->
|
||
<div
|
||
class="mt-6 relative h-32 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-lg p-4">
|
||
<div class="flex items-center justify-center h-full">
|
||
<div class="relative">
|
||
<!-- 地图背景 -->
|
||
<div class="w-24 h-16 bg-blue-100 dark:bg-blue-900 rounded-lg relative">
|
||
<!-- 车辆标记 -->
|
||
<div class="absolute top-4 left-6 w-3 h-3 bg-green-500 rounded-full animate-bounce"/>
|
||
<div class="absolute top-8 left-10 w-3 h-3 bg-yellow-500 rounded-full"/>
|
||
<div class="absolute top-2 left-14 w-3 h-3 bg-red-500 rounded-full"/>
|
||
</div>
|
||
<!-- 定位图标 -->
|
||
<div
|
||
class="absolute -top-2 -right-2 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center">
|
||
<svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||
<path
|
||
clip-rule="evenodd"
|
||
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
|
||
fill-rule="evenodd"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 规范停车区 -->
|
||
<div
|
||
class="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||
<div class="flex items-start space-x-4">
|
||
<!-- 图标区域 -->
|
||
<div
|
||
class="flex-shrink-0 w-16 h-16 bg-indigo-100 dark:bg-indigo-900 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||
<svg
|
||
class="w-8 h-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24">
|
||
<path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="flex-1">
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||
规范停车区
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
通过运营管理平台设置停车区，若用户不在停车区内停车，则需额外支付车辆调度费
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 停车区示意图 -->
|
||
<div
|
||
class="mt-6 relative h-32 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/10 rounded-lg p-4">
|
||
<div class="flex items-center justify-center h-full">
|
||
<div class="relative">
|
||
<!-- 停车区域 -->
|
||
<div
|
||
class="w-20 h-12 bg-green-100 dark:bg-green-900 border-2 border-green-400 dark:border-green-600 rounded-lg relative">
|
||
<!-- 停车标记 -->
|
||
<div
|
||
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-6 bg-green-400 dark:bg-green-600 rounded flex items-center justify-center">
|
||
<span class="text-white text-xs font-bold">P</span>
|
||
</div>
|
||
</div>
|
||
<!-- 车辆图标 -->
|
||
<div
|
||
class="absolute -right-4 top-1/2 transform -translate-y-1/2 w-8 h-4 bg-gray-600 rounded-sm"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script lang="ts" setup>
|
||
</script>
|
||
<style scoped>
|
||
/* 自定义动画 */
|
||
@keyframes float {
|
||
0%, 100% {
|
||
transform: translateY(0px);
|
||
}
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
}
|
||
|
||
.animate-float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
</style> |