sct/view/components/payment/index.wxss

@import '/font/iconfont.wxss';
@import '/app.wxss';
.payment {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 16rpx 16rpx 0 0;
  background-color: #fff;
  padding-bottom: 60rpx;
  z-index: 99;
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transform: translate3d(0, 100%, 0);
}

.payment.on {
  transform: translate3d(0, 0, 0);
}

.payment .title {
  text-align: center;
  height: 123rpx;
  font-size: 32rpx;
  color: #282828;
  font-weight: bold;
  padding-right: 30rpx;
  margin-left: 30rpx;
  position: relative;
  border-bottom: 1rpx solid #eee;
}

.payment .title .iconfont {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 43rpx;
  color: #8a8a8a;
  font-weight: normal;
}

.payment .item {
  border-bottom: 1rpx solid #eee;
  height: 130rpx;
  margin-left: 30rpx;
  padding-right: 30rpx;
}

.payment .item .left {
  width: 610rpx;
}

.payment .item .left .text {
  width: 540rpx;
}

.payment .item .left .text .name {
  font-size: 32rpx;
  color: #282828;
}

.payment .item .left .text .info {
  font-size: 24rpx;
  color: #999;
}

.payment .item .left .text .info .money {
  color: #ff9900;
}

.payment .item .left .iconfont {
  font-size: 45rpx;
  color: #09bb07;
}

.payment .item .left .iconfont.icon-zhifubao {
  color: #00aaea;
}

.payment .item .left .iconfont.icon-yuezhifu {
  color: #ff9900;
}

.payment .item .left .iconfont.icon-yuezhifu1 {
  color: #eb6623;
}

.payment .item .iconfont {
  font-size: 0.3rpx;
  color: #999;
}