当前位置：首页 > news >正文

nVisual 登录页页面配置说明

news 来源：原创 2025/6/26 20:28:50

一、概述

nVisual登录页面可根据具体客户需要通过public\config\access.js文件进行自定义配置。页面可以大致分为4个部分，头部、底部、可移动区域以及页面中间的信息填写区域。其中头部和底部又包含头部左侧、头部中间、头部右侧、底部左侧、底部中间、底部右侧六个区域。下面来具体说明一下每一个区域的配置说明。

二、头部区域配置说明

1. 头部区域

这里我们已头部为例。头部区域包含两个参数，headerHeight以及headerBackground。通过headerHeight参数可设置头部的高度，头部区域的取值范围为0-100，100表示占满整个网页页面。默认为0，即不占任何区域。通过headerBackground参数来设置头部区域的背景颜色，可以输入16进制颜色代码、rgb颜色值、英文颜色单词三种形式。下图为头部配置参数以及头部配置参数对应的样式。

2. 头部左侧区域

头部左侧区域包含四个参数：HeaderLeftWidth、headerLeftLeft、HeaderLeftHeight、HeaderLeftSrc。可以通过HeaderLeftWidth和HeaderLeftHeight参数来分别设置左上角区域的图片的宽高，取值范围均为0-100，默认均为0，100表示图片宽高均铺满整个头部区域。这里说明一下，图片默认在垂直方向上为居中显示，举个例子，高度设置为50，图片高度占整个头部区域的一半，且图片上下均有25%的区域。HeaderLeftLeft参数表示头部左侧区域图片左侧距离网页左侧的距离，默认为0，即图片紧贴页面左侧。HeaderLeftSrc参数可设置图片路径。下图为头部左侧配置参数以及头部左侧参数配置参数对应的样式。

3. 头部中间区域

头部中间区域包含3个参数：HeaderCenterWidth、HeaderCenterHeight、HeaderCenterSrc。可以通过HeaderCenterWidth和HeaderCenterHeight参数来分别设置头部中间区域的图片的宽高，取值范围均为0-100，默认均为0，100表示图片宽高均铺满整个头部区域。HeaderCenterSrc参数可设置图片路径。下图为头部中间区域配置参数以及头部中间区域参数配置参数对应的样式。

4. 头部右侧区域

头部左侧区域包含四个参数：HeaderRightWidth、headerRightRight、HeaderRightHeight、HeaderRightSrc。可以通过HeaderRightWidth和headerRightRight参数来分别设置头部右侧区域的图片的宽高，取值范围均为0-100，默认均为0，100表示图片宽高均铺满整个头部区域。headerRightRight参数表示头部右侧区域图片右侧距离网页右侧的距离，默认为0，即图片紧贴页面右侧。HeaderRightSrc参数可设置图片路径。下图为头部右侧配置参数以及头部右侧参数配置参数对应的样式。

三、底部区域配置说明

头部区域与底部区域配置方式完全一致，详情参见头部区域配置说明章节。

四、可移动区域配置说明

1. 可移动区域配置说明

可移动区域包含5个参数moveDivWidth、moveDivHeight、moveDivLeft、moveDivTop、moveDivBackground。其中moveDivWidth、moveDivHeight参数分别可设置可移动区域的宽高。取值范围0-100，默认为0，100即表示占满整个网页区域。moveDivLeft、moveDivTop参数可分别设置可移动区域的位置，默认均为0，即在网页左上角的位置，如果想让可移动区域在网页水平方向居中，可设置moveDivLeft参数值为（100-moveDivWidth）/2。垂直方向（100-moveDivHeight）/2。moveDivBackground参数用于设置可移动区域的背景色。下图为可移动区域配置参数以及可移动区域配置参数对应的样式。

2. 可移动区域图片配置说明

可移动区域图片配置包含5个参数moveImgWidth、moveImgHeight、moveImgLeft、moveImgTop、moveImgSrc。其中moveImgWidth、moveImgHeight参数分别可设置可移动区域图片的宽高。取值范围0-100，默认为100即表示占满整个可移动区域。moveImgLeft、moveImgTop参数可分别设置可移动图片在可移动区域的位置，默认均为0，即在可移动区域左上角的位置。moveImgSrc参数可设置图片路径。下图为可移动区域配置参数以及可移动区域配置参数对应的样式。

五、页面中部信息填写区域配置说明

页面中部信息填写区域配置包含2个参数logoImgVisible、logoImgSrc。其中logoImgVisible参数可设置信息填写区域图片的显示、隐藏。取值为两个值true以及false，默认为ture即显示。logoImgSrc参数可设置图片路径，默认为nVisual的logo。下图为页面中部信息填写区域配置参数以及配置参数对应的样式。

相关文章：