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

feat: refactor midjourney image creating page

Browse Source
This commit is contained in:
RockYang
2023-12-06 18:54:30 +08:00
parent ae8239e5de
commit babef8baae
25 changed files with 895 additions and 726 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
web/src/assets/css/image-mj.css
View File

@@ -35,7 +35,6 @@
}
.page-mj .inner .mj-box .mj-params .param-line .el-icon {
position: relative;
top: 3px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content {
background-color: #383838;
@@ -43,26 +42,62 @@
padding: 8px 14px;
display: flex;
cursor: pointer;
margin-bottom: 10px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content:hover {
background-color: #585858;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .icon {
width: 20px;
height: 20px;
margin-bottom: 5px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape {
width: 16px;
height: 16px;
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid #c4c4c4;
border-radius: 3px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.vertical {
width: 12px;
height: 20px;
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size9-16 {
width: 9px;
height: 16px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.horizontal {
height: 12px;
width: 20px;
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size16-9 {
height: 9px;
width: 16px;
position: relative;
top: 3px;
margin: 4px 0 7px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size3-4 {
width: 12px;
height: 16px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size4-3 {
height: 12px;
width: 16px;
position: relative;
margin: 4px 0 4px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size2-3 {
width: 11px;
height: 16px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size3-2 {
height: 11px;
width: 16px;
position: relative;
margin: 4px 0 5px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size1-2 {
width: 8px;
height: 16px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size2-1 {
height: 8px;
width: 16px;
position: relative;
margin: 4px 0 8px;
}
.page-mj .inner .mj-box .mj-params .param-line .grid-content.active {
color: #47fff1;
@@ -76,6 +111,7 @@
border: 1px solid #454545;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
display: flex;
flex-flow: column;
align-items: center;
@@ -98,10 +134,20 @@
}
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner {
display: flex;
align-items: center;
}
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-select {
--el-select-input-focus-border-color: #47fff1;
--el-input-focus-border-color: #47fff1;
}
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-input__wrapper {
background: #383838;
}
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-input__inner {
color: #fff;
}
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-icon {
margin-left: 10px;
margin-top: 2px;
}
.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload {
border: 1px dashed var(--el-border-color);
@@ -123,19 +169,11 @@
text-align: center;
}
.page-mj .inner .mj-box .mj-params .param-line.pt {
display: flex;
align-items: center;
padding-top: 5px;
padding-bottom: 5px;
}
.page-mj .inner .mj-box .submit-btn {
padding: 10px 15px 0 15px;
text-align: center;
}
.page-mj .inner .mj-box .submit-btn .el-button {
width: 100%;
}
.page-mj .inner .mj-box .submit-btn .el-button span {
color: #2d3a4b;
}
.page-mj .inner .el-form .el-form-item__label {
color: #fff;
}
@@ -149,6 +187,86 @@
color: #fff;
overflow-x: hidden;
}
.page-mj .inner .task-list-box .task-list-inner .el-tabs {
--el-tabs-header-height: 55px;
}
.page-mj .inner .task-list-box .task-list-inner .el-tabs__item {
color: #fff;
font-size: 18px;
}
.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__item.is-active {
color: #47fff1;
font-size: 18px;
}
.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__active-bar {
background-color: #47fff1;
}
.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__content {
padding: 10px 0;
}
.page-mj .inner .task-list-box .task-list-inner .el-textarea {
--el-input-focus-border-color: #47fff1;
}
.page-mj .inner .task-list-box .task-list-inner .el-textarea__inner {
background: transparent;
color: #fff;
}
.page-mj .inner .task-list-box .task-list-inner .el-input__wrapper {
background: transparent;
padding: 5px;
}
.page-mj .inner .task-list-box .task-list-inner .text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px;
}
.page-mj .inner .task-list-box .task-list-inner .param-line.pt {
padding-top: 5px;
padding-bottom: 5px;
}
.page-mj .inner .task-list-box .task-list-inner .form-item-inner {
display: flex;
align-items: center;
}
.page-mj .inner .task-list-box .task-list-inner .form-item-inner .el-icon {
margin-left: 10px;
}
.page-mj .inner .task-list-box .task-list-inner .el-form-item__label {
color: #fff;
}
.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 300px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
}
.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload .el-icon.uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 120px;
text-align: center;
}
.page-mj .inner .task-list-box .task-list-inner .submit-btn {
display: flex;
margin: 20px 0;
}
.page-mj .inner .task-list-box .task-list-inner .submit-btn .el-button {
width: 200px;
}
.page-mj .inner .task-list-box .task-list-inner .submit-btn .text-info {
width: 100%;
display: flex;
justify-content: right;
align-items: center;
}
.page-mj .inner .task-list-box .running-job-list .job-item {
width: 100%;
padding: 2px;
@@ -253,5 +371,4 @@
margin-left: 10px;
cursor: pointer;
position: relative;
top: 2px;
}

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

@@ -54,7 +54,7 @@
background-color #585858
}
.icon{
.icon {
width 20px
height 20px
margin-bottom 5px
@@ -162,17 +162,20 @@
.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
}
@@ -211,19 +214,6 @@
padding-bottom 5px
}
}
.submit-btn {
padding 10px 15px 0 15px
text-align center
.el-button {
width 100%
span {
color #2D3A4B
}
}
}
}
.el-form {

80
web/src/assets/css/image-sd.css
View File

@@ -72,6 +72,86 @@
color: #fff;
overflow-x: hidden;
}
.page-sd .inner .task-list-box .task-list-inner .el-tabs {
--el-tabs-header-height: 55px;
}
.page-sd .inner .task-list-box .task-list-inner .el-tabs__item {
color: #fff;
font-size: 18px;
}
.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__item.is-active {
color: #47fff1;
font-size: 18px;
}
.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__active-bar {
background-color: #47fff1;
}
.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__content {
padding: 10px 0;
}
.page-sd .inner .task-list-box .task-list-inner .el-textarea {
--el-input-focus-border-color: #47fff1;
}
.page-sd .inner .task-list-box .task-list-inner .el-textarea__inner {
background: transparent;
color: #fff;
}
.page-sd .inner .task-list-box .task-list-inner .el-input__wrapper {
background: transparent;
padding: 5px;
}
.page-sd .inner .task-list-box .task-list-inner .text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px;
}
.page-sd .inner .task-list-box .task-list-inner .param-line.pt {
padding-top: 5px;
padding-bottom: 5px;
}
.page-sd .inner .task-list-box .task-list-inner .form-item-inner {
display: flex;
align-items: center;
}
.page-sd .inner .task-list-box .task-list-inner .form-item-inner .el-icon {
margin-left: 10px;
}
.page-sd .inner .task-list-box .task-list-inner .el-form-item__label {
color: #fff;
}
.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 300px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
}
.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload .el-icon.uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 120px;
text-align: center;
}
.page-sd .inner .task-list-box .task-list-inner .submit-btn {
display: flex;
margin: 20px 0;
}
.page-sd .inner .task-list-box .task-list-inner .submit-btn .el-button {
width: 200px;
}
.page-sd .inner .task-list-box .task-list-inner .submit-btn .text-info {
width: 100%;
display: flex;
justify-content: right;
align-items: center;
}
.page-sd .inner .task-list-box .running-job-list .job-item {
width: 100%;
padding: 2px;

39
web/src/assets/css/task-list.styl
View File

@@ -8,24 +8,29 @@
.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;
color: #47FFF1;
font-size: 18px;
}
.title-tabs .el-tabs__active-bar {
background-color: #47FFF1;
background-color: #47FFF1;
}
.title-tabs .el-tabs__content {
padding: 10px 0;
}
.el-textarea {
--el-input-focus-border-color: #47FFF1;
--el-input-focus-border-color: #47FFF1;
}
.el-textarea__inner {
background: transparent;
color: #fff;
@@ -36,8 +41,8 @@
padding 5px
}
.text{
margin-bottom: 10px;
.text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px
}
@@ -85,16 +90,20 @@
}
}
.submit-btn{
margin: 20px 0
.submit-btn {
display flex
margin: 20px 0
.el-icon.submit-icon {
font-size: 28px
width 100%
height: 100px
text-align: center
margin-right: 10px
}
.el-button {
width 200px
}
.text-info {
width 100%
display flex
justify-content right
align-items center
}
}
}