geekai/web/src/assets/css/mobile/image-mj.styl

.mobile-mj {
  .text-line {
    padding 6px
    font-size 14px

    .van-row {
      .van-col {
        .rate {
          display: flex;
          justify-content center
          background-color var(--van-background-3)
          padding 5px 10px
          margin 5px 0
          border-radius 5px
          flex-flow column

          .icon {
            text-align center

            .van-image {
              max-width 20px
            }
          }

          .text {
            text-align center
            color var(--van-text-color)
          }
        }

        .model {
          display: flex;
          justify-content center
          background-color var(--van-background-3)
          padding 6px
          margin 5px 0
          border-radius 5px
          flex-flow column

          .icon {
            text-align center

            .van-image {
              width 100%
              height 50px
            }
          }

          .text {
            text-align center
            color var(--van-text-color)
          }
        }

        .active {
          background-color var(--van-text-color-3)
        }
      }
    }

    .van-button {
      position relative

      .van-tag {
        position absolute
        right 20px
      }
    }

    .align-right {
      display flex
      justify-content right
    }
  }


  color var(--van-text-color)
  .pt-6 {
    padding 15px 10px
  }

  .tip-text {
    padding 10px
    line-height 1.5
    color #c1c1c1
  }

  .running-job-list {
    .van-grid {
      .van-grid-item {
        .van-grid-item__content {
          padding 0
          position relative

          .van-image, .task-in-queue {
            min-height 100px
          }

          .progress {
            display flex
            justify-content center
            align-items center
            width 100%
            height 100%
            background rgba(50, 50, 50, 0.5)
            position absolute
            left 0
            top 0

            .van-circle__text {
              color #ffffff
            }
          }

          // end progress

          .task-in-queue {
            display flex
            flex-flow column
            justify-content center
            color #c1c1c1

            .icon {
              text-align center

              .iconfont {
                font-size 24px
              }
            }

            .text {
              font-size 14px
              margin-top 5px
            }
          }
        }
      }
    }
  }

  //end running jobs

  .finish-job-list {
    .van-grid {
      .van-grid-item {
        .van-grid-item__content {
          padding 0

          .job-item {
            overflow hidden
            border-radius 6px
            position relative
            height 100%
            width 100%

            .opt {
              .opt-btn {
                padding 2px 0
                text-align center
                border-radius 5px
                margin 3px 0
                display block
                cursor pointer
                background-color #4E5058
                color #ffffff
                font-size 14px
                width 100%
              }
            }

            .van-image {
              width 100%
              height 200px
            }

            .upscale {
              height 260px
              width 100%
            }

            .remove {
              position absolute
              right 5px
              top 5px

              .el-button {
                margin-left 5px
                height auto
                padding 5px
              }
            }
          }

          .failed {
            display flex
            flex-flow column
            justify-content center

            .title {
              margin-bottom 20px
              text-align center
              color #ee0a24
              font-size 18px
            }
            .opt {
              display flex
              justify-content center
              .van-button {
                margin 0 5px
              }
            }
          }
        }
      }
    }
  }
}