zhouzhendong
/
baoshi-was


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
							<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>

    <title>系统🎯手册</title>
    <style>
        .sidebar {
            background: #ffffff;
            line-height: 180%;
            position: fixed;
            left: 0;
            top: 0;
            border: 1px solid #aaaaaa;
            width: 20%;
            height:100%;
        }
        .sidebar p {
            font-size: 18px;
            color: #15a230;
            margin: 0 0 0.3rem 0;
            text-align: right;
        }
        .sidebar li{
            text-indent: 0.5rem;
            font-size: 14px;
            list-style: none;
            border-bottom:1px solid #ced4da;
        }
        .sidebar li .nav_item{
            padding: 3px;
        }
        .sidebar li .item_h1{
            margin-left: 0;
        }
        .sidebar li .item_h2{
            margin-left: 2rem;
            font-size: 0.8rem;
        }
        .sidebar li .item_h3{
            margin-left: 4rem;
            font-size: 0.8rem;
        }
        .sidebar li .item_h4{
            margin-left: 5rem;
            font-size: 0.8rem;
        }
        .sidebar li .item_h5{
            margin-left: 6rem;
            font-size: 0.8rem;
        }
        .sidebar li .item_h6{
            margin-left: 7rem;
            font-size: 0.8rem;
        }
        .sidebar li .nav_item.current{
            color: white;
            background-color: #5cc26f;
        }
        .sidebar a:hover {
            color: #5cc26f;
        }
        .sidebar a {
            text-decoration: none;
        }
        .nowrap{white-space:nowrap;}
        code {
            border-radius: 6px;
            background: rgba(0,0,0,.1);
            color: red;
            padding: 8px;
        }
        kbd {
            border-radius: 6px;
            background: rgba(5,1,5,.2);
            color: #000000;
            font-weight: bold;
            padding: 8px;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <div class="AnchorContent nowrap" id="AnchorContent"></div>
</div>
<div id="content" style="margin-left: 100px"></div>
<script src="{{mix("js/marked.js")}}"></script>
<script>
    document.getElementById('content').innerHTML = marked("{!! $read !!}");
</script>
<script type="text/javascript">
    let currentIndex = 0;
    let currentScrollHigh = 0;
    let currentContentScrollHigh = 0;
    $(window).on("load",function(){
        let body = $("body");
        let content = $("#AnchorContent");
        let headCounts = [body.find("h1").length, body.find("h2").length, body.find("h3").length, body.find("h4").length,
            body.find("h5").length, body.find("h6").length];
        let vH1Tag = null;  // 显示的最高层级
        let vH2Tag = null;   // 显示的最低层级
        for(let i = 0; i < headCounts.length; i++){
            if(headCounts[i] > 0){
                if(vH1Tag == null)vH1Tag = 'h' + (i + 1);
                else vH2Tag = 'h' + (i + 1);
            }
        }
        if(vH1Tag == null)return;
        let vIndexH1 = 0;
        let vIndexH2 = 0;
        let vIndexH3 = 0;
        let vIndexH4 = 0;
        let vIndexH5 = 0;
        let vIndexH6 = 0;
        let headerALL = [];
        let headerIDALL = [];
        let headerHeightALL = [];
        body.find("h1,h2,h3,h4,h5,h6").each(function(i,item){
            let id = '';
            let name = '';
            let tag = $(item).get(0).tagName.toLowerCase();
            let className = '';
            switch (tag){
                case "h1":
                    id = name = ++vIndexH1;
                    vIndexH2 = 0;
                    vIndexH3 = 0;
                    vIndexH4 = 0;
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                    className = 'item_h1';
                    break;
                case "h2":
                    id = vIndexH1 + '_' + ++vIndexH2;
                    name = vIndexH1 + '.' + vIndexH2;
                    className = 'item_h2';
                    vIndexH3 = 0;
                    vIndexH4 = 0;
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                    break;
                case "h3":
                    id = vIndexH1 + '_' + vIndexH2+ '_' + ++vIndexH3;
                    name = vIndexH1 + '.' + vIndexH2+ '.' + +vIndexH3;
                    className = 'item_h3';
                    vIndexH4 = 0;
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                    break;
                case "h4":
                    id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_'+ ++vIndexH4 ;
                    name =  vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.'+  vIndexH4 ;
                    className = 'item_h4';
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                    break;
                case "h5":
                    id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_' +vIndexH4+'_'+ ++vIndexH5;
                    name = vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.' +vIndexH4+'.'+ vIndexH5;
                    className = 'item_h5';
                    vIndexH6 = 0;
                    break;
                case "h6":
                    id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_' +vIndexH4+'_' +vIndexH5+'_'+ ++vIndexH6;
                    name = vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.' +vIndexH4+'.' +vIndexH5+'.'+ vIndexH6;
                    className = 'item_h6';
                    break;
            }
            if(name.length > 2){
                let mFirstName = name.substring(0,2);
                while(mFirstName === "0."){
                    name = name.substring(2,name.length);
                    mFirstName = name.substring(0,2);
                }
            }
            $(item).attr("id","wow"+id+"_index_"+i);
            $(item).addClass("wow_head");
            content.css('max-height', ($(document).height()) + 'px');
            content.css('height', ($(window).height()) + 'px');
            content.css('overflow','auto');
            content.append('<li><a class="nav_item '+className+' anchor-link"  href="#wow'+id+'_index_'+i+'" link="#wow'+id+'" index="'+i+'">'+name+" "+$(this).text()+" "+'</a></li>');
            let str = "#wow"+id+"_index_"+i;
            headerALL.push($(item));
            headerIDALL.push(str);
        });
        $(".anchor-link").click(function(){
            let index  = $(this).attr("index");
            $(".sidebar li .nav_item.current").removeClass('current');
            $(headerNavs[index]).addClass('current');
            currentScrollHigh = $(window).scrollTop();
            currentContentScrollHigh = headerHeightALL[index];
            currentIndex = headerTops[index];
        });
        let headerNavs = $(".sidebar li .nav_item");
        let headerTops = [];
        $(".wow_head").each(function(i, n){
            headerTops.push($(n).offset().top);
        });
        headerTops.push($(document).height());
        window.onresize = function(){
            headerTops = [];
            $.each(headerNavs, function(i, n){
                    $(n).trigger("click");
                    document.querySelector(headerIDALL[i]).scrollIntoView(true);
                    let scrollTop = $(window).scrollTop();
                    headerTops.push(scrollTop);
                }
            );
            headerTops.push($(document).height());
            content.css('height', ($(window).height()) + 'px');
            let xcontentWidth =  content.width();
            let xWidth = $(window).width();
            let xlength = xWidth - xcontentWidth;
            body.css("marginLeft",xcontentWidth+'px');
            body.css("max-width",xlength);
            $(headerNavs[currentIndex]).trigger("click");
        }
        $(window).scroll(function(){
            let scrollTop = $(window).scrollTop(); // 获得将要到达的点离顶距离
            $.each(headerTops, function(i, n){
                    if( (scrollTop >= (headerTops[i])  && scrollTop < (headerTops[i+1] -1))  ){
                        $(".sidebar li .nav_item.current").removeClass('current');
                        $(headerNavs[i]).addClass('current');
                        currentScrollHigh = scrollTop;
                        currentContentScrollHigh = headerHeightALL[i];
                        currentIndex = i;
                        let mscrollTop1 = content.scrollTop();  // 当前标签的高度
                        if((currentContentScrollHigh - mscrollTop1)>  ($(window).height()/2)){
                            content.animate({scrollTop: (currentContentScrollHigh)}, 10);
                        } else if( ( mscrollTop1 - currentContentScrollHigh )>  0 ){
                            content.animate({scrollTop: currentContentScrollHigh-(content.height()/3)}, 10);
                        }
                        return false;
                    }
                }
            );
            if(scrollTop === 0){
                content.animate({scrollTop: 0}, 10);
            }
            if(scrollTop === $(document).height()){
                content.animate({scrollTop: headerHeightALL[headerHeightALL.length-1]}, 10);
            }
        });
        $.each(headerNavs, function(i, n){
                headerHeightALL.push($(n).offset().top);
            }
        );
        headerTops = [];
        $.each(headerNavs, function(i, n){
                $(n).trigger("click");
                document.querySelector(headerIDALL[i]).scrollIntoView(true);
                let scrollTop = $(window).scrollTop();
                headerTops.push(scrollTop);
            }
        );
        headerTops.push($(document).height());
        $(headerNavs[0]).trigger("click");
        document.querySelector(headerIDALL[0]).scrollIntoView(true);
        let xcontentWidth =  content.width();
        let xWidth = $(window).width();
        let xlength = xWidth - xcontentWidth;
        body.css("marginLeft",xcontentWidth+'px');
        body.css("max-width",xlength);
    });
</script>
</body>
</html>