out.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta name="google" value="notranslate">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="stylesheet" href="css/reset.css?v=0.1">
    <link rel="stylesheet" href="css/provinceKey.css?v=0.1">
    <script src="js/config.js?r=123"></script>
    <script src="js/common.js?r=1.01"></script>
    <title>扫码查询出场</title>
    <style>
        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;
        }
        #tipResult {
            display: none;
            font-size: 2rem;
            font-size: 20px;
            color: #ff6f16;
            margin-top: 25%;
            text-align: center;
            padding: 10px;
        }
        .input_province {
            font-size: 1.4rem;
        }
        .input_province:after {
            content: " ";
            position: absolute;
            right: 0px;
            top: 5px;
            width: 1px;
            height: 90%;
            background: #5eb2c0;
        }
        #carNumBox {
            position: relative;
        }
        .splitLine2 {
            color: #5eb2c0;
            position: absolute;
            left: 40px;
            bottom: 11px;
        }
        #exChangeNum {
            margin-top: 1rem;
            cursor: pointer;
        }
    </style>
</head>
<body style="background-color: #f0f4f5;">
<header id="header"
        style="margin-top:20%; display: flex; justify-content: center; align-items: center; flex-direction: column; ">
    <span class="phoneText" id="phoneText">请输入车牌号</span>
    <div class="inputBox">
        <div id="phoneNumBox" style="display:none;">
            <div class="subLabel">+86 <span> |</span></div>
            <input type="tel" id="inputPhoneNum" value="" onkeydown="inputDown();" placeholder="请输入手机号码" maxlength="14"
                   onpaste="return false" style="display:block;"/>
        </div>
        <div id="carNumBox" style="display:block;" class="flexBoxRow">
            <input class="input_province" type="text" readonly="readonly" maxlength="1" id="selProvince"
                   onclick="provinceSelect();" value="蒙">
            <span class="splitLine2"> |</span>
            <input type="text" maxlength="10" name="inputCarNum" id="inputCarNum"/>
        </div>
    </div>
</header>
<footer id="footer" class="flexBoxRow">
    <div class="btnOK" id="btnPayOK" disabled="disabled">获取订单</div>
    <img src="img/loading.gif" id="loading" style="display: none;"/>
</footer>
<section id="tipResult" style="display:none;">
    <img src="img/by.png" style="width:220px;height:110px;"/>
    <div id="outTipContent"></div>
</section>
<div id="id_keyboard_province"></div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/provinceKey.js?r=0.1"></script>
<script src="js/out.js?r=0.1"></script>
</body>
</html>