935 lines
32 KiB
HTML
935 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>海洋项目管理系统 - 设计参考</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: #f0f2f5;
|
|
color: #333;
|
|
}
|
|
|
|
.page-selector {
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 1000;
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.page-selector h3 {
|
|
margin-bottom: 10px;
|
|
font-size: 16px;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.page-selector button {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
margin-bottom: 5px;
|
|
background: #1890ff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.page-selector button:hover {
|
|
background: #40a9ff;
|
|
}
|
|
|
|
.page-selector button.active {
|
|
background: #096dd9;
|
|
}
|
|
|
|
.page {
|
|
display: none;
|
|
}
|
|
|
|
.page.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Login Page Styles */
|
|
.login-page {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: linear-gradient(135deg, #001529 0%, #1890ff 100%);
|
|
}
|
|
|
|
.login-box {
|
|
width: 400px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 40px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.login-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #1890ff;
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 8px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: #1890ff;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.checkbox-group input {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.btn-login {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: #1890ff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-login:hover {
|
|
background: #40a9ff;
|
|
}
|
|
|
|
/* Main Layout Styles */
|
|
.main-layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 256px;
|
|
background: white;
|
|
border-right: 1px solid #e8e8e8;
|
|
padding-top: 64px;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
border-left: 3px solid transparent;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.menu-item.active {
|
|
background: #e6f7ff;
|
|
color: #1890ff;
|
|
border-left-color: #1890ff;
|
|
}
|
|
|
|
.header {
|
|
height: 64px;
|
|
background: #001529;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 256px;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
color: white;
|
|
z-index: 100;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 256px;
|
|
margin-top: 64px;
|
|
padding: 24px;
|
|
background: #f0f2f5;
|
|
min-height: calc(100vh - 64px);
|
|
}
|
|
|
|
/* Dashboard Styles */
|
|
.stat-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.chart-section {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.chart-placeholder {
|
|
height: 300px;
|
|
background: #fafafa;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.recent-project {
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.project-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.project-meta {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.project-amount {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1890ff;
|
|
}
|
|
|
|
/* Project List Styles */
|
|
.toolbar {
|
|
background: white;
|
|
padding: 16px 24px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.toolbar-left {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-input {
|
|
width: 240px;
|
|
height: 32px;
|
|
padding: 4px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.select-input {
|
|
width: 120px;
|
|
height: 32px;
|
|
padding: 4px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn-primary {
|
|
height: 32px;
|
|
padding: 0 16px;
|
|
background: #1890ff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #40a9ff;
|
|
}
|
|
|
|
.table-container {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
thead th {
|
|
background: #fafafa;
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: #333;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
font-size: 14px;
|
|
}
|
|
|
|
tbody td {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background: #fafafa;
|
|
}
|
|
|
|
.action-link {
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.action-link:hover {
|
|
color: #40a9ff;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tag-blue {
|
|
background: #e6f7ff;
|
|
border: 1px solid #91d5ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.tag-green {
|
|
background: #f6ffed;
|
|
border: 1px solid #b7eb8f;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.pagination {
|
|
height: 48px;
|
|
background: white;
|
|
border-top: 1px solid #e8e8e8;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.page-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
background: white;
|
|
color: #666;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.page-btn:hover {
|
|
border-color: #1890ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.page-btn.active {
|
|
background: #1890ff;
|
|
color: white;
|
|
border-color: #1890ff;
|
|
}
|
|
|
|
/* Project Detail Styles */
|
|
.breadcrumb {
|
|
height: 32px;
|
|
margin-bottom: 16px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.info-card {
|
|
background: white;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.info-card-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.info-item-label {
|
|
width: 120px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.info-item-value {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.full-width {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.btn-edit {
|
|
height: 32px;
|
|
padding: 0 16px;
|
|
background: #1890ff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-delete {
|
|
height: 32px;
|
|
padding: 0 16px;
|
|
background: #ff4d4f;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Page Selector -->
|
|
<div class="page-selector">
|
|
<h3>页面切换</h3>
|
|
<button class="active" onclick="showPage('login')">登录页面</button>
|
|
<button onclick="showPage('dashboard')">仪表盘</button>
|
|
<button onclick="showPage('project-list')">项目列表</button>
|
|
<button onclick="showPage('project-detail')">项目详情</button>
|
|
</div>
|
|
|
|
<!-- Login Page -->
|
|
<div id="login" class="page login-page active">
|
|
<div class="login-box">
|
|
<h1 class="login-title">海洋项目管理系统</h1>
|
|
<div class="form-group">
|
|
<label class="form-label">用户名</label>
|
|
<input type="text" class="form-input" placeholder="请输入用户名">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">密码</label>
|
|
<input type="password" class="form-input" placeholder="请输入密码">
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="remember">
|
|
<label for="remember">记住密码</label>
|
|
</div>
|
|
<button class="btn-login">登录</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Page -->
|
|
<div id="dashboard" class="page">
|
|
<div class="main-layout">
|
|
<div class="sidebar">
|
|
<div class="menu-item active">📊 仪表盘</div>
|
|
<div class="menu-item">📁 项目管理</div>
|
|
<div class="menu-item">👥 用户管理</div>
|
|
<div class="menu-item">📈 项目统计</div>
|
|
</div>
|
|
<div style="flex: 1">
|
|
<div class="header">
|
|
<div class="logo">海洋项目管理系统</div>
|
|
<div class="user-info">
|
|
<span>张三 (市场部)</span>
|
|
<button class="btn-primary" style="height: 28px; font-size: 12px;">登出</button>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 style="margin-bottom: 24px; font-size: 24px; font-weight: 600; color: #333;">仪表盘</h2>
|
|
<div class="stat-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-label">项目总数</div>
|
|
<div class="stat-value">156</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">进行中</div>
|
|
<div class="stat-value">68</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">已完成</div>
|
|
<div class="stat-value">88</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">总合同金额（万元）</div>
|
|
<div class="stat-value">12,450</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-section">
|
|
<div class="card">
|
|
<div class="card-title">项目趋势图</div>
|
|
<div class="chart-placeholder">
|
|
[柱状图/折线图显示区域]
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">最近项目</div>
|
|
<div class="recent-project">
|
|
<div class="project-name">某电力基建工程项目</div>
|
|
<div class="project-meta">2026-01-25</div>
|
|
<div class="project-amount">950万元</div>
|
|
</div>
|
|
<div class="recent-project">
|
|
<div class="project-name">业扩工程项目</div>
|
|
<div class="project-meta">2026-01-24</div>
|
|
<div class="project-amount">500万元</div>
|
|
</div>
|
|
<div class="recent-project">
|
|
<div class="project-name">客户工程项目</div>
|
|
<div class="project-meta">2026-01-23</div>
|
|
<div class="project-amount">300万元</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project List Page -->
|
|
<div id="project-list" class="page">
|
|
<div class="main-layout">
|
|
<div class="sidebar">
|
|
<div class="menu-item">📊 仪表盘</div>
|
|
<div class="menu-item active">📁 项目管理</div>
|
|
<div class="menu-item">👥 用户管理</div>
|
|
<div class="menu-item">📈 项目统计</div>
|
|
</div>
|
|
<div style="flex: 1">
|
|
<div class="header">
|
|
<div class="logo">海洋项目管理系统</div>
|
|
<div class="user-info">
|
|
<span>张三 (市场部)</span>
|
|
<button class="btn-primary" style="height: 28px; font-size: 12px;">登出</button>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 style="margin-bottom: 24px; font-size: 24px; font-weight: 600; color: #333;">项目管理</h2>
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<input type="text" class="search-input" placeholder="搜索项目名称、合同编号">
|
|
<select class="select-input">
|
|
<option>工程类别</option>
|
|
<option>基建</option>
|
|
<option>业扩</option>
|
|
<option>客户</option>
|
|
</select>
|
|
<select class="select-input">
|
|
<option>所属项目部</option>
|
|
<option>项目部一</option>
|
|
<option>项目部二</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn-primary">+ 新建项目</button>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>合同编号</th>
|
|
<th>项目名称</th>
|
|
<th>工程类别</th>
|
|
<th>签订日期</th>
|
|
<th>合同金额（万元）</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>PRJ2026001</td>
|
|
<td>某电力基建工程项目</td>
|
|
<td><span class="tag tag-blue">基建</span></td>
|
|
<td>2026-01-25</td>
|
|
<td>950.00</td>
|
|
<td><span class="tag tag-green">进行中</span></td>
|
|
<td>
|
|
<span class="action-link">查看</span>
|
|
<span class="action-link">编辑</span>
|
|
<span class="action-link" style="color: #ff4d4f;">删除</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PRJ2026002</td>
|
|
<td>业扩工程项目</td>
|
|
<td><span class="tag tag-blue">业扩</span></td>
|
|
<td>2026-01-24</td>
|
|
<td>500.00</td>
|
|
<td><span class="tag tag-green">进行中</span></td>
|
|
<td>
|
|
<span class="action-link">查看</span>
|
|
<span class="action-link">编辑</span>
|
|
<span class="action-link" style="color: #ff4d4f;">删除</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PRJ2026003</td>
|
|
<td>客户工程项目</td>
|
|
<td><span class="tag tag-blue">客户</span></td>
|
|
<td>2026-01-23</td>
|
|
<td>300.00</td>
|
|
<td><span class="tag" style="background: #f5f5f5; color: #999;">已完成</span></td>
|
|
<td>
|
|
<span class="action-link">查看</span>
|
|
<span class="action-link">编辑</span>
|
|
<span class="action-link" style="color: #ff4d4f;">删除</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="pagination">
|
|
<button class="page-btn"><</button>
|
|
<button class="page-btn active">1</button>
|
|
<button class="page-btn">2</button>
|
|
<button class="page-btn">3</button>
|
|
<button class="page-btn">></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Detail Page -->
|
|
<div id="project-detail" class="page">
|
|
<div class="main-layout">
|
|
<div class="sidebar">
|
|
<div class="menu-item">📊 仪表盘</div>
|
|
<div class="menu-item active">📁 项目管理</div>
|
|
<div class="menu-item">👥 用户管理</div>
|
|
<div class="menu-item">📈 项目统计</div>
|
|
</div>
|
|
<div style="flex: 1">
|
|
<div class="header">
|
|
<div class="logo">海洋项目管理系统</div>
|
|
<div class="user-info">
|
|
<span>张三 (市场部)</span>
|
|
<button class="btn-primary" style="height: 28px; font-size: 12px;">登出</button>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="breadcrumb">首页 > 项目管理 > 项目详情</div>
|
|
<div class="page-header">
|
|
<h1 class="page-title">某电力基建工程项目</h1>
|
|
<div class="btn-group">
|
|
<button class="btn-edit">编辑</button>
|
|
<button class="btn-delete">删除</button>
|
|
</div>
|
|
</div>
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<div class="info-card-title">基本信息</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">合同编号</div>
|
|
<div class="info-item-value">PRJ2026001</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">项目名称</div>
|
|
<div class="info-item-value">某电力基建工程项目</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">工程类别</div>
|
|
<div class="info-item-value"><span class="tag tag-blue">基建</span></div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">合同金额</div>
|
|
<div class="info-item-value">950.00 万元</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="info-card-title">项目时间</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">签订日期</div>
|
|
<div class="info-item-value">2026-01-25</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">开工日期</div>
|
|
<div class="info-item-value">2026-01-15</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">计划竣工日期</div>
|
|
<div class="info-item-value">2026-12-31</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">实际竣工日期</div>
|
|
<div class="info-item-value">-</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="info-card-title">成本管理</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">总体成本控制</div>
|
|
<div class="info-item-value">800.00 万元</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">人工成本控制</div>
|
|
<div class="info-item-value">300.00 万元</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">材料成本控制</div>
|
|
<div class="info-item-value">400.00 万元</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">其他费用控制</div>
|
|
<div class="info-item-value">100.00 万元</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="info-card-title">合同财务</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">合同金额</div>
|
|
<div class="info-item-value">950.00 万元</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">质保金比例</div>
|
|
<div class="info-item-value">5.00%</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">质保金金额</div>
|
|
<div class="info-item-value">47.50 万元</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">质保到期日</div>
|
|
<div class="info-item-value">2028-12-31</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="info-card-title">收款付款</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">项目进度</div>
|
|
<div class="info-item-value">60.00%</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">应收款金额</div>
|
|
<div class="info-item-value">570.00 万元</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">实际收款金额</div>
|
|
<div class="info-item-value">475.00 万元</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">收款完成率</div>
|
|
<div class="info-item-value">50.00%</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="info-card-title">结算信息</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">成本结算金额</div>
|
|
<div class="info-item-value">-</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">到期结算项目</div>
|
|
<div class="info-item-value">0 个</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">未结算项目</div>
|
|
<div class="info-item-value">0 个</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-card full-width">
|
|
<div class="info-card-title">项目管理</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">所属项目部</div>
|
|
<div class="info-item-value">项目部一</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">项目负责人</div>
|
|
<div class="info-item-value">李四 13900000001</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">工程款拨付方式</div>
|
|
<div class="info-item-value">按进度付款</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">存在的问题</div>
|
|
<div class="info-item-value">-</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">建议措施</div>
|
|
<div class="info-item-value">-</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-label">备注</div>
|
|
<div class="info-item-value">备注信息</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showPage(pageId) {
|
|
// Hide all pages
|
|
document.querySelectorAll('.page').forEach(page => {
|
|
page.classList.remove('active');
|
|
});
|
|
|
|
// Remove active class from all buttons
|
|
document.querySelectorAll('.page-selector button').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
|
|
// Show selected page
|
|
document.getElementById(pageId).classList.add('active');
|
|
|
|
// Add active class to clicked button
|
|
event.target.classList.add('active');
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|