Signed-off-by: TIANHE <TIANHE@GMAIL.COM>
This commit is contained in:
TIANHE
2025-12-29 19:05:17 +08:00
parent 278b88ec71
commit 3337bcfc14
32 changed files with 5275 additions and 2770 deletions
@@ -211,6 +211,11 @@ export default {
</script>
<style lang="less" scoped>
// 颜色变量
@primary-color: #1890ff;
@success-color: #0ecb81;
@danger-color: #f6465d;
.position-records {
width: 100%;
min-height: 300px;
@@ -222,6 +227,9 @@ export default {
justify-content: center;
min-height: 200px;
padding: 40px 0;
background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.5) 100%);
border-radius: 12px;
border: 2px dashed #e0e6ed;
}
::v-deep .ant-table {
@@ -232,21 +240,21 @@ export default {
// 自定义细滚动条
::v-deep .ant-table-body {
overflow-x: auto;
scrollbar-width: thin; // Firefox - 细滚动条
scrollbar-color: rgba(0, 0, 0, 0.2) transparent; // Firefox - 滑块颜色和轨道颜色
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
&::-webkit-scrollbar {
height: 6px; // 横向滚动条高度
width: 6px; // 纵向滚动条宽度
height: 6px;
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent; // 轨道背景透明
background: transparent;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2); // 滑块颜色
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
&:hover {
background: rgba(0, 0, 0, 0.3); // 悬停时颜色
background: rgba(0, 0, 0, 0.3);
}
}
}
@@ -295,16 +303,51 @@ export default {
}
::v-deep .ant-table-thead > tr > th {
background: #fafafa;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
font-weight: 600;
color: #333;
border-bottom: 1px solid #e8e8e8;
color: #475569;
border-bottom: 2px solid #e2e8f0;
padding: 12px 16px;
font-size: 13px;
}
::v-deep .ant-table-tbody > tr > td {
padding: 12px 16px;
color: #333;
border-bottom: 1px solid #e8e8e8;
color: #334155;
border-bottom: 1px solid #f1f5f9;
transition: background 0.2s ease;
strong {
color: #1e293b;
font-weight: 600;
}
}
::v-deep .ant-table-tbody > tr {
&:hover > td {
background: #f0f7ff !important;
}
}
// 方向标签美化
::v-deep .ant-tag {
border-radius: 6px;
padding: 2px 10px;
font-weight: 600;
font-size: 11px;
border: none;
&[color="green"] {
background: linear-gradient(135deg, rgba(14, 203, 129, 0.15) 0%, rgba(14, 203, 129, 0.08) 100%);
color: @success-color;
border: 1px solid rgba(14, 203, 129, 0.3);
}
&[color="red"] {
background: linear-gradient(135deg, rgba(246, 70, 93, 0.15) 0%, rgba(246, 70, 93, 0.08) 100%);
color: @danger-color;
border: 1px solid rgba(246, 70, 93, 0.3);
}
}
// 暗黑主题适配
@@ -350,13 +393,35 @@ export default {
}
.profit {
color: #52c41a;
font-weight: 600;
color: @success-color;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: linear-gradient(135deg, rgba(14, 203, 129, 0.12) 0%, rgba(14, 203, 129, 0.06) 100%);
border-radius: 6px;
&::before {
content: '▲';
font-size: 8px;
}
}
.loss {
color: #ff4d4f;
font-weight: 600;
color: @danger-color;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: linear-gradient(135deg, rgba(246, 70, 93, 0.12) 0%, rgba(246, 70, 93, 0.06) 100%);
border-radius: 6px;
&::before {
content: '▼';
font-size: 8px;
}
}
// 移动端适配
@@ -241,19 +241,29 @@ export default {
</script>
<style lang="less" scoped>
// 颜色变量
@primary-color: #1890ff;
@success-color: #0ecb81;
@danger-color: #f6465d;
.trading-records {
width: 100%;
min-height: 300px;
padding: 0;
overflow-x: visible;
overflow-y: visible;
.empty-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 40px 0;
background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.5) 100%);
border-radius: 12px;
border: 2px dashed #e0e6ed;
}
::v-deep .ant-spin-nested-loading {
overflow-x: visible;
}
@@ -264,7 +274,6 @@ export default {
::v-deep .ant-table-wrapper {
overflow-x: visible;
// 自定义细滚动条
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
&::-webkit-scrollbar {
@@ -296,27 +305,25 @@ export default {
::v-deep .ant-table-body {
overflow-x: auto;
overflow-y: visible;
// 自定义细滚动条
scrollbar-width: thin; // Firefox - 细滚动条
scrollbar-color: rgba(0, 0, 0, 0.2) transparent; // Firefox - 滑块颜色和轨道颜色
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
&::-webkit-scrollbar {
height: 6px; // 横向滚动条高度
width: 6px; // 纵向滚动条宽度
height: 6px;
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent; // 轨道背景透明
background: transparent;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2); // 滑块颜色
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
&:hover {
background: rgba(0, 0, 0, 0.3); // 悬停时颜色
background: rgba(0, 0, 0, 0.3);
}
}
}
// 表格容器的滚动条样式
::v-deep .ant-table-container {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
@@ -337,7 +344,6 @@ export default {
}
}
// 所有可能的表格滚动容器的滚动条样式
::v-deep .ant-table-content {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
@@ -358,23 +364,109 @@ export default {
}
}
// 防止单元格折行,触发横向滚动
::v-deep .ant-table-thead > tr > th,
::v-deep .ant-table-tbody > tr > td {
white-space: nowrap;
}
::v-deep .ant-table-thead > tr > th {
background: #fafafa;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
font-weight: 600;
color: #333;
border-bottom: 1px solid #e8e8e8;
color: #475569;
border-bottom: 2px solid #e2e8f0;
padding: 12px 16px;
font-size: 13px;
}
::v-deep .ant-table-tbody > tr > td {
padding: 12px 16px;
color: #333;
border-bottom: 1px solid #e8e8e8;
color: #334155;
border-bottom: 1px solid #f1f5f9;
transition: background 0.2s ease;
}
::v-deep .ant-table-tbody > tr {
&:hover > td {
background: #f0f7ff !important;
}
}
// 交易类型标签美化
::v-deep .ant-tag {
border-radius: 6px;
padding: 3px 10px;
font-weight: 600;
font-size: 11px;
border: none;
transition: all 0.2s ease;
&[color="green"], &[color="cyan"], &[color="lime"] {
background: linear-gradient(135deg, rgba(14, 203, 129, 0.15) 0%, rgba(14, 203, 129, 0.08) 100%);
color: @success-color;
border: 1px solid rgba(14, 203, 129, 0.3);
}
&[color="red"], &[color="magenta"] {
background: linear-gradient(135deg, rgba(246, 70, 93, 0.15) 0%, rgba(246, 70, 93, 0.08) 100%);
color: @danger-color;
border: 1px solid rgba(246, 70, 93, 0.3);
}
&[color="orange"] {
background: linear-gradient(135deg, rgba(250, 173, 20, 0.15) 0%, rgba(250, 173, 20, 0.08) 100%);
color: #d48806;
border: 1px solid rgba(250, 173, 20, 0.3);
}
&[color="blue"] {
background: linear-gradient(135deg, rgba(24, 144, 255, 0.15) 0%, rgba(24, 144, 255, 0.08) 100%);
color: @primary-color;
border: 1px solid rgba(24, 144, 255, 0.3);
}
}
// 分页器美化
::v-deep .ant-pagination {
margin-top: 16px;
display: flex;
justify-content: flex-end;
.ant-pagination-item {
border-radius: 8px;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
&:hover {
border-color: @primary-color;
a {
color: @primary-color;
}
}
&.ant-pagination-item-active {
background: linear-gradient(135deg, @primary-color 0%, #40a9ff 100%);
border-color: @primary-color;
a {
color: #fff;
}
}
}
.ant-pagination-prev,
.ant-pagination-next {
.ant-pagination-item-link {
border-radius: 8px;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
&:hover {
border-color: @primary-color;
color: @primary-color;
}
}
}
}
// 暗黑主题适配
File diff suppressed because it is too large Load Diff