.button{
  position: fixed;
  bottom: calc(1rem * 2 * .2);
  width: 100%;
  :global{
    .van-button{
      font-size: calc(1rem * 2 * .14);
      height: calc(1rem * 2 * .35);
    }
  }
}

.headerButton{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  .tit{
    font-size: calc(1rem * 2 * .16);
    font-weight: bold;
    align-items: center;
    display: flex;
    &::before{
      content: '';
      border-left: 4PX solid #01c1b5;
      height: 18PX;
      margin-right: 8PX;
    }
  }
}

.fraction{
  position: relative;
  width: calc(1rem * 2 * 5.5);
  max-width: 95%;
  .title{
    color: #fff;
    font-size: .14em;
    font-weight: bold;
    text-align: center;
    background: url('./icons/title.png') no-repeat center 0;
    background-size: contain;
    width: calc(1rem * 2 * 1.24);
    height: calc(1rem * 2 * .31);
    line-height: calc(1rem * 2 * .31);
    top: calc(1rem * 2 * -.05);
    left: 50%;
    margin-left: calc(1rem * 2 * -.62);
    // margin-top: 60px;
    position: absolute;
    z-index: 1;
  }
  .content{
    background-color: #fff;
    border-radius: calc(1rem * 2 * 0.2);
    padding: calc(1rem * 2 * 0.2);
    .detail{
      display: flex;
      margin-top: calc(1rem * 2 * 0.2);
      align-items: center;
      >img{
        width: calc(1rem * 2 * 1.1);
        margin-right: calc(1rem * 2 * 0.1);
      }
      .progress{
        :global{
          .van-progress__pivot{
            display: none;
          }
        }
        flex: 1;
        .progressitem{
          display: flex;
          align-items: center;
          margin-bottom: calc(1rem * 2 * 0.12);
          :global{
            .van-progress{
              flex: 1;
              height: calc(1rem * 2 * 0.2);
            }
          }
          >span{
            display: block;
            width: calc(1rem * 2 * 0.5);
            text-align: left;
            padding-left: calc(1rem * 2 * 0.3);
            font-size: calc(1rem * 2 * 0.12);
            color: #01C1B5;
            font-weight: bold;
            &:last-child{
              padding-left: calc(1rem * 2 * 0.1);
              padding-right: calc(1rem * 2 * 0.3);
              font-size: calc(1rem * 2 * 0.16);
              font-family: 'Roboto', sans-serif;
              width: calc(1rem * 2 * 0.35);
            }
          }
        }
      }
    }
    .num{
      color: #01C1B5;
      font-size: calc(1rem * 2 * 0.16);
      font-weight: bold;
      text-align: center;
      >strong{
        font-size: calc(1rem * 2 * 0.24);
        font-family: 'Roboto', sans-serif;
      }
    }
    .tips{
      // background-color: #F3F3F3;
      color: #808080;
      padding: calc(1rem * 2 * 0.08);
      font-size: calc(1rem * 2 * 0.14);
      border-radius: calc(1rem * 2 * 0.2);
      margin-top: calc(1rem * 2 * 0.05);
      margin-bottom: calc(1rem * 2 * 0.1);
      text-align: center;
    }
    .ctrls{
      font-size: 0;
      text-align: center;
      :global{
        .van-button{
          width: 80px;
          margin: 0 auto;
        }
      }
    }
  }
}

.fractionContainer{
  background-color: transparent;
  font-size: calc(1rem * 2);
  padding-top: calc(1rem * 2 * .05);
  background-color: transparent!important;
  :global{
    .van-button{
      font-size: calc(1rem * 2 * .14);
      height: calc(1rem * 2 * .35);
      margin: auto;
    }
  }
  :global{
    .van-popup__close-icon--top-right{
      top: calc(1rem * 2 * .14);
      right: calc(1rem * 2 * .33);
      font-size: calc(1rem * 2 * .2);
      padding: 5PX;
      border-radius: 100%;
    }
  }

  &.isPercussion{
    width: calc(1rem * 2 * 4.3);
    .fraction{
      width: calc(1rem * 2 * 4);
    }
    .content{
      padding-left: calc(1rem * 2 * 0.2)!important;
    }
    .ctrls{
      border-top: 1px dashed transparent!important;
    }
  }

  &.resultContainer{
    .ctrls{
      display: flex;
      flex: 1;
      align-items: flex-end;
      border-top: 1px dashed #E5E5E5;
    }
    .content{
      height: 70vh;
      max-height: 300PX;
      display: flex;
      flex-direction: column;
      padding-left: calc(1rem * 2 * 1.82);
      .leftContent{
        font-size: calc(1rem * 2 * 0.12);
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: url('./icons/left-bg.png') no-repeat center 100%;
        background-color: #01c1b5;
        background-size: 100%;
        width: calc(1rem * 2 * 1.7);
        border-radius: calc(1rem * 2 * 0.2) 0 0 calc(1rem * 2 * 0.2);
        >img{
          width: calc(1rem * 2 * 1.4);
          margin: auto;
          display: block;
          margin-top: calc(1rem * 2 * .52);
        }
        >div{
          >span{
            font-size: calc(1rem * 2 * 0.3);
            font-weight: bold;
          }
          margin-top: calc(1rem * 2 * .25);
          font-size: calc(1rem * 2 * 0.2);
          text-align: center;
          color: #fff;
        }
      }
    }
  }

  &.erjiContainer{
    text-align: center;
    .erji{
      width: calc(1rem * 2 * 1.2);
      margin-top: calc(1rem * 2 * 0.1);
      margin-right: 0!important;
    }
    .tips{
      font-size: calc(1rem * 2 * 0.16)!important;;
      background-color: transparent!important;
      margin-top: calc(1rem * 2 * 0.06)!important;
    }
  }
}

.resultContainer{
  width: calc(1rem * 2 * 5.9);
  max-width: 95vw;
  :global{
    .van-popup__close-icon--top-right{
      top: 0;
      right: 0;
      font-size: 16PX;
      padding: 6PX;
      background-color: #fff;
    }
  }
}
.iframe{
  border: none;
  width: 500PX;
  height: 80vh;
}

.btns{
  display: flex;
  font-size: 18PX;
  align-items: center;
  position: absolute;
  right: 10PX;
  top: 12PX;
  >.sbtn{
    background-color: rgba(0, 0, 0, .23);
    width: 68PX;
    height: 32PX;
    border-radius: 19PX;
    text-align: center;
    line-height: 32PX;
    color: #fff;
    margin-left: 10PX;
  }
}

.disabled{
  opacity: .5;
}
