死磕大屏UI，FineReport开发日记

目录

前言:

一、第一版

二、第二版

1、改进效果

2、更改下拉框的UI的方法

三、第三版

前言:

        果然为人民服务是无限的，当我开发完一个实用大屏时，领导想给它升华下，成为对外交流的入口。哇，一下子格局打开了，然而服务也开始了。首先向领导申请了预算，找专业UI公司来设计并辅助大屏落地。所以我就开始死磕每一个细节，不允许有一个细节被放过。这次我们就讨论其中的一个点，看我是怎么死磕一个下拉框的设计和实现的。

一、第一版

         如图所示，这个是个基地层面的看板，对应下拉框为白底黑字，没做圆角处理等。

二、第二版

1、改进效果

         因第一版是report的默认配色，因这个一般查询按钮是会放在一个查询区的，但是大屏寸土寸金就没新增查询区来单独处理查询框，第二版做了圆角处理，背景色设置为透明，字体统一为微软雅黑的白色字，然后对应中间的车间、型号、车间+型号的tab块选项卡也做了统一处理，整体效果好了一层，但是对应那个蓝色的下拉框想设置为透明的，只有里面的三角形为白色。暂时自己还没研究出来怎么实现。

2、更改下拉框的UI的方法

1）浏览器预览报表，这里以 Chrome 浏览器为例。

2）将鼠标放在需要查看 class 的控件上，右键选择「检查」，即可查看到该控件的 class 语句。如下图所示：

        选择其中一个下拉框控件，添加JS事件。 

 代码：

setTimeout(function() {

	$(".fr-trigger-texteditor").css({
		'background-color': '#424242'
	});//更改背景色
	$(".fr-trigger-texteditor").css({
		'color': 'white'
	});//更改字体颜色为白色

	$(".fr-trigger-texteditor").css({
		'border-top-left-radius': '1.5px'
	});//左上角添加圆角
   	$(".fr-trigger-texteditor").css({
		'border-bottom-left-radius': '1.5px'
	});//左下角添加圆角
	  	$(".fr-trigger-texteditor").css({
		'border': '0.1px'
	});//边框为0.1px
  
}, 100)

三、第三版

        更改边框颜色为淡蓝色，更改下拉框颜色为透明色，这样整个下拉框看起来比较精致了。当然这不是最终版的，还得死磕。。哈哈哈。生命在于折腾。你如果有更好的设计欢迎一起死磕。