农技课堂.md 1.2KB
package-a/agri-classroom/index.vue 编写页面
布局分为上下 2个部分
上部分 固定在上面 第一行 搜索框 up-search 占位符 搜索您要找的农技课程 第二行 up-tabs [视频课程, 实战培训] 第三行 对应tabs的子集 分别是 视频课程 - [繁育工作, 疾病防治, 繁育技术, 政策解读] 默认选中 繁育工作 , 实战培训 - [未开始, 报名中, 已报满, 已截止] 默认选中 报名中 第三行布局样式 圆角线框 默认灰色，选中后线框 文本颜色是绿色
下部分 虚拟列表 up-virtual-list 列表分为 视频课程 实战培训 2个样式文本不同
视频课程 一行 2个 views 每个views间隔 20rpx views 分为 上中下 上 up-lazy-load 图片点击图片放大，中 标题 字体大 黑色，下 对应的 视频课程下的 选中的 [繁育工作, 疾病防治, 繁育技术, 政策解读] + YYYY-MM-DD 日期 字体小 灰色
实战培训 一行 2个 views 每个views间隔 20rpx views 分为 上中下 上 up-lazy-load 图片点击图片放大，中 标题 字体大 黑色，下 对应的 实战培训下的 选中的[未开始, 报名中, 已报满, 已截止] 加上 account-fill up-icon + 当前报名人数 / 总人数