From f9cd3bb6745664af0d89bc22aa1b9cd16e438be3 Mon Sep 17 00:00:00 2001 From: liuqimichale <123456lq> Date: Thu, 7 Nov 2019 10:31:12 +0800 Subject: [PATCH] 初始化项目 --- css/home.css | 248 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ css/reset.css | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ home.html | 402 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ img/aliPay.png | Bin 0 -> 1991 bytes img/loading.gif | Bin 0 -> 43423 bytes img/wxPay.png | Bin 0 -> 2051 bytes js/ajax.js | 297 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/common.js | 288 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/config.js | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/jquery-3.2.1.min.js | 4 ++++ js/md5.min.js | 1 + js/pay.js | 596 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/url.js | 222 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 13 files changed, 2076 insertions(+), 324 deletions(-) create mode 100644 css/home.css create mode 100644 css/reset.css create mode 100644 img/aliPay.png create mode 100644 img/loading.gif create mode 100644 img/wxPay.png create mode 100644 js/ajax.js create mode 100644 js/common.js create mode 100644 js/config.js create mode 100644 js/jquery-3.2.1.min.js create mode 100644 js/md5.min.js create mode 100644 js/pay.js create mode 100644 js/url.js diff --git a/css/home.css b/css/home.css new file mode 100644 index 0000000..8c6e3ab --- /dev/null +++ b/css/home.css @@ -0,0 +1,248 @@ +html,body { + margin: 0; + padding: 0; + background:#f0f4f5; + font-size:62.5%; /*1rem=10px*/ + font-family:'Microsoft YaHei'; +} +body { + color:#2a2a2c; +} +#header ,#section,#footer{ + +} +#header { + width:100%; +} +.panelBgColor { + background:#ffffff; +} +.headerBox { + background:#75cbbe;width:100%; + padding:5px 0px 5px 0px; + border-radius:8px; + margin: 10px; + text-align: center; +} +.flexBox { + display: flex; + justify-content: center; + flex-direction:column; + align-items:center; + width:100%; +} +.flexBoxRow { + display: flex; + display: -webkit-flex; + justify-content: left; + flex-direction:row; + align-items:center; + width:100%; +} +.flexBoxRow_column { + display: flex; + display: -webkit-flex; + justify-content: left; + flex-direction:column; + align-items:center; + width:100%; +} +.carNumBox { + font-size:1.4rem; + font-weight:bold; +} +.moneyBox { + color:#ff6f16; + font-size:3rem; +} +.colorGray { + color:#8a8a8a; +} +.payWayTitle { + font-size:1.6rem; +} +.orderTime { + right:1rem;position:absolute; +} + + +.payIcon { + width:32px;height:32px; +} + +.row { + background:#ffffff; + padding:10px; + position:relative; +} +.marginTop { + margin-top:1rem; +} +.splitLine { + width:100%; + border: 0; + height: 1px; + border-top: 1px solid #f0f4f5; +} + +.marginLeft { + margin-left:1rem; + font-size:1.4rem; +} + +.btnOK { + background:#75cbbe; + width: 15rem; + height: 4rem; + line-height: 4rem; + text-align: center; + border-radius: 5px; + color: #ffffff; + font-size: 2rem; + cursor: pointer; +} +#footer { + justify-content:center !important; +} + +/*收费明细*/ +#payDetail { + padding:5px 10px 5px 10px;font-size: 1.4rem; + /*height:55px;*/ + transition:height .5s; + -moz-transition:height .5s; /* Firefox 4 */ + -webkit-transition:height .5s; /* Safari and Chrome */ + -o-transition:height .5s; /* Opera */ + overflow-y:auto; +} +#payDetail > div { + padding: 5px 0px 2px 0px; +} +#payDetail >div > span:last-child { + margin-left:5px; +} + +/*折扣描述*/ +#discountDesc { + color: #ffffff; background-color: red; border-radius: 2px; margin-left: 5px; padding: 0 3px 0 3px; +} + +#linkPayDetail { + color:#4395ff;text-decoration:none; + float: right; +} + + + + +/*********************************************/ +.radio{ + display: inline-block; + position: relative; + line-height: 18px; + margin-right: 10px; + cursor: pointer; + position:absolute; + right:1rem; +} +.radio input{ + display: none; +} +.radio .radio-bg{ + display: inline-block; + height: 18px; + width: 18px; + margin-right: 5px; + padding: 0; + background-color: #45bcb8; + border-radius: 100%; + vertical-align: top; + box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: all 0.2s ease; +} +.radio .radio-on{ + display: none; +} +.radio input:checked + span.radio-on{ + width: 10px; + height: 10px; + position: absolute; + border-radius: 100%; + background: #FFFFFF; + top: 4px; + left: 4px; + box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.4) inset; + background-image: linear-gradient(#ffffff 0, #e7e7e7 100%); + transform: scale(0, 0); + transition: all 0.2s ease; + transform: scale(1, 1); + display: inline-block; +} + +.headTip { + display:none;text-align: center; + background-color:rgba(253, 201, 11, 0.95); + width: 100%; + line-height:25px; +} +.headTip > span:first-child { + +} +.headTip > span:last-child { + color:red;font-size: 1.6rem; +} + + + + +.discountBox{ + border: 0; + outline: 0; + width: calc(100% - 120px); + height:28px; + line-height: 28px; + padding-left: 10px; + background:rgba(240,244,245,1); + border-radius:4px; + display: inline-block; + float: left; + color: #8a8a8a; + font-size: 14px; +} +.discountBox:focus{ + border: 0; + outline: 0; +} +.discountBtn{ + display: inline-block; + float: right; + border: none; + outline: none; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + border: 1px solid #75CBBE; + border-radius:25px ; + padding: 4px 20px; + font-size: 14px; + color: #75CBBE; + background: #fff; +} +.discount-tip{ + padding-top: 10px; + font-size: 14px; + color: #EB453B; +} +.paySuccess{ + width: 100%; + height: 100%; + text-align: center; + line-height: 100px; + font-size: 20px; + color: #fff; + background: rgba(0,0,0,.7); + position: fixed; + top:0; + left: 0; + display: none; +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..b2a0bd3 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,237 @@ +html{font-family:"Helvetica Neue", Helvetica, STHeiTi, sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} +html,body{-webkit-user-select:none;user-select:none;background-color: #efeff4;} +html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress{margin:0;padding:0;border:0;vertical-align:baseline} +a{text-decoration:none;-webkit-touch-callout:none;background-color:transparent} +li{list-style:none} +article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block} +audio,canvas,progress,video{display:inline-block} +audio:not([controls]){display:none;height:0} +[hidden],template{display:none} +a:active,a:hover{outline:0} +abbr[title]{border-bottom:1px dotted} +b,strong{font-weight:bold} +dfn{font-style:italic} +h1{font-size:2em;margin:.67em 0} +small{font-size:80%} +sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} +sup{top:-0.5em} +sub{bottom:-0.25em} +img{border:0;-webkit-touch-callout:none;} +svg:not(:root){overflow:hidden} +figure{margin:1em 40px} +hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0} +pre{overflow:auto} +code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} +a,button,input,optgroup,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);} +button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;-webkit-appearance:none;outline:none;line-height:normal} +button{overflow:visible;border:0;} +button,select{text-transform:none} +button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer} +button[disabled],html input[disabled]{cursor:default} +button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} +input{line-height:normal} +input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0} +input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto} +input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box} +input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none} +fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em} +legend{border:0;padding:0} +textarea{overflow:auto} +optgroup{font-weight:bold} +table{border-collapse:collapse;border-spacing:0} +td,th{padding:0} +.pay-content-padded {padding: 60px 15px 0;} +.inpt-num{width: 36px;height: 36px;line-height: 36px;text-align: center;display: inline-block;color: #1aad19; +} +.reduce_btn,.add_btn{display: inline-block;padding: 5px 10px;border: 1px solid #c0c5ca;color: #676869; +} + + +/*支付页面的 车牌好键盘样式 start*/ +.che_tit{ text-align:center; padding:20px;} +.ul_pro{list-style:none; background-color:#CED3D9; text-align:center; padding:4px 2px; font-size:14px;} +.ul_pro li{ float:left; width:11.11%; padding:2px;box-sizing: border-box;} +.ul_pro .li_close{ float:right; width:22.22%;} +.ul_pro .li_close span{ background-color:#ACB3BB;} +.ul_pro .li_clean{ float:right; width:22.22%;} +.ul_pro li span{ display:block; background-color:#fff; border-radius:4px; box-shadow: 2px 2px 2px #888888; /* max-width:48px; margin:0 auto; */ line-height:40px; padding-top:2px; } +.ul_pro li span:active{ background-color:#4DA9F2; color:#fff;} + +.ul_input{list-style:none; width:350px; margin:0 auto; } +.ul_input li{ float:left; padding:2px;text-align:center; } +.ul_input li span{ display:block; background-color:#fff; border:1px solid #ccc; border-radius:4px; width:25px; margin:0 auto; height:25px; line-height:25px; } + +.ul_keybord{ background-color:#CED3D9; text-align:center; padding:4px 2px; font-size:14px;} +.ul_keybord li{ float:left; width:10%; padding:2px;box-sizing: border-box;} +.ul_keybord .ikey20{ margin-left:5%;} +.ul_keybord .li_w{ width:11.11%; } + +.ul_keybord .li_close{ float:right; width:22.22%;} +.ul_keybord .li_close span{ background-color:#ACB3BB;} +.ul_keybord .li_clean{ float:right; width:22.22%;} +.ul_keybord li span{ display:block; background-color:#fff; border-radius:4px; box-shadow: 2px 2px 2px #888888; /* max-width:48px; margin:0 auto; */ line-height:40px; padding-top:2px; } +.ul_keybord li span:active{ background-color:#4DA9F2; color:#fff;} +/*支付页面的 车牌好键盘样式 end*/ + + +/*confirmpay.html 确认支付 start*/ +.payinfo{ + text-align: center; + padding: 30px 0; +} +.payinfo p>span{ + font-size: 25px; +} +.payinfo p:last-child{ + font-size: 14px; +} +/*confirmpay.html 确认支付 end*/ + +/*选择微信支付样式 start*/ +.checked_icon { + width: 20px; + height: 20px; + background: url("../img/checked_icon.png"); + background-size: 100% 100%; +} +.weixin_icon { + margin-right: 10px; + width: 20px; + height: 20px; + background: url("../img/weixin_pay.png"); + background-size: 100% 100%; +} +/*选择微信支付样式 end*/ + +/*提示网络状态的样式 start*/ +#tiptoast{ + position: absolute; + width: 110px; + color: #fff; + bottom: 50px; + left: 50%; + margin-left: -55px; + background: rgba(0,0,0,0.5); + text-align: center; + padding: 3px 0; + border-radius: 4px; + z-index: 9999; + transition: all 1s; +} +@keyframes myfirst +{ + 0% {opacity: 0;} + 50% {opacity: 1;} + 100% {opacity: 0;} +} + +@-moz-keyframes myfirst /* Firefox */ +{ + 0% {opacity: 0;} + 50% {opacity: 1;} + 100% {opacity: 0;} +} + +@-webkit-keyframes myfirst /* Safari 和 Chrome */ +{ + 0% {opacity: 0;} + 50% {opacity: 1;} + 100% {opacity: 0;} +} + +@-o-keyframes myfirst /* Opera */ +{ + 0% {opacity: 0;} + 50% {opacity: 1;} + 100% {opacity: 0;} +} +.tiptoast{ + position: absolute; + width: 110px; + color: #fff; + bottom: 50px; + left: 50%; + margin-left: -55px; + background: rgba(0,0,0,0.5); + text-align: center; + padding: 3px 0; + border-radius: 4px; + opacity: 0; + z-index: 9999; + transition: all 1s; + animation: myfirst 3s; + -moz-animation: myfirst 3s; /* Firefox */ + -webkit-animation: myfirst 3s; /* Safari 和 Chrome */ + -o-animation: myfirst 3s; /* Opera */ + +} +/*提示网络状态的样式 end*/ + +/*历史表单下的车牌号 start*/ +#historycarnum label span{ + display: inline-block; + height:100%; + text-align: center; + background: #ce3c39; + font-size: 13px; + line-height: 100%; + padding:0 10px; + width: 10%; +} +/**/ +#historycarnum label span{ + display: inline-block; + height:40px; + text-align: center; + background: #ce3c39; + font-size: 13px; + line-height:40px; + padding:0 10px; + width: 0; + color: #fff; +} +#historycarnum label.weui-cell{ + padding:0; + height:40px; + line-height: 40px; +} +#historycarnum label.weui-cell>div>p{ + padding-left:10px; +} +#endInfo span{ + display: block; + width:100%; + padding:15px 0; + text-align: center; + color: #9b9b9b; + background: #fff; +} +.slidebtn{ + width: 55px; + height: 25px; + display: inline-block; + border-radius: 13px; + border: 1px solid #AAAAAA; + position: relative; + /*margin:50px 50px;*/ + transition: all 0.5s; + background: #fff; +} +.slidebtn>span{ + display: inline-block; + width: 25px; + height: 25px; + border-radius: 13px; + position: absolute; + top: 0; + left: -5px; + border: 1px solid #AAAAAA; + background: #fff; + transition: all 0.3s; +} +.slidebtn.active{ + background: #009688; +} +.slidebtn.active span{ + left: 30px; +} \ No newline at end of file diff --git a/home.html b/home.html index ee19929..55f8e43 100644 --- a/home.html +++ b/home.html @@ -1,335 +1,89 @@ - +
- -元
-待付费用
-