You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
12 KiB
CSS
157 lines
12 KiB
CSS
5 years ago
|
@charset "utf-8";
|
||
|
|
/**
|
||
|
|
* @author: sq
|
||
|
|
* @update: 2015.9.24
|
||
|
|
-----------------------------------------*/
|
||
|
|
/*********************
|
||
|
|
reset css
|
||
|
|
*********************/
|
||
|
|
article, aside, details, figcaption, figure, footer, header, menu, nav, section{ display:block; }
|
||
|
|
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, p{ margin:0; padding:0; }
|
||
|
|
table{ border-spacing:0; border-collapse:collapse; }
|
||
|
|
fieldset, img{ border:0; }
|
||
|
|
address, caption, cite, code, em, strong, th{ font-weight:normal; font-style:normal; }
|
||
|
|
ol, ul{ list-style:none; }
|
||
|
|
caption, th{ text-align:left; }
|
||
|
|
h1, h2, h3, h4, h5, h6{ font-weight:normal; font-size:100%; }
|
||
|
|
input, button, textarea, select{ font-weight:inherit; font-style:inherit; font-size:inherit; font-family:inherit; -webkit-appearance:none; }
|
||
|
|
input, button, textarea, select{ *font-size:100%; }
|
||
|
|
input[type="text"]:focus, input[type="password"]:focus, textarea:focus{ outline:0 none; }
|
||
|
|
:link, :visited{ text-decoration:none; }
|
||
|
|
pre{ white-space:pre-wrap; word-wrap:break-word; }
|
||
|
|
|
||
|
|
body, button, input, select, textarea{ font:12px/1.5 SimSun, Helvetica, sans-serif; _font-family:"SimSun"; }
|
||
|
|
body, html{ width:100%; min-height:100%; -webkit-text-size-adjust:none; }
|
||
|
|
body{ background:#fff; color:#000; -webkit-backface-visibility:hidden; }
|
||
|
|
a{ color:#000; -webkit-tap-highlight-color:rgba(0, 0, 0, .1); }
|
||
|
|
a:hover{ text-decoration:none; }
|
||
|
|
.fl{ float:left; }
|
||
|
|
.fr{ float:right; }
|
||
|
|
.clear{ clear:both; }
|
||
|
|
.clearfix:after{ display:block; visibility:hidden; clear:both; height:0; content:" "; font-size:0; }
|
||
|
|
|
||
|
|
.hidden{display: none;}
|
||
|
|
.auto{width: 1000px;margin: 0 auto;}
|
||
|
|
.main-wrap{background-color: #eff0f1;}
|
||
|
|
.container-pay{background-color: #eff0f1;}
|
||
|
|
/* top */
|
||
|
|
.topbar{background-color: #fff;height: 60px; border-bottom: 1px solid #d9d9d9;}
|
||
|
|
.topcon .pay-logo{padding-top: 10px;}
|
||
|
|
.topcon .pay-logo img{vertical-align: top;}
|
||
|
|
/* error */
|
||
|
|
.area-error{min-height: 595px;}
|
||
|
|
.area-error p{text-align: right;padding-top: 20px;color: #000;}
|
||
|
|
.area-error p a{color: #ff5555;}
|
||
|
|
.error-con {width: 341px;margin: 0 auto;padding-top: 120px;}
|
||
|
|
.error-tip{background: url("../images/error-colse.png") no-repeat left center;padding-left: 55px;margin:15px 0 0 47px;}
|
||
|
|
/*支付宝触屏版提示*/
|
||
|
|
.pay-errortip{background: url("../images/pay-failure.png") no-repeat left center;padding-left: 55px;margin:15px 0 0 47px;}
|
||
|
|
.pay-successtip {background: url("../images/pay-success.png") no-repeat left center;padding-left: 55px;margin:15px 0 0 47px;}
|
||
|
|
/*支付宝触屏版提示*/
|
||
|
|
.error-con span{text-align: left;padding-top: 0;font-size: 14px;font-weight: bold;color: #3f3a39;display: block;}
|
||
|
|
.error-con .error-code{font-weight: normal;}
|
||
|
|
/* footer */
|
||
|
|
.footer-pay{background-color: #e9e9e9;text-align: center;color: #808080;padding: 35px 0 30px;}
|
||
|
|
|
||
|
|
/* 订单详情 */
|
||
|
|
.orderDetail-content{padding: 30px 23px 16px;position: relative;border-bottom: 3px solid #b3b3b3;}
|
||
|
|
.order-message-row{overflow: hidden; padding-top: 14px;}
|
||
|
|
.order-message-row span{display: block;}
|
||
|
|
.order-message-row span.long-content{font-weight: 700; font-size: 14px;}
|
||
|
|
.order-message-row span.short-content{font-size: 12px;max-width: 165px;margin-left: 20px; float: left; margin-top: 1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
|
||
|
|
.order-message-row .payCount{position: absolute; bottom: 30px; right: 23px; text-align: right; z-index: 1;}
|
||
|
|
.order-message-row .payCount strong{font: 26px/1.5 Arial; color: #ff5555;margin-right: 3px;}
|
||
|
|
.order-message-row .item{padding-top: 10px;}
|
||
|
|
.order-message-row .item p{line-height: 22px;}
|
||
|
|
.order-question{position: relative;display: inline-block;color: #4baef2;}
|
||
|
|
.order-question-tip:before{content: '';background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAANAgMAAAAGbqyVAAAADFBMVEX////o6Ojv8PGzs7PSfCDWAAAAK0lEQVQI12NYFc7AsDKGgWFpAQPD1AMMDEAuQwwQF4BpEB8kDpIHqwOpBwAdrwq3tlVp5QAAAABJRU5ErkJggg==") no-repeat;width: 9px;height: 13px;position: absolute;left: -9px; top: 8px;z-index: 10;}
|
||
|
|
.order-question-tip{width: 360px;background-color: #fff; margin: 2px; border: solid 1px #B3B3B3; z-index: 1;position: absolute;top:-8px;right: -371px;display: none;}
|
||
|
|
.order-question:hover .order-question-tip{display: block;}
|
||
|
|
.order-dialog-tit{padding: 10px 12px 0; font-weight: bold; color: #4D4D4D;}
|
||
|
|
.order-dialog-content{padding: 5px 12px 10px;color: #000;}
|
||
|
|
.order-create-time em{color: #ff5555;}
|
||
|
|
.order-ext-trigger { position: absolute; right: 20px; bottom: 0; height: 17px; padding: 3px 8px 2px; font-weight: 700; border-top: 0; background: #b3b3b3; z-index: 100; color: #fff; }
|
||
|
|
.orderDetail-content.cur .order-message-down,
|
||
|
|
.orderDetail-content.cur .order-ext-down{display: block;}
|
||
|
|
.orderDetail-content.cur .order-ext-up,
|
||
|
|
.orderDetail-content.cur .order-message-up{display: none;}
|
||
|
|
.orderDetail-content .order-ext-down{bottom: -25px;}
|
||
|
|
.pay-center-container{background-color: #fff;height: 485px; border-bottom: 3px solid #b3b3b3;}
|
||
|
|
.pay-qrcode-con{width: 300px;margin: 0 auto;position: relative;}
|
||
|
|
.pay-qrcode-header {text-align: center;color: #4a4a4a;padding: 70px 0 10px;}
|
||
|
|
.pay-qrcode-header .pay-money{font-size: 28px; font-family: Arial; font-weight: 700; color: #ff5555; }
|
||
|
|
.pay-qrcode-wrap{ position: relative; width: 168px; height: auto; min-height: 168px; margin: 0 auto; padding: 6px; border: 1px solid #d3d3d3; -webkit-box-shadow: 1px 1px 1px #ccc; box-shadow: 1px 1px 1px #d1d1d1;}
|
||
|
|
.pay-qrcode-img img{width: 168px;height: 168px;display: block;margin-bottom: 10px;}
|
||
|
|
.pay-sweep{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaBAMAAABWeiG6AAAAHlBMVEUAAABLrvJLrvJLrvJLrvJLrvJLrvJLrvJLrvJLrvIpcdFxAAAACXRSTlMAxMPukQY8iTvjBaomAAAAXElEQVQY02NgdZ45cxIDAwPjzJkzTQIYWIDURCh3ZgED8zQGOMg0YOCcAOcB2RRxmQQQXEYgmxSgORMJTELlTiTNKCYFJGcoUNGDKEHXaQAO2EnwgAUH+0R4sAMAwhgxzvHwtdUAAAAASUVORK5CYII=") no-repeat left center;padding-left: 37px;color: #4a4a4a;margin-left: 24px;}
|
||
|
|
.pay-qrcode-foot{text-align: center;padding-top: 15px;}
|
||
|
|
.pay-qrcode-foot a{color: #a6a6a6;text-decoration: underline;}
|
||
|
|
|
||
|
|
.new-pay-qrcode-foot {text-align: center;padding-top: 15px;}
|
||
|
|
.new-pay-qrcode-foot a{ color: #a6a6a6; width:100px; padding:5px; font-size: 12px; -webkit-background-clip: padding-box;border-radius:8px;display:inline-block;border-width:1px; border-style:solid; }
|
||
|
|
.new-pay-qrcode-foot .new-success-pay{background-color: #FF7F00;border-color: #E48126;color: #ffffff;}
|
||
|
|
.new-pay-qrcode-foot .new-fail-pay{background-color: #EDEBEC;border-color:#CBCBCB;color: #2F2D2E;}
|
||
|
|
|
||
|
|
.pay-qrguide{position: absolute;right: -160px;top: 65px;}
|
||
|
|
|
||
|
|
/* 支付通道 */
|
||
|
|
.orders-summary{padding: 32px 20px 17px;position: relative;border-bottom: 3px solid #b3b3b3;}
|
||
|
|
.orders-summary .orders-name{font-size: 14px;color: #3f3a39;font-weight: bold;margin-bottom: 15px;}
|
||
|
|
.orders-summary .orders-desc {color: #4a4a4a;}
|
||
|
|
.orders-summary .total-money{position: absolute;right: 0;bottom: 10px;color: #4a4a4a;font-size: 14px;}
|
||
|
|
.orders-summary .total-money strong{font: bold 26px/1.5 Arial;color: #ff5555;}
|
||
|
|
.order-checkbank{background: #fff;border-bottom: 3px solid #b3b3b3;padding: 30px 0 40px;}
|
||
|
|
.order-checkbank-tit{padding-left: 20px;}
|
||
|
|
.order-checkbank-list{overflow: hidden;padding:47px 0 120px 130px;}
|
||
|
|
.order-checkbank-list li{float: left;margin-right: 70px;}
|
||
|
|
.order-checkbank li a{width: 196px;height: 76px;display: block;border: 2px solid #d9d9d9; transition: border .3s;}
|
||
|
|
.order-checkbank li.current a,.order-checkbank li a:hover{border: 2px solid #ff5555;}
|
||
|
|
.orders-summary li img{width: 196px;height: 76px;display: block;}
|
||
|
|
.order-checkbank-mid{background-color: #f4f4f4; border-top: 1px dotted #d9d9d9;border-bottom: 1px dotted #d9d9d9;padding:10px 30px 10px;}
|
||
|
|
.order-checkbank-mid p{color: #4a4a4a;line-height: 22px;padding-left: 15px;}
|
||
|
|
.order-checkbank-mid .odd{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAKUlEQVQIW2M8fPjw/xkzZjCAQEZGBgNjdHT0//fv34MFBAUFsQigawEASUsWtRmylqEAAAAASUVORK5CYII=") left center no-repeat;}
|
||
|
|
@media only screen and (max-width: 1024px) and (min-width: 0px) {
|
||
|
|
.auto{width: auto;padding:0 10px;}
|
||
|
|
.topbar{height: 42px;}
|
||
|
|
.topcon .pay-logo{padding-top: 7px;}
|
||
|
|
.topcon .pay-logo img{width: 160px;height: 28px;}
|
||
|
|
.area-error p{padding-top: 10px;}
|
||
|
|
.area-error{min-height: 500px;background-size: 170px auto;}
|
||
|
|
.error-con {width: 230px;margin: 0 auto;padding-top: 70px;}
|
||
|
|
.error-tip{background-size:25px auto;padding-left: 35px;margin:8px 0 0 23px;}
|
||
|
|
.error-tip span{font-size: 12px;}
|
||
|
|
.error-con img{width: 230px;height: 200px;}
|
||
|
|
.footer-pay{padding: 10px 20px;}
|
||
|
|
.container-pay{display: none;}
|
||
|
|
/* 触屏订单通道样式 */
|
||
|
|
.m-order{display: block; background: #f5f5f9;}
|
||
|
|
.m-order-base{padding: 0 0 12px; margin-bottom: 4px; background: #fff; position: relative;}
|
||
|
|
.m-order-item{padding: 14px 15px 0; margin: 0; min-height: 20px; font-size: 14px;display: -webkit-box;}
|
||
|
|
.m-order-item label,
|
||
|
|
.m-order-payinfo .payinfo-tit label{color: #5b5b6a;font-weight: bold;width: 72px;display: block;}
|
||
|
|
.m-order-item span{color: #333;-webkit-box-flex: 1;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
|
||
|
|
.m-order-payinfo{background: #fff;border-top: 1px solid #d9d9d9;border-bottom: 1px solid #d9d9d9;margin-top: 15px;/* padding-bottom: 10px; */}
|
||
|
|
.m-order-payinfo .payinfo-tit{padding: 15px 15px 10px;font-size: 14px;display: -webkit-box;}
|
||
|
|
.m-order-payinfo .payinfo-tit span{color: #ff5555;display: block;}
|
||
|
|
.order-payinfo-item{display: -webkit-box;/* margin: 5px 0 10px 10px; */border-top: 1px solid #ddd;margin-left: 10px;padding: 12px 0;}
|
||
|
|
.order-payinfo-icon{width: 60px;margin-right: 8px;}
|
||
|
|
.order-payinfo-icon img{width: 50px;height: 50px;display: block;border: 1px solid #ddd;}
|
||
|
|
.order-payinfo-con{-webkit-box-flex: 1;position: relative;}
|
||
|
|
.order-payinfo-con .pay-title{font-size: 14px;}
|
||
|
|
.order-payinfo-con .pay-meta{font-size: 12px;color: #999;}
|
||
|
|
.order-payinfo-con .pay-check{position: absolute;right: 10px;top: 20px;}
|
||
|
|
.order-payinfo-con .pay-check input{width: 18px;
|
||
|
|
height: 18px;border: 1px solid #d9d9d9;border-radius: 14px;display: block;}
|
||
|
|
.order-payinfo-con .pay-check input:checked{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAXVBMVEUAyrf///8QzbsNzLr1/fxE2Mof0MDQ9fJV3M8Xzr3P9fJh39PB8u1G2MtB18mu7uir7eZ649l34thJ2cst08M91sg71sc51ca88exI2csu08Ms08OS6OCH5dxQ2s11xkGIAAAArklEQVQY01XQ2RKDIAwF0NAQhQq44G7b///MEhCV+0TODJMFREw3WK3t0KUqonSKdsSdFMmMK85wZkGTcJ0quFJNhlEi260oA7oZipAV0KmnvN4NqBYGKkzU4HqwY2kvGDfQGIrfwwB1xFo0tzHy90YEzQaH50ZJs3EjHilqNh5J0MKvj5Cnkb/X/FbJKuA1hSkOMseDBMUlG4G5jmyVGxEPp3w+MqftN61936bqD4jiButM3z75AAAAAElFTkSuQmCC") no-repeat;border: none;width: 20px;height: 20px;}
|
||
|
|
.order-pay-btn{padding: 20px 10px;}
|
||
|
|
.order-pay-btn button{ height: 37px; font-size: 18px; background-color: #fdb338; border-color: #f5ab2f; line-height: 36px; -webkit-background-clip: padding-box; border-radius: 3px;display: block;width: 100%;border: none;color: #fff;}
|
||
|
|
/* 触屏订单详情样式 */
|
||
|
|
.m-order-qrcode{background: #fff;border-top: 1px solid #d9d9d9;border-bottom: 1px solid #d9d9d9;margin: 15px 0;padding: 30px 0;}
|
||
|
|
.m-pay-money{font: bold 14px/1.5 Microsoft Arial;font-size: 28px; color: #ff5555;text-align: center;margin-bottom: 15px;}
|
||
|
|
.m-qrcode-wrap{padding: 3px;width: 180px; border: 1px solid #d3d3d3; -webkit-box-shadow: 1px 1px 1px #ccc; box-shadow: 1px 1px 1px #d1d1d1;margin: 0 auto} }
|
||
|
|
.m-qrcode-img img{width:180px;height:180px;display: block}
|
||
|
|
.m-qrcode-wrap p{height: 28px;line-height: 28px;text-align: center;color: #4a4a4a;}
|
||
|
|
.m-weixin-alipay-hintinfo{font: bold 14px/1.5 Microsoft Arial;font-size: 16px; color: #ff5555;text-align: center; padding:15px;}
|
||
|
|
.m-weixin-alipay-qrcode-foot {text-align: center;padding-top: 15px;}
|
||
|
|
.m-weixin-alipay-qrcode-foot a{ color: #a6a6a6; width:100px; padding:5px; font-size: 16px; -webkit-background-clip: padding-box;border-radius:8px;display:inline-block;border-width:1px; border-style:solid; }
|
||
|
|
.m-weixin-alipay-qrcode-foot .success-pay{background-color: #FF7F00;border-color: #E48126;color: #ffffff;}
|
||
|
|
.m-weixin-alipay-qrcode-foot .fail-pay{background-color: #EDEBEC;border-color:#CBCBCB;color: #2F2D2E;}
|