diff --git a/web/src/App.vue b/web/src/App.vue index 89974207..94007296 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -78,8 +78,9 @@ console.log( ) - diff --git a/web/src/assets/css/admin/form.scss b/web/src/assets/css/admin/form.scss new file mode 100644 index 00000000..f20caa7c --- /dev/null +++ b/web/src/assets/css/admin/form.scss @@ -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; + } +} \ No newline at end of file diff --git a/web/src/assets/css/admin/form.styl b/web/src/assets/css/admin/form.styl deleted file mode 100644 index d42bcb83..00000000 --- a/web/src/assets/css/admin/form.styl +++ /dev/null @@ -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; - } -} diff --git a/web/src/assets/css/chat-app.scss b/web/src/assets/css/chat-app.scss new file mode 100644 index 00000000..e7d86026 --- /dev/null +++ b/web/src/assets/css/chat-app.scss @@ -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; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/chat-app.styl b/web/src/assets/css/chat-app.styl deleted file mode 100644 index 1781316b..00000000 --- a/web/src/assets/css/chat-app.styl +++ /dev/null @@ -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 - } - } - } - } - } - - } - } - -} \ No newline at end of file diff --git a/web/src/assets/css/chat-plus.styl b/web/src/assets/css/chat-plus.scss similarity index 50% rename from web/src/assets/css/chat-plus.styl rename to web/src/assets/css/chat-plus.scss index 3335718d..dc993443 100644 --- a/web/src/assets/css/chat-plus.styl +++ b/web/src/assets/css/chat-plus.scss @@ -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; + } +} \ No newline at end of file diff --git a/web/src/assets/css/color-dark.styl b/web/src/assets/css/color-dark.scss similarity index 78% rename from web/src/assets/css/color-dark.styl rename to web/src/assets/css/color-dark.scss index ab18ff52..e5b19b04 100644 --- a/web/src/assets/css/color-dark.styl +++ b/web/src/assets/css/color-dark.scss @@ -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; } \ No newline at end of file diff --git a/web/src/assets/css/common.scss b/web/src/assets/css/common.scss new file mode 100644 index 00000000..8b46283e --- /dev/null +++ b/web/src/assets/css/common.scss @@ -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); +} \ No newline at end of file diff --git a/web/src/assets/css/common.styl b/web/src/assets/css/common.styl deleted file mode 100644 index 7faea9eb..00000000 --- a/web/src/assets/css/common.styl +++ /dev/null @@ -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) -} \ No newline at end of file diff --git a/web/src/assets/css/custom-scroll.styl b/web/src/assets/css/custom-scroll.scss similarity index 90% rename from web/src/assets/css/custom-scroll.styl rename to web/src/assets/css/custom-scroll.scss index bd427a56..fc198317 100644 --- a/web/src/assets/css/custom-scroll.styl +++ b/web/src/assets/css/custom-scroll.scss @@ -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 浏览器） */ + } + } } \ No newline at end of file diff --git a/web/src/assets/css/font.styl b/web/src/assets/css/font.scss similarity index 73% rename from web/src/assets/css/font.styl rename to web/src/assets/css/font.scss index 0831c2a0..8b6cad6c 100644 --- a/web/src/assets/css/font.styl +++ b/web/src/assets/css/font.scss @@ -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; diff --git a/web/src/assets/css/home.styl b/web/src/assets/css/home.scss similarity index 73% rename from web/src/assets/css/home.styl rename to web/src/assets/css/home.scss index 533e2e5e..47206dd9 100644 --- a/web/src/assets/css/home.styl +++ b/web/src/assets/css/home.scss @@ -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; } \ No newline at end of file diff --git a/web/src/assets/css/image-dall.styl b/web/src/assets/css/image-dall.scss similarity index 53% rename from web/src/assets/css/image-dall.styl rename to web/src/assets/css/image-dall.scss index 363f6d15..56d4c410 100644 --- a/web/src/assets/css/image-dall.styl +++ b/web/src/assets/css/image-dall.scss @@ -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; + } + } + } +} diff --git a/web/src/assets/css/image-mj.scss b/web/src/assets/css/image-mj.scss new file mode 100644 index 00000000..20e98567 --- /dev/null +++ b/web/src/assets/css/image-mj.scss @@ -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; + } +} diff --git a/web/src/assets/css/image-mj.styl b/web/src/assets/css/image-mj.styl deleted file mode 100644 index 3c66bc33..00000000 --- a/web/src/assets/css/image-mj.styl +++ /dev/null @@ -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 - } -} \ No newline at end of file diff --git a/web/src/assets/css/image-sd.styl b/web/src/assets/css/image-sd.scss similarity index 52% rename from web/src/assets/css/image-sd.styl rename to web/src/assets/css/image-sd.scss index fb2fded5..fbe026a5 100644 --- a/web/src/assets/css/image-sd.styl +++ b/web/src/assets/css/image-sd.scss @@ -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; + } + } +} diff --git a/web/src/assets/css/images-wall.scss b/web/src/assets/css/images-wall.scss new file mode 100644 index 00000000..701ba1d2 --- /dev/null +++ b/web/src/assets/css/images-wall.scss @@ -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 *; +} \ No newline at end of file diff --git a/web/src/assets/css/images-wall.styl b/web/src/assets/css/images-wall.styl deleted file mode 100644 index 27fd595b..00000000 --- a/web/src/assets/css/images-wall.styl +++ /dev/null @@ -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" -} \ No newline at end of file diff --git a/web/src/assets/css/index.scss b/web/src/assets/css/index.scss new file mode 100644 index 00000000..5c538042 --- /dev/null +++ b/web/src/assets/css/index.scss @@ -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%; + } +} \ No newline at end of file diff --git a/web/src/assets/css/index.styl b/web/src/assets/css/index.styl deleted file mode 100644 index 6f951feb..00000000 --- a/web/src/assets/css/index.styl +++ /dev/null @@ -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%; - } -} \ No newline at end of file diff --git a/web/src/assets/css/jimeng.styl b/web/src/assets/css/jimeng.scss similarity index 97% rename from web/src/assets/css/jimeng.styl rename to web/src/assets/css/jimeng.scss index 45a4823b..b5439284 100644 --- a/web/src/assets/css/jimeng.styl +++ b/web/src/assets/css/jimeng.scss @@ -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; } } -} \ No newline at end of file +} \ No newline at end of file diff --git a/web/src/assets/css/login.scss b/web/src/assets/css/login.scss new file mode 100644 index 00000000..ccfcf458 --- /dev/null +++ b/web/src/assets/css/login.scss @@ -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); +} \ No newline at end of file diff --git a/web/src/assets/css/login.styl b/web/src/assets/css/login.styl deleted file mode 100644 index ded9ebef..00000000 --- a/web/src/assets/css/login.styl +++ /dev/null @@ -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) -} \ No newline at end of file diff --git a/web/src/assets/css/main.styl b/web/src/assets/css/main.scss similarity index 82% rename from web/src/assets/css/main.styl rename to web/src/assets/css/main.scss index 1434c405..f7ec3ba6 100644 --- a/web/src/assets/css/main.styl +++ b/web/src/assets/css/main.scss @@ -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; +} \ No newline at end of file diff --git a/web/src/assets/css/mark-map.scss b/web/src/assets/css/mark-map.scss new file mode 100644 index 00000000..deac3b99 --- /dev/null +++ b/web/src/assets/css/mark-map.scss @@ -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); + } + } + } + } + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/mark-map.styl b/web/src/assets/css/mark-map.styl deleted file mode 100644 index 7f19a0ad..00000000 --- a/web/src/assets/css/mark-map.styl +++ /dev/null @@ -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) - } - } - - } - } - } - } -} - diff --git a/web/src/assets/css/member.scss b/web/src/assets/css/member.scss new file mode 100644 index 00000000..db37e31b --- /dev/null +++ b/web/src/assets/css/member.scss @@ -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,') 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; + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/member.styl b/web/src/assets/css/member.styl deleted file mode 100644 index ec584a86..00000000 --- a/web/src/assets/css/member.styl +++ /dev/null @@ -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,') 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 - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/mobile/chat-list.scss b/web/src/assets/css/mobile/chat-list.scss new file mode 100644 index 00000000..80f2dc9d --- /dev/null +++ b/web/src/assets/css/mobile/chat-list.scss @@ -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 *; \ No newline at end of file diff --git a/web/src/assets/css/mobile/chat-list.styl b/web/src/assets/css/mobile/chat-list.styl deleted file mode 100644 index c1cbd386..00000000 --- a/web/src/assets/css/mobile/chat-list.styl +++ /dev/null @@ -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" \ No newline at end of file diff --git a/web/src/assets/css/mobile/chat-session.styl b/web/src/assets/css/mobile/chat-session.scss similarity index 53% rename from web/src/assets/css/mobile/chat-session.styl rename to web/src/assets/css/mobile/chat-session.scss index c4d8dbd3..4731d2b2 100644 --- a/web/src/assets/css/mobile/chat-session.styl +++ b/web/src/assets/css/mobile/chat-session.scss @@ -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" \ No newline at end of file +.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 *; \ No newline at end of file diff --git a/web/src/assets/css/mobile/image-mj.scss b/web/src/assets/css/mobile/image-mj.scss new file mode 100644 index 00000000..25055939 --- /dev/null +++ b/web/src/assets/css/mobile/image-mj.scss @@ -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; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/mobile/image-mj.styl b/web/src/assets/css/mobile/image-mj.styl deleted file mode 100644 index e482b931..00000000 --- a/web/src/assets/css/mobile/image-mj.styl +++ /dev/null @@ -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 - } - } - } - } - } - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/mobile/image-sd.scss b/web/src/assets/css/mobile/image-sd.scss new file mode 100644 index 00000000..cc385da3 --- /dev/null +++ b/web/src/assets/css/mobile/image-sd.scss @@ -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; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/mobile/image-sd.styl b/web/src/assets/css/mobile/image-sd.styl deleted file mode 100644 index 31c036f5..00000000 --- a/web/src/assets/css/mobile/image-sd.styl +++ /dev/null @@ -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 - } - } - } - - } - } - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/mobile/model-select.scss b/web/src/assets/css/mobile/model-select.scss new file mode 100644 index 00000000..19ec42e1 --- /dev/null +++ b/web/src/assets/css/mobile/model-select.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/mobile/model-select.styl b/web/src/assets/css/mobile/model-select.styl deleted file mode 100644 index 8b3de473..00000000 --- a/web/src/assets/css/mobile/model-select.styl +++ /dev/null @@ -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 - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/realtime.styl b/web/src/assets/css/realtime.scss similarity index 92% rename from web/src/assets/css/realtime.styl rename to web/src/assets/css/realtime.scss index 18f5337a..70a80d33 100644 --- a/web/src/assets/css/realtime.styl +++ b/web/src/assets/css/realtime.scss @@ -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; + } + } + } } \ No newline at end of file diff --git a/web/src/assets/css/running-job-list.scss b/web/src/assets/css/running-job-list.scss new file mode 100644 index 00000000..b2c4978d --- /dev/null +++ b/web/src/assets/css/running-job-list.scss @@ -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); + } + } + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/running-job-list.styl b/web/src/assets/css/running-job-list.styl deleted file mode 100644 index e8b9df99..00000000 --- a/web/src/assets/css/running-job-list.styl +++ /dev/null @@ -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) - } - } - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/sd-task-dialog.scss b/web/src/assets/css/sd-task-dialog.scss new file mode 100644 index 00000000..efe9314c --- /dev/null +++ b/web/src/assets/css/sd-task-dialog.scss @@ -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 + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/sd-task-dialog.styl b/web/src/assets/css/sd-task-dialog.styl deleted file mode 100644 index ada3061f..00000000 --- a/web/src/assets/css/sd-task-dialog.styl +++ /dev/null @@ -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 - - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/song.scss b/web/src/assets/css/song.scss new file mode 100644 index 00000000..302ce15b --- /dev/null +++ b/web/src/assets/css/song.scss @@ -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; + } +} \ No newline at end of file diff --git a/web/src/assets/css/song.styl b/web/src/assets/css/song.styl deleted file mode 100644 index 4a7a6ee3..00000000 --- a/web/src/assets/css/song.styl +++ /dev/null @@ -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 - } - -} \ No newline at end of file diff --git a/web/src/assets/css/suno.scss b/web/src/assets/css/suno.scss new file mode 100644 index 00000000..16fe1913 --- /dev/null +++ b/web/src/assets/css/suno.scss @@ -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; + } +} \ No newline at end of file diff --git a/web/src/assets/css/suno.styl b/web/src/assets/css/suno.styl deleted file mode 100644 index aa95d9dc..00000000 --- a/web/src/assets/css/suno.styl +++ /dev/null @@ -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 - } - -} \ No newline at end of file diff --git a/web/src/assets/css/theme-dark.styl b/web/src/assets/css/theme-dark.scss similarity index 57% rename from web/src/assets/css/theme-dark.styl rename to web/src/assets/css/theme-dark.scss index b8a14600..cf03574a 100644 --- a/web/src/assets/css/theme-dark.styl +++ b/web/src/assets/css/theme-dark.scss @@ -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%); -} +} \ No newline at end of file diff --git a/web/src/assets/css/theme-light.styl b/web/src/assets/css/theme-light.scss similarity index 62% rename from web/src/assets/css/theme-light.styl rename to web/src/assets/css/theme-light.scss index 2ec52562..b6fa722f 100644 --- a/web/src/assets/css/theme-light.styl +++ b/web/src/assets/css/theme-light.scss @@ -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%); -} - - +} \ No newline at end of file diff --git a/web/src/assets/css/video.styl b/web/src/assets/css/video.scss similarity index 89% rename from web/src/assets/css/video.styl rename to web/src/assets/css/video.scss index 21d11a40..2e89b1d4 100644 --- a/web/src/assets/css/video.styl +++ b/web/src/assets/css/video.scss @@ -1,567 +1,565 @@ -// 视频生成页面统一样式 -.page-video { - display: flex; - min-height: 100vh; - background: var(--chat-bg); - - // Element Plus 样式覆盖 - :deep(.el-form-item__label) { - color: var(--text-theme-color); - } - - :deep(.el-textarea) { - --el-input-focus-border-color: var(--el-color-primary); - } - - :deep(.el-textarea__inner) { - background: transparent; - color: var(--text-theme-color); - } - - .el-input__wrapper { - background: transparent; - padding: 5px; - } - - // 左侧参数面板 - .params-panel { - min-width: 320px; - max-width: 320px; - margin: 10px; - padding: 0 15px 20px 15px; - border-radius: 10px; - color: var(--text-theme-color); - font-size: 14px; - overflow: auto; - background: var(--card-bg); - - h2 { - font-weight: bold; - font-size: 20px; - text-align: center; - color: var(--theme-textcolor-normal); - margin-bottom: 20px; - } - - // 隐藏滚动条 - ::-webkit-scrollbar { - width: 0; - height: 0; - background-color: transparent; - } - - // 标签页样式 - .video-type-tabs { - margin-bottom: 20px; - - :deep(.el-tabs__item.is-active) { - color: var(--theme-textcolor-normal); - font-size: 16px; - } - - :deep(.el-tabs__item) { - color: var(--text-theme-color); - font-size: 16px; - } - - :deep(.el-tabs__active-bar) { - background-color: var(--theme-textcolor-normal); - } - - .el-tabs { - --el-tabs-header-height: 45px; - } - } - - // 参数行 - .param-line { - padding: 5px 0; - - &.pt { - padding-top: 10px; - padding-bottom: 10px; - } - - .label { - margin-right: 5px; - position: relative; - top: 1px; - } - - .form-item-inner { - display: flex; - align-items: center; - - .el-icon { - margin-left: 10px; - } - } - } - - // 表单项样式 - .el-form { - .el-form-item__label { - color: var(--text-theme-color); - } - - .el-input, .el-slider { - width: 100%; - } - - .el-select { - width: 100%; - --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); - } - } - } - - // 网格内容项 - .grid-content { - background: var(--card-bg); - border-radius: 8px; - padding: 8px 14px; - display: flex; - cursor: pointer; - margin-bottom: 10px; - border: 1px solid var(--chat-bg); - - &:hover { - border: 1px solid var(--theme-border-hover); - } - - &.active { - border: 1px solid var(--theme-border-hover); - } - - .icon { - width: 20px; - height: 20px; - margin-bottom: 5px; - - &.proportion { - width: 20px; - height: 20px; - } - } - - .texts { - margin-left: 5px; - margin-top: 2px; - color: var(--text-theme-color); - } - } - - // 运镜控制 - .camera-control { - padding: 10px; - border-radius: 4px; - background: var(--card-bg); - - :deep(.el-form-item:last-child) { - margin-bottom: 0 !important; - } - } - - // 生成按钮 - .generate-btn { - .iconfont { - margin-right: 5px; - } - } - - // 项目组样式 - .item-group { - display: flex; - align-items: center; - margin-bottom: 15px; - - .label { - margin-right: 10px; - } - } - - // 图片模式切换样式 - .image-mode-toggle { - display: flex; - align-items: center; - justify-content: space-between; - - .label { - margin-right: 10px; - color: var(--text-theme-color); - } - } - - // 过渡动画 - .slide-fade-enter-active { - transition: all 0.3s ease-out; - } - - .slide-fade-leave-active { - transition: all 0.3s ease-in; - } - - .slide-fade-enter-from { - transform: translateY(-10px); - opacity: 0; - } - - .slide-fade-leave-to { - transform: translateY(-10px); - opacity: 0; - } - } - - - // KeLing 参数面板特有样式 - .params-container { - // 任务类型标签页 - .task-type-tabs { - margin-bottom: 20px; - - .text { - margin-bottom: 10px; - color: #6b778c; - font-size: 15px; - } - } - - // 图片上传样式 - .img-inline { - display: flex; - flex-wrap: wrap; - - .img-uploader { - text-align: center; - position: relative; - - :deep(.el-upload) { - border: 1px dashed var(--el-border-color); - border-radius: 6px; - cursor: pointer; - position: relative; - overflow: hidden; - width: 120px; - height: 120px; - transition: var(--el-transition-duration-fast); - margin-bottom: 20px; - - &:hover { - border-color: var(--el-color-primary); - } - } - - .removeimg { - position: absolute; - right: -5px; - top: -5px; - z-index: 10; - cursor: pointer; - color: #f56c6c; - font-size: 20px; - } - - } - - .btn-swap { - .icon-exchange { - color: var(--text-theme-color); - cursor: pointer; - font-size: 20px; - } - } - } - - // 提交按钮 - .submit-btn { - display: flex; - margin: 20px 0; - - .el-button { - width: 100%; - } - } - - // 算力信息 - .text-info { - width: 100%; - padding: 10px 0; - - .el-tag { - margin-right: 10px; - } - } - } - - // 右侧主要内容区域 - .main-content { - padding: 1.5rem; - flex: 1; - background: var(--chat-bg); - color: var(--text-theme-color); - overflow-x: hidden; - - // 作品标题栏 - .works-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - - .h-title { - color: var(--text-theme-color); - margin: 0; - } - - // .filter-buttons { - // .el-button-group { - // .el-button { - // --el-button-bg-color: var(--card-bg); - // --el-button-border-color: var(--chat-bg); - // --el-button-text-color: var(--text-theme-color); - // --el-button-hover-bg-color: var(--theme-border-hover); - // --el-button-hover-border-color: var(--theme-border-hover); - // --el-button-active-bg-color: var(--el-color-primary); - // --el-button-active-border-color: var(--el-color-primary); - - // &.is-type-primary { - // --el-button-bg-color: var(--el-color-primary); - // --el-button-border-color: var(--el-color-primary); - // --el-button-text-color: #ffffff; - // } - // } - // } - // } - } - - // 任务列表 - .video-list { - .list-box { - padding: 0; - - .item { - display: flex; - flex-flow: row; - align-items: center; - min-height: 100px; - padding: 10px 15px; - border-radius: 10px; - cursor: pointer; - margin-bottom: 20px; - background: var(--card-bg); - - .left { - .container { - width: 160px; - position: relative; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - - .video { - width: 160px; - height: 120px; - border-radius: 5px; - background-color: var(--el-fill-color-light); - } - - .el-image { - width: 160px; - height: 90px; - border-radius: 5px; - } - - .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: 100%; - height: 100%; - top: 0; - left: 50%; - border: none; - border-radius: 5px; - background: rgba(100, 100, 100, 0.3); - cursor: pointer; - color: var(--text-theme-color); - opacity: 0; - transform: translate(-50%, 0px); - transition: opacity 0.3s ease 0s; - } - - &:hover { - .play { - opacity: 1; - } - } - } - } - - .center { - width: 100%; - display: flex; - justify-content: center; - align-items: flex-start; - flex-flow: column; - padding: 0 20px; - - .prompt, .failed { - padding: 0; - font-size: 16px; - max-height: 80px; - line-height: 28px; - overflow: hidden; - text-overflow: ellipsis; - } - - .prompt { - color: var(--text-fb); - cursor: text; - } - - .failed { - color: #E4696B; - } - - .pb-2 { - padding-bottom: 8px; - - .el-tag { - margin-right: 4px; - margin-bottom: 4px; - } - } - } - - .right { - display: flex; - justify-content: right; - min-width: 200px; - font-size: 14px; - padding: 0; - - .tools { - display: flex; - justify-content: left; - 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 { - color: var(--el-color-primary); - } - - .downloading { - width: 16px; - } - } - } - } - - .right-error { - display: flex; - justify-content: center; - align-items: center; - } - } - } - - // 分页 - .pagination { - margin-top: 20px; - display: flex; - justify-content: center; - } - } - } - - // 通用按钮样式 - .btn { - margin-right: 10px; - border: none; - border-radius: 5px; - padding: 5px 10px; - cursor: pointer; - color: var(--theme-text-color-primary); - background-color: var(--btn-bg); - - &:hover { - opacity: 0.7; - } - } - - // 无数据样式 - .no-data { - text-align: center; - padding: 40px; - color: var(--text-theme-color); - } -} - -// 响应式设计 -@media (max-width: 768px) { - .page-video { - flex-direction: column; - - .params-panel { - min-width: 100%; - max-width: 100%; - margin: 10px 0; - } - - .main-content { - padding: 1rem; - - .video-list .list-box .item { - .left .container { - width: 120px; - - .video, .el-image { - width: 120px; - } - } - - .center { - padding: 0 10px; - } - - .right { - min-width: 120px; - } - } - } - } +// 视频生成页面统一样式 +.page-video { + display: flex; + min-height: 100vh; + background: var(--chat-bg); + + // Element Plus 样式覆盖 + :deep(.el-form-item__label) { + color: var(--text-theme-color); + } + + :deep(.el-textarea) { + --el-input-focus-border-color: var(--el-color-primary); + } + + :deep(.el-textarea__inner) { + background: transparent; + color: var(--text-theme-color); + } + + .el-input__wrapper { + background: transparent; + padding: 5px; + } + + // 左侧参数面板 + .params-panel { + min-width: 320px; + max-width: 320px; + margin: 10px; + padding: 0 15px 20px 15px; + border-radius: 10px; + color: var(--text-theme-color); + font-size: 14px; + overflow: auto; + background: var(--card-bg); + + h2 { + font-weight: bold; + font-size: 20px; + text-align: center; + color: var(--theme-textcolor-normal); + margin-bottom: 20px; + } + + // 隐藏滚动条 + ::-webkit-scrollbar { + width: 0; + height: 0; + background-color: transparent; + } + + // 标签页样式 + .video-type-tabs { + margin-bottom: 20px; + + :deep(.el-tabs__item.is-active) { + color: var(--theme-textcolor-normal); + font-size: 16px; + } + + :deep(.el-tabs__item) { + color: var(--text-theme-color); + font-size: 16px; + } + + :deep(.el-tabs__active-bar) { + background-color: var(--theme-textcolor-normal); + } + + .el-tabs { + --el-tabs-header-height: 45px; + } + } + + // 参数行 + .param-line { + padding: 5px 0; + + &.pt { + padding-top: 10px; + padding-bottom: 10px; + } + + .label { + margin-right: 5px; + position: relative; + top: 1px; + } + + .form-item-inner { + display: flex; + align-items: center; + + .el-icon { + margin-left: 10px; + } + } + } + + // 表单项样式 + .el-form { + .el-form-item__label { + color: var(--text-theme-color); + } + + .el-input, .el-slider { + width: 100%; + } + + .el-select { + width: 100%; + --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); + } + } + } + + // 网格内容项 + .grid-content { + background: var(--card-bg); + border-radius: 8px; + padding: 8px 14px; + display: flex; + cursor: pointer; + margin-bottom: 10px; + border: 1px solid var(--chat-bg); + + &:hover { + border: 1px solid var(--theme-border-hover); + } + + &.active { + border: 1px solid var(--theme-border-hover); + } + + .icon { + width: 20px; + height: 20px; + margin-bottom: 5px; + + &.proportion { + width: 20px; + height: 20px; + } + } + + .texts { + margin-left: 5px; + margin-top: 2px; + color: var(--text-theme-color); + } + } + + // 运镜控制 + .camera-control { + padding: 10px; + border-radius: 4px; + background: var(--card-bg); + + :deep(.el-form-item:last-child) { + margin-bottom: 0 !important; + } + } + + // 生成按钮 + .generate-btn { + .iconfont { + margin-right: 5px; + } + } + + // 项目组样式 + .item-group { + display: flex; + align-items: center; + margin-bottom: 15px; + + .label { + margin-right: 10px; + } + } + + // 图片模式切换样式 + .image-mode-toggle { + display: flex; + align-items: center; + justify-content: space-between; + + .label { + margin-right: 10px; + color: var(--text-theme-color); + } + } + + // 过渡动画 + .slide-fade-enter-active { + transition: all 0.3s ease-out; + } + + .slide-fade-leave-active { + transition: all 0.3s ease-in; + } + + .slide-fade-enter-from { + transform: translateY(-10px); + opacity: 0; + } + + .slide-fade-leave-to { + transform: translateY(-10px); + opacity: 0; + } + } + + // KeLing 参数面板特有样式 + .params-container { + // 任务类型标签页 + .task-type-tabs { + margin-bottom: 20px; + + .text { + margin-bottom: 10px; + color: #6b778c; + font-size: 15px; + } + } + + // 图片上传样式 + .img-inline { + display: flex; + flex-wrap: wrap; + + .img-uploader { + text-align: center; + position: relative; + + :deep(.el-upload) { + border: 1px dashed var(--el-border-color); + border-radius: 6px; + cursor: pointer; + position: relative; + overflow: hidden; + width: 120px; + height: 120px; + transition: var(--el-transition-duration-fast); + margin-bottom: 20px; + + &:hover { + border-color: var(--el-color-primary); + } + } + + .removeimg { + position: absolute; + right: -5px; + top: -5px; + z-index: 10; + cursor: pointer; + color: #f56c6c; + font-size: 20px; + } + } + + .btn-swap { + .icon-exchange { + color: var(--text-theme-color); + cursor: pointer; + font-size: 20px; + } + } + } + + // 提交按钮 + .submit-btn { + display: flex; + margin: 20px 0; + + .el-button { + width: 100%; + } + } + + // 算力信息 + .text-info { + width: 100%; + padding: 10px 0; + + .el-tag { + margin-right: 10px; + } + } + } + + // 右侧主要内容区域 + .main-content { + padding: 1.5rem; + flex: 1; + background: var(--chat-bg); + color: var(--text-theme-color); + overflow-x: hidden; + + // 作品标题栏 + .works-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + + .h-title { + color: var(--text-theme-color); + margin: 0; + } + + // .filter-buttons { + // .el-button-group { + // .el-button { + // --el-button-bg-color: var(--card-bg); + // --el-button-border-color: var(--chat-bg); + // --el-button-text-color: var(--text-theme-color); + // --el-button-hover-bg-color: var(--theme-border-hover); + // --el-button-hover-border-color: var(--theme-border-hover); + // --el-button-active-bg-color: var(--el-color-primary); + // --el-button-active-border-color: var(--el-color-primary); + + // &.is-type-primary { + // --el-button-bg-color: var(--el-color-primary); + // --el-button-border-color: var(--el-color-primary); + // --el-button-text-color: #ffffff; + // } + // } + // } + // } + } + + // 任务列表 + .video-list { + .list-box { + padding: 0; + + .item { + display: flex; + flex-flow: row; + align-items: center; + min-height: 100px; + padding: 10px 15px; + border-radius: 10px; + cursor: pointer; + margin-bottom: 20px; + background: var(--card-bg); + + .left { + .container { + width: 160px; + position: relative; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + + .video { + width: 160px; + height: 120px; + border-radius: 5px; + background-color: var(--el-fill-color-light); + } + + .el-image { + width: 160px; + height: 90px; + border-radius: 5px; + } + + .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: 100%; + height: 100%; + top: 0; + left: 50%; + border: none; + border-radius: 5px; + background: rgba(100, 100, 100, 0.3); + cursor: pointer; + color: var(--text-theme-color); + opacity: 0; + transform: translate(-50%, 0px); + transition: opacity 0.3s ease 0s; + } + + &:hover { + .play { + opacity: 1; + } + } + } + } + + .center { + width: 100%; + display: flex; + justify-content: center; + align-items: flex-start; + flex-flow: column; + padding: 0 20px; + + .prompt, .failed { + padding: 0; + font-size: 16px; + max-height: 80px; + line-height: 28px; + overflow: hidden; + text-overflow: ellipsis; + } + + .prompt { + color: var(--text-fb); + cursor: text; + } + + .failed { + color: #e4696b; + } + + .pb-2 { + padding-bottom: 8px; + + .el-tag { + margin-right: 4px; + margin-bottom: 4px; + } + } + } + + .right { + display: flex; + justify-content: right; + min-width: 200px; + font-size: 14px; + padding: 0; + + .tools { + display: flex; + justify-content: left; + 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 { + color: var(--el-color-primary); + } + + .downloading { + width: 16px; + } + } + } + } + + .right-error { + display: flex; + justify-content: center; + align-items: center; + } + } + } + + // 分页 + .pagination { + margin-top: 20px; + display: flex; + justify-content: center; + } + } + } + + // 通用按钮样式 + .btn { + margin-right: 10px; + border: none; + border-radius: 5px; + padding: 5px 10px; + cursor: pointer; + color: var(--theme-text-color-primary); + background-color: var(--btn-bg); + + &:hover { + opacity: 0.7; + } + } + + // 无数据样式 + .no-data { + text-align: center; + padding: 40px; + color: var(--text-theme-color); + } +} + +// 响应式设计 +@media (max-width: 768px) { + .page-video { + flex-direction: column; + + .params-panel { + min-width: 100%; + max-width: 100%; + margin: 10px 0; + } + + .main-content { + padding: 1rem; + + .video-list .list-box .item { + .left .container { + width: 120px; + + .video, .el-image { + width: 120px; + } + } + + .center { + padding: 0 10px; + } + + .right { + min-width: 120px; + } + } + } + } } \ No newline at end of file diff --git a/web/src/assets/css/waterfall-list.scss b/web/src/assets/css/waterfall-list.scss new file mode 100644 index 00000000..925a83c2 --- /dev/null +++ b/web/src/assets/css/waterfall-list.scss @@ -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; + } + } + } +} diff --git a/web/src/assets/css/waterfall-list.styl b/web/src/assets/css/waterfall-list.styl deleted file mode 100644 index 4c9ccd0d..00000000 --- a/web/src/assets/css/waterfall-list.styl +++ /dev/null @@ -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 - } - } - } -} \ No newline at end of file diff --git a/web/src/components/AccountBg.vue b/web/src/components/AccountBg.vue index 312a4c30..282a14e5 100644 --- a/web/src/components/AccountBg.vue +++ b/web/src/components/AccountBg.vue @@ -1,7 +1,12 @@ - diff --git a/web/src/components/BackTop.vue b/web/src/components/BackTop.vue index dd63466d..accef7b8 100644 --- a/web/src/components/BackTop.vue +++ b/web/src/components/BackTop.vue @@ -6,7 +6,7 @@ :style="{ bottom: bottom + 'px', right: right + 'px', - backgroundColor: bgColor + backgroundColor: bgColor, }" > @@ -14,56 +14,56 @@ - \ No newline at end of file + diff --git a/web/src/components/BindMobile.vue b/web/src/components/BindMobile.vue index 3fe45fd5..0184a73d 100644 --- a/web/src/components/BindMobile.vue +++ b/web/src/components/BindMobile.vue @@ -1,25 +1,25 @@ - \ No newline at end of file + diff --git a/web/src/components/Calling.vue b/web/src/components/Calling.vue index e7b6c724..3197a584 100644 --- a/web/src/components/Calling.vue +++ b/web/src/components/Calling.vue @@ -1,6 +1,6 @@ - \ No newline at end of file + diff --git a/web/src/components/Captcha.vue b/web/src/components/Captcha.vue index 0d769a23..c96ef862 100644 --- a/web/src/components/Captcha.vue +++ b/web/src/components/Captcha.vue @@ -1,8 +1,17 @@ - diff --git a/web/src/components/ChatReply.vue b/web/src/components/ChatReply.vue index ea116b87..2aecee88 100644 --- a/web/src/components/ChatReply.vue +++ b/web/src/components/ChatReply.vue @@ -311,11 +311,13 @@ const handleExpandClick = (e) => { } - diff --git a/web/src/components/ChatSetting.vue b/web/src/components/ChatSetting.vue index d838d602..3c24a4d5 100644 --- a/web/src/components/ChatSetting.vue +++ b/web/src/components/ChatSetting.vue @@ -45,9 +45,9 @@ - + diff --git a/web/src/components/CountDown.vue b/web/src/components/CountDown.vue index 75a15b0c..8ab3a7eb 100644 --- a/web/src/components/CountDown.vue +++ b/web/src/components/CountDown.vue @@ -5,28 +5,30 @@ - \ No newline at end of file + diff --git a/web/src/components/FileList.vue b/web/src/components/FileList.vue index 002d8633..b0b739c0 100644 --- a/web/src/components/FileList.vue +++ b/web/src/components/FileList.vue @@ -13,7 +13,9 @@
- {{ substr(file.name, 30) }} + {{ + substr(file.name, 30) + }}
{{ GetFileType(file.ext) }} @@ -29,89 +31,94 @@ - diff --git a/web/src/components/ItemList.vue b/web/src/components/ItemList.vue index 98c5b26d..e87bf2fe 100644 --- a/web/src/components/ItemList.vue +++ b/web/src/components/ItemList.vue @@ -1,7 +1,12 @@ - \ No newline at end of file + diff --git a/web/src/components/UserInfoDialog.vue b/web/src/components/UserInfoDialog.vue index 558f6064..e4c4b88d 100644 --- a/web/src/components/UserInfoDialog.vue +++ b/web/src/components/UserInfoDialog.vue @@ -1,5 +1,12 @@ - diff --git a/web/src/components/UserOrder.vue b/web/src/components/UserOrder.vue index 89c56a2a..c13f72ef 100644 --- a/web/src/components/UserOrder.vue +++ b/web/src/components/UserOrder.vue @@ -21,7 +21,7 @@ @@ -45,52 +45,52 @@ - diff --git a/web/src/components/UserProfile.vue b/web/src/components/UserProfile.vue index fe5d41bf..822a7307 100644 --- a/web/src/components/UserProfile.vue +++ b/web/src/components/UserProfile.vue @@ -2,7 +2,13 @@
- - diff --git a/web/src/views/ExternalPage.vue b/web/src/views/ExternalPage.vue index 72e13f98..e6fcbaab 100644 --- a/web/src/views/ExternalPage.vue +++ b/web/src/views/ExternalPage.vue @@ -10,34 +10,34 @@
- diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index 2e70a6a0..cc525c3b 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -302,7 +302,7 @@ const loginSuccess = () => { } - diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue index 603399cb..e005464b 100644 --- a/web/src/views/ImageMj.vue +++ b/web/src/views/ImageMj.vue @@ -1311,7 +1311,7 @@ const generatePrompt = () => { } - diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue index 1be8b9bf..3597fd0e 100644 --- a/web/src/views/ImageSd.vue +++ b/web/src/views/ImageSd.vue @@ -752,7 +752,7 @@ const generatePrompt = () => { } - diff --git a/web/src/views/ImagesWall.vue b/web/src/views/ImagesWall.vue index 0cbe70b1..cd0da35b 100644 --- a/web/src/views/ImagesWall.vue +++ b/web/src/views/ImagesWall.vue @@ -371,7 +371,7 @@ const drawSameMj = (row) => { } - diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue index 81c6d4ec..ad1ad07a 100644 --- a/web/src/views/Index.vue +++ b/web/src/views/Index.vue @@ -143,6 +143,6 @@ const logout = () => { } - diff --git a/web/src/views/Invitation.vue b/web/src/views/Invitation.vue index b5d6f2f2..8b775f7e 100644 --- a/web/src/views/Invitation.vue +++ b/web/src/views/Invitation.vue @@ -162,114 +162,105 @@ const initData = () => { } - diff --git a/web/src/views/Jimeng.vue b/web/src/views/Jimeng.vue index dd3b938b..e22e6b21 100644 --- a/web/src/views/Jimeng.vue +++ b/web/src/views/Jimeng.vue @@ -545,7 +545,7 @@ - diff --git a/web/src/views/Member.vue b/web/src/views/Member.vue index efc3764f..ba33b5aa 100644 --- a/web/src/views/Member.vue +++ b/web/src/views/Member.vue @@ -296,7 +296,7 @@ const payCallback = (success) => { } - diff --git a/web/src/views/PowerLog.vue b/web/src/views/PowerLog.vue index 14244414..a6b53e0b 100644 --- a/web/src/views/PowerLog.vue +++ b/web/src/views/PowerLog.vue @@ -138,38 +138,39 @@ const fetchData = () => { } - diff --git a/web/src/views/Song.vue b/web/src/views/Song.vue index 9c39a7d5..2dbcdde7 100644 --- a/web/src/views/Song.vue +++ b/web/src/views/Song.vue @@ -91,6 +91,6 @@ const getShareURL = (item) => { } - diff --git a/web/src/views/Suno.vue b/web/src/views/Suno.vue index f3317eb3..cafa4383 100644 --- a/web/src/views/Suno.vue +++ b/web/src/views/Suno.vue @@ -736,6 +736,6 @@ const createLyric = () => { } - diff --git a/web/src/views/Test.vue b/web/src/views/Test.vue index 2d20e9cf..8eb98e3b 100644 --- a/web/src/views/Test.vue +++ b/web/src/views/Test.vue @@ -1,27 +1,24 @@ - \ No newline at end of file + diff --git a/web/src/views/Video.vue b/web/src/views/Video.vue index bb01df83..44a4745e 100644 --- a/web/src/views/Video.vue +++ b/web/src/views/Video.vue @@ -640,6 +640,6 @@ onUnmounted(() => { }) - diff --git a/web/src/views/admin/Apps.vue b/web/src/views/admin/Apps.vue index c600eb93..2def3b2d 100644 --- a/web/src/views/admin/Apps.vue +++ b/web/src/views/admin/Apps.vue @@ -39,8 +39,14 @@ diff --git a/web/src/views/admin/jimeng/JimengSetting.vue b/web/src/views/admin/jimeng/JimengSetting.vue index d63c09d4..61203a35 100644 --- a/web/src/views/admin/jimeng/JimengSetting.vue +++ b/web/src/views/admin/jimeng/JimengSetting.vue @@ -284,27 +284,27 @@ const resetConfig = () => { } - diff --git a/web/src/views/admin/records/ChatList.vue b/web/src/views/admin/records/ChatList.vue index 16d53562..3307177c 100644 --- a/web/src/views/admin/records/ChatList.vue +++ b/web/src/views/admin/records/ChatList.vue @@ -365,20 +365,20 @@ const showMessages = (row) => { } - diff --git a/web/src/views/admin/records/ImageList.vue b/web/src/views/admin/records/ImageList.vue index 92c8323b..7432370b 100644 --- a/web/src/views/admin/records/ImageList.vue +++ b/web/src/views/admin/records/ImageList.vue @@ -370,11 +370,11 @@ - diff --git a/web/src/views/admin/records/Medias.vue b/web/src/views/admin/records/Medias.vue index 5721fffb..01788949 100644 --- a/web/src/views/admin/records/Medias.vue +++ b/web/src/views/admin/records/Medias.vue @@ -391,20 +391,20 @@ const showLyric = (item) => { } - diff --git a/web/src/views/mobile/Apps.vue b/web/src/views/mobile/Apps.vue index 03d36caf..493f5f9c 100644 --- a/web/src/views/mobile/Apps.vue +++ b/web/src/views/mobile/Apps.vue @@ -188,77 +188,77 @@ const useRole = (roleId) => { } - diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue index 800838ef..8bcb6dee 100644 --- a/web/src/views/mobile/ChatSession.vue +++ b/web/src/views/mobile/ChatSession.vue @@ -631,6 +631,6 @@ const onChange = (item) => { } - diff --git a/web/src/views/mobile/Home.vue b/web/src/views/mobile/Home.vue index 7513c204..a9dd1390 100644 --- a/web/src/views/mobile/Home.vue +++ b/web/src/views/mobile/Home.vue @@ -29,27 +29,27 @@ watch( ) - diff --git a/web/src/views/mobile/Image.vue b/web/src/views/mobile/Image.vue index 3b259949..5ca964ad 100644 --- a/web/src/views/mobile/Image.vue +++ b/web/src/views/mobile/Image.vue @@ -15,37 +15,37 @@ - diff --git a/web/src/views/mobile/pages/ImageDall.vue b/web/src/views/mobile/pages/ImageDall.vue index c6f9cb3d..a635f62b 100644 --- a/web/src/views/mobile/pages/ImageDall.vue +++ b/web/src/views/mobile/pages/ImageDall.vue @@ -517,6 +517,6 @@ const modelConfirm = (item) => { } - diff --git a/web/src/views/mobile/pages/ImageMj.vue b/web/src/views/mobile/pages/ImageMj.vue index 9e89b123..e829b052 100644 --- a/web/src/views/mobile/pages/ImageMj.vue +++ b/web/src/views/mobile/pages/ImageMj.vue @@ -734,6 +734,6 @@ const tabChange = (tab) => { } - diff --git a/web/src/views/mobile/pages/ImageSd.vue b/web/src/views/mobile/pages/ImageSd.vue index 201eae92..351eb921 100644 --- a/web/src/views/mobile/pages/ImageSd.vue +++ b/web/src/views/mobile/pages/ImageSd.vue @@ -562,6 +562,6 @@ const showInfo = (message) => { } - diff --git a/web/src/views/mobile/pages/ImgWall.vue b/web/src/views/mobile/pages/ImgWall.vue index b89c6a67..c636a55d 100644 --- a/web/src/views/mobile/pages/ImgWall.vue +++ b/web/src/views/mobile/pages/ImgWall.vue @@ -4,16 +4,16 @@ - +
@@ -25,15 +25,15 @@ - +
@@ -45,15 +45,15 @@ - +
@@ -66,63 +66,68 @@
-
-