music-score/src/view/fingering/index.module.less

.fingeringContainer{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 10px;
}
.imgs{
  position: relative;
  width: 84%;
  height: 100%;
  & > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    max-width: 100%;
    max-height: 100%;
  }
}
.yidiao{
  width: 30px;
  color: var(--van-primary-color);
  font-size: 12Px;
  text-align: center;
  opacity: 0;
}
.tizhi{
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 100%;
  background-color: var(--van-primary-color);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  font-size: 12Px;
  opacity: 0;
  pointer-events: none;
  &:active{
    opacity: .8;
  }
}
.canDisplay{
  opacity: 1;
  pointer-events: initial;
}


@keyframes activeopacity {
  0%   {transforopacitym: 0;}
  100% {opacity: 1;}
}
@keyframes leftrotates {
  0%   {transform: rotate(0deg);}
  50%  {transform: rotate(-10deg);}
  100% {transform: rotate(-10deg);}
}
@keyframes rightrotates {
  0%   {transform: rotate(0deg);}
  50%  {transform: rotate(5deg);}
  100% {transform: rotate(5deg);}
}

:global{
  .small-drum{
    // transform: ;
    img[data-index="active"] :local {
      animation: activeopacity .2s;
      animation-delay: .3s;
      transform-origin: 0px 0px;
    }
    img[data-index="left"] :local {
      // transform: rotate(-10deg);
      animation: leftrotates .5s;
      transform-origin: 0px 0px;
    }
    img[data-index="right"] :local {
      // transform: rotate(5deg);
      animation: rightrotates .5s;
      transform-origin: 0px 0px;
    }
  }
}

:global{
  .piccolo{
    margin-top: 0;
    // padding: 0 10px;
    // padding-right: 40px;
    >.piccolo{
      // padding: 0!important;
    }
  }
}