0
点赞
收藏
分享

微信扫一扫

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

非常帅气的昵称吧 2022-03-16 阅读 86

首先进行效果展示
在这里插入图片描述
整体结构是:上边栏,左右工具栏,和中间的画布。
本周的总体任务是完成上边栏的绘制和整体框架的实现,以及中间画布各种事件的注册以及实验。

上边栏的制作

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

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

中间整体部分的设计

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

举报

相关推荐

项目实训(三)

项目实训六

项目实训-杨桃

项目实训(2)- token等功能

项目实训-不死僵尸

项目实训-小鬼僵尸

SDUCSRP项目实训一

项目实训-读报僵尸

项目实训-火爆辣椒

0 条评论