save code
This commit is contained in:
xsl
@@ -1,934 +0,0 @@
|
||||
<!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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,758 @@
|
||||
# UI设计规范文档
|
||||
|
||||
## 1. 设计系统概述
|
||||
|
||||
本系统采用Ant Design风格，简洁专业，适合企业级应用。
|
||||
|
||||
## 2. 颜色系统
|
||||
|
||||
### 2.1 主色调
|
||||
```css
|
||||
/* 主品牌色 - 蓝色 */
|
||||
--primary-color: #1890ff;
|
||||
|
||||
/* 功能色 */
|
||||
--success-color: #52c41a; /* 成功/进行中 */
|
||||
--warning-color: #fa8c16; /* 警告/暂停 */
|
||||
--error-color: #ff4d4f; /* 错误/删除 */
|
||||
--info-color: #1890ff; /* 信息/新建 */
|
||||
```
|
||||
|
||||
### 2.2 中性色
|
||||
```css
|
||||
--text-primary: #333333; /* 主要文字 */
|
||||
--text-secondary: #666666; /* 次要文字 */
|
||||
--text-disabled: #999999; /* 禁用文字 */
|
||||
--border-color: #e8e8e8; /* 边框颜色 */
|
||||
--divider-color: #f0f0f0; /* 分割线颜色 */
|
||||
```
|
||||
|
||||
### 2.3 背景色
|
||||
```css
|
||||
--layout-header-bg: #001529; /* 顶部导航背景 */
|
||||
--layout-sidebar-bg: #ffffff; /* 侧边栏背景 */
|
||||
--layout-content-bg: #f0f2f5; /* 内容区背景 */
|
||||
--component-bg: #ffffff; /* 组件背景 */
|
||||
```
|
||||
|
||||
## 3. 状态标签颜色
|
||||
|
||||
| 状态 | 背景色 | 文字颜色 | 适用场景 |
|
||||
|------|--------|----------|----------|
|
||||
| 新建 | #e6f7ff | #1890ff | 项目初始状态 |
|
||||
| 进行中 | #f6ffed | #52c41a | 项目执行中 |
|
||||
| 已完成 | #f5f5f5 | #999999 | 项目完成 |
|
||||
| 已暂停 | #fff7e6 | #fa8c16 | 项目暂停 |
|
||||
| 已取消 | #fff1f0 | #f5222d | 项目取消 |
|
||||
| 正常 | #f6ffed | #52c41a | 用户状态正常 |
|
||||
| 禁用 | #f5f5f5 | #999999 | 用户状态禁用 |
|
||||
| 管理员 | #fff1f0 | #f5222d | 管理员角色 |
|
||||
| 市场部 | #e6f7ff | #1890ff | 市场部角色 |
|
||||
| 其他部门 | #e6f7ff | #1890ff | 其他部门角色 |
|
||||
|
||||
## 4. 字体系统
|
||||
|
||||
```css
|
||||
/* 字体家族 */
|
||||
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
/* 字体大小 */
|
||||
--font-size-base: 14px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-sm: 12px;
|
||||
--font-size-title: 18px;
|
||||
--font-size-heading: 24px;
|
||||
|
||||
/* 字重 */
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
```
|
||||
|
||||
## 5. 间距系统
|
||||
|
||||
```css
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 12px;
|
||||
--spacing-lg: 16px;
|
||||
--spacing-xl: 24px;
|
||||
--spacing-xxl: 32px;
|
||||
```
|
||||
|
||||
## 6. 组件样式
|
||||
|
||||
### 6.1 按钮
|
||||
|
||||
```css
|
||||
/* 主按钮 */
|
||||
.btn-primary {
|
||||
background-color: #1890ff;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
padding: 6px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #40a9ff;
|
||||
}
|
||||
|
||||
/* 默认按钮 */
|
||||
.btn-default {
|
||||
background-color: #ffffff;
|
||||
color: #666666;
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 6px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-default:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 链接按钮 */
|
||||
.btn-link {
|
||||
background: none;
|
||||
color: #1890ff;
|
||||
border: none;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
/* 危险按钮 */
|
||||
.btn-danger {
|
||||
background: none;
|
||||
color: #ff4d4f;
|
||||
border: none;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
color: #ff7875;
|
||||
}
|
||||
```
|
||||
|
||||
### 6.2 输入框
|
||||
|
||||
```css
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #1890ff;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #cccccc;
|
||||
}
|
||||
```
|
||||
|
||||
### 6.3 选择框
|
||||
|
||||
```css
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
border-color: #1890ff;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
```
|
||||
|
||||
### 6.4 卡片
|
||||
|
||||
```css
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
### 6.5 表格
|
||||
|
||||
```css
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
background: #fafafa;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table tbody td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
```
|
||||
|
||||
### 6.6 标签
|
||||
|
||||
```css
|
||||
.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;
|
||||
}
|
||||
|
||||
.tag-orange {
|
||||
background: #fff7e6;
|
||||
border: 1px solid #ffd591;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.tag-red {
|
||||
background: #fff1f0;
|
||||
border: 1px solid #ffa39e;
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.tag-gray {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #d9d9d9;
|
||||
color: #999999;
|
||||
}
|
||||
```
|
||||
|
||||
### 6.7 头像
|
||||
|
||||
```css
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #1890ff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 24px;
|
||||
}
|
||||
```
|
||||
|
||||
## 7. 布局系统
|
||||
|
||||
### 7.1 整体布局
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Header (顶部导航) │
|
||||
│ #001529 │
|
||||
├──────────┬──────────────────────────────┤
|
||||
│ │ │
|
||||
│ Sidebar │ Content │
|
||||
│ (侧边栏) │ (内容区) │
|
||||
│ #ffffff │ #f0f2f5 │
|
||||
│ 256px │ │
|
||||
│ │ │
|
||||
└──────────┴──────────────────────────────┘
|
||||
```
|
||||
|
||||
### 7.2 顶部导航栏
|
||||
|
||||
```css
|
||||
.layout-header {
|
||||
height: 64px;
|
||||
background: #001529;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
```
|
||||
|
||||
### 7.3 侧边栏
|
||||
|
||||
```css
|
||||
.layout-sider {
|
||||
width: 256px;
|
||||
background: #ffffff;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
position: fixed;
|
||||
left: 64px;
|
||||
top: 64px;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 菜单项 */
|
||||
.menu-item {
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #666666;
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
### 7.4 内容区
|
||||
|
||||
```css
|
||||
.layout-content {
|
||||
margin-left: 256px;
|
||||
margin-top: 64px;
|
||||
padding: 24px;
|
||||
background: #f0f2f5;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
```
|
||||
|
||||
## 8. 统计卡片
|
||||
|
||||
```css
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
float: right;
|
||||
font-size: 24px;
|
||||
color: #1890ff;
|
||||
opacity: 0.3;
|
||||
}
|
||||
```
|
||||
|
||||
## 9. 表单系统
|
||||
|
||||
### 9.1 表单组
|
||||
|
||||
```css
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: ' *';
|
||||
color: #ff4d4f;
|
||||
}
|
||||
```
|
||||
|
||||
### 9.2 表单行（两列布局）
|
||||
|
||||
```css
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-row-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
## 10. 工具栏
|
||||
|
||||
```css
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
## 11. Modal 弹窗
|
||||
|
||||
```css
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
width: 600px;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
## 12. 响应式设计
|
||||
|
||||
```css
|
||||
/* 平板 */
|
||||
@media (max-width: 1024px) {
|
||||
.stat-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端 */
|
||||
@media (max-width: 768px) {
|
||||
.layout-sider {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 13. 动画效果
|
||||
|
||||
```css
|
||||
/* 过渡动画 */
|
||||
.transition-all {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.hover-scale:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.hover-shadow:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 淡入淡出 */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
```
|
||||
|
||||
## 14. React 组件实现参考
|
||||
|
||||
### 14.1 颜色配置 (config/colors.js)
|
||||
|
||||
```javascript
|
||||
export const colors = {
|
||||
primary: '#1890ff',
|
||||
success: '#52c41a',
|
||||
warning: '#fa8c16',
|
||||
error: '#ff4d4f',
|
||||
info: '#1890ff',
|
||||
|
||||
text: {
|
||||
primary: '#333333',
|
||||
secondary: '#666666',
|
||||
disabled: '#999999',
|
||||
},
|
||||
|
||||
border: {
|
||||
base: '#e8e8e8',
|
||||
light: '#f0f0f0',
|
||||
},
|
||||
|
||||
bg: {
|
||||
header: '#001529',
|
||||
sidebar: '#ffffff',
|
||||
content: '#f0f2f5',
|
||||
component: '#ffffff',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 14.2 状态标签组件 (components/Tag.jsx)
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { colors } from '../config/colors';
|
||||
|
||||
const tagStyles = {
|
||||
new: { bg: '#e6f7ff', color: '#1890ff', border: '#91d5ff' },
|
||||
inProgress: { bg: '#f6ffed', color: '#52c41a', border: '#b7eb8f' },
|
||||
completed: { bg: '#f5f5f5', color: '#999999', border: '#d9d9d9' },
|
||||
paused: { bg: '#fff7e6', color: '#fa8c16', border: '#ffd591' },
|
||||
cancelled: { bg: '#fff1f0', color: '#f5222d', border: '#ffa39e' },
|
||||
};
|
||||
|
||||
export const Tag = ({ children, type = 'default' }) => {
|
||||
const style = tagStyles[type] || { bg: '#f5f5f5', color: '#999999', border: '#d9d9d9' };
|
||||
|
||||
return (
|
||||
<span style={{
|
||||
display: 'inline-block',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '2px',
|
||||
fontSize: '12px',
|
||||
lineHeight: 1.5,
|
||||
background: style.bg,
|
||||
color: style.color,
|
||||
border: `1px solid ${style.border}`,
|
||||
}}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 14.3 卡片组件 (components/Card.jsx)
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
export const Card = ({ title, children, extra }) => (
|
||||
<div style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '8px',
|
||||
padding: '24px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
marginBottom: '24px',
|
||||
}}>
|
||||
{title && (
|
||||
<div style={{
|
||||
fontSize: '16px',
|
||||
fontWeight: 600,
|
||||
color: '#333333',
|
||||
marginBottom: '20px',
|
||||
borderBottom: '1px solid #e8e8e8',
|
||||
paddingBottom: '12px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
{title}
|
||||
{extra}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
## 15. 图标使用
|
||||
|
||||
推荐使用以下图标库：
|
||||
- **Ant Design Icons**：`@ant-design/icons`
|
||||
- **React Icons**：`react-icons`
|
||||
|
||||
常用图标：
|
||||
- Dashboard: `DashboardOutlined`
|
||||
- Project: `FileTextOutlined`
|
||||
- User: `UserOutlined`
|
||||
- Settings: `SettingOutlined`
|
||||
- Add: `PlusOutlined`
|
||||
- Edit: `EditOutlined`
|
||||
- Delete: `DeleteOutlined`
|
||||
- View: `EyeOutlined`
|
||||
- Logout: `LogoutOutlined`
|
||||
|
||||
## 16. 页面布局模板
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
const PageLayout = ({ children, title }) => (
|
||||
<div style={{
|
||||
marginLeft: '256px',
|
||||
marginTop: '64px',
|
||||
padding: '24px',
|
||||
background: '#f0f2f5',
|
||||
minHeight: 'calc(100vh - 64px)',
|
||||
}}>
|
||||
{title && (
|
||||
<h1 style={{
|
||||
fontSize: '24px',
|
||||
fontWeight: 600,
|
||||
color: '#333333',
|
||||
marginBottom: '24px',
|
||||
}}>
|
||||
{title}
|
||||
</h1>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
## 17. 注意事项
|
||||
|
||||
1. **颜色使用**：统一使用预定义的颜色变量，不要使用硬编码的颜色值
|
||||
2. **间距统一**：使用间距系统保持一致性
|
||||
3. **响应式**：移动端、平板、桌面端都要适配
|
||||
4. **可访问性**：确保对比度符合WCAG标准，最小对比度4.5:1
|
||||
5. **性能**：避免过度使用动画，保持流畅的用户体验
|
||||
6. **浏览器兼容**：确保在主流浏览器中正常显示
|
||||
Reference in New Issue
Block a user