klx-music-score/src/page-instrument/component/vip/index.module.less

.vipPopup {
   /* 引导页出来不能点击的问题 */
   pointer-events: initial !important;
   & * {
      pointer-events: initial !important;
   }
   :global {
      .van-popup__close-icon {
         color: #333333;
         top: 23px;
         right: 23px;
         font-size: 20px;
      }
   }
   .vip {
      padding-bottom: 20px;
      width: 295px;
      .title {
         height: 49px;
         background: linear-gradient(to bottom, #defaff, #ffffff);
         padding-bottom: 4px;
         display: flex;
         justify-content: center;
         align-items: flex-end;
         .tit {
            font-weight: 500;
            font-size: 18px;
            color: #1a1a1a;
            line-height: 25px;
         }
      }
      .text {
         margin-top: 16px;
         padding: 0 20px;
         font-weight: 400;
         font-size: 16px;
         color: #666666;
         line-height: 26px;
         text-align: center;
      }
      .btnCon {
         margin-top: 25px;
         display: flex;
         justify-content: center;
         :global {
            .van-button {
               width: 120px;
               height: 40px;
               border-radius: 20px;
               font-weight: 500;
               font-size: 16px;
               & + .van-button {
                  margin-left: 15px;
               }
            }
         }
      }
   }
}

.popup {
   background: transparent;
   width: 270px;
   border-radius: 20px;
   overflow-y: initial;
 }
 .wrap {
   background: #fff;
   text-align: center;
   border-radius: 0 0 20px 20px;
 }
 .image {
   width: 100%;
   display: block;
   margin-bottom: -4px;
 }
 .title {
   font-size: 18px;
   font-weight: 500;
   color: #1a1a1a;
   line-height: 25px;
   padding: 18px 0 10px 0;
 }
 .andTitle{
   font-size: 14px;
 }
 .sub {
   font-size: 14px;
   font-weight: 400;
   color: #808080;
   margin-bottom: 16px;
 }
 .andSub{
   font-size: 14px;
 }
 .btnWrap {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 20px;
 }
 .btn {
   width: 117px;
   height: 34px;
   background-color: transparent;
   border: none;
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
 .cancelBtn {
   background-image: url('./imgs/no-confirm-btn.svg');
 }
 .confirmBtn {
   background-image: url('./imgs/confirm-btn.svg');
 }
 .tryoutBtn {
   background-image: url('./imgs/tryout-btn.svg');
 }
 .discounts {
   position: relative;
   &::after {
     width: 25px;
     height: 8px;
     line-height: 8px;
     background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
     border-radius: 4px 4px 4px 0px;
     content: '专属优惠';
     font-size: 5px;
     color: #ffffff;
     top: -6px;
     position: absolute;
     left: 6px;
   }
 }
 .membershipBtn {
   background-image: url('./imgs/membership-btn.svg');
 }
 .demandBtn {
   background-image: url('./imgs/demand-btn.svg');
 }
 .demandBtnFree {
   background-image: url('./imgs/demand-btn-free.svg');
 }
 .closeBtn{
   position: absolute;
   right: -30Px;
   top: 20Px;
 }