orchestra-app/src/views/coursewarePlay/component/video.module.less

// .videoWrap {
//     width: 100%;
//     height: 100%;

//     :global {
//         .plyr--video {
//             width: 100%;
//             height: 100%;
//         }

//         .plyr__time {
//             display: block !important;
//         }
//         .plyr__video-wrapper{
//             pointer-events: none;
//         }
//     }
// }

// :global(.bottomFixed).controls {
//     width: 100%;
//     background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
//     padding: 0 !important;
//     flex-direction: column;
//     transition: all 0.5s;

//     .time {
//         display: flex;
//         justify-content: space-between;
//         width: 100%;
//         color: #fff;
//         font-size: 10px;
//         padding: 4px 20px;

//         :global {
//             .plyr__time+.plyr__time:before {
//                 content: '';
//             }
//         }
//     }

//     .slider {
//         width: 100%;
//         padding: 0 20px;

//         :global {
//             .van-slider__button {
//                 background: var(--van-primary);
//             }

//             .van-loading {
//                 width: 100%;
//                 height: 100%;
//             }
//         }
//     }

//     .actions {
//         display: flex;
//         justify-content: space-between;
//         width: 100%;
//         color: #fff;
//         font-size: 12px;
//         padding: 0 20px;
//         align-items: center;

//         .actionWrap {
//             display: flex;
//         }

//         .actionBtn {
//             display: flex;
//             width: 38px;
//             height: 38px;
//             padding: 4px 0;
//             background: transparent;
//         }

//         .actionBtn>img {
//             width: 100%;
//             height: 100%;
//         }

//         :global {
//             .van-loading__circular {
//                 width: 100%;
//                 height: 100%;
//             }
//         }

//         .playIcon {
//             display: none;
//         }

//         .btnPlay img:nth-child(2) {
//             display: block;
//         }

//         .btnPause img:nth-child(3) {
//             display: block;
//         }

//         .btnPlay,
//         .btnPause {
//             :global {
//                 .van-loading {
//                     display: none;
//                 }
//             }
//         }
//         .loopBtn{
//             :global{
//                 .loop{
//                     display: block;
//                 }
//                 .loopActive{
//                     display: none;
//                 }
//             }
//         }
//         .loopBtn.active{
//             :global{
//                 .loop{
//                     display: none;
//                 }
//                 .loopActive{
//                     display: block;
//                 }
//             }
//         }

//     }
// }

.videoWrap {
  position: relative;
  width: 100%;
  height: 100%;

  .videoSection {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
  }
}

.content {
  position: relative;
  height: 100%;
}

.contentWrap {
  height: 100%;

  video {
    width: 100%;
    height: 100%;
  }
}

.videoSection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.controls {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.5s;
  width: 100%;
  z-index: 9;

  &.hide {
    transform: translateY(100%);
  }

  .time {
    display: flex;
    // justify-content: space-between;
    // width: 100%;
    color: #fff;
    font-size: 10px;
    padding: 4px 20px;
  }

  .slider {
    // width: 100%;
    padding: 0 20px;
    --van-slider-button-width: 13px !important;
    --van-slider-button-height: 13px !important;

    :global {
      .n-slider {
        --n-handle-size: 13px !important;
        --n-fill-color: var(--van-primary-color) !important;
        --n-fill-color-hover: var(--van-primary-color) !important;
      }

      .van-loading {
        width: 100%;
        height: 100%;
      }
    }
  }

  .actionSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 8px 15px;

    .name {
      font-size: 14px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }

  .actions {
    display: flex;
    // width: 100%;
    color: #fff;
    font-size: 12px;

    align-items: center;

    .actionWrap {
      display: flex;
    }

    .actionBtn {
      display: flex;
      width: 24px;
      height: 24px;
      padding: 4px 0;
      background: transparent;

      &+.actionBtn {
        margin-left: 12px;
      }
    }

    .actionBtn>img {
      width: 100%;
      height: 100%;
    }

    :global {
      .van-loading__circular {
        width: 100%;
        height: 100%;
      }
    }

    .playIcon {
      display: none;
    }

    .btnPlay img:nth-child(2) {
      display: block;
    }

    .btnPause img:nth-child(3) {
      display: block;
    }

    .btnPlay,
    .btnPause {
      :global {
        .van-loading {
          display: none;
        }
      }
    }

    .loopBtn {
      :global {
        .loop {
          display: block;
        }

        .loopActive {
          display: none;
        }
      }
    }

    .loopBtn.active {
      :global {
        .loop {
          display: none;
        }

        .loopActive {
          display: block;
        }
      }
    }

  }
}

// .sliderPopup {
//   position: absolute;
//   z-index: 9999;
//   left: 68px;
//   bottom: 46px;
//   display: flex;
//   align-items: center;
//   flex-direction: column;
//   height: 165px;
//   width: 45px;
//   padding: 10px 0 15px;
//   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAGaCAMAAAC46aQwAAAAOVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC8dlA9AAAAE3RSTlNaAAxUVwdPRSc7MzYsEEoXGgshjXaABwAAAZBJREFUeNrt1GtO40AQReF77X46tvPY/2IHhiCDA0Ez7pb4cb4FHLVaVSU/isM/i360S5+nnIL+Q0h5On+fXuqoQ8a6fJm+VjVQr4/pEtREKPt0VTP1UzpmNZTjh3RWU3lLn9TY6T1d1Fx5S8eg5kL8m57UwfSaHoI6CIPlSV1MlpO6SNaiThbN6mRWVSdVWZ1kJXWSFNRJEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg9wnqJGhVJ6uyOsmq6qSqqJOiqzq5yqu6WC3P6mK2HEd1MEbLfZ49+zXtpOaS39IXNXe5p13UWPF72ic1dfKW9ql1eUu7tP2NLf3inNREOnuXflFGHTaWrSdvYsk6JJfoXXoTb1PNabwL+kEY71Ku023r7tOPYv5pFJ6Rn5qfj8KRtC+jvjGefSztYdWX1sFH0k82tUY3SPsWtDfZTdJekj4JN7dKO1Z9kBY3ST+er3x10/R2vqrdOO04BUnp4nbpTVwug30g3cwf1jMLKix6VfsAAAAASUVORK5CYII=') no-repeat top center;
//   background-size: contain;

//   .iconAdd,
//   .iconCut {
//     display: inline-block;
//     width: 24px;
//     height: 24px;
//     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABGlBMVEUAAAAAraMAraEArKEArqIA18kArqIA08UA1McAq6AAraAArKAArKEArKAArKAAq6EA1MYAq6AArKIAraMA2csAr6AA28kAn58A1skA0sQA1ccA2csA1cgArZ8A3M4Ar6IA1cgA2csA3M0A1MUA3M0A39EA2swA1skA1cgA3tAA3c8A3c0A08cA2swAq58A3M4A2csA4NL ///8A3tAA1sgA2s0A3M4A18kA4tQA2MsA3c8A2cwA1McArKAA08UA5NVm6+Jm6N9x599m6eEAx7oAvLDr/PsA0MNM49oAua2j8u2H8OmH7OZM6N4As6dt5t413dII1skD1skAy74AwLRf49ta49sn2s4X2MwT18tW4tpJ4Nc33tMq288faTE+AAAAMXRSTlMAGfxfUkc/9YXw6M/FtrCSUEM0MiMjCgj4z7quqG3x7tfPg1hS+Pjr69C6lZWKbVhYjYIARgAAAqJJREFUSMelk2lD2kAQhjfhkltQ0Xpbe98xJljCRo6EgApKoa32+P9/o7NOliEboB98Pj/v7MzsLotRS63tHb/Z2Xl9vLeWqrH/kdrPuE3B+SM7+6mV+voz15336/X615MXS/XNXTfuA7ubi/3TjOpjwHEOvyzy19yF9cF3LOt53P+w3IeA9X5R/fHfe9SpHyf0Y2ecgv/zttO5kwGwZT+I/Tmynwz4HeA3lY/4tm0fzu8K9vlwC/6vcRi46fVuIj7wjvx1mPY7+P1vYf3+GdB3APIbDbpBuN878H9Iv94WgTbVBx14K/0UHnD7gD4FpI8B05Tvah/W3+50/tC8GIjUB9/cQ7+Wge3fYUPoy4Dimy9rOHJTcD+m68VAN/Qb6AvW8ZLV50ABe9Y/8hF3FH+eMkA+csIEGXo+/TZyJQJXXaDVag2lbxivhK8FM//mbCHX0jcaGgTS1E9vcaCHPmCmIZBsztpfETCQJAQS7mzcpS1J30yIQEDrEUN3ARy6hQxnB1xYIpD0RIB+o6ArAq1wneRfBEkx9LSu+laLAqiHAU8MrQ1U37bxBBOROuBrDDg6V36vbeMJMd84YoKSp/gyoPqXQYkJDgbgR38jBciHgP+JCTQ9oPbnA4p+6egae6Q4oADYwFAEhuhTwC8ypMInlvIdr3u9a9MIE6hfNnmFhRRGdeo/el3kG6MCk1R1n3zlutAHpnqVzShzD9uhAyI64PEyI7bz3BP+8voTnt9mc2zlRAJ1df1YP7fFImxkuW8tK29MeXaDKWzk+ChQXrPc54jnyKeu8pz75+gjqDs+53nsR2G7rHM+mER8IwBdL+O8caoFDgy8wGnA/7Vcz+dAocqWUynqPIJerLDVaAelrLSzpQNtlUuhdDKRSKZRfir/ACF6Xp1EeZtPAAAAAElFTkSuQmCC') no-repeat center;
//     background-size: contain;
//     flex-shrink: 0;

//     &.disabled {
//       opacity: 0.7;
//     }
//   }

//   .iconCut {
//     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABCFBMVEUAAAAAraMAraEArKEArKEArqIArqIA2swA1cgA1sgAraAArKAArKEArKAArKAAq6EA2MoArZ8Aq6AArKIAraMAr6AA28kAn58A18oA08cA1cgA1MYA1sgA0cQA3c4A1skA08YA2swA08UA1skA2MsA2s0A18kA1sgA39AAzsIA3tAA2swA39EA39AA39EA4tMA3tAA2s0A2MoA1skA3M4A1ccA49QA3c8A2cwA4NIA4dP ///8ArKAA08Zx599x5t8A5NXi+/kA0cMAyLsAvK8Aua1J4dg13dIAzsAAvrIAs6dt5t4s29AD1chJ595h49tX49oV18sO1soAxLdm5NxS4tgd2MwAwrWCpB5XAAAAMHRSTlMAGfzvX1I/V1FH6M/FtrCShm1DNDIjCgj486iEI/jx19DPurGV+Ovr0M26uqiHSCOYWU5AAAACYklEQVRIx6WT12LaMBSGZTMS9p4hSTO6FwGMRyXj2GbTNqPj/d+kOjYCGcnkot/19/8+R5KRQDNzdnP5tt1+c3lTzjTRS2S6HaIFDCmDdjdzVD99RQjzgwDl6jRW710T0R8Yxsee3D/pMJ/C+cbdxYnMPyNPmz9CP/iUsujfks16Ys8FnwaAW7F/M5nY9kycJ2A0Kh/MTx7XNPD7u7x/RIns0euQn9SfSXwW0C++coFrMqf+gxbXDwH9A3dfhH7AXj/F9oOv9/dD0fv9ZYcnFOOPqN9/x/wMIWRuPxzth0D/CwrpwgU/Cgvv60EHPoV+83z/gMR92TyA2WQrM53CfBaA+l0gfLhlPjAI4OfnfPMzAt7LHmjIgW9eIeA8zh8d+tZr8BWXm2d2/03g/gfzLV2hgTTh5gdfTDDfMtM0kCLUfylgbgMpGkiSXX/cSMwf95MQWAgXLJwP+BC4g0DKY7rwIJjf3/pjNwVL/wVf7OcCzB97sLQylflM53yKryBKQhse8U3OtxIIKHoSX5gHcIsIqEyPz2Myf+xXEKCoLvUpsf3jEENVUEBhGnnQOiDpd5YFFFLFC+GHD2HzB2i4irbkV0PphYHPAo61yiNGTfWjvtjvOEu1hnaU8HNkX3Fhx8MltKeVw57Yb3L9C5xrIY5GFj/LL5j1ZxsoQj2BfUM8zxBriRN1dEA9i1eu9MIcbYWzzOenymHsa+KBGkuMcw0koVVSMZ4udP4DlutjrJZaSE4tjylTzx2M6G9muJ6PKfkaiqdaUHEEtVBFx1EqxQSzE8WKIgjSUDqVTKbSIP8//wBbnlQnTJqlUQAAAABJRU5ErkJggg==') no-repeat center;
//     background-size: contain;
//   }

//   .sliderPoint {
//     background: #FFFFFF;
//     box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
//     border-radius: 10px;
//     font-size: 14px;
//     font-weight: 500;
//     color: rgba(1, 193, 181, 1);
//     min-width: 35px;
//     text-align: center;
//     vertical-align: text-bottom;

//     span {
//       font-size: 12px;
//     }
//   }

//   :global {
//     .van-slider {
//       margin: 7px 0;
//     }
//   }
// }

.sliderPopup {
  position: absolute;
  z-index: 9999;
  left: 78px;
  bottom: 46px;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 165px;
  width: 45px;
  padding: 10px 0 15px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAGaCAMAAAC46aQwAAAAOVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC8dlA9AAAAE3RSTlNaAAxUVwdPRSc7MzYsEEoXGgshjXaABwAAAZBJREFUeNrt1GtO40AQReF77X46tvPY/2IHhiCDA0Ez7pb4cb4FHLVaVSU/isM/i360S5+nnIL+Q0h5On+fXuqoQ8a6fJm+VjVQr4/pEtREKPt0VTP1UzpmNZTjh3RWU3lLn9TY6T1d1Fx5S8eg5kL8m57UwfSaHoI6CIPlSV1MlpO6SNaiThbN6mRWVSdVWZ1kJXWSFNRJEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg9wnqJGhVJ6uyOsmq6qSqqJOiqzq5yqu6WC3P6mK2HEd1MEbLfZ49+zXtpOaS39IXNXe5p13UWPF72ic1dfKW9ql1eUu7tP2NLf3inNREOnuXflFGHTaWrSdvYsk6JJfoXXoTb1PNabwL+kEY71Ku023r7tOPYv5pFJ6Rn5qfj8KRtC+jvjGefSztYdWX1sFH0k82tUY3SPsWtDfZTdJekj4JN7dKO1Z9kBY3ST+er3x10/R2vqrdOO04BUnp4nbpTVwug30g3cwf1jMLKix6VfsAAAAASUVORK5CYII=') no-repeat top center;
  background-size: contain;

  .iconAdd,
  .iconCut {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+6YCf5bqm5Yqg5aSH5Lu9PC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iMCUiIHkxPSI3NS41MTIxOTI3JSIgeDI9IjEwMCUiIHkyPSI1MCUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGODA1NyIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZBMjg0IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxjaXJjbGUgaWQ9InBhdGgtMiIgY3g9IjExIiBjeT0iMTEiIHI9IjExIj48L2NpcmNsZT4KICAgICAgICA8ZmlsdGVyIHg9Ii0zLjYlIiB5PSItOC4yJSIgd2lkdGg9IjEwNy4zJSIgaGVpZ2h0PSIxMTAuOSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0zIj4KICAgICAgICAgICAgPGZlTW9ycGhvbG9neSByYWRpdXM9IjAuMSIgb3BlcmF0b3I9ImRpbGF0ZSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd1NwcmVhZE91dGVyMSI+PC9mZU1vcnBob2xvZ3k+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9Ii0xIiBpbj0ic2hhZG93U3ByZWFkT3V0ZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuODE0Mjk1NjcyICAgMCAwIDAgMCAwLjQ0NjM1MDI0ICAgMCAwIDAgMCAwLjMyNjg0NjU5NSAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSLor77ku7bliqDmipXlsY8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLor77ku7bmkq3mlL7vvIjlgI3pgJ/lpIfku70iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzAuMDAwMDAwLCAtMTI2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0i6YCf5bqm5Yqg5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxODIuMDAwMDAwLCAxMzcuMDAwMDAwKSBzY2FsZSgtMSwgLTEpIHJvdGF0ZSgtMzYwLjAwMDAwMCkgdHJhbnNsYXRlKC0xODIuMDAwMDAwLCAtMTM3LjAwMDAwMCkgdHJhbnNsYXRlKDE3MS4wMDAwMDAsIDEyNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLmpK3lnIblvaLlpIfku70tMyI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTMpIiB4bGluazpocmVmPSIjcGF0aC0yIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMiI+PC91c2U+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuMzkwNzUzOCwxOC42OTY4MzA3IEMxOC41MTE5OTQ2LDE4LjY5NjgzMDcgMTguNzUzNzQxMSwxNy42NzQxNzUyIDE4Ljc1Mzc0MTEsMTYuMzEzMDI1NiBDMTguNzUzNzQxMSwxNC45NTE4NzYgMTguNTMyNDY3NSwxMy42OTY4MzA3IDE3LjQxMTIyNjYsMTMuNjk2ODMwNyBDMTYuMjg5OTg1OCwxMy42OTY4MzA3IDE2Ljk2OTY2ODYsMTQuOTIxNDk3NiAxNi45Njk2Njg2LDE2LjI4MjY0NzIgQzE2Ljk2OTY2ODYsMTcuNjQzNzk2NyAxNi4yNjk1MTI5LDE4LjY5NjgzMDcgMTcuMzkwNzUzOCwxOC42OTY4MzA3IFoiIGlkPSLmpK3lnIblvaIiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9IjAuNDQzNjMwNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcuNzUzNzQxLCAxNi4xOTY4MzEpIHJvdGF0ZSgzOS4wMDAwMDApIHRyYW5zbGF0ZSgtMTcuNzUzNzQxLCAtMTYuMTk2ODMxKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMSw1IEMxMS42NjI3NDE3LDUgMTIuMiw1LjQxMzI3NTYyIDEyLjIsNS45MjMwNzY5MiBMMTIuMTk5LDkuOCBMMTYuMDc2OTIzMSw5LjggQzE2LjU4NjcyNDQsOS44IDE3LDEwLjMzNzI1ODMgMTcsMTEgQzE3LDExLjY2Mjc0MTcgMTYuNTg2NzI0NCwxMi4yIDE2LjA3NjkyMzEsMTIuMiBMMTIuMTk5LDEyLjE5OSBMMTIuMiwxNi4wNzY5MjMxIEMxMi4yLDE2LjU4NjcyNDQgMTEuNjYyNzQxNywxNyAxMSwxNyBDMTAuMzM3MjU4MywxNyA5LjgsMTYuNTg2NzI0NCA5LjgsMTYuMDc2OTIzMSBMOS44LDEyLjE5OSBMNS45MjMwNzY5MiwxMi4yIEM1LjQxMzI3NTYyLDEyLjIgNSwxMS42NjI3NDE3IDUsMTEgQzUsMTAuMzM3MjU4MyA1LjQxMzI3NTYyLDkuOCA1LjkyMzA3NjkyLDkuOCBMOS44LDkuOCBMOS44LDUuOTIzMDc2OTIgQzkuOCw1LjQxMzI3NTYyIDEwLjMzNzI1ODMsNSAxMSw1IFoiIGlkPSLlvaLnirbnu5PlkIgiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') no-repeat center;
    background-size: contain;
    flex-shrink: 0;

    &.disabled {
      opacity: 0.7;
    }
  }

  .iconCut {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+6YCf5bqm5YeP5aSH5Lu9PC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iMCUiIHkxPSI3NS41MTIxOTI3JSIgeDI9IjEwMCUiIHkyPSI1MCUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGODA1NyIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZBMjg0IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxjaXJjbGUgaWQ9InBhdGgtMiIgY3g9IjExIiBjeT0iMTEiIHI9IjExIj48L2NpcmNsZT4KICAgICAgICA8ZmlsdGVyIHg9Ii0zLjYlIiB5PSItOC4yJSIgd2lkdGg9IjEwNy4zJSIgaGVpZ2h0PSIxMTAuOSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0zIj4KICAgICAgICAgICAgPGZlTW9ycGhvbG9neSByYWRpdXM9IjAuMSIgb3BlcmF0b3I9ImRpbGF0ZSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd1NwcmVhZE91dGVyMSI+PC9mZU1vcnBob2xvZ3k+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9Ii0xIiBpbj0ic2hhZG93U3ByZWFkT3V0ZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuODE0Mjk1NjcyICAgMCAwIDAgMCAwLjQ0NjM1MDI0ICAgMCAwIDAgMCAwLjMyNjg0NjU5NSAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSLor77ku7bliqDmipXlsY8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLor77ku7bmkq3mlL7vvIjlgI3pgJ/lpIfku70iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzAuMDAwMDAwLCAtMjgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0i6YCf5bqm5YeP5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxODIuMDAwMDAwLCAyOTMuMDAwMDAwKSBzY2FsZSgtMSwgLTEpIHJvdGF0ZSgtNTQwLjAwMDAwMCkgdHJhbnNsYXRlKC0xODIuMDAwMDAwLCAtMjkzLjAwMDAwMCkgdHJhbnNsYXRlKDE3MS4wMDAwMDAsIDI4Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLmpK3lnIblvaIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjAwMDAwMCwgMTEuMDAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC0xMS4wMDAwMDAsIC0xMS4wMDAwMDApICI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTMpIiB4bGluazpocmVmPSIjcGF0aC0yIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMiI+PC91c2U+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy44ODMyNzE1NCw3LjI3OTM1OTggQzUuMDA0NTEyMzcsNy4yNzkzNTk4IDUuMjQ2MjU4ODgsNi4yNTY3MDQzIDUuMjQ2MjU4ODgsNC44OTU1NTQ3MyBDNS4yNDYyNTg4OCwzLjUzNDQwNTE1IDUuMDI0OTg1MjQsMi4yNzkzNTk4IDMuOTAzNzQ0NCwyLjI3OTM1OTggQzIuNzgyNTAzNTcsMi4yNzkzNTk4IDMuNDYyMTg2MzMsMy41MDQwMjY3MiAzLjQ2MjE4NjMzLDQuODY1MTc2MjkgQzMuNDYyMTg2MzMsNi4yMjYzMjU4NiAyLjc2MjAzMDcsNy4yNzkzNTk4IDMuODgzMjcxNTQsNy4yNzkzNTk4IFoiIGlkPSLmpK3lnIblvaLlpIfku70tNCIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iMC40NDM2MzA0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjI0NjI1OSwgNC43NzkzNjApIHNjYWxlKC0xLCAtMSkgcm90YXRlKDM5LjAwMDAwMCkgdHJhbnNsYXRlKC00LjI0NjI1OSwgLTQuNzc5MzYwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIGZpbGw9IiNGRkZGRkYiIHg9IjYiIHk9IjEwIiB3aWR0aD0iMTEiIGhlaWdodD0iMiIgcng9IjEiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') no-repeat center;
    background-size: contain;
  }

  .sliderPoint {
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #FF8057;
    min-width: 35px;
    text-align: center;
    vertical-align: text-bottom;

    span {
      font-size: 12px;
    }
  }

  :global {
    .van-slider {
      margin: 7px 0;
    }
  }
}

.goPractice {
  width: 89px;
  height: 32px;
  background: url('./../image/btn_go_practice.png') no-repeat center;
  background-size: contain;
  position: absolute;
  right: 12px;
  bottom: 60px;
  z-index: 11;
  transition: all .5s ease;


  &.hide {
    transform: translateX(65px);
  }
}