.rightCtrls{
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 99;
  transform: translateY(-50%);
  width: 40PX;
  >img{
    max-width: 100%;
  }
}

.detail{
  // height: 100vh;
  // height: -webkit-fill-available;
  // 使用定位方式全屏，vh问题太多
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #01C1B5;
  &.homework{
    opacity: .7;
  }
}
.header{
  display: block;
  :global{
    .van-sticky{
      background-color: #fff;
    }
    .van-sticky--fixed{
      box-shadow: calc(5px * var(--screen)) calc(5px * var(--screen)) calc(5px * var(--screen)) 0 rgba(0, 0, 0, .03);
    }
  }
}
.skeleton{
  margin-top: 60px;
}

.wraper{
  background-color: #fff;
  display: flex;
  flex: 1;
  margin: auto;
  overflow: hidden;
  flex-direction: column;
  margin-left: 50PX;
  margin-bottom: 15PX;
  // width: calc(95% - 50PX);
  width: 90%;
  border-radius: calc(5px * var(--screen));
  // margin-left: 0;
  // margin-bottom:calc(10px * var(--screen));
  &.vertical{
    flex-direction: row;
    // margin-bottom: 0;
    margin-bottom: calc(10px * var(--screen));
    .imgs{
      // min-width: 100px;
      display: flex;
      max-height: 100%;
      .fingering{
        // width: auto;
        height: auto;
        max-height: 100%;
        img{
          width: 40px;
          // height: calc(40px * var(--screen));
          height: auto;
          max-height: 100%;
          display: block;
        }
      }

    }
  }
}
:global(.eyeProtection){
  .wraper{
    background-color: #FFF4E1;
  }
}

.main{
  width: 100%;
  display: flex;
  height: 100%;
  // padding-top: 40PX;
  // padding-right: 10px;
  // flex-direction: row;
  // height: 100px;
  overflow: hidden;
  overflow-y: auto;
  // background-color: #EFF6F5;
  margin: auto;
  // margin-bottom:calc(10px * var(--screen));
  // border-radius: calc(5px * var(--screen)) calc(5px * var(--screen)) 0 0;
  .score{
    flex: 1;
    margin-bottom: calc(10px * var(--screen));
    >div{
      padding-bottom: 40px;
    }
    // border-radius: calc(5px * var(--screen));
  }
}
.listPopup{
  padding-right: 30PX;
  background-color: transparent!important;
  :global{
    .van-popup__close-icon--top-right{
      top: 50%;
      right: 0;
      width: 30PX;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, .52);
      padding: 10PX 0;
      padding-left: 3PX;
      border-radius: 0 20PX 20PX 0;
      box-sizing: border-box;
      font-size: 18PX;
      font-weight: bold;
    }
  }
}
.imgs{
  // background-color: #EFF6F5;
  // border-radius: 0 0 calc(5px * var(--screen)) calc(5px * var(--screen));
  // display: flex;
  padding: 5PX 10PX;
  // position: fixed;
  // bottom: calc(10px * var(--screen));
  // width: 100%;
  // background-color: #fff;
  // box-shadow: calc(5px * var(--screen)) calc(5px * var(--screen)) calc(5px * var(--screen)) calc(5px * var(--screen)) rgba(0, 0, 0, .03);
}
.fingering{
  // width: auto;
  margin: auto;
  height: calc(50px * var(--screen));
  img{
    width: auto;
    height: calc(40px * var(--screen));
    display: block;
  }
}

.empty{
  :global{
    .van-empty__image{
      width: 100px!important;
      height: 100px!important;
    }
    .van-empty__description{
      font-size: 12px;
    }
    .van-button{
      width: 120px!important;
      height: 30px!important;
      font-size: 12px!important;
    }
  }
}

.daka{
  text-align: center;
  padding: 0 20PX;
  >img{
    width: 240PX;
  }
  >h4{
    color: #1A1A1A;
    font-size: 16PX;
    margin: 0;
    margin-top: 9PX;
  }
  >p{
    margin: 0;
    font-size: 12PX;
    margin-top: 11PX;
  }
  >.btn{
    background-color: #01C1B5;
    color: #fff;
    font-size: 14PX;
    height: 34PX;
    line-height: 34PX;
    margin-top: 19PX;
    margin-bottom: 18PX;
    width: 210PX;
    border: none;
  }
}

.course{
  background-color: #fff;
  display: inline-flex;
  margin-top: 10PX;
  border-radius: 10PX;
  padding: 10PX 14PX;
  align-items: center;
  font-size: 14PX;
  color: #333333;
  box-shadow: 0px 2px 14px -1px rgba(0, 0, 0, 0.29);
  >p{
    margin: 0;
    display: flex;
    align-items: center;
    >img{
      width: 53PX;
    }
    >span{
      color: #FF4E19;
      font-weight: bold;
    }
  }
  >.btn{
    margin: 0 13PX;
    background: linear-gradient(218deg, #FF9C7C 0%, #FF784C 100%);
    min-width: 70PX;
    height: 28PX;
    font-size: 12PX;
    color: #fff;
    padding: 0;
    border: none;
    &.btn2{
      width: 90PX;
    }
  }
  >.closebtn{
    border: none;
    color: #999999;
    width: 14PX;
    height: 14PX;
  }
}
