@import '/src/app';

.header{
  padding: calc(6px * var(--screen));
  display: flex;
  height: calc(40px * var(--screen));
  // justify-content: space-between;
  align-items: center;
  overflow: hidden;
  padding-bottom: 0;
  justify-content: space-between;
  padding-right: 20PX;
  background-color: #01C1B5;
  &.ios{
    padding-top: calc(20px * var(--screen));
  }
  &.android{
    padding-top: calc(25px * var(--screen));
  }
  .title-info{
    display: flex;
    align-items: center;
    width: 35%;
    .title{
      font-size: calc(12px * var(--screen));
      flex: 1;
    }
    .back{
      width: 24px;
    }
  }
  :global{
    .van-button{
      border: none;
      width: calc(20px * var(--screen));
      height: calc(20px * var(--screen));
      background-color: transparent;
    }
    .van-grid-item__content{
      background-color: transparent;
      color: #fff;
    }
  }
}

.report{
  height: 100vh;
  display: flex;
  width: 100%;
  flex-direction: column;
  background-color: #01C1B5;
  box-sizing: border-box;
}

.content{
  flex: 1;
  margin: 0 20PX;
  margin-bottom: 20PX;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  display: flex;
  background-color: #fff;
  border-radius: 8px;

  .score{
    padding-top: 40PX;
    border-radius: 5px;
    flex: 1;
  }
  :global{
    .van-empty{
      padding: 1vh 0;
      margin: auto;
    }
    .van-empty__image{
      width: 40vh;
      height: 40vh;
    }
    .van-empty__description{
      font-size: 16PX;
    }
  }
}
.demos{
  display: flex;
  position: absolute;
  top: 20PX;
  left: 55PX;
  >div{
    margin-left: 10PX;
    display: flex;
    align-items: flex-end;
    >span{
      display: inline-block;
      margin-left: 5PX;
      font-size: 14PX;
    }
  }
}


.right{
  path{
    fill: #01C1B5;
    stroke: #01C1B5;
  }
}

.wrong{
  path{
    fill: #FF4444;
    stroke: #FF4444;
  }
}

.notPlay{
  path{
    fill: #AEAEAE;
    stroke: #AEAEAE;
  }
}

.cadence_wrong,
.cadence_fast,
.cadence_slow {
  path{
    fill: #FF4444;
    stroke: #FF4444;
  }
}

.intonation_wrong,
.intonation_high,
.intonation_low{
  path{
    fill: #977CFF;
    stroke: #977CFF;
  }
}

.integrity_wrong{
  path{
    fill: #CC75FF;
    stroke: #CC75FF;
  }
}

.grid{
  padding: 20PX 0;
  max-width: 340PX;
  flex: 1;
  :global{
    .van-grid-item__content{
      padding: 0;
    }
    .van-grid-item__content::after{
      border-bottom: none;
    }
    .van-hairline--top::after{
      border: none;
    }
    .van-grid-item:last-child .van-grid-item__content::after{
      border: none;
    }
  }
  .gridinfo{
    font-size: 14PX;
    font-weight: bold;
    color: #fff;
  }
  .gridname{
    font-weight: normal;
    font-size: 12PX;
    color: #fff;
  }
}
.btn{
  font-size: 14PX!important;
  min-width: 100PX;
  position: fixed!important;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
}
