vue3+tailwindcss实现大气停车场收费管理系统pc端后台ui原型图代码
代码语言：html
所属分类：布局界面
代码描述：vue3+tailwindcss实现大气停车场收费管理系统pc端后台ui原型图代码，整个流程可操作，包括车辆进出场，月卡管理、仪表盘、图表、财务报表、系统设置
代码标签： vue tailwindcss 大气 停车场 收费 管理 系统 pc端 后台 ui 原型图 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业级停车场收费管理系统</title>
<!-- Vue 3 CDN -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.prod.3.5.17.js"></script>
<!-- ECharts CDN -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.4.2.js"></script>
<!-- Tailwind CSS CDN -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<style>
/* 自定义全局样式和动画 */
[v-cloak] { display: none; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.modal-enter-active, .modal-leave-active { transition: all 0.3s ease; }
.modal-enter-from, .modal-leave-to { opacity: 0; transform: translateY(-30px); }
.sidebar-icon {
stroke-width: 1.5;
}
</style>
</head>
<body class="bg-slate-100 font-sans antialiased">
<div id="app" v-cloak class="flex h-screen bg-slate-100">
<!-- 左侧导航栏 -->
<aside class="w-64 bg-slate-800 text-slate-300 flex flex-col fixed h-full">
<!-- Logo -->
<div class="h-16 flex items-center justify-center border-b border-slate-700">
<svg class="h-8 w-8 text-indigo-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg>
<h1 class="text-xl font-bold ml-3 text-white">智慧停车系统</h1>
</div>
<!-- 导航菜单 -->
<nav class="flex-1 px-4 py-6 space-y-2">
<a v-for="item in navItems" :key="item.id" @click.prevent="navigateTo(item.id)" href="#"
class="flex items-center px-4 py-2.5 rounded-lg transition-colors duration-200"
:class="currentPage === item.id ? 'bg-indigo-600 text-white shadow-lg' : 'hover:bg-slate-700 hover:text-white'">
<component :is="item.icon" class="h-6 w-6 sidebar-icon"></component>
<span class="ml-4 font-medium">{{ item.name }}</span>
</a>
</nav>
<!-- 底部用户信息 -->
<div class="p-4 border-t border-slate-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/admin/40/40" class="rounded-full">
<div class="ml-3">
<p class="text-sm font-semibold text-white">系统管理员</p>
<p class="text-xs text-slate-400">在线</p>
</div>
</div>
</div>
</aside>
<!-- 右侧主内容区 -->
<main class="flex-1 ml-64 p-8 overflow-y-auto">
<transition name="fade" mode="out-in">
<!-- 仪表板页面 -->
<div v-if="currentPage === 'dashboard'" key="dashboard">
<h2 class="text-3xl font-bold text-slate-800 mb-6">仪表板</h2>
<!-- 核心数据卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-between">
<div>
<p class="text-sm font-medium text-slate-500">实时车位</p>
<p class="text-3xl font-bold text-slate-800 mt-1">{{ vehiclesIn.length }} / {{ settings.totalCapacity }}</p>
</div>
<div class="p-3 bg-blue-100 rounded-full">
<svg class="h-7 w-7 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="M1 12h18"/></svg>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-between">
<div>
<p class="text-sm font-medium text-slate-500">今日收入 (元)</p>
<p class="text-3xl font-bold text-slate-800 mt-1">{{ todayStats.revenue.toFixed(2) }}</p>
</div>
<div class="p-3 bg-emerald-100 rounded-full">
<svg class="h-7 w-7 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-between">
<div>
<p class="text-sm font-medium text-slate-500">今日车流量</p>
<p class="text-3xl font-bold text-slate-800 mt-1">{{ todayStats.traffic }}</p>
</div>
<div class="p-3 bg-amber-100 rounded-full">
<svg class="h-7 w-7 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-between">
<div>
<p class="text-sm font-medium text-slate-500">月卡会员数</p>
<p class="text-3xl font-bold text-slate-800 mt-1">{{ monthlyPasses.length }}</p>
</div>
<div class="p-3 bg-purple-100 rounded-full">
<svg class="h-7 w-7 text-purple-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
</div>
</div>
<!-- 可视化图表 -->
<div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-8">
<div class="lg:col-span-3 bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-semibold text-slate-800 mb-4">近7日收入趋势</h3>
<div id="revenueChart" style="height: 300px;"></div>
</div>
<div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-semibold text-slate-800 mb-4">车位状态</h3>
<div id="occupancyChart" style="height: 300px;"></div>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0