<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>帮助</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
    <script src=https://cdn.bootcss.com/vue/2.5.16/vue.min.js></script>
    <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
    <script>window.Vue || document.write('<script src="https://cdn-novel.iycdm.com/static/vue.min.js"><\/script>')</script>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html {
            background: #fff;
        }

        body {
            max-width: 750px;
            margin: 0 auto;
            font-size: .32rem;
            color: #333;
        }

        .search {
            background: #f7f7f7;
            width: 7rem;
            height: .9rem;
            border: none;
            margin: .25rem;
        }

        .search::-webkit-input-placeholder {
            /* placeholder位置  */
            text-align: center;
        }

        .q {
            list-style: none;
            height: 1.1rem;
            border-bottom: 1px solid #efefef;
            line-height: 1.1rem;
            padding: 0 .25rem;
            position: relative;
        }

        .q::after {
            content: '';
            height: .3rem;
            width: .25rem;
            background: url("data:image/png;base64,[encoded data, 5000 characters]") no-repeat 100%;
            position: absolute;
            background-size:cover;
            right: .25rem;
            top: .4rem;

        }

        .qr {
            display: block;
            margin: 1.1rem auto .6rem;
            /*height: 2.8rem;*/
            width: 3.5rem;
            /*background: url();*/
            border: none;
        }

        .tip {
            text-align: center;
            font-size: .28rem;
            color: #999;
            margin-bottom: 2rem
        }
    </style>
</head>

<body>
<div id="app"></div>
<script>var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?a027c0fdf2b6e70f1892dbd8227cbb2b";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
        _hmt.push(['_setAutoPageview', false])
    })();</script>
<script type="text/javascript">
    function refreshRem() {
        document.documentElement.style.fontSize = (Math.min(window.innerWidth, screen.width, document.body.offsetWidth) / 750) * 100 + 'px';
    }
    window.addEventListener('resize', function () {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    var tid;
    refreshRem()

    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        if (document.addEventListener) {
            document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
        } else if (document.attachEvent) {
            document.attachEvent("WeixinJSBridgeReady", handleFontSize);
            document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
        }
    }
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on('menu:setfont', function () {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
        });
    }

    var q = @json($lists);
    var vm = new Vue({
        el: '#app',
        data: {
            q,
            search: '',
        },
        mounted() {
            setTimeout(function () {
                if(document.location.search.indexOf('down=1')){
                    //document.body.scrollTop = document.body.scrollHeight;
                    window.scroll(0, document.body.scrollHeight)
                }
            },250)

        },
        methods: {
            input:function(e) {
                if (!this.search) this.q = q
                else {
                    this.q = q.filter(function(v){
                                return v.title.indexOf(vm.search) !== -1
                            })
                }
            },
            click:function (id) {
                window.location.href = '/'+id;
            }
        },
        template: '\
        <div>\
          <input class="search" v-model="search" @search="input" type="search" placeholder="搜索栏"/>\
          <ul v-if="q.length">\
            <li class="q" v-for="v in q" @click="click(v.id)" >@{{v.title}}</li>\
          </ul>\
          <div v-else class="q">暂无帮助</div>\
          <img class="qr" src="{{$qrcode}}">\
          <div class="tip">没有找到想要咨询的问题，可以加客服微信咨询</div>\
        </div>\
      '
    })
</script>
</body>

</html>