vue3+tailwindcss实现物业管理系统pc端后台仪表盘ui原型图代码
代码语言：html
所属分类：布局界面
代码描述：vue3+tailwindcss实现物业管理系统pc端后台仪表盘ui原型图代码
代码标签： vue tailwind 物业 管理 系统 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.5.0.js"></script>
<!-- Tailwind CSS CDN for rapid styling -->
<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: scale(0.9); }
.sidebar-icon { stroke-width: 1.5; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
</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-60 bg-white border-r border-slate-200 flex flex-col fixed h-full shadow-lg">
<!-- Logo -->
<div class="h-16 flex items-center justify-center border-b border-slate-200">
<svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
<h1 class="text-xl font-bold ml-2 text-slate-800">智慧物业</h1>
</div>
<!-- 导航菜单 -->
<nav class="flex-1 px-4 py-4 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 text-slate-600 hover:bg-slate-200"
:class="{ 'bg-indigo-500 text-white shadow-md hover:bg-indigo-500': currentPage === item.id }">
<component :is="item.icon" class="h-6 w-6 sidebar-icon"></component>
<span class="ml-4 font-medium">{{ item.name }}</span>
</a>
</nav>
</aside>
<!-- 右侧主内容区 -->
<main class="flex-1 ml-60 flex flex-col">
<!-- 顶部栏 -->
<header class="h-16 bg-white border-b border-slate-200 flex-shrink-0 flex items-center justify-between px-6">
<h2 class="text-2xl font-bold text-slate-800">{{ currentPageTitle }}</h2>
<div class="flex items-center space-x-4">
<p class="text-sm text-slate-500">欢迎您, 管理员</p>
<img src="https://picsum.photos/seed/admin/40/40" class="rounded-full">
</div>
</header>
<!-- 内容区 -->
<div class="flex-1 p-6 overflow-y-auto">
<transition name="fade" mode="out-in">
<!-- 仪表板页面 -->
<div v-if="currentPage === 'dashboard'" key="dashboard">
<!-- 核心数据卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white p-6 rounded-lg shadow flex items-center justify-between">
<div>
<p class="text-sm font-medium text-slate-500">待处理工单</p>
<p class="text-3xl font-bold text-amber-500 mt-1">{{ pendingOrdersCount }}</p>
</div>
<div class="p-3 bg-amber-100 rounded-full"><svg class="h-7 w-7 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div>
</div>
<div class="bg-white p-6 rounded-lg shadow flex items-center justify-between">
<div>
<p class="text-sm font-medium text-slate-500">本月应收 (元)</p>
<p class="text-3xl font-bold text-emerald-500 mt-1">{{ monthlyRevenue.toFixed(2) }}</p>
</div>
<div class="p-3 bg-emerald-100 rounded-full"><svg class="h-7 w-7 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" /></svg></div>
</div>
<div class="bg-white p-6 rounded-lg shadow flex items-center justify-between">
<div>
<p class="text-sm font-medium text-slate-500">住户总数</p>
<p class="text-3xl font-bold text-blue-500 mt-1">{{ totalHouseholds }}</p>
</div>
<div class="p-3 bg-blue-100 rounded-full"><svg class="h-7 w-7 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.125-1.274-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.653.125-1.274.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg></div>
</div>
<div class="bg-white p-6 rounded-lg shadow flex items-center justify-between">
<div>
<p class="text-sm font-medium text-slate-500">房屋总数</p>
<p class="text-3xl font-bold text-indigo-500 mt-1">{{ properties.length }}</p>
</div>
<div class="p-3 bg-indigo-100 rounded-full"><svg class="h-7 w-7 text-indigo-500" fill="none" viewBox="0 0 24.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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