mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-18 17:26:38 +08:00
520 lines
11 KiB
Stylus
520 lines
11 KiB
Stylus
.page-mj {
|
|
background-color: #282c34;
|
|
height 100vh
|
|
|
|
.inner {
|
|
display: flex;
|
|
|
|
.mj-box {
|
|
margin 10px
|
|
background-color #262626
|
|
border 1px solid #454545
|
|
min-width 300px
|
|
max-width 300px
|
|
padding 10px
|
|
border-radius 10px
|
|
color #ffffff;
|
|
font-size 14px
|
|
|
|
h2 {
|
|
font-weight: bold;
|
|
font-size 20px
|
|
text-align center
|
|
color #47fff1
|
|
}
|
|
|
|
// 隐藏滚动条
|
|
|
|
::-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
|
|
border-radius 5px
|
|
padding 8px 14px
|
|
display flex
|
|
cursor pointer
|
|
margin-bottom: 10px;
|
|
|
|
&:hover {
|
|
background-color #585858
|
|
}
|
|
|
|
.icon {
|
|
width 20px
|
|
height 20px
|
|
margin-bottom 5px
|
|
}
|
|
|
|
.shape {
|
|
width 16px
|
|
height 16px
|
|
margin-bottom 5px
|
|
border 1px solid #C4C4C4
|
|
border-radius 3px
|
|
}
|
|
|
|
.shape.size9-16 {
|
|
width 9px
|
|
height 16px
|
|
}
|
|
|
|
.shape.size16-9 {
|
|
height 9px
|
|
width 16px
|
|
position relative
|
|
margin 4px 0 7px
|
|
}
|
|
|
|
.shape.size3-4 {
|
|
width 12px
|
|
height 16px
|
|
}
|
|
|
|
.shape.size4-3 {
|
|
height 12px
|
|
width 16px
|
|
position relative
|
|
margin 4px 0 4px
|
|
}
|
|
|
|
.shape.size2-3 {
|
|
width 11px
|
|
height 16px
|
|
}
|
|
|
|
.shape.size3-2 {
|
|
height 11px
|
|
width 16px
|
|
position relative
|
|
margin 4px 0 5px
|
|
}
|
|
|
|
.shape.size1-2 {
|
|
width 8px
|
|
height 16px
|
|
}
|
|
|
|
.shape.size2-1 {
|
|
height 8px
|
|
width 16px
|
|
position relative
|
|
margin 4px 0 8px
|
|
}
|
|
}
|
|
|
|
|
|
.grid-content.active {
|
|
color #47fff1
|
|
background-color #585858
|
|
|
|
.shape {
|
|
border 1px solid #47fff1
|
|
}
|
|
}
|
|
|
|
.model {
|
|
background-color #383838
|
|
border 1px solid #454545
|
|
border-radius 5px
|
|
padding 10px
|
|
margin-bottom 10px
|
|
display flex
|
|
flex-flow column
|
|
align-items center
|
|
cursor pointer
|
|
|
|
&:hover {
|
|
background-color #585858
|
|
}
|
|
|
|
.el-image {
|
|
height 60px
|
|
width 100%
|
|
}
|
|
|
|
.text {
|
|
margin-top 6px
|
|
}
|
|
|
|
}
|
|
|
|
.model.active {
|
|
color #47fff1
|
|
background-color #585858
|
|
border 1px solid #47fff1
|
|
}
|
|
|
|
.form-item-inner {
|
|
display flex
|
|
align-items: center
|
|
|
|
.el-select {
|
|
--el-select-input-focus-border-color: #47FFF1;
|
|
--el-input-focus-border-color: #47FFF1;
|
|
}
|
|
|
|
.el-input__wrapper {
|
|
background: #383838;
|
|
}
|
|
|
|
.el-input__inner {
|
|
color: #fff
|
|
}
|
|
|
|
.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 #ffffff
|
|
}
|
|
|
|
.el-input, .el-slider {
|
|
width 180px
|
|
}
|
|
|
|
.uploader-icon {
|
|
font-size 24px
|
|
position relative
|
|
top 3px
|
|
}
|
|
}
|
|
|
|
.task-list-box {
|
|
width 100%
|
|
padding 10px
|
|
color #ffffff
|
|
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 #ffffff
|
|
}
|
|
|
|
// 图片上传样式
|
|
|
|
.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 #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
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.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 200px
|
|
color #ffffff
|
|
|
|
.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
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.mj-list-item-prompt {
|
|
.el-icon {
|
|
margin-left 10px
|
|
cursor pointer
|
|
position relative
|
|
}
|
|
} |