DEMO解析第五期：领导驾驶舱之保险行业

复制链接 | 收藏本帖

7536

楼主

一、页面分析
1、整体简介

主题表：使用rand()函数产生随机数

页面结构：宽百分比，高固定920px

页面一览：

2、模块详解
1) 整体概况

主要由容器、文本组件组合而成，容器用于排版和添加背景图片，文本用于显示指标名称和值。

整个构图如下图所示：绿色区域的四个容器均居中显示，其中中间两个容器内又添加了两个容器，分别居左和居右。因此实现了构图的左右对称形式。

2) 按渠道

面积图是按渠道展示了保费收入和已赚保费这两个指标。

面积图的填充颜色设置了一定的透明度，展示效果棒棒哒。

3) 按业务来源

此区域分别显示了按保费收入和综合成本率来排序的前5种业务来源。

保费收入TOP5是以表格的形式展现的，“业务来源”为维表元，设置按保费收入降序排列显示前5行。同时展现了已赚保费和承保利润这两个指标。

综合成本率TOP5也是使用的表格组件，其中在表格中加入了迷你占比图。

4) 按险类

该模块使用了4个环饼图突出了4种险类的占比情况。

环饼图的占比部分有加宽的效果，制作方法是：环的内外分别增加了1个系列，置灰的部分使用白色，因此和白色的底融为一体，就使百分比部分有了加宽的效果。

二、脚本说明
脚本1：更改滚动条样式

脚本中引用了js脚本文件，文件的存储在资源管理器中(路径为：vfs/root/demojs/slimscrollbody.js)。

//更改滚动条样式
addStyleSheet("#BODYAREA{overflow:hidden !important}");
addStyleSheet(".scrollBarContainerClass{width:10px !important;}");
addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#DADADA !important;}");
include("vfs/root/demojs/slimscrollbody.js");

复制代码

三、配色信息

底色：#FFFFFF

标题：#76777716px

边框：#E5E5E5

文字：#59616B

整体概况

文字：#FFFFFF

面积图

填充：#FFDC68（橙色），#95CDFF（蓝色）（透明度：30）

坐标轴/网格线：#ECECEC

提示信息： #A9ADB3（背景），文字：#FFFFFF 12px