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

.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;
      }
    }
  }
}