宝塔面板登录界面添加图片背景

宝塔面板登录界面添加图片背景

梦屿
2021-12-25 / 0 评论 / 125 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年11月03日,已超过90天没有更新,若内容或图片失效,请留言反馈。

https://img.zhinianblog.com/img/2164

堡塔7.7.0以上可能不行

文件地址为:/www/server/panel/BTPanel/templates/default/login.html

修改地址添加下面代码

https://img.zhinianblog.com/img/2165

改图片直接换代码链接
代码内容

<style>
    body{
        background-image: url(https://www.27xy.com/bing/api.php)!important;
    }
    .main .login{
        background-color: rgba(255, 255, 255, 0.8)!important;
    }
    </style>

懒就全部替换

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
    <title>{{g.title}}</title>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css?date={{g.version}}">
    <style>
    body{
        background-image: url(https://api.ixiaowai.cn/api/api.php)!important;
    }
    .main .login{
        background-color: rgba(255, 255, 255, 0.8)!important;
    }
    </style>
    <script type="text/javascript">
        var ie_version = (function() {
            var userAgent = navigator.userAgent,
                isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1,
                isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11,
                isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
            if (isLessIE11) {
                var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
                IEReg.test(userAgent);
                var IEVersionNum = parseFloat(RegExp['$1']);
                if (IEVersionNum === 7) {// IE7
                    return 7
                } else if (IEVersionNum === 8) {// IE8
                    return 8
                } else if (IEVersionNum === 9) {// IE9
                    return 9
                } else if (IEVersionNum === 10) { // IE10
                    return 10
                } else {
                    return 6
                }
            } else if (isEdge) { // edge
                return 'edge'
            } else if (isIE11) {// IE11
                return 11
            } else {// 不是ie浏览器
                return -1
            }
        }());
        if(ie_version != -1 && ie_version < 9){
            window.location.href = '/tips';
        }
    </script>
</head>
<body>
    <div class="main">
        <div class="login">
            <div class="account">
                <form class="loginform" method="post" action="/login" onsubmit="return false;">
                    <div class="rlogo">{{g.title}}</div>
                    <div class="line"><input class="inputtxt" value="" name="username" datatype="*" nullmsg="{{data['lan']['N1']}}" errormsg="{{data['lan']['N2']}}" placeholder="{{data['lan']['N3']}}" type="text"><div class="Validform_checktip"></div></div>
                    <div class="line"><input class="inputtxt" name="password" value="" datatype="*" nullmsg="{{data['lan']['N4']}}" errormsg="{{data['lan']['N5']}}" placeholder="{{data['lan']['N6']}}" type="password"><div class="Validform_checktip"></div></div>
                    <div style="color: red;position: relative;top: -14px;" id="errorStr"></div>
                    <div class="line yzm" style="top: -5px;
                            {% if not session['code'] %}
                                display:none;
                            {% endif %}
                        ">
                        <input type="text" class="inputtxt" name="code" nullmsg="{{data['lan']['N7']}}" errormsg="{{data['lan']['N8']}}" datatype="*" placeholder="{{data['lan']['N9']}}">
                        <div class="Validform_checktip"></div>
                        <img width="100" height="40" class="passcode" onClick="this.src=this.src.split('?')[0] + '?'+new Date().getTime()" src="/code" style="border: 1px solid #ccc; float: right;" title="{{data['lan']['N10']}}">
                    </div>
                    <div class="login_btn"><input id="login-button" value="{{data['lan']['N11']}}" type="submit"></div>
                    <p class="pwinfo" style="display:none">{{data['lan']['N12']}}</p>
                    {% if data['hosts'] != '[]' %}
                    <a class="static-cdn">
                        <span class="span-tname">加速节点</span>
                         <select name="cdn_url" id="static_cdn">
                            <option value="localhost">计算中...</option>
                        </select>
                    </a>
                    {% endif %}
                    <a class="resetpw" href="http://www.bt.cn/bbs/thread-1172-1-1.html" target="_blank">{{data['lan']['N13']}}</a>
                </form>
            </div>
            <div class="scanCode" style="display: none;">
                <div class="titles"><span>堡塔APP扫码登录</span></div>
                <div class="qrCode" id="qrcode"></div>
                <div class="scanTip">
                    <div class="list_scan">
                        <span>打开<a href="https://www.bt.cn/bbs/thread-47408-1-1.html" target="_blank" class="btlink">堡塔APP</a>
                        </span>
                        <div class="scan_tips"> <img src="/static/img/sCan.png" /><span>扫一扫</span></div>
                    </div>
                </div>
            </div>
            <div class="entrance" style="display: none;">
                <div class="bg_img"></div>
                <div class="tips">
                    <span><img src="/static/img/scan_ico.png"><span>切换扫码登录</span></span>
                    <em></em>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        if(typeof(String.prototype.trim) === "undefined"){
            String.prototype.trim = function() 
            {
                return String(this).replace(/^\s+|\s+$/g, '');
            };
        }
        select_host = {
            hosts: {{data.hosts|safe}},
            my_hosts : {},
            bt_version:"{{g.version}}",
            request:function(url){
                var s_time = Date.now();
                var to_url = window.location.protocol + '//' + url + '/test.txt?time=' + s_time
                http_request = new XMLHttpRequest();
                http_request.open('GET', to_url, true);
                http_request.setRequestHeader("Content-type","text/plain");
                http_request.send();
                http_request.onreadystatechange = function (e) {
                    if (e.srcElement.readyState == 4 && e.srcElement.status == 200) {
                        if(e.srcElement.responseText === 'true'){
                            var e_time = Date.now();
                            select_host.my_hosts[url] = e_time - s_time
                        }
                    }
                }
            },
            run:function(){
                for(var i=0;i<select_host.hosts.length;i++){
                    select_host.request(select_host.hosts[i].url);
                }
            },
            compare:function (prop) {
                return function (obj1, obj2) {
                    var val1 = obj1[prop];
                    var val2 = obj2[prop];
                    if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
                        val1 = Number(val1);
                        val2 = Number(val2);
                    }
                    if (val1 < val2) {
                        return -1;
                    } else if (val1 > val2) {
                        return 1;
                    } else {
                        return 0;
                    }  
                }
            }
        }
        select_host.run();
        setTimeout(function(){
            if(select_host.hosts.length > 0){
                var my_keys = Object.keys(select_host.my_hosts);
                var host_data = [];
                for(var i=0;i<select_host.hosts.length;i++){
                    if(my_keys.indexOf(select_host.hosts[i].url) == -1) continue;
                    select_host.hosts[i].speed = select_host.my_hosts[select_host.hosts[i].url];
                    host_data.push(select_host.hosts[i]);
                }
                host_data = host_data.sort(select_host.compare('speed'));
                var cdn_option = '';
                for(var i=0;i<host_data.length;i++){
                    cdn_option += '<option value="'+host_data[i].url+'">'+host_data[i].name + '('+ host_data[i].speed  +'ms)' +'</option>';
                }
                
                document.getElementById('static_cdn').innerHTML = cdn_option;

                var host_url = "";
                if(host_data.length > 0){
                    host_url = window.location.protocol + '//' + host_data[0].url;
                }
                if(!host_url) select_host.bt_version = "static";
                if(!host_url){
                    document.getElementById('static_cdn').innerHTML = '<option value="local">本服务器</option>';
                }

            }else{
                host_url = "";
                select_host.bt_version = "static";
            }


            function loadJs(urls,i,callback){
                i++;
                var script=document.createElement('script');
                script.type="text/javascript";
                if(typeof(callback)!="undefined"){
                    if(script.readyState){
                        script.onreadystatechange=function(){
                            if(script.readyState == "loaded" || script.readyState == "complete"){
                                script.onreadystatechange=null;
                                if(i==urls.length){
                                    callback();
                                }else{
                                    loadJs(urls,i,callback);
                                }
                            }
                        }
                    }else{
                        script.onload=function(){
                            if(i==urls.length){
                                callback();
                            }else{
                                loadJs(urls,i,callback);
                            }
                        }
                    }
                }
                script.src=urls[i-1];
                document.body.appendChild(script);
                
            }
            my_urls = [
                    host_url+'/'+select_host.bt_version+'/js/jquery-2.2.4.min.js',
                    host_url+'/'+select_host.bt_version+'/js/Validform_v5.3.2_min.js',
                    host_url+'/'+select_host.bt_version+'/js/md5.js',
                    host_url+'/'+select_host.bt_version+'/js/jquery.qrcode.min.js',
                    host_url+'/'+select_host.bt_version+'/layer/layer.js',
                    host_url+'/'+select_host.bt_version+'/language/zh-cn.js'
                ];

            loadJs(my_urls,0,run); 
        },200);
        function run(){
            function Wreset() {
                var w = $(window).width();
                var yzmw = $(".login .line").width() - 140;
                if ($(".yzm").is(":visible") && w > 640) {
                    $(".login").css({ "height": "365px", "margin-top": "-230px" });
                }
                else {
                    $(".login").removeAttr("style")
                }
                $(".login .yzm .inputtxt").width(yzmw);
            }
            $(function () {
                Wreset();
                var setTime = '';
                $.get('/public?name=app&fun=login_qrcode', function (res) {
                    // if (res.status) {
                        $('#qrcode').qrcode({
                            render: "canvas",
                            width: 150,
                            height: 150,
                            background: "#fefefe",
                            foreground: "#333",
                            text: res.status?res.msg:'https://www.bt.cn/download/app.html'
                        });
                        $('.entrance').show();
                    // }
                }).error(function (res, textStatus, errorThrown) {
                    if (res.status == 404) {
                        $('.entrance').hide();
                    }
                });
                function controlTime() {
                    $.get('/public?name=app&fun=is_scan_ok', function (res) {
                        if (res.status) {
                            layer.msg('扫码成功,请稍后...', { icon: 1 });
                            clearInterval(setTime);
                            loginAdmin(res.msg);
                        }
                    });
                }
                function loginAdmin(key) {
                    $.get('/public?name=app&fun=set_login', { secret_key: key }, function (res) {
                        layer.msg(res.msg, { icon: res.status ? 1 : 2 })
                        if (res.status) {
                            layer.msg('正在安全登录中,请稍后...', { time: 0, shade: [0.4, '#fff'], icon: 16 });
                            setTimeout(function () {
                                location.href = '/';
                            }, 1000);
                        }
                    });
                }
                $('.bg_img').click(function (event) {
                    if ($(this).hasClass('pc')) {
                        $(this).removeClass('pc');
                        $('.scanCode').hide().prev().show();
                        clearInterval(setTime);
                        $('.tips>span').html('<img src="/static/img/scan_ico.png"><span>切换扫码登录</span>');
                    } else {
                        $(this).addClass('pc');
                        $('.account').hide().next().show();
                        $('.tips>span').html('<img src="/static/img/safety_ico.png"><span>切换账号登录</span>')
                        setTime = window.setInterval(controlTime, 2000);
                    }
                });
                if("{{data['app_login']}}" == 'True'){
                    $('.bg_img').addClass('pc');
                    $('.account').hide().next().show();
                    $('.tips>span').html('<img src="/static/img/safety_ico.png"><span>切换账号登录</span>')
                    setTime = window.setInterval(controlTime, 2000);
                }
            })
            window.onresize = function () {
                Wreset();
            }
            $(function(){
                // $('.loginform input').blur(function(){
                //     var $this = $(this),type = $this.attr('name'),validFormTip = $this.next(),val = $this.val();
                //     switch(type){
                //         case 'username':
                //             if(val == ''){
                //                 $this.addClass('Validform_error');
                //                 validFormTip.addClass('Validform_wrong').removeClass('Validform_right').text($this.attr('nullmsg'));
                //             }else if(val.length < 3){
                //                 $this.addClass('Validform_error');
                //                 validFormTip.addClass('Validform_wrong').removeClass('Validform_right').text($this.attr('errormsg'));
                //             }else{
                //                 $this.removeClass('Validform_error');
                //                 validFormTip.removeClass('Validform_wrong').addClass('Validform_right').text('');
                //             }
                //         break;
                //         case 'password':
                //             if(val == ''){
                //                 $this.addClass('Validform_error');
                //                 validFormTip.addClass('Validform_wrong').text($this.attr('nullmsg'));
                //             }
                //         break;
                //     }
                // });
                // return false;
                $(".loginform").Validform({
                    tiptype: function (msg, o, cssctl) {
                        if (!o.obj.is("form")) {
                            var objtip = o.obj.siblings(".Validform_checktip");
                            cssctl(objtip, o.type);
                            objtip.text(msg);
                        }
                    }
                });
            });
            $('#login-button').click(function () {
                    var username = $("input[name='username']").val().trim();
                    var password = $("input[name='password']").val().trim();
                    var code = $("input[name='code']").val().trim();
                    if (username == '' || password == '') {
                        layer.msg("{{data['lan']['JS1']}}", { icon: 2 });
                        return;
                    }
                    var data = { username: md5(username), password: md5(md5(password) + '' + '_bt.cn'), code: code,cdn_url:$("#static_cdn").val() }
                    var loadT = layer.msg("{{data['lan']['JS2']}}", { icon: 16, time: 0, shade: [0.3, '#000'] });
                    $.post('/login', data, function (rdata) {
                        if(rdata == '1'){
                            layer.close(loadT);
                            layer.open({
                                type:1,
                                title:false,
                                area: ['390px', '280px'],
                                content:'<div class="verification_view">\
                                            <div class="v_title">动态口令认证</div>\
                                            <div class="v_input"><input type="text" class="v_code" name="v_code" placeholder="请输入动态口令"/></div>\
                                            <div class="v_btn"><input id="auth_verif_btn" value="验证并登录" type="submit"></div>\
                                            <div class="v_tips">* 请使用宝塔APP或谷歌认证器获取验证代码<br><a target="_blank" href="https://www.bt.cn/bbs/forum.php?mod=viewthread&tid=37437"  class="btlink">无法验证,点击帮助</a></div>\
                                        </div>',
                                success:function(){
                                    // 点击验证登录
                                    $('[name="v_code"]').keyup(function(e){
                                        if(e.keyCode == 13){
                                            $('#auth_verif_btn').click();
                                        }
                                    });
                                    $('#auth_verif_btn').click(function(e){
                                        data['vcode'] = $('[name="v_code"]').val().trim();
                                        var loadT = layer.msg("{{data['lan']['JS2']}}", { icon: 16, time: 0, shade: [0.3, '#000'] });
                                        $.post('/login', data, function (rdata) {
                                            layer.close(loadT);
                                            if(!rdata.status){
                                                layer.msg(rdata.msg, { icon: 2 });
                                                return false;
                                            }
                                            layer.msg(rdata.msg, { icon: 16, time: 0, shade: [0.3, '#000'] });
                                            window.location.href = '/';
                                        });
                                    });
                                }
                            });
                            return false;
                        }
                        layer.close(loadT);
                        if (!rdata.status) {
                            $("#errorStr").html(rdata.msg);
                            $("input[name='password']").val('');
                            num = rdata.msg.substring(rdata.msg.indexOf('[') + 1, rdata.msg.indexOf(']'))
                            if (num < 5) {
                                $(".yzm").show();
                                $(".login").css("height", "332px");
                                $("input[name='code']").val('');
                            }
                            $(".yzm").show();
                            Wreset();
                            $(".passcode").click();
                            layer.msg(rdata.msg, { icon: 2 });
                            return;
                        }

                        layer.msg(rdata.msg, { icon: 16, time: 0, shade: [0.3, '#000'] });
                        window.location.href = '/';
                    });
                });
        }
    </script>
</body>
</html>

添加完代码后重启面板之后,打开登录画面即可看到背景图已经生效

7

评论 (0)

取消
萌ICP备20221019号 暂未备案