<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en" data-dpr="1">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <jsp:include page="../../common.jsp"/>
    <c:set var="ctx" value="${pageContext.request.contextPath}" scope="request"/>
    <c:set var="resourcePath" value="${ctx}/resources" scope="request"/>
    <script type="text/javascript">
        var ctx = "${ctx}"; //上下文路径
        var resourcePath = "${resourcePath}";
        document.writeln('<script type="text/javascript" src="' + resourcePath + '/js/global.js?d=' + new Date().getTime() + '" ><\/script>');
    </script>
    <title>流量卡充值</title>

    <script type="text/javascript" src="${resourcePath}/js/zepto.min.js"></script>
    <script type="text/javascript" src="${resourcePath}/js/zepto.weui.js"></script>
    <link rel="stylesheet" href="${resourcePath}/css/h5.css">
    <link rel="stylesheet" href="${resourcePath}/css/h5-common.css">
<%--    <link rel="stylesheet" href="${resourcePath}/css/weui.css">--%>
<%--    <link rel="stylesheet" href="${resourcePath}/css/weuix.css">--%>
    <style>
        @media screen and (max-device-width: 395px) {
            div.title {
                font-size: 6em;
                margin-top: 100px;
                font-weight: bold;
            }

            .input {
                display: inline-block;
                font-size: 4em;
            }
        }

        @media screen and (min-device-width: 396px) and (max-device-width: 800px) {
            div.title {
                font-size: 2.4em;
                margin-top: 100px;
                font-weight: bold;
            }

            .input {
                display: inline-block;
                font-size: 1.6em;
            }
        }

        @media screen and (min-device-width: 800px) {
            div.title {
                font-size: 3.6em;
                margin-top: 100px;
                font-weight: bold;
            }

            .input {
                display: inline-block;
                font-size: 2.4em;
            }
        }
    </style>
</head>

<body style="font-size: 62.5%">
<div style="text-align: center">
    <div class="title">流量卡充值</div>

    <div>
        <div style="display: inline-block; margin-left: 10px; margin-top: 50px;">
            <div class="input">设备编号</div>
        </div>
        <div style="display: inline-block; margin-left: 10px; margin-top: 50px;">
            <input class="input" type="text" name="snNo" placeholder="请输入设备编号或SN号" />
        </div>
        <div style="margin-left: 15px; margin-top: 50px" class="button-sp-area">
            <a style="width: 184px; font-size: 18px;" href="javascript:" role="button" class="weui-btn weui-btn_primary" onclick="next()">下一步</a>
        </div>
    </div>
</div>
</body>
<script>
    function next() {
        var snNo = $('input[name="snNo"]').val();
        if (snNo == null || snNo == '') {
            debugger;
            $.toast("设备编号不能为空", "text");
            return;
        }
        window.location = ctx + "/merchantDevice/simOrder?token=${token}&snNo=" + snNo;
    }
</script>
</html>