hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-19 15:56:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

2022年5月29日从svn移到git

Browse Source
This commit is contained in:
daihh
2022-05-29 18:56:34 +08:00
commit b050613020
488 changed files with 68444 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

605
src/components/Administration/adminPage.vue Normal file
View File

@@ -0,0 +1,605 @@
<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分钟&emsp;&emsp;&emsp;&emsp;尝试次数：不限制</div>
<div class="test-info">评分方式：最高一次&emsp;&emsp;&emsp;&emsp;及格线：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题&emsp;&emsp;&emsp;&emsp;已完成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>