|
|
@@ -24,6 +24,72 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="body_student">
|
|
|
+ <div class="new_top">
|
|
|
+ <div class="before"></div>
|
|
|
+ <div class="courseIndex">
|
|
|
+ <div>第{{ courseType - 0 + 1 }}阶段</div>
|
|
|
+ <div>{{ chapInfo.dyName }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="position: absolute; right: 0"
|
|
|
+ class="returnBtn"
|
|
|
+ @click.stop="
|
|
|
+ goTo(
|
|
|
+ '/courseDetail?userid=' +
|
|
|
+ userid +
|
|
|
+ '&oid=' +
|
|
|
+ oid +
|
|
|
+ '&courseId=' +
|
|
|
+ id
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 返回
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="student_head">
|
|
|
+ <div class="course_text">{{ chapInfo.dyText }}</div>
|
|
|
+ <div class="box_course" v-if="vedio.length > 0">
|
|
|
+ <div class="wheel">
|
|
|
+ <div class="workd_media">
|
|
|
+ <video-player
|
|
|
+ class="video-player vjs-custom-skin"
|
|
|
+ ref="videoPlayer"
|
|
|
+ :playsinline="true"
|
|
|
+ :options="playerO"
|
|
|
+ @play="onPlayerPlay($event)"
|
|
|
+ style="width: 90%; height: 100%; margin: 20px auto"
|
|
|
+ ></video-player>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="vedioList">
|
|
|
+ <div class="vedioNav">视频列表</div>
|
|
|
+ <div
|
|
|
+ class="media"
|
|
|
+ v-for="(media, index) in vedio"
|
|
|
+ :key="index"
|
|
|
+ style="width: 160px; margin: 10px auto"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ style="height: 90px; width: 160px"
|
|
|
+ :src="
|
|
|
+ media.cover != null && media.cover != ''
|
|
|
+ ? JSON.parse(media.cover).length > 0
|
|
|
+ ? JSON.parse(media.cover)[0].url
|
|
|
+ : mr
|
|
|
+ : mr
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ @click="lookVedio(media.url)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="font-size: 18px; margin: 15px">
|
|
|
+ {{ chapInfo.dyName }}
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div v-else>暂无视频</div>
|
|
|
+ </div>
|
|
|
<div class="study_top">
|
|
|
<div class="checkbox">
|
|
|
<div
|
|
|
@@ -32,10 +98,10 @@
|
|
|
@click="type = 1"
|
|
|
>
|
|
|
<div v-if="type == 1">
|
|
|
- <img src="../assets/icon/videoActive.png" alt="" />
|
|
|
+ <img src="../assets/icon/allActive.png" alt="" />
|
|
|
</div>
|
|
|
- <div v-else><img src="../assets/icon/video.png" alt="" /></div>
|
|
|
- 视频
|
|
|
+ <div v-else><img src="../assets/icon/all.png" alt="" /></div>
|
|
|
+ 全部
|
|
|
</div>
|
|
|
<div
|
|
|
class="check"
|
|
|
@@ -83,75 +149,20 @@
|
|
|
工具
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="returnBtn"
|
|
|
- @click.stop="
|
|
|
- goTo(
|
|
|
- '/courseDetail?userid=' +
|
|
|
- userid +
|
|
|
- '&oid=' +
|
|
|
- oid +
|
|
|
- '&courseId=' +
|
|
|
- id
|
|
|
- )
|
|
|
- "
|
|
|
- >
|
|
|
- 返回
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="student_head" v-if="type == 1">
|
|
|
- <div class="box_course">
|
|
|
- <div class="wheel" v-if="vedio.length > 0">
|
|
|
- <div class="workd_media">
|
|
|
- <!-- <el-image
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :src="require('../../assets/tu4.png')"
|
|
|
- ></el-image> -->
|
|
|
- <video-player
|
|
|
- class="video-player vjs-custom-skin"
|
|
|
- ref="videoPlayer"
|
|
|
- :playsinline="true"
|
|
|
- :options="playerO"
|
|
|
- @play="onPlayerPlay($event)"
|
|
|
- style="width: 95%; height: 100%; margin: 20px auto"
|
|
|
- ></video-player>
|
|
|
- </div>
|
|
|
- <!-- <div class="cd_content_steps">
|
|
|
- <div
|
|
|
- class="cd_steps_box"
|
|
|
- v-for="(media, index) in vedio"
|
|
|
- :key="media"
|
|
|
- @click="switchVideo(media, index)"
|
|
|
- >
|
|
|
- <i :class="{ active: index < 1 }"></i> -->
|
|
|
- <!-- <i
|
|
|
- :class="{
|
|
|
- active: playerOptions.sources[0].src == media,
|
|
|
- }"
|
|
|
- ></i>
|
|
|
- <span>视频{{ index + 1 }}</span> -->
|
|
|
- <!-- </div>
|
|
|
- </div> -->
|
|
|
- <!-- <img src="../assets/sp2.png" alt="" /> -->
|
|
|
- </div>
|
|
|
- <div style="font-size: 18px; margin: 15px">
|
|
|
- {{ chapInfo.dyName }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="student_body">
|
|
|
<div class="videoTop">
|
|
|
- <div v-if="type == 1">视频列表</div>
|
|
|
+ <div v-if="type == 1"></div>
|
|
|
<div v-if="type == 3">{{ chapInfo.dyName }}</div>
|
|
|
<div v-if="type == 5">工具</div>
|
|
|
<div v-else></div>
|
|
|
- <div
|
|
|
+ <!-- <div
|
|
|
@click="openAddWork"
|
|
|
class="upbtn"
|
|
|
v-if="type == 1 || type == 2"
|
|
|
>
|
|
|
提交实践作业
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<div class="project_box" v-if="type == 2">
|
|
|
<div class="detail_content_top">
|
|
|
@@ -160,26 +171,75 @@
|
|
|
</div>
|
|
|
<div class="detail_content" v-html="courseDetail.template"></div>
|
|
|
</div>
|
|
|
- <div class="project_box" v-if="type == 1 && vedio.length > 0">
|
|
|
- <div class="filebox">
|
|
|
- <div class="media" v-for="(media, index) in vedio" :key="index">
|
|
|
- <img
|
|
|
- :src="
|
|
|
- media.cover != null && media.cover != ''
|
|
|
- ? JSON.parse(media.cover).length > 0
|
|
|
- ? JSON.parse(media.cover)[0].url
|
|
|
- : mr
|
|
|
- : mr
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <div class="title">{{ media.name }}</div>
|
|
|
- <div class="btn" @click="lookVedio(media.url)">点击播放</div>
|
|
|
+ <div
|
|
|
+ class="project_box"
|
|
|
+ style="padding-bottom: 40px"
|
|
|
+ v-if="type == 1 && vedio.length > 0"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="queTop">
|
|
|
+ <div class="question">
|
|
|
+ <img src="../assets/icon/question.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="queTitle">
|
|
|
+ <div>提问：</div>
|
|
|
+ <div>{{ chapInfoList[courseType - 0].question }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ediBottom">
|
|
|
+ <editor-bar
|
|
|
+ style="width: 75%; padding: 10px 0 20px 0px; margin: 0"
|
|
|
+ v-model="question"
|
|
|
+ ></editor-bar>
|
|
|
+ <div
|
|
|
+ class="addEditor"
|
|
|
+ style="position: absolute; bottom: -20px; right: 25%"
|
|
|
+ @click="addQuestion"
|
|
|
+ >
|
|
|
+ 提交
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="project_box" v-if="type == 1 && vedio.length == 0">
|
|
|
- 暂无视频
|
|
|
+ <div
|
|
|
+ class="project_box"
|
|
|
+ style="margin-top: 15px; padding-bottom: 30px"
|
|
|
+ v-if="type == 1"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="queTop">
|
|
|
+ <div class="question">
|
|
|
+ <img src="../assets/icon/homeWork.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="queTitle">
|
|
|
+ <div>作业上传<span>(上传图文视频等)</span></div>
|
|
|
+ <div>：{{ chapInfo.dyName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ediBottom">
|
|
|
+ <div
|
|
|
+ class="addEditor"
|
|
|
+ style="margin-top: 23px"
|
|
|
+ @click="openAddWork"
|
|
|
+ >
|
|
|
+ 选择文件
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="project_box" v-if="type == 3">
|
|
|
<div class="filebox">
|
|
|
@@ -211,10 +271,7 @@
|
|
|
<div class="upFile" v-if="type == 3 || type == 4">提交</div>
|
|
|
</div>
|
|
|
<div class="project_box" v-if="type == 5">
|
|
|
- <div
|
|
|
- class="filebox"
|
|
|
- v-if="!chapInfo.chapterInfo[0].toolChoose"
|
|
|
- >
|
|
|
+ <div class="filebox" v-if="!chapInfo.chapterInfo[0].toolChoose">
|
|
|
暂无数据
|
|
|
</div>
|
|
|
<div class="filebox" v-else>
|
|
|
@@ -400,7 +457,9 @@
|
|
|
|
|
|
<script>
|
|
|
import "../common/aws-sdk-2.235.1.min.js";
|
|
|
+import EditorBar from "../components/tools/wangEnduit.vue";
|
|
|
export default {
|
|
|
+ components: { EditorBar },
|
|
|
data() {
|
|
|
return {
|
|
|
dialogVisible: false,
|
|
|
@@ -457,6 +516,7 @@ export default {
|
|
|
noneBtnImg: false,
|
|
|
proVisible: false,
|
|
|
progress: 0,
|
|
|
+ question: "",
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -628,6 +688,30 @@ export default {
|
|
|
this.courseType = i;
|
|
|
this.getCourseDetail();
|
|
|
},
|
|
|
+ addQuestion() {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ cid: this.id,
|
|
|
+ // chid: this.chapInfoList[this.courseType - 0].chapterInfo[0].chapterid,
|
|
|
+ chid: this.courseType,
|
|
|
+ t: this.question,
|
|
|
+ uid: this.userid,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "addProblem", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "提交成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.question = "";
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("提交失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
getCourseDetail() {
|
|
|
const loading = this.$loading.service({
|
|
|
background: "rgba(255, 255, 255, 0.7)",
|
|
|
@@ -794,7 +878,8 @@ export default {
|
|
|
.evaluate > img,
|
|
|
.up_photo > img,
|
|
|
.chapter_add > img,
|
|
|
-.deleteWord > img {
|
|
|
+.deleteWord > img,
|
|
|
+.question > img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -824,10 +909,12 @@ export default {
|
|
|
}
|
|
|
.box_course {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.wheel {
|
|
|
- width: 100%;
|
|
|
+ width: 70%;
|
|
|
}
|
|
|
.right_box {
|
|
|
display: flex;
|
|
|
@@ -844,7 +931,6 @@ export default {
|
|
|
.student_body {
|
|
|
width: 100%;
|
|
|
margin: 0 auto;
|
|
|
- background: #fff;
|
|
|
margin-top: 20px;
|
|
|
padding: 0 0 20px;
|
|
|
}
|
|
|
@@ -889,11 +975,9 @@ export default {
|
|
|
flex-direction: row;
|
|
|
justify-content: space-between;
|
|
|
background: #fff;
|
|
|
- height: 60px;
|
|
|
align-items: center;
|
|
|
width: 95%;
|
|
|
- margin: 10px auto;
|
|
|
- border-bottom: 2px solid #ededed;
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
.upbtn {
|
|
|
margin: 25px;
|
|
|
@@ -909,6 +993,7 @@ export default {
|
|
|
}
|
|
|
.project_box {
|
|
|
padding: 0 30px 10px 21px;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
|
|
|
.filebox {
|
|
|
@@ -1033,9 +1118,6 @@ export default {
|
|
|
.marginT {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
-.workd_media {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
.cd_content_steps {
|
|
|
display: flex;
|
|
|
width: 90%;
|
|
|
@@ -1231,4 +1313,87 @@ export default {
|
|
|
width: 75px;
|
|
|
margin-top: 7px;
|
|
|
}
|
|
|
+.new_top {
|
|
|
+ display: flex;
|
|
|
+ background: #fff;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 0;
|
|
|
+ height: 60px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.before {
|
|
|
+ position: absolute;
|
|
|
+ background: #c3dad4;
|
|
|
+ width: 6px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.courseIndex {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+}
|
|
|
+.courseIndex > div:nth-child(1) {
|
|
|
+ margin: 0 20px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ color: #288a6e;
|
|
|
+ font-size: 20px;
|
|
|
+ width: 80px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 4px solid #41c4a4;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.courseIndex > div:nth-child(2) {
|
|
|
+ font-size: 23px;
|
|
|
+ color: #c0c0c0;
|
|
|
+}
|
|
|
+.course_text {
|
|
|
+ padding: 20px 0 10px 15px;
|
|
|
+ text-indent: 30px;
|
|
|
+ width: 80%;
|
|
|
+ min-height: 80px;
|
|
|
+}
|
|
|
+.vedioList {
|
|
|
+ background: #f2f2f2;
|
|
|
+ width: 200px;
|
|
|
+ height: 530px;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+.vedioNav {
|
|
|
+ margin: 10px 15px;
|
|
|
+ border-bottom: 1px solid #d7d7d7;
|
|
|
+ padding-bottom: 5px;
|
|
|
+}
|
|
|
+.queTop {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 0;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.question {
|
|
|
+ width: 40px;
|
|
|
+}
|
|
|
+.queTitle {
|
|
|
+ margin-left: 5px;
|
|
|
+ font-size: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.queTitle > div:nth-child(1) {
|
|
|
+ color: #cbcbcb;
|
|
|
+}
|
|
|
+.addEditor {
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ background: #42cda6;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ box-shadow: 1px 3px 6px 1px #bfbfbf;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|
zengyicheng
