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

我都笔记组件提取

Browse Source
This commit is contained in:
zhaofang
2022-09-07 19:32:21 +08:00
parent 8d7e9d98d7
commit ae4dc87f21
7 changed files with 287 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/views/study/coursenew.vue
View File

@@ -104,7 +104,7 @@
</div>
</div>
</div>
<div style="padding-left:5px;margin: 14px 0px;background-color: #FFFFFF;" class="info">
<div style="padding-left:5px;margin: 24px 0px;background-color: #FFFFFF;" class="info">
<div class="coure-tab">
<div @click="coutab" :class="courestab == true? 'coureactive' : ''">课程评论<span class=""></span> </div>
<div @click="coutab" :class="courestab == false? 'coureactive' : ''">课程笔记<span class=""></span> </div>
@@ -128,81 +128,22 @@
<div @click="heartabtwo" :class="tab == 2 ? 'tab-active' : ' '"><i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记</div>
</div>
<!-- 课程单元 -->
<div class="course-units" v-if="tab == 1">
<div class="units-info">
1. 任务工程师角色认知
</div>
<div class="units-info units-active">
<img src="../../../public/images/playicon.png" alt=""> 1. 任务工程师角色认知
</div>
<div class="units-info">
1. 任务工程师角色认知
</div>
<div class="units-info">
1. 任务工程师角色认知
</div>
<div class="units-info">
1. 任务工程师角色认知
</div>
<div class="units-info">
1. 任务工程师角色认知
</div>
<div class="units-info">
1. 任务工程师角色认知
</div>
<div class="units-info">
1. 任务工程师角色认知
</div>
<div class="units-info">
1. 任务工程师角色认知
</div>
<div class="units-info">
1. 任务工程师角色认知
<div style="min-height: 500px;">
<div class="catalog">
<div v-for="(item, index) in catalogTree" :key="index" :name="index">
<div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i">
<img v-if="contentData.id == ele.id" src="../../../public/images/playicon.png" alt=""> 1. {{ ele.contentName }}
</div>
</div>
</div>
</div>
</div>
<!-- 我的笔记 -->
<div class="mynote" v-if="tab == 2">
<div class="mynote-tab">
<div @click="notetab1" :class="notetab == 1 ? 'noteactive' : ' ' "> <a href="#">新增笔记</a> </div>
<div @click="notetab2" :class="notetab == 2 ? 'noteactive' : ' '"> <a href="#">我的笔记</a> </div>
</div>
<div class="newcote-content" v-if="notetab == 1">
<div class="newcote-time">
<img src="../../../public/images/coteplay.png" alt="">
8:40
<img src="../../../public/images/cotedetel.png" alt="">
</div>
<div class="newcote-text">
我见过的策划们，不管是甲方企业的，还是广告代理公司的，还营销策划公司的，在做策略写方案的时候，都经常错误：找一个营销理论，做策略时直接向上套。不管是什么行业、企业处在什么发展阶段，都要照着这个理论的要求来实施营销传播，写PPT时也要照着这个理论的框架来写。
我见过的策划们，不管是甲方企业的，还是广告代理公司的，还营销策划公司的，在做策略写方案的时候，都经常错误：找一个营销理论，做策略时直接向上套。不管是什么行业、企业处在什么发展阶段，都要照着这个理论的要求来实施营销传播，写PPT时也要照着这个理论的框架来写。
</div>
</div>
<div class="mycote-content" v-if="notetab == 2">
<div style="border-bottom:1px solid #4444;padding-bottom:25px;">
<span class="mycote-time">2022-06-21 21:35:12 <span class="sm">私密</span> <span class="more" icon="el-icon-more"></span> </span>
<div style="margin-top:20px" class="newcote-time">
<img src="../../../public/images/coteplay.png" alt="">
8:40
<img src="../../../public/images/cotedetel.png" alt="">
</div>
<div class="newcote-text">
在做策略写方案的时候，都经常错套。都要照着这个理论的要求来实施营销传播，写PPT时也要照着这个理论的框架来写。
我见划公司的，在做策略写方案的时候，都经常不管是什么行业、企业处在什么来实施营销传播，写PPT时也要照着这个理论的框架来写。
</div>
</div>
<h6 class="mycote-dibu">已经到底啦</h6>
</div>
<div class="newcote-bottom" v-if="notetab == 1">
<span> <img src="../../../public/images/playtime.png" alt=""> 视频位置</span>
<el-radio v-model="radio" label="1">公开</el-radio>
<el-radio v-model="radio" label="2">私密</el-radio>
<el-button type="primary" size="small">保存</el-button>
</div>
<my-note :data="contentData" @videoLocation="videoLocation"></my-note>
</div>
</div>
<div class="coures-tearch">
<div class="tearch-top"><img src="../../../public/images/tearch-top.png" alt=""></div>
@@ -239,7 +180,6 @@
<script>
import { mapGetters } from 'vuex';
import portalHeader from "@/components/PortalHeader.vue";
import portalFooter from "@/components/PortalFooter.vue";
import comments from "@/components/Portal/comments.vue";
import interactBar from "@/components/Portal/interactBar.vue";
import audioPlayer from '@/components/AudioPlayer/index.vue';
@@ -252,6 +192,7 @@ import apiStudy from '@/api/modules/courseStudy.js';
import apiVideoStudy from "@/api/modules/videoStudy.js";
import apiCourseGrade from '@/api/modules/courseGrade.js';
import apiPraises from '@/api/modules/praises.js';
import apiNote from '@/api/modules/note.js';
import apiTrample from '@/api/modules/trample.js';
import apiCoursePortal from '@/api/modules/coursePortal.js';
import apiCourse from '@/api/modules/course.js';
@@ -263,15 +204,18 @@ import courseImage from '@/components/Course/courseImage.vue';
import exam from '@/components/Course/exam';
import homework from '@/components/Course/homework';
import assess from '@/components/Course/assess';
import myNote from '../../components/Course/myNote.vue';
export default {
name: "atticle",
components: {courseImage, portalHeader, portalFooter, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer },
components: {courseImage, portalHeader, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer,myNote },
data(){
return{
intTimeNote:'',
courestab:true,
curCFile:{
converStatus:4,
},
radio:'',
interactRuning:false,
playerBoxShow:false,
userAvatarText,
@@ -357,6 +301,11 @@ export default {
}
},
methods: {
// 笔记功能
videoLocation() {// 记录笔记视频位置
this.$store.dispatch("SetIntTimeNote", 1);
},
coutab(){
this.courestab = !this.courestab;
},
@@ -490,9 +439,9 @@ export default {
}
},
handleChange(val) {
console.log(val);
},
// handleChange(val) {
// console.log(val);
// },
loadScorePraiseAndTrample() {
//加载是否请过分
apiCourseGrade.has(this.courseId).then(rs => {
@@ -675,6 +624,7 @@ export default {
onPlayerPlaying(itme) {
this.isAppendTime=false;
this.appendStartTime=null;
this.intTimeNote = parseInt(itme);
//console.log("当前播放"+itme);
//console.log("当前播放11"+itme);
if (this.contentData.contentType && this.contentData.contentType == 10){
@@ -1081,12 +1031,9 @@ export default {
heartabtwo(){
this.tab = 2
},
notetab1(){
this.notetab = 1
notetab1(num){
this.notetab = num
},
notetab2(){
this.notetab = 2
}
},
}
</script>
@@ -1114,6 +1061,10 @@ export default {
}
}
.coures-tearch{
margin-top: 24px;
margin-left: 20px;
}
.coure-tab{
display: flex;
width: 300px;
@@ -1577,99 +1528,10 @@ export default {
.more{
float: right;
}
.newcote-bottom{
span{
font-size: 14px;
color: #333333;
margin-right: 30px;
img{
width: 20px;
height: 24px;
vertical-align: middle;
}
}
}
.newcote-time{
width: 120px;
height: 30px;
border-radius: 4px;
border: 1px solid #3379FB;
font-size: 14px;
font-weight: 400;
color: #387DF7;;
text-align: center;
line-height: 30px;
img{
vertical-align: middle;
margin: 0 5px;
}
}
.newcote-text{
margin-top: 24px;
font-size: 14px;
color: #333333;
}
.mycote-content{
margin: 30px 0px;
box-sizing: border-box;
padding: 35px 30px;
height: 474px;
background-color: #fff;
.mycote-time{
color: #666;
font-size: 14px;
padding-bottom: 20px;
.sm{
width: 50px;
height: 22px;
border-radius: 10px;
border: 1px solid #3379FB;
color: #3379FB;
font-size: 12px;
line-height: 50px;
margin-left: 20px;
padding: 3px 10px;
}
}
.mycote-dibu{
margin: 50px 38%;
color: #999999;
font-size: 14px;
}
}
.newcote-content{
margin: 30px 0px;
box-sizing: border-box;
padding: 35px 30px;
height: 474px;
background-color: #F5F5F5 ;
}
.mynote{
// width: 100%;
margin: 35px 30px;
.mynote-tab{
width: 180px;
margin-top: 17px;
display: flex;
div{
font-size: 16px;
color: #666666;
flex: 1;
}
.noteactive a{
font-weight: 600;
color: #333333;
padding-bottom: 7px;
border-bottom: 4px solid #387DF7;
}
}
}
.coures-content{
height: 745px;
margin: 20px 80px;
@@ -1678,12 +1540,12 @@ export default {
.coures-infobox{
width: 500px;
.coures-info{
height: 745px;
height: 710px;
background-color: #fff;
box-sizing: border-box;
.hear-tab{
margin: 35px 30px;
margin: 35px 30px 10px 30px;
width: 300px;
border-bottom: 1px solid #D8D8D8 ;
display: flex;