<!DOCTYPE html>
<html>
<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="imagetoolbar" content="no">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <!--禁止IOS识别号码 -->
    <meta content="email=no" name="format-detection"/>
    <script type="text/javascript">
        if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
            var version = parseFloat(RegExp.$1);
            if (version > 2.3) {
                var phoneScale = parseInt(window.screen.width) / 640;
                document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
            } else {
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }
        //        (function (doc, win) {
        //            var docEl = doc.documentElement,
        //                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        //                recalc = function () {
        //                    var clientWidth = docEl.clientWidth;
        //                    if (!clientWidth) return;
        //                    if(clientWidth>=640){
        //                        docEl.style.fontSize = '100px';
        //                    }else{
        //                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
        //                    }
        //                };
        //
        //            if (!doc.addEventListener) return;
        //            win.addEventListener(resizeEvt, recalc, false);
        //            doc.addEventListener('DOMContentLoaded', recalc, false);
        //        })(document, window);
    </script>
    <title>冷热酸甜八十年</title>
    <link href="__CDN__/css/swiper.min.css" rel="stylesheet">
    <link href="__CDN__/css/main.css" rel="stylesheet">

    <style>
        #container.transform {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            overflow: hidden;
        }
        .wrap-inner.transform {
            position: absolute;
            overflow: hidden;
            left: 0;
            width: 640px;
            height: 1238px;
            top: 50%;
            transform: translate(0, -50%);
            -webkit-transform: translate(0, -50%);
        }
    </style>
</head>
<body>
<audio id="mp3-bj" src="__CDN__/audio/b-j.mp3" preload="auto" loop="loop"></audio>
<div id="container">
    <!-- dos -->
    <div class="wrap-inner">
    <!-- dos -->
        <div class="page-loading" style="display: block">
            <img class="x-h" src="__CDN__/images/x-h.png">
            <img class="ball" src="__CDN__/images/ball.png">
            <img class="loading" src="__CDN__/images/loding.png">
        </div>
        <div class="page_home" style="display: none">
            <div class="zhou"></div>
            <div class="c-d"></div>
            <div class="game-bj"></div>
            <div class="word"></div>
            <div class="hand"></div>
            <div class="btn-next-map"></div>
        </div>

        <div class="page-through" style="display: none">
            <div class="through-map"></div>
            <div class="map-1"></div>
            <div class="map-2"></div>
            <div class="map-3"></div>
            <div class="map-4"></div>
            <div class="map-5"></div>
        </div>
        <div class="page-lang" style="display: none">
            <div class="zhou" style="position: fixed"></div>
            <div class="c-d" style="position: fixed"></div>
            <div class="head"></div>
            <div class="word"></div>
            <div class="arrow"></div>
            <div class="bj"></div>
            <div class="map-1" style="display: none"></div>
            <div class="map-2" style="display: none"></div>
            <div class="map-3" style="display: none"></div>
            <div class="map-4" style="display: none"></div>
            <div class="map-5" style="display: none"></div>
            <div class="map-6" style="display: none"></div>
            <div class="map-7" style="display: none"></div>
            <div class="map-8" style="display: none"></div>
            <div class="map-9" style="display: none"></div>
            <div class="map-10" style="display: none"></div>
            <div class="map-11" style="display: none"></div>
            <div class="map-12" style="display: none"></div>
            <div class="map-13" style="display: none"></div>
            <div class="map-14" style="display: none"></div>
            <div class="map-16" style="display: none"></div>
            <div class="map-17" style="display: none"></div>
            <div class="map-18" style="display: none"></div>
            <div class="map-19" style="display: none"></div>
            <div class="map-20" style="display: none"></div>
            <div class="map-21" style="display: none"></div>
            <div class="map-22" style="display: none"></div>
            <div class="map-23" style="display: none"></div>
            <div class="map-24" style="display: none"></div>
            <div class="map-25" style="display: none"></div>
            <div class="map-26" style="display: none"></div>
            <div class="map-27" style="display: none"></div>
            <div class="map-28"style="display: none"></div>
            <div class="map-29" style="display: none"></div>
            <div class="map-30" style="display: none"></div>
        </div>
        <div class="page-m-b" style="display: none">
            <div class="zhou m-b-zhou-sate"></div>
            <div class="c-d m-b-sate"></div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <img class="side-1 swiper-slide" src="__CDN__/images/side-1-1.png">
                    <img class="side-2 swiper-slide" src="__CDN__/images/side-2-2.png">
                    <img class="side-3 swiper-slide" src="__CDN__/images/side-3-3.png">
                    <img class="side-4 swiper-slide" src="__CDN__/images/side-4-4.png">

                </div>
            </div>
            <div class="btn-right" style="display: none"></div>
            <div class="btn-left"></div>
            <div class="btn-next"></div>
            <div class="word"></div>
        </div>
        <div class="page-x-z" style="display: none">
            <div class="zhou m-b-zhou-sate"></div>
            <div class="c-d m-b-sate"></div>
            <div class="b-j" id="b-j">
            </div>
            <div class="w-p x-z x-z-sate">
                <img class="btn-x-map" data-id="1" src="__CDN__/images/m-1.png">
                <img class="btn-x-map" data-id="2"  src="__CDN__/images/m-2.png">
                <img class="btn-x-map" data-id="3" src="__CDN__/images/m-3.png">
                <img class="btn-x-map" data-id="4"  src="__CDN__/images/m-4.png">
                <img class="btn-x-map" data-id="5" src="__CDN__/images/m-5.png">
                <img class="btn-x-map" data-id="6"  src="__CDN__/images/m-6.png">
                <img class="btn-x-map" data-id="7" src="__CDN__/images/m-7.png">
                <img class="btn-x-map" data-id="8"  src="__CDN__/images/m-8.png">
                <img class="btn-x-map" data-id="9" src="__CDN__/images/m-9.png">
                <img class="btn-x-map" data-id="10"  src="__CDN__/images/m-10.png">
                <img class="btn-x-map" data-id="11" src="__CDN__/images/m-11.png">
                <img class="btn-x-map" data-id="12"  src="__CDN__/images/m-12.png">
                <img class="btn-x-map" data-id="13" src="__CDN__/images/m-13.png">
                <img class="btn-x-map" data-id="14"  src="__CDN__/images/m-14.png">
                <img class="btn-x-map" data-id="15" src="__CDN__/images/m-15.png">
                <img class="btn-x-map" data-id="21" src="__CDN__/images/m-21.png">
            </div>
            <div class="b-t x-z btn-map" style="display: none">
                <img class="btn-x-map" data-id="17" src="__CDN__/images/b-17.png">
                <img class="btn-x-map" data-id="18"  src="__CDN__/images/b-18.png">
                <img class="btn-x-map" data-id="19"  src="__CDN__/images/b-19.png">
                <img class="btn-x-map" data-id="20"  src="__CDN__/images/b-20.png">

            </div>
            <div class="b-y x-z x-z-sate">
                <div class="btn-b-y btn-sate"></div>
                <div class="btn-f-h btn-sate"></div>
            </div>

            <div class="btn-w-p x-z btn-map" style="display: none">
                <div class="btn-j-c btn-sate"></div>
                <div class="btn-f-h btn-sate"></div>
            </div>
        </div>
        <div class="page-s-c" style="display: none">
            <div class="zhou m-b-zhou-sate"></div>
            <div class="c-d m-b-sate"></div>
            <img class="h-b" src="">
            <img class="btn-s" src="__CDN__/images/f-h.png">
            <div class="btn">
                <div class="btn-c-w btn-sate"></div>
                <div class="btn-prize btn-sate"></div>
            </div>
        </div>
        <div class="dialog dialog_rule" style="display: none">
            <div class="bj">

                <img class="map" src="__CDN__/images/dialog.png">
                <div class="btn-close"></div>
            </div>
        </div>
        <div class="dialog dialog_game_rule" style="display: none">
            <div class="bj">

                <img class="map" src="__CDN__/images/game-rule.png">
                <div class="btn-close-two"></div>
            </div>
        </div>
        <div class="dialog dialog-share" style="display: none">
            <img src="__CDN__/images/share.png">
        </div>
        <div class="page-no-prize" style="display: none">
            <div class="zhou m-b-zhou-sate"></div>
            <div class="c-d m-b-sate"></div>
            <div class="btn">
                <div class="btn-share"></div>
                <div class="btn-j-x"></div>
            </div>
        </div>
        <div class="page-prize" style="display: none">
            <div class="zhou m-b-zhou-sate"></div>
            <div class="c-d m-b-sate"></div>
            <img class="prize-map" src="__CDN__/images/prize-1.jpg">
            <div class="btn-info"></div>
        </div>

        <div class="page-info" style="display: none">
            <div class="zhou m-b-zhou-sate"></div>
            <div class="c-d m-b-sate"></div>
            <input class="name" type="text" value="" maxlength="6">
            <input class="address" type="text" value="" maxlength="200">
            <input class="tel" type="text" value="" maxlength="11">
            <div class="btn-submit" style="display: none"></div>
        </div>
    </div>
</div>

<div class="dialog page_checking" style="display: none">
    <div class="checking" style="display: block;z-index: 99">
        <div class="checkShow">
            <div></div>
        </div>
        <div class="text_" style="color: white">
            生成海报中，<br>莫捉急～
        </div>
    </div>
</div>

<script type="text/javascript" src="__CDN__/js/jquery-2.1.3.min.js"></script>
<script>
    if (!/android/i.test(navigator.userAgent)) {
        var t = window.screen.height;
        if (t == '812') {
            $('html').css('height', '1234px');
            $('body').css('height', '1234px');
        }
    }
</script>
<script type="text/javascript" src="__CDN__/js/konva.min.js"></script>
<script type="text/javascript" src="__CDN__/js/swiper.min.js"></script>
<script type="text/javascript"
src="http://api2.izhida.cn/wechat_js_config?app_id=wx4c3c856ab83a946b&v=1.2.1&api_list=all"></script>

<script type="text/javascript" src="__CDN__/js/index.js?t=9"></script>
<link href="__CDN__/css/notify.css" rel="stylesheet">
<script type="text/javascript" src="__CDN__/js/jquery-notify.js"></script>

<script>
    $( function(){

        var image_arr = {:$image};
        var loading = $('.page-loading');
        var loading_resource = function () {
            var resource = image_arr;
            var img_total = resource.length, loaded_count = 0;
            var do_load = function (url) {
                var img = new Image();
                img.onload = function () {
                    ++loaded_count;
//                    $('.loading').text('Loading '+parseInt((loaded_count / img_total) * 100) + "%");
                };
                img.src = url;
            };
            for (var i = 0; i < img_total; ++i) {
                do_load(resource[i]);
            }
            var check_time = 60;
            var plush_page = function () {};
            var check = function () {
                if (0 >= check_time) {
                    if (loaded_count / img_total > .5) {
                        plush_page();
                    } else {
                        alert('加载图片失败，请返回刷新尝试!');
                    }
                } else {
                    check_time -= .5;
                    if (loaded_count == img_total) {
                        plush_page();
                    } else {
                        setTimeout(check, 1000);
                    }
                }
            };
            return function (cb) {
                if (typeof(cb) == 'function')plush_page = cb;
                check();
            }
        }();
        loading_resource(function () {
            loading.remove();

            $('.page_home').show();

        });
    } );
</script>
</body>
</html>