上节我们成功搞定了左侧项目列表的相关功能。
本节我们来尝试 改版首页右侧。先看下首页右侧目前的样子：
可以看到我们右侧实际上右下方有一片空白可以使用。
所以我准备做个固定底部的矩形遮罩层，作为个人面板。
我们现在去写一个div作为容器，并且写好它的各个css属性
打开Home.html:
可复制：
代码语言：javascript复制<div style="background-color: #eefaff;min-height: 100px;width:-webkit-calc(100% - 340px);
margin-left: 342px;position: fixed;bottom: 0px;box-shadow: -4px -4px 8px #e3e3e3;padding: 10px">
</div>
在这个效果中，大家之后可以随意更改，教程主要是把功能实现。
然后我们想一想这个人看板中 放一些什么比较好，使用者比较关系的呢？
这里给大家提供几个思路：
- 数字看板：用户所拥有的项目总数/接口总数/用例总数等
- 图形看板：用饼形图 条形图 来直观显示下总数的情况
- 通知看板：目前需要用户紧急处理的任务或通知(比如我们之后做的 各种权限审核，组概念加入，x用例运行请求，甚至是个人留言等)
- 个人空间等链接：后期做好个人空间后，这里也可以放入进入的快速传送门，个人空间可以放置自己所属项目的所有word格式的正式用例测试报告。
本节我们先来搞定一个数字看板，显示各种总数的功能：
红圈内为第一个小看板，复制如下：
代码语言：javascript复制<div style="background-color: #eefaff;min-height: 100px;width:-webkit-calc(100% - 340px);
margin-left: 342px;position: fixed;bottom: 0px;box-shadow: -4px -4px 8px #e3e3e3;padding: 10px">
<div style="width: 120px;height: 80px;background-color: #105f72;border-radius: 5px;color: white;padding: 3px;font-size: small">
当前项目数: <span>{{ count_project }}</span> <br>
当前接口数: <span>{{ count_api }}</span> <br>
当前用例数: <span>{{ count_case }}</span> <br>
当前报告数: <span>{{ count_report }}</span>
</div>
</div>效果如下：
我们这里准备当用户进入这个首页的时候，就自动带进来4个字段。count_***** 所以我们现在去views.py中找到child_json，来添加这个4个字段。
如上图，因字段较多且最终res有分支，而且后期还有很多新的个人看板字段，所以这里我们就新声明了一个new_res用来存放个人看板的东西，然后在最后，我们把它更新到res上即可。这样做可以少写很多代码。
然后我们要实现这个4个字段具体是多少的问题，他们分别是：
个人项目数/接口数/用例数/报告数。其中word报告数我们并没有进行开发，所以这里会写死一个空。等待后续实现。
其他代码如下：
# 个人数据看板
new_res = {
"count_project":len(user_projects) ,
"count_api": sum([ len(DB_apis.objects.filter(project_id=i.id)) for i in user_projects]) ,
"count_case": sum([len(DB_cases.objects.filter(project_id=i.id)) for i in user_projects] ),
"count_report": '',
}大家不要被这 超长的 代码行给 吓到了，在python里，是可以这样写来节省空间的，大家想看懂可以从中间部分下手，一点点推倒出来。
效果如下：
我经过自行验证，数量完全正确哦～
好了 今天的内容到此为止～
