You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
493 lines
16 KiB
493 lines
16 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>资金使用管理系统</title>
|
|
<link href="https://cdn.staticfile.org/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
background-color: #f5f5f5;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Header 样式 */
|
|
.main-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 15px 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.logo i {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.user-info:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 主容器 */
|
|
.main-container {
|
|
display: flex;
|
|
height: calc(100vh - 60px);
|
|
}
|
|
|
|
/* 侧边导航 */
|
|
.sidebar {
|
|
width: 260px;
|
|
background: white;
|
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
|
|
overflow-y: auto;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-menu {
|
|
list-style: none;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.nav-item {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 20px;
|
|
color: #333;
|
|
text-decoration: none;
|
|
transition: all 0.3s;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background-color: #f8f9fa;
|
|
color: #667eea;
|
|
border-left-color: #667eea;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background-color: #f0f0ff;
|
|
color: #667eea;
|
|
border-left-color: #667eea;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-link i {
|
|
margin-right: 12px;
|
|
font-size: 18px;
|
|
width: 20px;
|
|
}
|
|
|
|
.nav-submenu {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
background-color: #f8f9fa;
|
|
display: none;
|
|
}
|
|
|
|
.nav-submenu.show {
|
|
display: block;
|
|
}
|
|
|
|
.nav-submenu .nav-link {
|
|
padding-left: 50px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-submenu .nav-submenu {
|
|
padding-left: 0;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.nav-submenu .nav-submenu .nav-link {
|
|
padding-left: 70px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.nav-link .badge {
|
|
margin-left: 8px;
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-toggle {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-toggle .arrow-icon {
|
|
float: right;
|
|
transition: transform 0.3s ease;
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.nav-toggle:not(.collapsed) .arrow-icon {
|
|
transform: rotate(90deg);
|
|
color: #667eea;
|
|
}
|
|
|
|
.nav-toggle.collapsed .arrow-icon {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
/* 主内容区域 */
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: white;
|
|
}
|
|
|
|
/* Footer 样式 */
|
|
.main-footer {
|
|
background: white;
|
|
padding: 15px 30px;
|
|
border-top: 1px solid #e0e0e0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #666;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.footer-left {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.footer-link {
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
left: -260px;
|
|
transition: left 0.3s;
|
|
z-index: 1000;
|
|
height: calc(100vh - 60px);
|
|
}
|
|
|
|
.sidebar.show {
|
|
left: 0;
|
|
}
|
|
|
|
.main-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="main-header">
|
|
<div class="header-left">
|
|
<div class="logo">
|
|
<i class="bi bi-wallet2"></i>
|
|
<span>资金使用管理系统</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="user-info" onclick="showUserMenu()">
|
|
<div class="user-avatar">U</div>
|
|
<span id="userName">管理员</span>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
<button class="btn btn-sm btn-outline-light" onclick="logout()">
|
|
<i class="bi bi-box-arrow-right"></i> 退出
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主容器 -->
|
|
<div class="main-container">
|
|
<!-- 侧边导航 -->
|
|
<nav class="sidebar">
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#" onclick="loadPage('pages/dashboard.html'); return false;">
|
|
<i class="bi bi-speedometer2"></i>
|
|
<span>首页</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link nav-toggle" href="#" onclick="toggleSubmenu(this); return false;">
|
|
<i class="bi bi-file-earmark-check"></i>
|
|
<span>事前流程</span>
|
|
<i class="bi bi-chevron-right arrow-icon"></i>
|
|
</a>
|
|
<ul class="nav-submenu">
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/pre-approval/start-process.html'); return false;">
|
|
<i class="bi bi-plus-circle"></i>
|
|
<span>发起流程</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/pre-approval/process-query.html'); return false;">
|
|
<i class="bi bi-search"></i>
|
|
<span>流程查询</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link nav-toggle" href="#" onclick="toggleSubmenu(this); return false;">
|
|
<i class="bi bi-cash-coin"></i>
|
|
<span>支付流程</span>
|
|
<i class="bi bi-chevron-right arrow-icon"></i>
|
|
</a>
|
|
<ul class="nav-submenu">
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/payment/direct-payment.html'); return false;">
|
|
<i class="bi bi-lightning"></i>
|
|
<span>直接支付</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/payment/beijing-payment.html'); return false;">
|
|
<i class="bi bi-building"></i>
|
|
<span>非直接支付</span>
|
|
</a>
|
|
</li>
|
|
<!-- 暂时隐藏流程查询菜单项 -->
|
|
<!-- <li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/payment/process-query.html'); return false;">
|
|
<i class="bi bi-search"></i>
|
|
<span>流程查询</span>
|
|
</a>
|
|
</li> -->
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/payment/draft-query.html'); return false;">
|
|
<i class="bi bi-file-earmark-text"></i>
|
|
<span>暂存流程</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item" style="display: none;">
|
|
<a class="nav-link nav-toggle" href="#" onclick="toggleSubmenu(this); return false;">
|
|
<i class="bi bi-gear"></i>
|
|
<span>系统管理</span>
|
|
</a>
|
|
<ul class="nav-submenu">
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/management/users.html'); return false;">
|
|
<i class="bi bi-people"></i>
|
|
<span>用户管理</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/management/permissions.html'); return false;">
|
|
<i class="bi bi-shield-check"></i>
|
|
<span>权限管理</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/management/reports.html'); return false;">
|
|
<i class="bi bi-graph-up"></i>
|
|
<span>报表统计</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link nav-toggle" href="#" onclick="toggleSubmenu(this); return false;">
|
|
<i class="bi bi-wallet"></i>
|
|
<span>资金管理</span>
|
|
<i class="bi bi-chevron-right arrow-icon"></i>
|
|
</a>
|
|
<ul class="nav-submenu">
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/budget.html'); return false;">
|
|
<i class="bi bi-calculator"></i>
|
|
<span>预算查询</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" onclick="loadPage('pages/flowcharts.html'); return false;">
|
|
<i class="bi bi-diagram-3"></i>
|
|
<span>业务流程图</span>
|
|
<span class="badge bg-info">新</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link nav-toggle" href="#" onclick="toggleSubmenu(this); return false;">
|
|
<i class="bi bi-gear"></i>
|
|
<span>系统设置</span>
|
|
<i class="bi bi-chevron-right arrow-icon"></i>
|
|
</a>
|
|
<ul class="nav-submenu">
|
|
<li>
|
|
<a class="nav-link" href="#" onclick="loadPage('/budget/custom-model-role-mappings'); return false;">
|
|
<i class="bi bi-diagram-2"></i>
|
|
<span>字段角色对照</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- 主内容区域 -->
|
|
<main class="main-content">
|
|
<iframe id="mainFrame" class="content-iframe" src="pages/dashboard.html"></iframe>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="main-footer">
|
|
<div class="footer-left">
|
|
<span>© 2024 资金使用管理系统</span>
|
|
<a href="#" class="footer-link">帮助文档</a>
|
|
<a href="#" class="footer-link">联系我们</a>
|
|
</div>
|
|
<div class="footer-right">
|
|
<span>版本 v1.0.0</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.staticfile.org/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// 加载页面到iframe
|
|
function loadPage(url) {
|
|
const iframe = document.getElementById('mainFrame');
|
|
iframe.src = url;
|
|
|
|
// 更新导航激活状态
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
|
link.classList.remove('active');
|
|
});
|
|
event.target.closest('.nav-link').classList.add('active');
|
|
}
|
|
|
|
// 切换子菜单
|
|
function toggleSubmenu(element) {
|
|
const submenu = element.nextElementSibling;
|
|
const isCollapsed = element.classList.contains('collapsed');
|
|
|
|
// 关闭所有其他子菜单
|
|
document.querySelectorAll('.nav-submenu').forEach(menu => {
|
|
if (menu !== submenu) {
|
|
menu.classList.remove('show');
|
|
menu.previousElementSibling.classList.add('collapsed');
|
|
}
|
|
});
|
|
|
|
// 切换当前子菜单
|
|
if (isCollapsed) {
|
|
element.classList.remove('collapsed');
|
|
submenu.classList.add('show');
|
|
} else {
|
|
element.classList.add('collapsed');
|
|
submenu.classList.remove('show');
|
|
}
|
|
}
|
|
|
|
// 显示用户菜单
|
|
function showUserMenu() {
|
|
// 这里可以添加用户菜单下拉功能
|
|
alert('用户菜单功能待开发');
|
|
}
|
|
|
|
// 退出登录
|
|
function logout() {
|
|
if (confirm('确定要退出登录吗？')) {
|
|
window.location.href = 'login.html';
|
|
}
|
|
}
|
|
|
|
// 初始化：默认展开第一个子菜单
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
const firstSubmenu = document.querySelector('.nav-submenu');
|
|
if (firstSubmenu) {
|
|
firstSubmenu.classList.add('show');
|
|
firstSubmenu.previousElementSibling.classList.remove('collapsed');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|