@import "../scssCommon.scss";

.companyComplete {
  width: 1000px !important;
  min-height: 937px;
  background: rgba(255, 255, 255, 1);

  .titleArea {
    width: calc(100% - 40px);
    height: 90px;
    margin: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    flex-direction: column;
    .title {
      height:37px;
      font-size:26px;
      font-weight:600;
      color:rgba(29,42,58,1);
      line-height:37px;
    }
    .smallTitle {
      height:24px;
      font-size:12px;
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height:24px;
    }
  }

  .bodyArea {
    width: 500px;
    margin: 0 auto;


    .topSteps {
      height: 130px;
      display: flex;
      justify-content: center;
      align-items: center;

      .cell {
        width: 60px;
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .number {
          width:26px;
          height:26px;
          border:1px solid rgba(204,204,204,1);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          font-size:13px;
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:26.01px
        }
        .word {
          text-align: center;
          height:18px;
          font-size:14px;
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:18px;
          margin-top: 13px;
          word-break: break-all;
          white-space: nowrap;
        }
        &.ok {
          .number {
            background:rgba(48,142,255,1);
            box-shadow:0px 2px 8px 0px rgba(48,142,255,0.3);
            color:rgba(255,255,255,1);
          }
          .word {
            font-weight:600;
            color:rgba(34,34,34,1);
          }
        }
      }

      .line {
        margin-top: -30px;
        width:191px;
        height:1px;
        background-color: #ccc;
      }
    }

    .inputArea {
      .inputBox {
        margin-top: 31px;
        p {
          height: 23px;
          font-size: 16px;
          font-weight: 500;
          color: rgba(25, 34, 46, 1);
          line-height: 23px;
          text-align: left;
        }
        input, textarea {
          margin-top: 3px;
          width: 396px;
          height: 54px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(221, 225, 230, 1);
          padding: 10px;
        }
        textarea {
          width: 500px;
          height: 110px;
        }
        input::placeholder, textarea::placeholder {
          font-size: 16px;
        }
      }
    }

    .uploadFile {
      margin-top: 27px;
      display: flex;
      align-items: center;
      .name {
        height: 18px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(25, 34, 46, 1);
        line-height: 18px;
        span {
          height: 18px;
          font-size: 13px;
          font-weight: 600;
          color: #FF5B3B;
          line-height: 18px;
        }
      }

      .uploadArea {
        margin-left: 17px;
        display: flex;
        align-items: center;

        .tipps {
          margin-left: 10px;
          color: #FF5B3B;
          font-size: 15px;
        }
      }

      .avatar-uploader {
        margin-top: 9px;
        width: 80px;
        height: 80px;
        overflow: hidden;
        position: relative;
        background: #fff;
        .el-icon-delete {
          display: none;
        }

        .el-upload {
          width: 80px;
          height: 80px;
          border: 1px dashed #409eff;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          img {
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position: top left;
          }
          &:hover {
            border-color: #409eff;
            .el-icon-delete {
              display: block;
            }
          }
        }
        .avatar-uploader-icon {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 32px;
          color: #999;;
          width: 80px;
          height: 80px;
          line-height: 80px;
          text-align: center;
        }
        .avatar {
          width: 80px;
          height: 80px;
          display: block;
        }
      }
    }

    .submitButton {
      margin:26px  0 33px 0 ;
      display: flex;
      align-items: center;
      height: 55px;

      .right {
        width: 185px;
        height: 46px;
        background: rgba(48, 142, 255, 1);
        box-shadow: 0px 2px 6px 0px rgba(48, 142, 255, 0.3);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        p {
          height: 20px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
        }

        &.noSubmit {
          cursor: not-allowed;
          background:rgba(236,236,236,1);
          box-shadow: none;
          p {
            color: #666;
          }
        }
      }
    }
  }
}


.companyCompleteMobile {
  width: 100vw !important;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 1);
  padding: 0 pxtovw(10) pxtovw(80) pxtovw(10);
  margin: 0;

  .titleArea {
    width: 100%;
    height: pxtovw(62);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-bottom: pxtovw(2) solid rgba(0, 0, 0, 0.06);

    .title {
      font-size:pxtovw(20);
      font-weight:600;
      color:rgba(29,42,58,1);
      line-height: pxtovw(28);
    }
    .smallTitle {
      height: pxtovw(12);
      font-size:pxtovw(12);
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height:pxtovw(12);
    }
  }

  .bodyArea {
    width: 100%;
    margin: 0 auto;

    .topSteps {
      height: pxtovw(160);
      display: flex;
      justify-content: center;
      align-items: center;

      .cell {
        width: pxtovw(45);
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .number {
          width:pxtovw(26);
          height:pxtovw(26);
          border:1px solid rgba(204,204,204,1);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          font-size:pxtovw(13);
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:pxtovw(26.01)
        }
        .word {
          text-align: center;
          height:pxtovw(18);
          font-size:pxtovw(13);
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:pxtovw(18);
          margin-top: pxtovw(13);
          word-break: break-all;
          white-space: nowrap;
        }
        &.ok {
          .number {
            background:rgba(48,142,255,1);
            box-shadow:0px 2px 8px 0px rgba(48,142,255,0.3);
            color:rgba(255,255,255,1);
          }
          .word {
            font-weight:600;
            color:rgba(34,34,34,1);
          }
        }
      }

      .line {
        margin-top: pxtovw(-30);
        width: pxtovw(100);
        height:1px;
        background-color: #ccc;
      }
    }

    .inputArea {
      .inputBox {
        margin-top: pxtovw(31);
        p {
          height: pxtovw(20);
          font-size: pxtovw(14);
          font-weight: 500;
          color: rgba(25, 34, 46, 1);
          line-height: pxtovw(20);
          text-align: left;
        }
        input, textarea {
          margin-top: pxtovw(5);
          width: pxtovw(350);
          height: pxtovw(44);
          background: rgba(255, 255, 255, 1);
          border-radius: pxtovw(3);
          border: pxtovw(1) solid rgba(221, 225, 230, 1);
          padding: pxtovw(10);
        }
        textarea {
          width: pxtovw(350);
          height: pxtovw(110);
        }
        input::placeholder, textarea::placeholder {
          font-size: pxtovw(14);
        }
      }
    }

    .uploadArea {
      display: flex;
      align-items: center;

      .tipps {
        margin-left: pxtovw(10);
        color: #FF5B3B;
        font-size: pxtovw(15);
      }
    }

    .uploadFile {
      margin-top: pxtovw(29);
      display: flex;
      align-items: center;

      .name {
        height: pxtovw(18);
        font-size: pxtovw(13);
        font-weight: 600;
        color: rgba(25, 34, 46, 1);
        line-height: pxtovw(18);
        span {
          height: pxtovw(18);
          font-size: pxtovw(13);
          font-weight: 600;
          color: #FF5B3B;
          line-height: pxtovw(18);
        }
      }

      .avatar-uploader {
        margin-left: pxtovw(15);
        margin-top: pxtovw(9);
        width: pxtovw(80);
        height: pxtovw(80);
        overflow: hidden;
        position: relative;
        background: #fff;
        .el-icon-delete {
          display: none;
        }

        .el-upload {
          width: pxtovw(80);
          height: pxtovw(80);
          border: pxtovw(1) dashed #409eff;
          border-radius: pxtovw(6);
          cursor: pointer;
          position: relative;
          overflow: hidden;
          img {
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position: top left;
          }
          &:hover {
            border-color: #409eff;
            .el-icon-delete {
              display: block;
            }
          }
        }
        .avatar-uploader-icon {
          position: absolute;
          top: 0;
          left: 0;
          font-size: pxtovw(44);
          color: #999;;
          width: pxtovw(80);
          height: pxtovw(80);
          line-height: pxtovw(80);
          text-align: center;
        }
        .avatar {
          width: pxtovw(80);
          height: pxtovw(80);
          display: block;
        }
        .title {
          position: absolute;
          left: 50%;
          bottom: pxtovw(40);
          transform: translateX(-50%);
          font-size: pxtovw(13);
          font-weight: 500;
          color: #409eff;
          line-height: pxtovw(18);
          text-decoration: underline;
        }
      }
    }

    .submitButton {
      margin-top: pxtovw(30);
      display: flex;
      align-items: center;
      height: pxtovw(55);

      .right {
        width: pxtovw(350);
        height: pxtovw(46);
        background: rgba(48, 142, 255, 1);
        box-shadow: 0 pxtovw(2) pxtovw(6) 0 rgba(48, 142, 255, 0.3);
        border-radius: pxtovw(2);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        p {
          height: pxtovw(20);
          font-size: pxtovw(14);
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: pxtovw(20);
        }

        &.noSubmit {
          cursor: not-allowed;
          background:rgba(236,236,236,1);
          box-shadow: none;
          p {
            color: #666;
          }
        }
      }
    }
  }
}