285 lines
14 KiB
Vue
285 lines
14 KiB
Vue
<template>
|
||
<div class="min-h-screen 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> |