stylus 语法换成 saas 语法

web/src/assets/css/image-dall.scss

@@ -0,0 +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.scss';
+      }
+
+      .no-more-data {
+        text-align: center;
+        padding: 30px;
+      }
+    }
+  }
+}