.fee{
  --base: 1;
  @media screen and (orientation:portrait) {
    --base: 1.5;
  }
  :global{
    .van-button{
      font-size: calc(1rem * 2 * .14 * var(--base));
      height: calc(1rem * 2 * .35 * var(--base));
    }
  }
  .fractionContainer{
    background-color: transparent;
    font-size: calc(1rem * 2 * var(--base));
    padding-top: calc(1rem * 2 * .05 * var(--base));
    :global{
      .van-popup__close-icon--top-right{
        top: calc(1rem * 2 * .14 * var(--base));
        // right: calc(1rem * 2 * .325 * var(--base));
        font-size: calc(1rem * 2 * .16 * var(--base));
        // @media screen and (orientation:portrait) {
        //   right: 18PX;
        // }
      }
    }
  }
  .fraction{
    position: relative;
    width: calc(1rem * 2 * 3.3 * var(--base));
    .title{
      color: #fff;
      font-size: .14em;
      text-align: center;
      background: url('./icons/title.png') no-repeat center 0;
      background-size: contain;
      width: calc(1rem * 2 * 1.24 * var(--base));
      height: calc(1rem * 2 * .31 * var(--base));
      line-height: calc(1rem * 2 * .28 * var(--base));
      top: calc(1rem * 2 * -.05 * var(--base));
      left: 50%;
      margin-left: calc(1rem * 2 * -.62 * var(--base));
      // margin-top: 60px;
      position: absolute;
      z-index: 1;
    }
    .content{
      background-color: #fff;
      border-radius: calc(1rem * 2 * 0.2 * var(--base));
      padding: calc(1rem * 2 * 0.2 * var(--base)) calc(1rem * 2 * 0.2 * var(--base));
      padding-bottom: 10PX;
      .detail{
        display: flex;
        margin-top: calc(1rem * 2 * 0.2 * var(--base));
        align-items: center;
        >img{
          width: calc(1rem * 2 * 1.1 * var(--base));
          margin-right: calc(1rem * 2 * 0.1 * var(--base));
        }
        .progress{
          :global{
            .van-progress__pivot{
              display: none;
            }
          }
          flex: 1;
          .progressitem{
            display: flex;
            align-items: center;
            margin-bottom: calc(1rem * 2 * 0.08 * var(--base));
            :global{
              .van-progress{
                flex: 1;
                height: calc(1rem * 2 * 0.16 * var(--base));
              }
            }
            >span{
              display: block;
              width: calc(1rem * 2 * 0.5 * var(--base));
              text-align: left;
              padding-left: calc(1rem * 2 * 0.1 * var(--base));
              font-size: calc(1rem * 2 * 0.1 * var(--base));
              color: #01C1B5;
              font-weight: bold;
            }
          }
        }
      }
      .num{
        color: #01C1B5;
        font-size: calc(1rem * 2 * 0.16 * var(--base));
        font-weight: bold;
        >strong{
          font-size: calc(1rem * 2 * 0.24 * var(--base));
        }
      }
      .tips{
        background-color: #F3F3F3;
        color: #808080;
        padding: calc(1rem * 2 * 0.08 * var(--base));
        font-size: calc(1rem * 2 * 0.12 * var(--base));
        border-radius: calc(1rem * 2 * 0.1 * var(--base));
        text-align: left;
      }
      .tipMember {
        font-size: calc(1rem * 2 * 0.12 * var(--base));
        padding: calc(1rem * 2 * 0.08 * var(--base));
        margin-bottom: calc(1rem * 2 * 0.1 * var(--base));
        border-radius: calc(1rem * 2 * 0.1 * var(--base));
        display: flex;
        align-items: center;
        background: linear-gradient(90deg, #FFF2E7 0%, #FFE5CF 100%);
        border-radius: 6px;
        color: #AC5E22;
        &::before {
          content: ' ';
          display: inline-block;
          background: url('./icons/tips.png') no-repeat center 0;
          background-size: contain;
          width: calc(1rem * 2 * 0.2 * var(--base));
          height: calc(1rem * 2 * 0.2 * var(--base));
          margin-right: 5px;
        }
      }

      .ctrls{
        font-size: 0;
        :global{
          .van-button{
            width: calc(1rem * 2 * 1 * var(--base));
          }
        }
      }
    }
  }
}
.swipe{
  height: calc(1rem * 2 * 1.45 * var(--base));
  margin-bottom: 10PX;
  img{
    width: 100%;
    height: 100%;
  }
}
