<!--打赏-->
<% if(config.reward) { %>
<style>
    #reward .reward-btn-wrapper {
        width: 100px;
        padding-top: 35px;
        cursor: pointer;
        margin: 0 auto;
    }

    #reward .reward-btn {
        padding: 2px 15px;
        color: #fff;
        background-color: #ea6f5a;
        border-radius: 20px;
    }

    #reward .reward-code {
        position: absolute;
        top: -220px;
        left: 50%;
        display: none;
        width: 360px;
        height: 240px;
        margin-left: -180px;
        padding: 15px 20px;
        border: 1px solid #e6e6e6;
        background: #fff;
        box-shadow: 0 1px 1px 1px #efefef;
    }

    #reward .reward-code:after,
    #reward .reward-code:before {
        position: absolute;
        content: '';
        border: 10px solid transparent
    }

    #reward .reward-code:after {
        bottom: -19px;
        left: 50%;
        margin-left: -10px;
        border-top-color: #fff
    }

    #reward .reward-code:before {
        bottom: -20px;
        left: 50%;
        margin-left: -10px;
        border-top-color: #e6e6e6
    }

    #reward .qr-code {
        width: 50%;
        float: left;
        padding: 5px;
    }

    #reward .qr-code p {
        margin-top: -6px;
    }

    #reward img {
        transform: none;
        -webkit-transform: none;
        margin-left: 0;
    }

    #reward img[alt='i'] {
        width: 20px;
        height: 20px;
        z-index: 2;
        position: absolute;
        margin: 65px 0 0 65px;
    }

    #reward img[alt="ali"] {
        width: 100%;
        box-sizing: border-box;
        border: 5px solid #0f9be0;
    }

    #reward img[alt="wechat"] {
        width: 100%;
        box-sizing: border-box;
        border: 5px solid #3db034;
    }

    #reward .reward-tip {
        font-size: 1.2em;
        margin-bottom: 0;
        color: #ea6f5a;
    }
</style>
<div id="reward" class="col-xs-12">
    <div class="reward-btn-wrapper">
        <div class="reward-btn text-center">赞赏支持</div>
    </div>
    <div class="reward-code text-center">
        <p class="text-center reward-tip"><strong>请我吃胡萝卜 =^_^= </strong></p>
        <div class="qr-code">
            <img src="<%= config.root %><%= config.header_icon %>" alt="i">
            <img id="reward-ali" src="" alt="ali">
            <p><small>支付宝</small></p>
        </div>
        <div class="qr-code">
            <img src="<%= config.root %><%= config.header_icon %>" alt="i">
            <img id="reward-wechat" src="" alt="wechat">
            <p><small>微信</small></p>
        </div>
    </div>
</div>
<script>
    (function (window, document) {
        var aliQr = new QRious({ value: '<%= config.reward.alipay %>' });
        var wechatQr = new QRious({ value: '<%= config.reward.wechat %>' });
        document.querySelector('#reward-ali').src = aliQr.toDataURL();
        document.querySelector('#reward-wechat').src = wechatQr.toDataURL();

        var rewardBtn = document.querySelector('#reward .reward-btn-wrapper');
        var qrCode = document.querySelector('#reward .reward-code')
        var activeFunc = function (e) {
            qrCode.style.display = 'block';
        }
        var hideFunc = function (e) {
            qrCode.style.display = 'none';
        }

        rewardBtn.addEventListener('mouseenter', activeFunc, false)
        rewardBtn.addEventListener('mouseover', activeFunc, false)
        rewardBtn.addEventListener('mouseleave', hideFunc, false)
        qrCode.addEventListener('mouseenter', activeFunc, false)
        qrCode.addEventListener('mouseover', activeFunc, false)
        qrCode.addEventListener('mouseleave', hideFunc, false)
    })(window, document);
</script>
<% } %>