Harmony在线教育app平台开发开发日志—

教育平台首页开发

本日任务主要为完成首页的展示内容首页主要分为以下几个部分
1.搜索栏部分

hml设计部分

<div class="search"><input type="text" maxlength="20" headericon="common/icon/search.png" placeholder="请输入搜索关键字"></input></div>

2.滚动图片栏

hml设计部分

<div class="rotation"><swiper index="0" indicator="true" autoplay="true" loop="true" digital="false" cachedsize="-1" scrolleffect="spring"><div for="{{swiperImages}}"><image src="{{$item}}"/></div></swiper></div>

3.索引栏

hml设计部分

 <div class="quick-entry"><div onclick="forward{{$item.url}}" for="{{quickStart}}"><image src="{{$item.icon}}"></image><text>{{$item.name}}</text></div></div>

4.明星班级内容

hml设计部分

 <div class="see-more"><text>明星班级</text><div><text>查看更多</text><image src="common/icon/ge.png"></image></div></div><div class="hot-classes"><div for="{{classes}}"><div class="class-cover" style="background-image: url('{{$item.cover}}');"></div><div class="class-detail"><text>{{$item.className}}</text><div><text>班主任:{{$item.teachers[0]}}</text><text>人数:{{$item.studentNum}}</text></div></div></div></div>

5.热门课程内容

hml设计部分

   <div class="see-more"><text>热门课程</text><div><text>查看更多</text><image src="common/icon/ge.png"></image></div></div><div class="hot-course"><div for="{{courses}}"><div class="course-cover" style="background-image: url('{{$item.cover}}');"><rating numstars="5" rating="{{$item.score}}"></rating><div><text>{{$item.studyNum}}人正在学习中</text></div></div><div class="course-detail"><text>{{$item.courseName}}</text><div><text>课时:{{$item.classHour}}</text><text>讲师:{{$item.teacher}}</text></div></div></div></div>

整体效果展示

hml代码部分

<div class="container"><div class="search"><input type="text" maxlength="20" headericon="common/icon/search.png" placeholder="请输入搜索关键字"></input></div><div class="rotation"><swiper index="0" indicator="true" autoplay="true" loop="true" digital="false" cachedsize="-1" scrolleffect="spring"><div for="{{swiperImages}}"><image src="{{$item}}"/></div></swiper></div><div class="quick-entry"><div onclick="forward{{$item.url}}" for="{{quickStart}}"><image src="{{$item.icon}}"></image><text>{{$item.name}}</text></div></div><div class="see-more"><text>明星班级</text><div><text>查看更多</text><image src="common/icon/ge.png"></image></div></div><div class="hot-classes"><div for="{{classes}}"><div class="class-cover" style="background-image: url('{{$item.cover}}');"></div><div class="class-detail"><text>{{$item.className}}</text><div><text>班主任:{{$item.teachers[0]}}</text><text>人数:{{$item.studentNum}}</text></div></div></div></div><div class="see-more"><text>热门课程</text><div><text>查看更多</text><image src="common/icon/ge.png"></image></div></div><div class="hot-course"><div for="{{courses}}"><div class="course-cover" style="background-image: url('{{$item.cover}}');"><rating numstars="5" rating="{{$item.score}}"></rating><div><text>{{$item.studyNum}}人正在学习中</text></div></div><div class="course-detail"><text>{{$item.courseName}}</text><div><text>课时:{{$item.classHour}}</text><text>讲师:{{$item.teacher}}</text></div></div></div></div>
</div>

css代码部分

.container {flex-direction: column;align-items: center;width: 100%;
}
.search{width: 100%;justify-content: center;border-top: 10px solid white;
}
.search input{width: 95%;}
.rotation{width: 100%;justify-content: center;border-top: 10px solid white;
}
.rotation swiper{width: 95%;height: 130px;flex-direction: column;align-content: center;align-items: center;indicator-bottom: 4px;indicator-right: 30px;indicator-selected-color: black;
}
.rotation swiper>div{height: 100%;justify-content: center;
}
.quick-entry{width: 100%;border-top: 10px solid white;justify-content:space-around;
}
.quick-entry>div{width: 48px;flex-direction: column;justify-content: center;
}
.quick-entry>div>image{width: 48px;height: 48px;
}
.quick-entry>div>text{width: 48px;font-size: 14px;text-align: center;
}
.see-more{width: 94%;padding-bottom: 10px;justify-content: space-between;align-items: center;border-top: 10px solid white;
}
.see-more text{font-size: 18px;
}
.see-more div{height: 20px;}
.see-more>div>text{font-size: 14px;color: #969696;
}
.see-more>div>image{width: 12px;height: 12px;
}
.hot-classes{width: 94%;flex-wrap: wrap;justify-content: space-between;align-items: center;
}
.hot-classes>div{width: 48%;height: 130px;flex-direction: column;
}
.class-cover{width: 100%;height: 75px;background-size: cover;background-repeat: no-repeat;border-top-left-radius: 5px;border-top-right-radius: 5px;
}
.class-detail{width: 100%;flex-direction: column;
}
.class-detail>text{width: 100%;height: 28px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.class-detail>div{width: 100%;font-size: 12px;color: #BDBDBD;justify-content: space-between;
}
.class-detail>div>text
{font-size: 14px;color: #969696;
}
.hot-course{width: 94%;flex-wrap: wrap;justify-content: space-between;margin-bottom: 45px;
}
.hot-course>div{width: 32%;height: 180px;flex-direction: column;
}
.course-cover
{width: 100%;height: 90px;background-size: cover;background-repeat: no-repeat;border-radius: 5px;
}
.course-cover>rating{width: 75px;height: 14px;
}
.course-cover>div{top: 70px;width: 100%;height: 20px;position: absolute;background-color: #080808;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;
}
.course-cover>div>text{width: 100%;height: 28px;font-size: 12px;text-align: center;color: white;
}
.course-detail{width: 100%;flex-direction: column;
}
.course-detail>text{width: 100%;height: 28px;font-size: 14px;overflow: hidden ;text-overflow: ellipsis;white-space: nowrap;
}
.course-detail>div{width: 100%;font-size: 12px;color: #BDBDBD;justify-content: space-between;
}
.course-detail>div>text{font-size: 14px;color: #969696;
}

js代码部分

export default {data: {swiperImages: ['common/UploadFile/swiper1.jpg','common/UploadFile/swiper2.jpg','common/UploadFile/swiper3.jpg','common/UploadFile/swiper4.jpg','common/UploadFile/swiper5.jpg'],quickStart: [{name: '课程',icon: 'common/icon/course-icon.png',url: 'pages/courses/courses'}, {name: '班级',icon: 'common/icon/class-icon.png',url: 'pages/classes/classes'}, {name: '测评',icon: 'common/icon/test-icon.png',url: 'pages/evaluations/evaluations'}, {name: '培训',icon: 'common/icon/train-icon.png',url: 'pages/trains/trains'}, {name: '群组',icon: 'common/icon/group-icon.png',url: 'pages/groups/groups'}],classes: [{"id": 3,"className": "Vue.js 内训班","createTime": null,"cover": "common/UploadFile/class3.jpg","signature": null,"isPrivate": 0,"teachers": ["江伟峰"],"studentNum": 53},{"id": 1,"className": "Java 高薪进阶班","createTime": null,"cover": "common/UploadFile/class1.jpg","signature": null,"isPrivate": 0,"teachers": ["陈瑜"],"studentNum": 40},{"id": 4,"className": "Python 初级班","createTime": null,"cover": "common/UploadFile/class4.jpg","signature": null,"isPrivate": 0,"teachers": ["江伟峰"],"studentNum": 40},{"id": 2,"className": "C/C++ 嵌入式培训班","createTime": null,"cover": "common/UploadFile/class2.jpg","signature": null,"isPrivate": 0,"teachers": ["樊乐"],"studentNum": 30}],courses: [{"cover": "common/UploadFile/kecheng1.jpg","score": 5.0,"courseName": "Java 从入门到精通","teacher": "周卓","studyNum": 3,"classHour": "48","id": 1}, {"cover": "common/UploadFile/kecheng2.jpg","score": 4.8,"courseName": "Spring Boot 编程思想","teacher": "陆超","studyNum": 1,"classHour": "64","id": 2}, {"cover": "common/UploadFile/kecheng3.jpg","score": 3.6,"courseName": "Spring Cloud 微服务实战","teacher": "夏德旺","studyNum": 1,"classHour": "120","id": 3}, {"cover": "common/UploadFile/kecheng4.jpg","score": 4.2,"courseName": "前端网页设计","teacher": "李晓晴","studyNum": 1,"classHour": "24","id": 4},{"cover": "common/UploadFile/kecheng5.jpg","score": 3.8,"courseName": "深入浅出 Vue.js","teacher": "邹波","studyNum": 1,"classHour": "24","id": 5},{"cover": "common/UploadFile/kecheng6.jpg","score": 3.6,"courseName": "深入浅出 Vue.js","teacher": "邹波","studyNum": 4,"classHour": "24","id": 6}]},onInit() {this.title = this.$t('strings.world');},

Harmony在线教育app平台开发开发日志——day8相关推荐

在线教育APP小程序系统开发教培行业一站式解决方案
移动互联网如今已经深入到我们生活的方方面面,教育行业也不例外.如今市面上的在线教育APP小程序系统开发大受欢迎,很多学校.培训机构等都争相开发应用软件,以求通过全新的模式来满足不断扩大的市场需求,为用 ...
js动态创建两个div 把其中一个添加到另一个的里面_我开发了一个鸿蒙在线教育APP！...
鸿蒙 2.0 已经发布了有段时间了,目前网上也有些小 demo 了,但是缺乏稍微大点的项目代码. 我准备计划开发一个稍微正式点的项目,我写了个初略的项目需求清单,来体验鸿蒙应用开发. 目前我已经着手实 ...
在线教育APP开发功能需求有哪些？
在线教育APP开发功能需求有哪些? 1.教学功能教学是在线教育APP的核心功能,通常用视频或音频方式表现,这可以是录制好的音视频资源,学生可以随时观看或下载,还有一种方式就是在线直播课堂,学生按照时 ...
教育培训源码：在线教育app开发需要具备的四点特性
不管是开发什么领域的app都有一系列繁琐的开发步骤以及注意事项. 在线教育app开发也不例外,作为教育机构而言,在开发在线教育app的时候往往需要具备以下四点: 1.在线录播回看在线教育app开发需 ...
如何进行在线教育app开发
当国内大学开始为学生进行在线教育app开发时,大学的移动开发团队需要专注于一个概念:以学生为主进行设计.在线教育app开发团队可以从其他行业的创新和成功的在线教育app开发中获取线索,包括Facebo ...
node.js毕业设计安卓在线教育APP（程序+APP+LW）
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: Node.js+ Vscode +Mysql5.7 + HBuilderX+Navicat11+Vue+ ...
在线教育APP带来的价值
目前教育培训行业利用移动互联网进行在线教育,通过教育培训APP开发,将网络教育与线下教育相结合,满足用户在工作之余的时间能随时随地学习.然而,随着培训行业的利润增长,行业的竞争变得越来越激烈.如何利用 ...
分析报告 | 在线教育APP的市场到底有多大？
转自:http://www.chanpin100.com/article/105177 学习与进修已经成为伴随现代人终生的需求.在移动互联网开始普及以来,移动在线教育因其对碎片化时间的良好利用以及使用 ...
如何打造有特色的在线教育培训平台
去年7月中旬,教科文组织针对新冠疫情对高等教育造成的影响所做的一份调查显示,新冠大流行对教学的主要影响是在线教育的增加,混合教学模式已经成为最流行的形式. 在这两年的教育行业新热词中,"OM ...

Harmony在线教育app平台开发开发日志——day8

教育平台首页开发

Harmony在线教育app平台开发开发日志——day8相关推荐

最新文章

热门文章