diff --git b/config.js a/config.js
new file mode 100644
index 0000000..4c90769
--- /dev/null
+++ a/config.js
@@ -0,0 +1,74 @@
+/*
+@songcxa
+@2018-12-14
+@移动支付配置[配置项除ip地址外勿动]
+*/
+window.webAppH5 = {};
+
+/*服务器地址*/
+var webAppRoot = "http://39.98.54.240:8090";
+
+/*公共参数*/
+webAppH5.comParams = {
+ app_id: 1,
+ salt: 2,
+ deviceInfo: 3,
+ sign_type: 'md5',
+ sign: 4,
+ token: '666'
+}
+
+/*出、入场接口*/
+webAppH5.comServer = "/keyTopQrCodeInOutPark/noCarQRcodeInOutPark";
+
+//缴费-微信
+webAppH5.wxPayServer = "/weixinpay/publicUnifiedOrder";
+
+//缴费-支付宝
+webAppH5.aliPayServer = "/alipay/aliH5Pay";
+
+
+
+
+
+
+
+
+
+
+
+/*入场参数*/
+//测试地址
+//http://localhost:18879/page/in.html?plNo=P11011700C&parkingId=1&channelId=172198242&direction=0&codeType=0&expireDate=expireDate&extendData=extendData
+//channelId=172198242 [入场设备号]
+//webAppH5.appIn = {
+// /*入场设备号*/
+// channelId: '172198242',
+// /*入：0，1:出*/
+// direction: 0
+//}
+
+/*出场参数*/
+//测试地址
+//http://localhost:18879/page/out.html?plNo=P11011700C&parkingId=1&channelId=172198243&direction=1&codeType=0&expireDate=expireDate&extendData=extendData
+//channelId=172198243 [出场设备号]
+//direction=0 [通行方向 入：0，1:出 必填]
+//webAppH5.appOut = {
+// /*出场设备号*/
+// channelId: '172198243',
+// /*入：0，1:出*/
+// direction:1
+//}
+
+//首页
+//进出场标识>>>>>>>>>>direction=0 [通行方向 入：0，1:出 必填]
+//测试服务器进场首页
+//http://39.98.54.240/codepay/index.html?plNo=P11011700C&parkingId=1&channelId=172198242&direction=0&codeType=0&expireDate=expireDate&extendData=extendData
+
+//测试服务器出场首页
+//http://39.98.54.240/codepay/index.html?plNo=P11011700C&parkingId=1&channelId=172198243&direction=1&codeType=0&expireDate=expireDate&extendData=extendData
+
+
+
+
+
diff --git b/css/carstyle.css a/css/carstyle.css
new file mode 100644
index 0000000..383dc96
--- /dev/null
+++ a/css/carstyle.css
@@ -0,0 +1,62 @@
+/*车牌号键盘 start*/
+.province{
+ position: fixed;
+ width: 100%;
+ padding: 5px 0;
+ left: 0;
+ bottom: 0;
+ background: #c0c7cd;
+}
+.province ul{
+ /*width: 100%;*/
+ margin: 0 auto;
+ padding: 0 !important;
+ text-align: center;
+}
+.province ul li{
+ list-style: none;
+ display: inline-block;
+ width:9%;
+ padding: 8px 0;
+ margin-left: 0.5%;
+ margin-right: 0.5%;
+ margin-top: 5px;
+ text-align: center;
+ border-radius: 4px;
+ background: #fff;
+ box-shadow: 0 2px 0px 0px rgba(0,0,0,0.5);
+}
+.province .ts{
+ width: 13.5%;
+ background: #8e9aa6;
+ color: #fff;
+}
+
+
+.keynumh ul li{
+ list-style: none;
+ display: inline-block;
+ width:8%;
+ padding: 8px 0;
+ margin-left: 0.5%;
+ margin-right: 0.5%;
+ margin-top: 5px;
+ text-align: center;
+ border-radius: 4px;
+ background: #fff;
+ box-shadow: 0 2px 0px 0px rgba(0,0,0,0.5);
+}
+.zimjianp ul li{
+ list-style: none;
+ display: inline-block;
+ width:8%;
+ padding: 8px 0;
+ margin-left: 0.5%;
+ margin-right: 0.5%;
+ margin-top: 5px;
+ text-align: center;
+ border-radius: 4px;
+ background: #fff;
+ box-shadow: 0 2px 0px 0px rgba(0,0,0,0.5);
+}
+/*end*/
\ No newline at end of file
diff --git b/css/com.css a/css/com.css
new file mode 100644
index 0000000..6c12252
--- /dev/null
+++ a/css/com.css
@@ -0,0 +1,76 @@
+ body {
+ background: #f0f4f5;
+ margin: 0;
+ padding: 0;
+ font-family: 'Microsoft YaHei';
+ font-size:62.5%; /*1rem=10px*/
+}
+#header {
+ margin-top: 25%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.phoneText {
+ font-size: 18px;
+}
+.inputBox {
+ position: relative;
+ font-size: 16px;
+ margin-top: 20px;
+}
+.subLabel {
+ position: absolute;
+ left: 0px;
+ top: 5px;
+ padding:5px;
+}
+.subLabel > span {
+ color: #5eb2c0;
+}
+#inputPhoneNum ,#inputCarNum{
+ transition: all 0.30s ease-in-out;
+ -webkit-transition: all 0.30s ease-in-out;
+ -moz-transition: all 0.30s ease-in-out;
+ border: #c1bfc5 1px solid;
+ border-radius: 3px;
+ outline: none;
+ height: 30px;
+ width: 160px;
+ line-height: 30px;
+ padding: 5px;
+ padding-left: 60px;
+ font-size: 18px;
+ color:#ff6f16;
+}
+
+#inputPhoneNum:focus {
+ box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+ -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+ -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+}
+.btnOK {
+ background:#75cbbe;
+ width: 230px;
+ height: 3rem;
+ line-height: 3rem;
+ text-align: center;
+ border-radius: 5px;
+ color: #ffffff;
+ font-size: 1.2rem;
+ cursor: pointer;
+}
+.flexBoxRow {
+ display: flex;
+ justify-content: left;
+ flex-direction:row;
+ align-items:center;
+ width:100%;
+}
+#footer {
+ justify-content:center !important;
+ padding-top:2rem;
+}
+
diff --git b/css/index.css a/css/index.css
new file mode 100644
index 0000000..267edb3
--- /dev/null
+++ a/css/index.css
@@ -0,0 +1,172 @@
+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;
+ justify-content: left;
+ flex-direction:row;
+ 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;
+}
\ No newline at end of file
diff --git b/css/out.css a/css/out.css
new file mode 100644
index 0000000..46800d1
--- /dev/null
+++ a/css/out.css
@@ -0,0 +1,2 @@
+body {
+}
diff --git b/css/provinceKey.css a/css/provinceKey.css
new file mode 100644
index 0000000..15a77d2
--- /dev/null
+++ a/css/provinceKey.css
@@ -0,0 +1,87 @@
+/*
+ songcx
+ 2018-12-18
+*/
+
+.label_province{
+ position:absolute;
+ top:6px;
+ left:10px;
+ }
+ .input_province{
+ position:absolute;
+ text-align:center;
+ width:26px;
+ left:8px;
+ top:8px;
+ border:none;
+ outline:0;
+ font-family:"黑体";
+ }
+ .input_font{
+ font-size:18px;
+ color:#333333;
+ }
+ .input_font_plate{
+ font-size:14px;
+ color:#333333;
+ }
+ .input_platenumber_base{
+ position:absolute;
+ text-align:center;
+ width:34px;
+ top:13px;
+ border:none;
+ outline:0;
+ }
+ .input_city{
+ left:44px;
+ }
+
+ .label_platenumber{
+ font-size:14px;
+ color:#999;
+ width:265px;
+ text-align:center;
+ margin-top:29px;
+ border:0;
+ outline:0;
+ }
+
+ .input_park{
+ font-size:14px;
+ color:#666;
+ width:265px;
+ text-align:center;
+ border:0;
+ outline:0;
+ }
+
+ .label_btntext_confirm{
+ position:absolute;
+ top:12px;
+ font-size:16px;
+ width:214px;
+ left:0;
+ }
+ .label_btn_text{
+ text-align:center;
+ color:#FFF;
+ /* font-weight:bold; */
+ }
+
+ .key_province{
+ font-size:17px;
+ position:absolute;
+ left:2.5px;
+ top:8px;
+ border:0;
+ width:28px;
+ text-align:center;
+ font-family:"黑体";
+ }
+
+#id_keyboard_province {
+ position:absolute;
+ bottom:0px;
+}
\ No newline at end of file
diff --git b/demo.html a/demo.html
new file mode 100644
index 0000000..924d573
--- /dev/null
+++ a/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
QQ浏览器不支持打开支付宝
请使用其他浏览器
+
+
+