XJTU-Pay/static/style4.css

752 lines
18 KiB
CSS

/*
* Author: Zhu zhu
*/
#code table{width: 100%;height:100%;}
.qr_code{ display: inline-block;background-size: 110%;}
/*.qr_code{margin-bottom: 15px;margin-top: 10px;}*/
body {
background: #f8f8f8;
text-align: left;
font-family: '微软雅黑', Helvetica, Arial, sans-serif;
color: #555;
font-size: 12px;
font-weight: 400;
}
ul{list-style: none;}
strong { font-weight: 700; }
.red { color: #eb4141; }
a:hover { text-decoration: none; }
.text_align{text-align: center}
.header {
margin: 0 auto;
height: 50px;
line-height: 50px;
background-color: #333;
-moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
font-size: 14px;
}
.tit_back{background: url("../img/back.png")3px center no-repeat ;padding-left:10px; font-size: 16px}
.tit_back_1{position: absolute;left:2px;padding: 0 0 0 10px;}
.tit_center{width: 40%;text-align: center;font-size: 18px;}
.tit_more{width:25%;text-align: right;}
.tit_content{width: 65%;text-align: center;}
.tit_menu{font-size: 32px;width: 10%; display:inline-block; float: right;letter-spacing:3px;}
.tit_menu_01{font-size: 32px;display:inline-block; float: right;position: absolute;right:0px;padding: 0 7px 0 7px;color: #fff;letter-spacing:-5px;}
.logo h1 {
line-height: 10px;
font-family: '微软雅黑', cursive;
font-size: 24px;
font-weight: 300;
}
.logo h1 a,.back_index a,.my_Er.title_col,.pay_title a ,.pay_title{ color: #fff; }
.back_index{width: 20%; }
.pay_title{float: left;}
.pay_title_small{display: block;font-size: 14px; text-align: center;line-height: 30px;height: 30px;color: #fff; }
.my_Er{color: #fff;padding-left: 30%;}
.links {
text-align: right;
}
.links a {
display: inline-block;
width: 30px;
height: 30px;
margin: 15px 0 0 20px;
}
.links a.home { background: url(../img/home.png) center center no-repeat; }
.links a.blog { background: url(../img/blog.png) center center no-repeat; margin-right: 50px; }
.register-container {
margin-top: 50px;
margin-bottom: 30px
}
.con_width{width: 95%;}
/* ----- iPhone ----- */
.iphone {
text-align: right;
}
.iphone img { margin-right: 10px; }
.row{margin: 0 auto;}
/* ----- Registration Form ----- */
.register ,.register .Qr_code{
/*padding: 20px 50px 40px 50px;
background: url(../img/pattern.jpg) left top repeat;*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
/*
-moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
*/
text-align: center;
}
.register h2 {
padding-bottom: 15px;
border-bottom: 2px dotted #bbb;
font-size: 24px;
font-weight: 400;
text-align: center;
}
.register input {
width: 85%;
height: 40px;
padding-left: 40px;
border: 1px solid #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius:4px;
-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
font-family: '微软雅黑', Helvetica, Arial, sans-serif;
color: #888;
font-size: 14px;
}
.register .userID{ background: url(../bootstrap/img/user.png) #f6f6f6 5px center no-repeat ;}
.register .pasWord{ background: url(../bootstrap/img/psword.png) #f6f6f6 5px center no-repeat ;}
.register input:focus {
border: 1px solid #ccc;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.register label {
margin: 0 2px 0 0;
font-size: 14px;
text-align: left;
padding-left: 30px;
height: 30px;
line-height: 30px;
}
/*
* .register label span {
font-style: italic;
}*/
.marg-bot{
margin : 30px 0 10px 0;
padding: 0 8px 0 8px;
}
.marg_left{
padding: 0 8px 0 8px;
}
.Qr_info{ margin : 20px auto 0 auto; width: 172px;}
.Qr_info .positon_l{float: left;}
.register input:-moz-placeholder { color: #aaa; }
.register input:-ms-input-placeholder { color: #aaa; }
.register input:-webkit-input-placeholder { color: #aaa; }
.register button {
cursor: pointer;
width: 85%;
height: 42px;
padding: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 0;
-moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.1) inset;
-webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.1) inset;
box-shadow: 0 15px 30px 0 rgba(255,255,255,.1) inset;
font-family: '微软雅黑', Helvetica, Arial, sans-serif;
font-size: 20px;
letter-spacing:5px;
font-weight: 400;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.1);
-o-transition: all .2s;
-moz-transition: all .2s;
-webkit-transition: all .2s;
-ms-transition: all .2s;
}
.register form button:hover {
-moz-box-shadow: 0 -15px 30px 0 rgba(255,255,255,.05) inset;
-webkit-box-shadow: 0 -15px 30px 0 rgba(255,255,255,.05) inset;
box-shadow: 0 -15px 30px 0 rgba(255,255,255,.05) inset;
}
.register form button:active {
-moz-box-shadow:
0 -15px 30px 0 rgba(255,255,255,.05) inset,
0 5px 8px 0 rgba(0,0,0,.1) inset;
-webkit-box-shadow:
0 -15px 30px 0 rgba(255,255,255,.05) inset,
0 5px 8px 0 rgba(0,0,0,.1) inset;
box-shadow:
0 -15px 30px 0 rgba(255,255,255,.05) inset,
0 5px 8px 0 rgba(0,0,0,.1) inset;
}
/* ----- Media queries ----- */
@media (max-width: 1200px) {
.register form h2 { background: url(../img/pencil.png) 20px 6px no-repeat; }
}
@media (min-width: 768px) and (max-width: 979px) {
.register form h2 { background: none; }
}
@media (max-width: 768px) {
body { padding-left: 0; padding-right: 0; }
.logo, .links { text-align: center; }
.links { padding-bottom: 5px; }
.logo h1 { padding-left: 0; color:#fff;}
.links a.home { margin-left: 0; }
.links a.blog { margin-right: 0; }
.register-container { padding-left: 20px; padding-right: 20px; }
.register form h2 { background: none; }
.iphone img { display: none; }
.pay_margin{
margin-top:0px;
margin-bottom:5px
}
}
@media (max-width: 375px){
.positon_l{width: 30%;}
}
@media (max-width: 320px){
.positon_l{width:30%;}
}
/*
确认交易 Style
*/
.pay_margin{
margin-top:5px;
margin-bottom:5px
}
/*
针对确认付款页面 高度自适应
*/
@media (max-height: 480px){
.pay_margin{
margin-top:5px;
margin-bottom:5px
}
.pay_margin h3{height: 10px;}
}
@media (max-height: 731px){
.pay_margin{
margin-top: 25px;
margin-bottom:5px
}
}
@media (max-height: 800px){
.pay_margin{
margin-top: 35px;
margin-bottom:5px
}
}
@media (max-height: 950px){
.pay_margin{
margin-top: 45px;
margin-bottom:5px
}
}
@media (max-height:480px){
.pay_margin{
margin-top:5px;
margin-bottom:0px
}
}
/* 二维码付款 Style*/
.pay{background: #333;}
.pay_form{
font-size: 14px;
}
.seller{
height: 30px;
line-height: 30px;
}
.many_input{
width: 90%; border: none;
}
.modal-title_01{text-align: center;font-weight: normal;}
.pay_button{width: 100%;margin: 0 auto;height: 40px;font-family: "微软雅黑";font-size: 20px; font-weight:500;}
.pay_button_01{ font-family: "微软雅黑";font-weight:500;width: 90%;}
/*height: 40px;font-size: 20px;*/
/*
* 确认交易 Style
*/
.text-left{
display: block; height: 30px; line-height: 30px;text-align: left
}
.text-right{float:right; padding-right:30px;}
.text-right_01{float:right;}
.text-center{text-align: center;}
/*
* 交易成功 Style
*/
.back_col{padding: 5px 0;font-size: 14px;width: 90%;margin: 0 auto;}
.back_col_big{font-size: 20px;}
.succes_col{color: green;}
.wrong_col{color: #d9534f;}
.sure_many{padding:30px 20px 30px 20px;font-size: 40px;font-weight:normal;font-family: "微软雅黑";}
.sure_many_mar{margin-bottom: 30px;margin-top: 30px;}
.order_info{width: 90%; display: inline-block;text-align: left; height: 30px;}
.order_info_01{ width: 95%; display: inline-block;text-align: left; font-size: 14px; margin: 5px 0; }
.txt_right{text-align: right;}
.txt_col{color: #9a9a9a;}
.sure_many_text{font-size: 16px;height: 40px;line-height: 40px;}
.order_info_border{border-bottom: 1px solid #eee;margin: 10px 0 20px 0;}
.float_r{float: right;}
.float_l{float: left;}
.pay_way_sure{text-align: left;width:85%;border-top: 1px solid #d8d8d8;border-bottom: 1px solid #d8d8d8;margin: 0 auto;font-size: 12px;}
.pay_way_sure a{display: inline-block;float: left;}
.pay_way_sure_01{width: 25%; color: #999;}
.pay_way_sure_02{width: 70%; font-size: 16px;}
/*
.trans_bg{width: 30px; height: 30px;border: 1px solid red;background: url(../img/wrong.png)center center no-repeat;}
* */
/*
* 扫码付款 Style
*/
.back_col_pay{background-color: #282936; padding:15% 15% 32% 15%; margin-bottom: 20px; color:#fff; text-align: center;}
.font_col{color:#333;}
.pay_way{width: 45%;}
/*
交易记录 Style
*/
.record{
margin:0;padding: 0;
}
.record_date{background-color: #eee;font-size: 14px;}
.item_padding{padding: 5px 10px;}
.group-item-text{font-size: 12px;}
/*
修改支付密码 Style
*/
.pay_modify{margin: 20px 0 2px 0;}
.pay_forget{margin:0 0 2px 0;}
.modify_title{text-align: center; margin-top:5%;margin-bottom:5%;}
/*
支付默认设置 Style
*/
.set_state{ height: 35px; line-height: 35px; padding-left: 20px;}
.account{padding-left: 20px;border: 1px solid red;}
.pay_index{font-size: 22px; width: 100%;padding-left: 40%;}
.userInfo{text-align: left;font-weight: normal;padding-left: 10px;}
.pay_index_01{font-size: 20px; width: 100%;text-align:center ;}
/*
扫一扫支付 Style
*/
.sweep_bg{background-color: #0a84bd}
.pay-container{width: 86%;margin: 30px auto 10px auto; background-color: #fff; border-radius: 8px 8px 8px 8px;text-align: center;}
.tx{padding: 20px 0 20px 0;}
.bank_update{height: 80px; line-height: 30px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
.bank{float: left;display: flex;align-items: center;justify-content: center;}
.btn_width{width: 90%; }
.align_footer {text-align: center;}
.pay{height:40px;line-height: 40px; border-bottom: 1px solid #ddd;}
.pay_instru{color: #bbb;}
.pay{background: #333;}
/*
扫一扫 使用说明 Style
*/
.instruct{margin: 10px 0 0 0;}
.txt_indent{text-indent:2em}
/*
扫一扫 用户扫商户二维码/条形 Style
*/
.scanning_bg{margin: 0 auto;text-align: center; height:100%;}
.img_align{text-align: center;}
/*
输入条形码 Style
*/
.search{background: #ccc; height: 35px; line-height: 40px;}
.search_input{width: 80%; float: left}
/*
默认支付设置 Style
*/
.drag-handle {
margin-right: 10px;
color: #5F9EDF;
display: inline-block;
cursor: move;
cursor: -webkit-grabbing; /* overrides 'move' */
float: right;
}
.sorttable{padding-left: 20px; padding-right: 20px;font-size: 14px; margin: 0 auto; background-color: white; }
.js-sortable{
list-style: none;
}
.js-sortable li{height: 30px; line-height: 30px;margin-bottom: 3px;}
/*
* 交易记录 Style
* */
.record_01{font-size: 12px;color: #333;width:60%; height: 25px; line-height: 25px;}
.record_title{font-size: 14px; font-weight: 500;}
.record_border{border-bottom: 1px dashed #333; padding: 5px 8px 10px 8px;font-family: '微软雅黑';}
/*
更新支付方式
*/
.popup {
background-color: #fff;
position: fixed;
width: 100%;
padding: 0;
z-index: 4;
bottom: 0;
}
.popup {
bottom: 0;
display: none;
}
.caption-head.border {
border-bottom: 1px solid #ebebeb;
}
.flex-box {
display: flex;
}
.fit {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.text-center {
text-align: center;
}
.liushui-list:first-child {
margin-top: 0;
}
.liushui-list {
margin: .2rem 0 0;
}
.profile-box dl {
background-color: #fff;
border-bottom: 1px solid #f2f2f2;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
margin: 0;
padding: .625rem 0;
}
.profile-box dl dd {
color: grey;
padding-right: 1rem;
font-size: .85rem;
margin: 0;
}
.profile-box dl dt {
color: #555;
padding-left: 1rem;
font-size: 1rem;
margin: 0;
}
.profile-box dl dd.f{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding-left: 1rem;
}
.profile-box .liushui-list dl:first-child {
border-top: 0;
border-radius: 0;
}
.caption-head {
padding: .875rem;
position: relative;
}
.caption-head.border {
border-bottom: 1px solid #ebebeb;
}
.icon-uncheckbox{
border: 1px solid #ccc;
border-radius: 1.75rem;
width: 1.25rem;
height: 1.25rem;
}
.icon-uncheckbox .small{
width: 1rem;
height: 1rem;
}
.icon-checkbox{
background-color: #3dcf29;
border: 1px solid #3dcf29;
border-radius: 1.75rem;
width: 1.25rem;
height: 1.25rem;
position: relative;
transform: rotate(45deg);
}
.icon-checkbox:before {
height: 2px;
width: 8px;
left: 5px;
top: 13px;
}
.icon-checkbox:after {
height: 15px;
width: 2px;
left: 12px;
top: 0px;
}
.icon-checkbox:after, .icon-checkbox:before {
content: '';
font-size: 0;
position: absolute;
background-color: #fff;
overflow: hidden;
}
.checkbox:before{
content: '';
height: 2px;
width: 8px;
background-color: #fff;
font-size: 0;
overflow: hidden;
position: absolute;
left: 8px;
top: 19px;
}
.checkbox:after{
content: '';
height: 15px;
width: 2px;
background-color: #fff;
font-size: 0;
overflow: hidden;
position: absolute;
left: 15px;
top: 6px;
}
.checkbox.small{
width: 1rem;
height: 1rem;
}
[class*=" icon-"], [class^=icon-] {
font-family: synjones;
speak: none;
font-style: normal;
font-variant: normal;
font-weight: 400;
text-transform: none;
display: inline-block;
font-size: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn01{
border: 0;
outline: 0;
background: #fff;
}
.profile-box dl dt img {
width: 1.875rem;
height: 1.875rem;
overflow: hidden;
}
.title{
font-size: 1rem;
color:#1d1d1d;
font-weight: 600;
margin-bottom: .5rem;
}
.dec{
color: #727272;
}
.font-size-20{
font-size: 1rem;
}
.font-size-24{
font-size: 1.5rem;
}
#payWay img{
width: 1.25rem;
height: 1.25rem;
margin-right: .4rem;
}
/*
function Style
*/
.function_list{padding: .3rem .2rem;display: flex; justify-content: center;align-items: center;position: fixed;bottom: 2.5rem;left: 0rem;right: 0rem;}
.function{display: inline-block;width: 30%; text-align: center;}
.function_friend{display: inline-block;width:50%; text-align: center;}
.function_01,.function_02{display:block; }
.new-icon-circle{display: block;margin: auto; border-radius: .3rem; margin-bottom: .1rem;width:2rem;height:2rem;line-height: .8rem; color: #fff; font-size: .12rem; }
.iconfont{font-family: iconfont!important;font-style: normal; -webkit-font-smoothing: antialiased;-webkit-text-stroke-width: .2rem;}
.aut_icon{background: url("../img/fkm.png")center center no-repeat; background-size: 90%;}
.pay_icon{background: url("../img/ccm.png")center center no-repeat; background-size: 90%;}
.yard_icon{background: url("../img/sys.png")center center no-repeat;background-size: 90%;}
.cardVou_icon{background: url("../img/cardVou_icon.png")center center no-repeat;background-size: 90%;}
.friend_icon{background: url("../img/friend_icon.png")center center no-repeat; background-size: 90%;}
.addressbook_icon{background: url("../img/address_book_icon.png")center center no-repeat; background-size: 90%;}
#oneCode{
background: rgba(255, 255, 255, 1);
z-index: 10;
height: 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
display: none;
}
#ccTips{
width: 6rem;
height: 2rem;
line-height: 2rem;
padding: .2rem;
background: rgba(255, 255, 255, .8);
border-radius: .5rem;
margin: auto;
text-align: center;
display: none;
bottom: .2rem;
}
.shadeBg{
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
background: rgba(0, 0, 0, .5);
display: none;
}
@media screen and (orientation: portrait) {
.one{
width: 85%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.tipsbox{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 11;
background: rgba(255, 255, 255, .99);
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
z-index:12;
}
.tips-txt{
color:#1d1d1d;
font-size: 1rem;
text-align: center;
width: 15rem;
margin-top: 1rem;
}
.oneimg{
width:22rem;
height: 8rem;
overflow: hidden;
}
.oneimg img{
width:100%;
height: auto;
}
#dvtext{
font-size: 1.375rem;
margin-bottom: .4rem;
letter-spacing: 4px;
}
.logo{
width: 6rem;
height: 6rem;
overflow: hidden;
}
#payWay{
display: inline-block;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
overflow: hidden;
height: 2rem;
}
.btn{ height: 2rem; line-height: .8rem; background: #01558B;border: none; color: #fff;border-radius: .3rem;letter-spacing: 4px;padding: 0 2rem;}
.btn_box{margin-left:auto; margin-right:auto;width:90%; text-align: center;margin-top: 2rem;}
.bill-header { padding: 17px 0; position: relative; width: 100%;background-color: #005992; }
.bill-header-arrow { position: absolute; left: 11px; display: block; background: url("./images/back_icon.png") left center no-repeat; background-size: 23px 23px; padding-left:28px; color: white;}
.bill-header-font { font-size: 16px; color: #fff; display: block; text-align: center; }
}