摘要登录页是客户的第一印象。实施交付时「把 Logo 换成客户的」「登录按钮改成客户品牌色」「背景图固定成客户指定图」「头部脚部加客户 Logo 条」——这些需求全部集中在public/config/access.js一个文件里。它的核心思路是登录页的各个区域头部、脚部、可移动区、Logo、登录按钮、背景图都在 access.html 里预留了固定的 DOM 位置access.js 负责给它们赋值。所以改登录页 改这个文件里的变量无需改源码。本文把 access.js 的30 多个配置项按区域分类讲透并重点讲清两个易踩的坑尺寸单位是百分比、改完要处理缓存版本号。目录access.js 是什么登录页的「可视化配置」登录页布局结构配置项总览按区域分类最常用的四件事头部 / 脚部三块图片可移动区域moveDiv / moveImg图片路径规则相对 access.html改完不生效缓存版本号完整配置示例总结1. access.js 是什么登录页的「可视化配置」public/config/access.js是一个立即执行函数在登录页access.html加载时被引入scriptsrc./config/access.js?v2.3.25/script它的工作方式很直接把文件顶部的变量值赋值给登录页里对应区域。所以你要做的就是改文件顶部那一堆var xxx ...变量。关键认知所有尺寸单位都是「百分比」相对屏幕或相对所在区域没有像素。改的时候别写px。2. 登录页布局结构登录页由这些区域组成每个区域都有对应的配置变量┌─────────────────────────────────────────────┐ │ header头部条 │ │ ┌─headerLeft───headerCenter───headerRight─┐ │ │ └─────────────────────────────────────────┘ │ │ │ │ ┌─ moveDiv可移动区─┐ │ │ │ moveImg │ │ │ └──────────────────────┘ │ │ ┌─ login_area登录区─┐ │ │ │ logoImgLogo │ │ │ │ 用户名 / 密码 │ │ │ │ loginButton登录 │ │ │ └──────────────────────┘ │ │ │ │ footer脚部条 │ │ ┌─footerLeft───footerCenter───footerRight─┐ │ │ └─────────────────────────────────────────┘ │ └─────────────────────────────────────────────┘ 背景body 的 backgroundImgSrc3. 配置项总览按区域分类3.1 背景与整体变量默认值作用backgroundImgSrc随机login1~10.png登录页背景图3.2 头部header变量默认值作用headerHeight0头部高度相对屏幕的百分比headerBackground头部背景色headerLeftWidth/Left/Height0左上角图片的宽 / 距左 / 高相对头部百分比headerLeftSrc左上角图片路径headerCenterWidth/Height0头部中间图片的宽 / 高headerCenterSrc头部中间图片路径headerRightWidth/Right/Height0右上角图片的宽 / 距右 / 高headerRightSrc右上角图片路径3.3 脚部footer变量默认值作用footerHeight0脚部高度相对屏幕的百分比footerBackground脚部背景色footerLeftWidth/Left/Height0左下角图片的宽 / 距左 / 高相对脚部百分比footerLeftSrc左下角图片路径footerCenterWidth/Height0脚部中间图片的宽 / 高footerCenterSrc脚部中间图片路径footerRightWidth/Right/Height0右下角图片的宽 / 距右 / 高footerRightSrc右下角图片路径3.4 可移动区域moveDiv / moveImg变量默认值作用moveDivWidth/Height/Left/Top0可移动区的宽 / 高 / 距左 / 距上相对屏幕百分比moveDivBackground可移动区背景色moveImgWidth/Height/Left/Top100/100/0/0可移动区图片的宽 / 高 / 距左 / 距上相对可移动区百分比moveImgSrc可移动区图片路径3.5 登录区Logo / 登录按钮变量默认值作用logoImgVisibletrueLogo 是否显示true显示 /false隐藏logoImgSrc./../img/accessTip/LOGO.svgLogo 图片路径loginAreaBackgroundrgba(255,255,255,0.9)用户名/密码输入区背景色accessButtonBackgroundrgba(17,172,128,1)登录按钮背景色accessButtonColor#fff登录按钮文字颜色4. 最常用的四件事4.1 换客户 LogovarlogoImgSrc./../img/accessTip/LOGO.svg;把LOGO.svg替换成客户的 Logo 文件放到public/img/accessTip/目录下或改成自己的路径。4.2 登录按钮改客户品牌色varaccessButtonBackgroundrgba(17, 172, 128, 1);// 默认 nVisual 绿varaccessButtonColor#fff;// 按钮文字颜色4.3 固定背景图默认背景图是随机的从 login1.png 到 login10.png 里随机挑一张varbackgroundImgSrc./../img/bg/loginnumber.png;// number 是随机 1~10要固定成某一张直接把变量写成具体路径varbackgroundImgSrc./../img/bg/login3.png;// 固定用 login3.png4.4 隐藏 LogovarlogoImgVisiblefalse;// 不显示 Logo5. 头部 / 脚部三块图片头部和脚部各能放三张图片左、中、右。常用于放客户品牌条比如头部中间放客户 Logo、左右放装饰图。5.1 头部示例中间放客户 LogovarheaderHeight8;// 头部占屏幕高度 8%varheaderBackground#ffffff;// 头部白底varheaderCenterWidth20;// 中间图片占头部宽度 20%varheaderCenterHeight60;// 中间图片占头部高度 60%varheaderCenterSrc./../img/accessTip/LOGO.svg;// 客户 Logo要点header 里的三块图片尺寸是相对头部区域的百分比不是相对屏幕。headerCenterHeight 60表示图片高度是头部高度的 60%默认垂直居中。5.2 脚部示例底部版权条varfooterHeight5;// 脚部占屏幕高度 5%varfooterBackground#f5f5f5;// 脚部浅灰底6. 可移动区域moveDiv / moveImgmoveDiv是登录页上一个可移动的容器可放提示语、装饰图、二维码等moveImg是它里面的图片。varmoveDivWidth30;// 可移动区占屏幕宽 30%varmoveDivHeight40;// 可移动区占屏幕高 40%varmoveDivLeft35;// 距屏幕左 35%varmoveDivTop30;// 距屏幕上 30%varmoveDivBackground;varmoveImgWidth100;// 图片铺满可移动区varmoveImgHeight100;varmoveImgSrc./../img/accessTip/QRcode.svg;// 放二维码要点moveDiv的尺寸是相对屏幕的百分比moveImg的尺寸是相对 moveDiv的百分比默认 100% 即铺满。7. 图片路径规则相对 access.htmlaccess.js 里的图片路径是相对access.html解析的不是相对 access.js 文件。所以默认值./../img/accessTip/LOGO.svg实际指向public/img/accessTip/LOGO.svg即网站的/img/accessTip/LOGO.svg。记忆路径写./../img/xxx.png实际就是网站的/img/xxx.png。目录里现成的图片资源背景图public/img/bg/login1.png~login10.png另有 jpg 版登录页 Logopublic/img/accessTip/LOGO.svg、LE.svg、QRcode.svg8. 改完不生效缓存版本号这是 access.js 最常踩的坑。看 access.html 里引入脚本的方式scriptsrc./config/access.js?v2.3.25/script脚本带了版本号?v2.3.25浏览器会按这个版本号缓存 access.js。所以你改了 access.js 内容浏览器可能还用的是缓存的旧版。解决办法三选一强刷浏览器 CtrlF5 强制刷新改版本号把 access.html 里?v2.3.25改成新版本号如?v2.3.26清缓存清浏览器缓存后刷新。推荐第 2 种正式交付时改版本号最稳能确保所有客户端都拿到新配置。9. 完整配置示例场景客户品牌登录页换 Logo 品牌色按钮 固定背景 隐藏随机背景(function(){// 背景固定用客户指定图varbackgroundImgSrc./../img/bg/login5.png;// 头部加客户 Logo 条varheaderHeight8;varheaderBackground#ffffff;varheaderCenterWidth20;varheaderCenterHeight60;varheaderCenterSrc./../img/accessTip/LOGO.svg;// 脚部版权条varfooterHeight5;varfooterBackground#f5f5f5;// 登录区 LogovarlogoImgVisibletrue;varlogoImgSrc./../img/accessTip/LOGO.svg;// 登录按钮客户品牌色varaccessButtonBackgroundrgba(0, 102, 204, 1);// 客户蓝varaccessButtonColor#ffffff;// ... 其余保持默认})()10. 总结登录页定制记住三句话改 access.js 顶部的变量改完清缓存 / 改版本号才生效所有尺寸都是百分比header/footer/moveDiv 相对屏幕图片相对所在区域图片路径相对 access.html写./../img/xxx.png即网站的/img/xxx.png。最常用的就四件事换 LogologoImgSrc、改按钮颜色accessButtonBackground、固定背景backgroundImgSrc、隐藏 LogologoImgVisible。版权声明本文为作者原创如需转载请联系作者。