304 lines
9.4 KiB
HTML
304 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>报表查询 - OA系统</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: #f5f5f5;
|
||
max-width: 414px;
|
||
margin: 0 auto;
|
||
min-height: 100vh;
|
||
padding-bottom: 60px;
|
||
}
|
||
.header {
|
||
background: #1890ff;
|
||
color: white;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.header-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
.content {
|
||
padding: 16px;
|
||
background: #ffffff;
|
||
min-height: calc(100vh - 44px - 60px);
|
||
}
|
||
.card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
margin-bottom: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.summary-box {
|
||
text-align: center;
|
||
padding: 24px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 8px;
|
||
color: white;
|
||
margin-bottom: 16px;
|
||
}
|
||
.summary-value {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
}
|
||
.summary-label {
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
}
|
||
.stat-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.stat-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.stat-label {
|
||
color: #999;
|
||
font-size: 14px;
|
||
}
|
||
.stat-value {
|
||
color: #333;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
.form-item {
|
||
margin-bottom: 16px;
|
||
}
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
}
|
||
.btn-query {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
margin-top: 8px;
|
||
}
|
||
.project-list {
|
||
margin-top: 16px;
|
||
}
|
||
.project-item {
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.project-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.project-name {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
.project-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
.project-amount {
|
||
color: #1890ff;
|
||
font-weight: 500;
|
||
}
|
||
.bottom-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 100%;
|
||
max-width: 414px;
|
||
background: white;
|
||
border-top: 1px solid #e5e5e5;
|
||
display: flex;
|
||
padding: 8px 0;
|
||
z-index: 100;
|
||
}
|
||
.nav-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 8px;
|
||
color: #666;
|
||
font-size: 12px;
|
||
text-decoration: none;
|
||
}
|
||
.nav-item.active {
|
||
color: #1890ff;
|
||
}
|
||
.nav-icon {
|
||
font-size: 20px;
|
||
margin-bottom: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="header-title">报表查询</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="card">
|
||
<div class="card-title">我的产值</div>
|
||
<div class="form-item">
|
||
<label class="form-label">查询时间段</label>
|
||
<input type="month" class="form-input" value="2025-01" id="monthInput">
|
||
</div>
|
||
<button class="btn-query" onclick="queryOutput()">查询</button>
|
||
|
||
<div class="summary-box">
|
||
<div class="summary-value" id="totalOutput">¥120,000</div>
|
||
<div class="summary-label">2025年1月总产值</div>
|
||
</div>
|
||
|
||
<div class="stat-row">
|
||
<span class="stat-label">完成项目数</span>
|
||
<span class="stat-value">5个</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">平均项目产值</span>
|
||
<span class="stat-value">¥24,000</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">最高项目产值</span>
|
||
<span class="stat-value">¥30,000</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">项目明细</div>
|
||
<div class="project-list">
|
||
<div class="project-item">
|
||
<div class="project-name">25-1 - XX工程项目</div>
|
||
<div class="project-info">
|
||
<span>完成时间：2025-01-15</span>
|
||
<span class="project-amount">产值：¥30,000</span>
|
||
</div>
|
||
</div>
|
||
<div class="project-item">
|
||
<div class="project-name">25-2 - YY工程项目</div>
|
||
<div class="project-info">
|
||
<span>完成时间：2025-01-18</span>
|
||
<span class="project-amount">产值：¥25,000</span>
|
||
</div>
|
||
</div>
|
||
<div class="project-item">
|
||
<div class="project-name">25-3 - ZZ工程项目</div>
|
||
<div class="project-info">
|
||
<span>完成时间：2025-01-20</span>
|
||
<span class="project-amount">产值：¥28,000</span>
|
||
</div>
|
||
</div>
|
||
<div class="project-item">
|
||
<div class="project-name">25-4 - AA工程项目</div>
|
||
<div class="project-info">
|
||
<span>完成时间：2025-01-22</span>
|
||
<span class="project-amount">产值：¥22,000</span>
|
||
</div>
|
||
</div>
|
||
<div class="project-item">
|
||
<div class="project-name">25-5 - BB工程项目</div>
|
||
<div class="project-info">
|
||
<span>完成时间：2025-01-25</span>
|
||
<span class="project-amount">产值：¥15,000</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">回款情况</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">应收总额</span>
|
||
<span class="stat-value">¥500,000</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">已回款</span>
|
||
<span class="stat-value" style="color: #52c41a;">¥450,000</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">未回款</span>
|
||
<span class="stat-value" style="color: #ff4d4f;">¥50,000</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">回款率</span>
|
||
<span class="stat-value">90%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-nav">
|
||
<a href="todo.html" class="nav-item">
|
||
<div class="nav-icon">📋</div>
|
||
<div>待办</div>
|
||
</a>
|
||
<a href="message.html" class="nav-item">
|
||
<div class="nav-icon">🔔</div>
|
||
<div>消息</div>
|
||
</a>
|
||
<a href="project.html" class="nav-item">
|
||
<div class="nav-icon">📁</div>
|
||
<div>项目</div>
|
||
</a>
|
||
<a href="output.html" class="nav-item">
|
||
<div class="nav-icon">📝</div>
|
||
<div>成果</div>
|
||
</a>
|
||
<a href="profile.html" class="nav-item">
|
||
<div class="nav-icon">👤</div>
|
||
<div>我的</div>
|
||
</a>
|
||
</div>
|
||
|
||
<script>
|
||
function queryOutput() {
|
||
const month = document.getElementById('monthInput').value;
|
||
alert('查询' + month + '的数据');
|
||
// 实际应用中这里应该调用API查询数据
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|