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.
550 lines
18 KiB
550 lines
18 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: #f5f7fa;
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-header {
|
|
background: white;
|
|
padding: 25px 30px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-subtitle {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.stat-card-title {
|
|
font-size: 14px;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-card-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.stat-card-icon.primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.stat-card-icon.success {
|
|
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
|
}
|
|
|
|
.stat-card-icon.warning {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
}
|
|
|
|
.stat-card-icon.info {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
|
|
.stat-card-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-card-change {
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.stat-card-change.positive {
|
|
color: #10b981;
|
|
}
|
|
|
|
.stat-card-change.negative {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
border: none;
|
|
}
|
|
|
|
.card-header {
|
|
background: transparent;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
padding: 20px 25px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 25px;
|
|
}
|
|
|
|
.table {
|
|
margin: 0;
|
|
}
|
|
|
|
.table thead th {
|
|
border-top: none;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
font-weight: 600;
|
|
color: #666;
|
|
font-size: 14px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.table tbody td {
|
|
padding: 15px 12px;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.badge {
|
|
padding: 6px 12px;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.badge-pending {
|
|
background-color: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
|
|
.badge-approved {
|
|
background-color: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.badge-rejected {
|
|
background-color: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.badge-processing {
|
|
background-color: #dbeafe;
|
|
color: #1e40af;
|
|
}
|
|
|
|
.quick-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 15px;
|
|
}
|
|
|
|
.quick-action-btn {
|
|
padding: 20px;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: #333;
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.quick-action-btn:hover {
|
|
border-color: #667eea;
|
|
background-color: #f0f0ff;
|
|
color: #667eea;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.quick-action-btn i {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.quick-action-btn span {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.progress-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.progress-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.progress-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.progress-label strong {
|
|
color: #333;
|
|
}
|
|
|
|
.progress {
|
|
height: 8px;
|
|
border-radius: 10px;
|
|
background-color: #e5e7eb;
|
|
}
|
|
|
|
.progress-bar {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #999;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 48px;
|
|
margin-bottom: 15px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.content-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 页面头部 -->
|
|
<div class="page-header">
|
|
<h1 class="page-title">
|
|
<i class="bi bi-speedometer2"></i> 首页
|
|
</h1>
|
|
<p class="page-subtitle">欢迎回来，这里是您的资金使用概览</p>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-card-title">待审批事项</div>
|
|
<div class="stat-card-icon primary">
|
|
<i class="bi bi-file-earmark-check"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-value">12</div>
|
|
<div class="stat-card-change positive">
|
|
<i class="bi bi-arrow-up"></i>
|
|
<span>较昨日 +3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-card-title">待支付事项</div>
|
|
<div class="stat-card-icon success">
|
|
<i class="bi bi-cash-coin"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-value">8</div>
|
|
<div class="stat-card-change positive">
|
|
<i class="bi bi-arrow-up"></i>
|
|
<span>较昨日 +2</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-card-title">本月支出</div>
|
|
<div class="stat-card-icon warning">
|
|
<i class="bi bi-currency-yen"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-value">¥1,245,680</div>
|
|
<div class="stat-card-change negative">
|
|
<i class="bi bi-arrow-down"></i>
|
|
<span>较上月 -5.2%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-card-title">已完成事项</div>
|
|
<div class="stat-card-icon info">
|
|
<i class="bi bi-check-circle"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-value">156</div>
|
|
<div class="stat-card-change positive">
|
|
<i class="bi bi-arrow-up"></i>
|
|
<span>较上月 +12%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<div class="content-grid">
|
|
<!-- 待办事项列表 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="bi bi-list-task"></i> 待办事项
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>申请类型</th>
|
|
<th>申请人</th>
|
|
<th>金额</th>
|
|
<th>状态</th>
|
|
<th>提交时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<i class="bi bi-cart text-primary"></i>
|
|
采购管理 - 政府采购
|
|
</td>
|
|
<td>张三</td>
|
|
<td>¥125,000</td>
|
|
<td><span class="badge badge-pending">待审批</span></td>
|
|
<td>2024-01-15 10:30</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary">查看</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i class="bi bi-airplane text-info"></i>
|
|
出差管理 - 课题
|
|
</td>
|
|
<td>李四</td>
|
|
<td>¥8,500</td>
|
|
<td><span class="badge badge-pending">待审批</span></td>
|
|
<td>2024-01-15 09:15</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary">查看</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i class="bi bi-calendar-event text-success"></i>
|
|
会议审批 - 非课题
|
|
</td>
|
|
<td>王五</td>
|
|
<td>¥3,200</td>
|
|
<td><span class="badge badge-approved">已批准</span></td>
|
|
<td>2024-01-14 16:45</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-success">支付</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i class="bi bi-file-earmark-text text-warning"></i>
|
|
合同审批
|
|
</td>
|
|
<td>赵六</td>
|
|
<td>¥450,000</td>
|
|
<td><span class="badge badge-processing">处理中</span></td>
|
|
<td>2024-01-14 14:20</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary">查看</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i class="bi bi-tools text-secondary"></i>
|
|
安装维修申请
|
|
</td>
|
|
<td>钱七</td>
|
|
<td>¥15,800</td>
|
|
<td><span class="badge badge-approved">已批准</span></td>
|
|
<td>2024-01-14 11:30</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-success">支付</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快速操作和进度 -->
|
|
<div>
|
|
<!-- 快速操作 -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<i class="bi bi-lightning-charge"></i> 快速操作
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="quick-actions">
|
|
<a href="#" class="quick-action-btn" onclick="parent.loadPage('pages/payment/payment-wizard.html'); return false;">
|
|
<i class="bi bi-magic text-primary"></i>
|
|
<span>支付向导</span>
|
|
</a>
|
|
<a href="#" class="quick-action-btn" onclick="parent.loadPage('pages/pre-approval/procurement.html'); return false;">
|
|
<i class="bi bi-cart text-success"></i>
|
|
<span>采购申请</span>
|
|
</a>
|
|
<a href="#" class="quick-action-btn" onclick="parent.loadPage('pages/pre-approval/travel.html'); return false;">
|
|
<i class="bi bi-airplane text-info"></i>
|
|
<span>出差申请</span>
|
|
</a>
|
|
<a href="#" class="quick-action-btn" onclick="parent.loadPage('pages/pre-approval/meeting.html'); return false;">
|
|
<i class="bi bi-calendar-event text-warning"></i>
|
|
<span>会议申请</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 审批进度 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="bi bi-graph-up"></i> 本月审批进度
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="progress-item">
|
|
<div class="progress-label">
|
|
<span>采购管理</span>
|
|
<strong>85%</strong>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-primary" style="width: 85%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-item">
|
|
<div class="progress-label">
|
|
<span>出差管理</span>
|
|
<strong>72%</strong>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-success" style="width: 72%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-item">
|
|
<div class="progress-label">
|
|
<span>会议、培训</span>
|
|
<strong>68%</strong>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-info" style="width: 68%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-item">
|
|
<div class="progress-label">
|
|
<span>合同管理</span>
|
|
<strong>91%</strong>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-warning" style="width: 91%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.staticfile.org/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// 页面加载时的动画效果
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const cards = document.querySelectorAll('.stat-card, .card');
|
|
cards.forEach((card, index) => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(20px)';
|
|
setTimeout(() => {
|
|
card.style.transition = 'all 0.5s ease';
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'translateY(0)';
|
|
}, index * 100);
|
|
});
|
|
});
|
|
|
|
// 模拟数据更新（实际项目中应该从后端获取）
|
|
function updateStats() {
|
|
// 这里可以添加实时数据更新逻辑
|
|
console.log('统计数据更新');
|
|
}
|
|
|
|
// 每30秒更新一次数据
|
|
setInterval(updateStats, 30000);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|