_blogs/login_html.js

$(document).ready(function () {
   //禁用文本复制
   document.onselectstart = function () {
        return false;

    }
   //禁用鼠标右箭
    document.oncontextmenu = function () {
        return false;
    }
  
  
  POST = function(name = '地址',json = '数据',result = '回调') {
    $.post('http://localhost:13131/'+name,json,function(data){
        result(data);
    })
}

滑动显示 = function (table1 = '标签一',time = '时间') {
    $(table1).css({
        overflow:'hidden',
        cursor:'pointer',
    }).find('div').css({
        width:$(table1).width(),
        height:$(table1).height(),
        background:'rgba(44,62,80,.4)',
        marginTop:$(table1).height()-$(table1).find('span').height(),
        cursor:'pointer',
    }).find('*').css({
        width:$(table1).width(),
        color:'#FFF',
        margin:'5px',
        textAlign:'left',
    });
    $(table1).hover(function(){
        $(this).find('div').animate({
            marginTop:'0px',
        },time)
    },function(){
        $(this).find('div').animate({
            marginTop:$(this).height()-$(this).find('span').height(),
        },time);
    });
}

alert_s = function(value = '类容'){
    $('body').append(`
<div id="alert" style="background:transparent;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto;
text-align: center;
position:fixed;
z-index:999999;">

<div style="text-align: center;position:absolute;
    left:0px;right:0px;top:0px;bottom:0px;margin:auto;
    width:150px;height:35px;border-radius:5px;background: rgba(0,0,0,0.3)">
        <span style="height:35px;line-height:35px;color: #ffffff;font-size: 13px">${value}</span>
    </div>
</div>`);

    setTimeout(function () {
        $('#alert').remove();
    },500)
}

//-----------------------------------------------------------------------------------------
 $('#ifame').css({
        backgroundImage:'url(https://www.gitinn.com/pan-chinese/_blogs/raw/master/img/'+parseInt(Math.random()*11+1)+'.png)',
    })
 
 
 
    $('input[placeholder="请输入内容"]').attr('id','search').attr('autocomplete','off');
     setTimeout(function () {
        $('#search').focus(function(){
            $(this).attr('placeholder','')
        }).blur(function () {
            $(this).attr('placeholder','请输入内容')
        });
    },300)
     
     $('.Body_val>h1').text('').text('欢迎来到Hopeの我的blog');
 
 $('head').after(`
    <style>


    body{
    overflow: hidden;
    }

 #search::-webkit-input-placeholder{
    color: #999;
    }


     #ifame{
        position: absolute;
        min-width: 1200px;
        width: 100%;
        height: 100%;
        background-color: transparent;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        overflow-y:scroll;
        overflow-x:hidden;
}


#ifame::-webkit-scrollbar{
      width: 5px;
      height: 8px;
      }
     #ifame::-webkit-scrollbar-button{
      width: 0px;
      height: 0px;
      }
      #ifame::-webkit-scrollbar-thumb{

      width: 5px;
      height: 8px;
background-color: rgb(53, 185, 149);
      }

    </style>
    `)
 
//---------------------------------------------------------------------------------------------- 
       
  is_my = function(func){
    let if_script = setInterval(function () {
            if($('script[src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"]').is($('script'))){
                setTimeout(function () {
                    func();
                },300);
                clearInterval(if_script);
            }
        })
    }
  
 Vue.component('login',{
                    template:`
            <div type="login" v-on:click="on.button.exit()" v-bind:style="style.box" align="center">
                <div v-bind:style="style.frame">
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.head">登录</span>
                    </label>
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.i">*</span>
                        <span v-bind:style="style.title">账号</span>
                        <input maxlength="9" v-on:focus="on.input.focus()" v-on:blur="on.input.blur()" v-bind:style="style.input"/>
                    </label>
                    <span v-bind:style="style.info"></span>
                    <label v-bind:style="style.label">
                        <span v-bind:style="style.i">*</span>
                        <span v-bind:style="style.title">密码</span>
                        <input maxlength="16" v-on:focus="on.input.focus()" v-on:blur="on.input.blur()" v-bind:style="style.input"/>
                    </label>
                    <span v-bind:style="style.info"></span>
                    <label v-bind:style="style.label">
                        <button v-on:click="on.button.QR_code()" v-bind:style="[style.button,style.button[2]]">扫码</button>
                        <button v-on:click="on.button.login()" v-bind:style="[style.button,style.button[2]]">登录</button>
                        <button v-on:click="on.button.exit()" type="quit" v-bind:style="[style.button,style.button[1]]">关闭</button>
                    </label>
                    <label v-bind:style="style.qr.box">
                        <img  v-bind:style="style.qr.img" width="100" height="100" alt=""/>
                        <br/>
                        <button v-on:click="on.button.account_login()" v-bind:style="style.qr.button" >账号登录</button>
                    </label>
                </div>
            </div>`,
                    data:function () {
                        return {
                            style:{
                                box:{
                                    width:'100%',
                                    height:'100%',
                                    position:'fixed',
                                    zIndex:$('*').length * 2,
                                    background:'rgba(0,0,0,.2)'
                                },
                                frame:{
                                    display:'inline-grid',
                                    position: 'absolute',
                                    top:0,
                                    bottom:0,
                                    left:0,
                                    right:0,
                                    margin:'auto',
                                    width:'300px',
                                    height:'200px',
                                    borderRadius:'2.5px',
                                    padding:'20px 50px',
                                    background: '#FFF',
                                },
                                label:{
                                    height:'30px',
                                },
                                head:{
                                    lineHeight: '24px',
                                    fontSize: '18px',
                                    color: '#303133',
                                },
                                i:{
                                    color:'red',
                                },
                                title:{
                                    letterSpacing: '2.5px',
                                    marginRight:'5px',
                                    fontSize:'14px',
                                    color: '#606266',
                                    height:'30px',
                                    lineHeight:'30px',
                                },
                                input:{
                                    padding: '5px 10px',
                                    width: '200px',
                                    height: '20px',
                                    border:'1px solid #c3c3c3',
                                    borderRadius: '2.5px',
                                    outline:'none',
                                },
                                button:{
                                    cursor:'pointer',
                                    marginRight: '15px',
                                    float:'right',
                                    height:'30px',
                                    width:'70px',
                                    border:'none',
                                    borderRadius:'2.5px',
                                    outline: 'none',
                                    1:{
                                        border:'1px solid #c3c3c3',
                                        background:'#FFF',
                                        color:'black'
                                    },
                                    2:{
                                        border:'1px solid #409EFF',
                                        background:'#409EFF',
                                        color:'#FFF'

                                    }
                                },
                                info:{
                                    textAlign:'left',
                                    margin:'0 70px',
                                    height:'15px',
                                    letterSpacing:'2px',
                                    lineHeight: '15px',
                                    color:'red',
                                    fontSize: '10px',
                                },
                                qr:{
                                    box:{
                                        display:'none',
                                        height:'150px',
                                    },
                                    img:{
                                        borderRadius:'2.5px',
                                    },
                                    button:{
                                        cursor: 'pointer',
                                        marginTop:'15px',
                                        height:'30px',
                                        background:'#FFF',
                                        border:'1px solid #c3c3c3',
                                        outline:'none',
                                        width:'150px',
                                    }
                                }
                            },
                            on:{
                                input:{
                                    focus:function () {
                                        event.target.style.borderColor = '#409EFF';
                                    },
                                    blur:function () {
                                        var input = event.target;
                                        var info = $(input).parent('label').next('span')[0];
                                        var title = $(input).prev('span')[0].innerText;
                                        if ($(input).val() === defaultStatus||$(input).val()===null){
                                            info.innerText = title+'不能为空';
                                        } else if ($(input).val().indexOf(' ') !== -1){
                                            info.innerText = title+'不能包含空格';
                                        } else {
                                            info.innerText = '';
                                        }
                                        input.style.borderColor = '#c3c3c3';
                                    }
                                },
                                button:{
                                    exit:function () {
                                        if ($("div[type='login']").is(event.target) || $("button[type='quit']").is(event.target)){
                                            $("div[type='login']").css('display','none');
                                        }
                                    },
                                    login:function () {
                                        var message = $(event.target).parent('label').prevAll('label');
                                        var account = $(message[1]).find('input').val();
                                        var password = $(message[0]).find('input').val();
                                        var account_info = $(message[1]).next('span')[0];
                                        var password_info = $(message[0]).next('span')[0];
                                        var account_title = $(message[1]).find('span').eq(1).text();
                                        var password_title = $(message[0]).find('span').eq(1).text();
                                        if (account === defaultStatus||account===null){
                                            account_info.innerText = account_title+'不能为空';
                                        } else if (account.indexOf(' ') !== -1){
                                            account_info.innerText = password_title+'不能包含空格';
                                        }
                                        if (password === defaultStatus||password ===null){
                                            password_info.innerText = password_title+'不能为空';
                                        } else if (password.indexOf(' ') !== -1){
                                            password_info.innerText = password_title+'不能包含空格';
                                        }
                                        if (account !== defaultStatus
                                            &&account!==null
                                            &&account.indexOf(' ') === -1
                                            &&password !== defaultStatus
                                            &&password !==null
                                            &&password.indexOf(' ') === -1){

                                            POST('login',{
                                                account:account,
                                                password:password,
                                            },function (data) {
                                                alert_s(data.msg);
                                                if (data.error === 1){
                                                    $.cookie('uuid',data.uuid,{exports:15});
                                                    document.location.href = document.location.href;
                                                }
                                            })
                                            
                                        }
                                    },
                                    QR_code:function(){
                                        let qr_info = {
                                            time:new Date(),

                                        }
                                        $(event.target).parent('label').next('label').find('img').attr('src','http://qrs.kegood.com/?url='+JSON.stringify(qr_info))
                                        $(event.target).parent('label').parent('div').find('label').css('display','none')
                                        $(event.target).parent('label').prevAll('span').css('display','none')
                                        $(event.target).parent('label').parent('div').find('label')[0].style.display = 'block';
                                        $(event.target).parent('label').parent('div').find('label')[4].style.display = 'block';
                                    },
                                    account_login:function () {
                                        $(event.target).parent('label').parent('div').find('label').css('display','block')
                                        $(event.target).parent('label').parent('div').find('label')[4].style.display = 'none';
                                    }
                                }
                            }
                        };
                    }
                });
                new Vue({
                    el:'#ifame'
                })
      })