xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-13 04:33:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: midjourney page parameter ui is ready

Browse Source
This commit is contained in:
RockYang
2023-09-14 18:28:24 +08:00
parent 8a5713ef7c
commit 638b399b31
5 changed files with 692 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
web/src/assets/css/image-mj.styl Normal file
View File

@@ -0,0 +1,234 @@
.page-mj {
background-color: #282c34;
.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
top 3px
}
.grid-content {
background-color #383838
border-radius 5px
padding 8px 14px
display flex
cursor pointer
&:hover {
background-color #585858
}
.shape {
width 16px
height 16px
margin-right 5px
border 1px solid #C4C4C4
border-radius 3px
}
.shape.vertical {
width 12px
height 20px
}
.shape.horizontal {
height 12px
width 20px
position relative
top 3px
}
}
.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
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
.el-icon {
margin-left 10px
margin-top 2px
}
}
.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 {
padding-top 5px
padding-bottom 5px
}
}
.submit-btn {
padding 10px 15px 0 15px
text-align center
.el-button {
width 100%
span {
color #2D3A4B
}
}
}
}
.el-form {
.el-form-item__label {
color #ffffff
}
.el-input, .el-slider {
width 180px
}
}
.task-list-box {
width 100%
padding 10px
color #ffffff
overflow-x hidden
overflow-y auto
.task-list-inner {
.grid-content {
margin-bottom 20px
.opt {
.opt-line {
margin 6px 0
ul {
display flex
flex-flow row
li {
margin-right 10px
a {
padding 3px 0
width 50px
text-align center
border-radius 5px
display block
cursor pointer
background-color #4E5058
color #ffffff
&:hover {
background-color #6D6F78
}
}
}
}
}
}
}
}
}
}
}