真首页设计
This commit is contained in:
WindowBird
parent
36cead255e
commit
1bee7bb76c
|
|
@ -1,103 +1,19 @@
|
|||
<template>
|
||||
<section class=" bg-gradient-to-br from-yellow-400 to-yellow-500 dark:from-gray-900 dark:to-gray-800">
|
||||
<div class="container mx-auto px-4 py-12 lg:py-24">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- 内容区域 -->
|
||||
<div class="text-center lg:text-left">
|
||||
<h1 class="text-4xl lg:text-6xl font-black text-gray-900 dark:text-white mb-6 leading-tight">
|
||||
创特共享电动车
|
||||
<span class="block text-yellow-600 dark:text-yellow-400">整体解决方案提供商</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl lg:text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-8">
|
||||
专业提供"共享电动车+智能硬件+多平台开发+运维管理"一站式服务
|
||||
</p>
|
||||
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300 mb-10 max-w-2xl">
|
||||
专注于智慧出行，打造"共享出行"顶级方案。现已面向共享电动车、共享电池行业提供包含智能硬件+APP+云存储的全套解决方案。
|
||||
</p>
|
||||
|
||||
|
||||
<!-- 行动按钮 -->
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<button
|
||||
class="px-8 py-4 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-full font-semibold hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors flex items-center justify-center space-x-2"
|
||||
@click="contactUs">
|
||||
<i class="i-lucide-phone"/>
|
||||
<span>立即咨询</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 电动车展示区域 -->
|
||||
<div class="relative">
|
||||
<div class="relative z-10">
|
||||
<img alt="车" src="https://api.ccttiot.com/smartmeter/img/static/u1FoIt3IRUOer3uGOOTI">
|
||||
|
||||
<div
|
||||
class="absolute top-10 left-10 w-20 h-20 bg-yellow-400 dark:bg-yellow-600 rounded-full opacity-20 animate-pulse"/>
|
||||
<div
|
||||
class="absolute top-32 right-20 w-16 h-16 bg-green-400 dark:bg-green-600 rounded-full opacity-30 animate-bounce"/>
|
||||
<div
|
||||
class="absolute bottom-20 left-32 w-12 h-12 bg-blue-400 dark:bg-blue-600 rounded-full opacity-40 animate-ping"/>
|
||||
</div>
|
||||
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 -z-10">
|
||||
<div class="absolute top-1/4 left-1/4 w-32 h-32 bg-white dark:bg-gray-700 rounded-full opacity-10"/>
|
||||
<div
|
||||
class="absolute bottom-1/3 right-1/3 w-24 h-24 bg-yellow-300 dark:bg-yellow-700 rounded-full opacity-20"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
const contactUs = () => {
|
||||
// 这里可以集成实际的联系逻辑
|
||||
console.log('联系客服')
|
||||
alert('请联系：400-123-4567')
|
||||
}
|
||||
|
||||
const items = [
|
||||
'https://picsum.photos/640/640?random=1',
|
||||
'https://picsum.photos/640/640?random=2',
|
||||
'https://picsum.photos/640/640?random=3',
|
||||
'https://picsum.photos/640/640?random=4',
|
||||
'https://picsum.photos/640/640?random=5',
|
||||
'https://picsum.photos/640/640?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画 */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(5deg);
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<UCarousel
|
||||
v-slot="{ item }" :items="items" :ui="{ item: 'basis-1/3' }" auto-scroll class="w-full max-w-full " dots
|
||||
loop>
|
||||
<img :src="item" alt="" class="rounded-lg">
|
||||
</UCarousel>
|
||||
</template>
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 深色模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-gradient-to-br {
|
||||
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,201 +1,147 @@
|
|||
<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">
|
||||
共享电动车解决方案
|
||||
<div class="bg-gray-50 dark:bg-gray-900 py-16">
|
||||
<div class="container mx-auto px-4 max-w-8xl">
|
||||
<!-- 标题区域 -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-3xl lg:text-4xl 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 class="text-lg text-gray-600 dark:text-gray-400">
|
||||
针对不同类型使用场景需求，量身定制解决方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 解决方案网格 -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||||
<!-- 定制化共享电动车 -->
|
||||
<!-- 共享服务网格 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
|
||||
<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">
|
||||
v-for="(service, index) in services"
|
||||
:key="index"
|
||||
class="group relative cursor-pointer"
|
||||
@mouseenter="activeCard = index"
|
||||
@mouseleave="activeCard = null"
|
||||
>
|
||||
<!-- 默认卡片 -->
|
||||
<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">
|
||||
<!-- 图标区域 -->
|
||||
class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-300 group-hover:shadow-lg h-full flex flex-col">
|
||||
<!-- 图标（悬浮时隐藏） -->
|
||||
<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>
|
||||
class="w-16 h-16 bg-primary-100 dark:bg-primary-900/20 rounded-lg flex items-center justify-center mb-4 mx-auto transition-opacity duration-300 group-hover:opacity-0">
|
||||
<UIcon :name="service.icon" class="w-8 h-8 text-primary-600 dark:text-primary-400"/>
|
||||
</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">
|
||||
专为共享场景设计的电动车，具备耐用性、安全性和智能化特性，满足不同运营需求
|
||||
<!-- 主要内容 -->
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center mb-2">
|
||||
{{ service.title }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 text-center line-clamp-2">
|
||||
{{ service.description }}
|
||||
</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">
|
||||
高精度定位、实时数据传输、远程控制，确保车辆管理和用户服务的可靠性
|
||||
<!-- 悬浮详情卡片 -->
|
||||
<div v-if="activeCard === index" class="absolute top-0 left-0 w-full h-full z-10">
|
||||
<div class="bg-primary-600 dark:bg-primary-700 rounded-xl p-6 h-full text-white shadow-xl flex flex-col">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold mb-4">{{ service.title }}</h3>
|
||||
<p class="text-sm opacity-90 mb-4 leading-relaxed">
|
||||
{{ service.detail }}
|
||||
</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"/>
|
||||
<!-- 查看详情按钮 -->
|
||||
<UButton
|
||||
:to="service.link"
|
||||
class="w-full border-white/30 hover:bg-white/10 transition-colors mt-auto"
|
||||
color="white"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
查看详情
|
||||
</UButton>
|
||||
</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>
|
||||
|
||||
<script setup>
|
||||
const activeCard = ref(null)
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: '共享陪护床',
|
||||
icon: 'i-heroicons-bed-20-solid',
|
||||
description: '解决医院陪护家属未配有床位，休息不便的问题...',
|
||||
detail: '解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同时，给患者家属更舒适的修养环境。',
|
||||
link: '/solutions/bed'
|
||||
},
|
||||
{
|
||||
title: '共享单车',
|
||||
icon: 'i-heroicons-bicycle-20-solid',
|
||||
description: '解决大型园区或短距离出行麻烦，提高出行效率...',
|
||||
detail: '解决大型园区或短距离出行麻烦，提高出行效率，为校园、园区、社区提供便捷的绿色出行解决方案。',
|
||||
link: '/solutions/bike'
|
||||
},
|
||||
{
|
||||
title: '共享电单车',
|
||||
icon: 'i-heroicons-bolt-20-solid',
|
||||
description: '解决人们最后三公里的出行，促进环保和健康出行...',
|
||||
detail: '解决人们最后三公里的出行，促进环保和健康出行，为城市短途交通提供智能、便捷的电动助力解决方案。',
|
||||
link: '/solutions/ebike'
|
||||
},
|
||||
{
|
||||
title: '共享电动车',
|
||||
icon: 'i-heroicons-cog-20-solid',
|
||||
description: '电动车相比续航能力更强，适用于各种出行场景...',
|
||||
detail: '电动车相比续航能力更强，适用于各种出行场景，为城市中长途出行提供高效、可靠的电动交通工具。',
|
||||
link: '/sharedSolutions/eBike'
|
||||
},
|
||||
{
|
||||
title: '共享滑板车',
|
||||
icon: 'i-heroicons-scissors-20-solid',
|
||||
description: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合...',
|
||||
detail: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合现代城市微出行需求，为年轻人提供时尚、灵活的出行选择。',
|
||||
link: '/solutions/skateboard'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画效果 */
|
||||
.group:hover .group-hover\:scale-110 {
|
||||
transform: scale(1.1);
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 确保所有卡片高度一致 */
|
||||
.group {
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
gap: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2rem;
|
||||
.group {
|
||||
min-height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,321 +1,152 @@
|
|||
<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">
|
||||
共享电动车 + 物联网设备
|
||||
<div class="bg-gray-50 dark:bg-gray-900 py-16">
|
||||
<div class="container mx-auto px-4 max-w-8xl">
|
||||
<!-- 页面标题 -->
|
||||
<div class="text-center mb-12 px-4">
|
||||
<h1 class="text-3xl lg:text-4xl 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 class="text-lg text-gray-600 dark:text-gray-400 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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 px-4">
|
||||
<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">
|
||||
v-for="(scene, index) in scenes"
|
||||
:key="index"
|
||||
class="group relative cursor-pointer"
|
||||
@mouseenter="activeScene = index"
|
||||
@mouseleave="activeScene = null"
|
||||
>
|
||||
<!-- 默认卡片 -->
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-300 group-hover:shadow-lg h-full mx-2">
|
||||
<!-- 图标区域 -->
|
||||
<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 :class="scene.bgColor" class="w-16 h-16 rounded-lg flex items-center justify-center mb-4 mx-auto">
|
||||
<UIcon :class="scene.iconColor" :name="scene.icon" class="w-8 h-8"/>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
物联网设备数据传输
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white text-center mb-4">
|
||||
{{ scene.title }}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
通过联网中控及车载控制器设备实现实时数据传输，确保车辆状态实时监控
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<ul class="space-y-2 text-center">
|
||||
<li
|
||||
v-for="(device, deviceIndex) in scene.devices" :key="deviceIndex"
|
||||
class="text-gray-600 dark:text-gray-400 text-sm"
|
||||
>
|
||||
{{ device }}
|
||||
</li>
|
||||
<li class="text-gray-600 dark:text-gray-400 text-sm">...</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮详情卡片 -->
|
||||
<div v-if="activeScene === index" class="absolute top-0 left-0 w-full h-full z-10 mx-2">
|
||||
<div :class="scene.hoverBgColor" class="rounded-xl p-6 h-full text-white shadow-xl flex flex-col">
|
||||
<h3 class="text-xl font-semibold mb-4">{{ scene.title }}</h3>
|
||||
<p class="text-sm opacity-90 mb-6 leading-relaxed">
|
||||
{{ scene.description }}
|
||||
</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"/>
|
||||
<UButton
|
||||
class="w-full border-white/30 hover:bg-white/10 transition-colors mt-auto"
|
||||
color="white"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
查看详情
|
||||
</UButton>
|
||||
</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 setup>
|
||||
const activeScene = ref(null)
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 自定义动画 */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
const scenes = [
|
||||
{
|
||||
title: '智能家居',
|
||||
icon: 'i-heroicons-home-20-solid',
|
||||
bgColor: 'bg-red-100 dark:bg-red-900/20',
|
||||
iconColor: 'text-red-600 dark:text-red-400',
|
||||
hoverBgColor: 'bg-red-600 dark:bg-red-700',
|
||||
devices: ['智能门锁', '智能空调', '智能电饭煲', '智能窗帘'],
|
||||
description: '通过智能硬件与软件系统集成，实现家居设备的智能化控制和管理，提升生活品质和能源效率。'
|
||||
},
|
||||
{
|
||||
title: '智慧出行',
|
||||
icon: 'i-heroicons-truck-20-solid',
|
||||
bgColor: 'bg-blue-100 dark:bg-blue-900/20',
|
||||
iconColor: 'text-blue-600 dark:text-blue-400',
|
||||
hoverBgColor: 'bg-blue-600 dark:bg-blue-700',
|
||||
devices: ['共享单车', '共享汽车', '共享滑板车', '共享电动车'],
|
||||
description: '提供多样化的共享交通工具解决方案，优化城市出行体验，促进绿色环保和交通效率提升。'
|
||||
},
|
||||
{
|
||||
title: '智慧医疗',
|
||||
icon: 'i-heroicons-heart-20-solid',
|
||||
bgColor: 'bg-green-100 dark:bg-green-900/20',
|
||||
iconColor: 'text-green-600 dark:text-green-400',
|
||||
hoverBgColor: 'bg-green-600 dark:bg-green-700',
|
||||
devices: ['共享陪护床', '智能安防', '共享打印机', '共享充电宝'],
|
||||
description: '为医疗机构提供智能化设备和共享服务解决方案，改善患者体验，提升医疗服务质量和管理效率。'
|
||||
},
|
||||
{
|
||||
title: '智慧园区',
|
||||
icon: 'i-heroicons-building-office-20-solid',
|
||||
bgColor: 'bg-purple-100 dark:bg-purple-900/20',
|
||||
iconColor: 'text-purple-600 dark:text-purple-400',
|
||||
hoverBgColor: 'bg-purple-600 dark:bg-purple-700',
|
||||
devices: ['智能自提柜', '共享健身房', '共享洗衣机', '智能门禁'],
|
||||
description: '为园区提供智能化基础设施和共享服务，打造高效、便捷、智能的园区生活环境和工作环境。'
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 确保所有卡片高度一致 */
|
||||
.group {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保卡片不贴边 */
|
||||
.container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,291 +1,134 @@
|
|||
<template>
|
||||
<div class=" bg-white dark:bg-gray-900">
|
||||
<!-- 头部区域 -->
|
||||
<header class="bg-gradient-to-br from-yellow-400 to-yellow-500 dark:from-yellow-600 dark:to-yellow-700 py-16">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold text-white mb-4">
|
||||
共享电动车APP/小程序
|
||||
<div class="bg-white dark:bg-gray-900 py-16">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<!-- 页面标题 -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
软件应用开发
|
||||
</h1>
|
||||
<p class="text-xl text-white opacity-90">
|
||||
轻松出行，智能骑行体验
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
专业移动端与微信生态应用开发服务
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- 左侧：手机界面展示 -->
|
||||
<div class="relative">
|
||||
<!-- 手机设备 -->
|
||||
<div class="relative mx-auto w-80">
|
||||
<!-- 手机外壳 -->
|
||||
<div class="bg-gray-800 rounded-[40px] p-4 shadow-2xl">
|
||||
<!-- 手机屏幕 -->
|
||||
<div class="bg-white rounded-[32px] overflow-hidden h-[600px] relative">
|
||||
|
||||
<!-- 顶部状态栏 -->
|
||||
<div class="bg-yellow-400 h-12 flex items-center justify-between px-6">
|
||||
<span class="text-lg font-bold text-gray-800">玖玖出行</span>
|
||||
<div class="flex space-x-2">
|
||||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图区域 -->
|
||||
<div class="h-48 bg-gradient-to-br from-blue-100 to-green-100 relative">
|
||||
<!-- 地图网格 -->
|
||||
<div class="absolute inset-0 opacity-30">
|
||||
<div class="grid grid-cols-8 gap-4 h-full">
|
||||
<div v-for="i in 8" :key="i" class="border-r border-gray-400"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 定位点 -->
|
||||
<div class="absolute top-1/3 left-1/4 w-3 h-3 bg-red-500 rounded-full animate-pulse"/>
|
||||
<div class="absolute top-1/2 left-1/2 w-3 h-3 bg-green-500 rounded-full"/>
|
||||
<div class="absolute top-2/3 left-3/4 w-3 h-3 bg-blue-500 rounded-full"/>
|
||||
|
||||
<!-- 当前位置标记 -->
|
||||
<div class="absolute bottom-4 left-4 bg-white rounded-lg px-3 py-1 shadow">
|
||||
<span class="text-sm font-medium">当前位置</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能按钮区域 -->
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<button class="bg-yellow-100 hover:bg-yellow-200 rounded-lg p-3 text-center transition-colors">
|
||||
<div class="text-yellow-600 font-semibold">实时路况</div>
|
||||
</button>
|
||||
<button class="bg-green-100 hover:bg-green-200 rounded-lg p-3 text-center transition-colors">
|
||||
<div class="text-green-600 font-semibold">地图更新</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 扫码用车按钮 -->
|
||||
<div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 w-4/5">
|
||||
<button
|
||||
class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 rounded-full w-full shadow-lg transition-colors">
|
||||
扫码用车
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：功能特性列表 -->
|
||||
<div class="space-y-8">
|
||||
<!-- 功能网格 -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 gap-6">
|
||||
|
||||
<!-- 实名认证用车 -->
|
||||
<!-- 开发平台网格 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
v-for="(platform, index) in platforms"
|
||||
:key="index"
|
||||
class="group relative cursor-pointer"
|
||||
@mouseenter="activePlatform = index"
|
||||
@mouseleave="activePlatform = null"
|
||||
>
|
||||
<!-- 默认卡片 -->
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-red-600 dark:text-red-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>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">实名认证用车</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
通过实名认证，预防用户骑走车辆不归还及解决国家规定未满16周岁不能用车问题</p>
|
||||
</div>
|
||||
</div>
|
||||
class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-300 group-hover:shadow-lg h-full flex flex-col items-center">
|
||||
<!-- 红色六边形图标背景 -->
|
||||
<div
|
||||
class="w-20 h-20 bg-red-100 dark:bg-red-900/20 rounded-xl flex items-center justify-center mb-6 relative">
|
||||
<!-- 六边形装饰 -->
|
||||
<div class="absolute inset-0 border-2 border-red-200 dark:border-red-800 rounded-xl rotate-45"/>
|
||||
<!-- 平台图标 -->
|
||||
<UIcon :name="platform.icon" class="w-10 h-10 text-red-600 dark:text-red-400 z-10"/>
|
||||
</div>
|
||||
|
||||
<!-- 一键预约用车 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">一键预约用车</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">选择合适车辆，一键预约车辆</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 平台名称 -->
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white text-center mb-4">
|
||||
{{ platform.title }}
|
||||
</h3>
|
||||
|
||||
<!-- 平台描述 -->
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 text-center leading-relaxed flex-1">
|
||||
{{ platform.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 免押金卡骑行 -->
|
||||
<!-- 悬浮详情卡片 -->
|
||||
<div v-if="activePlatform === index" class="absolute top-0 left-0 w-full h-full z-10">
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">免押金卡骑行</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
考虑支付宝免押对接困难及用户不愿缴纳高额押金问题提出免押金卡方案，解决问题并增加额外收入</p>
|
||||
</div>
|
||||
</div>
|
||||
class="bg-red-600 dark:bg-red-700 rounded-xl p-6 h-full text-white shadow-xl flex flex-col items-center">
|
||||
<!-- 悬浮图标 -->
|
||||
<div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
|
||||
<UIcon :name="platform.icon" class="w-8 h-8 text-white"/>
|
||||
</div>
|
||||
|
||||
<!-- 用车前确认续航里程 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">用车前确认续航里程</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
扫码用车弹出车辆当前可续航里程信息，用户根据该信息判断是否满足自身骑行要求</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间+里程精准计费 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-indigo-600 dark:text-indigo-400" 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>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">时间+里程精准计费</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">根据用车时间及车辆能耗里程计算费用</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 临时停车 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-orange-600 dark:text-orange-400" 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>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">临时停车</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
临时有事，一键临时停车，锁车不结束订单。忘记还车，系统自动还车</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一键关锁结算 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-pink-100 dark:bg-pink-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-pink-600 dark:text-pink-400" 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>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">一键关锁结算</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">手机一键锁，系统自动结账</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多种支付方式 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-teal-100 dark:bg-teal-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">多种支付方式</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">支持微信、支付宝等多种支付方式</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-center mb-4">{{ platform.title }}</h3>
|
||||
<p class="text-sm opacity-90 text-center mb-6 leading-relaxed flex-1">
|
||||
{{ platform.detailedDescription }}
|
||||
</p>
|
||||
|
||||
<UButton
|
||||
class="w-full border-white/30 hover:bg-white/10 transition-colors"
|
||||
color="white"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
立即咨询
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以添加交互逻辑
|
||||
const activePlatform = ref(null)
|
||||
|
||||
const platforms = [
|
||||
{
|
||||
title: 'iOS开发',
|
||||
icon: 'i-simple-icons-apple',
|
||||
description: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。',
|
||||
detailedDescription: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。我们拥有丰富的iOS开发经验，能够为企业提供定制化的移动应用解决方案。'
|
||||
},
|
||||
{
|
||||
title: 'Android开发',
|
||||
icon: 'i-simple-icons-android',
|
||||
description: '针对主流的Android系统，提供一站式APP咨询、策划、开发服务。',
|
||||
detailedDescription: '针对主流的Android系统，提供一站式APP咨询、策划、开发服务。覆盖各类Android设备，确保应用在不同屏幕尺寸和系统版本上的完美运行。'
|
||||
},
|
||||
{
|
||||
title: '微信开发',
|
||||
icon: 'i-simple-icons-wechat',
|
||||
description: '针对企业需求提供专业微信公众平台开发服务。',
|
||||
detailedDescription: '针对企业需求提供专业微信公众平台开发服务。包括公众号、小程序、企业微信等微信生态产品的定制开发与集成。'
|
||||
},
|
||||
{
|
||||
title: '小程序开发',
|
||||
icon: 'i-simple-icons-miniprogram',
|
||||
description: '无需安装APP，就可以带来更流畅快速的体验。',
|
||||
detailedDescription: '无需安装APP，就可以带来更流畅快速的体验。提供轻量级应用解决方案，降低用户使用门槛，提升用户体验。'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画效果 */
|
||||
.group:hover .group-hover\:scale-110 {
|
||||
transform: scale(1.1);
|
||||
/* 确保所有卡片高度一致 */
|
||||
.group {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,285 +1,111 @@
|
|||
<template>
|
||||
<div class=" bg-gray-50 dark:bg-gray-900">
|
||||
<!-- 顶部背景和标题 -->
|
||||
<header
|
||||
class="relative bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-800 dark:to-blue-900 text-white py-20 overflow-hidden">
|
||||
<!-- 共享单车背景图案 -->
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute top-10 left-10 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute top-20 right-20 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute bottom-10 left-1/4 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute bottom-20 right-1/3 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute top-1/3 left-1/2 w-16 h-8 bg-white rounded-full"/>
|
||||
</div>
|
||||
<UPage>
|
||||
<UPageHero
|
||||
:description="page.description"
|
||||
:title="page.title"
|
||||
:ui="{
|
||||
title: '!mx-auto',
|
||||
description: '!mx-auto',
|
||||
}"
|
||||
/>
|
||||
|
||||
<div class="container mx-auto px-4 text-center relative z-10">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold mb-4">
|
||||
运营管理平台
|
||||
</h1>
|
||||
<p class="text-xl opacity-90">
|
||||
共享出行车辆智能运营管理系统
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 笔记本电脑展示区域 -->
|
||||
<section class="py-16 bg-white dark:bg-gray-800">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- 笔记本电脑容器 -->
|
||||
<div class="relative">
|
||||
<!-- 笔记本电脑底座 -->
|
||||
<div class="w-full max-w-2xl mx-auto bg-gray-300 dark:bg-gray-600 h-6 rounded-b-lg"/>
|
||||
|
||||
<!-- 笔记本电脑屏幕 -->
|
||||
<div class="w-full max-w-3xl mx-auto bg-gray-800 rounded-t-lg p-1">
|
||||
<div class="bg-blue-100 dark:bg-blue-900 rounded-t-lg h-64 lg:h-80 relative overflow-hidden">
|
||||
<!-- 地图界面 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-700">
|
||||
<!-- 地图网格线 -->
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<div class="grid grid-cols-8 gap-4 h-full">
|
||||
<div v-for="i in 8" :key="i" class="border-r border-blue-400 dark:border-blue-600"/>
|
||||
</div>
|
||||
<div class="grid grid-rows-6 gap-4 h-full">
|
||||
<div v-for="i in 6" :key="i" class="border-b border-blue-400 dark:border-blue-600"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 车辆标记点 -->
|
||||
<div class="absolute top-1/4 left-1/4 w-3 h-3 bg-red-500 rounded-full animate-pulse"/>
|
||||
<div class="absolute top-1/3 left-1/2 w-3 h-3 bg-green-500 rounded-full"/>
|
||||
<div class="absolute top-1/2 left-1/3 w-3 h-3 bg-yellow-500 rounded-full"/>
|
||||
<div class="absolute top-2/3 left-2/3 w-3 h-3 bg-blue-500 rounded-full"/>
|
||||
|
||||
<!-- 道路线条 -->
|
||||
<div class="absolute top-1/2 left-1/4 w-1/2 h-1 bg-gray-600 transform -translate-y-1/2"/>
|
||||
<div class="absolute top-1/3 left-1/4 w-1 h-16 bg-gray-600 transform -translate-x-1/2"/>
|
||||
</div>
|
||||
|
||||
<!-- 界面控件 -->
|
||||
<div class="absolute top-4 left-4 bg-white dark:bg-gray-800 rounded-lg px-3 py-1 text-sm font-medium">
|
||||
实时监控地图
|
||||
</div>
|
||||
<div class="absolute bottom-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-lg text-sm">
|
||||
在线车辆: 613
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能模块网格 -->
|
||||
<section class="py-20 bg-white dark:bg-gray-800">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- 实时车辆监控 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<!-- 红色图标 -->
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-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>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">实时车辆监控</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
运营平台大屏幕展示车辆的分布及状态
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能异常报警 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">智能异常报警</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
车辆发生异常问题，运营平台发生警报
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 规范骑行、停车区域 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-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 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">规范骑行、停车区域</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
设置规范骑行和停车区域，提升管理效率
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运维数据 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" 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-lg font-bold text-gray-900 dark:text-white mb-2">运维数据</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
运维数据实时上报，绩效考核有依据
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速签署代理 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">快速签署代理</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
加盟商、代理商快速进入系统
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 财务管理 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">财务管理</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
财务报表实时统计咨询，财务清单有记录
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运营数据 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" 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>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">运营数据</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
运营数据云保存，百万量级数据实时查询
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 权限管理 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" 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>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">权限管理</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
根据公司员工岗位职责，自定义设置系统权限
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<UPageSection
|
||||
:ui="{
|
||||
container: '!pt-0'
|
||||
}"
|
||||
>
|
||||
<Motion
|
||||
v-for="(product, index) in products"
|
||||
:key="index"
|
||||
:in-view-options="{ once: true }"
|
||||
:initial="{ opacity: 0, transform: 'translateY(10px)' }"
|
||||
:transition="{ delay: 0.2 * index }"
|
||||
:while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
|
||||
>
|
||||
<UPageCard
|
||||
:description="product.description"
|
||||
:orientation="'horizontal'"
|
||||
:reverse="index % 2 !== 0"
|
||||
:title="product.title"
|
||||
:ui="{
|
||||
wrapper: 'max-sm:order-last'
|
||||
}"
|
||||
class="group"
|
||||
spotlight
|
||||
variant="naked"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-sm text-muted">
|
||||
{{ product.category }}
|
||||
</span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<ULink
|
||||
:to="product.url"
|
||||
class="text-sm text-primary flex items-center"
|
||||
>
|
||||
查看详情
|
||||
<UIcon
|
||||
class="size-4 text-primary transition-all opacity-0 group-hover:translate-x-1 group-hover:opacity-100"
|
||||
name="i-lucide-arrow-right"
|
||||
/>
|
||||
</ULink>
|
||||
</template>
|
||||
<img
|
||||
:alt="product.title"
|
||||
:src="product.image"
|
||||
class="object-cover w-48 h-48 rounded-lg"
|
||||
>
|
||||
</UPageCard>
|
||||
</Motion>
|
||||
</UPageSection>
|
||||
</UPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以添加交互逻辑
|
||||
// 页面配置
|
||||
const page = {
|
||||
title: '联网智能硬件',
|
||||
description: '专业智能锁具与联网控制器解决方案，为传统设备提供智能化升级服务'
|
||||
}
|
||||
|
||||
// 产品数据
|
||||
const products = [
|
||||
{
|
||||
title: '锁',
|
||||
category: '智能锁具',
|
||||
description: 'N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏(延伸)，远程授权自动开锁，支持应急开锁(延伸)，支持短信远程修改相关参数。',
|
||||
url: '/products/lock',
|
||||
image: 'https://ccttiot.com/storage/gongsi_img/20240625/4ac672b229c5275b943f718f87aeaf19.jpg'
|
||||
},
|
||||
{
|
||||
title: '联网控制器',
|
||||
category: '控制器设备',
|
||||
description: '通过改造传统传感器PLC/皮频器等实现快速联接(无需部署新设备)。通过灵活部署，快速形成各领域的物联网解决方案;有效降低用户改造、部署、维护成本。',
|
||||
url: '/products/controller',
|
||||
image: 'https://ccttiot.com/storage/gongsi_img/20240625/834f1561d26420f40225a9953d76f3dc.jpg'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画效果 */
|
||||
.group:hover .group-hover\:scale-110 {
|
||||
transform: scale(1.1);
|
||||
/* 自定义样式调整 */
|
||||
:deep(.u-page-card) {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
:deep(.u-page-card__content) {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
gap: 1rem;
|
||||
:deep(.u-page-card) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
:deep(.u-page-card__content) {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
app/components/sharedSolutions/eBike/item1.vue
Normal file
103
app/components/sharedSolutions/eBike/item1.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<section class=" bg-gradient-to-br from-yellow-400 to-yellow-500 dark:from-gray-900 dark:to-gray-800">
|
||||
<div class="container mx-auto px-4 py-12 lg:py-24">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- 内容区域 -->
|
||||
<div class="text-center lg:text-left">
|
||||
<h1 class="text-4xl lg:text-6xl font-black text-gray-900 dark:text-white mb-6 leading-tight">
|
||||
创特共享电动车
|
||||
<span class="block text-yellow-600 dark:text-yellow-400">整体解决方案提供商</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl lg:text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-8">
|
||||
专业提供"共享电动车+智能硬件+多平台开发+运维管理"一站式服务
|
||||
</p>
|
||||
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300 mb-10 max-w-2xl">
|
||||
专注于智慧出行，打造"共享出行"顶级方案。现已面向共享电动车、共享电池行业提供包含智能硬件+APP+云存储的全套解决方案。
|
||||
</p>
|
||||
|
||||
|
||||
<!-- 行动按钮 -->
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<button
|
||||
class="px-8 py-4 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-full font-semibold hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors flex items-center justify-center space-x-2"
|
||||
@click="contactUs">
|
||||
<i class="i-lucide-phone"/>
|
||||
<span>立即咨询</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 电动车展示区域 -->
|
||||
<div class="relative">
|
||||
<div class="relative z-10">
|
||||
<img alt="车" src="https://api.ccttiot.com/smartmeter/img/static/u1FoIt3IRUOer3uGOOTI">
|
||||
|
||||
<div
|
||||
class="absolute top-10 left-10 w-20 h-20 bg-yellow-400 dark:bg-yellow-600 rounded-full opacity-20 animate-pulse"/>
|
||||
<div
|
||||
class="absolute top-32 right-20 w-16 h-16 bg-green-400 dark:bg-green-600 rounded-full opacity-30 animate-bounce"/>
|
||||
<div
|
||||
class="absolute bottom-20 left-32 w-12 h-12 bg-blue-400 dark:bg-blue-600 rounded-full opacity-40 animate-ping"/>
|
||||
</div>
|
||||
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute inset-0 -z-10">
|
||||
<div class="absolute top-1/4 left-1/4 w-32 h-32 bg-white dark:bg-gray-700 rounded-full opacity-10"/>
|
||||
<div
|
||||
class="absolute bottom-1/3 right-1/3 w-24 h-24 bg-yellow-300 dark:bg-yellow-700 rounded-full opacity-20"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
const contactUs = () => {
|
||||
// 这里可以集成实际的联系逻辑
|
||||
console.log('联系客服')
|
||||
alert('请联系：400-123-4567')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画 */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 深色模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-gradient-to-br {
|
||||
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
201
app/components/sharedSolutions/eBike/item2.vue
Normal file
201
app/components/sharedSolutions/eBike/item2.vue
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
<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>
|
||||
321
app/components/sharedSolutions/eBike/item3.vue
Normal file
321
app/components/sharedSolutions/eBike/item3.vue
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
<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>
|
||||
291
app/components/sharedSolutions/eBike/item4.vue
Normal file
291
app/components/sharedSolutions/eBike/item4.vue
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
<template>
|
||||
<div class=" bg-white dark:bg-gray-900">
|
||||
<!-- 头部区域 -->
|
||||
<header class="bg-gradient-to-br from-yellow-400 to-yellow-500 dark:from-yellow-600 dark:to-yellow-700 py-16">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold text-white mb-4">
|
||||
共享电动车APP/小程序
|
||||
</h1>
|
||||
<p class="text-xl text-white opacity-90">
|
||||
轻松出行，智能骑行体验
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- 左侧：手机界面展示 -->
|
||||
<div class="relative">
|
||||
<!-- 手机设备 -->
|
||||
<div class="relative mx-auto w-80">
|
||||
<!-- 手机外壳 -->
|
||||
<div class="bg-gray-800 rounded-[40px] p-4 shadow-2xl">
|
||||
<!-- 手机屏幕 -->
|
||||
<div class="bg-white rounded-[32px] overflow-hidden h-[600px] relative">
|
||||
|
||||
<!-- 顶部状态栏 -->
|
||||
<div class="bg-yellow-400 h-12 flex items-center justify-between px-6">
|
||||
<span class="text-lg font-bold text-gray-800">玖玖出行</span>
|
||||
<div class="flex space-x-2">
|
||||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||||
<div class="w-2 h-2 bg-gray-800 rounded-full"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图区域 -->
|
||||
<div class="h-48 bg-gradient-to-br from-blue-100 to-green-100 relative">
|
||||
<!-- 地图网格 -->
|
||||
<div class="absolute inset-0 opacity-30">
|
||||
<div class="grid grid-cols-8 gap-4 h-full">
|
||||
<div v-for="i in 8" :key="i" class="border-r border-gray-400"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 定位点 -->
|
||||
<div class="absolute top-1/3 left-1/4 w-3 h-3 bg-red-500 rounded-full animate-pulse"/>
|
||||
<div class="absolute top-1/2 left-1/2 w-3 h-3 bg-green-500 rounded-full"/>
|
||||
<div class="absolute top-2/3 left-3/4 w-3 h-3 bg-blue-500 rounded-full"/>
|
||||
|
||||
<!-- 当前位置标记 -->
|
||||
<div class="absolute bottom-4 left-4 bg-white rounded-lg px-3 py-1 shadow">
|
||||
<span class="text-sm font-medium">当前位置</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能按钮区域 -->
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<button class="bg-yellow-100 hover:bg-yellow-200 rounded-lg p-3 text-center transition-colors">
|
||||
<div class="text-yellow-600 font-semibold">实时路况</div>
|
||||
</button>
|
||||
<button class="bg-green-100 hover:bg-green-200 rounded-lg p-3 text-center transition-colors">
|
||||
<div class="text-green-600 font-semibold">地图更新</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 扫码用车按钮 -->
|
||||
<div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 w-4/5">
|
||||
<button
|
||||
class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 rounded-full w-full shadow-lg transition-colors">
|
||||
扫码用车
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：功能特性列表 -->
|
||||
<div class="space-y-8">
|
||||
<!-- 功能网格 -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 gap-6">
|
||||
|
||||
<!-- 实名认证用车 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-red-600 dark:text-red-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>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">实名认证用车</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
通过实名认证，预防用户骑走车辆不归还及解决国家规定未满16周岁不能用车问题</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一键预约用车 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">一键预约用车</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">选择合适车辆，一键预约车辆</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 免押金卡骑行 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">免押金卡骑行</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
考虑支付宝免押对接困难及用户不愿缴纳高额押金问题提出免押金卡方案，解决问题并增加额外收入</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用车前确认续航里程 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">用车前确认续航里程</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
扫码用车弹出车辆当前可续航里程信息，用户根据该信息判断是否满足自身骑行要求</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间+里程精准计费 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-indigo-600 dark:text-indigo-400" 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>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">时间+里程精准计费</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">根据用车时间及车辆能耗里程计算费用</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 临时停车 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-orange-600 dark:text-orange-400" 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>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">临时停车</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
临时有事，一键临时停车，锁车不结束订单。忘记还车，系统自动还车</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一键关锁结算 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-pink-100 dark:bg-pink-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-pink-600 dark:text-pink-400" 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>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">一键关锁结算</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">手机一键锁，系统自动结账</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多种支付方式 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 bg-teal-100 dark:bg-teal-900 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg
|
||||
class="w-6 h-6 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 dark:text-white mb-2">多种支付方式</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">支持微信、支付宝等多种支付方式</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以添加交互逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画效果 */
|
||||
.group:hover .group-hover\:scale-110 {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
285
app/components/sharedSolutions/eBike/item5.vue
Normal file
285
app/components/sharedSolutions/eBike/item5.vue
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
<template>
|
||||
<div class=" bg-gray-50 dark:bg-gray-900">
|
||||
<!-- 顶部背景和标题 -->
|
||||
<header
|
||||
class="relative bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-800 dark:to-blue-900 text-white py-20 overflow-hidden">
|
||||
<!-- 共享单车背景图案 -->
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute top-10 left-10 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute top-20 right-20 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute bottom-10 left-1/4 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute bottom-20 right-1/3 w-16 h-8 bg-white rounded-full"/>
|
||||
<div class="absolute top-1/3 left-1/2 w-16 h-8 bg-white rounded-full"/>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 text-center relative z-10">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold mb-4">
|
||||
运营管理平台
|
||||
</h1>
|
||||
<p class="text-xl opacity-90">
|
||||
共享出行车辆智能运营管理系统
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 笔记本电脑展示区域 -->
|
||||
<section class="py-16 bg-white dark:bg-gray-800">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- 笔记本电脑容器 -->
|
||||
<div class="relative">
|
||||
<!-- 笔记本电脑底座 -->
|
||||
<div class="w-full max-w-2xl mx-auto bg-gray-300 dark:bg-gray-600 h-6 rounded-b-lg"/>
|
||||
|
||||
<!-- 笔记本电脑屏幕 -->
|
||||
<div class="w-full max-w-3xl mx-auto bg-gray-800 rounded-t-lg p-1">
|
||||
<div class="bg-blue-100 dark:bg-blue-900 rounded-t-lg h-64 lg:h-80 relative overflow-hidden">
|
||||
<!-- 地图界面 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-700">
|
||||
<!-- 地图网格线 -->
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<div class="grid grid-cols-8 gap-4 h-full">
|
||||
<div v-for="i in 8" :key="i" class="border-r border-blue-400 dark:border-blue-600"/>
|
||||
</div>
|
||||
<div class="grid grid-rows-6 gap-4 h-full">
|
||||
<div v-for="i in 6" :key="i" class="border-b border-blue-400 dark:border-blue-600"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 车辆标记点 -->
|
||||
<div class="absolute top-1/4 left-1/4 w-3 h-3 bg-red-500 rounded-full animate-pulse"/>
|
||||
<div class="absolute top-1/3 left-1/2 w-3 h-3 bg-green-500 rounded-full"/>
|
||||
<div class="absolute top-1/2 left-1/3 w-3 h-3 bg-yellow-500 rounded-full"/>
|
||||
<div class="absolute top-2/3 left-2/3 w-3 h-3 bg-blue-500 rounded-full"/>
|
||||
|
||||
<!-- 道路线条 -->
|
||||
<div class="absolute top-1/2 left-1/4 w-1/2 h-1 bg-gray-600 transform -translate-y-1/2"/>
|
||||
<div class="absolute top-1/3 left-1/4 w-1 h-16 bg-gray-600 transform -translate-x-1/2"/>
|
||||
</div>
|
||||
|
||||
<!-- 界面控件 -->
|
||||
<div class="absolute top-4 left-4 bg-white dark:bg-gray-800 rounded-lg px-3 py-1 text-sm font-medium">
|
||||
实时监控地图
|
||||
</div>
|
||||
<div class="absolute bottom-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-lg text-sm">
|
||||
在线车辆: 613
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能模块网格 -->
|
||||
<section class="py-20 bg-white dark:bg-gray-800">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- 实时车辆监控 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<!-- 红色图标 -->
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-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>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">实时车辆监控</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
运营平台大屏幕展示车辆的分布及状态
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能异常报警 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">智能异常报警</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
车辆发生异常问题，运营平台发生警报
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 规范骑行、停车区域 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-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 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">规范骑行、停车区域</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
设置规范骑行和停车区域，提升管理效率
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运维数据 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" 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-lg font-bold text-gray-900 dark:text-white mb-2">运维数据</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
运维数据实时上报，绩效考核有依据
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速签署代理 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">快速签署代理</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
加盟商、代理商快速进入系统
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 财务管理 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">财务管理</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
财务报表实时统计咨询，财务清单有记录
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运营数据 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" 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>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">运营数据</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
运营数据云保存，百万量级数据实时查询
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 权限管理 -->
|
||||
<div
|
||||
class="group bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 dark:border-gray-700">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<svg
|
||||
class="w-8 h-8 text-red-600 dark:text-red-400" 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>
|
||||
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">权限管理</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
根据公司员工岗位职责，自定义设置系统权限
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以添加交互逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义动画效果 */
|
||||
.group:hover .group-hover\:scale-110 {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,10 +3,12 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<UContainer>
|
||||
<AppHeader/>
|
||||
<slot/>
|
||||
<DevelopNews/>
|
||||
<BottomNavigation/>
|
||||
<AppFooter/>
|
||||
</UContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<IndexItem1/>
|
||||
<IndexItem2/>
|
||||
<IndexItem3/>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<script lang="ts" setup>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<IndexItem1/>
|
||||
<IndexItem2/>
|
||||
<IndexItem3/>
|
||||
<IndexItem4/>
|
||||
<IndexItem5/>
|
||||
<SharedSolutionsEBikeItem1/>
|
||||
<SharedSolutionsEBikeItem2/>
|
||||
<SharedSolutionsEBikeItem3/>
|
||||
<SharedSolutionsEBikeItem4/>
|
||||
<SharedSolutionsEBikeItem5/>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user