项目实训2：项目的整体搭建

首先进行效果展示

整体结构是：上边栏，左右工具栏，和中间的画布。
本周的总体任务是完成上边栏的绘制和整体框架的实现，以及中间画布各种事件的注册以及实验。

上边栏的制作

左边的组件设定为logo，不过由于目前没有设计，所以暂时先拿vue的图标来替代
右边分为两层
上边是思维导图标题，设想可以很轻易的直接修改
下边是功能栏，均为下拉菜单，因为功能较为独立，且代码较长，我将其封装成一个单独的vue component。之后的各种事件设计为父子组件之间的通信。下拉菜单的各项功能还未进行填充，所以进行了留白。

工具栏由于iconfont网站暂时无法进入而暂时进行了一些搁置。

中间整体部分的设计

使用element中的el-container将中间部分分为三部分。并计划在之后进行一些拓展（拉住一段的边框而进行拓展）
暂时将两个aside的宽度设为一致。
中间的部分是一个canvas，是我们的画布，也是该软件设计的灵魂。
由于el-main对超出部分的滑动条展示不是很美观。使用el-scrollbar进行美观。同时隐藏它自带的滑动条。前后效果展示
在这里插入图片描述