bike-alipay/pages/pay/pay.acss

/* required by usingComponents */

 page{
  width: 100%;
  background: #F4F4F4;
}
.home{
  position: fixed;
  /* top: 30rpx; */
  left: 20rpx;
  height: 80rpx;
  width: 100%;
  text-align: center;
}
.home text{
 margin-left: -50rpx;
 line-height: 80rpx;
 font-size: 34rpx;
 font-weight: 500;
}
.home image{
  height: 50rpx;
  margin-top: 10rpx;
  width: 50rpx;
  float: left;
}
.box{
  width: 100%;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  padding-bottom: 100rpx;
}
 .pay-top{
  height:250rpx;
  background: var(--globleColor);
}
.pay-top{
font-size: 32rpx;
font-weight: 600;
padding-top: 50rpx;
} 
.pay-money{
  /* height: 110rpx; */
  /* padding-top:80rpx; */
  text-align: center;
  /* line-height: 150rpx; */
  /* margin-top: 100rpx; */
  font-size: 60rpx;
  font-weight: bold;
  padding: 20rpx 0;
}
.box .title{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
  font-weight: 400;
  margin-bottom: 50rpx!important;
}
.box .title text:nth-of-type(1){
  font-size:32rpx;
  font-family:PingFang-SC-Regular;
  font-weight:500;
  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{
  display: flex;
  margin: 0 20rpx;
  flex-direction: column;

  background: white;
  border-radius: 10rpx;
  align-items: center;
  padding:  30rpx 0 20rpx;
  
}
.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;
}
.shichang{
font-size: 28rpx;
color: rgb(148, 147, 147);
padding-bottom: 50rpx;
border-bottom:solid 1rpx rgb(228, 225, 225);
margin-bottom:50rpx!important;
}
.box .list view text{
  font-size:28rpx;
  font-family:PingFang-SC-Regular;
  font-weight:500!important;
  color:rgba(42,42,42,1);
}
.box .mode{
  /* width: 100%; */
  margin: 20rpx 30rpx;
  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%; */
  margin: 20rpx;
  display: flex;
  align-items: center;
  height: 100rpx;
  background: white;
  border-radius: 10rpx;
  /* 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: var(--globleColor);
  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{

}
.box .fixed .btn{
  /* width:240rpx; */
  height:100rpx;
  line-height:100rpx;
  background:var(--globleColor);
  border-radius:20rpx;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  font-size:32rpx;
  margin-top: 80rpx;
  font-family:PingFang-SC-Regular;
  /* font-weight:400; */
   color: var(--fontColor);
  font-weight: bold;
  /* 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:var(--orgFont);
  padding-left: 10rpx;
}

.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;
}
.box .box_bottom{
  /* width: 100%; */
  border-radius: 20rpx;
  background: white;
  display: flex;
  margin: 0 30rpx;
  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: 70%;
    /* height: 260px; */
    padding-bottom: 30rpx;
    z-index: 8888;
    display: flex;
    flex-direction: column;
    color: #333;
    align-items: center;
    border-radius: 15rpx;line-height: 40rpx;
}
.box .notice_model .btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--globleColor);
  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;
}
.bt-wenti{
  margin-top: 10rpx;
  display: flex;
  /* height: 100rpx; */
  padding: 20rpx 50rpx;
  font-size: 28rpx;
  color: #333;
font-size: 28rpx!important;

}
.kefu{
  flex: 1;
}
.kefu image{
height:30rpx;
width: 30rpx;
margin-right: 10rpx;
display: inline-block;

vertical-align: middle;

}
.kaisuo{
  flex: 1;
  font-size: 26rpx!important;
  color: var(--orgFont);text-align: right;
}
.colse-type{
  margin: 0 20rpx;
  /* min-height: 70rpx; */
  line-height: 42rpx;
  padding: 10px 50rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  /* font-weight: 600; */
  color: var(--orgFont);
  background-color: hsl(37, 51%, 92%);
}