201 lines
10 KiB
Vue
201 lines
10 KiB
Vue
<template>
|
||
<section class=" bg-white dark:bg-gray-900 py-20 px-4 sm:px-6 lg:px-8">
|
||
<div class="max-w-7xl mx-auto">
|
||
<!-- 主标题 -->
|
||
<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>
|
||
|
||
<!-- 解决方案网格 -->
|
||
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||
<!-- 定制化共享电动车 -->
|
||
<div
|
||
class="group relative bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-yellow-400/10 to-yellow-600/5 dark:from-yellow-500/10 dark:to-yellow-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
|
||
|
||
<div class="relative z-10">
|
||
<!-- 图标区域 -->
|
||
<div
|
||
class="w-20 h-20 bg-yellow-500 dark:bg-yellow-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||
<svg class="w-10 h-10 text-white" 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>
|
||
|
||
<!-- 内容 -->
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">定制化共享电动车</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
专为共享场景设计的电动车，具备耐用性、安全性和智能化特性，满足不同运营需求
|
||
</p>
|
||
|
||
<!-- 电动车示意图 -->
|
||
<div class="mt-6 relative h-32">
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div class="w-24 h-16 bg-yellow-400 dark:bg-yellow-600 rounded-lg relative">
|
||
<!-- 车架 -->
|
||
<div class="absolute top-2 left-2 w-20 h-8 bg-yellow-300 dark:bg-yellow-500 rounded"/>
|
||
<!-- 车轮 -->
|
||
<div class="absolute bottom-0 left-2 w-4 h-4 bg-gray-800 dark:bg-gray-700 rounded-full"/>
|
||
<div class="absolute bottom-0 right-2 w-4 h-4 bg-gray-800 dark:bg-gray-700 rounded-full"/>
|
||
<!-- 车把 -->
|
||
<div class="absolute top-1 -left-2 w-2 h-4 bg-gray-800 dark:bg-gray-700 rounded"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 专业级IOT物联网设备 -->
|
||
<div
|
||
class="group relative bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-blue-600/5 dark:from-blue-500/10 dark:to-blue-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
|
||
|
||
<div class="relative z-10">
|
||
<!-- 图标区域 -->
|
||
<div
|
||
class="w-20 h-20 bg-blue-500 dark:bg-blue-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||
<svg class="w-10 h-10 text-white" 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>
|
||
|
||
<!-- 内容 -->
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">专业级IOT物联网设备</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
高精度定位、实时数据传输、远程控制，确保车辆管理和用户服务的可靠性
|
||
</p>
|
||
|
||
<!-- IOT设备示意图 -->
|
||
<div class="mt-6 relative h-32">
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div class="w-16 h-12 bg-gray-800 dark:bg-gray-700 rounded-lg relative">
|
||
<!-- 指示灯 -->
|
||
<div class="absolute top-2 left-2 w-2 h-2 bg-green-500 rounded-full animate-pulse"/>
|
||
<!-- 接口 -->
|
||
<div class="absolute bottom-2 left-4 w-8 h-1 bg-gray-600 dark:bg-gray-500 rounded"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 多平台APP快速开发 -->
|
||
<div
|
||
class="group relative bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-green-400/10 to-green-600/5 dark:from-green-500/10 dark:to-green-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
|
||
|
||
<div class="relative z-10">
|
||
<!-- 图标区域 -->
|
||
<div
|
||
class="w-20 h-20 bg-green-500 dark:bg-green-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v край 2a2 2 0 002 2z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">多平台APP快速开发</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
支持iOS、Android、小程序多端开发，提供完整的用户端和运维端应用解决方案
|
||
</p>
|
||
|
||
<!-- 手机示意图 -->
|
||
<div class="mt-6 relative h-32">
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div
|
||
class="w-12 h-20 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-xl relative">
|
||
<!-- 屏幕内容 -->
|
||
<div class="absolute inset-1 bg-blue-100 dark:bg-blue-900 rounded">
|
||
<!-- 地图示意 -->
|
||
<div class="absolute top-1 left-1 right-1 h-8 bg-blue-200 dark:bg-blue-800 rounded"/>
|
||
<!-- 按钮 -->
|
||
<div
|
||
class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-6 h-6 bg-blue-500 dark:bg-blue-600 rounded-full"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 专业级运营管理平台 -->
|
||
<div
|
||
class="group relative bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-purple-400/10 to-purple-600/5 dark:from-purple-500/10 dark:to-purple-700/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
|
||
|
||
<div class="relative z-10">
|
||
<!-- 图标区域 -->
|
||
<div
|
||
class="w-20 h-20 bg-purple-500 dark:bg-purple-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">专业级运营管理平台</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
实时监控、数据分析、智能调度、财务管理，全方位支撑运营决策和业务管理
|
||
</p>
|
||
|
||
<!-- 电脑示意图 -->
|
||
<div class="mt-6 relative h-32">
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div class="w-20 h-16 bg-gray-800 dark:bg-gray-700 rounded-t-lg relative">
|
||
<!-- 屏幕 -->
|
||
<div class="absolute inset-1 bg-blue-100 dark:bg-blue-900 rounded">
|
||
<!-- 数据图表示意 -->
|
||
<div class="absolute top-1 left-1 right-1 h-2 bg-blue-300 dark:bg-blue-700 rounded"/>
|
||
<div class="absolute top-4 left-1 right-1 h-2 bg-blue-400 dark:bg-blue-600 rounded"/>
|
||
<div class="absolute top-7 left-1 right-1 h-2 bg-blue-500 dark:bg-blue-500 rounded"/>
|
||
</div>
|
||
</div>
|
||
<!-- 底座 -->
|
||
<div class="absolute -bottom-4 w-24 h-2 bg-gray-700 dark:bg-gray-600 rounded-b-lg"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义动画效果 */
|
||
.group:hover .group-hover\:scale-110 {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.grid {
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.text-4xl {
|
||
font-size: 2rem;
|
||
}
|
||
}
|
||
</style> |