xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-04-28 05:54:24 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

stylus 语法换成 saas 语法

Browse Source
This commit is contained in:
GeekMaster
2025-08-01 17:32:06 +08:00
parent 068b5ddeef
commit 54f8494b5c
145 changed files with 8445 additions and 8446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
web/src/assets/css/admin/form.scss Normal file
View File

@@ -0,0 +1,73 @@
.form {
.el-form-item__label {
.label-title {
display: flex;
align-items: center;
.el-icon {
margin-left: 5px;
cursor: pointer;
}
}
}
.el-form-item__content {
width: 100%;
.uploader-icon {
font-size: 24px;
position: relative;
top: 3px;
}
.tip-input-line {
.tip {
margin-top: 10px;
color: #c1c1c1;
font-size: 12px;
line-height: 1.5;
}
}
}
.el-input {
width: 100%;
}
.text {
font-size: 14px;
}
.active-info {
line-height: 1.5;
padding: 10px 0 30px 0;
}
.el-descriptions {
margin-bottom: 20px;
.el-icon {
font-size: 18px;
}
.selected {
color: #0bc15f;
}
.closed {
color: #da0d54;
}
.text {
margin-left: 10px;
font-size: 12px;
color: #999999;
position: relative;
top: -5px;
}
}
.el-alert {
margin-bottom: 15px;
}
}

74
web/src/assets/css/admin/form.styl
View File

@@ -1,74 +0,0 @@
.form {
.el-form-item__label {
.label-title {
display flex
align-items center
.el-icon {
margin-left 5px
cursor pointer
}
}
}
.el-form-item__content {
width 100%
.uploader-icon {
font-size 24px
position relative
top 3px
}
.tip-input-line {
.tip {
margin-top 10px
color #c1c1c1
font-size 12px;
line-height 1.5;
}
}
}
.el-input {
width 100%
}
.text {
font-size 14px
}
.active-info {
line-height 1.5
padding 10px 0 30px 0
}
.el-descriptions {
margin-bottom 20px
.el-icon {
font-size 18px
}
.selected {
color #0bc15f
}
.closed {
color #da0d54
}
.text {
margin-left 10px
font-size 12px
color #999999
position: relative;
top -5px
}
}
.el-alert {
margin-bottom 15px;
}
}

137
web/src/assets/css/chat-app.scss Normal file
View File

@@ -0,0 +1,137 @@
.page-apps {
// background-color: #282c34;
height: 100%;
.apps-type-nav {
height: 50px;
padding: 8px 0;
margin: 10px auto;
}
.scrollbar-type-nav {
display: flex;
align-items: center;
padding: 2px;
background-color: #f4f1f7;
width: fit-content;
border: 1px solid rgba(79, 89, 102, 0.078);
border-radius: 20px;
margin: 0 auto;
// background: var(--chat-bg);
// width: 100%;
li {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 5px 8px;
height: 26px;
border-radius: 4px;
// border: 1px solid rgb(80, 80, 80);
padding: 2px 12px;
// background: rgba(60, 60, 60, 0.9);
color: var(--theme-text-tertiary);
font-weight: bold;
font-size: 14px;
cursor: pointer;
.image {
width: 22px;
height: 22px;
overflow: hidden;
margin-right: 5px;
border-radius: 50%;
}
&.active {
background: #fff;
color: var(--el-color-primary);
border-radius: 20px;
}
}
}
.app-list-container {
display: flex;
color: #ffffff;
padding: 2px 15px;
overflow-y: visible;
overflow-x: hidden;
.item__list-box {
.item {
display: flex;
flex-flow: row;
// border: 1px solid rgb(80, 80, 80);
padding: 10px;
background: var(--chat-bg);
border-radius: 8px;
.image {
width: 80px;
height: 80px;
min-width: 80px;
border-radius: 50%;
overflow: hidden;
object-fit: contain;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 2px solid #f5f7fd;
background: #fff;
}
.inner {
display: flex;
flex-flow: column;
padding: 0 0 0 10px;
width: 100%;
.info {
text-align: left;
.info-title {
color: var(--text-theme-color);
font-size: 1.25rem;
line-height: 1.75rem;
letter-spacing: 0.025em;
font-weight: 600;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.info-text {
padding: 8px 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
height: 50px;
font-size: 0.875rem;
color: var(--text-fb);
}
}
.btn {
margin-top: 10px;
display: flex;
justify-content: right;
.el-button {
margin-left: 10px;
.el-icon {
margin-right: 5px;
}
}
}
}
}
}
}
}

142
web/src/assets/css/chat-app.styl
View File

@@ -1,142 +0,0 @@
.page-apps {
// background-color: #282c34;
height 100%
.apps-type-nav{
height 50px
padding 8px 0;
margin 10px auto
}
.scrollbar-type-nav{
display flex
align-items center
padding 2px
background-color #f4f1f7
width fit-content
border 1px solid rgba(79,89,102,.078)
border-radius: 20px
margin: 0 auto
// background: var(--chat-bg);
// width 100%
li{
flex-shrink 0
display flex
align-items center
justify-content center
margin 5px 8px
height 26px
border-radius 4px
// border 1px solid rgb(80,80,80)
padding 2px 12px
// background rgba(60,60,60 0.9)
color var(--theme-text-tertiary)
font-weight: bold
font-size 14px
cursor pointer
.image {
width 22px
height 22px
overflow hidden
margin-right 5px
border-radius 50%
}
&.active{
background #fff;
color: var(--el-color-primary);
border-radius 20px
}
}
}
.app-list-container {
display flex
color #ffffff
padding 2px 15px;
overflow-y visible
overflow-x hidden
.item__list-box {
.item {
display flex
flex-flow row
// border 1px solid rgb(80,80,80)
padding 10px
background: var(--chat-bg);
border-radius 8px
.image {
width 80px
height 80px
min-width 80px
border-radius 50%
overflow hidden
object-fit: contain
display: flex
align-items center
justify-content center
flex-shrink 0
border: 2px solid #f5f7fd
background: #fff
}
.inner {
display flex
flex-flow column
padding 0 0 0 10px
width 100%
.info {
text-align left
.info-title {
color: var(--text-theme-color)
font-size 1.25rem
line-height 1.75rem
letter-spacing: .025em;
font-weight: 600;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.info-text {
padding 8px 0
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
height 50px
font-size: .875rem;
color var(--text-fb)
}
}
.btn {
margin-top 10px
display flex
justify-content right
.el-button {
margin-left 10px
.el-icon {
margin-right 5px
}
}
}
}
}
}
}
}

887
web/src/assets/css/chat-plus.styl → web/src/assets/css/chat-plus.scss
View File

@@ -1,449 +1,438 @@
#app {
height: 100%;
.chat-page {
height: 100%;
:deep(.el-message-box__message){
font-size: 18px !important
}
.newChat{
margin-bottom: 10px
}
// left side
.el-container{
height: 100%;
}
.el-aside {
padding 10px
width var(--el-aside-width, 320px)
.chat-list-container {
display: flex
flex-flow: column
border-radius 10px
padding 10px 0
.search-box {
flex-wrap: wrap
margin-bottom: 10px
}
.content {
width: 100%
overflow-y: scroll
.chat-list-item {
display: flex
width: 100%
justify-content: flex-start
padding: 8px 12px
//border: 1px solid #3c3c3c
cursor: pointer
border: 1px solid var(--theme-bg-color)
margin-bottom 6px
border-radius 5px
&:hover {
border: 1px solid var(--border-active);
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
}
.chat-title-input {
font-size: 14px;
margin-top: 4px;
margin-left: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 190px;
}
.chat-title {
color: var(--el-text-color-regular);
padding: 5px 10px;
max-width 220px;
font-size 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.chat-opt {
position: absolute;
right: 2px;
top: 16px;
color var(--text-fb)
.el-dropdown-link {
color var(--text-fb)
}
.el-icon {
margin-right 8px;
}
}
}
.chat-list-item.active {
background-color :var(--theme-bg);
box-shadow: 0 3px 9px rgba(112, 144, 176, 0.12);
border: 1px solid var(--border-active);
}
}
}
.tool-box {
display: flex;
justify-content: center;
padding-top 12px
// border-top 0.5px solid var(--el-border-color);
.iconfont {
margin-right 5px
}
}
}
.el-main {
overflow: hidden;
--el-main-padding: 0;
margin: 0;
.chat-container {
min-width: 0;
flex: 1;
background-color: var(--chat-bg)
color var(--text-fb)
.chat-config {
height 50px
padding 10px 30px
display flex
justify-content center
justify-items center
// border-bottom 1px solid var(--el-border-color);
.role-select-label {
color #ffffff
}
.el-select {
max-width 150px;
margin-right 10px;
}
.role-select {
max-width 130px;
}
.setting {
// padding 5px
border-radius 5px
cursor pointer
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
// background-color #f2f2f2
// margin-right 10px
.iconfont {
font-size 16px
color var(--el-color-primary)
}
&:hover {
background-color var(--text--hover)
}
}
.el-button {
.el-icon {
margin-right 5px;
}
}
}
#container {
overflow: hidden;
width: 100%;
position relative
background: var(--chat-bg)
display: flex;
justify-content: center;
padding 0 20px
max-width: 960px;
.chat-box {
overflow-y: auto;
// 变量定义
--content-font-size: 16px;
--content-color: #c1c1c1;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
//padding: 0 0 50px 0;
width: 100%;
.chat-line {
font-size: 14px;
display: flex;
align-items: flex-start;
}
}
.input-box {
position absolute
bottom 0
width 100%
max-width: 800px;
.input-box-inner {
display flex
background-color:var(--chat-bg);
justify-content: center;
align-items: center;
// box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding 0 15px;
.tool-item {
margin-right 15px
border-radius: 6px;
color: #19c37d;
display flex
justify-content center
justify-items center
padding 6px
cursor pointer
// background #F2F2F2
&:hover {
background #D5FAD3
}
.iconfont {
font-size: 24px;
}
}
.input-body {
width 100%
margin: 0;
border: none;
padding: 10px 0;
display flex
justify-content center
position relative
.hide-div {
white-space: pre-wrap; /* 保持文本换行 */
visibility: hidden; /* 隐藏 div */
position: absolute; /* 脱离文档流 */
line-height: 24px
font-size 14px
word-wrap: break-word; /* 允许单词换行 */
overflow-wrap: break-word; /* 允许长单词换行，适用于现代浏览器 */
}
.input-border {
// display flex
width 100%
overflow hidden
border: 2px solid var( --theme-border-primary)
border-radius 10px
padding 10px
// background-color #F4F4F4
&:hover{
border-color var(--theme-border-hover)
}
.input-inner {
display flex
flex-flow column
width 100%
.file-list {
padding-bottom 10px
}
.prompt-input::-webkit-scrollbar {
width: 0;
height: 0;
}
.prompt-input {
min-height: 58px;
width 100%
line-height: 24px
border none
font-size 14px
background none
resize: none
white-space: pre-wrap; /* 保持文本换行 */
word-wrap: break-word; /* 允许单词换行 */
overflow-wrap: break-word; /* 允许长单词换行，适用于现代浏览器 */
}
}
.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;
.iconfont{
font-size: 19px;
cursor pointer
background-color: var(--chat-content-bg);
padding: 5px;
border-radius: 6px;
}
}
.add-new{
.el-icon{
font-size: 20px;
color: #754ff6;
}
cursor:pointer
}
}
}
}
}
}
}
}
}
.el-message-box {
width: 90%;
max-width: 420px;
}
.el-message {
min-width: 100px;
max-width: 600px;
}
}
.el-select-dropdown__wrap {
.el-select-dropdown__item {
.role-option {
display flex
flex-flow row
margin-top 8px;
.el-image {
width 20px
height 20px
border-radius 50%
}
span {
margin-left 5px;
height 20px;
line-height 20px;
}
}
}
}
.account {
display flex
background-color #90FFC2
color #000000
width 100%
border-radius 10px
padding 10px
.vip-logo {
.el-image {
width 40px
height 40px
border-radius 100%
background-color:var(--chat-content-bg);
color:var(--theme-text-color-primary);
}
}
.vip-info {
padding: 0 10px 0 10px
h4, p {
margin 0
}
h4 {
font-weight bold
font-size 16px;
}
p {
color #333333
}
}
.pay-btn {
width 100%
display flex
justify-content right
align-items center
}
}
.el-overlay-dialog {
.el-dialog {
.el-dialog__body {
.notice {
line-height 1.8
font-size 16px
overflow auto
height: 70vh
}
}
.dialog-footer{
margin-right: 22px;
}
}
}
.dialog-service {
text-align center
.el-image {
width 360px;
}
}
.tools-dropdown {
width auto
.el-icon {
margin-left 5px;
}
}
#app {
height: 100%;
.chat-page {
height: 100%;
:deep(.el-message-box__message) {
font-size: 18px !important;
}
.newChat {
margin-bottom: 10px;
}
// left side
.el-container {
height: 100%;
}
.el-aside {
padding: 10px;
width: var(--el-aside-width, 320px);
.chat-list-container {
display: flex;
flex-flow: column;
border-radius: 10px;
padding: 10px 0;
.search-box {
flex-wrap: wrap;
margin-bottom: 10px;
}
.content {
width: 100%;
overflow-y: scroll;
.chat-list-item {
display: flex;
width: 100%;
justify-content: flex-start;
padding: 8px 12px;
// border: 1px solid #3c3c3c;
cursor: pointer;
border: 1px solid var(--theme-bg-color);
margin-bottom: 6px;
border-radius: 5px;
&:hover {
border: 1px solid var(--border-active);
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
}
.chat-title-input {
font-size: 14px;
margin-top: 4px;
margin-left: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 190px;
}
.chat-title {
color: var(--el-text-color-regular);
padding: 5px 10px;
max-width: 220px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.chat-opt {
position: absolute;
right: 2px;
top: 16px;
color: var(--text-fb);
.el-dropdown-link {
color: var(--text-fb);
}
.el-icon {
margin-right: 8px;
}
}
}
.chat-list-item.active {
background-color: var(--theme-bg);
box-shadow: 0 3px 9px rgba(112, 144, 176, 0.12);
border: 1px solid var(--border-active);
}
}
}
.tool-box {
display: flex;
justify-content: center;
padding-top: 12px;
// border-top: 0.5px solid var(--el-border-color);
.iconfont {
margin-right: 5px;
}
}
}
.el-main {
overflow: hidden;
--el-main-padding: 0;
margin: 0;
.chat-container {
min-width: 0;
flex: 1;
background-color: var(--chat-bg);
color: var(--text-fb);
.chat-config {
height: 50px;
padding: 10px 30px;
display: flex;
justify-content: center;
justify-items: center;
// border-bottom: 1px solid var(--el-border-color);
.role-select-label {
color: #ffffff;
}
.el-select {
max-width: 150px;
margin-right: 10px;
}
.role-select {
max-width: 130px;
}
.setting {
// padding: 5px;
border-radius: 5px;
cursor: pointer;
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
// background-color: #f2f2f2;
// margin-right: 10px;
.iconfont {
font-size: 16px;
color: var(--el-color-primary);
}
&:hover {
background-color: var(--text--hover);
}
}
.el-button {
.el-icon {
margin-right: 5px;
}
}
}
#container {
overflow: hidden;
width: 100%;
position: relative;
background: var(--chat-bg);
display: flex;
justify-content: center;
padding: 0 20px;
max-width: 960px;
.chat-box {
overflow-y: auto;
// 变量定义
--content-font-size: 16px;
--content-color: #c1c1c1;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
// padding: 0 0 50px 0;
width: 100%;
.chat-line {
font-size: 14px;
display: flex;
align-items: flex-start;
}
}
.input-box {
position: absolute;
bottom: 0;
width: 100%;
max-width: 800px;
.input-box-inner {
display: flex;
background-color: var(--chat-bg);
justify-content: center;
align-items: center;
// box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 0 15px;
.tool-item {
margin-right: 15px;
border-radius: 6px;
color: #19c37d;
display: flex;
justify-content: center;
justify-items: center;
padding: 6px;
cursor: pointer;
// background: #f2f2f2;
&:hover {
background: #d5fad3;
}
.iconfont {
font-size: 24px;
}
}
.input-body {
width: 100%;
margin: 0;
border: none;
padding: 10px 0;
display: flex;
justify-content: center;
position: relative;
.hide-div {
white-space: pre-wrap; /* 保持文本换行 */
visibility: hidden; /* 隐藏 div */
position: absolute; /* 脱离文档流 */
line-height: 24px;
font-size: 14px;
word-wrap: break-word; /* 允许单词换行 */
overflow-wrap: break-word; /* 允许长单词换行，适用于现代浏览器 */
}
.input-border {
// display: flex;
width: 100%;
overflow: hidden;
border: 2px solid var(--theme-border-primary);
border-radius: 10px;
padding: 10px;
// background-color: #f4f4f4;
&:hover {
border-color: var(--theme-border-hover);
}
.input-inner {
display: flex;
flex-flow: column;
width: 100%;
.file-list {
padding-bottom: 10px;
}
.prompt-input::-webkit-scrollbar {
width: 0;
height: 0;
}
.prompt-input {
min-height: 58px;
width: 100%;
line-height: 24px;
border: none;
font-size: 14px;
background: none;
resize: none;
white-space: pre-wrap; /* 保持文本换行 */
word-wrap: break-word; /* 允许单词换行 */
overflow-wrap: break-word; /* 允许长单词换行，适用于现代浏览器 */
}
}
.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;
.iconfont {
font-size: 19px;
cursor: pointer;
background-color: var(--chat-content-bg);
padding: 5px;
border-radius: 6px;
}
}
.add-new {
.el-icon {
font-size: 20px;
color: #754ff6;
}
cursor: pointer;
}
}
}
}
}
}
}
}
}
.el-message-box {
width: 90%;
max-width: 420px;
}
.el-message {
min-width: 100px;
max-width: 600px;
}
}
.el-select-dropdown__wrap {
.el-select-dropdown__item {
.role-option {
display: flex;
flex-flow: row;
margin-top: 8px;
.el-image {
width: 20px;
height: 20px;
border-radius: 50%;
}
span {
margin-left: 5px;
height: 20px;
line-height: 20px;
}
}
}
}
.account {
display: flex;
background-color: #90ffc2;
color: #000000;
width: 100%;
border-radius: 10px;
padding: 10px;
.vip-logo {
.el-image {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: var(--chat-content-bg);
color: var(--theme-text-color-primary);
}
}
.vip-info {
padding: 0 10px 0 10px;
h4, p {
margin: 0;
}
h4 {
font-weight: bold;
font-size: 16px;
}
p {
color: #333333;
}
}
.pay-btn {
width: 100%;
display: flex;
justify-content: right;
align-items: center;
}
}
.el-overlay-dialog {
.el-dialog {
.el-dialog__body {
.notice {
line-height: 1.8;
font-size: 16px;
overflow: auto;
height: 70vh;
}
}
.dialog-footer {
margin-right: 22px;
}
}
}
.dialog-service {
text-align: center;
.el-image {
width: 360px;
}
}
.tools-dropdown {
width: auto;
.el-icon {
margin-left: 5px;
}
}

188
web/src/assets/css/color-dark.styl → web/src/assets/css/color-dark.scss
View File

@@ -1,95 +1,95 @@
.dark {
color-scheme: dark;
--el-color-primary: #409eff;
--el-color-primary-light-3: #3375b9;
--el-color-primary-light-5: #2a598a;
--el-color-primary-light-7: #213d5b;
--el-color-primary-light-8: #1d3043;
--el-color-primary-light-9: #18222c;
--el-color-primary-dark-2: #66b1ff;
--el-color-success: #67c23a;
--el-color-success-light-3: #4e8e2f;
--el-color-success-light-5: #3e6b27;
--el-color-success-light-7: #2d481f;
--el-color-success-light-8: #25371c;
--el-color-success-light-9: #1c2518;
--el-color-success-dark-2: #85ce61;
--el-color-warning: #e6a23c;
--el-color-warning-light-3: #a77730;
--el-color-warning-light-5: #7d5b28;
--el-color-warning-light-7: #533f20;
--el-color-warning-light-8: #3e301c;
--el-color-warning-light-9: #292218;
--el-color-warning-dark-2: #ebb563;
--el-color-danger: #f56c6c;
--el-color-danger-light-3: #b25252;
--el-color-danger-light-5: #854040;
--el-color-danger-light-7: #582e2e;
--el-color-danger-light-8: #412626;
--el-color-danger-light-9: #2b1d1d;
--el-color-danger-dark-2: #f78989;
--el-color-error: #f56c6c;
--el-color-error-light-3: #b25252;
--el-color-error-light-5: #854040;
--el-color-error-light-7: #582e2e;
--el-color-error-light-8: #412626;
--el-color-error-light-9: #2b1d1d;
--el-color-error-dark-2: #f78989;
--el-color-info: #909399;
--el-color-info-light-3: #6b6d71;
--el-color-info-light-5: #525457;
--el-color-info-light-7: #393a3c;
--el-color-info-light-8: #2d2d2f;
--el-color-info-light-9: #202121;
--el-color-info-dark-2: #a6a9ad;
--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
--el-bg-color-page: #0a0a0a;
--el-bg-color: #141414;
--el-bg-color-overlay: #1d1e1f;
--el-text-color-primary: #E5EAF3;
--el-text-color-regular: #CFD3DC;
--el-text-color-secondary: #A3A6AD;
--el-text-color-placeholder: #8D9095;
--el-text-color-disabled: #6C6E72;
--el-border-color-darker: #636466;
--el-border-color-dark: #58585B;
--el-border-color: #4C4D4F;
--el-border-color-light: #414243;
--el-border-color-lighter: #363637;
--el-border-color-extra-light: #2B2B2C;
--el-fill-color-darker: #424243;
--el-fill-color-dark: #39393A;
--el-fill-color: #303030;
--el-fill-color-light: #262727;
--el-fill-color-lighter: #1D1D1D;
--el-fill-color-extra-light: #191919;
--el-fill-color-blank: transparent;
--el-mask-color: rgba(0, 0, 0, 0.8);
--el-mask-color-extra-light: rgba(0, 0, 0, 0.3)
--el-menu-bg-color-dark: #39393A
--el-menu-bg-color-darker: #424243
}
.dark .el-button {
--el-button-disabled-text-color: rgba(255, 255, 255, 0.5)
}
.dark .el-card {
--el-card-bg-color: var(--el-bg-color-overlay)
}
.dark .el-empty {
--el-empty-fill-color-0: var(--el-color-black);
--el-empty-fill-color-1: #4b4b52;
--el-empty-fill-color-2: #36383d;
--el-empty-fill-color-3: #1e1e20;
--el-empty-fill-color-4: #262629;
--el-empty-fill-color-5: #202124;
--el-empty-fill-color-6: #212224;
--el-empty-fill-color-7: #1b1c1f;
--el-empty-fill-color-8: #1c1d1f;
--el-empty-fill-color-9: #18181a
.dark {
color-scheme: dark;
--el-color-primary: #409eff;
--el-color-primary-light-3: #3375b9;
--el-color-primary-light-5: #2a598a;
--el-color-primary-light-7: #213d5b;
--el-color-primary-light-8: #1d3043;
--el-color-primary-light-9: #18222c;
--el-color-primary-dark-2: #66b1ff;
--el-color-success: #67c23a;
--el-color-success-light-3: #4e8e2f;
--el-color-success-light-5: #3e6b27;
--el-color-success-light-7: #2d481f;
--el-color-success-light-8: #25371c;
--el-color-success-light-9: #1c2518;
--el-color-success-dark-2: #85ce61;
--el-color-warning: #e6a23c;
--el-color-warning-light-3: #a77730;
--el-color-warning-light-5: #7d5b28;
--el-color-warning-light-7: #533f20;
--el-color-warning-light-8: #3e301c;
--el-color-warning-light-9: #292218;
--el-color-warning-dark-2: #ebb563;
--el-color-danger: #f56c6c;
--el-color-danger-light-3: #b25252;
--el-color-danger-light-5: #854040;
--el-color-danger-light-7: #582e2e;
--el-color-danger-light-8: #412626;
--el-color-danger-light-9: #2b1d1d;
--el-color-danger-dark-2: #f78989;
--el-color-error: #f56c6c;
--el-color-error-light-3: #b25252;
--el-color-error-light-5: #854040;
--el-color-error-light-7: #582e2e;
--el-color-error-light-8: #412626;
--el-color-error-light-9: #2b1d1d;
--el-color-error-dark-2: #f78989;
--el-color-info: #909399;
--el-color-info-light-3: #6b6d71;
--el-color-info-light-5: #525457;
--el-color-info-light-7: #393a3c;
--el-color-info-light-8: #2d2d2f;
--el-color-info-light-9: #202121;
--el-color-info-dark-2: #a6a9ad;
--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
--el-bg-color-page: #0a0a0a;
--el-bg-color: #141414;
--el-bg-color-overlay: #1d1e1f;
--el-text-color-primary: #e5eaf3;
--el-text-color-regular: #cfd3dc;
--el-text-color-secondary: #a3a6ad;
--el-text-color-placeholder: #8d9095;
--el-text-color-disabled: #6c6e72;
--el-border-color-darker: #636466;
--el-border-color-dark: #58585b;
--el-border-color: #4c4d4f;
--el-border-color-light: #414243;
--el-border-color-lighter: #363637;
--el-border-color-extra-light: #2b2b2c;
--el-fill-color-darker: #424243;
--el-fill-color-dark: #39393a;
--el-fill-color: #303030;
--el-fill-color-light: #262727;
--el-fill-color-lighter: #1d1d1d;
--el-fill-color-extra-light: #191919;
--el-fill-color-blank: transparent;
--el-mask-color: rgba(0, 0, 0, 0.8);
--el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
--el-menu-bg-color-dark: #39393a;
--el-menu-bg-color-darker: #424243;
}
.dark .el-button {
--el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
}
.dark .el-card {
--el-card-bg-color: var(--el-bg-color-overlay);
}
.dark .el-empty {
--el-empty-fill-color-0: var(--el-color-black);
--el-empty-fill-color-1: #4b4b52;
--el-empty-fill-color-2: #36383d;
--el-empty-fill-color-3: #1e1e20;
--el-empty-fill-color-4: #262629;
--el-empty-fill-color-5: #202124;
--el-empty-fill-color-6: #212224;
--el-empty-fill-color-7: #1b1c1f;
--el-empty-fill-color-8: #1c1d1f;
--el-empty-fill-color-9: #18181a;
}

151
web/src/assets/css/common.scss Normal file
View File

@@ -0,0 +1,151 @@
:root {
--sm-txt: rgba(163, 174, 208, 1);
--text-secondary: #8a939d;
--el-color-primary: rgb(107, 80, 225);
--van-primary-color: rgb(107, 80, 225);
--theme-textcolor-normal: #b0a0f8;
--el-border-radius-base: 5px;
--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;
--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, 0.322); //主题边框颜色
--theme-border-hover: rgb(107, 85, 255); //主题边框hover颜色
--text--hover: rgba(215, 211, 240, 0.581); //主题色hover色系
--el-input-focus-border-color: #b0a0f8;
--little-btn-bg: #e9d3f6;
--gray-btn-bg: #ededf591;
// --a-link-color: #3561ff
--a-link-color: #6e8eff;
--shadow-color: rgba(223, 71, 255, 0.6);
--sm-btn-bg: #6052ed;
--theme-text-tertiary: #595959;
--theme-btn-fill-tertiary: #f0ebff;
--theme-text-btn-tertiary: #6841ea;
// #e7e7e8
}
.el-dialog {
//--el-border-radius-base: calc(var(--el-component-size) / 2);
--el-dialog-border-radius: 10px;
}
.login-box {
--el-component-size: 48px;
}
.btn-go {
background: var(--btnColor);
color: #fff;
border-radius: 5px;
padding: 5px 10px;
&:hover {
color: #fff;
}
}
.btn-normal {
background: var(--theme-btn-color);
color: #fff;
border-radius: 5px;
padding: 5px 10px;
&:hover {
color: #fff;
}
}
.flex {
display: flex;
align-items: center;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.theme-color-primary {
color: var(--el-color-primary);
}
.text-color-primary {
color: var(--text-color-primary);
}
.w100 {
width: 100%;
}
.el-input__wrapper {
background: var(--card-bg);
}
.el-dialog__title {
font-weight: bold;
line-height: 28px;
}
.el-button--primary {
border-radius: 5px;
}
.el-button {
height: auto;
}
/* 设置滚动条的宽度 */
::-webkit-scrollbar {
width: 12px; /* 垂直滚动条宽度 */
height: 12px; /* 水平滚动条高度 */
}
/* 滚动条的轨道背景颜色 */
::-webkit-scrollbar-track {
background: #f1f1f1 !important; /* 滚动条轨道颜色 */
border-radius: 6px; /* 可选：轨道圆角 */
}
/* 滚动条滑块的颜色 */
::-webkit-scrollbar-thumb {
background: #888 !important; /* 滑块颜色 */
border-radius: 6px; /* 可选：滑块圆角 */
}
/* 鼠标悬停在滑块上的颜色 */
::-webkit-scrollbar-thumb:hover {
background: #555; /* 悬停时的滑块颜色 */
}
//.el-message-box
.el-message-box {
--el-messagebox-border-radius: 10px;
--el-messagebox-padding-primary: 24px;
}
.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;
}
}
.sm-btn-theme {
background-color: var(--theme-btn-fill-tertiary) !important;
color: var(--theme-text-btn-tertiary) !important;
border: none;
}
.el-tag, .el-tag.el-tag--primary {
--el-tag-bg-color: #f0ebff;
}
.box-card {
padding: 20px;
background-color: var(--chat-bg);
border-radius: 8px;
}
.el-table th.el-table__cell {
background-color: var(--chat-bg);
}

154
web/src/assets/css/common.styl
View File

@@ -1,154 +0,0 @@
:root{
--sm-txt:rgba(163, 174, 208, 1);
--text-secondary: #8a939d;
--el-color-primary: rgb(107, 80, 225);
--van-primary-color:rgb(107, 80, 225);
--theme-textcolor-normal:#b0a0f8;
--el-border-radius-base: 5px;
--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;
--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-input-focus-border-color: #b0a0f8;
--little-btn-bg:#e9d3f6;
--gray-btn-bg:#ededf591;
// --a-link-color: #3561ff
--a-link-color: #6e8eff
--shadow-color:rgba(223,71,255,0.6)
--sm-btn-bg:#6052ed;
--theme-text-tertiary: #595959;
--theme-btn-fill-tertiary: #f0ebff;
--theme-text-btn-tertiary: #6841ea;
// #e7e7e8
}
.el-dialog{
//--el-border-radius-base: calc(var(--el-component-size) / 2);
--el-dialog-border-radius: 10px
}
.login-box{
--el-component-size: 48px;
}
.btn-go{
background: var(--btnColor);
color: #fff;
border-radius: 5px;
padding: 5px 10px;
&:hover{
color: #fff;
}
}
.btn-normal{
background: var(--theme-btn-color);
color: #fff;
border-radius: 5px;
padding: 5px 10px;
&:hover{
color: #fff;
}
}
.flex{
display: flex;
align-items: center;
}
.flex-center{
display: flex;
align-items: center;
justify-content: center;
}
.flex-between{
display: flex;
align-items: center;
justify-content: space-between;
}
.theme-color-primary{
color: var(--el-color-primary);
}
.text-color-primary{
color:var(--text-color-primary)
}
.w100{
width: 100%;
}
.el-input__wrapper{
background: var( --card-bg)
}
.el-dialog__title{
font-weight: bold;
line-height: 28px;
}
.el-button--primary{
border-radius: 5px;
}
.el-button {
height auto
}
/* 设置滚动条的宽度 */
::-webkit-scrollbar {
width: 12px; /* 垂直滚动条宽度 */
height: 12px; /* 水平滚动条高度 */
}
/* 滚动条的轨道背景颜色 */
::-webkit-scrollbar-track {
background: #f1f1f1 !important; /* 滚动条轨道颜色 */
border-radius: 6px; /* 可选：轨道圆角 */
}
/* 滚动条滑块的颜色 */
::-webkit-scrollbar-thumb {
background: #888 !important; /* 滑块颜色 */
border-radius: 6px; /* 可选：滑块圆角 */
}
/* 鼠标悬停在滑块上的颜色 */
::-webkit-scrollbar-thumb:hover {
background: #555; /* 悬停时的滑块颜色 */
}
//.el-message-box
.el-message-box{
--el-messagebox-border-radius: 10px
--el-messagebox-padding-primary: 24px
}
.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
}
}
.sm-btn-theme{
background-color: var(--theme-btn-fill-tertiary) !important;
color: var(--theme-text-btn-tertiary) !important;
border: none;
}
.el-tag, .el-tag.el-tag--primary{
--el-tag-bg-color:#f0ebff
}
.box-card{
padding: 20px;
background-color: var(--chat-bg);
border-radius: 8px;
}
.el-table th.el-table__cell {
background-color: var(--chat-bg)
}

72
web/src/assets/css/custom-scroll.styl → web/src/assets/css/custom-scroll.scss
View File

@@ -1,37 +1,37 @@
.custom-scroll {
/* 修改滚动条的颜色 */
::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
/* 修改滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {
background-color: #282C34;
}
/* 修改滚动条的滑块颜色 */
::-webkit-scrollbar-thumb {
background-color: #444444;
border-radius 8px
}
/* 修改滚动条的滑块的悬停颜色 */
::-webkit-scrollbar-thumb:hover {
background-color: #666666;
}
overflow: auto; /* 保持滚动功能 */
scrollbar-width: none; /* 隐藏滚动条（Firefox） */
-ms-overflow-style: none; /* 隐藏滚动条（IE、Edge） */
::-webkit-scrollbar {
display: none; /* 隐藏滚动条（Webkit 浏览器） */
}
&.showScrollbar {
::-webkit-scrollbar {
display: none; /* 隐藏滚动条（Webkit 浏览器） */
}
}
.custom-scroll {
/* 修改滚动条的颜色 */
::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
/* 修改滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {
background-color: #282c34;
}
/* 修改滚动条的滑块颜色 */
::-webkit-scrollbar-thumb {
background-color: #444444;
border-radius: 8px;
}
/* 修改滚动条的滑块的悬停颜色 */
::-webkit-scrollbar-thumb:hover {
background-color: #666666;
}
overflow: auto; /* 保持滚动功能 */
scrollbar-width: none; /* 隐藏滚动条（Firefox） */
-ms-overflow-style: none; /* 隐藏滚动条（IE、Edge） */
::-webkit-scrollbar {
display: none; /* 隐藏滚动条（Webkit 浏览器） */
}
&.showScrollbar {
::-webkit-scrollbar {
display: none; /* 隐藏滚动条（Webkit 浏览器） */
}
}
}

4
web/src/assets/css/font.styl → web/src/assets/css/font.scss
View File

@@ -10,8 +10,8 @@
font-weight: normal;
font-style: normal;
}
$font-regular = "OPlusSans3-Regular", "PingFangSC-Regular", "Roboto", "sans-serif";
$font-medium = "OPlusSans3-Medium", "PingFangSC-Medium", "Roboto", "sans-serif";
$font-regular: "OPlusSans3-Regular", "PingFangSC-Regular", "Roboto", "sans-serif";
$font-medium: "OPlusSans3-Medium", "PingFangSC-Medium", "Roboto", "sans-serif";
.font-regular {
font-family: $font-regular;

547
web/src/assets/css/home.styl → web/src/assets/css/home.scss
View File

@@ -1,283 +1,266 @@
.layout {
display: flex;
position: relative;
height: 100vh;
.big-top-title {
padding-top: 10px;
}
.top-collapse {
padding-top: 10px
img {
width 24px !important
height: 24px !important
}
}
.tab-box {
align-items: center
background-color: var(--card-bg)
border-right: 1px solid var(--line-box);
// height: 100%
// position: fixed;
height: 100vh;
.title {
font-size: 28px
height: 40px
width 120px
text-align: center;
word-wrap break-all;
overflow hidden
font-weight: 700
color: var(--text-theme-color)
}
img {
height: 44px
object-fit: cover
border-radius: 50%
border: 2px solid #754ff6;
background: #fff
}
.marr {
margin-right: 4px;
}
}
}
.flex-center-col {
display flex
align-items center
flex-direction column
.iconfont {
font-size 24px
cursor pointer
color var(--text-color)
}
.icon-new-chat {
color #ffffff
}
}
.menu-list-collapse {
.flex-center-col {
flex-direction: row;
}
.menu-list-item {
height: 38px;
line-height: 38px;
.iconfont {
font-size 16px
}
}
.menu-list-item:hover,
.active {
background: rgba(79, 89, 102, .122);
border-radius: 8px;
.el-icon {
background: transparent !important;
}
}
.menu-title {
font-size: 15px !important;
margin-bottom: 0 !important;
}
}
.menu-list {
width: 65px;
.svg-icon {
svg {
width: 30px;
height: 30px;
}
}
.menu-list-item {
// margin-bottom: 10px;
margin: 0 8px 8px;
cursor: pointer;
font-weight: 550;
color: var(--text-theme-color);
&: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;
}
&.active {
color: var(--text-theme-color);
font-weight: 700;
}
}
.bot {
position: absolute;
bottom: 6px;
width 65px;
}
.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;
}
}
.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%;
.loginMask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.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: 0px 15px;
cursor: pointer;
border-radius: 5px;
margin: 5px 0;
height: 38px;
line-height: 38px;
.el-image {
position: relative
top 5px
right 5px
}
&:hover {
background: rgba(183, 176, 255, 0.5);
}
}
li.active {
background: rgba(183, 176, 255, 0.5);
}
}
.setting-menus {
.title {
color: var(--text-theme-color);
}
.el-icon,
.iconfont {
font-size: 18px
margin-right: 6px
}
color: var(--text-theme-color);
}
.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;
.layout {
display: flex;
position: relative;
height: 100vh;
.big-top-title {
padding-top: 10px;
}
.top-collapse {
padding-top: 10px;
img {
width: 24px !important;
height: 24px !important;
}
}
.tab-box {
align-items: center;
background-color: var(--card-bg);
border-right: 1px solid var(--line-box);
// height: 100%;
// position: fixed;
height: 100vh;
.title {
font-size: 28px;
height: 40px;
width: 120px;
text-align: center;
word-wrap: break-all;
overflow: hidden;
font-weight: 700;
color: var(--text-theme-color);
}
img {
height: 44px;
object-fit: cover;
border-radius: 50%;
border: 2px solid #754ff6;
background: #fff;
}
.marr {
margin-right: 4px;
}
}
}
.flex-center-col {
display: flex;
align-items: center;
flex-direction: column;
.iconfont {
font-size: 24px;
cursor: pointer;
color: var(--text-color);
}
.icon-new-chat {
color: #ffffff;
}
}
.menu-list-collapse {
.flex-center-col {
flex-direction: row;
}
.menu-list-item {
height: 38px;
line-height: 38px;
.iconfont {
font-size: 16px;
}
}
.menu-list-item:hover,
.active {
background: rgba(79, 89, 102, 0.122);
border-radius: 8px;
.el-icon {
background: transparent !important;
}
}
.menu-title {
font-size: 15px !important;
margin-bottom: 0 !important;
}
}
.menu-list {
width: 65px;
.svg-icon {
svg {
width: 30px;
height: 30px;
}
}
.menu-list-item {
// margin-bottom: 10px;
margin: 0 8px 8px;
cursor: pointer;
font-weight: 550;
color: var(--text-theme-color);
&:hover {
.el-icon {
background: rgba(79, 89, 102, 0.122);
}
}
.el-icon {
width: 24px;
height: 24px;
padding: 4px;
overflow: hidden;
border-radius: 50%;
font-size: 20px;
}
&.active {
color: var(--text-theme-color);
font-weight: 700;
}
}
.bot {
position: absolute;
bottom: 6px;
width: 65px;
}
.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;
}
}
.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%;
.loginMask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.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: 0px 15px;
cursor: pointer;
border-radius: 5px;
margin: 5px 0;
height: 38px;
line-height: 38px;
.el-image {
position: relative;
top: 5px;
right: 5px;
}
&:hover {
background: rgba(183, 176, 255, 0.5);
}
}
li.active {
background: rgba(183, 176, 255, 0.5);
}
}
.setting-menus {
.title {
color: var(--text-theme-color);
}
.el-icon,
.iconfont {
font-size: 18px;
margin-right: 6px;
}
color: var(--text-theme-color);
}
.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;
}

456
web/src/assets/css/image-dall.styl → web/src/assets/css/image-dall.scss
View File

@@ -1,233 +1,223 @@
.page-dall {
// background-color: #282c34;
.inner {
display: flex;
.sd-box {
margin 10px
// background-color #262626
// border 1px solid #454545
min-width 300px
max-width 300px
padding 10px
border-radius 10px
color var(--text-theme-color);
font-size 14px
h2 {
font-weight: bold;
font-size 20px
text-align center
color#b0a0f8
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.sd-params {
margin-top 10px
overflow auto
.param-line {
padding 0 10px
.grid-content
.form-item-inner {
display flex
.info-icon {
margin-left 10px
position relative
top 8px
}
}
}
.param-line.pt {
padding-top 5px
padding-bottom 5px
}
.text-info {
padding 10px
}
}
.submit-btn {
padding 10px 15px 0 15px
text-align center
.el-button {
width 200px
}
}
}
.el-form {
.el-form-item__label {
color var(--text-theme-color)
}
}
.task-list-box {
background: var(--chat-bg);
width 100%
color var(--text-theme-color)
overflow-x hidden
.task-list-inner {
.el-tabs {
--el-tabs-header-height: 55px;
}
.el-tabs__item {
color: var(--text-theme-color);
font-size: 18px;
}
.title-tabs .el-tabs__item.is-active {
color:#b0a0f8;
font-size: 18px;
}
.title-tabs .el-tabs__active-bar {
background-color:#b0a0f8;
}
.el-textarea {
// --el-input-focus-border-color:#b0a0f8;
}
.el-textarea__inner {
background: transparent;
color: var(--text-theme-color);
}
.el-input__wrapper {
background: transparent;
padding 5px
}
.text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px
}
.param-line.pt {
padding-top 5px
padding-bottom 5px
}
.form-item-inner {
display flex
align-items: center
.el-icon {
margin-left 10px
}
}
.el-form-item__label {
color var(--text-theme-color)
}
// 图片上传样式
.img-inline {
display flex
.img-uploader {
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width 120px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px
color: #8c939d
width 100%
height: 120px
text-align: center
}
}
}
.img-list-box {
display flex
.img-item {
width 120px
position relative
margin-right 10px
.el-image {
width 120px
height 120px
border-radius 5px
}
.el-button {
position absolute
right 5px
top 5px
width 20px
height 20px
}
}
}
}
.el-row.text-info {
width 100%
padding 10px 0
.el-tag {
margin-right 10px
}
}
// 提交按钮
.submit-btn {
display flex
margin: 20px 0
.el-button {
width 200px
}
}
// 任务列表
@import "waterfall-list.styl"
}
.no-more-data {
text-align center
padding 30px
}
}
}
}
.page-dall {
// background-color: #282c34;
.inner {
display: flex;
.sd-box {
margin: 10px;
// background-color: #262626;
// border: 1px solid #454545;
min-width: 300px;
max-width: 300px;
padding: 10px;
border-radius: 10px;
color: var(--text-theme-color);
font-size: 14px;
h2 {
font-weight: bold;
font-size: 20px;
text-align: center;
color: #b0a0f8;
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.sd-params {
margin-top: 10px;
overflow: auto;
.param-line {
padding: 0 10px;
.grid-content,
.form-item-inner {
display: flex;
.info-icon {
margin-left: 10px;
position: relative;
top: 8px;
}
}
}
.param-line.pt {
padding-top: 5px;
padding-bottom: 5px;
}
.text-info {
padding: 10px;
}
}
.submit-btn {
padding: 10px 15px 0 15px;
text-align: center;
.el-button {
width: 200px;
}
}
}
.el-form {
.el-form-item__label {
color: var(--text-theme-color);
}
}
.task-list-box {
background: var(--chat-bg);
width: 100%;
color: var(--text-theme-color);
overflow-x: hidden;
.task-list-inner {
.el-tabs {
--el-tabs-header-height: 55px;
}
.el-tabs__item {
color: var(--text-theme-color);
font-size: 18px;
}
.title-tabs .el-tabs__item.is-active {
color: #b0a0f8;
font-size: 18px;
}
.title-tabs .el-tabs__active-bar {
background-color: #b0a0f8;
}
.el-textarea {
// --el-input-focus-border-color: #b0a0f8;
}
.el-textarea__inner {
background: transparent;
color: var(--text-theme-color);
}
.el-input__wrapper {
background: transparent;
padding: 5px;
}
.text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px;
}
.param-line.pt {
padding-top: 5px;
padding-bottom: 5px;
}
.form-item-inner {
display: flex;
align-items: center;
.el-icon {
margin-left: 10px;
}
}
.el-form-item__label {
color: var(--text-theme-color);
}
// 图片上传样式
.img-inline {
display: flex;
.img-uploader {
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 120px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 120px;
text-align: center;
}
}
}
.img-list-box {
display: flex;
.img-item {
width: 120px;
position: relative;
margin-right: 10px;
.el-image {
width: 120px;
height: 120px;
border-radius: 5px;
}
.el-button {
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
}
}
}
}
.el-row.text-info {
width: 100%;
padding: 10px 0;
.el-tag {
margin-right: 10px;
}
}
// 提交按钮
.submit-btn {
display: flex;
margin: 20px 0;
.el-button {
width: 200px;
}
}
// 任务列表
@import 'waterfall-list.scss';
}
.no-more-data {
text-align: center;
padding: 30px;
}
}
}
}

488
web/src/assets/css/image-mj.scss Normal file
View File

@@ -0,0 +1,488 @@
.page-mj {
// background-color: #282c34;
height: 100%;
.inner {
display: flex;
// height: 100%;
.mj-box {
margin: 10px;
// background-color: #262626;
// border: 1px solid #454545;
// height: calc(100vh - 50px);
// overflow: scroll;
min-width: 300px;
max-width: 300px;
padding: 10px;
border-radius: 10px;
color: var(--text-theme-color);
font-size: 14px;
overflow: auto;
h2 {
font-weight: bold;
font-size: 20px;
text-align: center;
color: var(--theme-textcolor-normal);
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.mj-params {
margin-top: 10px;
overflow: auto;
.param-line {
padding: 0 10px;
.el-icon {
position: relative;
}
.grid-content {
// background-color: #383838;
background: var(--card-bg);
border-radius: 8px;
padding: 8px 14px;
display: flex;
cursor: pointer;
margin-bottom: 10px;
// border: 1px solid #383838;
border: 1px solid var(--chat-bg);
&:hover {
border: 1px solid var(--theme-border-hover);
}
.icon {
width: 20px;
height: 20px;
margin-bottom: 5px;
}
.text {
margin-left: 5px;
margin-top: 2px;
}
}
.grid-content.active {
// color: #47fff1;
// background-color: #585858;
border: 1px solid var(--theme-border-hover);
}
.model {
background: var(--card-bg);
// border: 1px solid #454545;
border-radius: 8px;
padding: 5px;
margin-bottom: 10px;
display: flex;
flex-flow: column;
align-items: center;
cursor: pointer;
border: 1px solid var(--chat-bg);
&:hover {
border: 1px solid var(--theme-border-hover);
}
.el-image {
height: 40px;
width: 100%;
}
.text {
margin-top: 4px;
font-size: 12px;
}
}
.model.active {
// color: #47fff1;
// background-color: #585858;
border: 1px solid var(--theme-border-hover);
}
.form-item-inner {
display: flex;
align-items: center;
.el-select {
--el-select-input-focus-border-color: var(--el-color-primary);
--el-input-focus-border-color: var(--el-color-primary);
}
.el-input__wrapper {
background: var(--chat-bg);
}
.el-input__inner {
color: var(--text-theme-color);
}
.el-icon {
margin-left: 10px;
}
}
.img-uploader {
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 100%;
transition: var(--el-transition-duration-fast);
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 120px;
text-align: center;
}
}
}
}
.param-line.pt {
display: flex;
align-items: center;
padding-top: 5px;
padding-bottom: 5px;
}
}
}
.el-form {
.el-form-item__label {
color: var(--text-theme-color);
}
.el-input,
.el-slider {
width: 180px;
}
.uploader-icon {
font-size: 24px;
position: relative;
top: 3px;
}
}
.task-list-box {
background: var(--chat-bg);
width: 100%;
// padding: 0 10px 10px 10px;
color: var(--text-theme-color);
overflow-x: hidden;
.task-list-inner {
.el-tabs {
--el-tabs-header-height: 55px;
}
.el-tabs__item {
color: var(--text-theme-color);
font-size: 18px;
}
.title-tabs .el-tabs__item.is-active {
color: var(--theme-textcolor-normal);
font-size: 18px;
}
.title-tabs .el-tabs__active-bar {
background-color: var(--theme-textcolor-normal);
}
.el-textarea {
--el-input-focus-border-color: var(--el-color-primary);
}
.el-textarea__inner {
background: transparent;
color: var(--text-theme-color);
}
.el-input__wrapper {
background: transparent;
padding: 5px;
}
.text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px;
}
.param-line.pt {
padding-top: 5px;
padding-bottom: 5px;
}
.form-item-inner {
display: flex;
align-items: center;
.el-icon {
margin-left: 10px;
}
}
.el-form-item__label {
color: var(--text-theme-color);
}
// 图片上传样式
.img-inline {
display: flex;
.img-uploader {
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 120px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 120px;
text-align: center;
}
}
}
.img-list-box {
display: flex;
.img-item {
width: 120px;
position: relative;
margin-right: 10px;
.el-image {
width: 120px;
height: 120px;
border-radius: 5px;
}
.el-button {
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
}
}
}
}
.el-row.text-info {
width: 100%;
padding: 10px 0;
.el-tag {
margin-right: 10px;
}
}
// 提交按钮
.submit-btn {
display: flex;
margin: 20px 0;
.el-button {
width: 200px;
}
}
.job-list-box {
// 任务列表
@import 'running-job-list.scss';
.finish-job-list {
#waterfall {
display: flex;
justify-content: center;
padding-top: 20px;
flex-flow: column;
.waterfall-item {
overflow: visible;
.job-item {
width: 100%;
height: 100%;
border: 1px solid #666666;
padding: 6px;
border-radius: 6px;
// position: relative;
.el-image {
overflow: auto;
}
.opt {
padding-top: 5px;
.opt-line {
margin: 6px 0;
ul {
display: flex;
flex-flow: row;
li {
margin-right: 6px;
a {
padding: 3px 0;
width: 40px;
text-align: center;
border-radius: 5px;
display: block;
cursor: pointer;
background-color: #4e5058;
color: #fff;
&:hover {
background-color: #6d6f78;
}
}
}
.show-prompt {
font-size: 20px;
cursor: pointer;
}
}
}
}
.remove {
display: none;
position: absolute;
right: 10px;
top: 10px;
}
&:hover {
.remove {
display: block;
}
}
}
}
}
}
.el-image {
width: 100%;
height: 100%;
overflow: visible;
.el-image-viewer__wrapper {
img {
width: auto;
height: auto;
}
}
.image-slot {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
min-height: 220px;
color: var(--text-theme-color);
overflow: hidden;
.err-msg-container {
overflow: hidden;
word-break: break-all;
padding: 15px;
.title {
font-size: 20px;
text-align: center;
font-weight: bold;
color: #f56c6c;
margin-bottom: 30px;
}
.opt {
display: flex;
justify-content: center;
}
}
.iconfont {
font-size: 50px;
margin-bottom: 10px;
}
}
}
.el-image.upscale {
img {
// height: 310px;
}
.image-slot {
min-height: 310px;
}
.el-image-viewer__wrapper {
img {
width: auto;
height: auto;
}
}
}
}
}
.no-more-data {
text-align: center;
padding: 30px;
}
}
.generate-btn {
.iconfont {
margin-right: 5px;
}
}
}
}
.mj-list-item-prompt {
.el-icon {
margin-left: 10px;
cursor: pointer;
position: relative;
}
}

503
web/src/assets/css/image-mj.styl
View File

@@ -1,503 +0,0 @@
.page-mj {
// background-color: #282c34;
height 100%
.inner {
display: flex;
// height: 100%
.mj-box {
margin 10px
// background-color #262626
// border 1px solid #454545
// height: calc(100vh - 50px)
// overflow: scroll
min-width 300px
max-width 300px
padding 10px
border-radius 10px
color var(--text-theme-color);
font-size 14px
overflow auto
h2 {
font-weight: bold;
font-size 20px
text-align center
color var( --theme-textcolor-normal)
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.mj-params {
margin-top 10px
overflow auto
.param-line {
padding 0 10px
.el-icon {
position relative
}
.grid-content {
// background-color #383838
background: var(--card-bg);
border-radius: 8px;
padding 8px 14px
display flex
cursor pointer
margin-bottom: 10px;
// border 1px solid #383838
border 1px solid var(--chat-bg)
&:hover {
border 1px solid var(--theme-border-hover)
}
.icon {
width 20px
height 20px
margin-bottom 5px
}
.text {
margin-left 5px
margin-top 2px
}
}
.grid-content.active {
// color #47fff1
// background-color #585858
border 1px solid var(--theme-border-hover)
}
.model {
background: var(--card-bg);
// border 1px solid #454545
border-radius 8px
padding 5px
margin-bottom 10px
display flex
flex-flow column
align-items center
cursor pointer
border 1px solid var(--chat-bg)
&:hover {
border 1px solid var(--theme-border-hover)
}
.el-image {
height 40px
width 100%
}
.text {
margin-top 4px
font-size 12px
}
}
.model.active {
// color #47fff1
// background-color #585858
border 1px solid var(--theme-border-hover)
}
.form-item-inner {
display flex
align-items: center
.el-select {
--el-select-input-focus-border-color: var(--el-color-primary)
--el-input-focus-border-color: var(--el-color-primary)
}
.el-input__wrapper {
background: var(--chat-bg)
}
.el-input__inner {
color: var(--text-theme-color)
}
.el-icon {
margin-left 10px
}
}
.img-uploader {
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width 100%
transition: var(--el-transition-duration-fast);
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px
color: #8c939d
width 100%
height: 120px
text-align: center
}
}
}
}
.param-line.pt {
display: flex
align-items: center
padding-top 5px
padding-bottom 5px
}
}
}
.el-form {
.el-form-item__label {
color var(--text-theme-color)
}
.el-input, .el-slider {
width 180px
}
.uploader-icon {
font-size 24px
position relative
top 3px
}
}
.task-list-box {
background: var(--chat-bg);
width 100%
//padding 0 10px 10px 10px
color var(--text-theme-color)
overflow-x hidden
.task-list-inner {
.el-tabs {
--el-tabs-header-height: 55px;
}
.el-tabs__item {
color: var(--text-theme-color);
font-size: 18px;
}
.title-tabs .el-tabs__item.is-active {
color: var( --theme-textcolor-normal);
font-size: 18px;
}
.title-tabs .el-tabs__active-bar {
background-color: var( --theme-textcolor-normal);
}
.el-textarea {
--el-input-focus-border-color: var(--el-color-primary)
}
.el-textarea__inner {
background: transparent;
color: var(--text-theme-color);
}
.el-input__wrapper {
background: transparent;
padding 5px
}
.text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px
}
.param-line.pt {
padding-top 5px
padding-bottom 5px
}
.form-item-inner {
display flex
align-items: center
.el-icon {
margin-left 10px
}
}
.el-form-item__label {
color var(--text-theme-color)
}
// 图片上传样式
.img-inline {
display flex
.img-uploader {
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width 120px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px
color: #8c939d
width 100%
height: 120px
text-align: center
}
}
}
.img-list-box {
display flex
.img-item {
width 120px
position relative
margin-right 10px
.el-image {
width 120px
height 120px
border-radius 5px
}
.el-button {
position absolute
right 5px
top 5px
width 20px
height 20px
}
}
}
}
.el-row.text-info {
width 100%
padding 10px 0
.el-tag {
margin-right 10px
}
}
// 提交按钮
.submit-btn {
display flex
margin: 20px 0
.el-button {
width 200px
}
}
.job-list-box {
// 任务列表
@import "running-job-list.styl"
.finish-job-list {
#waterfall {
display flex
justify-content center
padding-top 20px
flex-flow column
.waterfall-item {
overflow visible
.job-item {
width 100%
height 100%
border 1px solid #666666
padding 6px
border-radius 6px
//position relative
.el-image {
overflow auto
}
.opt {
padding-top 5px
.opt-line {
margin 6px 0
ul {
display flex
flex-flow row
li {
margin-right 6px
a {
padding 3px 0
width 40px
text-align center
border-radius 5px
display block
cursor pointer
background-color #4E5058
color #fff
&:hover {
background-color #6D6F78
}
}
}
.show-prompt {
font-size 20px
cursor pointer
}
}
}
}
.remove {
display none
position absolute
right 10px
top 10px
}
&:hover {
.remove {
display block
}
}
}
}
}
}
.el-image {
width 100%
height 100%
overflow visible
.el-image-viewer__wrapper {
img {
width auto
height auto
}
}
.image-slot {
display flex
flex-flow column
justify-content center
align-items center
min-height 220px
color var(--text-theme-color)
overflow hidden
.err-msg-container {
overflow hidden
word-break break-all
padding 15px
.title {
font-size 20px
text-align center
font-weight bold
color #f56c6c
margin-bottom 30px
}
.opt {
display flex
justify-content center
}
}
.iconfont {
font-size 50px
margin-bottom 10px
}
}
}
.el-image.upscale {
img {
//height 310px
}
.image-slot {
min-height 310px
}
.el-image-viewer__wrapper {
img {
width auto
height auto
}
}
}
}
}
.no-more-data {
text-align center
padding 30px
}
}
.generate-btn {
.iconfont {
margin-right 5px
}
}
}
}
.mj-list-item-prompt {
.el-icon {
margin-left 10px
cursor pointer
position relative
}
}

481
web/src/assets/css/image-sd.styl → web/src/assets/css/image-sd.scss
View File

@@ -1,246 +1,235 @@
.page-sd {
// background-color: #282c34;
.inner {
display: flex;
.sd-box {
margin 10px
// background-color #262626
// border 1px solid #454545
min-width 300px
max-width 300px
padding 10px 10px 20px 10px
border-radius 10px
color var(--text-theme-color);
font-size 14px
overflow auto
h2 {
font-weight: bold;
font-size 20px
text-align center
color var( --theme-textcolor-normal)
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.sd-params {
margin-top 10px
overflow auto
.param-line {
padding 0 10px
.grid-content
.form-item-inner {
display flex
.info-icon {
margin-left 10px
position relative
top 8px
}
}
}
.param-line.pt {
padding-top 5px
padding-bottom 5px
}
.text-info {
padding 10px
}
}
.submit-btn {
padding 10px 15px 0 15px
text-align center
.el-button {
width 200px
}
}
}
.el-form {
.el-form-item__label {
color: var(--text-theme-color)
}
}
.task-list-box {
background: var(--chat-bg);
width 100%
color: var(--text-theme-color)
overflow-x hidden
.task-list-inner {
.el-tabs {
--el-tabs-header-height: 55px;
}
.el-tabs__item {
color: #fff;
font-size: 18px;
}
.title-tabs .el-tabs__item.is-active {
color: #47FFF1;
font-size: 18px;
}
.title-tabs .el-tabs__active-bar {
background-color: #47FFF1;
}
.el-textarea {
// --el-input-focus-border-color: #47FFF1;
}
.el-textarea__inner {
background: transparent;
color: #fff;
}
.el-input__wrapper {
background: transparent;
padding 5px
}
.text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px
}
.param-line.pt {
padding-top 5px
padding-bottom 5px
}
.form-item-inner {
display flex
align-items: center
.el-icon {
margin-left 10px
}
}
.el-form-item__label {
color: var(--text-theme-color)
}
// 图片上传样式
.img-inline {
display flex
.img-uploader {
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width 120px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px
color: #8c939d
width 100%
height: 120px
text-align: center
}
}
}
.img-list-box {
display flex
.img-item {
width 120px
position relative
margin-right 10px
.el-image {
width 120px
height 120px
border-radius 5px
}
.el-button {
position absolute
right 5px
top 5px
width 20px
height 20px
}
}
}
}
.el-row.text-info {
width 100%
padding 10px 0
.el-tag {
margin-right 10px
}
}
// 提交按钮
.submit-btn {
display flex
margin: 20px 0
.el-button {
width 200px
}
}
// 任务列表
@import "waterfall-list.styl"
}
.no-more-data {
text-align center
padding 30px
}
}
}
@import "sd-task-dialog.styl"
.mj-list-item-prompt {
.el-icon {
margin-left 10px
cursor pointer
position relative
top 2px
}
}
}
.page-sd {
// background-color: #282c34;
.inner {
display: flex;
.sd-box {
margin: 10px;
// background-color: #262626;
// border: 1px solid #454545;
min-width: 300px;
max-width: 300px;
padding: 10px 10px 20px 10px;
border-radius: 10px;
color: var(--text-theme-color);
font-size: 14px;
overflow: auto;
h2 {
font-weight: bold;
font-size: 20px;
text-align: center;
color: var(--theme-textcolor-normal);
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.sd-params {
margin-top: 10px;
overflow: auto;
.param-line {
padding: 0 10px;
.grid-content,
.form-item-inner {
display: flex;
.info-icon {
margin-left: 10px;
position: relative;
top: 8px;
}
}
}
.param-line.pt {
padding-top: 5px;
padding-bottom: 5px;
}
.text-info {
padding: 10px;
}
}
.submit-btn {
padding: 10px 15px 0 15px;
text-align: center;
.el-button {
width: 200px;
}
}
}
.el-form {
.el-form-item__label {
color: var(--text-theme-color);
}
}
.task-list-box {
background: var(--chat-bg);
width: 100%;
color: var(--text-theme-color);
overflow-x: hidden;
.task-list-inner {
.el-tabs {
--el-tabs-header-height: 55px;
}
.el-tabs__item {
color: #fff;
font-size: 18px;
}
.title-tabs .el-tabs__item.is-active {
color: #47fff1;
font-size: 18px;
}
.title-tabs .el-tabs__active-bar {
background-color: #47fff1;
}
.el-textarea {
// --el-input-focus-border-color: #47FFF1;
}
.el-textarea__inner {
background: transparent;
color: #fff;
}
.el-input__wrapper {
background: transparent;
padding: 5px;
}
.text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px;
}
.param-line.pt {
padding-top: 5px;
padding-bottom: 5px;
}
.form-item-inner {
display: flex;
align-items: center;
.el-icon {
margin-left: 10px;
}
}
.el-form-item__label {
color: var(--text-theme-color);
}
// 图片上传样式
.img-inline {
display: flex;
.img-uploader {
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 120px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
&:hover {
border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 120px;
text-align: center;
}
}
}
.img-list-box {
display: flex;
.img-item {
width: 120px;
position: relative;
margin-right: 10px;
.el-image {
width: 120px;
height: 120px;
border-radius: 5px;
}
.el-button {
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
}
}
}
}
.el-row.text-info {
width: 100%;
padding: 10px 0;
.el-tag {
margin-right: 10px;
}
}
// 提交按钮
.submit-btn {
display: flex;
margin: 20px 0;
.el-button {
width: 200px;
}
}
// 任务列表
@import 'waterfall-list.scss';
}
.no-more-data {
text-align: center;
padding: 30px;
}
}
}
@import 'sd-task-dialog.scss';
.mj-list-item-prompt {
.el-icon {
margin-left: 10px;
cursor: pointer;
position: relative;
top: 2px;
}
}
}

128
web/src/assets/css/images-wall.scss Normal file
View File

@@ -0,0 +1,128 @@
@keyframes expandUp {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
.page-images-wall {
display: flex;
// background-color: #282c34;
.inner {
width: 100%;
color: var(--text-theme-color);
overflow: hidden;
.header {
display: flex;
padding: 0 40px;
h2 {
width: 300px;
}
.settings {
width: 100%;
display: flex;
justify-content: right;
.el-radio-group {
font-size: 16px;
.el-radio {
color: var(--text-theme-color);
}
}
}
}
.waterfall {
position: relative;
margin: 0 auto;
overflow-y: auto;
overflow-x: hidden;
.waterfall-over-message {
display: none;
}
.list-item {
display: flex;
.image {
overflow: hidden;
.el-image {
width: 100%;
transition: transform 0.3s;
cursor: pointer;
}
}
.opt {
display: none;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
color: var(--text-theme-color);
padding: 8px 10px;
line-height: 1.2;
border-top-right-radius: 10px;
background-color: rgba(10, 10, 10, 0.7);
span {
word-break: break-all;
}
.iconfont {
}
.el-icon, .iconfont {
top: 2px;
cursor: pointer;
color: #fff !important;
border: 1px solid #fff !important;
border-radius: 5px;
padding: 2px;
font-size: 16px;
margin-right: 10px;
&:hover {
background-color: #444444;
}
}
}
&:hover {
.opt {
display: block;
animation: expandUp 0.3s ease-in-out forwards;
transform-origin: bottom center;
transform: scaleY(0); /* 初始状态，元素高度为0 */
}
.image {
.el-image {
transform: scale(1.2); /* 放大图像到1.2倍大小 */
}
}
}
}
}
.footer {
display: flex;
padding: 20px;
align-items: center;
justify-content: center;
.iconfont {
margin-left: 6px;
}
}
}
@use "sd-task-dialog.scss" as *;
}

134
web/src/assets/css/images-wall.styl
View File

@@ -1,134 +0,0 @@
@keyframes expandUp {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
.page-images-wall {
display: flex;
// background-color: #282c34;
.inner {
width 100%
color var(--text-theme-color);
overflow hidden
.header {
display flex
padding 0 40px
h2 {
width 300px
}
.settings {
width 100%
display flex
justify-content right
.el-radio-group {
font-size 16px
.el-radio {
color var(--text-theme-color);
}
}
}
}
.waterfall {
position: relative;
margin: 0 auto;
overflow-y auto
overflow-x hidden
.waterfall-over-message {
display none
}
.list-item {
display flex
.image {
overflow hidden
.el-image {
width 100%
transition: transform 0.3s;
cursor pointer
}
}
.opt {
display none
position absolute
width 100%
bottom 0
left 0
color var(--text-theme-color);
padding 8px 10px
line-height 1.2
border-top-right-radius 10px
background-color rgba(10, 10, 10, 0.7)
span {
word-break break-all
}
.iconfont{
}
.el-icon, .iconfont {
top 2px
cursor pointer
color: #fff !important;
border 1px solid #fff !important;
border-radius 5px
padding 2px
font-size 16px;
margin-right 10px
&:hover {
background-color #444444
}
}
}
&:hover {
.opt {
display block
animation: expandUp 0.3s ease-in-out forwards;
transform-origin: bottom center;
transform: scaleY(0); /* 初始状态，元素高度为0 */
}
.image {
.el-image {
transform: scale(1.2); /* 放大图像到1.2倍大小 */
}
}
}
}
}
.footer {
display flex
padding 20px
align-items center
justify-content center
.iconfont {
margin-left 6px
}
}
}
@import "sd-task-dialog.styl"
}

207
web/src/assets/css/index.scss Normal file
View File

@@ -0,0 +1,207 @@
.index-page {
margin: 0;
overflow: hidden;
color: var(--text-color);
display: flex;
align-items: center;
background: var(--theme-bg) !important;
flex-flow: column;
height: 100vh;
.color-bg {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.image-bg {
filter: blur(8px);
background-size: cover;
background-position: center;
}
.shadow {
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 3px;
&:hover {
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px;
}
}
.menu-box {
width: 100%;
display: flex;
height: 80px;
align-items: center;
.el-menu {
padding: 0 30px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
.menu-item {
display: flex;
// padding: 20px 0;
height: 40px;
align-items: center;
color: var(--text-color);
.iconfont {
color: var(--text-color);
font-size: 28px;
}
.title {
color: var(--text-color);
font-size: 24px;
padding: 10px 10px 0 10px;
font-weight: 700;
}
.logo {
height: 60px;
border-radius: 50%;
background: #fff;
border: 2px solid #754ff6;
}
.el-button {
margin-left: 10px;
span {
margin-left: 5px;
}
}
}
}
}
.content {
text-align: center;
position: relative;
display: flex;
flex-flow: column;
align-items: center;
h1 {
font-size: 5rem;
margin-bottom: 1rem;
}
p {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.navs {
display: flex;
max-width: 900px;
padding: 20px;
.el-space--horizontal {
justify-content: center;
}
.nav-item {
width: 200px;
.el-button {
width: 100%;
padding: 25px 20px;
font-size: 1.3rem;
transition: all 0.3s ease;
.iconfont {
font-size: 24px;
margin-right: 10px;
position: relative;
top: -2px;
}
}
}
.nav-item-box {
width: 100%;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
aspect-ratio: 1.1028 / 1;
background: var(--card-bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 160px;
// min-height: 190px;
i {
display: inline-block;
min-width: 48px;
width: 48px;
height: 48px;
font-size: 38px;
border-radius: 24px;
color: var(--normal-color);
}
&:hover {
box-shadow: 0 4px 14px 0 rgba(17, 13, 83, 0.18);
transform: translateY(-8px);
}
}
}
}
.footer {
.el-link__inner {
color: #ffffff;
}
}
}
.cursor-ani {
position: relative;
}
.cursor-ani::after {
content: '';
position: absolute;
width: 1px;
height: 28px;
background: #333;
transform: translateX(3px) translateY(3px);
animation: cursor-blinks 0.8s infinite forwards;
}
@keyframes cursor-blinks {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.cursor-ani {
display: inline-block;
min-height: 34px;
font-size: 1.5em;
}
.msg-text span {
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%;
}
}

211
web/src/assets/css/index.styl
View File

@@ -1,211 +0,0 @@
.index-page {
margin: 0
overflow hidden
color var(--text-color)
display flex
align-items center
background: var(--theme-bg) !important
flex-flow column
height: 100vh
.color-bg {
position absolute
top 0
left 0
width 100vw
height 100vh
}
.image-bg {
filter: blur(8px);
background-size: cover;
background-position: center;
}
.shadow {
box-shadow rgba(0, 0, 0, 0.3) 0px 0px 3px
&:hover {
box-shadow rgba(0, 0, 0, 0.3) 0px 0px 8px
}
}
.menu-box {
width 100%
display flex
height 80px
align-items center
.el-menu {
padding 0 30px
width 100%
display flex
justify-content space-between
align-items center
background none
border none
.menu-item {
display flex
// padding 20px 0
height 40px
align-items center
color var(--text-color);
.iconfont{
color var(--text-color);
font-size: 28px;
}
.title {
color var(--text-color);
font-size: 24px;
padding 10px 10px 0 10px
font-weight: 700;
}
.logo {
height 60px
border-radius 50%
background: #fff
border: 2px solid #754ff6
}
.el-button {
margin-left 10px
span {
margin-left 5px
}
}
}
}
}
.content {
text-align: center;
position relative
display flex
flex-flow: column;
align-items: center;
h1 {
font-size: 5rem;
margin-bottom: 1rem;
}
p {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.navs {
display flex
max-width 900px
padding 20px
.el-space--horizontal {
justify-content center
}
.nav-item {
width 200px
.el-button {
width 100%
padding: 25px 20px;
font-size: 1.3rem;
transition: all 0.3s ease;
.iconfont {
font-size 24px
margin-right 10px
position relative
top -2px
}
}
}
.nav-item-box{
width: 100%;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.645,0.045,0.355,1);
aspect-ratio: 1.1028 / 1;
background: var( --card-bg)
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 160px
// min-height: 190px;
i{
display: inline-block
min-width: 48px;
width: 48px;
height: 48px;
font-size: 38px
border-radius: 24px;
color: var(--normal-color)
}
&:hover{
box-shadow: 0 4px 14px 0 rgba(17, 13, 83, .18);
transform: translateY(-8px);}
}
}
}
.footer {
.el-link__inner {
color #ffffff
}
}
}
.cursor-ani {
position: relative;
}
.cursor-ani::after {
content: '';
position: absolute;
width: 1px;
height: 28px;
background: #333;
transform: translateX(3px) translateY(3px);
animation: cursor-blinks 0.8s infinite forwards;
}
@keyframes cursor-blinks {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.cursor-ani {
display: inline-block;
min-height: 34px;
font-size: 1.5em;
}
.msg-text span {
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%;
}
}

10
web/src/assets/css/jimeng.styl → web/src/assets/css/jimeng.scss
View File

@@ -11,7 +11,7 @@
padding: 20px;
border-radius: 12px;
background: var(--card-bg);
box-shadow: var(--card-shadow, 0 8px 24px rgba(0,0,0,0.12));
box-shadow: var(--card-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
color: var(--text-theme-color);
font-size: 14px;
overflow: auto;
@@ -81,7 +81,7 @@
color: var(--primary-text-on-primary-dark, #fff);
}
transform: translateY(-2px);
box-shadow: var(--primary-shadow, 0 4px 12px rgba(88,101,242,0.3));
box-shadow: var(--primary-shadow, 0 4px 12px rgba(88, 101, 242, 0.3));
}
.category-icon {
@@ -233,11 +233,11 @@
flex-direction: column;
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,0.1));
box-shadow: var(--card-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
overflow: hidden;
transition: box-shadow 0.2s;
&:hover {
box-shadow: 0 4px 24px rgba(88,101,242,0.12);
box-shadow: 0 4px 24px rgba(88, 101, 242, 0.12);
}
.task-left {
width: 100%;
@@ -346,4 +346,4 @@
max-height: 220px;
}
}
}
}

57
web/src/assets/css/login.scss Normal file
View File

@@ -0,0 +1,57 @@
.loginPage {
background: var(--card-bg) !important;
background-color: var(---card-bg) !important;
.form-title {
color: var(--text-theme-color);
}
}
.left {
width: 50%;
.login-box {
width: 410px;
margin: 0 auto;
min-height: calc(100vh - 48px);
}
.wechatLog {
width: 410px;
height: 50px;
line-height: 50px;
text-align: center;
background: var(--sign-bg);
a {
color: var(--text-theme-color);
}
font-size: 14px;
margin-bottom: 26px;
border-radius: 16px;
.icon-wechat {
color: #0bc15f;
margin-right: 9px;
font-size: 20px;
}
}
.text-color-primary {
cursor: pointer;
}
}
.login-btn {
width: 100%;
height: 40px;
border-radius: 16px;
}
.code-input {
width: 306px;
margin-right: 9px;
}
:deep(.el-tabs__item.is-active), :deep(.el-tabs__item:hover) {
color: var(--common-text-color) !important;
}
:deep(.el-tabs__item) {
color: var(--text-theme-color);
}

62
web/src/assets/css/login.styl
View File

@@ -1,62 +0,0 @@
.loginPage{
background: var(--card-bg) !important
background-color: var(---card-bg) !important
.form-title{
color:var( --text-theme-color)
}
}
.left{
width: 50%;
.login-box{
width: 410px;
margin: 0 auto;
min-height: calc(100vh - 48px);
}
.wechatLog{
width: 410px;
height: 50px;
line-height: 50px;
text-align: center
background: var( --sign-bg)
a{
color: var(--text-theme-color)
}
font-size: 14px;
margin-bottom: 26px
border-radius: 16px;
.icon-wechat{
color: #0bc15f
margin-right: 9px
font-size: 20px;
}
}
.text-color-primary{
cursor :pointer
}
}
.login-btn {
width :100%
height: 40px;
border-radius: 16px;
}
.code-input{
width: 306px;
margin-right: 9px;
}
:deep(.el-tabs__item.is-active), :deep(.el-tabs__item:hover) {
color: var(--common-text-color) !important
}
:deep(.el-tabs__item) {
color: var(--text-theme-color)
}

409
web/src/assets/css/main.styl → web/src/assets/css/main.scss
View File

@@ -1,206 +1,203 @@
//* {
// margin: 0;
// padding: 0;
//}
html,
body,
#app,
.wrapper {
width: 100%;
height: 100%;
}
body {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.admin-home {
overflow hidden
position relative
height 100vh
a {
text-decoration: none
}
.content-box {
position: absolute;
left: 250px;
right: 0;
top: 0;
bottom: 0;
padding-bottom: 30px;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
background: #f0f0f0;
::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
::-webkit-scrollbar-thumb {
background-color: #666666;
border-radius 8px
}
::-webkit-scrollbar-thumb:hover {
background-color: #999999;
}
.content {
width: auto;
overflow-y: scroll;
box-sizing: border-box;
.container {
padding: 15px 20px 30px 20px;
background: #ffffff;
margin-bottom 20px
max-width 100%
}
.crumbs {
margin: 10px 0;
}
.el-table th {
background-color: #f5f7fa;
}
.pagination {
margin: 20px 0;
display: flex;
justify-content: center;
width: 100%;
}
.plugins-tips {
padding: 20px 10px;
margin-bottom: 20px;
}
.el-button + .el-tooltip {
margin-left: 10px;
}
.el-table tr:hover {
background: #f6faff;
}
.mgb20 {
margin-bottom: 20px;
}
.move-enter-active,
.move-leave-active {
transition: opacity .1s ease;
}
.move-enter-from,
.move-leave-to {
opacity: 0;
}
/*BaseForm*/
.form-box {
width: 600px;
}
.form-box .line {
text-align: center;
}
.el-time-panel__content::after,
.el-time-panel__content::before {
margin-top: -7px;
}
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
padding-bottom: 0;
}
[class*=" el-icon-"], [class^=el-icon-] {
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-sub-menu [class^=el-icon-] {
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px;
}
[hidden] {
display: none !important;
}
}
.dark {
background: var(--el-bg-color);
.container {
background: var(--el-bg-color);
}
.crumbs {
margin: 10px 0;
}
.el-table th {
background-color: var(--el-fill-color-darker);
}
}
}
.content-collapse {
left: 65px;
}
.el-table {
width: 100%;
.el-table__body-header {
height 40px
}
}
}
.w-100 {
width 100%
}
.d-flex {
display flex !important
}
.justify-center {
justify-content center
}
.justify-between {
justify-content space-between
}
.justify-end {
justify-content flex-end
}
.align-center {
align-items center
}
//* {
// margin: 0;
// padding: 0;
//}
html,
body,
#app,
.wrapper {
width: 100%;
height: 100%;
}
body {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.admin-home {
overflow: hidden;
position: relative;
height: 100vh;
a {
text-decoration: none;
}
.content-box {
position: absolute;
left: 250px;
right: 0;
top: 0;
bottom: 0;
padding-bottom: 30px;
-webkit-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
background: #f0f0f0;
::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
::-webkit-scrollbar-thumb {
background-color: #666666;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #999999;
}
.content {
width: auto;
overflow-y: scroll;
box-sizing: border-box;
.container {
padding: 15px 20px 30px 20px;
background: #ffffff;
margin-bottom: 20px;
max-width: 100%;
}
.crumbs {
margin: 10px 0;
}
.el-table th {
background-color: #f5f7fa;
}
.pagination {
margin: 20px 0;
display: flex;
justify-content: center;
width: 100%;
}
.plugins-tips {
padding: 20px 10px;
margin-bottom: 20px;
}
.el-button + .el-tooltip {
margin-left: 10px;
}
.el-table tr:hover {
background: #f6faff;
}
.mgb20 {
margin-bottom: 20px;
}
.move-enter-active,
.move-leave-active {
transition: opacity 0.1s ease;
}
.move-enter-from,
.move-leave-to {
opacity: 0;
}
/*BaseForm*/
.form-box {
width: 600px;
}
.form-box .line {
text-align: center;
}
.el-time-panel__content::after,
.el-time-panel__content::before {
margin-top: -7px;
}
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
padding-bottom: 0;
}
[class*=" el-icon-"], [class^=el-icon-] {
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-sub-menu [class^=el-icon-] {
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px;
}
[hidden] {
display: none !important;
}
}
.dark {
background: var(--el-bg-color);
.container {
background: var(--el-bg-color);
}
.crumbs {
margin: 10px 0;
}
.el-table th {
background-color: var(--el-fill-color-darker);
}
}
}
.content-collapse {
left: 65px;
}
.el-table {
width: 100%;
.el-table__body-header {
height: 40px;
}
}
}
.w-100 {
width: 100%;
}
.d-flex {
display: flex !important;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-end {
justify-content: flex-end;
}
.align-center {
align-items: center;
}

149
web/src/assets/css/mark-map.scss Normal file
View File

@@ -0,0 +1,149 @@
.page-mark-map {
// background-color: #282c34;
height: 100%;
.inner {
display: flex;
.mark-map-box {
margin: 10px;
// background-color: #262626;
// border: 1px solid #454545;
min-width: 300px;
max-width: 300px;
padding: 10px;
border-radius: 10px;
color: var(--text-theme-color);
font-size: 14px;
h2 {
font-weight: bold;
font-size: 20px;
text-align: center;
color: var(--theme-textcolor-normal);
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.mark-map-params {
margin-top: 10px;
overflow: auto;
.param-line {
padding: 10px;
.el-button {
width: 100%;
span {
color: #fff;
}
}
}
.text-info {
padding: 10px;
.el-tag {
margin-right: 10px;
}
}
}
}
.el-form {
.el-form-item__label {
color: var(--text-theme-color);
}
}
.chat-box {
width: 100%;
background: var(--chat-bg);
.top-bar {
display: flex;
justify-content: right;
align-items: center;
padding: 10px 20px 10px 10px;
}
.markdown {
color: var(--text-theme-color);
display: flex;
justify-content: center;
align-items: center;
h1 {
color: var(--theme-textcolor-normal);
}
h2 {
color: #ffcc00;
}
ul {
list-style-type: disc;
margin-left: 20px;
li {
line-height: 1.5;
}
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
}
.body {
display: flex;
justify-content: center;
align-items: center;
position: relative;
.markmap {
width: 100%;
color: var(--text-theme-color);
font-size: 12px;
.markmap-foreign {
// height: 30px;
}
}
#toolbar {
position: absolute;
bottom: 10px;
right: 20px;
display: flex;
.mm-toolbar {
line-height: 36px;
display: flex;
flex-flow: row;
margin-left: 10px;
.mm-toolbar-brand {
display: none;
}
.mm-toolbar-item {
cursor: pointer;
color: var(--text-fb);
}
}
}
}
}
}
}

156
web/src/assets/css/mark-map.styl
View File

@@ -1,156 +0,0 @@
.page-mark-map {
// background-color: #282c34;
height 100%
.inner {
display: flex;
.mark-map-box {
margin 10px
// background-color #262626
// border 1px solid #454545
min-width 300px
max-width 300px
padding 10px
border-radius 10px
color var(--text-theme-color);
font-size 14px
h2 {
font-weight: bold;
font-size 20px
text-align center
color var( --theme-textcolor-normal)
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.mark-map-params {
margin-top 10px
overflow auto
.param-line {
padding 10px
.el-button {
width 100%
span {
color #fff
}
}
}
.text-info {
padding 10px
.el-tag {
margin-right 10px
}
}
}
}
.el-form {
.el-form-item__label {
color var(--text-theme-color)
}
}
.chat-box {
width 100%
background: var(--chat-bg);
.top-bar {
display flex
justify-content right
align-items center
padding 10px 20px 10px 10px
}
.markdown {
color var(--text-theme-color)
display flex
justify-content center
align-items center
h1 {
color: var( --theme-textcolor-normal);
}
h2 {
color: #ffcc00;
}
ul {
list-style-type: disc;
margin-left: 20px;
li {
line-height 1.5
}
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
}
.body {
display flex
justify-content center
align-items center
position relative
.markmap {
width 100%
color var(--text-theme-color)
font-size 12px
.markmap-foreign {
//height 30px
}
}
#toolbar {
position: absolute
bottom: 10px
right: 20px
display: flex;
.mm-toolbar {
line-height: 36px;
display flex
flex-flow row
margin-left: 10px;
.mm-toolbar-brand {
display none
}
.mm-toolbar-item {
cursor pointer
color var( --text-fb)
}
}
}
}
}
}
}

237
web/src/assets/css/member.scss Normal file
View File

@@ -0,0 +1,237 @@
.member {
height: 100%;
.title {
text-align: center;
background-color: #25272d;
font-size: 24px;
color: var(--text-theme-color);
padding: 10px;
border-bottom: 1px solid #3c3c3c;
}
.inner {
color: var(--text-theme-color);
padding: 15px 0 15px 15px;
overflow-x: hidden;
overflow-y: visible;
display: flex;
flex-flow: row;
.profile-card {
max-width: 300px;
border-radius: 18px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
padding: 24px 16px;
background: var(--panel-bg);
position: relative;
z-index: 1;
margin-bottom: 24px;
}
.profile-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 18px;
color: #2d8cf0;
letter-spacing: 2px;
text-align: center;
}
.profile-btn {
width: 100%;
margin-bottom: 12px;
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 8px;
background: linear-gradient(90deg, #6dd5ed 0%, #2193b0 100%);
color: #fff;
transition: all 0.3s;
i {
margin-right: 8px;
font-size: 20px;
}
&:hover {
box-shadow: 0 2px 12px #2193b0aa;
transform: translateY(-2px) scale(1.03);
background: linear-gradient(90deg, #2193b0 0%, #6dd5ed 100%);
}
}
.profile-btn.email {
background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%);
}
.profile-btn.mobile {
background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
}
.profile-btn.third {
background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);
}
.profile-btn.password {
background: linear-gradient(90deg, #1d4350 0%, #a43931 100%);
}
.profile-btn.redeem {
background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%);
}
.profile-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="%23e0eaff"/><circle cx="300" cy="60" r="40" fill="%23f0f7ff"/><circle cx="320" cy="180" r="30" fill="%23e0eaff"/></svg>') no-repeat center/cover;
opacity: 0.08;
pointer-events: none;
}
.product-box {
padding: 0 20px;
width: 100%;
.info {
.el-alert__description {
font-size: 14px !important;
margin: 0;
}
padding: 0 0 20px 0;
}
.list-box {
.product-item {
// border: 1px solid #666666;
background-color: var(--chat-bg);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease; /* 添加过渡效果 */
margin-bottom: 20px;
.image-container {
display: flex;
justify-content: center;
.el-image {
padding: 6px;
.el-image__inner {
border-radius: 10px;
}
}
}
.product-title {
display: flex;
padding: 10px;
.name {
width: 100%;
text-align: center;
font-size: 16px;
font-weight: bold;
color: var(--el-color-primary);
}
}
.product-info {
padding: 10px 20px;
font-size: 14px;
color: #999999;
.info-line {
display: flex;
width: 100%;
padding: 5px 0;
.label {
display: flex;
width: 100%;
}
.price, .expire, calls {
display: flex;
width: 90px;
justify-content: right;
}
.discount {
color: #f56c6c;
font-size: 20px;
}
.expire {
color: #409eff;
}
.power {
color: #f2cb51;
}
}
.pay-way {
padding: 10px 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
.el-button {
margin: 10px 5px 0 5px;
height: 32px;
filter: none;
.icon-alipay, .icon-wechat-pay {
color: #ffffff;
}
.icon-qq {
color: #15a6e8;
font-size: 24px;
}
.icon-jd-pay {
color: var(--text-theme-color);
font-size: 24px;
}
.icon-douyin {
color: #0a0a0a;
font-size: 22px;
}
.icon-paypal {
font-size: 14px;
color: #009cde;
}
}
}
}
&:hover {
// box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */
box-shadow: 0 0 10px var(--shadow-color);
background-color: var(--hover-deep-color);
}
}
}
.headline {
padding: 0 20px 20px 0;
}
.user-order {
padding: 0 20px 20px 0;
}
}
}
}
.pay-dialog {
.product-info {
text-align: center;
color: #333333;
font-size: 16px;
.price {
color: #f56c6c;
font-weight: 700;
}
}
}

239
web/src/assets/css/member.styl
View File

@@ -1,239 +0,0 @@
.member {
height 100%
.title {
text-align center
background-color #25272d
font-size 24px
color var(--text-theme-color)
padding 10px
border-bottom 1px solid #3c3c3c
}
.inner {
color var(--text-theme-color)
padding 15px 0 15px 15px
overflow-x hidden
overflow-y visible
display flex
flex-flow row
.profile-card {
max-width 300px
border-radius 18px
box-shadow 0 4px 8px rgba(0,0,0,0.08)
padding 24px 16px
background var(--panel-bg)
position relative
z-index 1
margin-bottom 24px
}
.profile-title {
font-size 18px
font-weight bold
margin-bottom 18px
color #2d8cf0
letter-spacing 2px
text-align center
}
.profile-btn {
width 100%
margin-bottom 12px
font-size 16px
font-weight 500
display flex
align-items center
justify-content center
border none
border-radius 8px
background linear-gradient(90deg, #6dd5ed 0%, #2193b0 100%)
color #fff
transition all 0.3s
i {
margin-right 8px
font-size 20px
}
&:hover {
box-shadow 0 2px 12px #2193b0aa
transform translateY(-2px) scale(1.03)
background linear-gradient(90deg, #2193b0 0%, #6dd5ed 100%)
}
}
.profile-btn.email {
background linear-gradient(90deg, #f7971e 0%, #ffd200 100%)
}
.profile-btn.mobile {
background linear-gradient(90deg, #43cea2 0%, #185a9d 100%)
}
.profile-btn.third {
background linear-gradient(90deg, #ff512f 0%, #dd2476 100%)
}
.profile-btn.password {
background linear-gradient(90deg, #1d4350 0%, #a43931 100%)
}
.profile-btn.redeem {
background linear-gradient(90deg, #00c6ff 0%, #0072ff 100%)
}
.profile-bg {
position absolute
left 0
top 0
width 100%
height 100%
z-index 0
background url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="%23e0eaff"/><circle cx="300" cy="60" r="40" fill="%23f0f7ff"/><circle cx="320" cy="180" r="30" fill="%23e0eaff"/></svg>') no-repeat center/cover
opacity 0.08
pointer-events none
}
.product-box {
padding 0 20px
width 100%
.info {
.el-alert__description {
font-size 14px !important
margin 0
}
padding 0 0 20px 0
}
.list-box {
.product-item {
// border 1px solid #666666
background-color var(--chat-bg)
border-radius 6px
overflow hidden
cursor pointer
transition: all 0.3s ease; /* 添加过渡效果 */
margin-bottom 20px
.image-container {
display flex
justify-content center
.el-image {
padding 6px
.el-image__inner {
border-radius 10px
}
}
}
.product-title {
display flex
padding 10px
.name {
width 100%
text-align center
font-size 16px
font-weight bold
color var( --el-color-primary)
}
}
.product-info {
padding 10px 20px
font-size 14px
color #999999
.info-line {
display flex
width 100%
padding 5px 0
.label {
display flex
width 100%
}
.price, .expire, calls {
display flex
width 90px
justify-content right
}
.discount {
color #f56c6c
font-size 20px
}
.expire {
color #409eff
}
.power {
color #F2CB51
}
}
.pay-way {
padding 10px 0
display flex
justify-content: center
flex-wrap wrap
.el-button {
margin 10px 5px 0 5px
height 32px
filter: none;
.icon-alipay,.icon-wechat-pay {
color #ffffff
}
.icon-qq {
color #15A6E8
font-size 24px
}
.icon-jd-pay {
color var(--text-theme-color)
font-size 24px
}
.icon-douyin {
color #0a0a0a
font-size 22px
}
.icon-paypal {
font-size 14px
color #009CDE
}
}
}
}
&:hover {
// box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */
box-shadow: 0 0 10px var(--shadow-color);
background-color: var(--hover-deep-color)
}
}
}
.headline {
padding 0 20px 20px 0
}
.user-order {
padding 0 20px 20px 0
}
}
}
}
.pay-dialog {
.product-info {
text-align center
color #333333
font-size 16px
.price {
color #f56c6c
font-weight 700
}
}
}

36
web/src/assets/css/mobile/chat-list.scss Normal file
View File

@@ -0,0 +1,36 @@
.mobile-chat-list {
.content {
padding-top: 46px;
padding-bottom: 60px;
.van-list {
.van-cell__value {
.chat-list-item {
display: flex;
font-size: 14px;
.van-image {
min-width: 32px;
width: 32px;
height: 32px;
}
.van-ellipsis {
margin-top: 5px;
margin-left: 10px;
}
}
}
}
}
.van-nav-bar {
.van-nav-bar__right {
.van-icon {
font-size: 20px;
}
}
}
}
@use "model-select.scss" as *;

37
web/src/assets/css/mobile/chat-list.styl
View File

@@ -1,37 +0,0 @@
.mobile-chat-list {
.content {
padding-top 46px
padding-bottom 60px
.van-list {
.van-cell__value {
.chat-list-item {
display flex
font-size 14px
.van-image {
min-width 32px
width 32px
height 32px
}
.van-ellipsis {
margin-top 5px;
margin-left 10px;
}
}
}
}
}
.van-nav-bar {
.van-nav-bar__right {
.van-icon {
font-size 20px;
}
}
}
}
@import "model-select.styl"

178
web/src/assets/css/mobile/chat-session.styl → web/src/assets/css/mobile/chat-session.scss
View File

@@ -1,90 +1,88 @@
.mobile-chat {
.van-nav-bar {
position static
.setting {
font-size 18px
}
}
.chat-list-wrapper {
padding 10px 0 10px 0
background var(--van-background);
overflow hidden
.message-list-box {
overflow auto
.van-cell {
background none
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
}
}
.chat-box-wrapper {
.van-sticky {
.van-cell-group--inset {
margin 0
.van-cell {
padding 10px
.icon-box {
.van-icon {
font-size 24px
margin-left 10px
}
}
.button-voice {
padding 0 2px
.el-icon {
font-size 24px
}
height 30px
}
}
}
}
}
.van-nav-bar__title {
.van-dropdown-menu__title {
margin-right 10px
}
.van-cell__title {
text-align left
}
}
.van-nav-bar__right {
.van-icon {
font-size 20px
}
}
}
.van-overlay {
.mic-wrapper {
display flex
height 100vh
justify-content center
align-items center
flex-flow column
}
}
// .van-theme-dark {
// .mobile-chat {
// .chat-list-wrapper {
// background #232425;
// }
// }
// }
@import "model-select.styl"
.mobile-chat {
.van-nav-bar {
position: static;
.setting {
font-size: 18px;
}
}
.chat-list-wrapper {
padding: 10px 0 10px 0;
background: var(--van-background);
overflow: hidden;
.message-list-box {
overflow: auto;
.van-cell {
background: none;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
}
}
.chat-box-wrapper {
.van-sticky {
.van-cell-group--inset {
margin: 0;
.van-cell {
padding: 10px;
.icon-box {
.van-icon {
font-size: 24px;
margin-left: 10px;
}
}
.button-voice {
padding: 0 2px;
.el-icon {
font-size: 24px;
}
height: 30px;
}
}
}
}
}
.van-nav-bar__title {
.van-dropdown-menu__title {
margin-right: 10px;
}
.van-cell__title {
text-align: left;
}
}
.van-nav-bar__right {
.van-icon {
font-size: 20px;
}
}
}
.van-overlay {
.mic-wrapper {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
flex-flow: column;
}
}
// .van-theme-dark {
// .mobile-chat {
// .chat-list-wrapper {
// background: #232425;
// }
// }
// }
@use "model-select.scss" as *;

216
web/src/assets/css/mobile/image-mj.scss Normal file
View File

@@ -0,0 +1,216 @@
.mobile-mj {
.text-line {
padding: 6px;
font-size: 14px;
.van-row {
.van-col {
.rate {
display: flex;
justify-content: center;
background-color: var(--van-background-3);
padding: 5px 10px;
margin: 5px 0;
border-radius: 5px;
flex-flow: column;
.icon {
text-align: center;
.van-image {
max-width: 20px;
}
}
.text {
text-align: center;
color: var(--van-text-color);
}
}
.model {
display: flex;
justify-content: center;
background-color: var(--van-background-3);
padding: 6px;
margin: 5px 0;
border-radius: 5px;
flex-flow: column;
.icon {
text-align: center;
.van-image {
width: 100%;
height: 50px;
}
}
.text {
text-align: center;
color: var(--van-text-color);
}
}
.active {
background-color: var(--van-text-color-3);
}
}
}
.van-button {
position: relative;
.van-tag {
position: absolute;
right: 20px;
}
}
.align-right {
display: flex;
justify-content: right;
}
}
color: var(--van-text-color);
.pt-6 {
padding: 15px 10px;
}
.tip-text {
padding: 10px;
line-height: 1.5;
color: #c1c1c1;
}
.running-job-list {
.van-grid {
.van-grid-item {
.van-grid-item__content {
padding: 0;
position: relative;
.van-image, .task-in-queue {
min-height: 100px;
}
.progress {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(50, 50, 50, 0.5);
position: absolute;
left: 0;
top: 0;
.van-circle__text {
color: #ffffff;
}
}
// end progress
.task-in-queue {
display: flex;
flex-flow: column;
justify-content: center;
color: #c1c1c1;
.icon {
text-align: center;
.iconfont {
font-size: 24px;
}
}
.text {
font-size: 14px;
margin-top: 5px;
}
}
}
}
}
}
// end running jobs
.finish-job-list {
.van-grid {
.van-grid-item {
.van-grid-item__content {
padding: 0;
.job-item {
overflow: hidden;
border-radius: 6px;
position: relative;
height: 100%;
width: 100%;
.opt {
.opt-btn {
padding: 2px 0;
text-align: center;
border-radius: 5px;
margin: 3px 0;
display: block;
cursor: pointer;
background-color: #4e5058;
color: #ffffff;
font-size: 14px;
width: 100%;
}
}
.van-image {
width: 100%;
height: 200px;
}
.upscale {
height: 260px;
width: 100%;
}
.remove {
position: absolute;
right: 5px;
top: 5px;
.el-button {
margin-left: 5px;
height: auto;
padding: 5px;
}
}
}
.failed {
display: flex;
flex-flow: column;
justify-content: center;
.title {
margin-bottom: 20px;
text-align: center;
color: #ee0a24;
font-size: 18px;
}
.opt {
display: flex;
justify-content: center;
.van-button {
margin: 0 5px;
}
}
}
}
}
}
}
}

217
web/src/assets/css/mobile/image-mj.styl
View File

@@ -1,217 +0,0 @@
.mobile-mj {
.text-line {
padding 6px
font-size 14px
.van-row {
.van-col {
.rate {
display: flex;
justify-content center
background-color var(--van-background-3)
padding 5px 10px
margin 5px 0
border-radius 5px
flex-flow column
.icon {
text-align center
.van-image {
max-width 20px
}
}
.text {
text-align center
color var(--van-text-color)
}
}
.model {
display: flex;
justify-content center
background-color var(--van-background-3)
padding 6px
margin 5px 0
border-radius 5px
flex-flow column
.icon {
text-align center
.van-image {
width 100%
height 50px
}
}
.text {
text-align center
color var(--van-text-color)
}
}
.active {
background-color var(--van-text-color-3)
}
}
}
.van-button {
position relative
.van-tag {
position absolute
right 20px
}
}
.align-right {
display flex
justify-content right
}
}
color var(--van-text-color)
.pt-6 {
padding 15px 10px
}
.tip-text {
padding 10px
line-height 1.5
color #c1c1c1
}
.running-job-list {
.van-grid {
.van-grid-item {
.van-grid-item__content {
padding 0
position relative
.van-image, .task-in-queue {
min-height 100px
}
.progress {
display flex
justify-content center
align-items center
width 100%
height 100%
background rgba(50, 50, 50, 0.5)
position absolute
left 0
top 0
.van-circle__text {
color #ffffff
}
}
// end progress
.task-in-queue {
display flex
flex-flow column
justify-content center
color #c1c1c1
.icon {
text-align center
.iconfont {
font-size 24px
}
}
.text {
font-size 14px
margin-top 5px
}
}
}
}
}
}
//end running jobs
.finish-job-list {
.van-grid {
.van-grid-item {
.van-grid-item__content {
padding 0
.job-item {
overflow hidden
border-radius 6px
position relative
height 100%
width 100%
.opt {
.opt-btn {
padding 2px 0
text-align center
border-radius 5px
margin 3px 0
display block
cursor pointer
background-color #4E5058
color #ffffff
font-size 14px
width 100%
}
}
.van-image {
width 100%
height 200px
}
.upscale {
height 260px
width 100%
}
.remove {
position absolute
right 5px
top 5px
.el-button {
margin-left 5px
height auto
padding 5px
}
}
}
.failed {
display flex
flex-flow column
justify-content center
.title {
margin-bottom 20px
text-align center
color #ee0a24
font-size 18px
}
.opt {
display flex
justify-content center
.van-button {
margin 0 5px
}
}
}
}
}
}
}
}

204
web/src/assets/css/mobile/image-sd.scss Normal file
View File

@@ -0,0 +1,204 @@
.mobile-sd {
.text-line {
padding: 0 6px;
font-size: 14px;
.van-row {
width: 100%;
.van-col {
.rate {
display: flex;
justify-content: center;
background-color: #f5f5f5;
padding: 5px 10px;
margin: 5px 0;
border-radius: 5px;
flex-flow: column;
.icon {
text-align: center;
.van-image {
max-width: 20px;
}
}
.text {
text-align: center;
color: #555555;
}
}
.el-input__inner {
text-align: center;
}
.model {
display: flex;
justify-content: center;
background-color: #f5f5f5;
padding: 6px;
margin: 5px 0;
border-radius: 5px;
flex-flow: column;
.icon {
text-align: center;
.van-image {
width: 100%;
height: 50px;
}
}
.text {
text-align: center;
color: #555555;
}
}
.active {
background-color: #e5e5e5;
}
}
}
.van-button {
position: relative;
.van-tag {
position: absolute;
right: 20px;
}
}
.align-right {
display: flex;
justify-content: right;
}
}
color: var(--van-text-color);
.pt-6 {
padding: 15px 10px;
}
.tip-text {
padding: 10px;
line-height: 1.5;
color: #c1c1c1;
}
.running-job-list {
.van-grid {
.van-grid-item {
.van-grid-item__content {
padding: 0;
position: relative;
.van-image, .task-in-queue {
min-height: 100px;
}
.progress {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(50, 50, 50, 0.5);
position: absolute;
left: 0;
top: 0;
.van-circle__text {
color: #ffffff;
}
}
// end progress
.task-in-queue {
display: flex;
flex-flow: column;
justify-content: center;
color: #c1c1c1;
.icon {
text-align: center;
.iconfont {
font-size: 24px;
}
}
.text {
font-size: 14px;
margin-top: 5px;
}
}
}
}
}
}
// end running jobs
.finish-job-list {
.van-grid {
.van-grid-item {
.van-grid-item__content {
padding: 0;
.job-item {
overflow: hidden;
border-radius: 6px;
position: relative;
height: 100%;
width: 100%;
.van-image {
width: 100%;
height: 200px;
}
.remove {
position: absolute;
right: 5px;
top: 5px;
.el-button {
margin-left: 5px;
height: auto;
padding: 5px;
}
}
}
.failed {
display: flex;
flex-flow: column;
justify-content: center;
height: 200px;
.title {
margin-bottom: 20px;
text-align: center;
color: #ee0a24;
font-size: 18px;
}
.opt {
display: flex;
justify-content: center;
.van-button {
margin: 0 5px;
}
}
}
}
}
}
}
}

207
web/src/assets/css/mobile/image-sd.styl
View File

@@ -1,207 +0,0 @@
.mobile-sd {
.text-line {
padding 0 6px
font-size 14px
.van-row {
width 100%
.van-col {
.rate {
display: flex;
justify-content center
background-color #f5f5f5
padding 5px 10px
margin 5px 0
border-radius 5px
flex-flow column
.icon {
text-align center
.van-image {
max-width 20px
}
}
.text {
text-align center
color #555555
}
}
.el-input__inner {
text-align center
}
.model {
display: flex;
justify-content center
background-color #f5f5f5
padding 6px
margin 5px 0
border-radius 5px
flex-flow column
.icon {
text-align center
.van-image {
width 100%
height 50px
}
}
.text {
text-align center
color #555555
}
}
.active {
background-color #e5e5e5
}
}
}
.van-button {
position relative
.van-tag {
position absolute
right 20px
}
}
.align-right {
display flex
justify-content right
}
}
color var(--van-text-color)
.pt-6 {
padding 15px 10px
}
.tip-text {
padding 10px
line-height 1.5
color #c1c1c1
}
.running-job-list {
.van-grid {
.van-grid-item {
.van-grid-item__content {
padding 0
position relative
.van-image, .task-in-queue {
min-height 100px
}
.progress {
display flex
justify-content center
align-items center
width 100%
height 100%
background rgba(50, 50, 50, 0.5)
position absolute
left 0
top 0
.van-circle__text {
color #ffffff
}
}
// end progress
.task-in-queue {
display flex
flex-flow column
justify-content center
color #c1c1c1
.icon {
text-align center
.iconfont {
font-size 24px
}
}
.text {
font-size 14px
margin-top 5px
}
}
}
}
}
}
//end running jobs
.finish-job-list {
.van-grid {
.van-grid-item {
.van-grid-item__content {
padding 0
.job-item {
overflow hidden
border-radius 6px
position relative
height 100%
width 100%
.van-image {
width 100%
height 200px
}
.remove {
position absolute
right 5px
top 5px
.el-button {
margin-left 5px
height auto
padding 5px
}
}
}
.failed {
display flex
flex-flow column
justify-content center
height 200px
.title {
margin-bottom 20px
text-align center
color #ee0a24
font-size 18px
}
.opt {
display flex
justify-content center
.van-button {
margin 0 5px
}
}
}
}
}
}
}
}

16
web/src/assets/css/mobile/model-select.scss Normal file
View File

@@ -0,0 +1,16 @@
.van-popup {
.picker-option {
display: flex;
width: 100%;
padding: 0 10px;
overflow: hidden;
height: 20px;
text-overflow: ellipsis;
.van-image {
width: 20px;
height: 20px;
margin-right: 5px;
}
}
}

16
web/src/assets/css/mobile/model-select.styl
View File

@@ -1,16 +0,0 @@
.van-popup {
.picker-option {
display flex
width 100%
padding 0 10px
overflow hidden
height 20px
text-overflow ellipsis
.van-image {
width 20px;
height 20px;
margin-right 5px
}
}
}

375
web/src/assets/css/realtime.styl → web/src/assets/css/realtime.scss
View File

@@ -1,189 +1,188 @@
.realtime-conversation {
/********************** connection ****************************/
.connection-container {
background-color: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
width 100%
.phone-container {
position: relative;
width: 200px;
height: 200px;
}
.phone {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: #00ffcc;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
mask-size: cover;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
-webkit-mask-size: cover;
animation: shake 0.5s ease-in-out infinite;
}
.signal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 2px dashed #00ffcc;
border-radius: 50%;
opacity: 0;
animation: signal 2s linear infinite;
}
.signal:nth-child(2) {
animation-delay: 0.5s;
}
.signal:nth-child(3) {
animation-delay: 1s;
}
.status-text {
color: #00ffcc;
font-size: 18px;
margin-top: 20px;
height: 1.2em;
overflow: hidden;
}
@keyframes shake {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
25% { transform: translate(-52%, -48%) rotate(-5deg); }
75% { transform: translate(-48%, -52%) rotate(5deg); }
}
@keyframes signal {
0% {
width: 60px;
height: 60px;
opacity: 1;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}
}
/*********** end of connection ************/
.conversation-container {
background: linear-gradient(to right, #2c3e50, #4a5568, #6b46c1);
display: flex;
height 100%
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 0;
width 100%
.wave-container {
padding 3rem
.wave-animation {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
.wave-ellipse {
width: 40px;
height: 40px;
background-color: white;
border-radius: 20px;
animation: wave 0.8s infinite ease-in-out;
}
.wave-ellipse:nth-child(odd) {
height: 60px;
}
.wave-ellipse:nth-child(even) {
height: 80px;
}
}
}
@keyframes wave {
0%, 100% {
transform: scaleY(0.8);
}
50% {
transform: scaleY(1.2);
}
}
.wave-ellipse:nth-child(2) {
animation-delay: 0.1s;
}
.wave-ellipse:nth-child(3) {
animation-delay: 0.2s;
}
.wave-ellipse:nth-child(4) {
animation-delay: 0.3s;
}
.wave-ellipse:nth-child(5) {
animation-delay: 0.4s;
}
.voice-indicators {
display flex
flex-flow row
justify-content: space-between;
width 100%
}
.call-controls {
display: flex;
justify-content: center;
gap: 3rem;
padding 3rem
.call-button {
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
cursor: pointer;
.iconfont {
font-size 24px
}
}
.hangup {
background-color: #e74c3c;
}
.answer {
background-color: #2ecc71;
}
.icon {
font-size: 28px;
}
}
}
.realtime-conversation {
/********************** connection ****************************/
.connection-container {
background-color: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
width: 100%;
.phone-container {
position: relative;
width: 200px;
height: 200px;
}
.phone {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: #00ffcc;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
mask-size: cover;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
-webkit-mask-size: cover;
animation: shake 0.5s ease-in-out infinite;
}
.signal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 2px dashed #00ffcc;
border-radius: 50%;
opacity: 0;
animation: signal 2s linear infinite;
}
.signal:nth-child(2) {
animation-delay: 0.5s;
}
.signal:nth-child(3) {
animation-delay: 1s;
}
.status-text {
color: #00ffcc;
font-size: 18px;
margin-top: 20px;
height: 1.2em;
overflow: hidden;
}
@keyframes shake {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
25% { transform: translate(-52%, -48%) rotate(-5deg); }
75% { transform: translate(-48%, -52%) rotate(5deg); }
}
@keyframes signal {
0% {
width: 60px;
height: 60px;
opacity: 1;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}
}
/*********** end of connection ************/
.conversation-container {
background: linear-gradient(to right, #2c3e50, #4a5568, #6b46c1);
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 0;
width: 100%;
.wave-container {
padding: 3rem;
.wave-animation {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
.wave-ellipse {
width: 40px;
height: 40px;
background-color: white;
border-radius: 20px;
animation: wave 0.8s infinite ease-in-out;
}
.wave-ellipse:nth-child(odd) {
height: 60px;
}
.wave-ellipse:nth-child(even) {
height: 80px;
}
}
}
@keyframes wave {
0%, 100% {
transform: scaleY(0.8);
}
50% {
transform: scaleY(1.2);
}
}
.wave-ellipse:nth-child(2) {
animation-delay: 0.1s;
}
.wave-ellipse:nth-child(3) {
animation-delay: 0.2s;
}
.wave-ellipse:nth-child(4) {
animation-delay: 0.3s;
}
.wave-ellipse:nth-child(5) {
animation-delay: 0.4s;
}
.voice-indicators {
display: flex;
flex-flow: row;
justify-content: space-between;
width: 100%;
}
.call-controls {
display: flex;
justify-content: center;
gap: 3rem;
padding: 3rem;
.call-button {
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
cursor: pointer;
.iconfont {
font-size: 24px;
}
}
.hangup {
background-color: #e74c3c;
}
.answer {
background-color: #2ecc71;
}
.icon {
font-size: 28px;
}
}
}
}

43
web/src/assets/css/running-job-list.scss Normal file
View File

@@ -0,0 +1,43 @@
.running-job-list {
.running-job-box {
width: 100%;
display: flex;
flex-flow: row;
.image-slot {
color: var(--theme-text-color-primary);
}
}
.job-item {
margin-right: 10px;
width: 200px;
height: 200px;
overflow: hidden;
padding: 2px;
background-color: var(--gray-btn-bg);
.job-item-inner {
position: relative;
height: 100%;
overflow: hidden;
.progress {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
span {
font-size: 20px;
color: var(--theme-text-color-primary);
}
}
}
}
}

44
web/src/assets/css/running-job-list.styl
View File

@@ -1,44 +0,0 @@
.running-job-list {
.running-job-box {
width 100%
display flex
flex-flow row
.image-slot {
color var(--theme-text-color-primary)
}
}
.job-item {
margin-right 10px
width 200px
height 200px
overflow hidden
padding 2px
background-color var( --gray-btn-bg)
.job-item-inner {
position relative
height 100%
overflow hidden
.progress {
position absolute
width 100%
height 100%
top 0
left 0
display flex
justify-content center
align-items center
span {
font-size 20px
color var(--theme-text-color-primary)
}
}
}
}
}

94
web/src/assets/css/sd-task-dialog.scss Normal file
View File

@@ -0,0 +1,94 @@
.el-overlay-dialog {
.el-dialog {
// background-color: #1a1b1e;
.el-dialog__header {
.el-dialog__title {
color: #f5f5f5;
}
}
.el-dialog__body {
padding: 0 0 0 15px !important;
display: flex;
height: 100%;
.el-row {
width: 100%;
.img-container {
display: flex;
justify-content: center;
.image-slot {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
.el-icon {
font-size: 60px;
}
}
}
.task-info {
// background-color: #25262b;
padding: 1rem 1.5rem;
.info-line {
width: 100%;
.prompt {
// background-color: #35363b;
padding: 10px;
color: #999999;
overflow: auto;
max-height: 100px;
min-height: 50px;
position: relative;
.el-icon {
position: absolute;
right: 10px;
bottom: 10px;
cursor: pointer;
}
}
.wrapper {
margin-top: 10px;
display: flex;
label {
display: flex;
width: 100px;
color: var(--text-fb);
}
.item-value {
display: flex;
width: 100%;
// background-color: #35363b;
padding: 2px 5px;
border-radius: 5px;
color: var(--text-theme-color);
}
}
}
.copy-params {
padding: 20px 0 10px 0;
.el-button {
width: 100%;
}
}
}
}
// end el-row
}
}
}

97
web/src/assets/css/sd-task-dialog.styl
View File

@@ -1,97 +0,0 @@
.el-overlay-dialog {
.el-dialog {
// background-color #1a1b1e
.el-dialog__header {
.el-dialog__title {
color #F5F5F5
}
}
.el-dialog__body {
padding 0 0 0 15px !important
display flex
height 100%
.el-row {
width 100%
.img-container {
display flex
justify-content center
.image-slot {
display flex
height 100vh
align-items center
justify-content center
.el-icon {
font-size 60px
}
}
}
.task-info {
// background-color #25262b
padding 1rem 1.5rem
.info-line {
width 100%
.prompt {
// background-color #35363b
padding 10px
color #999999
overflow auto
max-height 100px
min-height 50px
position relative
.el-icon {
position absolute
right 10px
bottom 10px
cursor pointer
}
}
.wrapper {
margin-top 10px
display flex
label {
display flex
width 100px
color :var(--text-fb)
}
.item-value {
display flex
width 100%
// background-color #35363b
padding 2px 5px
border-radius 5px
color: var(--text-theme-color);
}
}
}
.copy-params {
padding 20px 0 10px 0
.el-button {
width 100%
}
}
}
}
// end el-row
}
}
}

86
web/src/assets/css/song.scss Normal file
View File

@@ -0,0 +1,86 @@
.page-song {
display: flex;
justify-content: center;
background-color: #0e0808;
height: 100vh;
.inner {
text-align: left;
color: rgb(250 247 245);
padding: 20px;
max-width: 600px;
width: 100%;
font-family: "Neue Montreal, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji";
.title {
font-size: 40px;
font-weight: 500;
line-height: 1rem;
white-space: nowrap;
text-overflow: ellipsis;
}
.row {
padding: 8px 0;
}
.author {
display: flex;
align-items: center;
.nickname {
margin: 0 10px;
}
.btn {
margin-right: 10px;
background-color: #363030;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
&:hover {
background-color: #5f5958;
}
}
}
.date {
color: #999999;
display: flex;
align-items: center;
.version {
background-color: #1c1616;
border: 1px solid #8f8f8f;
font-weight: normal;
font-size: 14px;
padding: 1px 3px;
border-radius: 5px;
margin-left: 10px;
}
}
.prompt {
width: 100%;
background-color: transparent;
white-space: pre-wrap;
overflow-y: auto;
resize: none;
position: relative;
outline: 2px solid transparent;
outline-offset: 2px;
border: none;
font-size: 100%;
line-height: 2rem;
}
}
.music-player {
width: 100%;
position: fixed;
bottom: 0;
left: 50px;
padding: 20px 0;
}
}

88
web/src/assets/css/song.styl
View File

@@ -1,88 +0,0 @@
.page-song {
display: flex;
justify-content: center;
background-color: #0E0808;
height: 100vh;
.inner {
text-align left
color rgb(250 247 245)
padding 20px
max-width 600px
width 100%
font-family "Neue Montreal,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"
.title {
font-size 40px
font-weight: 500
line-height 1rem
white-space nowrap
text-overflow ellipsis
}
.row {
padding 8px 0
}
.author {
display flex
align-items center
.nickname {
margin 0 10px
}
.btn {
margin-right 10px
background-color #363030
border none
border-radius 5px
padding 5px 10px
cursor pointer
&:hover {
background-color #5F5958
}
}
}
.date {
color #999999
display flex
align-items center
.version {
background-color #1C1616
border 1px solid #8f8f8f
font-weight normal
font-size 14px
padding 1px 3px
border-radius 5px
margin-left 10px
}
}
.prompt {
width 100%
background-color transparent
white-space pre-wrap
overflow-y auto
resize none
position relative
outline 2px solid transparent
outline-offset 2px
border none
font-size 100%
line-height 2rem
}
}
.music-player {
width 100%
position: fixed;
bottom: 0;
left: 50px;
padding 20px 0
}
}

424
web/src/assets/css/suno.scss Normal file
View File

@@ -0,0 +1,424 @@
.page-suno {
display: flex;
height: 100%;
// background-color: #0E0808;
overflow: auto;
.item-group {
scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
-ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
::-webkit-scrollbar {
display: block !important;
}
}
.left-bar {
max-width: 340px;
min-width: 340px;
padding: 20px 30px;
.bar-top {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
.upload-music {
.iconfont {
margin-right: 5px;
font-size: 14px;
}
}
}
.params {
padding: 20px 0;
color: var(--text-theme-color);
position: relative;
.pure-music {
position: absolute;
right: 0;
top: 24px;
display: flex;
.text {
margin-top: 5px;
margin-left: 5px;
}
}
.label {
padding: 10px 0;
.text {
margin-right: 10px;
}
.el-icon {
top: 2px;
}
}
.item {
margin-bottom: 20px;
position: relative;
.create-btn {
margin: 20px 0;
background-image: url("~@/assets/img/suno-create-bg.svg");
background-size: cover;
background-position: 50% 50%;
transition: background 1s ease-in-out;
overflow: hidden;
font-size: 16px;
width: 100%;
padding: 16px;
border-radius: 25px;
border: none;
cursor: pointer;
img {
position: relative;
top: 3px;
margin-right: 5px;
}
&:hover {
opacity: 0.9;
}
}
.song {
display: flex;
padding: 10px;
background-color: var(--el-bg-color);
border-radius: 10px;
margin-bottom: 10px;
font-size: 14px;
position: relative;
.el-image {
width: 50px;
height: 50px;
border-radius: 10px;
}
.icon-mp3 {
font-size: 42px;
color: #a85295;
}
.title {
display: flex;
margin-left: 10px;
align-items: center;
color: var(--el-color-primary);
}
.el-button--info {
position: absolute;
right: 20px;
top: 20px;
}
}
.extend-secs {
padding: 10px 0;
font-size: 14px;
input {
width: 50px;
text-align: center;
padding: 8px 10px;
font-size: 14px;
background: none;
border: 1px solid #8f8f8f;
margin: 0 10px;
border-radius: 10px;
outline: none;
transition: border-color 0.5s ease, box-shadow 0.5s ease;
&:focus {
border-color: #0f7a71;
box-shadow: 0 0 5px #0f7a71;
}
}
}
.btn-lyric {
position: absolute;
left: 10px;
bottom: 10px;
font-size: 12px;
padding: 2px 5px;
background-color: var(--sm-btn-bg);
color: #fff;
}
}
.tag-select {
position: relative;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
-ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
width: 100%;
::-webkit-scrollbar {
display: block !important;
}
.inner {
display: flex;
flex-flow: row;
padding-bottom: 10px;
.tag {
margin-right: 10px;
word-break: keep-all;
background: var(--card-bg);
color: var(--theme-text-color-primary);
opacity: 0.7;
border-radius: 8px;
padding: 3px 6px;
cursor: pointer;
font-size: 13px;
&:hover {
color: var(--el-color-primary);
}
}
}
}
}
}
.right-box {
width: 100%;
color: rgb(250 247 245);
overflow: auto;
background: var(--chat-bg);
.list-box {
padding: 20px;
.item {
display: flex;
flex-flow: row;
padding: 5px 0;
cursor: pointer;
margin-bottom: 10px;
&:hover {
background: rgba(188, 149, 236, 0.08);
}
.left {
.container {
width: 60px;
height: 90px;
position: relative;
.el-image {
height: 90px;
border-radius: 5px;
width: 100%;
}
.duration {
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(14, 8, 8, 0.7);
padding: 0 3px;
font-family: 'Input Sans';
font-size: 14px;
font-weight: 700;
border-radius: 0.125rem;
}
.play {
position: absolute;
width: 56px;
height: 100%;
top: 0;
left: 50%;
border: none;
border-radius: 5px;
background: rgba(100, 100, 100, 0.3);
cursor: pointer;
color: #ffffff;
opacity: 0;
transform: translate(-50%, 0px);
transition: opacity 0.3s ease 0s;
display: flex;
justify-content: center;
align-items: center;
}
&:hover {
.play {
opacity: 1;
// display: block;
}
}
}
}
.center {
width: 100%;
// border: 1px solid saddlebrown;
display: flex;
justify-content: center;
align-items: flex-start;
flex-flow: column;
height: 90px;
padding: 0 20px;
.title {
padding: 6px 0;
font-size: 16px;
font-weight: 700;
a {
color: var(--a-link-color);
&:hover {
text-decoration: underline;
}
}
.model {
color: #8f8f8f;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
font-weight: normal;
font-size: 12px;
padding: 1px 3px;
border-radius: 5px;
margin-left: 10px;
.iconfont {
font-size: 12px;
}
}
}
.tags {
font-size: 14px;
color: var(--text-fb);
padding: 3px 0;
}
}
.right {
min-width: 350px;
font-size: 14px;
padding: 0 0 0 15px;
display: flex;
justify-content: right;
.tools {
display: flex;
justify-content: right;
align-items: center;
flex-flow: row;
height: 90px;
.btn-publish {
padding: 2px 10px;
// .text {
// margin-right: 10px;
// }
}
.btn-icon {
background: none;
padding: 6px;
transition: background 0.6s ease 0s;
color: #919191;
&:hover {
// background: #5f5958;
// color: #e1e1e1;
color: var(--el-color-primary);
}
.downloading {
width: 16px;
}
}
}
}
}
.task {
height: 100px;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
border-radius: 5px;
display: flex;
margin-bottom: 10px;
.left {
display: flex;
justify-content: left;
align-items: center;
padding: 20px;
width: 320px;
.title {
font-size: 14px;
color: var(--el-text-color-primary);
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
}
}
.center {
display: flex;
width: 100%;
justify-content: center;
.failed {
display: flex;
align-items: center;
color: #e4696b;
font-size: 14px;
}
}
.right {
display: flex;
width: 100px;
justify-content: center;
align-items: center;
}
}
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
}
.music-player {
width: 100%;
position: fixed;
bottom: 0;
left: 50px;
padding: 20px 0;
}
}
.btn {
margin-right: 10px;
color: var((--theme-text-color-primary));
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
background: var(--btn-bg);
&:hover {
opacity: 0.8;
}
}
}
.submit-btn {
display: flex;
align-items: center;
margin: 20px 0;
justify-content: center;
.el-button {
width: 200px;
}
}

430
web/src/assets/css/suno.styl
View File

@@ -1,430 +0,0 @@
.page-suno {
display flex
height 100%
// background-color #0E0808
overflow auto
.item-group{
scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
-ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
::-webkit-scrollbar {
display: block !important;
}
}
.left-bar {
max-width 340px
min-width 340px
padding 20px 30px
.bar-top {
display flex
flex-flow row
justify-content: space-between;
align-items center
.upload-music {
.iconfont {
margin-right 5px
font-size 14px
}
}
}
.params {
padding 20px 0
color: var(--text-theme-color);
position relative
.pure-music {
position absolute
right 0
top 24px
display flex
.text {
margin-top 5px
margin-left 5px
}
}
.label {
padding 10px 0
.text {
margin-right 10px
}
.el-icon {
top 2px
}
}
.item {
margin-bottom: 20px
position relative
.create-btn {
margin 20px 0
background-image url("~@/assets/img/suno-create-bg.svg")
background-size: cover;
background-position: 50% 50%;
transition: background 1s ease-in-out;
overflow: hidden;
font-size 16px
width 100%
padding 16px
border-radius 25px
border none
cursor pointer
img {
position relative
top 3px
margin-right 5px
}
&:hover {
opacity: 0.9;
}
}
.song {
display flex
padding 10px
background-color var(--el-bg-color)
border-radius 10px
margin-bottom 10px
font-size 14px
position relative
.el-image {
width 50px
height 50px
border-radius 10px
}
.icon-mp3 {
font-size 42px
color #A85295
}
.title {
display flex
margin-left 10px
align-items center
color var(--el-color-primary)
}
.el-button--info {
position absolute
right 20px
top 20px
}
}
.extend-secs {
padding 10px 0
font-size 14px
input {
width 50px
text-align center
padding 8px 10px
font-size 14px
background none
border 1px solid #8f8f8f
margin 0 10px
border-radius 10px
outline: none;
transition: border-color 0.5s ease, box-shadow 0.5s ease;
&:focus {
border-color: #0F7A71;
box-shadow: 0 0 5px #0F7A71;
}
}
}
.btn-lyric {
position absolute
left 10px
bottom 10px
font-size 12px
padding 2px 5px
background-color var(--sm-btn-bg)
color: #fff
}
}
.tag-select {
position relative
overflow-x auto
overflow-y hidden
scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
-ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
width 100%
::-webkit-scrollbar {
display: block !important;
}
.inner {
display flex
flex-flow row
padding-bottom 10px
.tag {
margin-right 10px
word-break keep-all
background: var(--card-bg);
color:var(--theme-text-color-primary);
opacity 0.7
border-radius 8px
padding 3px 6px
cursor pointer
font-size 13px
&:hover{
color:var( --el-color-primary)
}
}
}
}
}
}
.right-box {
width 100%
color rgb(250 247 245)
overflow auto
background: var(--chat-bg)
.list-box {
padding 20px
.item {
display flex
flex-flow row
padding 5px 0
cursor pointer
margin-bottom 10px
&:hover {
background: rgba(188,149,236,0.08)
}
.left {
.container {
width 60px
height 90px
position relative
.el-image {
height 90px
border-radius 5px
width 100%
}
.duration {
position absolute
bottom 0
right 0
background-color rgba(14,8,8,.7)
padding 0 3px
font-family 'Input Sans'
font-size 14px
font-weight 700
border-radius .125rem
}
.play {
position absolute
width: 56px;
height 100%
top: 0;
left: 50%;
border none
border-radius 5px
background rgba(100, 100, 100, 0.3)
cursor pointer
color #ffffff
opacity 0
transform: translate(-50%, 0px);
transition opacity 0.3s ease 0s
display flex
justify-content center
align-items center
}
&:hover {
.play {
opacity 1
//display block
}
}
}
}
.center {
width 100%
//border 1px solid saddlebrown
display flex
justify-content center
align-items flex-start
flex-flow column
height 90px
padding 0 20px
.title {
padding 6px 0
font-size 16px
font-weight 700
a {
color var( --a-link-color)
&:hover {
text-decoration underline
}
}
.model {
color #8f8f8f
background-color var(--el-bg-color)
border 1px solid var(--el-border-color-light)
font-weight normal
font-size 12px
padding 1px 3px
border-radius 5px
margin-left 10px
.iconfont {
font-size 12px
}
}
}
.tags {
font-size 14px
color var(--text-fb)
padding 3px 0
}
}
.right {
min-width 350px;
font-size 14px
padding 0 0 0 15px
display flex
justify-content right
.tools {
display flex
justify-content right
align-items center
flex-flow row
height 90px
.btn-publish {
padding 2px 10px
// .text {
// margin-right 10px
// }
}
.btn-icon {
background none
padding 6px
transition background 0.6s ease 0s
color #919191
&:hover {
// background #5f5958
// color #e1e1e1
color:var(--el-color-primary)
}
.downloading {
width 16px
}
}
}
}
}
.task {
height 100px
background-color var(--el-bg-color)
border: 1px solid var(--el-border-color-light);
border-radius 5px
display flex
margin-bottom 10px
.left {
display flex
justify-content left
align-items center
padding 20px
width 320px
.title {
font-size 14px
color var(--el-text-color-primary)
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
}
}
.center {
display flex
width 100%
justify-content center
.failed {
display flex
align-items center
color #E4696B
font-size 14px
}
}
.right {
display flex
width 100px
justify-content center
align-items center
}
}
}
.pagination {
margin-top 20px
display flex
justify-content center
}
.music-player {
width 100%
position: fixed;
bottom: 0;
left: 50px;
padding 20px 0
}
}
.btn {
margin-right 10px
color: var((--theme-text-color-primary))
border none
border-radius 5px
padding 5px 10px
cursor pointer
background: var(--btn-bg)
&:hover {
opacity :0.8
}
}
}
.submit-btn {
display flex
align-items: center
margin: 20px 0
justify-content: center;
.el-button {
width 200px
}
}

72
web/src/assets/css/theme-dark.styl → web/src/assets/css/theme-dark.scss
View File

@@ -1,77 +1,75 @@
@import 'font.styl'
:root[data-theme="dark"]{
--text-fb:#fff;
@use 'font.scss' as *;
: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;
font-family: $font-regular;
font-family: $font-regular;
}
html,
body,
#app,
.wrapper {
background: rgb(13, 20, 53)
background-color: rgb(13, 20, 53)
background: rgb(13, 20, 53);
background-color: rgb(13, 20, 53);
font-family: $font-regular;
}
--btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
--border-active:rgba(255, 255, 255, 0.1);
--card-bg:#252d58;
--chat-bg:#1f243f
--chat-wel-bg:#2d2f38;
--border-active: rgba(255, 255, 255, 0.1);
--card-bg: #252d58;
--chat-bg: #1f243f;
--chat-wel-bg: #2d2f38;
--card-bg-table: rgba(17, 28, 68, 1);
--theme-bg:rgb(13, 20, 53);
--theme-bg: rgb(13, 20, 53);
--theme-bg-color: rgb(13, 20, 53);
--theme-bg-all: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;
--theme-text-color-secondary: #a3aed0;
--theme-text-color-primary: #fff;
--theme-text-primary: #f3f3f3;
--line-box:rgba(255, 255, 255, 0.1);
--el-bg-color:#141a36;
--line-box: rgba(255, 255, 255, 0.1);
--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);
--el-text-color-regular: rgba(163, 174, 208, 1)
--el-border-color:rgb(79, 80, 85);//黑白切换
--el-fill-color-light: rgba(86, 86, 95, 0.2);
--el-color-primary-light-9: rgba(86, 86, 95, 0.2);
--el-text-color-regular: rgba(163, 174, 208, 1);
--el-border-color: rgb(79, 80, 85); //黑白切换
--el-bg-color-overlay: rgba(17, 28, 68, 1);
--el-border-color-light: rgba(255, 255, 255, 0.2);
--chat-content-bg:rgba(86, 86, 95, .2);
--chat-user-content-bg: #762AA4;
--hover-deep-color:#30323c;
--tab-title-bg:#525777;//顶部tab栏背景切换
--tab-title-color:#fff;//顶部tab栏文字切换
--chat-content-bg: rgba(86, 86, 95, 0.2);
--chat-user-content-bg: #762aa4;
--hover-deep-color: #30323c;
--tab-title-bg: #525777; //顶部tab栏背景切换
--tab-title-color: #fff; //顶部tab栏文字切换
//深黑色
--bg-deep-color:rgba(255,255,255,0.8);
//layout
--bg-deep-color: rgba(255, 255, 255, 0.8);
//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{
.layout .tab-box .menu-list-item {
//filter: invert(100%);
}
.more-menus span.title{
.more-menus span.title {
color: var(--text-theme-color);
}
// 操作按钮
--btn-bg: rgba(86, 86, 95, .5);
--btn-bg: rgba(86, 86, 95, 0.5);
.el-table {
// 表格表头背景
--el-fill-color-darker: rgba(100, 100, 100, .5);
--el-fill-color-darker: rgba(100, 100, 100, 0.5);
--el-border-color-darker: #73767a;
--el-table-border-color: rgba(100, 100, 100, .5);
--el-table-row-hover-bg-color: rgba(16, 21, 43, .8);
--el-table-current-row-bg-color: rgba(16, 21, 43, .8);
--el-table-border-color: rgba(100, 100, 100, 0.5);
--el-table-row-hover-bg-color: rgba(16, 21, 43, 0.8);
--el-table-current-row-bg-color: rgba(16, 21, 43, 0.8);
}
// 加载动画
@@ -87,11 +85,11 @@
--van-button-default-background: #141a36;
--van-background: #141a36;
--van-tabbar-background: #141a36;
--van-nav-bar-background: #1B244A;
--van-nav-bar-background: #1b244a;
--van-dropdown-menu-background: #141a36;
// 引用快样式
--quote-bg-color: #1F243F;
--quote-bg-color: #1f243f;
--quote-text-color: #fff;
// el-dialog 阴影
@@ -99,4 +97,4 @@
// 面板背景
--panel-bg: linear-gradient(135deg, #252d58 0%, #1f243f 100%);
}
}

46
web/src/assets/css/theme-light.styl → web/src/assets/css/theme-light.scss
View File

@@ -1,11 +1,9 @@
@import 'font.styl'
@use 'font.scss' as *;
:root[data-theme="light"] {
--text-fb:#000;
--text-fb: #000;
--text-color: #5b62ce; // 主要的文本颜色
--normal-color: rgba(43, 54, 116, 1); // 普通颜色
--theme-textcolor-normal:#5b62ce;;
--theme-textcolor-normal: #5b62ce;
p, h1, h2, h3, h4, h5, h6, article {
font-family: $font-regular;
}
@@ -17,48 +15,44 @@
}
--btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
--border-active:rgba(134, 140, 255, 1);
--border-active: rgba(134, 140, 255, 1);
--code-btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
--card-bg:#fff;
--chat-bg:#fff;
--theme-bg:linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
--theme-bg-all:#f5f7fd;
--card-bg: #fff;
--chat-bg: #fff;
--theme-bg: linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
--theme-bg-all: #f5f7fd;
--theme-bg-color: #f5f7fd;
--sign-bg: rgba(244, 247, 254, 1);
--text-theme-color: rgba(43, 54, 116, 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);
--line-box: rgba(79, 89, 102, 0.122);
--theme-text-color-primary: #000;
--theme-text-primary: #000;
--theme-text-color-secondary: #666;
--chat-content-bg:#f5f7fc;
--chat-content-bg: #f5f7fc;
--chat-user-content-bg: #e0dfff;
--chat-list-bg: #0302020a;
--chat-wel-bg:rgba(247, 247, 248, 1);
--hover-deep-color:#fff;
--chat-wel-bg: rgba(247, 247, 248, 1);
--hover-deep-color: #fff;
--el-bg-color-overlay: #fff;
--el-bg-color:#fff;
--el-bg-color: #fff;
--el-fill-color-blank: #fff;
--el-pagination-button-bg-color: rgba(86,86,95,0.2);
--tab-title-bg:#fff;//顶部tab栏背景切换
--tab-title-color:#595959;//顶部tab栏文字切换
--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2);
--tab-title-bg: #fff; //顶部tab栏背景切换
--tab-title-color: #595959; //顶部tab栏文字切换
// 操作按钮
--btn-bg: rgba(100, 100, 100, .1);
--btn-bg: rgba(100, 100, 100, 0.1);
// 加载动画
--el-mask-color: rgba(100, 100, 100, 0.2);
// code 标签背景
--code-bg-color: #ececec;
--code-text-color: var(--el-color-primary);
// 引用快样式
--quote-bg-color: #e0dfff;
--quote-text-color: #333;
// 面板背景
--panel-bg: linear-gradient(135deg, #f5eafe 0%, #e9e6fc 100%);
}
}

1130
web/src/assets/css/video.styl → web/src/assets/css/video.scss
View File

File diff suppressed because it is too large Load Diff

139
web/src/assets/css/waterfall-list.scss Normal file
View File

@@ -0,0 +1,139 @@
.job-list-box {
@import 'running-job-list.scss';
.finish-job-list {
#waterfall {
display: flex;
justify-content: center;
padding-top: 20px;
flex-flow: column;
.job-item {
width: 100%;
height: 100%;
border: 1px solid #666666;
padding: 6px;
overflow: hidden;
border-radius: 6px;
transition: all 0.3s ease; /* 添加过渡效果 */
position: relative;
.opt {
.opt-line {
margin: 6px 0;
ul {
display: flex;
flex-flow: row;
li {
margin-right: 6px;
a {
padding: 3px 0;
width: 40px;
text-align: center;
border-radius: 5px;
display: block;
cursor: pointer;
background-color: #4e5058;
color: #ffffff;
&:hover {
background-color: #6d6f78;
}
}
}
.show-prompt {
font-size: 20px;
cursor: pointer;
}
}
}
}
.remove {
display: none;
position: absolute;
right: 10px;
top: 10px;
}
&:hover {
.remove {
display: block;
}
}
}
.animate {
&:hover {
box-shadow: 0 0 10px var(--shadow-color); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */
}
}
}
}
.el-image {
width: 100%;
height: 100%;
overflow: visible;
.el-image-viewer__wrapper {
img {
width: auto;
height: auto;
}
}
.image-slot {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
min-height: 220px;
color: #ffffff;
.err-msg-container {
overflow: hidden;
word-break: break-all;
padding: 15px;
.title {
font-size: 20px;
text-align: center;
font-weight: bold;
color: #f56c6c;
margin-bottom: 30px;
}
.opt {
display: flex;
justify-content: center;
}
}
.iconfont {
font-size: 50px;
margin-bottom: 10px;
}
}
}
.el-image.upscale {
img {
height: 310px;
}
.image-slot {
height: 310px;
}
.el-image-viewer__wrapper {
img {
width: auto;
height: auto;
}
}
}
}

146
web/src/assets/css/waterfall-list.styl
View File

@@ -1,146 +0,0 @@
.job-list-box {
@import "running-job-list.styl"
.finish-job-list {
#waterfall {
display flex
justify-content center
padding-top 20px
flex-flow column
.job-item {
width 100%
height 100%
border 1px solid #666666
padding 6px
overflow hidden
border-radius 6px
transition: all 0.3s ease; /* 添加过渡效果 */
position relative
.opt {
.opt-line {
margin 6px 0
ul {
display flex
flex-flow row
li {
margin-right 6px
a {
padding 3px 0
width 40px
text-align center
border-radius 5px
display block
cursor pointer
background-color #4E5058
color #ffffff
&:hover {
background-color #6D6F78
}
}
}
.show-prompt {
font-size 20px
cursor pointer
}
}
}
}
.remove {
display none
position absolute
right 10px
top 10px
}
&:hover {
.remove {
display block
}
}
}
.animate {
&:hover {
box-shadow: 0 0 10px var(--shadow-color); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */
}
}
}
}
.el-image {
width 100%
height 100%
overflow visible
.el-image-viewer__wrapper {
img {
width auto
height auto
}
}
.image-slot {
display flex
flex-flow column
justify-content center
align-items center
min-height 220px
color #ffffff
.err-msg-container {
overflow hidden
word-break break-all
padding 15px
.title {
font-size 20px
text-align center
font-weight bold
color #f56c6c
margin-bottom 30px
}
.opt {
display flex
justify-content center
}
}
.iconfont {
font-size 50px
margin-bottom 10px
}
}
}
.el-image.upscale {
img {
height 310px
}
.image-slot {
height 310px
}
.el-image-viewer__wrapper {
img {
width auto
height auto
}
}
}
}