style: 控制台暗黑主题改造
This commit is contained in:
ccnetcore
@@ -9,7 +9,7 @@ const greeting = useTimeGreeting();
|
||||
const userStore = useUserStore();
|
||||
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');
|
||||
|
||||
@@ -332,30 +332,36 @@
|
||||
|
||||
/* 表格 */
|
||||
.el-table {
|
||||
background-color: #04080b !important;
|
||||
color: #a0a0a0 !important;
|
||||
border-color: rgba(0, 255, 136, 0.15) !important;
|
||||
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
.cell{
|
||||
color: #ffffff !important;
|
||||
}
|
||||
th.el-table__cell {
|
||||
background-color: rgba(0, 255, 136, 0.05) !important;
|
||||
color: #ffffff !important;
|
||||
background-color: transparent !important;
|
||||
color: #fff;
|
||||
border-color: rgba(0, 255, 136, 0.15) !important;
|
||||
}
|
||||
|
||||
td.el-table__cell {
|
||||
border-color: rgba(0, 255, 136, 0.1) !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #04080b !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
&:hover > td.el-table__cell {
|
||||
background-color: rgba(0, 255, 136, 0.05) !important;
|
||||
color: #00ff88 !important;
|
||||
background-color: #032D1D !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
background-color: #04080b !important;
|
||||
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -866,13 +872,13 @@
|
||||
|
||||
h2 {
|
||||
color: #ffffff !important;
|
||||
font-size: 56px !important;
|
||||
font-size: 24px !important;
|
||||
line-height: 62px !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #ffffff !important;
|
||||
font-size: 48px !important;
|
||||
font-size: 22px !important;
|
||||
line-height: 54px !important;
|
||||
}
|
||||
|
||||
@@ -1503,6 +1509,195 @@
|
||||
.el-sender{
|
||||
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