xuezichuangke/pages/payment/payment.wxss

page{
  width: 100%;
  background: #F4F4F4;
}
.box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100rpx;
}
.box .title{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box .title text:nth-of-type(1){
  font-size:32rpx;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(42,42,42,1);
  margin-top:29rpx;
  margin-bottom: 15rpx; 
}
.box .title text:nth-of-type(2){
  width:140rpx;
  height:4rpx;
  background:rgba(24,213,185,1);
}
.box .list{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 19rpx;
  background: white;
  border-radius: 20rpx;
  align-items: center;
}
.box .list view{
  display: flex;
  width: 85%;
  justify-content: space-between;
  margin-bottom: 20rpx;
  position: relative;
}
.box .list view .notice{
  position: absolute;
  left: 110rpx;
  width: 28rpx;
  height: 28rpx;
  top: 4rpx;
}
.box .list view text{
  font-size:24rpx;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(42,42,42,1);
}
.box .mode{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  align-items: center;
  border-radius: 20rpx;
  background: white;
  padding-top: 20rpx;
}
.box .mode .view{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 85%;
}
.box .mode .view .left{
  display: flex;
  align-items: center;
}
.box .mode .view .left image{
  margin-right: 24rpx;
}
.box .mode .view .left text{
  font-size:24rpx;
  font-family:PingFang-SC-Regular;
  color:rgba(42,42,42,1);
}
.box .mode .view .right text{
  font-size:24rpx;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(153,153,153,1);
}
.box .mode .view .right1{
  display: flex;
  align-items: center;
  font-size:24rpx;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(153,153,153,1);
  margin-right: -20rpx;
}
.box .mode .view:nth-of-type(1){
  padding-bottom: 25rpx;
  border-bottom: 2rpx solid #F4F4F4;
}
.box .mode .view:nth-of-type(2){
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #F4F4F4;
}
.box .mode .view:nth-of-type(3){
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #F4F4F4;
}
.box .mode .view:nth-of-type(4){
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #F4F4F4;
}
.box .payment{
  width: 100%;
  display: flex;
  align-items: center;
  height: 100rpx;
  background: white;
  border-radius: 20rpx;
  margin-top: 20rpx;
  justify-content: space-between;
  position: relative;
  font-size: 24rpx;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
}
.box .payment image{
  position: absolute;
  right: 5%;
}
.box .money{
  font-size:24rpx;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(42,42,42,1);
  padding-left: 42rpx;
}
.box .money text{
  font-size: 44rpx;
  font-weight: 800;
}
.box .coupon_money{
  width: 87%;
  display: flex;
  align-items: center;
  font-size:22rpx;
  font-family:PingFang SC;
  font-weight:400;
}
.box .system_off_lock{
  width:100%;
  height:100rpx;
  background:#FAF8DC;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  position: fixed;
  bottom: 100rpx;
  left: 0rpx;
  color: #D58548;
  font-size: 26rpx;
}

.box .payment_type{
  position: fixed;
  z-index: 9999;
  left: 0rpx;
  width: 100%;
  bottom: 0rpx;
  margin: 0 !important;
  border-radius: 20rpx 30rpx 0rpx 0rpx !important;
  padding-bottom: 30rpx;
}
.box .cancel{
  position: absolute;
  right: 35rpx;
  top: 28rpx;
}
.box .payment_type .view1{
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
  font-size: 28rpx;
  height: 80rpx;
  border-radius: 40rpx;
  color: white;
}
.box .payment_type .view:nth-of-type(1){
  padding-bottom: 30rpx !important;
}
.box .payment_type .view:nth-of-type(2){
  padding: 40rpx 0rpx !important;
}
.box .payment_type .view:nth-of-type(3){
  padding-top: 40rpx !important;
  padding-bottom: 70rpx !important;
  border: none !important;
}
.box .payment_type .top{
  font-size:34rpx;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(42,42,42,1);
  padding-top: 34rpx;
  width: 85%;
  padding-bottom: 30rpx;
}
.box .fixed{
  width:100%;
  height:100rpx;
  background:white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  border-top: 2rpx solid #f4f4f4;
}
.box .fixed .btn{
  width:240rpx;
  height:70rpx;
  background:rgba(24,213,185,1);
  border-radius:10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:32rpx;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(255,254,254,1);
  margin-right: 42rpx;
}
.box .di{
  display: flex;
  align-items: center;
  margin-top: 30rpx;
}
.box .di text{
  font-size:28rpx;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(24,213,185,1);
  padding-left: 10rpx;
}
.retry {
  width: 162rpx;
  height: 58rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('http://resource.bike.hanyiyun.com/weapp/intro.png');
  background-size: 100% 100%;
  margin-top:54rpx;
  margin-bottom: -110rpx;
  z-index: 100;
}
.retry .introCon {
  font-size:24rpx;
  font-family:PingFang SC;
  color:rgba(255,255,255,1);
  position: absolute;
  letter-spacing: 5rpx;
  z-index: 1111;
  padding-bottom: 10rpx;
  padding-left: 20rpx;
  display: flex;
  justify-content: space-around;
}
.repair{
  position: fixed;
  right: 0rpx;
  bottom: 40%;
}
.maskLayer{
  z-index: 8887;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: .5;
}
.choose{
  z-index: 99999;
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-radius:20rpx 20rpx 0px 0px;
  background: #F1F1F1;
}
.choose .top{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border-radius:20rpx 20rpx 0px 0px;
  padding-bottom: 20rpx;
  position: relative;
}
.choose .hideModal{
  position: absolute;
  top: 18rpx;
  right: 20rpx;
  z-index: 9999;
}
.choose .top .title1{
  font-size:34rpx;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(42,42,42,1);
  padding-top: 34rpx;
  width: 92%;
  padding-bottom: 30rpx;
}
.choose .top .coupon{
  width: 100%;
  display: flex;
  align-items: center;
}
.choose .top .coupon .view{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size:28rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(42,42,42,1);
}
.choose .top .coupon .view .active{
  width:86rpx;
  height:17rpx;
  background:linear-gradient(53deg,rgba(255,81,33,1) ,rgba(249,129,12,1),white);
  margin-top: 15rpx;
}
.choose .top .coupon .view text:nth-of-type(2){
  width:86rpx;
  height:17rpx;
  margin-top: 15rpx;
}
.choose .couponList{
  background:#F1F1F1;
  width: 100%;
  padding-bottom: 130rpx;
  height: 466rpx;
}
.choose .couponList .item{
  background-image: url('http://resource.bike.hanyiyun.com/weapp/coupon.png');
  background-size: 100% 100%;
  width: 690rpx;
  height: 166rpx;
  margin-top: 22rpx !important;
  display: flex;
  align-items: center;
  margin: 0 auto;
  position: relative;
}
.choose .couponList .item .right_top{
  width: 64rpx;
  height: 64rpx;
  position: absolute;
  top: 0rpx;
  right: 0rpx;
}
.choose .couponList .item1{
  background-image: url('http://resource.bike.hanyiyun.com/weapp/invalid_coupon.png') !important;
  position: relative;
}
.choose .couponList .item1 .overdue{
  position: absolute;
  width: 102rpx;
  height: 102rpx;
  right: 40rpx;
}
.choose .couponList .item .left{
  font-size:42rpx;
  font-family:Source Han Sans SC;
  font-weight:800;
  color:rgba(255,255,255,1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.5%;
}
.choose .couponList .item .right{
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 282rpx;
  top: 50rpx;
}
.choose .couponList .item .right view{
  display: flex;
  align-items: center;
  padding-top: 18rpx;
}
.choose .couponList .item .right view text{
  font-size:24rpx;
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(42,42,42,1);
  opacity:0.6;
}
.choose .choose_botton{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  position: absolute;
  bottom: 0rpx;
  left: 0rpx;
  height: 100rpx;
}
.choose .choose_botton  view{
  width: 92%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: white;
  background: red;
  height: 80rpx;
  border-radius: 40rpx;
}
.box .box_bottom{
  width: 100%;
  border-radius: 20rpx;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
  padding-top: 30rpx;
}
.box .box_bottom view{
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  position: relative;
}
.box .box_bottom view:nth-of-type(1){
  padding: 0rpx 0rpx 25rpx 0rpx;
}
.box .box_bottom view{
  padding: 20rpx 0rpx;
  border-bottom: 2rpx solid #F4F4F4;
}
.box .box_bottom image{
  margin-right: -20rpx;
}
.box .box_bottom .right{
  position: absolute;
  right: 0;
}
.box .notice_background{
  z-index: 8887;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: .5;
}
.box .notice_model{
    background-color: #fff;
    left: 15%;
    margin-top: -260rpx;
    position: fixed;
    top: 50%;
    width: 260px;
    /* height: 260px; */
    padding-bottom: 30rpx;
    z-index: 8888;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15rpx;
}
.box .notice_model .btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
  border-radius: 40rpx;
  height: 70rpx;
  color: white;
  width: 80%;
  font-size: 26rpx;
  margin-top: 70rpx;
}
.box .no_dataYes{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size:26rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(101,103,103,1);
}
.box .notice_model .title1{
  font-size:32rpx;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(31,31,31,1);
  width: 90%;
  padding: 30rpx 0rpx;
  display: flex;
  justify-content: center;
}
.box .notice_model .content{
  font-size: 26rpx;
  color: #333;
  width: 90%;
  display: flex;
  flex-direction: column;
}
.box .notice_model .content text{
  padding-top: 30rpx;
}