refactor: 拆分通用资金工具为国信和华泰证券专属版本
- 移除原通用funds工具代码与配置 - 新增国信证券、华泰证券专属资金工具页面、样式与逻辑 - 为两个工具添加独立的鉴权配置 - 更新导航菜单，将原通用入口替换为两个券商专属入口 - 新增对应券商的SVG图标文件
This commit is contained in:
yangxiangyuan
@@ -0,0 +1,280 @@
|
||||
/* 华泰证券 · 本金变动池 - 暗黑专业风格 */
|
||||
|
||||
body {
|
||||
background: #1e1e1e;
|
||||
color: #cccccc;
|
||||
font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 24px 0;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #d4af37;
|
||||
margin: 0;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.toolbar, .add-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
padding: 14px 16px;
|
||||
background: #252526;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #555;
|
||||
background: #333333;
|
||||
color: #cccccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #444444;
|
||||
border-color: #d4af37;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: #5a4a1e;
|
||||
border-color: #8b7332;
|
||||
color: #f0e6c8;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background: #6b5a28;
|
||||
border-color: #d4af37;
|
||||
}
|
||||
|
||||
input, select {
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
height: 36px;
|
||||
background: #1e1e1e;
|
||||
color: #cccccc;
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: #d4af37;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 日期选择器暗色适配 */
|
||||
input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
filter: invert(0.7);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow: hidden;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 6px;
|
||||
background: #252526;
|
||||
}
|
||||
|
||||
table.flows {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
/* 列宽分配 */
|
||||
table.flows th:nth-child(1),
|
||||
table.flows td:nth-child(1) { width: 9%; }
|
||||
table.flows th:nth-child(2),
|
||||
table.flows td:nth-child(2) { width: 5%; }
|
||||
table.flows th:nth-child(3),
|
||||
table.flows td:nth-child(3) { width: 11%; }
|
||||
table.flows th:nth-child(4),
|
||||
table.flows td:nth-child(4) { width: 14%; }
|
||||
table.flows th:nth-child(5),
|
||||
table.flows td:nth-child(5) { width: 12%; }
|
||||
table.flows th:nth-child(6),
|
||||
table.flows td:nth-child(6) { width: 37%; }
|
||||
table.flows th:nth-child(7),
|
||||
table.flows td:nth-child(7) { width: 12%; }
|
||||
|
||||
table.flows th, table.flows td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #333333;
|
||||
text-align: left;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
table.flows th {
|
||||
background: #2d2d2d;
|
||||
color: #d4af37;
|
||||
font-weight: 600;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
border-bottom: 2px solid #3c3c3c;
|
||||
}
|
||||
|
||||
table.flows tbody tr:hover td {
|
||||
background: #2a2d2e;
|
||||
}
|
||||
|
||||
table.flows tr.in td {
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
table.flows tr.in td:first-child {
|
||||
border-left-color: #d4af37;
|
||||
}
|
||||
|
||||
table.flows tr.out td {
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
table.flows tr.out td:first-child {
|
||||
border-left-color: #c1272d;
|
||||
}
|
||||
|
||||
table.flows td.amount {
|
||||
font-weight: 600;
|
||||
color: #cccccc;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
table.flows td.ending {
|
||||
font-weight: 700;
|
||||
color: #d4af37;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.stats {
|
||||
margin: 20px 0;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 6px;
|
||||
background: #252526;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 12px 0;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #555;
|
||||
background: #2d2d2d;
|
||||
color: #cccccc;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.debug {
|
||||
margin: 12px 0;
|
||||
padding: 8px;
|
||||
border: 1px dashed #555;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.debug-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.debug-output {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
background: #1a1a1a;
|
||||
padding: 8px;
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
color: #888888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 滚动条暗色 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #555555;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #777777;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
table.flows td .btn {
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.toolbar, .add-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.toolbar input,
|
||||
.toolbar select,
|
||||
.add-bar input,
|
||||
.add-bar select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar .btn,
|
||||
.btn-add {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table.flows th, table.flows td {
|
||||
padding: 8px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user