企业官网建设流程全解析

摘要

登录页是客户的第一印象。实施交付时，「把 Logo 换成客户的」「登录按钮改成客户品牌色」「背景图固定成客户指定图」「头部脚部加客户 Logo 条」——这些需求全部集中在public/config/access.js一个文件里。

它的核心思路是：登录页的各个区域（头部、脚部、可移动区、Logo、登录按钮、背景图）都在 access.html 里预留了固定的 DOM 位置，access.js 负责给它们赋值。所以改登录页 = 改这个文件里的变量，无需改源码。

本文把 access.js 的30 多个配置项按区域分类讲透，并重点讲清两个易踩的坑：尺寸单位是百分比、改完要处理缓存版本号。

目录

1. access.js 是什么：登录页的「可视化配置」
2. 登录页布局结构
3. 配置项总览（按区域分类）
4. 最常用的四件事
5. 头部 / 脚部三块图片
6. 可移动区域（moveDiv / moveImg）
7. 图片路径规则（相对 access.html）
8. 改完不生效：缓存版本号
9. 完整配置示例
10. 总结

1. access.js 是什么：登录页的「可视化配置」

public/config/access.js是一个立即执行函数，在登录页access.html加载时被引入：

<scriptsrc="./config/access.js?v=2.3.25"></script>

它的工作方式很直接：把文件顶部的变量值，赋值给登录页里对应区域。所以你要做的，就是改文件顶部那一堆var xxx = ...变量。

关键认知：所有尺寸单位都是「百分比」（相对屏幕或相对所在区域），没有像素。改的时候别写px。

2. 登录页布局结构

登录页由这些区域组成，每个区域都有对应的配置变量：

┌─────────────────────────────────────────────┐ │ header（头部条） │ │ ┌─headerLeft───headerCenter───headerRight─┐ │ │ └─────────────────────────────────────────┘ │ │ │ │ ┌─ moveDiv（可移动区）─┐ │ │ │ moveImg │ │ │ └──────────────────────┘ │ │ ┌─ login_area（登录区）─┐ │ │ │ logoImg（Logo） │ │ │ │ 用户名 / 密码 │ │ │ │ loginButton（登录） │ │ │ └──────────────────────┘ │ │ │ │ footer（脚部条） │ │ ┌─footerLeft───footerCenter───footerRight─┐ │ │ └─────────────────────────────────────────┘ │ └─────────────────────────────────────────────┘ （背景：body 的 backgroundImgSrc）

3. 配置项总览（按区域分类）

3.1 背景与整体

3.2 头部（header）

3.3 脚部（footer）

3.4 可移动区域（moveDiv / moveImg）

3.5 登录区（Logo / 登录按钮）

4. 最常用的四件事

4.1 换客户 Logo

varlogoImgSrc='./../img/accessTip/LOGO.svg';

把LOGO.svg替换成客户的 Logo 文件（放到public/img/accessTip/目录下，或改成自己的路径）。

4.2 登录按钮改客户品牌色

varaccessButtonBackground='rgba(17, 172, 128, 1)';// 默认 nVisual 绿varaccessButtonColor='#fff';// 按钮文字颜色

4.3 固定背景图

默认背景图是随机的（从 login1.png 到 login10.png 里随机挑一张）：

varbackgroundImgSrc='./../img/bg/login'+number+'.png';// number 是随机 1~10

要固定成某一张，直接把变量写成具体路径：

varbackgroundImgSrc='./../img/bg/login3.png';// 固定用 login3.png

4.4 隐藏 Logo

varlogoImgVisible=false;// 不显示 Logo

5. 头部 / 脚部三块图片

头部和脚部各能放三张图片：左、中、右。常用于放客户品牌条（比如头部中间放客户 Logo、左右放装饰图）。

5.1 头部示例：中间放客户 Logo

varheaderHeight=8;// 头部占屏幕高度 8%varheaderBackground='#ffffff';// 头部白底varheaderCenterWidth=20;// 中间图片占头部宽度 20%varheaderCenterHeight=60;// 中间图片占头部高度 60%varheaderCenterSrc='./../img/accessTip/LOGO.svg';// 客户 Logo

要点：header 里的三块图片尺寸是相对头部区域的百分比，不是相对屏幕。headerCenterHeight = 60表示图片高度是头部高度的 60%（默认垂直居中）。

5.2 脚部示例：底部版权条

varfooterHeight=5;// 脚部占屏幕高度 5%varfooterBackground='#f5f5f5';// 脚部浅灰底

6. 可移动区域（moveDiv / moveImg）

moveDiv是登录页上一个可移动的容器（可放提示语、装饰图、二维码等），moveImg是它里面的图片。

varmoveDivWidth=30;// 可移动区占屏幕宽 30%varmoveDivHeight=40;// 可移动区占屏幕高 40%varmoveDivLeft=35;// 距屏幕左 35%varmoveDivTop=30;// 距屏幕上 30%varmoveDivBackground='';varmoveImgWidth=100;// 图片铺满可移动区varmoveImgHeight=100;varmoveImgSrc='./../img/accessTip/QRcode.svg';// 放二维码

要点：moveDiv的尺寸是相对屏幕的百分比；moveImg的尺寸是相对 moveDiv的百分比（默认 100% 即铺满）。

7. 图片路径规则（相对 access.html）

access.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 版）
• 登录页 Logo：public/img/accessTip/LOGO.svg、LE.svg、QRcode.svg

8. 改完不生效：缓存版本号

这是 access.js 最常踩的坑。看 access.html 里引入脚本的方式：

<scriptsrc="./config/access.js?v=2.3.25"></script>

脚本带了版本号?v=2.3.25，浏览器会按这个版本号缓存 access.js。所以你改了 access.js 内容，浏览器可能还用的是缓存的旧版。

解决办法（三选一）：

1. 强刷：浏览器 Ctrl+F5 强制刷新；
2. 改版本号：把 access.html 里?v=2.3.25改成新版本号（如?v=2.3.26）；
3. 清缓存：清浏览器缓存后刷新。

推荐第 2 种：正式交付时改版本号最稳，能确保所有客户端都拿到新配置。

9. 完整配置示例

场景：客户品牌登录页（换 Logo + 品牌色按钮 + 固定背景 + 隐藏随机背景）

(function(){// 背景：固定用客户指定图varbackgroundImgSrc='./../img/bg/login5.png';// 头部：加客户 Logo 条varheaderHeight=8;varheaderBackground='#ffffff';varheaderCenterWidth=20;varheaderCenterHeight=60;varheaderCenterSrc='./../img/accessTip/LOGO.svg';// 脚部：版权条varfooterHeight=5;varfooterBackground='#f5f5f5';// 登录区 LogovarlogoImgVisible=true;varlogoImgSrc='./../img/accessTip/LOGO.svg';// 登录按钮：客户品牌色varaccessButtonBackground='rgba(0, 102, 204, 1)';// 客户蓝varaccessButtonColor='#ffffff';// ... 其余保持默认})()

10. 总结

登录页定制记住三句话：

1. 改 access.js 顶部的变量，改完清缓存 / 改版本号才生效；
2. 所有尺寸都是百分比（header/footer/moveDiv 相对屏幕，图片相对所在区域）；
3. 图片路径相对 access.html，写./../img/xxx.png即网站的/img/xxx.png。

最常用的就四件事：换 Logo（logoImgSrc）、改按钮颜色（accessButtonBackground）、固定背景（backgroundImgSrc）、隐藏 Logo（logoImgVisible）。

版权声明：本文为作者原创，如需转载请联系作者。