mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-16 06:03:42 +08:00
feat:chat style
This commit is contained in:
lqins
@@ -6,9 +6,13 @@ $borderColor = #4676d0;
|
||||
|
||||
.chat-page {
|
||||
height: 100%;
|
||||
|
||||
::v-deep (.el-message-box__message){
|
||||
font-size: 18px !important
|
||||
}
|
||||
// left side
|
||||
|
||||
.el-container{
|
||||
height: 100%;
|
||||
}
|
||||
.el-aside {
|
||||
//background-color: $sideBgColor;
|
||||
padding 10px
|
||||
@@ -23,15 +27,16 @@ $borderColor = #4676d0;
|
||||
|
||||
.search-box {
|
||||
flex-wrap: wrap
|
||||
padding: 10px 0;
|
||||
margin-bottom: 10px
|
||||
// padding: 10px 0;
|
||||
|
||||
.search-input {
|
||||
--el-input-bg-color: #363535
|
||||
--el-input-border-color: #464545
|
||||
--el-input-focus-border-color: #47fff1
|
||||
--el-input-hover-border-color: #2DA39A
|
||||
box-shadow: none
|
||||
}
|
||||
// .search-input {
|
||||
// --el-input-bg-color: #363535
|
||||
// --el-input-border-color: #464545
|
||||
// --el-input-focus-border-color: #47fff1
|
||||
// --el-input-hover-border-color: #2DA39A
|
||||
// box-shadow: none
|
||||
// }
|
||||
}
|
||||
|
||||
// 隐藏滚动条
|
||||
@@ -53,12 +58,14 @@ $borderColor = #4676d0;
|
||||
padding: 8px 12px
|
||||
//border-bottom: 1px solid #3c3c3c
|
||||
cursor: pointer
|
||||
border: 1px solid #3c3c3c
|
||||
// border: 1px solid #3c3c3c
|
||||
margin-bottom 6px
|
||||
border-radius 5px
|
||||
|
||||
&:hover {
|
||||
background-color #343540
|
||||
// background-color :rgba(239, 241, 246, 0.64);
|
||||
border: 1px solid var(--border-active);
|
||||
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -78,7 +85,7 @@ $borderColor = #4676d0;
|
||||
}
|
||||
|
||||
.chat-title {
|
||||
color: #c1c1c1
|
||||
color: var(--el-text-color-regular);
|
||||
padding: 5px 10px;
|
||||
max-width 220px;
|
||||
font-size 14px;
|
||||
@@ -92,10 +99,11 @@ $borderColor = #4676d0;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 16px;
|
||||
color #ffffff
|
||||
color var(--text-fb)
|
||||
|
||||
|
||||
.el-dropdown-link {
|
||||
color #ffffff
|
||||
color var(--text-fb)
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
@@ -105,8 +113,10 @@ $borderColor = #4676d0;
|
||||
}
|
||||
|
||||
.chat-list-item.active {
|
||||
background-color: #343540;
|
||||
border-color #21aa93
|
||||
background-color :var(--theme-bg);
|
||||
box-shadow: 0px 3px 9px rgba(112,144,176,0.12);
|
||||
|
||||
border: 1px solid var(--border-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -116,7 +126,7 @@ $borderColor = #4676d0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top 12px
|
||||
border-top 1px solid #3c3c3c;
|
||||
// border-top 0.5px solid var(--el-border-color);
|
||||
|
||||
.iconfont {
|
||||
margin-right 5px
|
||||
@@ -134,14 +144,14 @@ $borderColor = #4676d0;
|
||||
flex: 1;
|
||||
background-color: var(--el-bg-color)
|
||||
color var(--el-text-color-primary)
|
||||
|
||||
|
||||
.chat-config {
|
||||
height 30px
|
||||
padding 10px 30px
|
||||
display flex
|
||||
justify-content center
|
||||
justify-items center
|
||||
border-bottom 1px solid #d9d9e3
|
||||
// border-bottom 1px solid var(--el-border-color);
|
||||
|
||||
.role-select-label {
|
||||
color #ffffff
|
||||
@@ -157,18 +167,22 @@ $borderColor = #4676d0;
|
||||
}
|
||||
|
||||
.setting {
|
||||
padding 5px
|
||||
// padding 5px
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
background-color #f2f2f2
|
||||
margin-right 10px
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
// background-color #f2f2f2
|
||||
// margin-right 10px
|
||||
.iconfont {
|
||||
font-size 18px
|
||||
color #19c37d
|
||||
font-size 16px
|
||||
color var(--el-color-primary)
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color #D5FAD3
|
||||
background-color var(--text--hover)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,7 +197,8 @@ $borderColor = #4676d0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position relative
|
||||
|
||||
background: var(--chat-bg)
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px /* 滚动条宽度 */
|
||||
background #F1F1F1
|
||||
@@ -217,6 +232,7 @@ $borderColor = #4676d0;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@@ -228,10 +244,11 @@ $borderColor = #4676d0;
|
||||
|
||||
.input-box-inner {
|
||||
display flex
|
||||
background-color: #ffffff
|
||||
background-color:var(--chat-bg);
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
||||
// box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
||||
padding 0 15px;
|
||||
|
||||
.tool-item {
|
||||
@@ -243,7 +260,7 @@ $borderColor = #4676d0;
|
||||
justify-items center
|
||||
padding 6px
|
||||
cursor pointer
|
||||
background #F2F2F2
|
||||
// background #F2F2F2
|
||||
|
||||
&:hover {
|
||||
background #D5FAD3
|
||||
@@ -274,13 +291,17 @@ $borderColor = #4676d0;
|
||||
}
|
||||
|
||||
.input-border {
|
||||
display flex
|
||||
// display flex
|
||||
width 100%
|
||||
overflow hidden
|
||||
border: 2px solid #21AA93
|
||||
border: 2px solid var( --theme-border-primary)
|
||||
border-radius 10px
|
||||
padding 10px
|
||||
background-color #F4F4F4
|
||||
// background-color #F4F4F4
|
||||
|
||||
&:hover{
|
||||
border-color var(--theme-border-hover)
|
||||
}
|
||||
|
||||
.input-inner {
|
||||
display flex
|
||||
@@ -296,6 +317,7 @@ $borderColor = #4676d0;
|
||||
}
|
||||
|
||||
.prompt-input {
|
||||
min-height: 58px;
|
||||
width 100%
|
||||
line-height: 24px
|
||||
border none
|
||||
@@ -312,12 +334,34 @@ $borderColor = #4676d0;
|
||||
.send-btn {
|
||||
width 32px
|
||||
margin-left 10px
|
||||
|
||||
.el-button {
|
||||
padding 8px 5px;
|
||||
border-radius 6px;
|
||||
font-size 20px;
|
||||
}
|
||||
}
|
||||
.little-btns{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.tool-item-btn{
|
||||
|
||||
.iconfont{
|
||||
font-size: 19px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-new{
|
||||
.el-icon{
|
||||
font-size: 20px;
|
||||
color: #754ff6;
|
||||
}
|
||||
cursor:pointer
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -380,7 +424,8 @@ $borderColor = #4676d0;
|
||||
width 40px
|
||||
height 40px
|
||||
border-radius 100%
|
||||
background-color #ffffff
|
||||
background-color:var(--chat-content-bg);
|
||||
color:var(--theme-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -417,9 +462,13 @@ $borderColor = #4676d0;
|
||||
line-height 1.8
|
||||
font-size 16px
|
||||
overflow auto
|
||||
height 100%
|
||||
height: 70vh
|
||||
}
|
||||
|
||||
}
|
||||
.dialog-footer{
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -436,4 +485,5 @@ $borderColor = #4676d0;
|
||||
.el-icon {
|
||||
margin-left 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,16 +2,34 @@
|
||||
--sm-txt:rgba(163, 174, 208, 1);
|
||||
--text-secondary: #8a939d;
|
||||
--el-color-primary: rgb(107, 80, 225);
|
||||
--el-component-size: 48px;
|
||||
--el-border-radius-base: 8px;
|
||||
--el-color-primary-light-5:rgb(107, 85, 255);
|
||||
--el-color-primary-light-3:rgb(78, 51, 254);
|
||||
--theme-btn-color:rgba(117, 81, 255, 1)
|
||||
--common-text-color:#6e4ef9
|
||||
--common-text-color:#6e4ef9;
|
||||
--el-component-size: 36px;
|
||||
--el-color-primary-dark-2:rgb(169 152 247);
|
||||
--el-button-active-border-color:rgb(169 152 247);
|
||||
--el-color-success-light-9:#EAFFFC;
|
||||
--el-color-success-light-8:#A7F0D9;
|
||||
--el-message-text-color:#0ECD8B;
|
||||
--el-color-success:#0ECD8B;
|
||||
|
||||
--text-fff:#fff
|
||||
}
|
||||
--theme-border-primary: rgba(86, 86, 95, .322); //主题边框颜色
|
||||
--theme-border-hover: rgb(107, 85, 255);//主题边框hover颜色
|
||||
--text--hover:rgba(215, 211, 240, 0.581) //主题色hover色系
|
||||
|
||||
|
||||
|
||||
}
|
||||
.el-dialog{
|
||||
--el-border-radius-base: 20px;
|
||||
}
|
||||
.login-box{
|
||||
--el-component-size: 48px;
|
||||
|
||||
}
|
||||
.btn-go{
|
||||
background: var(--btnColor);
|
||||
color: #fff;
|
||||
@@ -55,4 +73,46 @@
|
||||
}
|
||||
.el-input__wrapper{
|
||||
background: var( --card-bg)
|
||||
}
|
||||
.el-dialog__title{
|
||||
font-weight: bold;
|
||||
line-height: 28px;
|
||||
}
|
||||
.el-button--primary{
|
||||
border-radius: 8px;
|
||||
}
|
||||
/* 设置滚动条的宽度 */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px; /* 垂直滚动条宽度 */
|
||||
height: 12px; /* 水平滚动条高度 */
|
||||
}
|
||||
|
||||
/* 滚动条的轨道背景颜色 */
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1; /* 滚动条轨道颜色 */
|
||||
border-radius: 6px; /* 可选：轨道圆角 */
|
||||
}
|
||||
|
||||
/* 滚动条滑块的颜色 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888; /* 滑块颜色 */
|
||||
border-radius: 6px; /* 可选：滑块圆角 */
|
||||
}
|
||||
|
||||
/* 鼠标悬停在滑块上的颜色 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555; /* 悬停时的滑块颜色 */
|
||||
}
|
||||
//.el-message-box
|
||||
.el-message-box{
|
||||
--el-messagebox-border-radius:18px
|
||||
}
|
||||
.el-message-box__container{
|
||||
border-top: 1px solid #dbd3f4;
|
||||
padding-top: 7px;
|
||||
.el-message-box__message{
|
||||
--text-color:var(--theme-text-color-primary)
|
||||
font-size: 16px
|
||||
}
|
||||
}
|
||||
@@ -1,166 +1,205 @@
|
||||
.home {
|
||||
.layout{
|
||||
display: flex;
|
||||
height 100vh
|
||||
width 100%
|
||||
flex-flow column
|
||||
|
||||
.header {
|
||||
display flex
|
||||
justify-content space-between
|
||||
height 50px
|
||||
line-height 50px
|
||||
background-color #1E1F22
|
||||
padding-right 20px
|
||||
|
||||
.banner {
|
||||
display flex
|
||||
|
||||
.logo {
|
||||
display flex
|
||||
padding 5px
|
||||
cursor pointer
|
||||
|
||||
.el-image {
|
||||
width 48px
|
||||
height 48px
|
||||
border-radius 50%
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
padding 0 10px
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display flex
|
||||
flex-flow row
|
||||
|
||||
.link-button {
|
||||
margin-right 15px
|
||||
color #e1e1e1
|
||||
padding 0 10px
|
||||
|
||||
&:hover {
|
||||
background-color #414141
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size 24px
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width 100%
|
||||
padding 5px 0;
|
||||
|
||||
.el-dropdown-link {
|
||||
width 100%;
|
||||
cursor: pointer
|
||||
display flex
|
||||
|
||||
.el-image {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: #cccccc;
|
||||
line-height 24px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
.big-top-title{
|
||||
padding-top: 10px;
|
||||
}
|
||||
.top-collapse{
|
||||
padding-top: 10px
|
||||
img{
|
||||
width 24px !important
|
||||
height: 24px !important
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main {
|
||||
width 100%
|
||||
display flex
|
||||
flex-flow row
|
||||
|
||||
.navigator {
|
||||
display flex
|
||||
flex-flow column
|
||||
width 60px
|
||||
padding 10px 1px
|
||||
border-right: 1px solid #3c3c3c
|
||||
background-color: #1E1F22
|
||||
|
||||
.nav-items {
|
||||
margin-top: 10px;
|
||||
padding 0 5px
|
||||
|
||||
li {
|
||||
margin-bottom 15px
|
||||
display flex
|
||||
flex-flow column
|
||||
|
||||
a {
|
||||
color #DADBDC
|
||||
border-radius 10px
|
||||
width 48px
|
||||
height 48px
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
cursor pointer
|
||||
background-color #414348
|
||||
|
||||
.el-image {
|
||||
border-radius 10px
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size 20px
|
||||
}
|
||||
}
|
||||
|
||||
a:hover, a.active {
|
||||
color #47fff1
|
||||
background-color #0F7A71
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 12px
|
||||
padding-top: 6px
|
||||
color: #e5e7eb;
|
||||
text-align: center;
|
||||
white-space: nowrap; /* 防止文本换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: unset; /* 使用省略号表示溢出内容 */
|
||||
}
|
||||
|
||||
.active {
|
||||
color #47fff1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-box{
|
||||
align-items: center
|
||||
background-color: var(--card-bg)
|
||||
height: 100%
|
||||
.title{
|
||||
font-size: 28px
|
||||
font-weight: 700
|
||||
margin-right: 6px
|
||||
color:var(--text-theme-color)
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%
|
||||
overflow auto
|
||||
box-sizing: border-box
|
||||
background-color #282c34
|
||||
img{
|
||||
width 30px
|
||||
height: 30px
|
||||
object-fit: cover
|
||||
border-radius: 50%
|
||||
padding: 4px
|
||||
border: 2px solid #754ff6;
|
||||
}
|
||||
.marr{
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.flex-center-col{
|
||||
display flex
|
||||
align-items center
|
||||
flex-direction column
|
||||
}
|
||||
.menu-list-collapse{
|
||||
.flex-center-col{
|
||||
flex-direction: row;
|
||||
}
|
||||
.menu-list-item{
|
||||
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
|
||||
}
|
||||
.menu-list-item:hover,
|
||||
.active{
|
||||
background: rgba(79, 89, 102, .122);
|
||||
|
||||
border-radius: 8px;
|
||||
.el-icon{
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
.el-icon{
|
||||
margin: 0 4px;
|
||||
width 26px !important;
|
||||
height: 26px !important;
|
||||
}
|
||||
.menu-title{
|
||||
font-size: 15px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.openicon{
|
||||
font-size: 40px;
|
||||
color: #754ff6;
|
||||
}
|
||||
.menuIcon{
|
||||
.openicon{
|
||||
font-size: 28px;
|
||||
color: #754ff6;
|
||||
}
|
||||
}
|
||||
.menu-list{
|
||||
margin-top: 20px;
|
||||
.svg-icon{
|
||||
svg{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.menu-list-item{
|
||||
// margin-bottom: 10px;
|
||||
margin: 0 8px 8px;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
.el-icon{
|
||||
background: rgba(79, 89, 102, .122);
|
||||
}
|
||||
|
||||
}
|
||||
.el-icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
// img{
|
||||
// width: 24px;
|
||||
// height: 24px;
|
||||
// }
|
||||
|
||||
}
|
||||
&.active{
|
||||
.el-icon{
|
||||
background: rgba(79, 89, 102, .122);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.bot{
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
|
||||
|
||||
}
|
||||
.bot-line{
|
||||
|
||||
width : 100%;
|
||||
height: 1px;
|
||||
background: var(--line-box)
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
.menu-title{
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
|
||||
}
|
||||
.icon-house,
|
||||
.icon-github{
|
||||
font-size: 20px;
|
||||
color: #754ff6;
|
||||
cursor pointer
|
||||
}
|
||||
.menu-bot-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
a{
|
||||
// margin-right: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep(.theme-box){
|
||||
position: relative !important;
|
||||
right: initial;
|
||||
bottom: initial;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
.iconfont{
|
||||
font-size: 15px !important;}
|
||||
}
|
||||
.right-main{
|
||||
height: 100%;
|
||||
// background: #f5f7fd;
|
||||
background: var(--theme-bg-all);
|
||||
// background-image: linear-gradient(180deg, rgba(247, 232, 255, .54), rgba(191, 223, 255, .35));
|
||||
width: 100%;
|
||||
.topheader{
|
||||
display: flex;
|
||||
position: fixed;
|
||||
right: 8px;
|
||||
z-index : 999;
|
||||
top:0;
|
||||
// width 100%;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.btn-go{
|
||||
background: #754ff6;
|
||||
margin: 10px 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.el-popper {
|
||||
.more-menus {
|
||||
li {
|
||||
padding 10px 15px
|
||||
cursor pointer
|
||||
border-radius 5px
|
||||
margin 5px 0
|
||||
padding: 0px 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
margin: 5px 0;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
|
||||
.el-image {
|
||||
position: relative
|
||||
@@ -169,26 +208,49 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color #f1f1f1
|
||||
background: rgba(79, 89, 102, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
background-color #f1f1f1
|
||||
background: rgba(79, 89, 102, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-menu {
|
||||
li {
|
||||
a {
|
||||
width 100%
|
||||
justify-content left
|
||||
|
||||
&:hover {
|
||||
text-decoration none !important
|
||||
color var(--el-primary-text-color)
|
||||
}
|
||||
}
|
||||
.setting-menus{
|
||||
.title{
|
||||
color: #222226;
|
||||
}
|
||||
.el-icon,
|
||||
.iconfont{
|
||||
font-size: 18px
|
||||
margin-right: 6px
|
||||
}
|
||||
color: #222226;
|
||||
}
|
||||
.username{
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.rightHeightMax{
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.rightHeight{
|
||||
height: calc(100vh - 42px);
|
||||
max-height: calc(100vh - 42px);
|
||||
overflow: hidden;
|
||||
.content{
|
||||
padding-top: 42px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
}
|
||||
@@ -199,3 +199,14 @@
|
||||
transition: color 0.3s ease; /* 平滑的颜色过渡 */
|
||||
font-weight: bold;
|
||||
}
|
||||
.logo-box{
|
||||
width: 60px
|
||||
height: 60px
|
||||
background: #fff
|
||||
border-radius: 50%
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,12 @@
|
||||
|
||||
@import 'font.styl'
|
||||
:root[data-theme="dark"]{
|
||||
--text-fb:#fff;
|
||||
--text-color: rgba(255, 255, 255, 1) !important; // 主要的文本颜色
|
||||
--normal-color: rgba(163, 174, 208, 1); // 普通颜色
|
||||
--el-text-color-primary: #fff;
|
||||
p, h1, h2, h3, h4, h5, h6, article {
|
||||
color: var(--text-color) !important;
|
||||
// color: var(--text-color) !important;
|
||||
font-family: $font-regular;
|
||||
|
||||
}
|
||||
@@ -17,14 +19,42 @@
|
||||
font-family: $font-regular;
|
||||
}
|
||||
--btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
|
||||
--border-active:rgba(255, 255, 255, 0.1);
|
||||
--card-bg: rgba(17, 28, 68, 1);
|
||||
--theme-bg:rgb(13, 20, 53);
|
||||
--theme-bg-all:rgb(13, 20, 53);
|
||||
--sign-bg: rgba(27, 37, 75, 1);
|
||||
--text-theme-color: #fff;
|
||||
--text-color-primary: #d1c7ff;
|
||||
--el-text-color-regular: rgba(163, 174, 208, 1)
|
||||
--el-border-color:rgb(79, 80, 85)
|
||||
--el-text-color-primary: #fff;
|
||||
--el-bg-color-overlay: rgba(17, 28, 68, 1);
|
||||
--el-border-color-light: rgba(255, 255, 255, 0.2);
|
||||
--line-box:rgba(255, 255, 255, 0.1);
|
||||
--chat-bg:#141a36;
|
||||
--el-bg-color:#141a36;
|
||||
--el-fill-color-blank: rgba(17, 28, 68, 1);
|
||||
--el-fill-color-light: rgba(86, 86, 95, .2);
|
||||
--el-color-primary-light-9:rgba(86, 86, 95, .2);
|
||||
--chat-wel-bg:#2d2f388a;
|
||||
--theme-text-color-secondary: #a3aed0;
|
||||
|
||||
//layout
|
||||
.more-menus li.moreTitle,
|
||||
.twoTittle .title,
|
||||
.setting-menus span.title,
|
||||
.setting-menus li .el-icon,
|
||||
.setting-menus li .iconfont,
|
||||
.layout .tab-box .menu-list-item{
|
||||
filter: invert(100%);
|
||||
}
|
||||
.more-menus span.title{
|
||||
color:#000;
|
||||
}
|
||||
|
||||
--theme-text-color-primary: #fff;
|
||||
--theme-text-primary: #f3f3f3;
|
||||
--chat-content-bg:rgba(86, 86, 95, .2);
|
||||
--chat-content-bg-list:rgba(86, 86, 95, .2);
|
||||
}
|
||||
@@ -2,11 +2,12 @@
|
||||
|
||||
@import 'font.styl'
|
||||
:root[data-theme="light"] {
|
||||
--text-fb:#000;
|
||||
// rgba(43, 54, 116, 1)
|
||||
--text-color: #5b62ce; // 主要的文本颜色
|
||||
--normal-color: rgba(43, 54, 116, 1); // 普通颜色
|
||||
p, h1, h2, h3, h4, h5, h6, article {
|
||||
color: var(--text-color) !important;
|
||||
// color: var(--text-color) !important;
|
||||
font-family: $font-regular;
|
||||
}
|
||||
html,
|
||||
@@ -22,12 +23,28 @@
|
||||
}//#6b61f6
|
||||
|
||||
--btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
|
||||
--border-active:rgba(134, 140, 255, 1);
|
||||
--code-btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
|
||||
--card-bg:#fff;
|
||||
--theme-bg:linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
|
||||
--theme-bg-all:#f5f7fd;
|
||||
--sign-bg: rgba(244, 247, 254, 1);
|
||||
--text-theme-color: rgba(43, 54, 116, 1)
|
||||
--text-color-primary: rgba(67, 24, 255, 1);
|
||||
--line-box:rgba(79, 89, 102, 0.122);
|
||||
--el-bg-color-overlay: #fff;
|
||||
--el-bg-color:#fff;
|
||||
--el-fill-color-blank: #fff;
|
||||
|
||||
--theme-text-color-primary: #000;
|
||||
--theme-text-primary: #000;
|
||||
--theme-text-color-secondary: #666;
|
||||
--chat-bg: #fff;
|
||||
|
||||
--chat-content-bg:#f5f7fc;
|
||||
--chat-list-bg: #0302020a;
|
||||
--chat-content-bg-list:#fff;
|
||||
--chat-wel-bg:rgba(247, 247, 248, 1);
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
|
||||
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* Project id 4125778 */
|
||||
src: url('//at.alicdn.com/t/c/font_4125778_gs96jfl3hlc.woff2?t=1732009095144') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_4125778_gs96jfl3hlc.woff?t=1732009095144') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_4125778_gs96jfl3hlc.ttf?t=1732009095144') format('truetype');
|
||||
src: url('//at.alicdn.com/t/c/font_4125778_t6hhjiqu67.woff2?t=1733221702650') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_4125778_t6hhjiqu67.woff?t=1733221702650') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_4125778_t6hhjiqu67.ttf?t=1733221702650') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -418,3 +419,6 @@
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
.icon-house:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
BIN
web/src/assets/img/371731933156_.pic.jpg
Normal file
BIN
web/src/assets/img/371731933156_.pic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
web/src/assets/img/avatar.jpg
Normal file
BIN
web/src/assets/img/avatar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Reference in New Issue
Block a user