proginn-frontend/assets/css/kaifain/kaifainAdd.scss

* {
  box-sizing: border-box;
}

.kaifainAdd {
  background-color: #fff;
  .topArea {
    margin: auto;
    width: 1000px;
    padding: 25px 20px 0px 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .title {
      font-size: 28px;
      font-weight: 500;
      color: rgba(34, 34, 34, 1);
      line-height: 40px;
      position: relative;
      width: 100%;
      text-align: center;

      .backBox {
        position: absolute;
        top: 0;
        left: 0;
        height: 32px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .backIcon {
          width: 16px;
          height: 16px;
          background: url('~@/assets/img/credit/icon_back@2x.png');
          background-size: cover;
        }
        .backWord {
          height: 22px;
          font-size: 16px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 22px;
          margin-left: 5px;
        }

      }
    }
    .line {
      margin-top: 26px;
      width: 960px;
      height: 2px;
      background: rgba(0, 0, 0, 0.06);;
    }
  }

  .bodyArea {
    min-height: 100px;
    width: 100%;
    padding: 20px;
    max-width: 1000px;
    position: relative;
    margin: auto;

    .statusBox {
      position: absolute;
      right: 20px;
      top: 30px;
      width: 76px;
      height: 30px;
      border-radius: 3px;
      border: 1px solid rgba(16, 185, 106, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(16, 185, 106, 1);
        line-height: 20px;
      }
      &.none {
        background: rgba(235, 235, 235, 1);
        border: none;
        border-radius: 3px;
        p {
          height: 20px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(136, 136, 136, 1);
          line-height: 20px;
        }
      }
    }

    .stitle {
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(25, 34, 46, 1);
      line-height: 20px;
      margin-bottom: 5px;

      span {
        margin-left: 20px;
        height: 18px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(48, 142, 255, 1);
        line-height: 18px;
      }
    }

    .statusBox, .nameBox, .logoBox {
      input {
        width: 768px;
        height: 44px;
      }
    }
    .selectArea {
      margin-top: 20px;
      display: flex;
      .left {
        width: 280px;
      }
      .right {
        margin-left: 10px;
        width: 427px;
      }
    }
    .logoBox {
      margin-top: 20px;
      .uploadInfo {
        display: flex;
        .left {

        }
        .right {
          margin-left: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            height: 17px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 17px;
          }
        }
      }
    }

    .smallIntro, .intro {
      margin-top: 20px;
    }

    .intro {
      .stitle {
        span {
          cursor: pointer;
        }
      }
      .editor {
        max-width: 768px;
        width: 100%;
        height: 380px;
        background: rgba(255, 255, 255, 1);
        border-radius: 3px;
        border: 1px solid rgba(215, 223, 232, 1);
      }
    }

    .successIntro {
      margin-top: 30px;
      .list {
        width: 768px;
        .titleCell {
          background: rgba(250, 250, 250, 1);
          border-radius: 4px;
          height: 54px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .tt1, .tt2, .tt3, .tt4 {
            height: 54px;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
              font-size: 14px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);
              line-height: 21px;
            }
          }
          .tt1 {
            width: 115px;
          }
          .tt2 {
            width: 446px;
            p {
              margin-left: 30px;
            }
          }
          .tt3 {
            width: 102px;
          }
          .tt4 {
            width: 102px;
          }
        }
        .cell {
          cursor: pointer;
          height: 130px;
          width: 100%;
          display: flex;
          border-bottom: 1px solid #EDEDED;
          .img {
            font-size: 0;
            width: 115px;
            height: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 96px;
              height: 96px;
            }
          }
          .content {
            width: 446px;
            height: 130px;
            padding: 30px;
            p {
              height: 63px;
              font-size: 13px;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 21px;
            }
          }
          .pdf {
            width: 102px;
            height: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
            .icon {
              width: 25px;
              height: 25px;
              background: url('~@/assets/img/kaifain/add/icon_pdf@2x.png') no-repeat;
              background-size: cover;
            }
            p {
              margin-top: 3px;
              height: 17px;
              font-size: 12px;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 17px;
            }
          }
          .del {
            width: 102px;
            height: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .icon {
              width: 18px;
              height: 18px;
              background: url('~@/assets/img/kaifain/add/icon_del@2x.png') no-repeat;
              background-size: cover;
            }
          }
        }
        .addCell {
          height: 80px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid #EDEDED;
          cursor: pointer;

          .icon {
            width: 20px;
            height: 20px;
            background: url('~@/assets/img/kaifain/add/icon_add@2x.png') no-repeat;
            background-size: cover;
          }
          p {
            margin-left: 4px;
            //height:21px;
            //font-size:14px;
            font-weight:600;
            color:rgba(48,142,255,1);
            //line-height:21px;
          }
        }
      }
    }
    .bottomBtn {
      margin-top: 38px;
      display: flex;
      align-items: center;

      .preview {
        cursor: pointer;
        color: #666;
      }
      .submit {
        margin-left: 10px;
        width:159px;
        height:44px;
        background:rgba(48,142,255,1);
        box-shadow:0px 2px 6px 0px rgba(48,142,255,0.3);
        border-radius:2px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          height:20px;
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,1);
          line-height:20px;
        }
      }
      .keepTmp {
        margin-left: 10px;
        width:159px;
        height:44px;
        background:rgba(236,236,236,1);
        border-radius:2px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          height:20px;
          font-size:14px;
          font-weight:500;
          color:rgba(102,102,102,1);
          line-height:20px;
        }
      }
    }
  }
}