proginn-frontend/assets/css/otherpage/report.scss

.Report {
  width: 1000px !important;
  min-height: 790px;
  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);

    p {
      font-size:26px;
      font-weight:500;
      color:rgba(29,42,58,1);
      line-height:37px;
      height: 37px;
    }
  }

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

    .topTips {
      margin-top: 20px;
      width: 100%;
      height: 132px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid rgba(0,0,0, 0.06);
      p {
        font-size:14px;
        font-weight:600;
        color:rgba(51,51,51,1);
        line-height:20px;
        text-align: left;
        height: 20px;
      }
    }

    .reportBox {
      margin-top: 40px;

      .left {
        width: 94px;
        text-align: right;
        align-self: flex-start;
        flex-shrink: 0;

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

      .reportUser {
        display: flex;
        align-items: center;
        height: 55px;

        .left {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          align-self: center;
        }

        .right {
          margin-left: 17px;
          display: flex;
          align-items: center;
          font-size: 0;
          height: 55px;

          img {
            width:55px;
            height:55px;
            border-radius: 50%;
          }

          p {
            height:20px;
            font-size:14px;
            font-weight:500;
            color:rgba(29,42,58,1);
            line-height:20px;
            margin-left: 10px;
          }

        }
      }

      .reportType {
        margin-top: 42px;
        display: flex;
        align-items: center;

        .left {
          flex-shrink: 0;
        }

        .right {
          margin-left: 17px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;

          .cell {
            display: flex;
            align-items: center;
            width: 250px;

            cursor: pointer;

            &:nth-child(0n+3) {
              margin-top: 22px;
            }

            .check {
              width: 20px;
              height: 20px;
              background-image: url('~@/assets/img/other/report/noneSelected@2x.png');
              background-repeat: no-repeat;
              background-size: cover;
              &.ok {
                background-image: url('~@/assets/img/other/report/selected@2x.png');
              }
            }

            .word {
              height:20px;
              font-size:14px;
              font-weight:600;
              color:rgba(29,42,58,1);
              line-height:20px;
              margin-left: 7px;
            }
          }
        }
      }

      .reportDesc {
        margin-top: 46px;
        display: flex;
        align-items: center;
        min-height: 110px;

        .right {
          margin-left: 17px;
        }
      }

      .reportButton {
        margin-top: 27px;
        display: flex;
        align-items: center;
        height: 55px;

        .right {
          margin-left: 17px;
          width:153px;
          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;
          }
        }
      }
    }
  }
}