proginn-frontend/assets/css/credit/projectType.scss

.projectType {
  position: relative;
  width: 100%;

  .topArea {
    margin: auto;
    width: 1000px;
    padding: 24px 20px 31px 24px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size:23px;
      font-weight:500;
      color:rgba(29,42,58,1);
      line-height:32px;
      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 {
          font-size:15px;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:21px;
          margin-left: 5px;
        }

      }
    }

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

    .userImg {
      width: 107px;
      height: 107px;
      img {
        width: 107px;
        height: 107px;
        border-radius: 53.5px;
      }
    }

    .score {
      margin-top: 18px;
      font-size:30px;
      font-weight:bold;
      color:rgba(48,142,255,1);
      line-height:35px;
      span {
        font-size:15px;
        font-weight:500;
        color:rgba(48,142,255,1);
        line-height:21px;
      }
    }

    .tips {
      margin-top: 2px;
      font-size:14px;
      font-weight:600;
      color: #666;
      line-height:20px;

      span {
        font-size:14px;
        font-weight:600;
        color:rgba(48,142,255,1);
        line-height:20px;
      }
    }

    .starBox {
      margin-top: 21px;
    }
  }

  .bodyArea {
    margin: auto;
    width: 1000px;

    .evaluateList {
      margin-top: 3px;
      .cell {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        padding: 43px 30px;
        background-color: #fff;

        .left {
          width: 54px;
          height: 54px;
          flex-shrink: 0;
          font-size: 0;
          img {
            width: 54px;
            height: 54px;
            border-radius: 27px;
          }
        }

        .center {
          margin-left: 10px;
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          width: 650px;
          height: 54px;

          .nameBox {
            display: flex;
            height: 22px;

            .name {
              font-size:16px;
              font-weight:600;
              color:rgba(51,51,51,1);
              line-height:22px;
            }
            .tips {
              margin-left: 5px;
              height:22px;
              background:rgba(243,243,243,1);
              border-radius:2px;
              display: flex;
              justify-content: center;
              align-items: center;
              p {
                padding: 0 10px ;
                font-size: 12px;
                transform-origin: center;
                transform: scale(11/12);
                font-weight:500;
                color:rgba(136,136,136,1);
              }
            }
          }

          .eva {
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:20px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .right {
          width: 210px;
          display: flex;
          justify-content: space-around;
          align-items: flex-end;
          flex-direction: column;

          .time {
            font-size:12px;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:17px;
          }

          .starBox {
            margin-top: 10px;
            display: flex;
            .star {
              margin-left: 14px;
              &.icon {
                width: 21px;
                height: 21px;
                background-size: cover;
                background-repeat: no-repeat;

                &.fill {
                  background-image: url("~@/assets/img/credit/starFill.png");
                }

                &.none {
                  background-image: url("~@/assets/img/credit/starNone.png");
                }

                &.half {
                  background-image: url("~@/assets/img/credit/starHalf.png");
                }
              }
            }
          }
        }
      }
    }
  }

  .bottonArea {
    margin-top: 28px;
    text-align: center;
  }
}