<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en" data-dpr="1" style="font-size: 37.52px;">
<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">
    <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>
    <link rel="stylesheet" href="${resourcePath}/css/h5.css">
    <link rel="stylesheet" href="${resourcePath}/css/h5-common.css">
    <style>
        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        div {
            display: block;
        }

        #app, body, html {
            font-size: .34333333rem;
            color: #333;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            height: auto;
        }

        .img > img {
            width: 100%;
        }

        .time-img, .rule-img {
            text-align: center;
        }

        .time-img > img, .rule-img > img {
            width: 35%;
        }

        .time-text {
            margin-top: 10px;
            text-align: center;
        }

        .rule-img {
            margin-top: 30px;
        }

        .rule-text {
            padding: 10px 30px;
            line-height: 20px;
        }

        .status {
            position: absolute;
            top: 14.34666667rem;
            left: .51333333rem;
            width: 9.04rem;
            height: 2.81333333rem;
            background: url('${resourcePath}/images/act-tip.png') no-repeat;
            background-size: 100%;
        }

        .status-c-1 {
            width: 9.04rem;
            min-height: 2.81333333rem;
            box-shadow: 0 0 30px #F4A460 inset;
            border-radius: 15px;
            margin: auto;
            padding: 20px;
            padding-top: 50px;
            margin-bottom: 30px;
        }

        .status-info {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 1.45333333rem;
            right: 1.4rem;
            text-align: center;
            color: #ffd698;
            font-size: .45333333rem;
        }

        .progress_bar .pro-bar {
            background: hsl(0, 0%, 97%);
            box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset;
            height: 4px;
            margin-bottom: 12px;
            position: relative;
        }

        .progress_bar .progress_bar_title {
            font-size: 15px;
            font-weight: 300;
            position: relative;
            top: -28px;
            z-index: 1;
        }

        .progress_bar .progress-bar-inner {
            background-color: hsl(0, 0%, 88%);
            display: block;
            width: 0;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0px;
            transition: width 1s linear 0s;
            animation: animate-positive 2s;
            box-shadow: 0px 0px 10px 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
        }

        .progress_bar .progress-bar-inner:before {
            content: "";
            background-color: hsl(0, 0%, 100%);
            border-radius: 50%;
            width: 4px;
            height: 4px;
            position: absolute;
            right: -10px;
            top: 0;
            z-index: 1;
        }

        .progress_bar .progress-bar-inner:after {
            content: "";
            width: 14px;
            height: 14px;
            background-color: inherit;
            border-radius: 50%;
            position: absolute;
            right: -15px;
            top: -5px;
            box-shadow: 0px 0px 10px 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
        }

        @-webkit-keyframes animate-positive {
            0% {
                width: 0%;
            }
        }

        @keyframes animate-positive {
            0% {
                width: 0%;
            }
        }

        body {
            background: #494A5F;
            color: #D5D6E2;
            font-weight: 500;
            font-size: 1.05em;
            font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
        }

        a {
            color: #2fa0ec;
            outline: none;
            text-decoration: none;
        }

        a:hover, a:focus {
            color: #74777b;
            text-decoration: none;
        }

        .htmleaf-container {
            margin: 0 auto;
        }

        .popup-body {
            font-weight: 500;
            color: #000000;
            font-size: .45rem;
        }

        .bg-amt{
            position: relative;
            width: 9.04rem;
            height: 2.74666667rem;
            margin: 22.613px auto 12.8px;
            background: url("${resourcePath}/images/bg_amt.png") no-repeat;
            background-size: 100%;
        }
        .info-num{
            position: absolute;
            top: 1.12rem;
            left: 1.12rem;
            width: 3.73333333rem;
            height: 1.4rem;
            line-height: 1.4rem;
            color: red;
            font-family: HYYakuHei-IEW;
            font-size: .8rem;
            font-weight: 600;
            text-align: center;
        }
        .status-c-2 {
            width: 9.04rem;
            box-shadow: 0 0 30px #f4a460 inset;
            border-radius: 15px;
            margin: auto;
            padding: 20px;
            margin-bottom: 30px;
            margin-top: .8rem;
        }
        .device-inp{
            height: 1rem;
        }
        .empty{
            border: 1px solid red;
        }
        .error-msg{
            display: none;
            color: red;
        }
    </style>
</head>
<body style="font-size: 12px;">
<div id="app" style="background-color: ${empty c || c == 0 ? '#FB544E' :  (c == 1 || c == 4) ? '#DD5E01' :  c == 2 ? '#2925D2' : '#060ACE'}; color: #FFF">
    <div id="wrapper" class="wrapper">
        <div class="img">
            <c:choose>
                <c:when test="${c == 3}">
                    <img src="${resourcePath}/images/3-rate-${t eq 'merchant' ? 'm' : 'f'}.jpg">
                </c:when>
                <c:otherwise>
                    <img src="${resourcePath}/images/${empty c ? 0 : c}-rate.jpg">
                </c:otherwise>
            </c:choose>
        </div>
        <div class="body-content" style="margin-top:${empty c || c == 0 ? '2rem' : '0rem'}">
            <div class="time">
                <c:if test="${empty c || c == 0}">
                    <div class="status">
                        <p class="status-info">
                            <c:if test="${isMarket == 1}">
                                您已成功参与此活动
                            </c:if>
                            <c:if test="${isMarket == 0 or empty isMarket}">
                                您尚未参与此活动
                            </c:if>
                            <br>武汉商户可以联系我司开通
                            <br>开通成功后即可享受该活动
                        </p>
                    </div>
                </c:if>
                <c:if test="${c == 1 || c == 2 || c == 4}">
                    <div style="">
                        <div class="status-c-1">
                            <div class="progress_bar" style="width: 95%;margin-left: 8px;">
                                <div class="pro-bar">
                                    <small class="progress_bar_title"
                                           style="display: flex;justify-content: space-between">
                                        <div style="display: flex;justify-content: flex-start">
                                            <div>达标进度:&nbsp;</div>
                                            <div style="line-height: 21px;">${tradeAmt}/${marketQuota}</div>
                                        </div>
                                        <div>
                                            <div class="progress_number">%</div>
                                        </div>
                                    </small>
                                    <span class="progress-bar-inner"
                                          style="background-color: #1abc9c; width: ${progressNum}%"
                                          data-value="${progressNum}" data-percentage-value="${progressNum}"></span>
                                </div>
                            </div>
                            <div style="display: flex;justify-content: space-between;padding: 0 10px 0 10px;">
                                <c:if test="${userType ne 'agent'}">
                                    <div style="font-weight:300;font-size: 15px" id="actText">${actTitle}</div>
                                </c:if>
                                <c:if test="${userType eq 'agent'}">
                                    <div style="font-weight:300;font-size: 15px" id="actText">暂无活动资格</div>
                                </c:if>
                                <c:if test="${f == 0}">
                                    <div style="font-weight:300;font-size: 15px" id="toEnroll">点此报名</div>
                                </c:if>
                                <c:if test="${f == 2}">
                                    <div style="font-weight:300;font-size: 15px" id="toEnroll">重新报名</div>
                                </c:if>
                            </div>
                            <c:if test="${f == 2}">
                                <div style="font-weight:300;font-size: 15px;" id="checkTitle" >${checkTitle}</div>
                            </c:if>
                        </div>

                    </div>
                </c:if>

                <c:if test="${c == 3}">
                    <div style="">
                        <div class="bg-amt">
                            <p class="info-num">${marketAmtCount}</p>
                        </div>
                        <div class="status-c-2">
                            <div style="display: flex;justify-content: space-between;padding: 0 10px 0 10px;">
                                <c:if test="${userType ne 'agent'}">
                                    <div style="font-weight:300;font-size: 15px" id="actText">${actTitle}</div>
                                </c:if>
                                <c:if test="${userType eq 'agent'}">
                                    <div style="font-weight:300;font-size: 15px" id="actText">暂无活动资格</div>
                                </c:if>
                                <c:if test="${f == 0}">
                                    <div style="font-weight:300;font-size: 15px" id="toEnroll">点此报名</div>
                                </c:if>
                                <c:if test="${f == 2}">
                                    <div style="font-weight:300;font-size: 15px" id="toEnroll">重新报名</div>
                                </c:if>
                            </div>
                            <c:if test="${f == 2}">
                                <div style="font-weight:300;font-size: 15px;" id="checkTitle" >${checkTitle}</div>
                            </c:if>
                        </div>

                    </div>
                </c:if>

                <div class="time-img">
                    <img src="data:image/png;base64,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">
                </div>
                <div class="time-text">
                    <fmt:formatDate value='${act.startTime}' pattern='yyyy年MM月dd日'/> - <fmt:formatDate
                        value='${act.endTime}' pattern='yyyy年MM月dd日'/>
                </div>
            </div>
        </div>
        <div>
            <div class="rule">
                <div class="rule-img">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAAuCAMAAABuxzAGAAAAkFBMVEUAAADt0qXt0KP/3q7u1Kbs0aTt0aTt0aXs0aXt06bt0KXt0aXs0aTt0aXt0aXv0qbv06zv0qbt0aXt0aTu0aXx1aft0aXu0aXy0qju0aXt0aTt0aTu0aXt0aXu06bt0aXu06Xt0aT11aru0qXt0aXt0qbu1Kbt0aT32a7/4bft0aXt0aXu1Kft0aXt0qXs0KTFA6FhAAAAL3RSTlMAM5kFLufy7rEh69330uFAG036Y4QRkWgmiqa8oKpKbzvJF1rXUyu2DQi/dzbOf2mEc5cAAAbESURBVGje5NfbdqIwFIDhDQEx4qAVUbGAgEi1Hvb7v90kux3IFIQ6akud78ZcSNbKj5AIX2U8gnbsSYiglpcLY7iRdCQY0BXjZA4NvI2e4SSHVlsUelBrjoION/KEQh86gtuI/RRqsHxzCjMkrzcMGP6qweHdcVDD6W7AhYOCGYG026Z8YWiRu58tX7MJKjbwblbBLgz4C2ss4J2NNYbdDbjuIZmK8R7PyxgQhhW7Lwp4iOP40LmAsDgiCXfA8Qx7Fu3g2wOacv7uBQTmI0lSSLBimOjzHMg/BeS5dEIhpOH2LWBSsqoBHUXnAwKMBijtYYV/s9c5A+GKgBl+sH4LqMzbrwScgMLqfkBY2G9vwfFpNV9votEh53MUnqHKqIAfHJBxw+AMFJ7r+64HivHSNJdjaJQmsp9qXQZsl0qcAqYF1haQa5pmnA3IXUG7MKC63mqTajdmaILBlO/OdGHmKfNZKFgtBbdruCJgD2uM2gIGFORcwA0K08sDquutb6J04xrhUHB14kJhiWQJLe4UcBpICQoZDeM7BlTX29Ck7GZoxICCrxMfCiYSE85xd/cMWD3G3DGgut6GJkW3mwTU8cj/24DXP8K0CisCaT9QUJPJQGHCWeGLRFfQyGkK2KVH+PpNJEByAuGEjSbQzCtvvN4UsEubyPXHmIODJGCfCzgNa5xA4ihk3x7wkmPMLXgvSPrsUwETrPEKkkHDMmB8i4A/4Z/IFMnLbuUoBigMHYXdEjAulxUUAVcWGdIdsAh7tIAQDVGatu3CLQEjFIIPAfdYUQSU4ZxHCAhxT/4C2ZUB6Qq/DHhoCyg/jw8REA5W0a8loBELFNyKC0b5ntuDtPxMQCrz/BgBwQjYBQdpDYUQPvBRmIMUoqCB4Nqkh4Jpkz8BtzTLgwT83a3ZbakJAwF4KAgFVFhExFUBARVWMO//diUT8tdTtlz1YL8bdg8YzMdkJs4BmS3wyVVpYDm/SYEWSE5kINOrsIWV+T8TaB04mMbqg6AEyZeY8e3UAMeXmz9UcgfQz1m6QNTwmhRYvZVAo2rxmJMpDBA0ESufZlWjAUZLKHu1RSowIzSqC8Sc+TEpEMM8fxeBn8RJ0rkCb7j2xlTo7NXEWCur2QVBSijbVBOY0EM4KRA349WbdKSbNTqaKfDMk91D3T7umFbk9JvAjCCruyIQDx5MCsTBszfpSB8wQGZGoEkHjGju67CJv1e6IDslSYo7ymGdTgoMsUpNC/Txrm/Skb7iHpjP9JLpbHSBAZ85D0GplaTKeCUILmTEpgaNYIBFrNf3vXEPBlpdIEubUfsOHWmeogwuMAadL13gD7mJKWQIBvwmQmADHNNG5xgZlnxoeuNVEyhS6ht0pPkWuIZ5AltHWZ8o5SnG+KnVWT1mnfaB3yPlNed7gQkLo+V3pAdMvOdrpkDcn10BcTEat1RVLVTyf357QBdoarzalZWo/4PAjW3bHpieiPNnHMevxXakZY1MZwr84vuzIt4QRjWOEbnA2PKpKj53AKktpobX2ztFoM6NjHFuNUBZbEdalIIe5gks0FRanT0i6MdrLjDiaGso4DJQy5o+qRKDPvkQAo8BaDzGOC/sPhTjZFkWLK4jDXAnlHyewPCKAiOiEXR46GCEnvb1H8IPoCRsmZc9C1gh0ByE/1AzEWErOLCHgdJlv6HKslFUzhN4IjrOBu1ctLdYGx7SMmbJB1DM69UEcGvCMqYQWIpmAxKssQ60GR69btECw4itvnkCX0ShPhamS+3XwhFScZ3SuS/edgPIWKE8gRRoae2bQzQuisIhFDtYssAjW4SKwGitQxSBARlZP3J39PMZoJFaFlI1IWZjtHH2Z4KsSkXgTjYiILwQhMaq4TGDBqg8lySwcfjkZ3VjWqrT/8w7kYG7e3slaoPQSAjlBYiL4/stMNp8RRDf5aF0vqeBL6pO87RHwSEmaHa5d4eB8iMw0nB/81kxXwZMWT5XIBzjrASdM1+RsHW29ZYwLCasF6sb7fDavQlRPlF4UN0J6lMSn+sznS79myjEsAhMnO+6mSdwuhNBtiWqFFxVuQ9ghFzPZc9fZpDkMkOopdf10KfF9peSGyyCJvawC6UK9E86zvcCb2v6CAy5+0CfISAZVea5eryv2OR142v8xI9RcAmCIuL+4FN9QEuh3dVoZ0YVnqDzeB8rJIzoLJQZKxIVMuD7wZTym6ARBjcBi8kVtZ+Byo77g4Nc7y4siAK+FXj6i0Bwax7C1fOYJPkt1E7uQGI4cQkqTRcMFKXcAtW7FnSeFh8rRl6VAf8X+xam0c+Z8BcC+Hf8ArKOt1H5vn4GAAAAAElFTkSuQmCC">
                </div>
                <div class="rule-text">
                    ${act.officRule}
                </div>
            </div>
        </div>
    </div>
</div>

<c:if test="${c == 1 or c == 2 or c == 4}">
    <div class="popup-container dialog-body active"
         style="display: none;box-shadow: 5px 5px 20px #888888;border-radius: 5px;">
        <div class="popup"><!---->
            <div class="popup-body">
                <div style="display: flex;justify-content: space-around;line-height: 1rem;">
                    <div>
                        <label>设备SN号：</label>
                    </div>
                    <div>
                        <input name="deviceNo" class="device-inp" id="deviceNo" placeholder="请输入设备SN号" />

                    </div>
                </div>
                <p class="error-msg"></p>
            </div>
            <div class="popup-btns" style="display: flex;justify-content:space-around;">
                <div style="width: 50%" onclick="hide(this)">
                    <span style="color: rgba(0,0,0,.5)" class="btn btn-positive">取消</span>
                </div>
                <div style="width: 50%" onclick="toConfrim('${act.id}')">
                    <span class="btn btn-positive">确认</span>
                </div>
            </div>
        </div>
    </div>
</c:if>

<c:if test="${c == 3}">
    <div class="popup-container dialog-body active"
         style="display: none;box-shadow: 5px 5px 20px #888888;border-radius: 5px;">
        <div class="popup"><!---->
            <div class="popup-body">
                <div style="display: flex;justify-content: space-around;line-height: 1rem;">
                    <div>
                        <label>激活码：</label>
                    </div>
                    <div>
                        <input name="deviceNo" class="device-inp" id="deviceNo" placeholder="请输入激活码" />

                    </div>
                </div>
                <p class="error-msg"></p>
            </div>
            <div class="popup-btns" style="display: flex;justify-content:space-around;">
                <div style="width: 50%" onclick="hide(this)">
                    <span style="color: rgba(0,0,0,.5)" class="btn btn-positive">取消</span>
                </div>
                <div style="width: 50%" onclick="toConfrim('${act.id}')">
                    <span class="btn btn-positive">确认</span>
                </div>
            </div>
        </div>
    </div>
</c:if>

<div class="mint-indicator" style="display: none; z-index: 9994">
    <div class="mint-indicator-wrapper" style="padding: 20px;">
        <span class="mint-indicator-spin">
            <div class="mint-spinner-fading-circle circle-color-12" style="width: 32px; height: 32px;">
                <div class="mint-spinner-fading-circle-circle is-circle2">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle3">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle4">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle5">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle6">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle7">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle8">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle9">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle10">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle11">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle12">

                </div>
                <div class="mint-spinner-fading-circle-circle is-circle13">

                </div>
            </div>
        </span>
        <span class="mint-indicator-text" style="">加载中...</span>
    </div>
</div>
<div class="backdrop-container a-title active" style="display: none;"></div>
<div class="popup-container active a-title" style="display: none;">
    <div class="popup"><!---->
        <div class="popup-body a-title-body"></div>
        <div class="popup-btns" id="popup-btns" onclick="hide(this)"><span class="btn btn-positive">确定</span></div>
    </div>
</div>
<script src="${resourcePath}/js/jquery.nicescroll.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#wrapper").niceScroll({cursorborder: "", cursorcolor: "#00F", boxzoom: false});
    })
</script>
<script type="text/javascript">
    /* === 判断支持版本 start === */
    (function () {
        var viewportTag = null;
        var metaTags = document.getElementsByTagName('meta');
        for (var i = 0; i < metaTags.length; i++) {
            if (metaTags[i].getAttribute('name') === "viewport") {
                viewportTag = metaTags[i];
                break;
            }
        }
        if (!viewportTag) {
            viewportTag = document.createElement("meta");
            viewportTag.setAttribute('name', 'viewport');
        }

        var viewportTagContent =
            'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no';

        // Detect if iOS device
        if (/(iPhone|iPod|iPad)/i.test(window.navigator.userAgent)) {
            // Get iOS major version
            var iosVersion = parseInt((window.navigator.userAgent).match(/OS (\d+)_(\d+)_?(\d+)? like Mac OS X/i)[1]);
            // Detect if device is running >iOS 11
            // iOS 11's UIWebView and WKWebView changes the viewport behaviour to render viewport without the status bar. Need to override with "viewport-fit: cover" to include the status bar.
            if (iosVersion >= 11) {
                viewportTagContent += ', viewport-fit=cover';
            }
        }

        // Update viewport tag attribute
        viewportTag.setAttribute('content', viewportTagContent);
    })();
    /* === 判断支持版本 end === */

    // refs http://www.html-js.com/article/3041 移动端高清、多屏适配方案
    !function (a, b) {
        function c() {
            var b = f.getBoundingClientRect().width;
            b / i > 540 && (b = 540 * i);
            var c = b / 10;
            f.style.fontSize = c + "px", k.rem = a.rem = c
        }

        var d, e = a.document,
            f = e.documentElement,
            g = e.querySelector('meta[name="viewport"]'),
            h = e.querySelector('meta[name="flexible"]'),
            i = 0,
            j = 0,
            k = b.flexible || (b.flexible = {});
        if (g) {
            var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
            l && (j = parseFloat(l[1]), i = parseInt(1 / j))
        } else if (h) {
            var m = h.getAttribute("content");
            if (m) {
                var n = m.match(/initial\-dpr=([\d\.]+)/),
                    o = m.match(/maximum\-dpr=([\d\.]+)/);
                n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((
                    1 / i).toFixed(2)))
            }
        }
        if (!i && !j) {
            var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)),
                q = a.devicePixelRatio;
            i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
        }
        if (f.setAttribute("data-dpr", i), !g)
            if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content",
                "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f
                .firstElementChild) f.firstElementChild.appendChild(g);
            else {
                var r = e.createElement("div");
                r.appendChild(g), e.write(r.innerHTML)
            }
        a.addEventListener("resize", function () {
            clearTimeout(d), d = setTimeout(c, 300)
        }, !1), a.addEventListener("pageshow", function (a) {
            a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
        }, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener(
            "DOMContentLoaded",
            function () {
                e.body.style.fontSize = 12 * i + "px"
            }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) {
            var b = parseFloat(a) * this.rem;
            return "string" == typeof a && a.match(/rem$/) && (b += "px"), b
        }, k.px2rem = function (a) {
            var b = parseFloat(a) / this.rem;
            return "string" == typeof a && a.match(/px$/) && (b += "rem"), b
        }
    }(window, window.lib || (window.lib = {}));
</script>
<script type="text/javascript">
    $(function () {
        var progress = $(".progress-bar-inner");
        progress.each(function (i) {
            var data = $(this).attr('data-value');
            $(this).prev().find(".progress_number").html(data + "%");
        });

        $("#toEnroll").on('click', function () {
            $('.dialog-body').show();
            return;
        })

        $("#deviceNo").keydown((event) => {
            $(".device-inp").removeClass("empty");
            $(".error-msg").hide();
        })
    });

    function hide(obj) {
        if (obj != undefined) {
            $(".a-title").hide();
        }
        $('.active').hide();
    }

    function toConfrim(obj) {
        if (obj == undefined) {
            $('.a-title-body').html("活动有误！");
            $(".a-title").show();
            return;
        }
        let deviceNo = $("#deviceNo").val();
        let type = '${c}';
        if(!deviceNo){
            let msg = type == 1 || type == 2  ? "请输入设备SN号" : "请输入激活码"
            $(".device-inp").addClass("empty");
            $(".error-msg").html(msg).show();
            return;
        }
        $('.dialog-body').hide();
        //loading
        $(".mint-indicator").show();
        $.ajax({
            url: ctx + '/activity/toEnroll',
            dataType: 'json',
            type: "post",
            data: {
                'actId': obj,
                'token': '${token}',
                'deviceNo':deviceNo,
                'c':type || "0"
            },
            success: function (res) {
                $(".mint-indicator").hide();
                if (res.code == 200) {
                    $('.a-title-body').html(res.message);
                    $(".a-title").show();
                    $("#toEnroll").hide();
                    $("#actText").html("申请成功,等待审核...");
                    $("#checkTitle").html(" ");
                } else {
                    $('.a-title-body').html(res.message);
                    $(".a-title").show();
                }
            },
        });
    }
</script>
</body>
</html>