claude_dev
18d4ba2013
- 设计系统 styles/tokens.css: 深色token(#0d1117底/#161b22卡片) + 红涨绿跌 (--up#f85149/--down#3fb950) + 品牌蓝#1890ff + 间距/圆角/阴影/mono - Element Plus深色(element-dark.css + dark/css-vars)+reset - 删Vite脚手架残留(style.css重写/HelloWorld/hero/vite/vue资源) - Layout重构(深色专业侧边)+Login+图表统一深色(useChart/echartsDark) - 新建paper/Live.vue实走监控(step状态/净值/持仓/今日信号10s轮询) - 业务页套.page头, 保留所有功能/路由/api - 验证: vue-tsc --noEmit ✅ + npm run build ✅
139 lines
3.8 KiB
CSS
139 lines
3.8 KiB
CSS
/* Element Plus 深色覆盖 —— html.dark 已启用 EP 官方深色，此处精修到量化主题 */
|
|
html.dark {
|
|
/* 主色 → 品牌 */
|
|
--el-color-primary: #1890ff;
|
|
--el-color-primary-light-3: #2f7fce;
|
|
--el-color-primary-light-5: #1f5e9c;
|
|
--el-color-primary-light-7: #164670;
|
|
--el-color-primary-light-8: #113a5e;
|
|
--el-color-primary-light-9: #0e2f4d;
|
|
--el-color-primary-dark-2: #3a9eff;
|
|
|
|
/* 背景层级 */
|
|
--el-bg-color: var(--bg-card);
|
|
--el-bg-color-page: var(--bg);
|
|
--el-bg-color-overlay: var(--bg-overlay);
|
|
|
|
/* 文字 */
|
|
--el-text-color-primary: var(--text);
|
|
--el-text-color-regular: var(--text-2);
|
|
--el-text-color-secondary: var(--text-3);
|
|
--el-text-color-placeholder: var(--text-3);
|
|
--el-text-color-disabled: #4b5158;
|
|
|
|
/* 边框 */
|
|
--el-border-color: var(--border);
|
|
--el-border-color-light: var(--border-2);
|
|
--el-border-color-lighter: var(--border-2);
|
|
--el-border-color-extra-light: var(--border-2);
|
|
--el-border-color-dark: var(--border);
|
|
--el-border-color-darker: var(--border);
|
|
|
|
/* 填充 */
|
|
--el-fill-color: var(--bg-hover);
|
|
--el-fill-color-light: var(--bg-card);
|
|
--el-fill-color-lighter: var(--bg-card);
|
|
--el-fill-color-extra-light: var(--bg-card);
|
|
--el-fill-color-dark: var(--bg-hover);
|
|
--el-fill-color-darker: var(--bg-hover);
|
|
--el-fill-color-blank: transparent;
|
|
|
|
/* 遮罩/禁用 */
|
|
--el-mask-color: rgba(1, 4, 9, 0.72);
|
|
--el-disabled-bg-color: var(--bg-card);
|
|
--el-disabled-text-color: var(--text-3);
|
|
--el-disabled-border-color: var(--border-2);
|
|
|
|
/* 语义色（danger 用红、success 用绿，契合涨跌但保持语义） */
|
|
--el-color-success: #3fb950;
|
|
--el-color-warning: #d29922;
|
|
--el-color-danger: #f85149;
|
|
--el-color-error: #f85149;
|
|
--el-color-info: #8b949e;
|
|
}
|
|
|
|
/* 组件细节精修 */
|
|
html.dark {
|
|
/* 卡片更紧凑、去多余阴影 */
|
|
.el-card {
|
|
background-color: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-md);
|
|
box-shadow: none;
|
|
}
|
|
.el-card__header {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.el-card__body {
|
|
padding: 16px;
|
|
}
|
|
|
|
/* 表格密度 */
|
|
.el-table {
|
|
--el-table-bg-color: transparent;
|
|
--el-table-tr-bg-color: transparent;
|
|
--el-table-row-hover-bg-color: var(--bg-hover);
|
|
--el-table-header-bg-color: var(--bg-hover);
|
|
--el-table-border-color: var(--border-2);
|
|
--el-table-border: 1px solid var(--border-2);
|
|
--el-table-text-color: var(--text);
|
|
--el-table-header-text-color: var(--text-2);
|
|
font-size: 13px;
|
|
}
|
|
.el-table th.el-table__cell {
|
|
background-color: var(--bg-hover) !important;
|
|
font-weight: 600;
|
|
}
|
|
.el-table .cell {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* 菜单 */
|
|
.el-menu {
|
|
--el-menu-bg-color: transparent;
|
|
--el-menu-text-color: var(--text-2);
|
|
--el-menu-hover-bg-color: var(--bg-hover);
|
|
--el-menu-active-color: var(--brand);
|
|
border-right: none;
|
|
}
|
|
.el-menu-item.is-active,
|
|
.el-sub-menu.is-active > .el-sub-menu__title {
|
|
color: var(--brand);
|
|
}
|
|
|
|
/* 输入/选择器贴主题 */
|
|
.el-input__wrapper,
|
|
.el-textarea__inner,
|
|
.el-select__wrapper {
|
|
background-color: var(--bg) !important;
|
|
box-shadow: 0 0 0 1px var(--border) inset !important;
|
|
}
|
|
.el-input__wrapper:hover,
|
|
.el-select__wrapper:hover {
|
|
box-shadow: 0 0 0 1px var(--brand) inset !important;
|
|
}
|
|
.el-input.is-focus .el-input__wrapper,
|
|
.el-select__wrapper.is-focused {
|
|
box-shadow: 0 0 0 1px var(--brand) inset !important;
|
|
}
|
|
|
|
/* 描述列表/标签页 边框 */
|
|
.el-descriptions__border {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* 滚动条贴深色 */
|
|
.el-scrollbar__bar {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* 数字用等宽（涨跌色由业务层控制） */
|
|
.num {
|
|
font-family: var(--mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|