feat: stable diffusion page is ready

web/src/assets/css/image-sd.styl

@@ -0,0 +1,255 @@
+.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
+      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;
+      }
+
+      .sd-params {
+        margin-top 10px
+        overflow auto
+
+
+        .param-line {
+          padding 0 10px
+
+          .el-icon {
+            position relative
+            top 3px
+          }
+
+          .el-input__suffix-inner {
+            .el-icon {
+              top 0
+            }
+          }
+
+          .grid-content
+          .form-item-inner {
+            display flex
+
+            .el-icon {
+              margin-left 10px
+              margin-top 2px
+            }
+          }
+
+        }
+
+        .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
+      }
+    }
+
+    /* 修改滚动条的颜色 */
+
+    ::-webkit-scrollbar {
+      width: 10px; /* 滚动条宽度 */
+    }
+
+    /* 修改滚动条轨道的背景颜色 */
+
+    ::-webkit-scrollbar-track {
+      background-color: #282C34;
+    }
+
+    /* 修改滚动条的滑块颜色 */
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #444444;
+      border-radius 10px
+    }
+
+    /* 修改滚动条的滑块的悬停颜色 */
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: #666666;
+    }
+
+    .task-list-box {
+      width 100%
+      padding 10px
+      color #ffffff
+      overflow-x hidden
+
+      .running-job-list {
+        .job-item {
+          //border: 1px solid #454545;
+          width: 100%;
+          padding 2px
+          background-color #555555
+
+          .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 #ffffff
+              }
+            }
+          }
+        }
+      }
+
+
+      .finish-job-list {
+        .job-item {
+          width 100%
+          height 100%
+
+          .opt {
+            .opt-line {
+              margin 6px 0
+
+              ul {
+                display flex
+                flex-flow row
+
+                li {
+                  margin-right 10px
+
+                  a {
+                    padding 3px 0
+                    width 44px
+                    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
+                }
+              }
+            }
+          }
+
+        }
+
+      }
+
+      .el-image {
+        width 100%
+        height 100%
+        max-height 240px
+
+        img {
+          height 240px
+        }
+
+        .el-image-viewer__wrapper {
+          img {
+            width auto
+            height auto
+          }
+        }
+
+        .image-slot {
+          display flex
+          flex-flow column
+          justify-content center
+          align-items center
+          height 100%
+          min-height 200px
+          color #ffffff
+
+          .iconfont {
+            font-size 50px
+            margin-bottom 10px
+          }
+        }
+      }
+
+      .el-image.upscale {
+        max-height 304px
+
+        img {
+          height 304px
+        }
+
+        .el-image-viewer__wrapper {
+          img {
+            width auto
+            height auto
+          }
+        }
+      }
+    }
+  }
+
+}
+
+.mj-list-item-prompt {
+  .el-icon {
+    margin-left 10px
+    cursor pointer
+    position relative
+    top 2px
+  }
+}