Skip to content

L
learn-online-pc
提交 7b96a966 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

bug fixes

上级 22e34112
显示空白字符变更
内嵌 并排
正在显示 包含 668 行增加 和 239 行删除
src/pages/learn/courseDetail.vue
浏览文件 @ 7b96a966
<template> <template>
<div> <div>
<!-- <div class="con-title">课程详情</div> --> <!-- <div class="con-title">课程详情</div> -->
<div class="detail-box"> <div class="detail-box">
<div class="box-thd"> <div class="box-thd">
<div class="title" @click="noWantThisCourse">{{headerInfo.title}} <div class="title" @click="noWantThisCourse">
{{ headerInfo.title }}
<!-- <!--
<template v-if='headerInfo.isStart && tabs[1].chapterList.currentChapter'> <template v-if='headerInfo.isStart && tabs[1].chapterList.currentChapter'>
<el-button class="rbtn" type="primary" size="mini" @click='startLearn(tabs[1].chapterList.currentChapter)'>继续学习</el-button> <el-button class="rbtn" type="primary" size="mini" @click='startLearn(tabs[1].chapterList.currentChapter)'>继续学习</el-button>
...@@ -17,11 +18,11 @@ ...@@ -17,11 +18,11 @@
</div> </div>
<div class="tags"> <div class="tags">
<template v-for="(item1, index) in headerInfo.arrTab"> <template v-for="(item1, index) in headerInfo.arrTab">
<span v-bind:key="index" class='tabs-item'>{{item1}}</span> <span v-bind:key="index" class="tabs-item">{{ item1 }}</span>
</template> </template>
</div> </div>
<div class="time">{{headerInfo.time}} {{headerInfo.status}}</div> <div class="time">{{ headerInfo.time }} {{ headerInfo.status }}</div>
<div style="float: left; width: 100%; height: 1px;"></div> <div style="float: left; width: 100%; height: 1px"></div>
<!-- <div class="progress"> <!-- <div class="progress">
视频观看进度&emsp;<el-progress :percentage="headerInfo.progress" color="#b49441"></el-progress> 视频观看进度&emsp;<el-progress :percentage="headerInfo.progress" color="#b49441"></el-progress>
</div> --> </div> -->
...@@ -29,7 +30,7 @@ ...@@ -29,7 +30,7 @@
<div class="box-tbd"> <div class="box-tbd">
<div class="left-pic"> <div class="left-pic">
<template v-if="headerInfo.bgSrc"> <template v-if="headerInfo.bgSrc">
<img :src="headerInfo.bgSrc" alt=""> <img :src="headerInfo.bgSrc" alt="" />
</template> </template>
<template v-else> <template v-else>
<div class="no-img"><i class="el-icon-self-13"></i></div> <div class="no-img"><i class="el-icon-self-13"></i></div>
...@@ -42,24 +43,55 @@ ...@@ -42,24 +43,55 @@
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="学习计划" name="1"> <el-tab-pane label="学习计划" name="1">
<template v-if="isCourseDis === '1'"> <template v-if="isCourseDis === '1'">
<img style="width: 100%;" src="@/assets/images/jcxx.jpg" alt=""> <img style="width: 100%" src="@/assets/images/jcxx.jpg" alt="" />
</template> </template>
<template v-else> <template v-else>
<div class='course-list'> <div class="course-list">
<template v-for="(_item, index) in tabs[1].chapterList.course"> <template v-for="(_item, index) in tabs[1].chapterList.course">
<div v-bind:key="index" :class='["content-group", (!_item.chapters.length ? "no-child" : ""), (_item.isUp ? "up" : "")]'> <div
<div class='title' @click='clickJumpOrStatus(index, _item)' :data-index='index' :data-cid='_item.cid' :data-sid='_item.sid' :data-status='!!_item.chapters.length'>{{_item.title}} v-bind:key="index"
<i :class="['side', (_item.chapters.length ? '' : 'none'), (_item.isUp ? 'el-icon-arrow-down' : 'el-icon-arrow-up')]"></i> :class="['content-group', !_item.chapters.length ? 'no-child' : '', _item.isUp ? 'up' : '']"
>
<div
class="title"
@click="clickJumpOrStatus(index, _item)"
:data-index="index"
:data-cid="_item.cid"
:data-sid="_item.sid"
:data-status="!!_item.chapters.length"
>
{{ _item.title }}
<i
:class="[
'side',
_item.chapters.length ? '' : 'none',
_item.isUp ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
]"
></i>
</div> </div>
<template v-for="(item1, index1) in _item.chapters"> <template v-for="(item1, index1) in _item.chapters">
<div v-bind:key="index1" :class='["body", (item1.id === tabs[1].chapterList.currentChapterId && "on")]'> <div
<div class='name' :data-vid='item1.vid' :data-cid='item1.cid' :data-sid='item1.sid' :data-hasVA='item1.time' :data-type="item1.video_provider" :data-name='item1.name' :data-index='index' :data-count='index1' @click='jumpToOtherVA(item1)'> v-bind:key="index1"
{{item1.name}} :class="['body', item1.id === tabs[1].chapterList.currentChapterId && 'on']"
<template v-if='[5, 8].includes(item1.type)'> >
<div class='time'>{{ item1.live.start_time }} {{ item1.live.statusStr }}</div> <div
class="name"
:data-vid="item1.vid"
:data-cid="item1.cid"
:data-sid="item1.sid"
:data-hasVA="item1.time"
:data-type="item1.video_provider"
:data-name="item1.name"
:data-index="index"
:data-count="index1"
@click="jumpToOtherVA(item1)"
>
{{ item1.name }}
<template v-if="[5, 8].includes(item1.type)">
<div class="time">{{ item1.live.start_time }} {{ item1.live.statusStr }}</div>
</template> </template>
<template v-else> <template v-else>
<div class='time'>{{item1.time}}</div> <div class="time">{{ item1.time }}</div>
</template> </template>
</div> </div>
</div> </div>
...@@ -71,15 +103,22 @@ ...@@ -71,15 +103,22 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="教材提问" name="2" v-if="isCourseDis === '1'"> <el-tab-pane label="教材提问" name="2" v-if="isCourseDis === '1'">
<template v-if="!isPublicShow"> <template v-if="!isPublicShow">
<div class='pub-ques'> <div class="pub-ques">
<div class='ask'> <div class="ask">
<i class="el-icon-edit img"></i> <i class="el-icon-edit img"></i>
<div class="txt" @click='publishDiscuss'>发布问题 ...</div> <div class="txt" @click="publishDiscuss">发布问题 ...</div>
</div>
<div
:class="['item-order', sort[0].isShow ? 'on' : '']"
@click="sortFn"
:data-index="0"
:data-str="sort[0].str"
>
按时间排序
</div> </div>
<div :class='["item-order", (sort[0].isShow ? "on" : "")]' @click='sortFn' :data-index='0' :data-str='sort[0].str'>按时间排序</div>
<!-- <div :class='["item-order", (sort[1].isShow ? "on" : "")]' @click='sortFn' :data-index='1' :data-str='sort[1].str'>按投票排序</div> --> <!-- <div :class='["item-order", (sort[1].isShow ? "on" : "")]' @click='sortFn' :data-index='1' :data-str='sort[1].str'>按投票排序</div> -->
</div> </div>
<div class='discuss-scroll' bindscrolltolower='loadmore' bindscrolltoupper='updatenew'> <div class="discuss-scroll" bindscrolltolower="loadmore" bindscrolltoupper="updatenew">
<!-- <template v-for='(item, index) in discussList'> <!-- <template v-for='(item, index) in discussList'>
<div v-if="item.questioner.uid == $GLOBAL.UserInfo.id" v-bind:key="index" class='item-list lhhId' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-index='index'> <div v-if="item.questioner.uid == $GLOBAL.UserInfo.id" v-bind:key="index" class='item-list lhhId' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-index='index'>
<div class='user'> <div class='user'>
...@@ -106,21 +145,30 @@ ...@@ -106,21 +145,30 @@
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class='publish'> <div class="publish">
<div style="overflow: hidden;"> <div style="overflow: hidden">
<div class="right-goback-txt">发布问题</div> <div class="right-goback-txt">
<el-button type="text" @click='gobackDiscuss'>返回问题列表</el-button> {{ $t('pages.learn.courseDetail.Releaseissues') }}
</div>
<el-button type="text" @click="gobackDiscuss">{{
$t('pages.learn.courseDetail.Returntoquestionlist')
}}</el-button>
</div> </div>
<el-form ref="setPublishform" :model="publish" :rules="publishRules"> <el-form ref="setPublishform" :model="publish" :rules="publishRules" label-position="top">
<el-form-item label="问题章节" prop="title"> <el-form-item :label="$t('pages.learn.courseDetail.title1')" prop="title">
<el-input v-model="publish.title" type="text" placeholder="请输入问题章节"></el-input> <el-input
v-model="publish.title"
type="text"
:placeholder="$t('pages.learn.courseDetail.inputtitle1')"
></el-input>
</el-form-item>
<el-form-item :label="$t('pages.learn.courseDetail.Textcontent')" prop="contents">
<v-editor v-model="publish.contents"></v-editor>
</el-form-item> </el-form-item>
<!-- v-model="publish.content" -->
<div style="line-height: 1.5; font-size: 0.16rem; margin-bottom: 0.2rem;">问题内容</div>
<textarea id="editor"></textarea>
<div style="height: 0.2rem;"></div>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmitPublish">发布问题</el-button> <el-button type="primary" @click="onSubmitPublish">{{
$t('pages.learn.courseDetail.Releaseissues')
}}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -194,17 +242,17 @@ ...@@ -194,17 +242,17 @@
<template v-if="tabs[0].content && tabs[0].content.teachers && tabs[0].content.teachers.length"> <template v-if="tabs[0].content && tabs[0].content.teachers && tabs[0].content.teachers.length">
<el-tabs v-model="activeName1" @tab-click="handleClick"> <el-tabs v-model="activeName1" @tab-click="handleClick">
<el-tab-pane label="课程讲师" name="1"> <el-tab-pane label="课程讲师" name="1">
<template v-for='(item1, index) in tabs[0].content.teachers'> <template v-for="(item1, index) in tabs[0].content.teachers">
<div v-bind:key='index' class='list-teacher'> <div v-bind:key="index" class="list-teacher">
<img class="img" :src="item1.src" alt=""> <img class="img" :src="item1.src" alt="" />
<div class='ctx'> <div class="ctx">
<div class='top-ctx'> <div class="top-ctx">
<div class='name'>{{item1.name}}</div> <div class="name">{{ item1.name }}</div>
</div> </div>
<div class='bottom-ctx'> <div class="bottom-ctx">
<div class='t1'>{{item1.edu}}</div> <div class="t1">{{ item1.edu }}</div>
<div class='t2'>{{item1.job}}</div> <div class="t2">{{ item1.job }}</div>
<div class='t3'>{{item1.unit}}</div> <div class="t3">{{ item1.unit }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -215,22 +263,22 @@ ...@@ -215,22 +263,22 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import cAction from '@action' import cAction from '@action'
import cTool from '@tool' import cTool from '@tool'
import CKEDITOR from 'CKEDITOR' import VEditor from '@/components/ckeditor'
export default { export default {
components: { }, components: { VEditor },
props: { props: {
sid: { type: String, require: false }, sid: { type: String, require: false },
cid: { type: String, require: false } cid: { type: String, require: false }
}, },
data () { data() {
return { return {
params: { params: {
path: `/${this.cid}`, path: `/${this.cid}`,
...@@ -244,37 +292,42 @@ export default { ...@@ -244,37 +292,42 @@ export default {
}, },
isCourseDis: this.getQueryString('v'), isCourseDis: this.getQueryString('v'),
domLength: 0, domLength: 0,
ckeditor: null,
activeName: '1', activeName: '1',
activeName1: '1', activeName1: '1',
passCount: 0, // 隐藏功能， 退课专用 passCount: 0, // 隐藏功能， 退课专用
headerInfo: {}, // 后台数据返回 headerInfo: {}, // 后台数据返回
tabs: [{ tabs: [
{
title: '课程简介', title: '课程简介',
isShow: false, isShow: false,
content: { content: {
text: '<p><b>视频课程没有加载出来，请检查自己的网络环境，并重新刷新。</b>', text: '<p><b>视频课程没有加载出来，请检查自己的网络环境，并重新刷新。</b>',
teachers: [{ teachers: [
{
src: '', src: '',
name: '讲师姓名', name: '讲师姓名',
edu: '学历', edu: '学历',
job: '职称', job: '职称',
unit: '讲师所在单位' unit: '讲师所在单位'
}]
} }
}, { ]
}
},
{
title: '课程内容', title: '课程内容',
isShow: false, isShow: false,
chapterList: { chapterList: {
currentChapterId: '11', // 当前章节id currentChapterId: '11', // 当前章节id
course: [{ course: [
{
title: '', title: '',
isUp: true, isUp: true,
chapters: [ chapters: [
// { id: '11', time: '28:18', name: '1.1 现值（PV）和终值（FV）' }, // { id: '11', time: '28:18', name: '1.1 现值（PV）和终值（FV）' },
{ id: '12', time: '19:09', name: '1.2 测试课程' } { id: '12', time: '19:09', name: '1.2 测试课程' }
] ]
}, { },
{
title: '', title: '',
isUp: true, isUp: true,
chapters: [ chapters: [
...@@ -283,7 +336,8 @@ export default { ...@@ -283,7 +336,8 @@ export default {
// { id: '23', time: '', name: '公司金融第二周测验' }, // { id: '23', time: '', name: '公司金融第二周测验' },
// { id: '24', time: '', name: '公司金融第二周作业' } // { id: '24', time: '', name: '公司金融第二周作业' }
] ]
}, { },
{
// title: '课程大作业', // title: '课程大作业',
// isUp: true, // isUp: true,
// chapters: [] // chapters: []
...@@ -291,44 +345,57 @@ export default { ...@@ -291,44 +345,57 @@ export default {
title: '', title: '',
isUp: true, isUp: true,
chapters: [] chapters: []
}]
} }
}, { ]
}
},
{
title: '课程讨论', title: '课程讨论',
isShow: false isShow: false
}, { },
{
title: '课程考核', title: '课程考核',
isShow: false, isShow: false,
richText: "<div class='h1'>一、最终成绩计算</div> <div class='p'>课程表现得分*30%+每章试题得分*30%+结业大作业得分*40%=该门课程总得分，满分100分，低于80分为不及格，需重修此门课程。84分以上方可申请学位。</div> <img class='b1' src='https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/www/course-check.png' mode='aspectFill' /> <div class='h1'>二、具体细则</div> <div class='h2'>课程表现：总分100分（占科目总成绩的30%）</div> <div class='p'>1、每个视频观看完成度50分：以后台数据统计为准，全部看完视频满分50分，其它酌情给分。</div> <div class='em'>注：视频观看考核的是实际播放时长，不是进度条的显示状态，进度条满格并不一定表示观看完这个视频。以下方每日学习时长为准。</div> <div class='p'>2、课程反馈建设性问题及课程完成情况50分：反馈问题以教务老师统计为准，课程完成情况以后台数据为准，是否按时完成视频观看、测试、作业提交，满分50分，酌情给分。</div> <div class='h2'>每章试题：总分100分（占科目总成绩的30%）</div> <div class='p'>本课程所有试题的平均正确率*100分*占总成绩30%=此项得分。(比如正确度为80%，则此项得分：80%*100*30%=24分)</div> <div class='h2'>结业大作业：总分100分（占科目总成绩的40%）</div> <div class='p'>结业大作业满分为100分，以助教老师给分为准。</div>", richText:
"<div class='h1'>一、最终成绩计算</div> <div class='p'>课程表现得分*30%+每章试题得分*30%+结业大作业得分*40%=该门课程总得分，满分100分，低于80分为不及格，需重修此门课程。84分以上方可申请学位。</div> <img class='b1' src='https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/www/course-check.png' mode='aspectFill' /> <div class='h1'>二、具体细则</div> <div class='h2'>课程表现：总分100分（占科目总成绩的30%）</div> <div class='p'>1、每个视频观看完成度50分：以后台数据统计为准，全部看完视频满分50分，其它酌情给分。</div> <div class='em'>注：视频观看考核的是实际播放时长，不是进度条的显示状态，进度条满格并不一定表示观看完这个视频。以下方每日学习时长为准。</div> <div class='p'>2、课程反馈建设性问题及课程完成情况50分：反馈问题以教务老师统计为准，课程完成情况以后台数据为准，是否按时完成视频观看、测试、作业提交，满分50分，酌情给分。</div> <div class='h2'>每章试题：总分100分（占科目总成绩的30%）</div> <div class='p'>本课程所有试题的平均正确率*100分*占总成绩30%=此项得分。(比如正确度为80%，则此项得分：80%*100*30%=24分)</div> <div class='h2'>结业大作业：总分100分（占科目总成绩的40%）</div> <div class='p'>结业大作业满分为100分，以助教老师给分为准。</div>",
assess: { assess: {
score: '20', score: '20',
duration: '00:01:20', duration: '00:01:20',
progress: '0/10', progress: '0/10',
video: [{ video: [
{
title: '第一章 市场营销原理导论', title: '第一章 市场营销原理导论',
sid: '', sid: '',
cid: '', cid: '',
arr: [{ arr: [
{
name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销', name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
time: '12:08', time: '12:08',
progress: '100%', progress: '100%',
vid: '' vid: ''
}] }
}], ]
homewrok: [{ }
],
homewrok: [
{
title: '第一章 市场营销原理导论', title: '第一章 市场营销原理导论',
arr: [{ arr: [
{
name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销', name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
score: 20 score: 20
}] }
}], ]
}
],
essay: { essay: {
created_time: '', created_time: '',
status: '未提交', status: '未提交',
score: '暂无' score: '暂无'
} }
} }
}], }
],
// tabs: [{ // tabs: [{
// title: '课程简介', // title: '课程简介',
// isShow: false, // isShow: false,
...@@ -427,9 +494,8 @@ export default { ...@@ -427,9 +494,8 @@ export default {
}, },
isPublicShow: false, // 是否显示发布问题 isPublicShow: false, // 是否显示发布问题
publishRules: { publishRules: {
title: [ title: [{ required: true, message: this.$t('pages.learn.courseDetail.inputtitle1'), trigger: 'blur' }],
{ required: true, message: '请输入标题', trigger: 'blur' } contents: [{ required: true, message: this.$t('pages.learn.courseDetail.inputTextcontent'), trigger: 'blur' }]
]
}, },
isOpenNewTabFlag: false, isOpenNewTabFlag: false,
arrFn: [], arrFn: [],
...@@ -438,7 +504,7 @@ export default { ...@@ -438,7 +504,7 @@ export default {
firstVideo: {} firstVideo: {}
} }
}, },
mounted () { mounted() {
/* 获取云课堂所有地址 */ /* 获取云课堂所有地址 */
cAction.Player.getCloudUrl().then(json => { cAction.Player.getCloudUrl().then(json => {
this.cloudClassUrls = json this.cloudClassUrls = json
...@@ -454,7 +520,8 @@ export default { ...@@ -454,7 +520,8 @@ export default {
loading.close() loading.close()
return return
} }
cAction.Course.getCourseDetail(this.cid, this.sid).then(json => { cAction.Course.getCourseDetail(this.cid, this.sid)
.then(json => {
this.headerInfo = json.headerInfo this.headerInfo = json.headerInfo
this.tabs[0].content = json.tabs0Content this.tabs[0].content = json.tabs0Content
this.tabs[1].chapterList = json.tabs1ChapterList this.tabs[1].chapterList = json.tabs1ChapterList
...@@ -475,7 +542,8 @@ export default { ...@@ -475,7 +542,8 @@ export default {
} }
} }
cAction.Course.getCourseAssess(this.cid, this.sid).then(json1 => { cAction.Course.getCourseAssess(this.cid, this.sid)
.then(json1 => {
const _courseArr = json.tabs1ChapterList.course const _courseArr = json.tabs1ChapterList.course
/* 进行一次 对照，将 视频 vid 赋值 */ /* 进行一次 对照，将 视频 vid 赋值 */
/* BUG: 如果有某一章 都没有视频时，对照失败，从没有的那一章开始，后面全部没有vid */ /* BUG: 如果有某一章 都没有视频时，对照失败，从没有的那一章开始，后面全部没有vid */
...@@ -494,65 +562,47 @@ export default { ...@@ -494,65 +562,47 @@ export default {
} }
this.tabs[3].assess = json1 this.tabs[3].assess = json1
loading.close() loading.close()
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) })
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {})
// cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => { // cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
// this.discussList = json2 // this.discussList = json2
// }).catch(e => { this.$message.error(e.message) }).finally(() => { }) // }).catch(e => { this.$message.error(e.message) }).finally(() => { })
}).catch(e => { this.$message.error(e.message); loading.close() }).finally(() => { }) })
.catch(e => {
this.$message.error(e.message)
loading.close()
})
.finally(() => {})
window.addEventListener('resize', this.resizeRoot.bind(this), false) window.addEventListener('resize', this.resizeRoot.bind(this), false)
/* 实时刷新数据 */ /* 实时刷新数据 */
if (this.timeHeart) { clearInterval(this.timeHeart); this.timeHeart = null } if (this.timeHeart) {
clearInterval(this.timeHeart)
this.timeHeart = null
}
// this.timeHeart = setInterval(this.updatePages(), 3000) // this.timeHeart = setInterval(this.updatePages(), 3000)
this.arrFn = this.initBindKeyfn() this.arrFn = this.initBindKeyfn()
}, },
destroyed () { destroyed() {
window.removeEventListener('resize', this.resizeRoot.bind(this), false) window.removeEventListener('resize', this.resizeRoot.bind(this), false)
/* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */ if (this.timeHeart) {
this.ckeditor && this.ckeditor.destroy(true) clearInterval(this.timeHeart)
this.ckeditor = null this.timeHeart = null
if (this.timeHeart) { clearInterval(this.timeHeart); this.timeHeart = null }
if (this.arrFn.length) { this.destroyKeyfn(this.arrFn) }
},
updated () {
this.resizeRoot()
if (this.isPublicShow) {
this.initckeditor()
} }
}, if (this.arrFn.length) {
beforeUpdate () { this.destroyKeyfn(this.arrFn)
if (!this.isPublicShow) {
/* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
this.ckeditor && this.ckeditor.destroy(true)
this.ckeditor = null
} }
}, },
updated() {
this.resizeRoot()
},
methods: { methods: {
handleClick (tab, event) { /* console.log(tab, event) */ }, handleClick(tab, event) {
/* 初始化 ckeditor */ /* console.log(tab, event) */
initckeditor () {
!this.ckeditor && (this.ckeditor = CKEDITOR.replace('editor', {
height: 300,
uiColor: '#eeeeee',
filebrowserImageUploadUrl: '/api/ck/form/ckeditor-upload',
fileTools_requestHeaders: { tenant: 'wmp' },
// resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
toolbar: [
// { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] },
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'tools', items: ['Maximize', 'ShowBlocks'] },
// { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace'] },
// { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
'/',
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
]
}))
}, },
updatePages () { updatePages() {
cAction.Course.getCourseDetail(this.cid, this.sid).then(json => { cAction.Course.getCourseDetail(this.cid, this.sid).then(json => {
/* 更新直播状态 */ /* 更新直播状态 */
this.tabs[1].chapterList.course = json.tabs1ChapterList.course.map(item => { this.tabs[1].chapterList.course = json.tabs1ChapterList.course.map(item => {
...@@ -567,7 +617,7 @@ export default { ...@@ -567,7 +617,7 @@ export default {
/** /**
* 课程内容 - 列表展开或者跳转 * 课程内容 - 列表展开或者跳转
*/ */
clickJumpOrStatus (index, data) { clickJumpOrStatus(index, data) {
const flag = !!data.chapters.length const flag = !!data.chapters.length
if (flag) { if (flag) {
const json = this.tabs const json = this.tabs
...@@ -592,29 +642,42 @@ export default { ...@@ -592,29 +642,42 @@ export default {
} }
}, },
/* 直接跳转打开新页面 */ /* 直接跳转打开新页面 */
openNewTab (sid, cid, _id) { openNewTab(sid, cid, _id) {
cAction.Player.getChapterList(cid, sid, _id).then(json => { cAction.Player.getChapterList(cid, sid, _id)
.then(json => {
this.live = (json.curJson && json.curJson.live) || {} this.live = (json.curJson && json.curJson.live) || {}
if (this.live.id) { if (this.live.id) {
if (this.live.live_status === 3 && this.live.enable_record && this.live.record_url) { if (this.live.live_status === 3 && this.live.enable_record && this.live.record_url) {
this.live.url = this.live.record_url this.live.url = this.live.record_url
} else { } else {
this.live.viewer_name = window.G.UserInfo.student_info.personal_name || window.G.UserInfo.nickname this.live.viewer_name = window.G.UserInfo.student_info.personal_name || window.G.UserInfo.nickname
this.live.url = 'https://view.csslcloud.net/api/view/index?roomid=' + this.live.room_id + '&userid=' + this.live.user_id + '&autoLogin=true&viewername=' + (this.live.viewer_name || '匿名') + '&viewertoken=' + this.live.viewer_token // + '&groupid=xxx' this.live.url =
'https://view.csslcloud.net/api/view/index?roomid=' +
this.live.room_id +
'&userid=' +
this.live.user_id +
'&autoLogin=true&viewername=' +
(this.live.viewer_name || '匿名') +
'&viewertoken=' +
this.live.viewer_token // + '&groupid=xxx'
} }
// this.CCLiveInit(this.live) // this.CCLiveInit(this.live)
this.isOpenNewTabFlag = false this.isOpenNewTabFlag = false
window.open(this.live.url) window.open(this.live.url)
} }
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) })
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {})
}, },
initBindKeyfn () { initBindKeyfn() {
const _fn1 = (e) => { const _fn1 = e => {
if (e.keyCode === 70) { if (e.keyCode === 70) {
this.isOpenNewTabFlag = true this.isOpenNewTabFlag = true
} }
} }
const _fn2 = (e) => { const _fn2 = e => {
if (e.keyCode === 70) { if (e.keyCode === 70) {
this.isOpenNewTabFlag = false this.isOpenNewTabFlag = false
} }
...@@ -623,14 +686,14 @@ export default { ...@@ -623,14 +686,14 @@ export default {
document.addEventListener('keyup', _fn2, false) document.addEventListener('keyup', _fn2, false)
return [_fn1, _fn2] return [_fn1, _fn2]
}, },
destroyKeyfn (arr) { destroyKeyfn(arr) {
document.removeEventListener('keydown', arr[0]) document.removeEventListener('keydown', arr[0])
document.removeEventListener('keyup', arr[1]) document.removeEventListener('keyup', arr[1])
}, },
/** /**
* 跳转到对应音视频播放页 * 跳转到对应音视频播放页
*/ */
jumpToOtherVA (data) { jumpToOtherVA(data) {
/* 如果未选课，不能查看课程内容 */ /* 如果未选课，不能查看课程内容 */
if (!this.headerInfo.isStart) { if (!this.headerInfo.isStart) {
this.$message.error('先选课，才能学习') this.$message.error('先选课，才能学习')
...@@ -675,12 +738,16 @@ export default { ...@@ -675,12 +738,16 @@ export default {
window.open(data.live.record_url || data.live.join_url) window.open(data.live.record_url || data.live.join_url)
return return
} }
this.$router.push({ name: 'viewerCourseChapter', params: { sid, cid, id: data.id }, query: { offset: data.offset } }) this.$router.push({
name: 'viewerCourseChapter',
params: { sid, cid, id: data.id },
query: { offset: data.offset }
})
}, },
/** /**
* 开始学习或继续学习 - 跳转到对应音视频播放页 * 开始学习或继续学习 - 跳转到对应音视频播放页
*/ */
startLearn (data) { startLearn(data) {
if (data.id) { if (data.id) {
this.$router.push({ name: 'viewerCourseChapter', params: { sid: this.sid, cid: this.cid, id: data.id } }) this.$router.push({ name: 'viewerCourseChapter', params: { sid: this.sid, cid: this.cid, id: data.id } })
} else { } else {
...@@ -690,24 +757,34 @@ export default { ...@@ -690,24 +757,34 @@ export default {
/** /**
* 退课 - 隐藏功能，点击 标题15次，进行退课 * 退课 - 隐藏功能，点击 标题15次，进行退课
*/ */
noWantThisCourse () { noWantThisCourse() {
this.passCountTimeout && clearTimeout(this.passCountTimeout) this.passCountTimeout && clearTimeout(this.passCountTimeout)
this.passCountTimeout = setTimeout(() => { this.passCountTimeout = setTimeout(() => {
this.passCount = 0 this.passCount = 0
}, 500) }, 500)
if (this.passCount < 15) { this.passCount++; return } if (this.passCount < 15) {
this.passCount++
return
}
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.Course.outSelectCourse(this.cid, this.sid).then(json => { cAction.Course.outSelectCourse(this.cid, this.sid)
.then(json => {
this.headerInfo.isStart = false this.headerInfo.isStart = false
loading.close() loading.close()
this.$message({ type: 'success', message: '退课成功' }) this.$message({ type: 'success', message: '退课成功' })
this.passCount = 0 this.passCount = 0
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) })
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {
loading.close()
})
}, },
/** /**
* 隐藏功能 - 在课程统计页 直接 点击进入视频学习页 或者 直接完成该课程的视频挂载 * 隐藏功能 - 在课程统计页 直接 点击进入视频学习页 或者 直接完成该课程的视频挂载
*/ */
jumpVAOrfinishVA (e) { jumpVAOrfinishVA(e) {
const data = e.currentTarget.dataset const data = e.currentTarget.dataset
const _fn1 = this._keydownfn.bind(this, data) const _fn1 = this._keydownfn.bind(this, data)
document.addEventListener('keydown', _fn1, false) document.addEventListener('keydown', _fn1, false)
...@@ -717,7 +794,7 @@ export default { ...@@ -717,7 +794,7 @@ export default {
} }
document.addEventListener('mouseup', _fn3, false) document.addEventListener('mouseup', _fn3, false)
}, },
_keydownfn (data, e) { _keydownfn(data, e) {
const _cid = data.cid const _cid = data.cid
const _vid = data.vid const _vid = data.vid
const _duration = data.duration const _duration = data.duration
...@@ -739,25 +816,37 @@ export default { ...@@ -739,25 +816,37 @@ export default {
_m: parseInt(_duration), // 当前播放最大时间 _m: parseInt(_duration), // 当前播放最大时间
_c: parseInt(_duration), // 当前播放位置 _c: parseInt(_duration), // 当前播放位置
ps: '0,0' // 播放时，播放过的 帧 ps: '0,0' // 播放时，播放过的 帧
}).then(json => { })
.then(json => {
if (json.success) { if (json.success) {
this.$message.success('补课成功，刷新查看结果') this.$message.success('补课成功，刷新查看结果')
} }
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) })
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {})
} }
}, },
/** /**
* 选课 * 选课
*/ */
wantThisCourse () { wantThisCourse() {
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.Course.selectCourse(this.cid, this.sid).then(json => { cAction.Course.selectCourse(this.cid, this.sid)
.then(json => {
this.headerInfo.isStart = true this.headerInfo.isStart = true
loading.close() loading.close()
this.$message({ type: 'success', message: '选课成功' }) this.$message({ type: 'success', message: '选课成功' })
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) })
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {
loading.close()
})
}, },
resizeRoot () { resizeRoot() {
const elems = document.querySelectorAll('.ellipsis') const elems = document.querySelectorAll('.ellipsis')
const fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line const fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line
elems.forEach((_, i) => { elems.forEach((_, i) => {
...@@ -775,63 +864,56 @@ export default { ...@@ -775,63 +864,56 @@ export default {
/** /**
* 发布问题 - 页面打开 * 发布问题 - 页面打开
*/ */
publishDiscuss () { publishDiscuss() {
this.isPublicShow = true this.isPublicShow = true
}, },
/** /**
* 返回问题列表 * 返回问题列表
*/ */
gobackDiscuss () { gobackDiscuss() {
this.isPublicShow = false this.isPublicShow = false
}, },
/** /**
* 问题发布 - 接口提交 * 问题发布 - 接口提交
*/ */
onSubmitPublish () { onSubmitPublish() {
this.$refs.setPublishform.validate((valid) => { this.$refs.setPublishform.validate(valid => {
if (valid) { if (valid) {
if (!this.ckeditor.getData()) {
this.$message.error('请输入正文内容')
} else {
this.publish.contents = this.ckeditor.getData()
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.Discuss.publishQues(this.publish).then(json => { cAction.Discuss.publishQues(this.publish)
this.$message({ .then(json => {
type: 'success', this.$message({ type: 'success', message: '问题发布成功' })
message: '问题发布成功'
})
this.isPublicShow = false this.isPublicShow = false
this.params = { this.params = {
path: `/${this.cid}`, path: `/${this.cid}`,
request: 'getCourseDiscussList', request: 'getCourseDiscussList',
dataJson: { dataJson: { limit: 10, offset: 0, is_myself: true }
limit: 10,
offset: 0,
is_myself: true
}
} }
this.$refs.setPublishform.resetFields()
// cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => { // cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
// this.discussList = json2 // this.discussList = json2
// }).catch(e => { this.$message.error(e.message) }).finally(() => { }) // }).catch(e => { this.$message.error(e.message) }).finally(() => { })
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) })
} .catch(e => {
} else { this.$message.error(e.message)
this.$message.error('请输入标题') })
return false .finally(() => {
loading.close()
})
} }
}) })
}, },
/** /**
* 跳转到对应 问题详情页 * 跳转到对应 问题详情页
*/ */
goDiscussDetail (e) { goDiscussDetail(e) {
const qid = e.currentTarget.dataset.id const qid = e.currentTarget.dataset.id
this.$router.push({ path: `/app/learn/discuss-detail/${this.cid}/${qid}` }) this.$router.push({ path: `/app/learn/discuss-detail/${this.cid}/${qid}` })
}, },
/** /**
* 排序方式 * 排序方式
*/ */
sortFn (e) { sortFn(e) {
const index = e.currentTarget.dataset.index const index = e.currentTarget.dataset.index
const str = e.currentTarget.dataset.str const str = e.currentTarget.dataset.str
this.sort[index].isShow = !this.sort[index].isShow this.sort[index].isShow = !this.sort[index].isShow
...@@ -854,17 +936,20 @@ export default { ...@@ -854,17 +936,20 @@ export default {
// this.discussList = json // this.discussList = json
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) // }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
}, },
getQueryString (name) { getQueryString(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i') const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
const r = window.location.search.substr(1).match(reg) const r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2]); return null if (r != null) return unescape(r[2])
return null
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
body .el-tab-pane { padding-top: 0; } body .el-tab-pane {
padding-top: 0;
}
.detail-box { .detail-box {
margin: 0.3rem; margin: 0.3rem;
color: #313131; color: #313131;
...@@ -942,85 +1027,425 @@ body .el-tab-pane { padding-top: 0; } ...@@ -942,85 +1027,425 @@ body .el-tab-pane { padding-top: 0; }
} }
} }
/* 课程列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */ /* 课程列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
.course-list { padding: 0.2rem 0 0.1rem 0; background: #ffffff; } .course-list {
.course-list .none { display: none; } padding: 0.2rem 0 0.1rem 0;
.course-list .content-group { padding: 0 0.2rem; } background: #ffffff;
.course-list .content-group.no-child { margin-bottom: 0.1rem; } }
.course-list .content-group.up { margin-bottom: 0.1rem; } .course-list .none {
.course-list .content-group.up .body { display: none; } display: none;
.course-list .content-group .title { position: relative; padding: 0.1rem 0.54rem 0.1rem 0.2rem; color: #313131; font-size: 0.16rem; line-height: 0.24rem; background: #e5e5e5; user-select: none; cursor: pointer; } }
.course-list .content-group .title .side { position: absolute; top: 50%; right: 0.24rem; transform: translateY(-50%); } .course-list .content-group {
.course-list .content-group .body { position: relative; padding: 0 0.2rem; font-size: 0.16rem; line-height: 0.24rem; color: #505050; cursor: pointer; } padding: 0 0.2rem;
.course-list .content-group .body:hover { background: #f3f3f3; } }
.course-list .content-group .body.on .name { color: #b2183e; } .course-list .content-group.no-child {
.course-list .content-group .body .name { padding: 0.1rem 0.8rem 0.1rem 0.2rem; border-left: 0.02rem solid #c9c9c9; } margin-bottom: 0.1rem;
.course-list .content-group .body .name:before { width: 0.2rem; height: 0.2rem; border-radius: 0.32rem; border: 0.02rem solid #c9c9c9; background: #e5e5e5; position: absolute; left: 0.11rem; top: 0.12rem; content: ""; display: block; z-index: 10; } }
.course-list .content-group .body .name .time { position: absolute; right: 0.16rem; top: 0.1rem; } .course-list .content-group.up {
margin-bottom: 0.1rem;
}
.course-list .content-group.up .body {
display: none;
}
.course-list .content-group .title {
position: relative;
padding: 0.1rem 0.54rem 0.1rem 0.2rem;
color: #313131;
font-size: 0.16rem;
line-height: 0.24rem;
background: #e5e5e5;
user-select: none;
cursor: pointer;
}
.course-list .content-group .title .side {
position: absolute;
top: 50%;
right: 0.24rem;
transform: translateY(-50%);
}
.course-list .content-group .body {
position: relative;
padding: 0 0.2rem;
font-size: 0.16rem;
line-height: 0.24rem;
color: #505050;
cursor: pointer;
}
.course-list .content-group .body:hover {
background: #f3f3f3;
}
.course-list .content-group .body.on .name {
color: #b2183e;
}
.course-list .content-group .body .name {
padding: 0.1rem 0.8rem 0.1rem 0.2rem;
border-left: 0.02rem solid #c9c9c9;
}
.course-list .content-group .body .name:before {
width: 0.2rem;
height: 0.2rem;
border-radius: 0.32rem;
border: 0.02rem solid #c9c9c9;
background: #e5e5e5;
position: absolute;
left: 0.11rem;
top: 0.12rem;
content: '';
display: block;
z-index: 10;
}
.course-list .content-group .body .name .time {
position: absolute;
right: 0.16rem;
top: 0.1rem;
}
/* 老师列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */ /* 老师列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
.list-teacher { margin-bottom: 0.2rem; overflow: hidden; } .list-teacher {
.list-teacher .img { float: left; width: 30%; min-height: 0.8rem; background: #c9c9c9; } margin-bottom: 0.2rem;
.list-teacher .ctx { position: relative; margin-left: 32%; min-height: 0.5rem; } overflow: hidden;
.list-teacher .ctx .top-ctx { position: absolute; top: 0; width: 100%; overflow: hidden; } }
.list-teacher .ctx .top-ctx .tit { font-size: 14px; color: #313131; line-height: 1.5; overflow: hidden; word-break: break-all; } .list-teacher .img {
.list-teacher .ctx .bottom-ctx { display: block; padding-top: 0.2rem; width: 100%; overflow: hidden; } float: left;
.list-teacher .ctx .bottom-ctx .t1 { font-size: 12px; line-height: 1.5; color: #707070; overflow: hidden; word-break: break-all; } width: 30%;
.list-teacher .ctx .bottom-ctx .t2 { font-size: 12px; line-height: 1.5; color: #707070; overflow: hidden; word-break: break-all; } min-height: 0.8rem;
.list-teacher .ctx .bottom-ctx .t3 { font-size: 12px; color: #707070; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } background: #c9c9c9;
}
.list-teacher .ctx {
position: relative;
margin-left: 32%;
min-height: 0.5rem;
}
.list-teacher .ctx .top-ctx {
position: absolute;
top: 0;
width: 100%;
overflow: hidden;
}
.list-teacher .ctx .top-ctx .tit {
font-size: 14px;
color: #313131;
line-height: 1.5;
overflow: hidden;
word-break: break-all;
}
.list-teacher .ctx .bottom-ctx {
display: block;
padding-top: 0.2rem;
width: 100%;
overflow: hidden;
}
.list-teacher .ctx .bottom-ctx .t1 {
font-size: 12px;
line-height: 1.5;
color: #707070;
overflow: hidden;
word-break: break-all;
}
.list-teacher .ctx .bottom-ctx .t2 {
font-size: 12px;
line-height: 1.5;
color: #707070;
overflow: hidden;
word-break: break-all;
}
.list-teacher .ctx .bottom-ctx .t3 {
font-size: 12px;
color: #707070;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
/* 课程讨论 */ /* 课程讨论 */
.pub-ques { padding: 0 0.26rem; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; } .pub-ques {
.pub-ques .ask { position: relative; float: left; margin-top: 0.22rem; width: 40%; min-width: 1rem; height: 0.42rem; border-radius: 0.28rem; border: 1rpx solid #dcdcdc; background: #ffffff; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } padding: 0 0.26rem;
.pub-ques .ask .img { position: absolute; left: 0.15rem; font-size: 0.24rem; line-height: 0.42rem; } overflow: hidden;
.pub-ques .ask .txt { position: absolute; left: 0.45rem; top: 0.01rem; height: 0.4rem; width: 80%; border: none; line-height: 0.4rem; font-size: 0.2rem; color: #313131; } -webkit-box-sizing: border-box;
.pub-ques .item-order { float: right; margin-top: 0.22rem; padding: 0 0.3rem; margin-left: 0.2rem; font-size: 0.2rem; color: #313131; text-align: center; line-height: 0.42rem; border-radius: 0.28rem; background: #ffffff; cursor: pointer; } box-sizing: border-box;
.pub-ques .item-order.on { background: #b49441; color: #ffffff; } }
.pub-ques .ask {
position: relative;
float: left;
margin-top: 0.22rem;
width: 40%;
min-width: 1rem;
height: 0.42rem;
border-radius: 0.28rem;
border: 1rpx solid #dcdcdc;
background: #ffffff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
}
.pub-ques .ask .img {
position: absolute;
left: 0.15rem;
font-size: 0.24rem;
line-height: 0.42rem;
}
.pub-ques .ask .txt {
position: absolute;
left: 0.45rem;
top: 0.01rem;
height: 0.4rem;
width: 80%;
border: none;
line-height: 0.4rem;
font-size: 0.2rem;
color: #313131;
}
.pub-ques .item-order {
float: right;
margin-top: 0.22rem;
padding: 0 0.3rem;
margin-left: 0.2rem;
font-size: 0.2rem;
color: #313131;
text-align: center;
line-height: 0.42rem;
border-radius: 0.28rem;
background: #ffffff;
cursor: pointer;
}
.pub-ques .item-order.on {
background: #b49441;
color: #ffffff;
}
// .discuss-scroll { } // .discuss-scroll { }
.discuss-scroll .item-list:first-child { margin-top: 0.3rem; } .discuss-scroll .item-list:first-child {
.discuss-scroll .item-list { position: relative; padding: 0.3rem 0.26rem; margin-bottom: 0.2rem; background: #fff; box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1); cursor: pointer; } margin-top: 0.3rem;
.discuss-scroll .item-list .user { position: relative; overflow: hidden; } }
.discuss-scroll .item-list .user .img { float: left; width: 0.6rem; height: 0.6rem; background: #e5e5e5; border-radius: 50%; } .discuss-scroll .item-list {
.discuss-scroll .item-list .user .right { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } position: relative;
.discuss-scroll .item-list .user .right .name { font-size: 0.18rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; } padding: 0.3rem 0.26rem;
.discuss-scroll .item-list .user .right .time { margin-top: 0.05rem; font-size: 0.16rem; color: #a0a0a0; } margin-bottom: 0.2rem;
.discuss-scroll .item-list .title { margin: 0.15rem 0; font-size: 0.22rem; color: #313131; font-weight: 700; line-height: 1.5; text-align: justify; } background: #fff;
.discuss-scroll .item-list .text { font-size: 0.18rem; color: #535353; line-height: 1.5; text-align: justify; /* display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; */ word-break:break-all; overflow: hidden; } box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1);
.discuss-scroll .item-list .ellipsis { display: none; position: absolute; right: 0.24rem; bottom: 0.68rem; padding: 0 0.15rem 0 0.05rem; color: #535353; background: #fff; font-size: 0.18rem; } cursor: pointer;
.discuss-scroll .item-list .ellipsis.on { display: block; } }
.discuss-scroll .item-list .result { margin-top: 0.15rem; font-size: 0.16rem; color: #313131; } .discuss-scroll .item-list .user {
.discuss-scroll .item-list .course-name { position: absolute; right: 0.32rem; bottom: 0.28rem; font-size: 0.16rem; color: #b49441; } position: relative;
.discuss-scroll .no-data { margin: 0.2rem 0; font-size: 0.24rem; color: #112c42; line-height: 2rem; text-align: center; background: #fff; } overflow: hidden;
}
.discuss-scroll .item-list .user .img {
float: left;
width: 0.6rem;
height: 0.6rem;
background: #e5e5e5;
border-radius: 50%;
}
.discuss-scroll .item-list .user .right {
position: absolute;
left: 0.72rem;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.discuss-scroll .item-list .user .right .name {
font-size: 0.18rem;
color: #313131;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.discuss-scroll .item-list .user .right .time {
margin-top: 0.05rem;
font-size: 0.16rem;
color: #a0a0a0;
}
.discuss-scroll .item-list .title {
margin: 0.15rem 0;
font-size: 0.22rem;
color: #313131;
font-weight: 700;
line-height: 1.5;
text-align: justify;
}
.discuss-scroll .item-list .text {
font-size: 0.18rem;
color: #535353;
line-height: 1.5;
text-align: justify; /* display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; */
word-break: break-all;
overflow: hidden;
}
.discuss-scroll .item-list .ellipsis {
display: none;
position: absolute;
right: 0.24rem;
bottom: 0.68rem;
padding: 0 0.15rem 0 0.05rem;
color: #535353;
background: #fff;
font-size: 0.18rem;
}
.discuss-scroll .item-list .ellipsis.on {
display: block;
}
.discuss-scroll .item-list .result {
margin-top: 0.15rem;
font-size: 0.16rem;
color: #313131;
}
.discuss-scroll .item-list .course-name {
position: absolute;
right: 0.32rem;
bottom: 0.28rem;
font-size: 0.16rem;
color: #b49441;
}
.discuss-scroll .no-data {
margin: 0.2rem 0;
font-size: 0.24rem;
color: #112c42;
line-height: 2rem;
text-align: center;
background: #fff;
}
/* 问题发布 */ /* 问题发布 */
.publish { margin-bottom: 0.5rem; padding: 0.3rem; background: #f7f7f7; overflow: hidden; } .publish {
.publish .right-goback-txt { float: right; font-size: 0.2rem; color: #000000; line-height: 40px; } margin-bottom: 0.5rem;
padding: 0.3rem;
background: #f7f7f7;
overflow: hidden;
}
.publish .right-goback-txt {
float: right;
font-size: 0.2rem;
color: #000000;
line-height: 40px;
}
/* 课程考核内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */ /* 课程考核内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
.course-assess { padding: 0.2rem; margin-bottom: 1rem; background: #ffffff; overflow: hidden; } .course-assess {
.course-assess .title { color: #313131; font-size: 0.2rem; margin: 0.4rem auto 0.2rem auto; text-align: center; } padding: 0.2rem;
.course-assess .topic { position: relative; width: 100%; height: 0.50rem; overflow: hidden; } margin-bottom: 1rem;
.course-assess .topic .line { width: 3rem; height: 1px; margin: 0.25rem auto 0 auto; background: #313131; } background: #ffffff;
.course-assess .topic .tit { position: absolute; top: 50%; left: 50%; padding: 0.1rem 0.22rem; font-size: 0.14rem; font-weight: 700; color: #313131; background: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } overflow: hidden;
.course-assess .detail { margin-bottom: 0.4rem; padding: 0 0.2rem; } }
.course-assess .title {
color: #313131;
font-size: 0.2rem;
margin: 0.4rem auto 0.2rem auto;
text-align: center;
}
.course-assess .topic {
position: relative;
width: 100%;
height: 0.5rem;
overflow: hidden;
}
.course-assess .topic .line {
width: 3rem;
height: 1px;
margin: 0.25rem auto 0 auto;
background: #313131;
}
.course-assess .topic .tit {
position: absolute;
top: 50%;
left: 50%;
padding: 0.1rem 0.22rem;
font-size: 0.14rem;
font-weight: 700;
color: #313131;
background: #fff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.course-assess .detail {
margin-bottom: 0.4rem;
padding: 0 0.2rem;
}
/* 富文本不定义在这 */ /* 富文本不定义在这 */
/* 统计表格 */ /* 统计表格 */
.course-assess .table-title { font-size: 0.16rem; font-weight: 700; margin: 0.2rem 0.26rem 0.20rem 0.26rem; text-align: justify; color: #b49441; } .course-assess .table-title {
.course-assess .table { padding: 0 0.2rem; color: #313131; padding-bottom: 0.3rem; border-bottom: 0.02rem solid #c9c9c9; } font-size: 0.16rem;
.course-assess .table .col3-td1 { float: left; padding-left: 0.15rem; width: 65%; text-align: left; box-sizing: border-box; -webkit-box-sizing: border-box; } font-weight: 700;
.course-assess .table .col3-td2 { float: left; width: 21%; text-align: center; } margin: 0.2rem 0.26rem 0.2rem 0.26rem;
.course-assess .table .col3-td3 { float: left; width: 14%; text-align: right; box-sizing: border-box; -webkit-box-sizing: border-box; } text-align: justify;
.course-assess .table .col2-td1 { float: left; padding-left: 0.15rem; width: 86%; text-align: left; box-sizing: border-box; -webkit-box-sizing: border-box; } color: #b49441;
.course-assess .table .col2-td2 { float: left; width: 14%; text-align: right; box-sizing: border-box; -webkit-box-sizing: border-box; } }
.course-assess .table .th { padding: 0 0.2rem; font-size: 0.16rem; overflow: hidden; border-bottom: 0.02rem solid #e5e5e5; line-height: 1.5; font-weight: 700; } .course-assess .table {
.course-assess .table .tb { padding: 0 0 0 0.2rem; font-size: 0.14rem; overflow: hidden; } padding: 0 0.2rem;
.course-assess .table .tb .tt { padding: 0.1rem 0 0.02rem 0; line-height: 0.24rem; font-weight: 700; } color: #313131;
.course-assess .table .tb .rd { padding-right: 0.2rem; overflow: hidden; /* border-bottom: 1rpx solid #e5e5e5; */ line-height: 0.26rem; /* padding: 10rpx 0; */ } padding-bottom: 0.3rem;
.course-assess .table .tb .rd:hover { background: #efefef; } border-bottom: 0.02rem solid #c9c9c9;
}
.course-assess .table .col3-td1 {
float: left;
padding-left: 0.15rem;
width: 65%;
text-align: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.course-assess .table .col3-td2 {
float: left;
width: 21%;
text-align: center;
}
.course-assess .table .col3-td3 {
float: left;
width: 14%;
text-align: right;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.course-assess .table .col2-td1 {
float: left;
padding-left: 0.15rem;
width: 86%;
text-align: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.course-assess .table .col2-td2 {
float: left;
width: 14%;
text-align: right;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.course-assess .table .th {
padding: 0 0.2rem;
font-size: 0.16rem;
overflow: hidden;
border-bottom: 0.02rem solid #e5e5e5;
line-height: 1.5;
font-weight: 700;
}
.course-assess .table .tb {
padding: 0 0 0 0.2rem;
font-size: 0.14rem;
overflow: hidden;
}
.course-assess .table .tb .tt {
padding: 0.1rem 0 0.02rem 0;
line-height: 0.24rem;
font-weight: 700;
}
.course-assess .table .tb .rd {
padding-right: 0.2rem;
overflow: hidden; /* border-bottom: 1rpx solid #e5e5e5; */
line-height: 0.26rem; /* padding: 10rpx 0; */
}
.course-assess .table .tb .rd:hover {
background: #efefef;
}
/* .course-assess .table .tb .rd:last-child { border-bottom: none; } */ /* .course-assess .table .tb .rd:last-child { border-bottom: none; } */
.course-assess .status-text { padding-left: 0.3rem; font-size: 0.14rem; color: #000000; line-height: 1.5; } .course-assess .status-text {
padding-left: 0.3rem;
font-size: 0.14rem;
color: #000000;
line-height: 1.5;
}
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.detail-box { margin: 0.2rem; } .detail-box {
margin: 0.2rem;
}
.detail-box .box-thd .progress .el-progress { .detail-box .box-thd .progress .el-progress {
width: 80%; width: 80%;
} }
...@@ -1033,7 +1458,11 @@ body .el-tab-pane { padding-top: 0; } ...@@ -1033,7 +1458,11 @@ body .el-tab-pane { padding-top: 0; }
display: block; display: block;
} }
/* 课程考核样式 */ /* 课程考核样式 */
.detail-box .course-assess .detail { padding: 0; } .detail-box .course-assess .detail {
.detail-box .course-assess .table { padding: 0 0 0.3rem 0; } padding: 0;
}
.detail-box .course-assess .table {
padding: 0 0 0.3rem 0;
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论