tplus-pos/dist/selfsettle/index.less

pos module

.selfSettle{
  height:100%;
  background-image: linear-gradient(-180deg, #FF8C25 0%, rgba(255,255,255,0.00) 55%);
  border-radius: 2px;
  padding:40px;
  .content{
      height:100%;
      background: #FFFFFF;
      border-radius: 20px;
      text-align: center;
      .quantity{
          font-family: PingFang-SC-Regular;
          font-size: 38px;
          color: #333333;
          line-height: 40px;
          padding-top: 68px;
      }
      .seperator{
          width:100%;
          display: inline-block;
          .left{
              display: inline-block;
              width:25px;
              height:50px;
              border-top-right-radius: 25px;
              border-bottom-right-radius: 25px;
              background-color: bisque;
          }
          .right{
              display: inline-block;
              width:25px;
              height:50px;
              border-top-left-radius: 25px;
              border-bottom-left-radius: 25px;
              background-color: bisque;
          }
          .middle{
              vertical-align: top;
              width:calc(~"100vw - 130px");
              display: inline-block;
              height:25px;
              border-bottom: 1px dashed #979797;
          }
      }
      .amount{
          font-family: PingFang-SC-Medium;
          font-size: 90px;
          color: #FF595E;
          line-height: 100px;
          padding-top: 16px;
          padding-bottom: 80px;
      }
      .member{
          text-align: left;
          padding:0px 100px 30px 100px;
          .title{
              font-family: PingFang-SC-Regular;
              font-size: 38px;
              color: #333333;
              line-height: 40px;
          }
          .value{
              float:right;
              font-family: PingFang-SC-Regular;
              font-size: 38px;
              color: #333333;
              line-height: 40px;
          }
          .value2{
            color: #FF595E !important;
          }
      }
      .total{
          text-align: left;
          padding:10px 100px;
          margin-top: 30px;
          .title{
              font-family: PingFang-SC-Regular;
              font-size: 38px;
              color: #333333;
              line-height: 40px;
          }
          .value{
              float:right;
              font-family: PingFang-SC-Regular;
              font-size: 38px;
              color: #333333;
              line-height: 40px;
          }
      }
      .discount{
          text-align: left;
          padding:10px 100px;
          margin-top: 30px;
          .title{
              font-family: PingFang-SC-Regular;
              font-size: 38px;
              color: #333333;
              line-height: 40px;
          }
          .value{
              float:right;
              font-family: PingFang-SC-Regular;
              font-size: 38px;
              color: #FF595E;
              line-height: 40px;
          }
      }
      .detail{
        text-align: left;
        padding:10px 100px;
        margin-top: 30px;
        
        .value{
            width:100%;
            text-align: right;
            .valuetext{
              font-family: PingFang-SC-Regular;
              font-size: 28px;
              color: #FF8C25;
              line-height: 40px;
            }
            .detailContent{
              max-height:700px;
              width:100%;
              overflow-y: scroll;
              padding:0px 35px 35px 35px;
              .sku{
                height:150px;
                text-align: left;
                .top{
                    position: relative;
                    padding-top: 30px;
                    .zeng{
                        font-size: 34px;
                        color: #ff8c24;
                        line-height: 34px;
                    }
                    .dname{
                        // margin-left:20px;
                        font-family: PingFang-SC-Medium;
                        font-size: 30px;
                        color: #333333;
                        line-height: 30px;
                        // float: left;
                        width:calc(~"100% - 40px");
                        // background: red;
                        
                    }
                    
                    overflow: hidden;
                }
                .bottom{
                    vertical-align: top;
                    margin-top:20px;
                    .tax-price{
                        font-family: PingFang-SC-Regular;
                        font-size: 28px;
                        color: #000000;
                        line-height: 28px;
                        display: inline-block;
                        width:25%;
                    }
                    .retail-price{
                        margin-left:20px;
                        font-family: PingFang-SC-Regular;
                        font-size: 24px;
                        color: #999999;
                        line-height: 24px;
                        display: inline-block;
                        width:25%;
                    }
                    .retail-price-through{
                        text-decoration:line-through;
                    }
                    .dquantity{
                        font-family: PingFang-SC-Medium;
                        font-size: 28px;
                        color: #333333;
                        line-height: 28px;
                        display: inline-block;
                        margin-left:20px;
                        width:15%;
                        text-align: center;
                        
                    }
                    .tax-amount{
                        display: inline-block;
                        width:24%;
                        margin-left:20px;
                        font-family: PingFang-SC-Semibold;
                        font-size: 30px;
                        color: #FF8C25;
                        text-align: right;
                        line-height: 30px;
                    }
            
                }
              }
            }
        }
      }
      
      .barcodecontainer{
          text-align: center;
          padding-left:calc(~"50vw - 285px");
          padding-top: 28px;
          padding-bottom: 20px;
          .barcode{
              width:490px;
              height:369px;
              background:#FFFFFF url('https://newretail.static.chanjet.com/vertical/pay.gif') no-repeat !important;
              background-position: center center !important;
          }
      }
      .tips1{
          font-family: PingFang-SC-Medium;
          font-size: 36px;
          color: #333333;
          line-height: 48px;
          padding-bottom: 15px;
      }
      .tips2{
          font-family: PingFang-SC-Regular;
          font-size: 36px;
          color: #999999;
          line-height: 38px;
          padding-bottom: 20px;
      }
      .otherpaymodes{
          text-align: left;
          padding-left:61px;
          font-family: PingFang-SC-Regular;
          font-size: 32px;
          color: #999999;
          line-height: 38px;
          padding-bottom: 20px;
      }
      .paymodes{
          text-align: left;
          padding-left:61px;
          .paymode{
              display: inline-block;
                width: 100px;
                height: 166px;
                border-radius: 3.6px;
                margin: 6px 12px;
                background: #FFFFFF;
                vertical-align: top;
      
              .logo{
                text-align: center;
              //   padding-left: 14px;
                padding-top: 7px;
                padding-bottom: 3px;
                .icon{
                  width:100px;
                  height:100px;
                  padding-top: 2px;
                  border-radius: 50%;
                  border: 1px solid #F4F4F4;
                  background: #F4F4F4;
                  i{
                      font-size: 60px;
                    background: #F4F4F4;
                    color:#FF8C25;
                  }
                }
              }
              .text{
                font-size: 30px;
                color: #333333;
                letter-spacing: 0.18px;
                text-align: center;
              }
            }
            .paymodeDisabled{
              // border: 1px solid #EAEBED !important;
              // background: #EAEBED !important;
              .logo{
                .icon{
                  i{
                    color:#EAEBED !important;
                  }
                }
              }
              .text{
                font-size: 12px;
                color: #999999;
                letter-spacing: 0.18px;
                text-align: center;
              }
            }
            .paymodeSelected{
              border: 1px solid #FF8C25 !important;
              background: #FF8C25 !important;
              .logo{
                .icon{
                  background: #FFFFFF !important;
                  i{
                    background: #FFFFFF !important;
                    color:#FF8C25 !important;
                  }
                }
              }
              .text{
                color: #FFFFFF;
                letter-spacing: 0.75px;
                line-height: 16px;
              }
            }
      }
      .button{
          position: absolute;
          bottom: 100px;
          padding-left:calc(~"50vw - 390px");
          button{
              width:700px;
              height:90px;
              background: #FF8C25;
              border-radius: 80px;
              font-family: PingFang-SC-Medium;
              font-size: 40px;
              color: #FFFFFF;
              line-height: 58.67px;
              
          }
          .pay{
              margin-top: 70px;
          }
          
      }
      .successbtn{
          padding-top:300px;
      }
      .failurebtn{
        padding-top:300px;
      }
      .success{
        padding-top: 130px;
        font-family: PingFang-SC-Medium;
        font-size: 70px;
        color: #333333;
        line-height: 100px;
      }
      .welcome{
          margin-top:19px;
          font-family: PingFang-SC-Regular;
          font-size: 40px;
          color: #999999;
          line-height: 40px;
      }
      .paycontainer{
          text-align: center;
          margin-top:87px;
          padding-left:calc(~"50vw - 180px");
          padding-top: 59px;
          padding-bottom: 80px;
          .payok{
              width:280px;
              height:298px;
              background:#FFFFFF url('https://newretail.static.chanjet.com/vertical/paysucess@2x.png') no-repeat !important;
              background-position: center center !important;
          }
          .payfailure{
              width:280px;
              height:298px;
              background:#FFFFFF url('https://newretail.static.chanjet.com/vertical/fail.png') no-repeat !important;
              background-position: center center !important;
          }
      }
  }
}

.pwd-modal{
.u-modal-body{
  height:380px !important;
}
.u-modal-dialog{
  height:503px !important;
}
}
.pwd-container{
box-sizing: border-box;
padding-left: 150px;
.label{
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: #000000;
  letter-spacing: 0;
  text-align: right;
  line-height: 48px;
}
.cardno{
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: #000000;
  letter-spacing: 0;
  line-height: 48px;
}
.balance{
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: #FF4F6D;
  letter-spacing: 0;
  line-height: 48px;
}
.pwd{
  width: 460px;
  height: 64px;
  background: #FFFFFF;
  border-radius: 5.62px;
  border: 2px solid #C8C8CD !important;
  font-family: PingFangSC-Regular;
  font-size: 100% !important;
  color: #999999;
  letter-spacing: 0;
  line-height: 48px;
  padding-left: 10px;
  outline: none;
  margin-left:1px !important;
}
.pwd::-webkit-input-placeholder {
  font-size: 28px;
}
.row{
  margin-top:10px;
}
.btn{
  margin-top: 70px;
}
.btn div button:first-child {
  background: #FFFFFF;
  border: 1px solid #D2D2D7;
  border-radius: 4px;
  font-size: 32px;
  color: #333333;
  line-height: 32px;
}
.btn div button:last-child {
  background: #FF8C26;
  border: 1px solid #FF8C26;
  border-radius: 4px;
  font-size: 32px;
  color: #FFFFFF;
  line-height: 32px;
}

.btn div button {
    margin-right: 16px;
    width: 152px;
    height: 64px;
    border-radius: 30px !important;
}
}

.popper {
background: #FFFFFF;
box-shadow: 0 0 4px 0 #FF8C25;
border-radius: 20px;
width: calc(~"100vw - 152px");
padding: 5px;
}
.popper::before {
content: '';
display: block;
position: absolute;
top: -10px;
left: calc(~"100vw - 287px");
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FF8C25;
}
.popper::after {
content: '';
display: block;
position: absolute;
top: -9px;
left: calc(~"100vw - 287px");
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #ffffff;
}

.popper .popper__arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
}

.popper[data-placement^="top"] {
margin-bottom: 5px;
}

.popper[data-placement^="top"] .popper__arrow {
border-width: 5px 5px 0 5px;
border-color: #222 transparent transparent transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}

.popper[data-placement^="bottom"] {
margin-top: 15px;
}

.popper[data-placement^="bottom"] .popper__arrow {
border-width: 0 10px 10px 10px;
border-color: transparent transparent #FF8C25 transparent;
top: -10px;
left: calc(~"100vw - 287px");
margin-top: 0;
margin-bottom: 0;
}

.popper[data-placement^="right"] {
margin-left: 5px;
}

.popper[data-placement^="right"] .popper__arrow {
border-width: 5px 5px 5px 0;
border-color: transparent #222 transparent transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}

.popper[data-placement^="left"] {
margin-right: 5px;
}

.popper[data-placement^="left"] .popper__arrow {
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #222;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}

.popper[data-x-out-of-boundaries] {
  display: none;
}