如何修改网页端（Html5）登录页背景图和logo

栏目：云星空知识作者：金蝶来源：金蝶云社区发布：2024-09-23浏览：1

【详细修改点】

【实现步骤】

1、准备需要展示的背景图和logo图片，背景图尺寸：1533*1000 ，logo图片尺寸：260*60

2、参考如下示例代码编写前端JS插件loginDemo.rar

3、将前面准备的图片放在目录：K3Cloud\WebSite\images\biz\International\中，并根据示例代码中设置的路径对图片进行命名修改，如（logo：kd_icon_extend.webp 背景图 :kd_login_bg_extend.webp）。名字和路径可以随意更改（建议不要与系统预置图片名称一致，不然更新补丁会覆盖图片），但需要和代码设置的路径保持一致。

4、参考帖子部署插件到系统中，HTML5登录页个性化功能开发，如果是调整供应商协同背景图片，二开插件写法一致，然后参考指导帖部署二开插件到系统中，HTML5供应商协同登录页个性化功能开发

5、重启验证效果

代码示例：

(
    function($) {
        var customerLogin = function() {
            //260*60 设置logo
            var iconUrl = "url(" + KD.getImageUrlByNameAndVersion(KD.getUrlRoot() + "/images/biz/International/kd_icon_extend.webp") + ")";
            $("#divTitle .loginKDLogo").css({ "background-image": iconUrl });

            //1533*1000 设置背景图
            var bgUrl = "url(" + KD.getImageUrlByNameAndVersion(KD.getUrlRoot() + "/images/biz/International/kd_login_bg_extend.webp") + ")";
            $("#loopbanners").css({ "background-image": bgUrl });
        };

        var customerLoginAction = function() {
            if (KD.isIndex()) {
                var KDsetLoginLang = KD.setLoginLang;
                KD.setLoginLang = function() {
                    if (KDsetLoginLang) {
                        KDsetLoginLang.call(KD);
                    }

                    if (customerLogin) {
                        customerLogin();
                    }
                }
            }
        }

        if (KD.isIndex()) {
            KD.delayInvoke(function() {
                if (customerLoginAction) {
                    customerLoginAction();
                }
                if (customerLogin) {
                    customerLogin();
                }
            }, 15, true);
        }

    }(jQuery)
);

本方案涉及替换应用服务器上的LOGO图片，公有云环境由金蝶运维统一维护，不对外开放应用服务器，因此公有云不支持LOGO替换。如若对LOGO替换有强烈需求，建议转私有云订阅模式。