weixin/target/classes/static/css/payment.css

body, html {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}

header {
    width: 100%;
    text-align: center;
    color: #393939;
    font-size: 1.8rem;
    padding: .6rem 0 0.6rem 0;
    background: white;
    font-weight: 400;
}

.glyphicon-menu-left {
    float: left;
}

.wrap {
    width: 100%;
    height: 100%;
    background: rgb(242, 242, 242);
    font: PingFangSC-Regular;
    position: relative;
}

.number-of-people {
    display: inline-block;
    width: 100%;
    padding: .4rem;
    color: #393939;
}

.payment-card {
    background: rgb(255, 255, 255);
    padding: 1rem;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.payment-card div > img {
    height: 5rem;
}

.payment-card div {
    background-color: #fff;
}

.payment-card .active {
    background-color: rgba(227, 182, 121, .15);
}

.payment-card .period {
    position: relative;
}

.period {
    text-align: center;
}

.period .icon {
    padding-top: 1rem;

}

.period .icon .money {
    display: inline;
}

.period-card {
    display: inline-block;
    width: 50%;
    float: left;
}

.period-card div {
    display: inline-block;
    color: #E3B679;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 500;
    width: 100%;
    border: 1px solid #E3B679;
    border-radius: .4rem;
}

.period-card .year {
    padding-top: .9rem;
    padding-bottom: .9rem;
    margin-bottom: 1rem;
}

.period-card .month {
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.period-card .month .effective-date {
    display: block;
    font-size: 1rem;
}

.period .number img {
    width: 2rem;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.number {
    display: inline-block;
    padding-bottom: .5rem;
    padding-top: 1.5rem;
    vertical-align: top;
}

.period-price span {
    font-family: "Microsoft YaHei UI Light";
    color: #3399FE;
    font-weight: bold;
    font-size: 1.6rem;
}

.period .number span {
    display: inline-block;
    text-align: center;
    color: #7C819D;
    margin-top: .3rem;
    font-size: 1.8rem;
    margin: 1.2rem;
}

.period-price {
    margin-bottom: 1.5rem;
}

.bottom {
    position: absolute;
    bottom: 2rem;
    text-align: center;
    width: 100%;
}

.bottom div {
    margin-top: 5rem;
    font-size: 1.5rem;
    background: #3399FE;
    display: inline-block;
    border-radius: .4rem;
    color: rgba(255, 255, 255, 1);
    padding: .6rem 6rem;

}