mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-23 17:55:42 +08:00
518 lines
13 KiB
Vue
518 lines
13 KiB
Vue
<template>
|
|
<div class="faceteach">
|
|
<!-- 面包屑导航 -->
|
|
<div class="crumb">
|
|
<div>课程列表</div>
|
|
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
|
<div style="font-weight: 700">课程详情</div>
|
|
</div>
|
|
<!-- 面包屑导航 -->
|
|
|
|
<!-- 基本信息 -->
|
|
<div class="bascinfo">
|
|
<div style="margin-left: 46px">
|
|
<div class="title">【其他活动】{{ data.offCourseInfo?.name }}</div>
|
|
<div class="time" style="margin-top: 26px">
|
|
<img width="15px" height="17px" src="../../assets/image/time.png"/>
|
|
<div style="margin-left: 8px">{{ data.offCoursePlanInfo.beginTime }}</div>
|
|
</div>
|
|
<div class="time" style="margin-top: 23px">
|
|
<img
|
|
width="16px"
|
|
height="18px"
|
|
src="../../assets/image/position.png"
|
|
/>
|
|
<div style="margin-left: 8px">{{ data.offCoursePlanInfo.address }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn" v-if="data.offCoursePlanInfo.evalFlag && !data.evalFlag">评估</div>
|
|
</div>
|
|
<!-- 基本信息 -->
|
|
|
|
<!-- 详细信息 -->
|
|
<div class="detailinfo">
|
|
<div class="detail">
|
|
<div class="detailT">
|
|
<div class="" style="margin-left: 48px; margin-right: 48px">
|
|
<div class="title">
|
|
<img
|
|
width="20px"
|
|
height="20px"
|
|
src="../../assets/image/course.png"
|
|
/>
|
|
<div class="text">课程详情</div>
|
|
<div class="box"></div>
|
|
</div>
|
|
<div style="display: flex; align-items: center">
|
|
<div class="content" v-html="data.offCourseInfo?.intro"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="detailB">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="课程附件" name="first">
|
|
<div
|
|
v-for="(el, index) in data.offCoursePlanInfo?.attach.split(',')"
|
|
:key="index"
|
|
class="enclosure"
|
|
:style="{
|
|
'border-bottom':
|
|
index === enclosure.length - 1
|
|
? null
|
|
: '1px solid rgba(56, 125, 247, 0.2)',
|
|
}"
|
|
>
|
|
<div class="enclosureL">
|
|
<img
|
|
style="width: 22px; height: 26px; margin-left: 10px"
|
|
:src="{pdf,word,ppt,zip,excel}[el.split('.').slice(-1)]"
|
|
/>
|
|
<div style="margin-left: 20px">{{ el }}</div>
|
|
</div>
|
|
<div class="download">
|
|
<img
|
|
style="width: 16px; height: 15px"
|
|
src="../../assets/image/download.png"
|
|
/>
|
|
<div style="margin-left: 5px" @click="download(el)">下载</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="课程作业" name="second">
|
|
<div class="work">
|
|
<div>
|
|
<div class="question">{{data.workItem.name}}</div>
|
|
<div style="margin-top: 16px; display: flex">
|
|
<div class="tag1">必修</div>
|
|
<div class="tag3" style="margin-left: 11px">作业</div>
|
|
</div>
|
|
</div>
|
|
<div class="submit" @click="toWork" v-if="!data.workFlag">提交</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="课程考试" name="third">
|
|
<div class="work">
|
|
<div>
|
|
<div class="question">
|
|
{{data.examItem.name}}
|
|
</div>
|
|
<div style="margin-top: 16px; display: flex">
|
|
<div class="tag1">必修</div>
|
|
<div class="tag3" style="margin-left: 11px">考试</div>
|
|
</div>
|
|
</div>
|
|
<div class="submit" @click="toExamItem" v-if="!data.examFlag">去考试</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
<div class="teacher">
|
|
<div class="title">
|
|
<img
|
|
style="width: 21px; height: 23px"
|
|
src="../../assets/image/livelecturer.png"
|
|
/>
|
|
<div class="text">直播讲师</div>
|
|
<div class="box"></div>
|
|
</div>
|
|
<!-- todo #面授课接口 讲师缺少img和介绍-->
|
|
<div
|
|
v-for="(el, index) in teacher"
|
|
:key="el.id"
|
|
class="teacheritem"
|
|
:style="{
|
|
'border-bottom':
|
|
index === teacher.length - 1
|
|
? null
|
|
: '1px solid rgba(56, 125, 247, 0.2)',
|
|
}"
|
|
>
|
|
<img class="peopleimg" :src="el.peopleimg"/>
|
|
<div style="margin-left: 17px; width: 190px">
|
|
<div class="teacherName" style="margin-right: 5px">
|
|
{{ el.name }}
|
|
</div>
|
|
<div class="introduce">{{ el.introduce }}</div>
|
|
</div>
|
|
<div class="follow">+ 关注</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 详细信息 -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {reactive, toRefs, watch} from "vue";
|
|
import word from '@/assets/image/file/word.png'
|
|
import ppt from '@/assets/image/file/ppt.png'
|
|
import pdf from '@/assets/image/file/pdf.png'
|
|
import zip from '@/assets/image/file/zip.png'
|
|
import md from '@/assets/image/file/md.png'
|
|
import excel from '@/assets/image/medal/excel.png'
|
|
import medal1 from '@/assets/image/medal/medal1.png'
|
|
import medal2 from '@/assets/image/medal/medal2.png'
|
|
import medal3 from '@/assets/image/medal/medal3.png'
|
|
import img from '@/assets/image/uploadimg.png'
|
|
import {request, useRequest} from "@/api/request";
|
|
import {STU_OFFCOURSE_DETAIL} from "@/api/api";
|
|
|
|
export default {
|
|
name: "FaceTeach",
|
|
setup() {
|
|
const {data} = useRequest(STU_OFFCOURSE_DETAIL, {})
|
|
const state = reactive({
|
|
activeName: "first",
|
|
enclosure: [
|
|
{
|
|
id: 1,
|
|
name: "项目参考文档.doc",
|
|
img: word,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "人工智能启蒙讲解讲义.pptx",
|
|
img: ppt,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "人工智能启蒙讲解讲义.xlsx",
|
|
img: excel,
|
|
},
|
|
],
|
|
teacher: [
|
|
{
|
|
id: 1,
|
|
name: "王星天（显示事业）",
|
|
introduce: "教师是学生的镜子,学生是老师的影子。",
|
|
peopleimg: img,
|
|
medal: [
|
|
medal1,
|
|
medal2,
|
|
medal3,
|
|
],
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "王星天（显示事业）",
|
|
introduce: "教师是学生的镜子,学生是老师的影子。",
|
|
peopleimg: img,
|
|
medal: [
|
|
medal1,
|
|
medal2,
|
|
],
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "王星天（显示事业）",
|
|
introduce:
|
|
"教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。",
|
|
peopleimg: img,
|
|
medal: [
|
|
medal1,
|
|
medal2,
|
|
medal3,
|
|
],
|
|
},
|
|
],
|
|
workers: [],
|
|
examinations: [],
|
|
})
|
|
const handleClick = (tab, event) => {
|
|
console.log(tab, event);
|
|
};
|
|
const download=(url)=>{
|
|
window.open(url)
|
|
}
|
|
function toWork(){
|
|
|
|
}
|
|
function toExamItem(){
|
|
|
|
}
|
|
return {
|
|
...toRefs(state),
|
|
handleClick,
|
|
download,
|
|
toExamItem,
|
|
toWork,
|
|
data,
|
|
pdf,
|
|
word,
|
|
ppt,
|
|
zip,
|
|
excel,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style lang="scss">
|
|
.faceteach {
|
|
.crumb {
|
|
color: #fff;
|
|
display: flex;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.bascinfo {
|
|
width: 100%;
|
|
height: 180px;
|
|
border-radius: 8px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
margin-top: 37px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
width: 146px;
|
|
height: 46px;
|
|
background: #2478ff;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
margin-right: 96px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: #333333;
|
|
line-height: 24px;
|
|
margin-left: -9px;
|
|
}
|
|
|
|
.time {
|
|
font-size: 14px;
|
|
color: #6e7b84;
|
|
line-height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.detailinfo {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.detail {
|
|
flex: 1;
|
|
margin-right: 20px;
|
|
|
|
.detailT {
|
|
min-height: 263px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
color: rgba(51, 51, 51, 1);
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 39px;
|
|
position: relative;
|
|
}
|
|
|
|
.title .text {
|
|
margin-left: 8px;
|
|
font-size: 16px;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.title .box {
|
|
width: 75px;
|
|
height: 10px;
|
|
background-color: rgba(36, 120, 255, 0.15);
|
|
position: absolute;
|
|
left: 23px;
|
|
top: 53px;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 8px;
|
|
font-size: 14px;
|
|
color: rgba(51, 51, 48, 1);
|
|
font-weight: 500;
|
|
line-height: 35px;
|
|
margin-top: 30px;
|
|
padding-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
.detailB {
|
|
min-height: 363px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
margin-top: 20px;
|
|
|
|
.el-tabs__item {
|
|
height: 69px;
|
|
padding: 25px 7px 0px 52px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.el-tabs__nav-wrap::after {
|
|
background-color: rgba(56, 125, 247, 0.2);
|
|
}
|
|
|
|
.enclosure {
|
|
height: 89px;
|
|
margin-left: 51px;
|
|
margin-right: 40px;
|
|
// border-bottom: 1px solid rgba(56, 125, 247, 0.2);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.enclosureL {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #677d86;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.download {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #2478ff;
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.work {
|
|
margin-left: 51px;
|
|
margin-right: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 37px;
|
|
}
|
|
|
|
.work .question {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333330;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.work .submit {
|
|
width: 126px;
|
|
height: 46px;
|
|
background: #2478ff;
|
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.teacher {
|
|
width: 434px;
|
|
min-height: 500px;
|
|
// height: 10%;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 8px;
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 39px;
|
|
position: relative;
|
|
margin-left: 48px;
|
|
}
|
|
|
|
.title .text {
|
|
margin-left: 8px;
|
|
font-size: 16px;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.title .box {
|
|
width: 75px;
|
|
height: 10px;
|
|
background-color: rgba(36, 120, 255, 0.15);
|
|
position: absolute;
|
|
left: 23px;
|
|
top: 53px;
|
|
}
|
|
|
|
.teacheritem {
|
|
margin-left: 48px;
|
|
margin-right: 48px;
|
|
// min-height: 115px;
|
|
padding: 25px 0px;
|
|
display: flex;
|
|
position: relative;
|
|
// align-items: center;
|
|
}
|
|
|
|
.teacheritem .peopleimg {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.teacheritem .teacherName {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #394145;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.teacheritem .introduce {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #394145;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.teacheritem .follow {
|
|
width: 80px;
|
|
height: 30px;
|
|
background: #387df7;
|
|
border-radius: 4px;
|
|
margin-top: 28px;
|
|
position: absolute;
|
|
right: -25px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|