|
上一篇我们介绍了课程总览的页面开发，本篇我们介绍一下师资团队的开发，先看一下我们的原型：
页面一共是分为八个部分，二级页面一般可以复用我们原来的内容针对性的调整样式
1 第一部分搭建
第一部分还是口号的介绍，这个在课程总览里已经搭建好了，我们只需要把具体的效果复制过来就可以
先点击创建页面的图标，创建我们师资力量的页面
切换到页面布局，添加平级菜单，增加我们师资的页面
从课程总览复制对应的组件，修改内容和图片
2 搭建第二部分
第二部分可以复用首页开头部分的效果，将组件复制到页面里，将列的数量修改为4
修改行的背景色
修改内容和图标
3 搭建第三部分
先修改列的数量为3，列间距为32px
设置行的内边距为153px
在第一列里添加普通容器，里边添加图片组件
设置图片组件的布局模式为裁剪填满
设置宽为100%，高为256px
设置圆角
 图片组件下添加文本组件
设置字号、行高、文本颜色
再给普通容器增加一点阴影，增加立体的效果
:root {
margin: 0px 0px 0px;
padding: 0px 0px 16px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.3s ease;
}
效果搭建好之后，将组件复制到第二列和第三列
效果搭建好之后，我们新建一个内置数据表查询，读取我们教师表的数据
先绑定图片组件的图片地址
然后给第一个文本组件绑定教师姓名字段
给第二个文本绑定教师编号字段
4 搭建第四部分
第四部分是一个流程图的效果，我们先将列设置为6
内容我们可以复用第一部分的图标文本组件样式，再添加一个图标组件，设置布局为横向排列，垂直居中
图标改为自定义图标，上传具体的素材
然后复制组件到其他列，修改文本内容
整体效果
|