web2468/src/widgets/WBindPrompt/styles.module.scss

$bg:"./../../assets/bindPrompt/bg.png";
$btn:"./../../assets/bindPrompt/btn.png";
.continer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  pointer-events: none;
  position: relative;
}
.bind_con{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 25.875rem;
  background: url($bg);
  aspect-ratio: 773/497;
  background-size: 100% 100%;
  pointer-events: auto;
  align-items: center;
  justify-content: space-between;
  & .content{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 1.8rem 1rem 0rem 4rem;
    transform: rotate(-6deg);
    gap: 0.75rem;
    & .title{
      color: #6a005e;
      font-weight: bold;
      font-size: 1.1rem;
    }
    & .reward{
      color: #3244c3;
      font-weight: bold;
      font-size: 2.3rem;
    }
    & .des{
      color: #6a005e;
      padding: 0rem 2.5rem;
      font-size: 0.8rem;
      line-height: 1rem;
    }
    & .btn_now{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: url($btn);
      width: 50%;
      aspect-ratio: 248/85;
      background-size: 100% 100%;
      transform: rotate(5.5deg);
      margin-top: -1rem;
      img{
        transform: rotate(-5.5deg);
        height: 30%;
        width: auto;
      }
    }
  }
  & .tips{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem 1.8rem 4rem;
    color: #fff;
    transform: rotate(-6deg);
    line-height: 0.8rem;
    font-size: 0.5rem;
  }
}