yoshop-wechat/pages/user/recharge/index.wxss

page, .container {
  background: #fff;
}

.container {
  padding-bottom: 70rpx;
}

/* 账户面板 */

.account-panel {
  width: 650rpx;
  height: 180rpx;
  margin: 50rpx auto;
  padding: 0 60rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  color: #fff;
  background: linear-gradient(-125deg, #a46bff, #786cff);
  box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.26);
}

.panel-lable {
  font-size: 32rpx;
}

.recharge-label {
  color: rgb(51, 51, 51);
  font-size: 28rpx;
  margin-bottom: 25rpx;
}

.panel-balance {
  text-align: right;
  font-size: 46rpx;
}

.recharge-panel {
  margin-top: 60rpx;
  padding: 0 60rpx;
}

/* 充值套餐 */

.recharge-plan .recharge-plan_item {
  width: 192rpx;
  padding: 15rpx 0;
  float: left;
  text-align: center;
  color: #888;
  border: 1rpx solid rgb(228, 228, 228);
  border-radius: 10rpx;
  margin: 0 20rpx 20rpx 0;
}

.recharge-plan .recharge-plan_item:nth-child(3n+0) {
  margin-right: 0;
}

.recharge-plan .recharge-plan_item.active {
  color: #786cff;
  border: 1rpx solid #786cff;
}

.recharge-plan .recharge-plan_item.active .plan_money {
  color: #786cff;
}

.plan_money {
  font-size: 32rpx;
  color: rgb(82, 82, 82);
}

.plan_gift {
  font-size: 25rpx;
}

.recharge-input {
  margin-top: 25rpx;
}

/* 立即充值 */

.recharge-input input {
  border: 1rpx solid rgb(228, 228, 228);
  border-radius: 10rpx;
  padding: 15rpx 16rpx;
  font-size: 26rpx;
}

.recharge-submit {
  margin-top: 70rpx;
}

.btn-submit button {
  font-size: 30rpx;
  background: #786cff;
  border: none;
  color: white;
  border-radius: 50rpx;
  padding: 0 120rpx;
  line-height: 3;
}

.btn-submit button[disabled] {
  background: #a098ff;
  border-color: #a098ff;
  color: white;
}

/* 充值说明 */

.recharge-describe {
  margin-top: 50rpx;
  padding: 0 60rpx;
}

.recharge-describe .content {
  font-size: 26rpx;
  line-height: 1.6;
  color: #888;
}