This commit is contained in:
parent
2f1f660b61
commit
1caf519d18
|
|
@ -0,0 +1,415 @@
|
|||
<!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: 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.order-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 第一级表格样式 */
|
||||
.level-1-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.level-1-table th {
|
||||
background: #f8f9fa;
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.level-1-table td {
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.expandable-row {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.expandable-row:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.expand-icon.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* 第二级表格样式 */
|
||||
.level-2-container {
|
||||
display: none;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.level-2-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-left: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.level-2-table th {
|
||||
background: #e9ecef;
|
||||
padding: 10px 8px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.level-2-table td {
|
||||
padding: 10px 8px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/* 第三级表格样式 */
|
||||
.level-3-container {
|
||||
display: none;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.level-3-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-left: 60px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.level-3-table th {
|
||||
background: #f1f3f4;
|
||||
padding: 8px 6px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.level-3-table td {
|
||||
padding: 8px 6px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.level-1-table th,
|
||||
.level-1-table td {
|
||||
padding: 8px 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.level-2-table,
|
||||
.level-3-table {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.level-2-table th,
|
||||
.level-2-table td {
|
||||
padding: 8px 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.level-3-table th,
|
||||
.level-3-table td {
|
||||
padding: 6px 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 层级指示线 */
|
||||
.level-indicator {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.level-indicator:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: #007bff;
|
||||
}
|
||||
|
||||
.level-2-indicator:before {
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
.level-3-indicator:before {
|
||||
background: #ffc107;
|
||||
}
|
||||
|
||||
.order-level-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.level-1-badge {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.level-2-badge {
|
||||
background: #e8f5e8;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.level-3-badge {
|
||||
background: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>订单管理系统</h1>
|
||||
<p>多级订单详情查看系统 - 支持总订单、店铺订单、商品订单三级展开</p>
|
||||
</div>
|
||||
|
||||
<div class="order-container">
|
||||
<!-- 第一级表格 - 总订单信息 -->
|
||||
<table class="level-1-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 class="expandable-row" onclick="toggleLevel2(this)">
|
||||
<td>
|
||||
<span class="order-level-badge level-1-badge">总订单</span>
|
||||
<span class="expand-icon">▶</span>
|
||||
</td>
|
||||
<td>111202507191533848089917</td>
|
||||
<td>3.8</td>
|
||||
<td>0</td>
|
||||
<td>0</td>
|
||||
<td>2025-07-19 15:34:13</td>
|
||||
<td>-</td>
|
||||
<td>3.18</td>
|
||||
<td>0.125078736989803303</td>
|
||||
</tr>
|
||||
<tr class="level-2-container">
|
||||
<td colspan="9" class="level-indicator level-2-indicator">
|
||||
<!-- 第二级表格 - 店铺订单信息 -->
|
||||
<table class="level-2-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>操作</th>
|
||||
<th>序号</th>
|
||||
<th>店铺名称</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="expandable-row" onclick="toggleLevel3(this)">
|
||||
<td>
|
||||
<span class="order-level-badge level-2-badge">店铺</span>
|
||||
<span class="expand-icon">▶</span>
|
||||
</td>
|
||||
<td>1</td>
|
||||
<td>牛牛蔬菜店</td>
|
||||
</tr>
|
||||
<tr class="level-3-container">
|
||||
<td colspan="3" class="level-indicator level-3-indicator">
|
||||
<!-- 第三级表格 - 商品订单信息 -->
|
||||
<table class="level-3-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><span class="order-level-badge level-3-badge">商品</span>1</td>
|
||||
<td>11420250719153384802014</td>
|
||||
<td>上海青约300g</td>
|
||||
<td>2</td>
|
||||
<td>2</td>
|
||||
<td>2</td>
|
||||
<td>1</td>
|
||||
<td>-</td>
|
||||
<td>
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGOEZGIi8+CjxwYXRoIGQ9Ik0yMCAzNUMyOC4yODQzIDM1IDM1IDI4LjI4NDMgMzUgMjBDMzUgMTEuNzE1NyAyOC4yODQzIDUgMjAgNUMxMS43MTU3IDUgNSAxMS43MTU3IDUgMjBDNSAyOC4yODQzIDExLjcxNTcgMzUgMjAgMzVaIiBzdHJva2U9IiM0Q0FGNTBCIE1IDkgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0xNSAxNUgyNSIgc3Ryb2tlPSIjNENBRjUwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTcgMjBIMjMiIHN0cm9rZT0iIzRDQUY1MCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTE5IDI1SDIxIiBzdHJva2U9IiM0Q0FGNTBILE1pdGVyPSJhY2FmaW50aWFsaXMiLz4KPHN2Zz4K"
|
||||
alt="蔬菜图片" class="product-image">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 切换第二级表格显示状态
|
||||
function toggleLevel2(row) {
|
||||
const icon = row.querySelector('.expand-icon');
|
||||
const nextRow = row.nextElementSibling;
|
||||
|
||||
if (nextRow.style.display === 'none' || !nextRow.style.display) {
|
||||
nextRow.style.display = 'table-row';
|
||||
icon.classList.add('expanded');
|
||||
icon.textContent = '▼';
|
||||
} else {
|
||||
nextRow.style.display = 'none';
|
||||
icon.classList.remove('expanded');
|
||||
icon.textContent = '▶';
|
||||
|
||||
// 关闭所有第三级表格
|
||||
const level3Containers = nextRow.querySelectorAll('.level-3-container');
|
||||
level3Containers.forEach(container => {
|
||||
container.style.display = 'none';
|
||||
const level2Icon = container.parentElement.parentElement.querySelector('.expand-icon');
|
||||
if (level2Icon) {
|
||||
level2Icon.classList.remove('expanded');
|
||||
level2Icon.textContent = '▶';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 切换第三级表格显示状态
|
||||
function toggleLevel3(row) {
|
||||
const icon = row.querySelector('.expand-icon');
|
||||
const nextRow = row.nextElementSibling;
|
||||
|
||||
if (nextRow.style.display === 'none' || !nextRow.style.display) {
|
||||
nextRow.style.display = 'table-row';
|
||||
icon.classList.add('expanded');
|
||||
icon.textContent = '▼';
|
||||
} else {
|
||||
nextRow.style.display = 'none';
|
||||
icon.classList.remove('expanded');
|
||||
icon.textContent = '▶';
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时初始化所有展开容器为隐藏状态
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const allContainers = document.querySelectorAll('.level-2-container, .level-3-container');
|
||||
allContainers.forEach(container => {
|
||||
container.style.display = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
// 添加键盘支持
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
// 按ESC键收起所有展开的表格
|
||||
const allContainers = document.querySelectorAll('.level-2-container, .level-3-container');
|
||||
const allIcons = document.querySelectorAll('.expand-icon');
|
||||
|
||||
allContainers.forEach(container => {
|
||||
container.style.display = 'none';
|
||||
});
|
||||
|
||||
allIcons.forEach(icon => {
|
||||
icon.classList.remove('expanded');
|
||||
icon.textContent = '▶';
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue