今天完成的事：师弟demo，跟ui调样式。

明天计划的事：样式调完，如无其他问题则写新需求。

困难：

1.早上研究了下百度脑图，结果还是不会用，龚浩去做了。

2.跟ui调样式很多地方牵一发动全身，而且问题有些多，调的有些小纠结；

收获：

主要写下今天解决的几个小问题：

1.ui妹妹说要加个点击效果，即选中的该任务时背景颜色改变，这个地方如果直接给border的元素加背景，会产生覆盖，用z-index也无效，因为中间波纹效果无法加z-index，后来直接给canvas加背景色：

//点击时显示点击效果
for (var i = 0; i < vm.userTaskData.length+1; i++) {
    $('canvas').eq(i).css({'background-color': 'transparent'});
}
$('canvas').eq(index + 1).css({'background-color': '#ccffed'});

2.这个地方是ui大改了次，都得重新写下结构，主要是下面进度条的展示，这个是按任务的总数来计算的（比如有10个任务，第一个任务代表10%，此后依次递增10%），需要解决两个问题，第一是计算当前职业有多少个任务，每个任务占的百分比，第二是如何展示该任务的进度。第一个问题很好解决，第二个问题，最开始想在html里面用类似下面写法来实现：

style="font-size: 14px;height:{{vm.newHeight}}+px;line-height:{{vm.newHeight}}+px;">

后来发现并不行，于是在做完的任务里直接塞了一个新值‘listPro’来表示该任务的进度：

for (var i = 0; i < vm.list.length; i++) {
    vm.list[i].listPro = (1 / vm.list.length) * 100 * (i + 1) + '%';
    //每个任务所占比例
}

html里面ng-repeat出来的时候直接输出该任务的进度（父元素固定宽度，里面进度用百分比）：

<div class="step-part-progress">
    <i class="step-progress-bar"
       style="width:{{li.listPro}}"></i>
</div>

3.这个地方刚改完进度条时和左边全部错位了，后来发现因为进度条的结构改变，下面这个判断加错了地方，于是左边元素并未完全隐藏，会撑开右边的圆圈：

ng-hide="!vm.userProgress[li.id].judgeAt"