style: 控制台暗黑主题改造
This commit is contained in:
ccnetcore
@@ -9,7 +9,7 @@ const greeting = useTimeGreeting();
|
|||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const mode = useColorMode();
|
const mode = useColorMode();
|
||||||
|
|
||||||
const username = computed(() => userStore.userInfo?.username ?? '意心Ai，一心只为打造更良心的Ai平台');
|
const username = computed(() => userStore.userInfo?.username ?? '意心Ai，让人人都能享受最前沿的Ai体验');
|
||||||
|
|
||||||
// 根据主题动态设置雾化背景色
|
// 根据主题动态设置雾化背景色
|
||||||
const fogBgColor = computed(() => mode.value === 'dark' ? '#111827' : '#fff');
|
const fogBgColor = computed(() => mode.value === 'dark' ? '#111827' : '#fff');
|
||||||
|
|||||||
@@ -332,30 +332,36 @@
|
|||||||
|
|
||||||
/* 表格 */
|
/* 表格 */
|
||||||
.el-table {
|
.el-table {
|
||||||
background-color: #04080b !important;
|
border-radius: 0 !important;
|
||||||
color: #a0a0a0 !important;
|
background: transparent !important;
|
||||||
border-color: rgba(0, 255, 136, 0.15) !important;
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
.cell{
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
th.el-table__cell {
|
th.el-table__cell {
|
||||||
background-color: rgba(0, 255, 136, 0.05) !important;
|
background-color: transparent !important;
|
||||||
color: #ffffff !important;
|
color: #fff;
|
||||||
border-color: rgba(0, 255, 136, 0.15) !important;
|
border-color: rgba(0, 255, 136, 0.15) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
td.el-table__cell {
|
td.el-table__cell {
|
||||||
border-color: rgba(0, 255, 136, 0.1) !important;
|
background-color: transparent !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
background-color: #04080b !important;
|
background-color: transparent !important;
|
||||||
|
|
||||||
&:hover > td.el-table__cell {
|
&:hover > td.el-table__cell {
|
||||||
background-color: rgba(0, 255, 136, 0.05) !important;
|
color: #00ff88 !important;
|
||||||
|
background-color: #032D1D !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table__row {
|
.el-table__row {
|
||||||
background-color: #04080b !important;
|
|
||||||
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -866,13 +872,13 @@
|
|||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
font-size: 56px !important;
|
font-size: 24px !important;
|
||||||
line-height: 62px !important;
|
line-height: 62px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
font-size: 48px !important;
|
font-size: 22px !important;
|
||||||
line-height: 54px !important;
|
line-height: 54px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1503,6 +1509,195 @@
|
|||||||
.el-sender{
|
.el-sender{
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.typer-content{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-header{
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
.info-item{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
}
|
||||||
|
.info-value{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.recharge-log-container{
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
.filter-toolbar{
|
||||||
|
background: transparent !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
}
|
||||||
|
.el-select__wrapper{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.el-select{
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
}
|
||||||
|
.toolbar{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.el-card__header{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.header-title{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.token-table-wrapper{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.guide-title{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.name-text{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.key-text{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.chart-container{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.stat-item{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.progress-section{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.el-alert{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.chart-container-wrapper{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.token-stat-item{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.token-value{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.progress-label{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.token-name{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.consumption-card{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.task-item{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.task-name{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.video-generation-page{
|
||||||
|
background: transparent !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.el-empty i{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.session-sidebar{
|
||||||
|
background: #04080b !important
|
||||||
|
|
||||||
|
}
|
||||||
|
.session-sidebar .session-item:hover{
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, 0.4);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.tip-item{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.tools-panel{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.tool-item {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.el-tabs--border-card{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
}
|
||||||
|
.el-tabs--border-card>.el-tabs__header{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
|
||||||
|
color: #00ff88 !important;
|
||||||
|
background-color: rgba(0, 255, 136, 0.15) !important;
|
||||||
|
}
|
||||||
|
.channel-management{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.model-list-panel{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.app-list-panel{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user