191 lines
14 KiB
HTML
191 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<title>课程学习</title>
|
|||
|
|
<vt:include file="inc/meta_api.inc" />
|
|||
|
|
<script type="text/javascript" src="/Utility/CoreScripts/MessageBox.js?ver={$version}"></script>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="/Utility/CoreStyles/MessageBox.css?ver={$version}"/>
|
|||
|
|
<script type="text/javascript" src="/Utility/Qiniuyun/qiniu-web-player-1.2.3.js"></script>
|
|||
|
|
<link href="Styles/CourseStudy.css?ver={$version}" rel="stylesheet" type="text/css" />
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body accid="{$Account.Ac_id}" olid="{$olid}">
|
|||
|
|
<div id="body">
|
|||
|
|
<script>
|
|||
|
|
document.body.onselectstart = document.body.oncontextmenu = function () { return false; };
|
|||
|
|
document.body.onpaste = document.body.oncopy = function () { return false; };
|
|||
|
|
</script>
|
|||
|
|
<div id="MainBox" :style="!median ? 'width: calc(80% - 5px);' : 'width: calc(99.5% - 5px);'">
|
|||
|
|
<div class="mainTop">
|
|||
|
|
<div class="courseBox">
|
|||
|
|
<template v-if="JSON.stringify(course) != '{}' && course.Cou_Name!=''" remark="课程名称">
|
|||
|
|
课程：<a :href="'course.ashx?id='+course.Cou_ID">《{{course.Cou_Name}}》</a>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
当前课程好像不存在，如果是正在加载，请等待！
|
|||
|
|
</template>
|
|||
|
|
<template v-if="JSON.stringify(subject) != '{}' && subject.Sbj_Name!=''" remark="专业">
|
|||
|
|
- <a :href="'courses.ashx?sbjid='+course.Cou_ID">{{subject.Sbj_Name}}</a>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="btnKnowledge" v-if="state.isKnl" v-on:click="knlClick">知识库</div>
|
|||
|
|
<div class="oltitle">
|
|||
|
|
<a v-if="titState== 'loading'" class="titCurr">加载中...</a>
|
|||
|
|
<a v-if="(state.isNull || !state.canStudy) && titState != 'loading' " v-on:click="titState='isNull'"
|
|||
|
|
:class="titState=='isNull' || !state.canStudy ? 'titCurr':''">提 示</a>
|
|||
|
|
<a v-if="state.existVideo && titState != 'loading'" v-on:click="titState='existVideo'"
|
|||
|
|
:class="titState=='existVideo' ? 'titCurr':''">视 频</a>
|
|||
|
|
<a v-if="state.isLive && titState != 'loading' && state.canStudy" v-on:click="titState='isLive'"
|
|||
|
|
:class="titState=='isLive' ? 'titCurr':''">直播</a>
|
|||
|
|
<a v-if="state.isContext && titState != 'loading'" v-on:click="titState='isContext'"
|
|||
|
|
:class="titState=='isContext' ? 'titCurr':''">内 容</a>
|
|||
|
|
<a v-if="state.isAccess && titState != 'loading'" v-on:click="titState='isAccess'"
|
|||
|
|
:class="titState=='isAccess' ? 'titCurr':''">附 件</a>
|
|||
|
|
<a v-if="state.isQues && titState != 'loading'" v-on:click="titState='isQues'"
|
|||
|
|
:class="titState=='isQues' ? 'titCurr':''">习 题</a>
|
|||
|
|
|
|||
|
|
<!-- <div class="titBox">作业</div>-->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--左侧顶部结束-->
|
|||
|
|
<div id="contextArea" v-if="!state.DeskAllow">
|
|||
|
|
<div remark="正在加载" v-show="titState=='loading'">
|
|||
|
|
<p id="preloader-2">
|
|||
|
|
|
|||
|
|
<span></span>
|
|||
|
|
|
|||
|
|
<span></span>
|
|||
|
|
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div remark="提示" v-show="titState=='isNull' || !state.canStudy ">
|
|||
|
|
<img src="images/studyBg.jpg" class="bgPicture" style="height: 100%;width:100%;" />
|
|||
|
|
<div class="noSelect" v-if="!!account.Ac_ID">
|
|||
|
|
没有内容，或无权查看！</div>
|
|||
|
|
<div class="noSelect" v-if="!account.Ac_ID">
|
|||
|
|
<a href="/student/index.ashx">未登录，点击此处登录！</a></div>
|
|||
|
|
<div class="noSelect" v-if="state.canStudy && state.LiveStart && state.LiveOver">直播已经结束</div>
|
|||
|
|
</div>
|
|||
|
|
<div remark="视频" v-show="titState=='existVideo'" :video="state.urlVideo">
|
|||
|
|
<div id="videoplayer" v-show="!state.otherVideo && !state.isLive"
|
|||
|
|
style="height: 100%;width:100%;" remark="点播">
|
|||
|
|
</div>
|
|||
|
|
<div id="accinfo" v-if="JSON.stringify(account) != '{}' && !state.otherVideo && !state.isLive" title="仅自己可见" remark="飘浮信息，防录屏">
|
|||
|
|
{{account.Ac_Name}} {{account.Ac_MobiTel1}}</div>
|
|||
|
|
<div id="chartlayer" v-show="!state.otherVideo && switchSubtitle" remark="弹幕层"></div>
|
|||
|
|
<div id="videoinfo" v-show="!state.otherVideo && !state.isLive">
|
|||
|
|
<span style="display: non6e">视频时长：{{video.total}}秒，播放进度：{{playtime}}秒，</span>
|
|||
|
|
<span>累计学习{{video.studytime}}秒，完成{{video.percent}}%，</span>
|
|||
|
|
<span style="cursor: pointer"
|
|||
|
|
v-on:click="videoSeek(video.playhistime)">上次播放到{{video.playhistime}}秒</span>
|
|||
|
|
<span class="videolog info" v-show="studylogState==1">学习进度提交成功!</span>
|
|||
|
|
<span class="videolog error" v-show="studylogState==-1">学习进度提交失败!</span>
|
|||
|
|
</div>
|
|||
|
|
<iframe id="vedioiframe" height="100%" width="100%"
|
|||
|
|
v-if="state.outerVideo && state.otherVideo && !state.isLive" :src="state.urlVideo"
|
|||
|
|
allowscriptaccess="always" allowfullscreen="true" wmode="opaque"
|
|||
|
|
allowtransparency="true" frameborder="0" remark="外部视频链接"
|
|||
|
|
type="application/x-shockwave-flash"></iframe>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div remark="直播" v-show="titState=='isLive'" :video="state.urlVideo">
|
|||
|
|
<div id="accinfo" v-if="JSON.stringify(account) != '{}' && state.isLive && state.isLiving" title="仅自己可见" remark="飘浮信息，防录屏">
|
|||
|
|
{{account.Ac_Name}} {{account.Ac_MobiTel1}}</div>
|
|||
|
|
<div id="livebox" v-show="state.isLive && state.isLiving" style="height: 100%;width:100%;"
|
|||
|
|
remark="直播">
|
|||
|
|
</div>
|
|||
|
|
<div id="liveStopbox" v-show="state.isLive && !state.isLiving"
|
|||
|
|
style="height: 100%;width:100%;" remark="直播未开始">
|
|||
|
|
<img src="images/livebg.jpg" class="bgPicture" style="height: 100%;width:100%;" />
|
|||
|
|
<div class="liveStop_Tit" v-show="!state.LiveStart">直播未开始！</div>
|
|||
|
|
<div class="liveStop_Tit" v-show="state.LiveOver">直播已经结束！</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div remark="内容" v-show="titState=='isContext'" id="details">
|
|||
|
|
<div id="detailsArea" v-html="outline.Ol_Intro"> </div>
|
|||
|
|
</div>
|
|||
|
|
<div remark="附件" v-show="titState=='isAccess'">
|
|||
|
|
<accessory ref='accessory' :uid="outline.Ol_UID" :isbuy="state.isBuy"></accessory>
|
|||
|
|
</div>
|
|||
|
|
<div remark="习题" v-show="titState=='isQues'">
|
|||
|
|
<iframe :src="outline!=null ? 'Exercises.ashx?olid='+outline.Ol_ID : ''"
|
|||
|
|
style="height: 100%" marginwidth="0" marginheight="0" align="top" scrolling="no"
|
|||
|
|
width="100%" frameborder="0" allowtransparency="true"></iframe>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="contextArea" v-if="state.DeskAllow">
|
|||
|
|
<div><div class="noSelect">请在DeskApp应用中打开</div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="median" remark="此为分隔线"><span v-on:click="median = !median"
|
|||
|
|
:class="!median ? 'open' : 'close'"></span></div>
|
|||
|
|
<!--开始右侧菜单区域-->
|
|||
|
|
<div id="rightBox" :style="!median ? 'width: 20%;' : 'width: 0%'" v-show="!median">
|
|||
|
|
<div class="boxBar">
|
|||
|
|
<div class="title" v-on:click="rightState = 'outline'"
|
|||
|
|
:class="rightState=='outline' ? 'titleCurr' : ''"> 章节目录</div>
|
|||
|
|
<div class="title" v-on:click="rightState = 'chat'"
|
|||
|
|
:class="rightState=='chat' ? 'titleCurr' : ''"> 交流咨询</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="outline rightArea" v-show="rightState=='outline'">
|
|||
|
|
<template v-for="d in outlines" remark="章节列表">
|
|||
|
|
<div v-if="d.Ol_IsUse" :class="'olitem '+(d.Ol_IsVideo ? 'li-video ' : '')+(d.Ol_ID==olid ? 'current ' : '')+(d.Ol_IsLive ? 'li-live ' : '')"
|
|||
|
|
:isvideo="d.Ol_IsVideo" :olid="d.Ol_ID"
|
|||
|
|
:style="'padding-left:'+(d.Ol_Level*15+5)+'px'">
|
|||
|
|
<template v-if="state.isBuy || d.Ol_IsFree || course.Cou_IsFree"
|
|||
|
|
remark="如果购买，或可以试学">
|
|||
|
|
<a :href="'CourseStudy.ashx?olid='+d.Ol_ID+'&couid='+couid"
|
|||
|
|
v-if="d.Ol_IsFinish"
|
|||
|
|
v-on:click="outlineClick(d.Ol_ID,$event)">{{d.Ol_XPath}}{{d.Ol_Name}}
|
|||
|
|
</a>
|
|||
|
|
<template v-else> {{d.Ol_XPath}}{{d.Ol_Name}} </template>
|
|||
|
|
<span class="nofinish"
|
|||
|
|
v-show="d.Ol_IsFree && d.Ol_IsFinish && !state.isBuy ">试学</span>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<a :href="'CourseBuy.ashx?couid='+d.Cou_ID">
|
|||
|
|
{{d.Ol_XPath}}{{d.Ol_Name}}
|
|||
|
|
<span v-show="d.Ol_IsFinish" class="buy">购买</span></a>
|
|||
|
|
</template>
|
|||
|
|
<span class="nofinish" v-show="!d.Ol_IsFinish">未完结</span>
|
|||
|
|
<span v-show="d.Ol_IsLive">[{{d.Ol_LiveTime}}开始,直播{{d.Ol_LiveSpan}}分钟]</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat rightArea" v-show="rightState=='chat'">
|
|||
|
|
<div class="chatlist" id="chatlist">
|
|||
|
|
<dl id="chatlistdl">
|
|||
|
|
<dd v-for="(item,index) in messages">
|
|||
|
|
<div :playtime="item.Msg_PlayTime">
|
|||
|
|
<acc><i class="el-icon-chat-dot-round"></i>{{item.Ac_Name}}：<del
|
|||
|
|
class="el-icon-close"></del></acc>
|
|||
|
|
<msg>{{item.Msg_Context}} </msg>
|
|||
|
|
</div>
|
|||
|
|
<date>{{item.Msg_CrtTime | date('yyyy-M-d hh:mm:ss')}}</date>
|
|||
|
|
</dd>
|
|||
|
|
</dl>
|
|||
|
|
</div>
|
|||
|
|
<div class="chatbox">
|
|||
|
|
<div :class="['switch',switchSubtitle ? 'switch-on' : '']"
|
|||
|
|
v-on:click="switchSubtitle=!switchSubtitle" style="display:none"></div>
|
|||
|
|
<div class="msgbox">
|
|||
|
|
<input type="text" id="messageinput" name="messageinput"
|
|||
|
|
v-on:keyup.enter="msgSend" />
|
|||
|
|
<div id="btnMessage" v-on:click="msgSend">发送</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<transition name="fade" remark="右侧的遮罩层">
|
|||
|
|
<div id="rightMask" :style="!median ? 'width: 20%;' : 'width: 0%'" v-show="!outlineLoaded"
|
|||
|
|
remark="右侧的遮罩层">
|
|||
|
|
</div>
|
|||
|
|
</transition>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript" src="Scripts/CourseStudy.js?ver={$version}"></script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|