|
|
@@ -3,10 +3,8 @@
|
|
|
<Header />
|
|
|
|
|
|
<div class="content-wrapper mt-15 max-w-[1200px] mx-auto">
|
|
|
- <div
|
|
|
- class="flex gap-5 items-center mb-4 bg-[#091126] py-2 pl-4 rounded-sm"
|
|
|
- >
|
|
|
- <p class="flex items-center text-white">
|
|
|
+ <div class="flex gap-5 items-center mb-4 py-2 pl-4 rounded-sm">
|
|
|
+ <p class="flex items-center text-var(--text-primary)">
|
|
|
<Icon
|
|
|
icon="mynaui:arrow-up-down"
|
|
|
class="icon pr-1 h-8 w-8"
|
|
|
@@ -38,13 +36,10 @@
|
|
|
element-loading-text="加载中..."
|
|
|
:empty-text="loading ? '' : '暂无数据'"
|
|
|
:header-cell-style="{
|
|
|
- backgroundColor: '#091126',
|
|
|
- color: '#b8bfd0',
|
|
|
+ backgroundColor: 'var(--bg-table-head) !important',
|
|
|
+ color: 'var(--text-primary)',
|
|
|
fontWeight: '400',
|
|
|
}"
|
|
|
- :cell-style="{
|
|
|
- color: 'black',
|
|
|
- }"
|
|
|
>
|
|
|
<el-table-column
|
|
|
type="index"
|
|
|
@@ -220,11 +215,98 @@ onMounted(async () => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.todo-list {
|
|
|
+ --portal-text: #17345f;
|
|
|
+ --portal-text-muted: #5f6f83;
|
|
|
+ --portal-text-soft: #7f8fa6;
|
|
|
+ --portal-title: #163867;
|
|
|
+ --portal-subtitle: rgba(61, 92, 135, 0.86);
|
|
|
+ --portal-line: rgba(126, 156, 201, 0.24);
|
|
|
+ --portal-card: rgba(255, 255, 255, 0.82);
|
|
|
+ --portal-card-2: rgba(248, 251, 255, 0.94);
|
|
|
+ --portal-card-3: rgba(240, 246, 255, 0.88);
|
|
|
+ --portal-card-4: rgba(231, 239, 251, 0.92);
|
|
|
+ --portal-nav-bg: rgba(255, 255, 255, 0.72);
|
|
|
+ --portal-nav-hover: rgba(219, 232, 252, 0.8);
|
|
|
+ --portal-input-bg: rgba(255, 255, 255, 0.7);
|
|
|
+ --portal-input-hover: rgba(255, 255, 255, 0.92);
|
|
|
+ --portal-shadow: 0 18px 40px rgba(23, 52, 95, 0.12);
|
|
|
+ --portal-shadow-strong: 0 24px 60px rgba(23, 52, 95, 0.16);
|
|
|
+ --portal-accent: #245edb;
|
|
|
+ --portal-accent-2: #4e8cff;
|
|
|
+ --portal-accent-soft: rgba(36, 94, 219, 0.14);
|
|
|
+ --portal-todo-bg: rgba(242, 247, 255, 0.94);
|
|
|
+ --portal-todo-hover: rgba(228, 238, 252, 0.95);
|
|
|
+ --portal-number-todo: #e15a5a;
|
|
|
+ --portal-number-done: #2da04d;
|
|
|
+ color: var(--portal-text);
|
|
|
+ background:
|
|
|
+ radial-gradient(
|
|
|
+ circle at 18% 12%,
|
|
|
+ rgba(83, 126, 255, 0.14),
|
|
|
+ transparent 22%
|
|
|
+ ),
|
|
|
+ radial-gradient(
|
|
|
+ circle at 82% 20%,
|
|
|
+ rgba(71, 148, 255, 0.14),
|
|
|
+ transparent 20%
|
|
|
+ ),
|
|
|
+ radial-gradient(
|
|
|
+ circle at 50% 100%,
|
|
|
+ rgba(97, 142, 247, 0.12),
|
|
|
+ transparent 28%
|
|
|
+ ),
|
|
|
+ linear-gradient(180deg, #eef3f9 0%, #f7faff 46%, #eef3f9 100%);
|
|
|
+}
|
|
|
+
|
|
|
+:global([data-theme="dark"] .todo-list) {
|
|
|
+ --portal-text: #eaf1ff;
|
|
|
+ --portal-text-muted: rgba(234, 241, 255, 0.95);
|
|
|
+ --portal-text-soft: #8a9ab0;
|
|
|
+ --portal-title: #f4f7ff;
|
|
|
+ --portal-subtitle: rgba(188, 205, 255, 0.82);
|
|
|
+ --portal-line: rgba(97, 129, 206, 0.28);
|
|
|
+ --portal-card: rgba(10, 19, 43, 0.8);
|
|
|
+ --portal-card-2: rgba(12, 24, 52, 0.92);
|
|
|
+ --portal-card-3: rgba(17, 25, 48, 0.8);
|
|
|
+ --portal-card-4: rgba(15, 24, 45, 0.82);
|
|
|
+ --portal-nav-bg: rgba(10, 19, 43, 0.8);
|
|
|
+ --portal-nav-hover: rgba(28, 40, 72, 0.8);
|
|
|
+ --portal-input-bg: rgba(255, 255, 255, 0.08);
|
|
|
+ --portal-input-hover: rgba(255, 255, 255, 0.12);
|
|
|
+ --portal-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
|
|
|
+ --portal-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.38);
|
|
|
+ --portal-accent: #6e7dff;
|
|
|
+ --portal-accent-2: #8d4dff;
|
|
|
+ --portal-accent-soft: rgba(110, 125, 255, 0.16);
|
|
|
+ --portal-todo-bg: #070e20;
|
|
|
+ --portal-todo-hover: rgba(28, 40, 72, 0.8);
|
|
|
+ --portal-number-todo: #f56c6c;
|
|
|
+ --portal-number-done: #ffffff;
|
|
|
+ --bg-table: #091126;
|
|
|
+ color: var(--portal-text);
|
|
|
+ background:
|
|
|
+ radial-gradient(
|
|
|
+ circle at 18% 12%,
|
|
|
+ rgba(79, 82, 221, 0.34),
|
|
|
+ transparent 22%
|
|
|
+ ),
|
|
|
+ radial-gradient(circle at 82% 20%, rgba(28, 95, 255, 0.2), transparent 20%),
|
|
|
+ radial-gradient(
|
|
|
+ circle at 50% 100%,
|
|
|
+ rgba(103, 46, 255, 0.16),
|
|
|
+ transparent 28%
|
|
|
+ ),
|
|
|
+ linear-gradient(180deg, #040814 0%, #060d1d 46%, #040814 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.nav {
|
|
|
+ background-color: var(--bg-table);
|
|
|
+}
|
|
|
.todo-list {
|
|
|
min-height: 100vh;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- /* background-color: #f5f7fa; */
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
@@ -286,44 +368,44 @@ onMounted(async () => {
|
|
|
}
|
|
|
|
|
|
:deep(.el-table) {
|
|
|
- background-color: #091126 !important;
|
|
|
- color: white !important;
|
|
|
+ background-color: var(--bg-table) !important;
|
|
|
+ color: var(--text-primary) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.table-wrapper) {
|
|
|
- background: #091126 !important;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-table__header-wrapper thead) {
|
|
|
- background: #091126 !important;
|
|
|
- color: white !important;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
+ color: var(--text-primary) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-table__header-wrapper .el-table__header) {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
:deep(.el-table__inner-wrapper) {
|
|
|
- background: #091126 !important;
|
|
|
- color: white !important;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
+ color: var(--text-primary) !important;
|
|
|
}
|
|
|
:deep(.el-table__body-wrapper .el-table__row) {
|
|
|
- background: #091126;
|
|
|
- color: white !important;
|
|
|
+ background: var(--bg-table);
|
|
|
+ color: var(--text-primary) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-table__body-wrapper .el-table__row .hover-row) {
|
|
|
- background: #091126 !important;
|
|
|
- color: white !important;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
+ color: var(--text-primary) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-table__body-wrapper .el-table__row .el-table__cell) {
|
|
|
- background: #091126 !important;
|
|
|
- color: white !important;
|
|
|
- border-bottom: 1px solid #313849;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
+ color: var(--text-primary) !important;
|
|
|
+ border-bottom: 1px solid var(--border-color) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-loading-mask) {
|
|
|
- background-color: rgba(9, 17, 38, 0.8) !important; /* 半透明深色遮罩 */
|
|
|
+ background-color: var(--bg-table) !important; /* 半透明深色遮罩 */
|
|
|
}
|
|
|
|
|
|
:deep(.el-table__body-wrapper .el-table__row .el-table__cell) {
|
|
|
@@ -331,20 +413,21 @@ onMounted(async () => {
|
|
|
}
|
|
|
|
|
|
:deep(.el-pagination is-background) {
|
|
|
- background: #091126 !important;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-pagination .el-pager li) {
|
|
|
- background: #091126 !important;
|
|
|
- color: white !important;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
+ color: var(--text-tertiary) !important;
|
|
|
}
|
|
|
|
|
|
-:deep(.el-pagination .el-pager li.active) {
|
|
|
- background: #2d8cf0 !important;
|
|
|
+:deep(.el-pagination .el-pager li.is-active) {
|
|
|
+ /* background: #2d8cf0 !important; */
|
|
|
+ color: var(--portal-accent) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-select .el-select__wrapper) {
|
|
|
- background: #091126 !important;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
border: 1px solid #313849 !important;
|
|
|
outline: none !important;
|
|
|
}
|
|
|
@@ -355,34 +438,34 @@ onMounted(async () => {
|
|
|
}
|
|
|
|
|
|
:deep(.btn-next) {
|
|
|
- background: #091126 !important;
|
|
|
- color: white !important;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
+ color: var(--text-tertiary) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.btn-prev) {
|
|
|
- background: #091126 !important;
|
|
|
- color: white !important;
|
|
|
+ background: var(--bg-table) !important;
|
|
|
+ color: var(--text-tertiary) !important;
|
|
|
}
|
|
|
|
|
|
/* 下拉菜单弹出层的背景 */
|
|
|
:deep(.el-select-dropdown) {
|
|
|
- background-color: #091126 !important;
|
|
|
+ background-color: var(--bg-table) !important;
|
|
|
border: 1px solid #313849 !important;
|
|
|
}
|
|
|
|
|
|
/* 下拉菜单项 */
|
|
|
:deep(.el-select-dropdown__item) {
|
|
|
- color: #fff !important;
|
|
|
+ color: var(--bg-table) !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-select-dropdown__item.hover),
|
|
|
:deep(.el-select-dropdown__item:hover) {
|
|
|
- background-color: #111a35 !important; /* 悬停深色背景 */
|
|
|
+ background-color: var(--bg-table) !important; /* 悬停深色背景 */
|
|
|
}
|
|
|
|
|
|
/* 关键：修复下拉选择框 (PageSize) 的白色边框/背景 */
|
|
|
:deep(.el-pagination .el-select .el-select__wrapper) {
|
|
|
- background-color: #091126 !important;
|
|
|
+ background-color: var(--bg-table) !important;
|
|
|
box-shadow: none !important; /* 去掉可能的阴影 */
|
|
|
border: 1px solid #313849 !important; /* 统一边框颜色 */
|
|
|
}
|
|
|
@@ -396,12 +479,12 @@ onMounted(async () => {
|
|
|
|
|
|
/* 通用输入框边框修复 (如果其他地方也有) */
|
|
|
:deep(.el-input__wrapper) {
|
|
|
- background-color: #091126 !important;
|
|
|
+ background-color: var(--bg-table) !important;
|
|
|
box-shadow: none !important; /* 去掉默认的白色/灰色阴影边框 */
|
|
|
border: 1px solid #313849 !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-input__inner) {
|
|
|
- color: #fff !important;
|
|
|
+ color: var(--bg-primary) !important;
|
|
|
}
|
|
|
</style>
|
