mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-19 15:56:45 +08:00
606 lines
22 KiB
Vue
606 lines
22 KiB
Vue
<template>
|
||
<div>
|
||
<el-row :gutter="10">
|
||
<el-col :span="24">
|
||
<el-card :body-style="{ padding: '0px', 'min-height': '600px' }">
|
||
<el-row class="detail">
|
||
<el-col :span="18">
|
||
<el-tabs v-model="activeName">
|
||
<el-tab-pane label="课件" name="courseware">
|
||
<div>
|
||
<div class="courseware-div" v-if="enrollStutas == 1">
|
||
<img :src="`${webBaseUrl}/images/course.png`" class="courseware-img" />
|
||
<el-button type="warning" @click="enroll" class="courseware-enroll-btn">报名后即可开始学习！</el-button>
|
||
</div>
|
||
<div class="courseware-div" v-else>
|
||
<video :src="`${webBaseUrl}/temp/video.mp4`" controls controlslist="nodownload" style="width: 100%; height: 100%; object-fit: fill" @ended="videoEnd"></video>
|
||
<div class="video-div" v-if="videoEnded">
|
||
<div class="good">
|
||
<div>
|
||
<svg-icon icon-class="like"></svg-icon>
|
||
赞
|
||
</div>
|
||
<div>
|
||
<svg-icon icon-class="like"></svg-icon>
|
||
踩
|
||
</div>
|
||
<!-- <el-link>
|
||
<i class="el-icon-thumb"></i>
|
||
赞
|
||
</el-link>
|
||
<el-link>
|
||
<i class="el-icon-thumb" style="transform: rotate(-180deg);"></i>
|
||
踩
|
||
</el-link> -->
|
||
</div>
|
||
<div class="score">
|
||
<el-rate v-model="courseRate" :max="5" :allow-half="true" show-score text-color="#ff9900" score-template="{value}"></el-rate>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="作业" name="homework">
|
||
<div>
|
||
<div class="homework-div">
|
||
<div>
|
||
<div class="homework-title">名称</div>
|
||
<div class="homework-content">京东方质量奖导读-课程作业</div>
|
||
</div>
|
||
<div>
|
||
<div class="homework-title">内容</div>
|
||
<div class="homework-content">作业内容包含图文</div>
|
||
</div>
|
||
<div>
|
||
<div class="homework-title">附件</div>
|
||
<div class="homework-content" style="color: blue">课程附件.doc</div>
|
||
</div>
|
||
<div>
|
||
<div class="homework-title">截止时间</div>
|
||
<div class="homework-content">2020-02-10 10:00</div>
|
||
</div>
|
||
<div v-if="!homeworkUpload">
|
||
<div class="homework-title">作业内容</div>
|
||
<div class="homework-content"><textarea readonly :rows="2" placeholder="请输入作业内容(限255个字)" style="width: 100%;outline: 0;"></textarea></div>
|
||
</div>
|
||
<div v-else>
|
||
<div class="homework-title">作业内容</div>
|
||
<div class="homework-content">作业作答内容</div>
|
||
</div>
|
||
<!-- <div v-if="!homeworkUpload">
|
||
<div class="homework-title">上传作业</div>
|
||
<div class="homework-content"><el-button type="text" icon="el-icon-upload">上传作业</el-button></div>
|
||
</div> -->
|
||
<div v-else>
|
||
<div class="homework-title">作业附件</div>
|
||
<div class="homework-content" style="color: blue">作业附件.doc</div>
|
||
</div>
|
||
<!-- <div><el-button type="primary" @click="homeworkUpload = true">提交</el-button></div> -->
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="考试" name="test">
|
||
<div>
|
||
<div class="test-div">
|
||
<div v-if="!testStart">
|
||
<div>
|
||
<div class="test-info">名称:京东方质量奖导读-考试</div>
|
||
<div class="test-info">考试时长：60分钟    尝试次数：不限制</div>
|
||
<div class="test-info">评分方式：最高一次    及格线：60%</div>
|
||
</div>
|
||
<!-- <div style="text-align: center; margin-bottom: 15px"><el-button type="primary" @click="testStart = true">开始考试</el-button></div> -->
|
||
<el-table :data="tableData" style="width: 100%">
|
||
<el-table-column prop="date" label="完成时间" align="center"></el-table-column>
|
||
<el-table-column prop="time" label="用时" width="180" align="center"></el-table-column>
|
||
<el-table-column prop="score" label="成绩" width="180" align="center"></el-table-column>
|
||
<el-table-column fixed="right" label="操作" width="100" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" >查看试卷</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div v-else>
|
||
<div>
|
||
<div class="test-info">剩余时间：倒计时共1题    已完成0题</div>
|
||
<div class="test-info">1.【单选题】程序的三种基本结构是（）</div>
|
||
<div class="test-info"><el-radio v-model="testRadio" label="1">过程子、程序、分程序</el-radio></div>
|
||
<div class="test-info"><el-radio v-model="testRadio" label="2">顺序、选择、循环</el-radio></div>
|
||
<div class="test-info"><el-radio v-model="testRadio" label="3">递归、堆栈、队列</el-radio></div>
|
||
<div class="test-info"><el-radio v-model="testRadio" label="4">调用、返回、转移</el-radio></div>
|
||
</div>
|
||
<div style="text-align: center; margin-bottom: 15px"><el-button type="primary" @click="testStart = false">提交</el-button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="评估" name="assess">
|
||
<div>
|
||
<div class="assess-div">
|
||
<div>
|
||
<div class="assess-info" style="text-align: center">京东方大学课程评估V2.0</div>
|
||
<div class="assess-info">课程满意度计算方式：权重配置；</div>
|
||
<div class="assess-info">满意度：（问题1）*80%+（问题2）*10%+（问题3）*10%</div>
|
||
<hr />
|
||
<div class="assess-info">1.问题：您觉得课程对工作有帮助、启发吗？</div>
|
||
<div class="assess-info" style="height: 20px">
|
||
<span style="float: left">完全没用</span>
|
||
<span style="float: right">非常有帮助/启发</span>
|
||
</div>
|
||
<div class="assess-info">
|
||
<el-radio-group v-model="assessRadio1" class="assessRadio1">
|
||
<el-radio-button label="1">1</el-radio-button>
|
||
<el-radio-button label="2">2</el-radio-button>
|
||
<el-radio-button label="3">3</el-radio-button>
|
||
<el-radio-button label="4">4</el-radio-button>
|
||
<el-radio-button label="5">5</el-radio-button>
|
||
<el-radio-button label="6">6</el-radio-button>
|
||
<el-radio-button label="7">7</el-radio-button>
|
||
<el-radio-button label="8">8</el-radio-button>
|
||
<el-radio-button label="9">9</el-radio-button>
|
||
<el-radio-button label="10">10</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="assess-info">2.问题：您愿意推荐其他同事来上这门课吗？</div>
|
||
<div class="assess-info" style="height: 20px">
|
||
<span style="float: left">不愿意</span>
|
||
<span style="float: right">非常愿意</span>
|
||
</div>
|
||
<div class="assess-info">
|
||
<el-radio-group v-model="assessRadio2" class="assessRadio1">
|
||
<el-radio-button label="1">1</el-radio-button>
|
||
<el-radio-button label="2">2</el-radio-button>
|
||
<el-radio-button label="3">3</el-radio-button>
|
||
<el-radio-button label="4">4</el-radio-button>
|
||
<el-radio-button label="5">5</el-radio-button>
|
||
<el-radio-button label="6">6</el-radio-button>
|
||
<el-radio-button label="7">7</el-radio-button>
|
||
<el-radio-button label="8">8</el-radio-button>
|
||
<el-radio-button label="9">9</el-radio-button>
|
||
<el-radio-button label="10">10</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="assess-info">3.问题：您愿意参加该教师开设的其他课程吗？</div>
|
||
<div class="assess-info" style="height: 20px">
|
||
<span style="float: left">不愿意</span>
|
||
<span style="float: right">非常愿意</span>
|
||
</div>
|
||
<div class="assess-info">
|
||
<el-radio-group v-model="assessRadio3" class="assessRadio1">
|
||
<el-radio-button label="1">1</el-radio-button>
|
||
<el-radio-button label="2">2</el-radio-button>
|
||
<el-radio-button label="3">3</el-radio-button>
|
||
<el-radio-button label="4">4</el-radio-button>
|
||
<el-radio-button label="5">5</el-radio-button>
|
||
<el-radio-button label="6">6</el-radio-button>
|
||
<el-radio-button label="7">7</el-radio-button>
|
||
<el-radio-button label="8">8</el-radio-button>
|
||
<el-radio-button label="9">9</el-radio-button>
|
||
<el-radio-button label="10">10</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="assess-info">3.问答题：学员之声（写下您想说的话）</div>
|
||
<div class="assess-info" v-if="!assessSubmit"><textarea :rows="4" style="width: 100%;outline: 0;" readonly placeholder="我的回答是...(限255字以内)"></textarea></div>
|
||
<div class="assess-info" v-else>目前什么都好，没有什么建议。</div>
|
||
</div>
|
||
<!-- <div style="text-align: center; margin-bottom: 15px" v-if="!assessSubmit"><el-button type="primary" @click="assessSubmitFun">提交</el-button></div> -->
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-col>
|
||
<el-col :span="6" class="cont">
|
||
<div class="study-count">资源归属: 生产技术中心</div>
|
||
<!-- <div class="title">京东方质量奖导读</div> -->
|
||
<div class="course-info-tools-btns"><interactBar type="course" :views="false" :comments="false"></interactBar>
|
||
<span style="color: #f8a114;font-size: 36px;">5</span>
|
||
<span style="font-size: 14px;color: #787878;">分</span>
|
||
</div>
|
||
<div class="label"><el-tag class="label-item" effect="plain">了解公司</el-tag></div>
|
||
<div class="label">
|
||
<el-tag class="label-item" effect="plain">部长</el-tag>
|
||
<el-tag class="label-item" effect="plain">中心长</el-tag>
|
||
</div>
|
||
<div class="keyword"><el-tag class="label-item" effect="plain">质量</el-tag></div>
|
||
<!--资源归属是一共有三级，这里只显示三级-->
|
||
|
||
<div class="study-count">
|
||
学习人数
|
||
<span class="num">11</span>
|
||
人
|
||
</div>
|
||
<!-- <div class="btn-div">
|
||
<el-button type="primary" v-if="enrollStutas == 1" @click="enroll">立即报名</el-button>
|
||
<el-button type="primary" v-else>已报名</el-button>
|
||
</div> -->
|
||
<!-- <div class="qr-code">
|
||
<img :src="`${webBaseUrl}/temp/qr-code.png`" />
|
||
<div>手机扫码观看</div>
|
||
</div>
|
||
<div class="view-summary"><el-button type="text" @click="dialogVisible = true">查看课程简介</el-button></div> -->
|
||
</el-col>
|
||
<!-- 11 -->
|
||
</el-row>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import interactBar from '@/components/Portal/interactBar.vue';
|
||
import { mapGetters } from 'vuex';
|
||
import portalHeader from '@/components/PortalHeader.vue';
|
||
import portalFooter from '@/components/PortalFooter.vue';
|
||
// import interactBar from '@/components/Portal/interactBar.vue';
|
||
export default {
|
||
name: 'articleItems',
|
||
props: {
|
||
items: { //name,
|
||
type: Array,
|
||
default:()=>[]
|
||
},
|
||
remove:{
|
||
type: Boolean,
|
||
default:false
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
assessSubmit: false,
|
||
tableData: [
|
||
{
|
||
date: '2022-10-10 08:20:30',
|
||
time: '8秒',
|
||
score: '100分'
|
||
},
|
||
{
|
||
date: '2022-10-9 08:20:30',
|
||
time: '3分钟',
|
||
score: '80分'
|
||
},
|
||
{
|
||
date: '2022-10-8 08:20:30',
|
||
time: '10分钟',
|
||
score: '80分'
|
||
},
|
||
{
|
||
date: '2022-10-7 08:20:30',
|
||
time: '15分钟',
|
||
score: '80分'
|
||
}
|
||
],
|
||
props: { name: '', type: '' },
|
||
micList: [{ name: '李玉冰', content: '教师介绍' }, { name: '程萌', content: '教师介绍' }],
|
||
activeName: 'courseware',
|
||
enrollStutas: 1, // 1 :未报名，2:已报名
|
||
dialogVisible: false,
|
||
homeworkUpload: false,
|
||
assessRadio1: null,
|
||
assessRadio2: null,
|
||
assessRadio3: null,
|
||
assessSubmit: false,
|
||
testStart: false,
|
||
activeName: 'courseware',
|
||
|
||
}
|
||
},
|
||
components:{
|
||
interactBar
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods:{
|
||
enroll() {
|
||
this.$message({ type: 'info', message: '报名成功', offset: 250 });
|
||
this.enrollStutas = 2;
|
||
},
|
||
assessSubmitFun() {
|
||
this.assessSubmit = true;
|
||
this.assessRadio1 = 3;
|
||
this.assessRadio2 = 1;
|
||
},
|
||
videoEnd() {
|
||
this.videoEnded = true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.breadname {
|
||
margin-bottom: 15px;
|
||
font-size: 18px;
|
||
}
|
||
.detail {
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
.courseware-div {
|
||
border: 1px solid;
|
||
min-height: 100px;
|
||
font-size: 30px;
|
||
text-align: center;
|
||
line-height: 100px;
|
||
position: relative;
|
||
.courseware-img {
|
||
width: 100%;
|
||
vertical-align: middle;
|
||
}
|
||
.courseware-enroll-btn {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 68%;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
.video-div {
|
||
position: absolute;
|
||
z-index: 999999999;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(101, 101, 101, 0.9);
|
||
.good {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 200px;
|
||
div {
|
||
line-height: 1;
|
||
margin: 0 15px;
|
||
.svg-icon{
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
div:nth-of-type(2){
|
||
.svg-icon{
|
||
transform: scaleX(-1);
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
// margin-bottom: 50px;
|
||
// line-height: 20px;
|
||
// .el-link{
|
||
// font-size: 30px;
|
||
// color: #70a5f4;
|
||
// margin: 0 30px;
|
||
// }
|
||
}
|
||
.score {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
.homework-div {
|
||
border: 1px solid;
|
||
min-height: 500px;
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
.homework-title {
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
.homework-content {
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.test-div {
|
||
border: 1px solid;
|
||
min-height: 500px;
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
.test-info {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.assess-div {
|
||
border: 1px solid;
|
||
min-height: 500px;
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
.assess-info {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.cont {
|
||
padding: 25px;
|
||
height: 540px;
|
||
.title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
line-height: 50px;
|
||
}
|
||
.course-info-tools-btns {
|
||
::v-deep .interact-bar-btns {
|
||
justify-content: flex-start !important;
|
||
}
|
||
.course-info-tools-btn {
|
||
margin: 0 15px 0 0;
|
||
}
|
||
margin-bottom: 15px;
|
||
}
|
||
.label {
|
||
margin-bottom: 15px;
|
||
.label-item {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.keyword {
|
||
margin-bottom: 15px;
|
||
.label-item {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.study-count {
|
||
.num {
|
||
color: #000;
|
||
font-size: 14px;
|
||
padding: 0 10px;
|
||
}
|
||
margin-bottom: 15px;
|
||
}
|
||
.btn-div {
|
||
margin-top: 30px;
|
||
}
|
||
.qr-code {
|
||
margin-top: 5px;
|
||
margin-bottom: 10px;
|
||
img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
div {
|
||
width: 120px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.view-summary {
|
||
position: absolute;
|
||
margin-bottom: 10px;
|
||
margin-left: 18px;
|
||
}
|
||
}
|
||
}
|
||
.summary-div {
|
||
.summary-content {
|
||
font-size: 14px;
|
||
line-height: 25px;
|
||
}
|
||
}
|
||
.info {
|
||
background-color: #fff;
|
||
margin-top: 20px;
|
||
padding: 0 10px;
|
||
.content {
|
||
color: #666;
|
||
line-height: 25px;
|
||
text-indent: 2em;
|
||
padding: 5px 10px;
|
||
}
|
||
.pinglun-div {
|
||
background-color: #fff;
|
||
padding: 0px 20px 10px 20px;
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 50px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
.tip {
|
||
color: #666;
|
||
font-size: 12px;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
.submit-div {
|
||
margin: 15px 0;
|
||
}
|
||
.bottom {
|
||
text-align: right;
|
||
}
|
||
|
||
.data {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
.data-item {
|
||
border-bottom: 1px solid #dfdfdf;
|
||
margin-top: 10px;
|
||
.top {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
span {
|
||
font-size: 14px;
|
||
color: #666;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
.text {
|
||
margin: 15px 0 5px 0;
|
||
padding-left: 40px;
|
||
line-height: 35px;
|
||
}
|
||
.huifu {
|
||
padding-left: 40px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
.result-div {
|
||
padding-left: 40px;
|
||
padding-top: 10px;
|
||
.top {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.up-div {
|
||
padding: 0 15px;
|
||
.up-btn {
|
||
padding: 8px 20px;
|
||
color: #000;
|
||
}
|
||
}
|
||
img {
|
||
margin-right: 10px;
|
||
width: 30px;
|
||
border: 1px solid #eee;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.teachers {
|
||
background-color: #fff;
|
||
margin-top: 20px;
|
||
.top {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 50px;
|
||
}
|
||
.tea-logo {
|
||
color: #0262ee;
|
||
font-size: 24px;
|
||
padding: 5px;
|
||
}
|
||
.list-item {
|
||
padding: 5px 10px;
|
||
.top {
|
||
display: inline-block;
|
||
width: 20%;
|
||
}
|
||
.image {
|
||
width: 50px;
|
||
border-radius: 50%;
|
||
border: 1px solid #eee;
|
||
}
|
||
.an-div {
|
||
text-align: left;
|
||
.tip {
|
||
line-height: 35px;
|
||
color: #666;
|
||
}
|
||
}
|
||
.text {
|
||
display: inline-block;
|
||
width: 80%;
|
||
.name {
|
||
line-height: 40px;
|
||
}
|
||
.content {
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
.list-item:not(:last-child) {
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
}
|
||
|
||
</style>
|