设计思路

对比友商

结论

MultiEye-Fontend过于简陋，但是由于项目设计的功能点多，排版也比较整洁，想要攻克该问题，最好的解决方法是使用icon，其他色彩，色调，动画，让界面活起来，给用户更舒服的观感

而由于功能点的众多，在排版布局又必须有一个基准，我认为原本的基准没有什么大问题，只需要微调即可

方案

1.在某些重点突出的功能使用一些酷酷的字体

如：

地址：www.iconfont.cn/fonts/detai…

2.根据登录界面设计样式基调

由login界面可知，以暗色与红色为主调，但是这种色调的受众小，在界面展示中应当以部分为主，主体可选用淡红，蓝绿，白色

3.根据基调选择icon

如：

地址：www.iconfont.cn/collections…

如：

地址：www.iconfont.cn/collections…

如：

www.iconfont.cn/collections…

如：单色图标：www.iconfont.cn/collections…

颜色选取:

暗红1：#7a1313

高亮时：#f00

设计举例

老板新需求

把这里的值做成动画累加的

首先我们进行分析，这个值肯定是接口传过来的，我们让一个count从0开始，设置一个定时器进行累加，count等于接口传回的值时，关闭定时器。那么重点在于这个函数什么时候调用，我们必须确保执行这个函数的时候接口是拿到了这个值的

方案： 接口调用完毕的时候调取这个函数即可

我们再来分析，既然要累加，那么万一这个接口传回的值是个几百万呢？如果频率不变的话，得加到猴年马月啊，所以我们需要根据值的大小来定义步频，保障能在指定时间内完工

方案：时长(time) / 频率(rate) * 数字的步长(step)（每 1时间间隔增加的值） = endNum(我们要展示的最终数据)

show() {

    // 最终要显示的数字

    let endNum = this.dashboard.event_count.total;

    // 动画间隔

    let rate = 30;

    // 总时长

    let time = 2000;

    // 步长,数据增加间隔

    let step = endNum / (time / rate);

    // 初始值

    let count = 0;

    let timer = setInterval(() => {
      count = count + step;
      this.dashboard.event_count.total = count.toFixed(0);
      if (count > endNum) {
        //  避免count大于endNum最终数字显示不对
        count = endNum;
        this.dashboard.event_count.total = count;
        // 清空定时器
        clearInterval(timer);
        timer = null;
      }
    }, rate);
  },

事件猎手部分过于简陋，对其进行修改