mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-10 03:16:46 +08:00
455 lines
13 KiB
Vue
455 lines
13 KiB
Vue
<template>
|
||
<div class="faceteach">
|
||
<TitleHead text="【其他活动】核心项目面授课"></TitleHead>
|
||
<div class="main">
|
||
<div class="title">
|
||
<div class="titlemain">
|
||
<div class="timeposition">
|
||
<div class="time">
|
||
<img
|
||
style="width: 13px; height: 14.5px; margin-right: 5.5px"
|
||
src="../../assets/image/faceteach/time.png"
|
||
/>
|
||
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
|
||
2022-07-20 20:00-21:00
|
||
</div>
|
||
</div>
|
||
<div class="time" style="margin-top: 9px">
|
||
<img
|
||
style="width: 13px; height: 15px; margin-right: 5.5px"
|
||
src="../../assets/image/faceteach/position.png"
|
||
/>
|
||
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
|
||
大族广场
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
|
||
<script>
|
||
import { reactive, toRefs } from "vue";
|
||
import TitleHead from "@/components/TitleHead.vue";
|
||
export default {
|
||
name: "FaceTeach",
|
||
components: {
|
||
TitleHead,
|
||
},
|
||
setup() {
|
||
const state = reactive({
|
||
activeName: "first",
|
||
enclosure: [
|
||
{
|
||
id: 1,
|
||
name: "项目参考文档.doc",
|
||
img: require("../../assets/image/file/word.png"),
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "人工智能启蒙讲解讲义.pptx",
|
||
img: require("../../assets/image/file/ppt.png"),
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "人工智能启蒙讲解讲义.xlsx",
|
||
img: require("../../assets/image/file/excel.png"),
|
||
},
|
||
],
|
||
teacher: [
|
||
{
|
||
id: 1,
|
||
name: "王星天（显示事业）",
|
||
introduce: "教师是学生的镜子,学生是老师的影子。",
|
||
peopleimg: require("../../assets/image/img.jpg"),
|
||
medal: [
|
||
require("../../assets/image/medal/medal1.png"),
|
||
require("../../assets/image/medal/medal2.png"),
|
||
require("../../assets/image/medal/medal3.png"),
|
||
],
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "王星天（显示事业）",
|
||
introduce: "教师是学生的镜子,学生是老师的影子。",
|
||
peopleimg: require("../../assets/image/img.jpg"),
|
||
medal: [
|
||
require("../../assets/image/medal/medal1.png"),
|
||
require("../../assets/image/medal/medal2.png"),
|
||
],
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "王星天（显示事业）",
|
||
introduce:
|
||
"教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。",
|
||
peopleimg: require("../../assets/image/img.jpg"),
|
||
medal: [
|
||
require("../../assets/image/medal/medal1.png"),
|
||
require("../../assets/image/medal/medal2.png"),
|
||
require("../../assets/image/medal/medal3.png"),
|
||
],
|
||
},
|
||
],
|
||
});
|
||
const handleClick = (tab, event) => {
|
||
console.log(tab, event);
|
||
};
|
||
return {
|
||
...toRefs(state),
|
||
handleClick,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
<style lang="scss">
|
||
.faceteach {
|
||
width: 100%;
|
||
padding-bottom: 20px;
|
||
.main {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: -14.5px;
|
||
.title {
|
||
width: 90%;
|
||
height: 74px;
|
||
border-radius: 4px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
.titlemain {
|
||
width: 90%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.timeposition {
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.titlebtn {
|
||
width: 83px;
|
||
height: 33px;
|
||
background: #2478ff;
|
||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 12px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.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>
|