菜单

nVisual主题二次开发说明

下载

在nVisual系统中,目前有9套主题,经过大量的试验和开发,形成了一套快速便捷的开发方式。今天主要讲解nVisual系统主题的二次开发流程。

1.路径及文件格式

在nVisual系统中,在src路径下有一个theme文件,所有主题相关的代码都在这个文件夹下,结构如下所示。在theme文件夹下,每一个主题都会存放在一个与主题名称相关的文件夹下。所以如果需要增加主题,需要在theme文件夹下创建新的文件夹用来保存新的主题代码。

2.添加文件引用

在theme文件夹下有一个index.js文件,里面包含了主要的逻辑代码,如果需要添加新主题,需要在themeMap对象中添加新的引用,如下所示。

​当设置主题的代码执行时, 会检索对应主题的名字寻找对应的主题文件,对该主题文件的css进行加载进而完成主题的设置。

3.主题变量维护讲解

为了快速开发及方便维护主题,nVisual系统中设置了一个styl文件来保存所有有关主题的变量,在修改相关变量即可完成主题的开发迭代工作,极为的方便迅速。以下是该文件的主要说明,进行了详细的代码注释。包括主题主颜色、首页部分、模型库等列表部分、建模部分、报表部分等等。只需要修改其中变量即可快速迭代。

css 复制代码
// 存放定义的该主题color
// 边框颜色
$globalBorderColor = #DDDDDD
// 主题主体色
$themeColor = #CBD3D6
// 主要下划线颜色
$underlineColor = #FF8400

// 首页部分

// 最上层logo行
// hover时文字及底边框颜色
$mainMenuListHoverC = #fff
// 背景色
$menuBodyBcColor = #F2F4F7
// 文字颜色
$menuBodyTextColor = #606060
// 一级菜单背景颜色
$level1menu = $themeColor
// 一级菜单选中及hover时文字颜色
$level1TextColor = #000
// 二级菜单背景颜色
$level2menu = $menuBodyBcColor


// 面包屑最后一个背景颜色
$aminbcColor = $menuBodyBcColor
// 最后一个面包屑文字颜色
$aminbTextColor = #000000
// 左侧最上层tab背景色
$mainLeftViewTabBcC = #F2F4F7
// 左侧tab选中时文字颜色
$mainLeftViewTabC = #000000
// 左侧tab选中时底边框颜色
$mainLeftViewTabBorderC = #FF8400
// 左侧模型hover时边框颜色
$dropItemBorderC = #FF8400
// 左侧模型选择框选中时背景色
$dropItemCheckedC = #FF8400
// 左侧导航标题文字颜色
$paneHeaderColor = #383838
// 左侧导航树背景色
$paneBodyBcColor = #F8F9F9
// 左侧导航树文字颜色
$paneBodyTextColor = #636363
// 底部栏背景颜色
$statusBarBcColor = #D2D4D8
// 底部栏百分比文字颜色
$statusBarPercentageC = $themeColor
// 中间画布背景色
$rulerFrameBcColor = #F8F9F9
// 弹窗标题文字颜色
$dialogTitltTextColor = #3B3B3B
// 组合视图及映射标题文字颜色
$secondaryViewTextColor = #4F5D79
// 属性设置选中文字颜色
$detailPropertyTextC = $level1TextColor
// 属性设置选中下边框颜色
$detailPropertyBorderBoC = $underlineColor
// 映射中小方块颜色
$blockColor = #4F5D79
// 视图设置标题文字颜色
$pageSetTitleTextColor = #3B3B3B
// 视图设置单选框选中时颜色
$pageSetElCheckedColor = #FF8400
// 图层设置标题文字颜色
$coverageTitleTextColor = #4F5D79
// 图层设置单选框的边框及选中时颜色
$coverageElCheckedColor = #08A170
// 选则地图标题文字颜色
$mapTypeTiTleTextColor = #08A170
// 地图选中时边框颜色
$mapCheckedBordercolor = #08A170
// 地图选中时右下角矢量或者卫星背景色
$mapCheckedLabelBcColor = #08A170
// 鼠标hover地图选项时边框颜色
$mapHoverBorderColor = #4F81FF
// 更改密码输入框focus颜色
$inputPassFocusC = #FF8400
// 最右侧小栏条背景色
$toolButtonBC = #F2F4F7
// 最右侧小栏条选中时icon及左边框颜色
$toolButtonC = #FF8400
// 最右侧详细视图的header背景色
$secondaryViewHeaderBC = #F8F9F9


// 模型库列表部分

// 左侧导航选中时icon及右边框颜色
$modelLibraryActive = #FF8400
// 左侧导航背景色
$modelLibraryTabsBC = #F2F4F7
// 自定义比例拾取背景色
$customScaleBcColor = #FF8400

// 建模部分

// 左侧表格tab活跃背景色
$propertyTabIsactiveBcColor = #F7F8FA
// 左侧表格活跃底边框颜色
$propertyTabIsactiveBC = #ff8400
// 左侧表格活跃文字颜色
$propertyTabIsactiveTextC = #000
// 左侧表格tab不活跃背景色
$propertyTabBcColor = #E5E5E5
// 左侧表格背景色
$propertyTableBcColor = #F7F8FA
// 左侧表格标题文字颜色
$propertyTableTextColor = #262E3E
// 左侧表格输入框文字颜色
$propertyTableInputColor = #333B4A
// 左侧input表格边框颜色
$propertyInputBColor = #E5E5E5

// 报表部分

// 左侧导航header背景色
$reportHeaderBc = #E1E4E8
// 左侧树的背景色
$reportTreeBc = #F8F9F9
// 左侧树标题文字颜色
$reportTreeTitleC = #353535
// 左侧树字体颜色
$reportTreeTextC = #727272
// 左侧树选中及hover背景色
$reportTreeActiveBc = #E9E9E9
// 左侧树选中及hover右边框颜色
$reportTreeActiveBorderC = #FF8400
// 左侧导航footer背景色
$reportFooterBc = #EDEFF1
// 左侧导航footer文字颜色
$reportFooterTextC = #474747
// 弹窗部分
// 弹窗标题文字颜色
$reportDialogTitleC = #3B3B3B
// 取消按钮背景色
$reportDialogCancelBc = #fff
// 取消按钮文字颜色
$reportDialogCancelTextC = #676767
// 取消按钮边框颜色
$reportDialogCancelBorderC = #D7D9DE
// 确定按钮背景色
$reportDialogCofirmBorderC = #EEAE3E
上一个
App语言切换及添加语种开发说明
下一个
rfid标签打印开发指导
最近修改: 2025-01-10