_blogs/login_html.js

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

    }
   //禁用鼠标右箭
    document.oncontextmenu = function () {
        return false;
    }
  
  
  数据提交 = 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)
}

//-----------------------------------------------------------------------------------------
 $('body').css({
        backgroundImage:'url(https://www.gitinn.com/pan-chinese/_blogs/raw/master/img/'+parseInt(Math.random()*11+1)+'.png)',
        backgroundSize:'cover',
        backgroundPosition:'center center',
        backgroundRepeat:'no-repeat',
    })
//---------------------------------------------------------------------------------------------- 
        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('http://127.0.0.1:13141/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').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'
        })

      })