763 lines
32 KiB
HTML
763 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>项目信息管理系统 - UI设计图</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;
|
||
padding: 20px;
|
||
}
|
||
.design-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
.design-title {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
color: #333;
|
||
}
|
||
.section-title {
|
||
font-size: 24px;
|
||
color: #1890ff;
|
||
border-bottom: 3px solid #1890ff;
|
||
padding-bottom: 10px;
|
||
margin: 40px 0 20px 0;
|
||
}
|
||
.mockup {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
margin-bottom: 30px;
|
||
overflow: hidden;
|
||
}
|
||
.mockup-header {
|
||
background: #001529;
|
||
color: white;
|
||
padding: 16px 24px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
.logo-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
background: #1890ff;
|
||
border-radius: 4px;
|
||
}
|
||
.user-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: #1890ff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
}
|
||
.layout-grid {
|
||
display: grid;
|
||
grid-template-columns: 256px 1fr;
|
||
min-height: 600px;
|
||
}
|
||
.sidebar {
|
||
background: #fff;
|
||
border-right: 1px solid #e8e8e8;
|
||
padding: 20px 0;
|
||
}
|
||
.menu-item {
|
||
padding: 12px 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
border-left: 3px solid transparent;
|
||
}
|
||
.menu-item:hover {
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
}
|
||
.menu-item.active {
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
border-left-color: #1890ff;
|
||
}
|
||
.content {
|
||
padding: 24px;
|
||
background: #f0f2f5;
|
||
}
|
||
.card {
|
||
background: white;
|
||
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;
|
||
margin-bottom: 20px;
|
||
color: #333;
|
||
}
|
||
.stat-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.stat-card {
|
||
background: white;
|
||
padding: 20px;
|
||
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;
|
||
}
|
||
.stat-icon {
|
||
float: right;
|
||
font-size: 24px;
|
||
color: #1890ff;
|
||
opacity: 0.3;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
th {
|
||
background: #fafafa;
|
||
padding: 12px 16px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: #333;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
td {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
color: #666;
|
||
}
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 2px;
|
||
font-size: 12px;
|
||
}
|
||
.tag-blue { background: #e6f7ff; color: #1890ff; }
|
||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||
.tag-red { background: #fff1f0; color: #f5222d; }
|
||
.tag-gray { background: #f5f5f5; color: #999; }
|
||
.btn {
|
||
padding: 6px 16px;
|
||
border-radius: 4px;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.btn-primary {
|
||
background: #1890ff;
|
||
color: white;
|
||
}
|
||
.btn-default {
|
||
background: white;
|
||
border: 1px solid #d9d9d9;
|
||
color: #666;
|
||
}
|
||
.btn-link {
|
||
background: none;
|
||
color: #1890ff;
|
||
padding: 0 8px;
|
||
}
|
||
.btn-danger {
|
||
background: none;
|
||
color: #ff4d4f;
|
||
padding: 0 8px;
|
||
}
|
||
.toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
}
|
||
.toolbar-left {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
.input {
|
||
padding: 6px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
width: 200px;
|
||
}
|
||
.select {
|
||
padding: 6px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
width: 120px;
|
||
}
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
}
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
.login-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 600px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
.login-box {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 8px;
|
||
width: 400px;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||
}
|
||
.login-title {
|
||
text-align: center;
|
||
font-size: 24px;
|
||
margin-bottom: 30px;
|
||
color: #333;
|
||
}
|
||
.login-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
margin-top: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.design-note {
|
||
background: #fffbe6;
|
||
border-left: 4px solid #faad14;
|
||
padding: 16px;
|
||
margin: 20px 0;
|
||
color: #666;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="design-container">
|
||
<h1 class="design-title">📐 项目信息管理系统 - UI设计图</h1>
|
||
|
||
<!-- 登录页 -->
|
||
<h2 class="section-title">1. 登录页面</h2>
|
||
<div class="mockup">
|
||
<div class="login-container">
|
||
<div class="login-box">
|
||
<div class="login-title">项目信息管理系统</div>
|
||
<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>
|
||
<button class="login-btn">登录</button>
|
||
<div style="text-align: center; margin-top: 20px; color: #999; font-size: 12px;">
|
||
© 2026 项目信息管理系统
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 仪表盘 -->
|
||
<h2 class="section-title">2. 仪表盘页面</h2>
|
||
<div class="mockup">
|
||
<div class="mockup-header">
|
||
<div class="logo">
|
||
<div class="logo-icon"></div>
|
||
<span>项目信息管理系统</span>
|
||
</div>
|
||
<div class="user-nav">
|
||
<span>管理员</span>
|
||
<div class="avatar">管</div>
|
||
<button class="btn btn-link" style="color: white;">退出</button>
|
||
</div>
|
||
</div>
|
||
<div class="layout-grid">
|
||
<div class="sidebar">
|
||
<div class="menu-item active">
|
||
<span>📊</span> 仪表盘
|
||
</div>
|
||
<div class="menu-item">
|
||
<span>📄</span> 项目管理
|
||
</div>
|
||
<div class="menu-item">
|
||
<span>👥</span> 用户管理
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="stat-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📊</div>
|
||
<div class="stat-label">总项目数</div>
|
||
<div class="stat-value">15</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🔄</div>
|
||
<div class="stat-label">进行中</div>
|
||
<div class="stat-value" style="color: #52c41a;">8</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">✅</div>
|
||
<div class="stat-label">已完成</div>
|
||
<div class="stat-value" style="color: #1890ff;">5</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">💰</div>
|
||
<div class="stat-label">本月预算</div>
|
||
<div class="stat-value">¥50万</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title">最近项目</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>项目编号</th>
|
||
<th>项目名称</th>
|
||
<th>预算</th>
|
||
<th>状态</th>
|
||
<th>创建人</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>PRJ2026001</td>
|
||
<td>某公司官网开发</td>
|
||
<td>¥50,000</td>
|
||
<td><span class="tag tag-green">进行中</span></td>
|
||
<td>张三</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PRJ2026002</td>
|
||
<td>电商平台开发</td>
|
||
<td>¥100,000</td>
|
||
<td><span class="tag tag-blue">新建</span></td>
|
||
<td>李四</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PRJ2026003</td>
|
||
<td>移动APP开发</td>
|
||
<td>¥150,000</td>
|
||
<td><span class="tag tag-gray">已完成</span></td>
|
||
<td>王五</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目管理 -->
|
||
<h2 class="section-title">3. 项目管理页面</h2>
|
||
<div class="mockup">
|
||
<div class="mockup-header">
|
||
<div class="logo">
|
||
<div class="logo-icon"></div>
|
||
<span>项目信息管理系统</span>
|
||
</div>
|
||
<div class="user-nav">
|
||
<span>管理员</span>
|
||
<div class="avatar">管</div>
|
||
<button class="btn btn-link" style="color: white;">退出</button>
|
||
</div>
|
||
</div>
|
||
<div class="layout-grid">
|
||
<div class="sidebar">
|
||
<div class="menu-item">
|
||
<span>📊</span> 仪表盘
|
||
</div>
|
||
<div class="menu-item active">
|
||
<span>📄</span> 项目管理
|
||
</div>
|
||
<div class="menu-item">
|
||
<span>👥</span> 用户管理
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="card">
|
||
<div class="card-title">项目管理</div>
|
||
<div class="toolbar">
|
||
<div class="toolbar-left">
|
||
<input type="text" class="input" placeholder="搜索项目...">
|
||
<select class="select">
|
||
<option>所有状态</option>
|
||
<option>新建</option>
|
||
<option>进行中</option>
|
||
<option>已完成</option>
|
||
</select>
|
||
<select class="select">
|
||
<option>所有部门</option>
|
||
<option>市场部</option>
|
||
<option>技术部</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-primary">+ 新建项目</button>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>项目编号</th>
|
||
<th>合同编号</th>
|
||
<th>项目名称</th>
|
||
<th>预算</th>
|
||
<th>已付款</th>
|
||
<th>状态</th>
|
||
<th>部门</th>
|
||
<th>创建人</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>PRJ2026001</td>
|
||
<td>CT2026001</td>
|
||
<td>某公司官网开发</td>
|
||
<td>¥50,000</td>
|
||
<td>¥25,000</td>
|
||
<td><span class="tag tag-green">进行中</span></td>
|
||
<td>市场部</td>
|
||
<td>张三</td>
|
||
<td>
|
||
<button class="btn btn-link">查看</button>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PRJ2026002</td>
|
||
<td>CT2026002</td>
|
||
<td>电商平台开发</td>
|
||
<td>¥100,000</td>
|
||
<td>¥50,000</td>
|
||
<td><span class="tag tag-blue">新建</span></td>
|
||
<td>市场部</td>
|
||
<td>李四</td>
|
||
<td>
|
||
<button class="btn btn-link">查看</button>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PRJ2026003</td>
|
||
<td>CT2026003</td>
|
||
<td>移动APP开发</td>
|
||
<td>¥150,000</td>
|
||
<td>¥150,000</td>
|
||
<td><span class="tag tag-gray">已完成</span></td>
|
||
<td>技术部</td>
|
||
<td>王五</td>
|
||
<td>
|
||
<button class="btn btn-link">查看</button>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PRJ2026004</td>
|
||
<td>CT2026004</td>
|
||
<td>数据分析系统</td>
|
||
<td>¥80,000</td>
|
||
<td>¥30,000</td>
|
||
<td><span class="tag tag-green">进行中</span></td>
|
||
<td>市场部</td>
|
||
<td>张三</td>
|
||
<td>
|
||
<button class="btn btn-link">查看</button>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PRJ2026005</td>
|
||
<td>CT2026005</td>
|
||
<td>企业OA系统</td>
|
||
<td>¥200,000</td>
|
||
<td>¥0</td>
|
||
<td><span class="tag tag-orange">已暂停</span></td>
|
||
<td>技术部</td>
|
||
<td>赵六</td>
|
||
<td>
|
||
<button class="btn btn-link">查看</button>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 用户管理 -->
|
||
<h2 class="section-title">4. 用户管理页面（仅管理员可见）</h2>
|
||
<div class="mockup">
|
||
<div class="mockup-header">
|
||
<div class="logo">
|
||
<div class="logo-icon"></div>
|
||
<span>项目信息管理系统</span>
|
||
</div>
|
||
<div class="user-nav">
|
||
<span>管理员</span>
|
||
<div class="avatar">管</div>
|
||
<button class="btn btn-link" style="color: white;">退出</button>
|
||
</div>
|
||
</div>
|
||
<div class="layout-grid">
|
||
<div class="sidebar">
|
||
<div class="menu-item">
|
||
<span>📊</span> 仪表盘
|
||
</div>
|
||
<div class="menu-item">
|
||
<span>📄</span> 项目管理
|
||
</div>
|
||
<div class="menu-item active">
|
||
<span>👥</span> 用户管理
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="card">
|
||
<div class="card-title">用户管理</div>
|
||
<div class="toolbar">
|
||
<div class="toolbar-left">
|
||
<input type="text" class="input" placeholder="搜索用户...">
|
||
<select class="select">
|
||
<option>所有角色</option>
|
||
<option>管理员</option>
|
||
<option>市场部</option>
|
||
<option>其他部门</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-primary">+ 新建用户</button>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>用户名</th>
|
||
<th>真实姓名</th>
|
||
<th>部门</th>
|
||
<th>角色</th>
|
||
<th>邮箱</th>
|
||
<th>状态</th>
|
||
<th>创建时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>admin</td>
|
||
<td>管理员</td>
|
||
<td>管理部</td>
|
||
<td><span class="tag tag-red">管理员</span></td>
|
||
<td>admin@example.com</td>
|
||
<td><span class="tag tag-green">正常</span></td>
|
||
<td>2026-01-10</td>
|
||
<td>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-link">重置密码</button>
|
||
<button class="btn btn-link">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>zhangsan</td>
|
||
<td>张三</td>
|
||
<td>市场部</td>
|
||
<td><span class="tag tag-blue">市场部</span></td>
|
||
<td>zhangsan@example.com</td>
|
||
<td><span class="tag tag-green">正常</span></td>
|
||
<td>2026-01-15</td>
|
||
<td>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-link">重置密码</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>lisi</td>
|
||
<td>李四</td>
|
||
<td>市场部</td>
|
||
<td><span class="tag tag-blue">市场部</span></td>
|
||
<td>lisi@example.com</td>
|
||
<td><span class="tag tag-green">正常</span></td>
|
||
<td>2026-01-16</td>
|
||
<td>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-link">重置密码</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>wangwu</td>
|
||
<td>王五</td>
|
||
<td>技术部</td>
|
||
<td><span class="tag tag-blue">其他部门</span></td>
|
||
<td>wangwu@example.com</td>
|
||
<td><span class="tag tag-green">正常</span></td>
|
||
<td>2026-01-17</td>
|
||
<td>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-link">重置密码</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>zhaoliu</td>
|
||
<td>赵六</td>
|
||
<td>技术部</td>
|
||
<td><span class="tag tag-blue">其他部门</span></td>
|
||
<td>zhaoliu@example.com</td>
|
||
<td><span class="tag tag-gray">禁用</span></td>
|
||
<td>2026-01-18</td>
|
||
<td>
|
||
<button class="btn btn-link">编辑</button>
|
||
<button class="btn btn-link">重置密码</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新建/编辑项目表单 -->
|
||
<h2 class="section-title">5. 新建/编辑项目表单</h2>
|
||
<div class="mockup">
|
||
<div class="content">
|
||
<div class="card">
|
||
<div class="card-title">新建项目</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">项目编号 *</label>
|
||
<input type="text" class="form-input" placeholder="如：PRJ2026001">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">合同编号 *</label>
|
||
<input type="text" class="form-input" placeholder="如：CT2026001">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">项目名称 *</label>
|
||
<input type="text" class="form-input" placeholder="请输入项目名称">
|
||
</div>
|
||
<div class="form-row">
|
||
<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="text" class="form-input" placeholder="请输入已付款金额">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">所属部门 *</label>
|
||
<select class="form-input">
|
||
<option>市场部</option>
|
||
<option>技术部</option>
|
||
<option>财务部</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">项目状态 *</label>
|
||
<select class="form-input">
|
||
<option>新建</option>
|
||
<option>进行中</option>
|
||
<option>已完成</option>
|
||
<option>已暂停</option>
|
||
<option>已取消</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">开始日期</label>
|
||
<input type="date" class="form-input">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">结束日期</label>
|
||
<input type="date" class="form-input">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">项目描述</label>
|
||
<textarea class="form-input" rows="4" placeholder="请输入项目描述"></textarea>
|
||
</div>
|
||
<div style="display: flex; gap: 12px; justify-content: flex-end;">
|
||
<button class="btn btn-default">取消</button>
|
||
<button class="btn btn-primary">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="design-note">
|
||
<strong>💡 设计说明：</strong>
|
||
<ul style="margin-top: 10px; padding-left: 20px;">
|
||
<li>整体采用Ant Design风格，简洁专业</li>
|
||
<li>深色顶部导航栏（#001529），浅色侧边栏（白色），内容区使用浅灰背景（#f0f2f5）</li>
|
||
<li>状态标签使用不同颜色区分：新建-蓝色、进行中-绿色、已完成-灰色、已暂停-橙色、已取消-红色</li>
|
||
<li>按钮样式：主操作用蓝色（#1890ff），删除操作用红色</li>
|
||
<li>表格支持搜索和筛选功能</li>
|
||
<li>所有页面共用相同的布局结构（Header + Sidebar + Content）</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|