|
|
|
@ -159,21 +159,6 @@ |
|
|
|
display: flex; |
|
|
|
gap: 10px; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
min-width: 800px; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-bar button { |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-bar input[type="text"], |
|
|
|
.filter-bar input[type="date"] { |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-bar select { |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-bar button { |
|
|
|
@ -185,6 +170,8 @@ |
|
|
|
cursor: pointer; |
|
|
|
font-size: 14px; |
|
|
|
transition: all 0.3s ease; |
|
|
|
white-space: nowrap; |
|
|
|
min-width: 80px; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-bar button:hover { |
|
|
|
@ -437,6 +424,91 @@ |
|
|
|
border-color: #1890ff; |
|
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
/* 表格容器样式，添加横向滚动 */ |
|
|
|
.table-container { |
|
|
|
width: 100%; |
|
|
|
overflow-x: auto; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.table-container table { |
|
|
|
width: auto; |
|
|
|
min-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* 确保表格列宽正确显示 */ |
|
|
|
.table-container th, |
|
|
|
.table-container td { |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
/* 筛选容器样式，添加横向滚动 */ |
|
|
|
.filter-container { |
|
|
|
width: 100%; |
|
|
|
overflow-x: auto; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
scrollbar-width: thin; |
|
|
|
scrollbar-color: #1890ff #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-container::-webkit-scrollbar { |
|
|
|
height: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-container::-webkit-scrollbar-track { |
|
|
|
background: #f0f0f0; |
|
|
|
border-radius: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-container::-webkit-scrollbar-thumb { |
|
|
|
background: #1890ff; |
|
|
|
border-radius: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-container::-webkit-scrollbar-thumb:hover { |
|
|
|
background: #40a9ff; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-container .filter-bar { |
|
|
|
width: auto; |
|
|
|
min-width: 100%; |
|
|
|
flex-wrap: nowrap; |
|
|
|
padding: 10px 0; |
|
|
|
} |
|
|
|
|
|
|
|
/* 标签页容器样式，添加横向滚动 */ |
|
|
|
.tab-container-scroll { |
|
|
|
width: 100%; |
|
|
|
overflow-x: auto; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-container-scroll .tab-container { |
|
|
|
width: auto; |
|
|
|
min-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* 用户信息容器样式，添加横向滚动 */ |
|
|
|
.user-details-container { |
|
|
|
width: 100%; |
|
|
|
overflow-x: auto; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.user-details-container .user-details { |
|
|
|
width: auto; |
|
|
|
min-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.user-details-container .detail-grid { |
|
|
|
width: auto; |
|
|
|
min-width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
@ -450,6 +522,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="container"> |
|
|
|
<div class="user-details-container"> |
|
|
|
<div class="user-details"> |
|
|
|
<h2>用户信息</h2> |
|
|
|
<div class="detail-grid"> |
|
|
|
@ -479,18 +552,22 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="data-section"> |
|
|
|
<div class="section-header"> |
|
|
|
<div class="tab-container-scroll"> |
|
|
|
<div class="tab-container"> |
|
|
|
<button class="tab-button active" onclick="switchTab('personal', this)">个人数据</button> |
|
|
|
<button class="tab-button" onclick="switchTab('public', this)">公海池数据</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 个人数据标签页 --> |
|
|
|
<div class="section-content"> |
|
|
|
<div id="personal" class="tab-content active"> |
|
|
|
<div class="filter-container"> |
|
|
|
<div class="filter-bar"> |
|
|
|
<button onclick="loadPersonalData()">刷新数据</button> |
|
|
|
<button onclick="filterPersonalData('all')" style="background-color: #52c41a;">全部</button> |
|
|
|
@ -513,9 +590,11 @@ |
|
|
|
<option value="100">100条/页</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div id="personalFilterTags" style="margin-top: 10px; margin-bottom: 10px;"></div> |
|
|
|
|
|
|
|
<div class="table-container"> |
|
|
|
<table id="personalTable"> |
|
|
|
<thead> |
|
|
|
<tr> |
|
|
|
@ -533,6 +612,7 @@ |
|
|
|
<tbody id="personalBody"> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
<div id="personalEmpty" class="empty-state">暂无个人数据</div> |
|
|
|
<div class="pagination" id="personalPagination"> |
|
|
|
</div> |
|
|
|
@ -540,6 +620,7 @@ |
|
|
|
|
|
|
|
<!-- 公海池数据标签页 --> |
|
|
|
<div id="public" class="tab-content"> |
|
|
|
<div class="filter-container"> |
|
|
|
<div class="filter-bar"> |
|
|
|
<button onclick="loadPublicData()">刷新数据</button> |
|
|
|
<button id="publicAssignButton" onclick="openAssignModal()" style="background-color: #722ed1;">分配</button> |
|
|
|
@ -558,9 +639,11 @@ |
|
|
|
<option value="100">100条/页</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div id="publicFilterTags" style="margin-top: 10px; margin-bottom: 10px;"></div> |
|
|
|
|
|
|
|
<div class="table-container"> |
|
|
|
<table id="publicTable"> |
|
|
|
<thead> |
|
|
|
<tr> |
|
|
|
@ -578,6 +661,7 @@ |
|
|
|
<tbody id="publicBody"> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
<div id="publicEmpty" class="empty-state">暂无公海池数据</div> |
|
|
|
<div class="pagination" id="publicPagination"> |
|
|
|
</div> |
|
|
|
|
徐飞洋
2 months ago