hz/student-h5
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git synced 2025-12-10 11:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:合并

Browse Source
This commit is contained in:
李晓鸽
2022-09-27 14:56:23 +08:00
parent 98fb3e963d e480b03f02
commit 4ebbf2f966
21 changed files with 1889 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
src/views/faceteach/FaceTeach.vue
View File

@@ -27,6 +27,127 @@
<div class="titlebtn">评估</div>
</div>
</div>
<div class="teacher">
<div style="width: 90%">
<div class="teachertitle">
<img
style="width: 17px; height: 17px"
src="../../assets/image/faceteach/livelecturer.png"
/>
<div class="talk">直播讲师</div>
<div class="box"></div>
</div>
<div class="teachermain">
<img class="teacherAvatar" src="../../assets/image/img.jpg" />
<div style="flex: 1; margin-left: 11px; margin-right: 13px">
<div class="teacherName">王星天（显示事业）</div>
<div class="teacherIntro">
教师是学生的镜子,学生是 老师的影子。
</div>
</div>
<div class="teacherFollow">+ 关注</div>
</div>
</div>
</div>
<div class="detail">
<div style="width: 90%">
<div class="teachertitle">
<img
style="width: 17px; height: 17px"
src="../../assets/image/faceteach/livelecturer.png"
/>
<div class="talk">课程详情</div>
<div class="box"></div>
</div>
<div class="detailMain">
通过对各级人员的软件平台培训，使其能够了解如何
运用乾元坤和智能信息管理系统来提升企业管理水平
最大限度发挥软件产品在企业中的作用。<br />
1.使企业不同部门人员掌握便捷、有效的系统平台操 作方法;<br />
2.通过系统平台的培训提高员工对企业的管理理念认 识与提升。<br />
3.通过系统平台培训加强沟通，统一部署，协同工作 提高效率。
</div>
</div>
</div>
<div class="course">
<div style="width: 100%">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="课程附件" name="first">
<div
v-for="(el, index) in enclosure"
:key="el.id"
class="enclosure"
:style="{
'border-bottom':
index === enclosure.length - 1
? null
: '1px solid rgba(56, 125, 247, 0.2)',
}"
>
<div class="enclosureL">
<img style="width: 19.5px; height: 22px" :src="el.img" />
<div style="margin-left: 15px">{{ el.name }}</div>
</div>
<div class="download">
<img
style="width: 13px; height: 12px"
src="../../assets/image/faceteach/download.png"
/>
<div style="margin-left: 2.5px">下载</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="课程作业" name="second">
<div class="work">
<div class="question">社交产品如何做好模块化处理？</div>
<div style="display: flex; justify-content: space-between">
<div
style="
margin-top: 16px;
flex: 1;
display: flex;
flex-wrap: wrap;
"
>
<div class="tag1" style="margin: 0px 10px 10px 0px">
必修
</div>
<div class="tag3" style="margin: 0px 10px 10px 0px">
作业
</div>
</div>
<div class="submit">提交</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="课程考试" name="third">
<div class="work">
<div class="question">
模块化产品展示相关案例与展示：如何自由组合你的 思考？
</div>
<div style="display: flex; justify-content: space-between">
<div
style="
margin-top: 16px;
flex: 1;
display: flex;
flex-wrap: wrap;
"
>
<div class="tag1" style="margin: 0px 10px 10px 0px">
必修
</div>
<div class="tag3" style="margin: 0px 10px 10px 0px">
作业
</div>
</div>
<div class="submit">提交</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
</template>
@@ -110,10 +231,12 @@ export default {
<style lang="scss">
.faceteach {
width: 100%;
padding-bottom: 20px;
.main {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: -14.5px;
.title {
width: 90%;
@@ -150,6 +273,182 @@ export default {
}
}
}
.teachertitle {
width: 90px;
position: relative;
display: flex;
align-items: center;
margin-top: 21px;
.talk {
font-size: 14px;
font-weight: bold;
color: #333333;
line-height: 12px;
margin-left: 7.5px;
}
.box {
position: absolute;
width: 62.5px;
height: 10px;
right: 6px;
bottom: -4px;
background: rgba(36, 120, 255, 0.15);
}
}
.teacher {
width: 90%;
padding-bottom: 15px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 1);
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
.teachermain {
margin-top: 24px;
display: flex;
justify-content: space-between;
.teacherAvatar {
width: 50px;
height: 50px;
border-radius: 25px;
margin-left: 4px;
}
.teacherName {
font-size: 14px;
font-weight: 600;
color: #394145;
line-height: 21px;
}
.teacherIntro {
font-size: 13px;
font-weight: 400;
color: #394145;
line-height: 21px;
margin-top: 12px;
}
.teacherFollow {
width: 73px;
height: 28px;
background: #2478ff;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 400;
color: #ffffff;
line-height: 12px;
color: #fff;
margin-top: 13px;
}
}
}
.detail {
width: 90%;
padding-bottom: 25px;
background: #ffffff;
border-radius: 4px;
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
.detailMain {
margin-top: 22px;
font-size: 13px;
font-weight: 400;
color: #333330;
line-height: 24px;
}
}
.course {
width: 90%;
// padding-bottom: 15px;
border-radius: 4px;
background: #ffffff;
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
.el-tabs__nav {
width: 90%;
margin-left: 5%;
display: flex;
justify-content: space-between;
}
.el-tabs__item {
height: 50px;
padding: 0px;
font-size: 14px;
font-weight: 500;
line-height: 21px;
padding-top: 15px;
}
.el-tabs__nav-wrap::after {
background-color: rgba(56, 125, 247, 0.2);
}
.el-tabs__header {
margin: 0;
}
.enclosure {
width: 90%;
margin-left: 5%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
.enclosureL {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 400;
color: #677d86;
line-height: 19px;
}
.download {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 400;
color: #2478ff;
line-height: 19px;
}
}
.work {
// margin-left: 51px;
// margin-right: 40px;
padding-bottom: 20px;
width: 90%;
margin-left: 5%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 17.5px;
}
.work .question {
font-size: 13px;
font-weight: 500;
color: #333330;
line-height: 21.5px;
}
.work .submit {
width: 73px;
height: 28px;
margin-top: 16px;
background: #2478ff;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
border-radius: 2px;
font-size: 13px;
font-weight: 400;
color: #ffffff;
line-height: 12px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>