董佳音 / networkSchool

转到一个项目
Toggle navigation Toggle navigation pinning
董佳音
839701f2 1 parent c9070db5

添加样式图片

内嵌 并排对比
正在显示 21 个修改的文件 包含 2813 行增加 和 5822 行删除
修改有限制。点击显示。
... ... @@ -79,4769 +79,668 @@ img {
-webkit-text-stroke-width: 0px;
-moz-osx-font-smoothing: grayscale;
}
/*新加按钮*/
.markDiv{
float: right;
/*width:112px;*/
height: 32px;
body{
background: #f2f6f7;
}
.baseboardBox{
position: relative;
overflow: hidden;
}
.setUpInfo{
color:#b3b3b3;
margin-top: 15px;
margin-right: 13px;
float: right;
cursor: pointer;
display: none;
/*头部*/
.headerBg{
width:100%;
height:68px;
background: #fff;
}
.iconVideo,.iconAudio,.iconRaise{
cursor: pointer;
display: inline-block;
.header{
width:1220px;
height:70px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.markDiv .iconVideo1,.markDiv .iconAudio1{
display: inline-block;
margin-top:15px;
margin-right:13px;
color:#b3b3b3;
float: right;
/*图片*/
.header_img{
float: left;
margin: 15px 50px 0 0;
}
.markDiv .iconVideo,.markDiv .iconAudio,.markDiv .iconBanned,.markDiv .iconBanned1,.markDiv .iconKick{
margin-top:15px;
margin-right:13px;
color:#b3b3b3;
float: right;
.header_list{
float: left;
}
.header_listMsg{
float: left;
cursor: pointer;
font-size: 16px;
color:#333333;
padding-right:35px;
text-align: center;
line-height: 70px;
}
.markDiv .iconBanned,.markDiv .iconBanned1{
margin-right:11px;
.header_listTeacherMsg{
padding-right:55px;
}
.medioClose{
cursor: pointer;
margin-top:15px;
/* position: absolute;*/
display:none;
float: right;
margin-right:13px;
.header_listMsg.active{
color:#3498db;
}
.medioClose1{
cursor: pointer;
margin-top:15px;
margin-right:13px;
/*position: absolute;*/
display:none;
float: right;
.header_listMsg:selected{
color:#3498db;
}
.header_seek{
float: left;
width: 240px;
color:#ccc;
position: relative;
}
.header_seekInput{
border:1px solid transparent;
border-bottom:1px solid #ccc;
width:100%;
display: inline-block;
margin-top: 26px;
}
.header_seekBtn{
position: absolute;
bottom:10px;
right:0;
}
.iconRaise{
margin-top:15px;
margin-right:13px;
color: #d95136;
width:16px;
height:16px;
display:none;
.DownloadLoginBox{
float: right;
font-size: 16px;
}
.iconKick{
display: none;
.DownloadLoginBox li{
float: left;
}
.raiseNum{
color:#d95136;
padding-left:8px;
.androidDownload{
position: relative;
padding-left:25px;
line-height: 70px;
color:#666666;
}
.controlBrush{
cursor: pointer;
width: 20px;
height:20px;
.androidDownload:after{
content: "";
position: absolute;
right:30px;
top:6px;
z-index:1;
background: url(../images/tool/pencilClick.png) no-repeat;
background-size: 100%;
display: none;
display: block;
width: 15px;
height: 15px;
background: url(../images/DL.png) no-repeat;
left:0;
top:28px;
}
.controlBrushClick{
background: url(../images/tool/pencil.png) no-repeat;
background-size: 100%;
width:20px;
.userNews{
float: left;
font-size: 16px;
line-height: 70px;
margin-left:20px;
}
.raiseBtn{
.userLoginBtn{
width:30px;
height:30px;
border-radius: 50%;
background: #ccc;
background: url(../images/logo.png) no-repeat;
margin:12px 0 0 15px;
cursor: pointer;
color:#b3b3b3;
font-size: 20px;
}
/*轮播图*/
.slideshow{
width:100%;
height:540px;
overflow: hidden;
position: relative;
}
.motionMapBox{
height:540px;
position: absolute;
right:30px;
top:5px;
z-index:1;
}
.raiseBtn:hover{
color: #ccc;
.slidesMap{
float: left;
height:540px;
}
.raiseBtn.active{
color: #3498db;
.slidesImg{
height:540px;
}
.iconBanned{
width:18px;
height:18px;
background: url(../images/banned/chat-student-hover.png) no-repeat;
.dots{
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
}
/*.iconBanned:hover{*/
/*background: url(../images/banned/chat-student-normal.png) no-repeat;*/
/*}*/
.iconBanned1{
width:18px;
height:18px;
background: url(../images/banned/-silenced--student-hover-.png) no-repeat;
.dots li{
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.iconBanned1:hover{
background: url(../images/banned/-silenced--student-normal.png) no-repeat;
.dots li.active{
background: #fff;
opacity: 1;
}
html,body {
background: #262626;
overflow: hidden;
margin: 0;
padding: 0;
/*position: fixed;*/
/*主题盒子*/
.themeBox{
width:1220px;
height:auto;
left:0;
right:0;
margin:0 auto;
min-height: 1000px;
}
.header{
height: 48px;
line-height: 48px;
background: #262626;
position: absolute;
/*首页*/
.box{
width: 100%;
top: 0;
left: 0;
height:auto;
left:0;
right:0;
margin:0 auto;
min-height: 1000px;
}
.classStatusIcon{
.curriculumBox{
float: left;
margin-left: 20px;
font-size: 14px;
color: #CCCCCC;
}
.classStatus{
float: left;
color: #d95136;
margin-left: 10px;
font-size: 14px;
.curriculumBox1{
margin-bottom:60px;
}
.curClassUserNum{
float: left;
width: 95px;
font-size: 12px;
margin-left: 30px;
color: #595959;
.curriculumHandler{
margin:60px 0 26px 0;
}
.curClassUserNum .curClassUserNumTotal{
margin-left: 10px;
color: #999;
.curriculumTitle{
font-size: 22px;
float:left;
}
.classTheme {
float: left;
margin-left: 20px;
color: #fff;
font-size: 14px;
.curriculumMove{
padding:4px 10px 0 20px;
display: inline-block;
cursor: pointer;
}
.exitText{
float: right;
font-size: 14px;
margin-left: 10px;
color: #CCC;
.curriculumIcon{
cursor: pointer;
}
/*header 头部公共样式*/
.header_title{
float: right;
margin-right: 24px;
color: #CCC;
.curriculumList{
width:286px;
height:280px;
float: left;
background: #fff;
margin-right:25px;
cursor: pointer;
}
.header_text{
float: right;
.curriculumList:hover{
box-shadow: 1px 5px 15px #adadad;
}
.curriculumListImg{
width:100%;
height:194px;
border: 1px solid transparent;
}
.curriculumListTit{
font-size: 14px;
margin-left: 10px;
color: #CCC;
cursor: pointer;
color: #333333;
float: left;
width: 100%;
padding:15px 0 25px 10px;
}
.curriculumListInfo{
float: left;
width:100%;
padding-bottom:12px;
}
.header_title:hover,.header_text:hover{
color: #e5e5e5;
.curriculumListTime{
float: left;
font-size: 12px;
color:#f55c22;
padding-left:10px;
}
.setting:active, .settingText:active {
color: #d95136;
.curriculumListNum{
float: right;
font-size: 12px;
color:#666666;
padding-right:10px;
}
.help{
/*课堂分类列表*/
.classifyListBox{
width: 100%;
float: left;
display: none;
}
.help:active, .helpText:active {
color: #d95136;
.classifyListTitle{
float: left;
width: 100%;
font-size: 22px;
margin: 60px 0 26px 0;
}
/*header 头部公共样式 end*/
.mainContentBox{
position: absolute;
.classifyListContent{
width: 100%;
top: 51px;
bottom: 0;
background: #262626;
height:915px;
float: left;
}
.leftWarp{
position: relative;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
overflow-x: hidden;
overflow-y: hidden;
.classifyList{
width: 286px;
height: 280px;
float: left;
background: #fff;
margin-right: 25px;
cursor: pointer;
margin-bottom:25px;
}
.leftWarp_top{
.classifyList:hover{
box-shadow: 1px 5px 15px #adadad;
}
.classifyListR{
margin-right:0px;
}
.pageNumContentBox{
width:100%;
height:100%;
height: 40px;
padding:30px 0 55px 0;
float: left;
}
.left{
position: relative;
float: left;
width: 48px;
height: 100%;
background: #474749;
/*bottom: 10px;*/
}
.docUploadOut{
margin-left: 8px;
position: relative;
display: none;
.pageNumContent{
max-width: 480px;
position: absolute;
left:0;
right:0;
margin:0 auto;
text-align: center;
}
.docUpload{
font-size: 28px;
margin-left: 8px;
color: #b3b3b3;
.pageNumBtn{
display: inline-block;
width:40px;
height:40px;
border-radius: 3px;
border:1px solid #ebebeb;
margin-right:15px;
text-align: center;
line-height: 40px;
background: #fff;
color:#666666;
cursor: pointer;
}
.docUpload input{
position: absolute;
left: 1px;
/*top: 24px;*/
width: 48px;
cursor: pointer;
margin: 10px;
opacity: 0;
.pageNumBtnCheck{
background: #3498db;
color:#fff;
border:1px solid #3498db;
}
.docUploadForbid{
height: 80px;
width: 60px;
position: absolute;
/*互动课堂*/
.lanclassBox{
width:100%;
left:0;
top:0;
display: none;
right:0;
margin:0 auto;
height:auto;
min-height:600px;
}
.lanclassContent{
height:345px;
background: #fff;
margin-top:40px;
padding-left:30px;
}
.teacherInfos{
margin-bottom:40px;
}
.lanclassContentCover{
width:404px;
height:278px;
margin:30px 75px 30px 0px;
float: left;
}
/*老师详细信息*/
.lanclassContentTitle{
font-size: 24px;
color: #333333;
padding:30px 0;
}
.lanclassContentInfo{
.docListOut{
height: 36px;
width: 44px;
margin-top: 20px;
padding-top: 8px;
border-radius: 3px;
}
.docListOut1{
display: none;
.lanclassContentInfoPortrait{
width:46px;
height:46px;
border-radius: 50%;
padding-bottom: 20px;
}
.docListOut:hover{
border-radius: 3px;
background-color: #666;
cursor: pointer;
.lanclassContentInfoName{
padding-left:20px;
font-size: 16px;
color: #333333;
}
.docListOut:active{
border-radius: 3px;
background-color: #313131;
cursor: pointer;
.lanclassContentInfoTime{
font-size: 16px;
color: #333333;
}
.docList{
font-size: 28px;
margin-left: 8px;
color: #b3b3b3;
cursor: pointer;
.lanclassContentInfoTimeStart{
display:inline-block;
width: 100%;
}
/*文件上传*/
.am-modal-dialog .doc-headline{
font-size: 14px;
color: #fff;
.lanclassContentInfoTimeEnd{
display:inline-block;
width: 100%;
padding-top:10px;
}
.lanclassContentApply{
width:180px;
height:48px;
background: #3498db;
height: 32px;
line-height: 32px;
text-align: left;
padding-left: 15px;
border-radius: 3px;
color:#fff;
text-align: center;
line-height: 48px;
font-size: 16px;
margin-top:50px;
cursor: pointer;
}
.doc-headline a{
.lanclassContentCenter{
float: left;
}
/*第三方登录 收藏*/
.lanclassContentRight{
float: right;
margin-right: 10px;
color: white;
height: 100%;
position: relative;
}
.doc-headline a:hover{
color: white;
.thirdPartyIconBox{
padding:30px 30px 0 0;
}
.am-modal-bd-file{
height: 256px;
width: 398px;
.thirdPartyIcon{
width:24px;
height:24px;
display: inline-block;
padding-left:10px;
cursor: pointer;
}
.am-modal-bd-file .push-file{
display: none;
width: 360px;
margin: 0 auto;
border-bottom: 1px solid #CCCCCC;
.weixinIcon{
color: #09bb07;
}
.qqIcon{
color: #3cc3f5;
}
.weiboIcon{
color: #d32024;
}
.collectBox{
position: absolute;
left:0;
bottom:30px;
cursor: pointer;
}
.am-modal-bd-file .push-file span,.am-modal-bd-file .push-file a{
float: right;
.collectIcon{
padding:0 20px 5px 0;
}
.collectText{
font-size: 16px;
color:#333333;
}
.am-modal-bd-file .push-file span{
margin: 8px 11px 8px 0;
width: 16px;
height: 16px;
/*课堂介绍*/
.lanclassIntroduceTitle{
padding:40px 0 20px 0px;
color:#333333;
font-size: 20px;
}
.am-modal-bd-file .push-file a{
margin: 10px 10px 10px 0;
.lanclassIntroduceContent{
padding-right: 30px;
font-size: 12px;
color: #333333;
color:#333333;
}
.am-modal-bd-file a input{
width: 0;
height: 0;
/*老师简介*/
.teacherInfoData{
color:#3cc3f5;
font-size: 16px;
margin-bottom:30px;
}
.am-modal .am-modal-bd-file .push-file .file-ul{
width: 398px;
height: 224px;
overflow:hidden;
.teacherInfoName{
padding-right:30px;
}
.file-ul li{
height: 16px;
line-height: 16px;
margin-top: 16px;
/*底部*/
.footerBg{
width:100%;
height:180px;
background: #404040;
float: left;
}
.file-ul li:nth-child(1){
margin-top: 20px;
.footer{
width:1220px;
height:180px;
left: 0;
right: 0;
margin: 0 auto;
}
.file-ul li span:nth-child(1){
float: left;
margin:0 10px 0 30px;
.footerLeft{
float: left;
}
.footerLeftList{
padding-top:70px;
}
.file-ul li span:nth-child(2){
.footerLeftListMsg{
float: left;
margin:0 10px;
color:#ccc;
padding-right:6px;
font-size: 12px;
color: #333333;
}
.file-ul li span:nth-child(3){
float: right;
margin-right: 30px;
cursor: pointer;
}
.copyrightMsg{
color: #999999;
font-size: 12px;
float: left;
padding-top:20px;
}
.middle{
position: relative;
height: 100%;
/*bottom: 10px;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
background: #353537;
overflow-x: hidden;
overflow-y: hidden;
margin-left: 10px;
/*注册*/
.userSignBox{
width:100%;
height:100%;
background: rgba(0, 0, 0, .7);
position: absolute;
left:0;
top:0;
}
.docBox{
position: absolute;
/*top: 10px;*/
top: 0px;
width: 100%;
bottom: 43px;
}
.doc{
position: absolute;
left:0;
top:0;
bottom: 52px;
width: 100%;
height: 100%;
}
.docView{
position: absolute;
left:0;
top:0;
bottom: 52px;
cursor: default;
}
.framePPT{
position: absolute;
left:0;
top:0;
bottom: 52px;
cursor: default;
width: 100%;
height: 100%;
}
.canvasContent{
position: absolute;
left:0;
top:0;
bottom: 52px;
cursor: default;
/*cursor: Crosshair;*/
/*width: 100%;*/
/*height: 100%;*/
/*width: 600px;*/
}
.laserBoard{
position: absolute;
left:0;
top:0;
bottom: 52px;
cursor: default;
/*cursor: Crosshair;*/
width: 100%;
height: 100%;
/*width: 600px;*/
}
.laserRed{
/*display: none;*/
position: absolute;
left:0;
top:0;
width: 20px;
height: 20px;
background: url(../images/tool/pen.png) no-repeat;
}
.foldDrawToolOut{
position: absolute;
top: 0;
left: 0;
width: 85px;
height: 16px;
border: none;
}
.foldDrawToolOut .foldDrawTool{
position: absolute;
/*top: 10px;*/
top: 0px;
left: 0;
width: 40px;
height: 16px;
background-color: #3d3d3d;
border: 1px solid #2f2f30;
border-bottom: 0px;
cursor: pointer;
}
.foldDrawTool .arrowTop{
display: block;
width: 0;
height: 0;
position: absolute;
left: 16px;
top: 4px;
border-left: 4px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid #fff;
}
.foldDrawTool .arrowBottom{
display: none;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #fff;
position: absolute;
left: 16px;
top: 4px;
}
.foldDrawToolOut .unfoldDrawTool{
position: absolute;
top: 10px;
left: 45px;
width: 40px;
height: 16px;
background-color: #3d3d3d;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
cursor: pointer;
}
.drawTool{
position: absolute;
left: 0;
/*top: 27px;*/
top: 17px;
width: 40px;
line-height: 210px;
background-color: #474749;
border: 1px solid #2f2f30;
border-bottom-right-radius: 3px;
border-top: 0px;
z-index: 1;
}
.toolColor{
display: none;
position: absolute;
top: 0px;
left: 41px;
width: 40px;
height: 210px;
line-height: 210px;
background-color: #474749;
border: 1px solid #2f2f30;
border-bottom-right-radius: 3px;
border-top: 0px;
z-index: 0;
}
.toolForm{
display: none;
position: absolute;
top: 0px;
left: 41px;
width: 40px;
height: 250px;
line-height: 250px;
background-color: #474749;
border: 1px solid #2f2f30;
border-bottom-right-radius: 3px;
border-top: 0px;
z-index: 0;
}
.toolColorList{
float: left;
width: 28px;
height: 28px;
cursor: pointer;
list-style: none;
border-radius: 0;
}
.toolColor .redColor {
margin: 20px 0 20px 6px;
background: url(../images/colorRed.png) no-repeat;
}
.toolColor .blueColor {
margin: 0px 0 20px 6px;
background: url(../images/colorBlue.png) no-repeat;
}
.toolColor .purpleColor {
margin: 0px 0 20px 6px;
background: url(../images/colorPurple.png) no-repeat;
}
.toolColor .yellowColor {
margin-left:6px;
background: url(../images/colorYellow.png) no-repeat;
}
.toolForm{
top: 50px;
}
.straightBrush{
margin: 20px 0 20px 10px;
background: url(../images/tool/line.png) no-repeat;
}
.circleBrush{
margin: 0px 0 20px 10px;
background: url(../images/tool/-circle.png) no-repeat;
}
.curveBrush{
margin: 5px 0 10px 10px;
background: url(../images/tool/curve.png) no-repeat;
}
.squareBrush{
margin: 0px 0 20px 10px;
background: url(../images/tool/tetragonum.png) no-repeat;
}
.customBrush{
margin-left:10px;
background: url(../images/tool/custom.png) no-repeat;
}
.brushInfo{
float: left;
margin: 0px 0 20px 9px;
width: 28px;
height: 28px;
cursor: pointer;
list-style: none;
border-radius: 0;
}
.drawTool .showColor{
margin: 20px 0 20px 6px;
background: url(../images/colorRed.png) no-repeat;
}
.showForm{
display: none;
margin-left: 6px;
background: url(../images/tool/rectangle.png) no-repeat;
background-size: 100%;
}
.drawTool .pencil{
background: url(../images/tool/pencil.png) no-repeat;
}
.drawTool .rescind{
background: url(../images/tool/rescind.png) no-repeat;
}
.drawTool .laserPen{
background: url(../images/tool/laserPen.png) no-repeat;
}
.drawTool .clearContent{
background: url(../images/tool/clearContext.png) no-repeat;
}
.botTurn{
position: absolute;
bottom: 0px;
height: 42px;
line-height: 42px;
width: 100%;
background: #414143;
}
.next-page .nextPage{
float: right;
margin:12px 10px 0 0;
width: 20px;
height: 20px;
/*background:url("../images/right-normal.png") no-repeat;*/
border: 1px solid #ccc;
border-radius: 3px;
background: #333333;
position: relative;
}
.next-page .nextPage:active{
background: #595959;
border: 1px solid #595959;
border-radius: 3px;
}
.next-page .nextPage .arrowRight{
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 6px solid #CCC;
border-bottom: 4px solid transparent;
position: absolute;
left: 8px;
top: 5px;
}
.total-page{
float: right;
color: #CCCCCC;
font-size: 12px;
margin-top: 14px;
width: 14px;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 5px;
}
.total-page span{
font-size: 12px;
color: #ccc;
}
.bias{
float: right;
height: 42px;
line-height: 50px;
color: #ccc;
}
.cur-page{
float: right;
color: #CCCCCC;
font-size: 12px;
margin-left: 5px;
margin-top: 14px;
width: 14px;
height: 20px;
line-height: 20px;
text-align: center;
}
.cur-page input{
float: right;
width: 20px;
height: 20px;
line-height: 20px;
opacity: 0.5;
color: white;
background: #333;
border: 0;
text-align: center;
}
/*上一页*/
.prev .prevPage{
float: right;
margin-top: 12px;
width: 20px;
height: 20px;
/* background: url(../images/left-normal.png) no-repeat; */
background: #333;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 3px;
position: relative;
}
.prev .prevPage:active{
background: #595959;
border: 1px solid #595959;
border-radius: 3px;
}
.prev .prevPage .arrowLeft{
width: 0px;
height: 0px;
border-top: 5px solid transparent;
border-right: 6px solid #ccc;
border-bottom: 4px solid transparent;
position: absolute;
left: 0px;
top: 0px;
margin: 6px;
}
/*上一步/下一步动画*/
.pptNextStep{
float: right;
margin-right: 10px;
font-size: 20px;
color: #CCCCCC;
cursor: pointer;
}
.pptPrevStep{
float: right;
margin-right: 10px;
font-size: 20px;
color: #CCCCCC;
cursor: pointer;
}
/*适应宽 高 正常*/
.setAdaptWH{
float: right;
margin-right: 10px;
font-size: 24px;
color: #CCCCCC;
cursor: pointer;
margin-top:2px;
}
.setAdaptWH:hover{
color: #e5e5e5;
}
.setAdaptWH:active{
color: #3498db;
}
.fitHeight{
margin-right: 20px;
}
.version{
float: left;
margin-left: 10px;
color: #666;
font-size: 10px;
}
.fold{
float: right;
position: relative;
width: 2px;
height: 100%;
/* background: bisque;
margin-left: 10px;
margin-left: 13px;*/
}
.fold .expand{
display: none;
position: absolute;
right: 410px;
top: 42%;
left: 0;
width: 11px;
height: 130px;
line-height: 130px;
background-color: #474747;
color: #ffffff;
cursor: pointer;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
/*新版flash的容器-垂直布局*/
.flashViewBoxV{
width:320px;
height:500px;
}
.right{
float: right;
/*margin-right: 10px;*/
width: 320px;
height: 100%;
position: relative;
}
/*箭头*/
.arrowsBtn{
width: 11px;
height: 130px;
position: absolute;
left:0;
top:40%;
}
.arrowsBtn>div{
width: 11px;
height: 130px;
line-height: 130px;
background-color: #595959;
color: #ffffff;
cursor: pointer;
display: none;
}
.arrowsBtn .arrowsLeft{
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.arrowsBtn .arrowsRight{
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.arrowsLeft p, .arrowsRight p{
width:0px;
height:0px;
border:8px solid transparent;
top:45%;
position: absolute;
}
.arrowsLeft p{
border-left-color:#fff;
}
.arrowsRight p{
border-right-color:#fff;
left:-5px;
}
.videoWindow{
position: absolute;
/*right: 10px;*/
width: 320px;
height: 240px;
background: #474747;
}
.audioDivBox .audioBg{
position: absolute;
/*z-index: 4;*/
left: 0;
top: 0;
width: 320px;
height: 240px;
background: url(../images/audioing.png) no-repeat center center;
background-color: #474747;
}
.videoWindow .replayVideo{
z-index: 2;
}
.videoWindow .videoDivBox{
position: absolute;
z-index: 1;
top: 0;
}
.btnStopArea{
float: left;
width: 16px;
height: 29px;
margin-left: 26px;
position: relative;
}
.btnStopPublishVideo{
top: -4px;
left: 0px;
width: 16px;
height: 29px;
cursor: pointer;
background: url(../images/hangup.gif) no-repeat center center;
position: absolute;
}
.btnStopPublishAudio{
top: -4px;
left: 0px;
width: 16px;
height: 29px;
cursor: pointer;
background: url(../images/hangup.gif) no-repeat center center;
position: absolute;
}
.discussAndUsers{
position: absolute;
width: 320px;
top: 250px;
/*bottom: 10px;*/
bottom: 0px;
border-radius: 3px;
background: #474747;
}
/*右侧讨论和人员列表*/
.discussAndUsers .tabTitle{
position: absolute;
top:0;
left: 0;
width: 320px;
height: 32px;
color: #ffffff;
border-bottom:1px solid #666;
z-index: 1;
}
.tabTitle .select{
border-bottom:1px solid #3498db;
}
.discussAndUsers .discussTitle{
position: absolute;
top: 0;
left: 0;
height: 32px;
line-height: 32px;
width: 40%;
cursor: pointer;
text-align: center;
border-bottom:1px solid #3498db;
}
.discussTitle span:nth-of-type(2){
margin-left: 16px;
}
.userListIcon{
font-size: 14px;
}
.discussAndUsers .userListTitle{
position: absolute;
top: 0;
left: 40%;
height: 32px;
line-height: 32px;
width: 40%;
border-bottom:1px solid #666;
cursor: pointer;
text-align: center;
}
.userListTitle span:nth-of-type(2){
margin-left: 16px;
}
.discussAndUsers .tabCon{
position: absolute;
right: 0;
top: 32px;
bottom: 0;
width: 320px;
background: #474747;
border-radius: 3px;
}
.discussAndUsers .curClassOn{
overflow-y: scroll;
overflow-x: hidden;
}
.discussAndUsers .curClassOn .curClassUserNum{
position: absolute;
left:0;
top: 0;
width: 310px;
height: 32px;
line-height: 32px;
padding-left: 17px;
border-bottom:1px solid #3b3b3b;
color: #3498db;
font-size: 14px;
}
.discussAndUsers .curClassOn .curClassUserList{
position: absolute;
left: 0;
top:0;
bottom: 0;
width: 320px;
background: #474747;
border-radius: 3px;
}
.userAvatar{
float:left;
margin-left: 14px;
color: #ccc;
display: inline-block;
margin-top: 11px;
font-size: 16px;
width:22px;
height:20px;
}
.userInfo{
float: left;
margin-left: 13px;
margin-top: 14px;
}
.nameDiv{
float: left;
font-size: 14px;
width: 90px;
height:16px;
color: #ccc;
overflow: hidden;
}
.userStatus{
float: left;
font-size: 10px;
color:#999;
}
.discussAndUsers .selectdOn{
display: block;
}
.discussAndUsers .curClassOn{
bottom:10px;
}
.discussAndUsers .chat {
position: absolute;
right: 0px;
top: 0px;
bottom: 0;
width: 320px;
background: #474747;
border-radius: 3px;
}
.discussAndUsers .chat .msg-border{
position: absolute;
border-top: none;
border-left: none;
border-bottom: none;
width: 320px;
bottom: 73px;
top: 0px;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
/*-webkit-box-shadow: inset 0 0 4px #474749;*/
border-radius: 10px;
margin-right: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 5px;
width: 1px;
background: #666;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #353536;
}
.discussAndUsers .chat .msg {
position: absolute;
top: 0;
bottom: 0;
width: 320px;
background: #474747;
overflow-y: scroll;
padding: 10px 0 0 0;
}
.discussAndUsers .chat .msg .teacher-msg{
float: left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 100%;
height: 30px;
/*border: 1px solid #000000;*/
}
.discussAndUsers .chat .msg .teacher-msg .teaImg{
float: left;
}
.discussAndUsers .chat .msg .teacher-msg p {
position: relative;
float: left;
padding: 8px;
font-size: 12px;
color: #333333;
background: white;
margin-left: 16px;
border-radius: 8px;
display: inline-block;
min-width: 98px;
max-width: 100%;
border: 1px solid #d7d7d7;
}
.discussAndUsers .chat .msg .teacher-msg p img:nth-of-type(1){
text-align: left;
float: none;
}
.discussAndUsers .chat .msg .teacher-msg p.left::after{
top: 4px;
left: -7px;
}
.chat .msg .teacher-msg p::after{
content: "";
position: absolute;
float: left;
left: -8px;
bottom: 18px;
display: block;
width: 10px;
height: 10px;
background: url(../images/arrow.png) 50% 50%;
}
.chat .msg .student-msg{
float: right;
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
height: 30px;
}
.chat .msg .student-msg .stuImg{
float: right;
margin-right: 8px;
}
.chat .msg .student-msg p {
position: relative;
float: right;
padding: 8px;
font-size: 12px;
color: #333333;
background: white;
margin-right: 16px;
border-radius: 8px;
display: inline-block;
min-width: 98px;
max-width: 280px;
border: 1px solid #d7d7d7;
text-align: left;
}
.chat .msg .student-msg p.right::after{
top: 4px;
right: -7px;
}
.chat .msg .student-msg p::after{
content: "";
position: absolute;
right: -8px;
bottom: 18px;
float: right;
display: block;
width: 10px;
height: 10px;
background: url(../images/arrow-r.png) 50% 50%;
}
.chat .msg .student-msg p img:nth-of-type(1){
text-align: left;
float: none;
}
/*liaotian*/
.message img{
width: 24px;
height: 24px;
}
.message_client{
margin-top: 5px;
margin-bottom: 5px;
overflow: hidden;
}
.chat .teaNameBox{
float: left;
margin-top: 3px;
margin-right: 14px;
}
.chat .teaName{
font-size: 12px;
margin-left: 21px;
color: #ffffff;
display: block;
height: 20px;
margin-right: 290px;
white-space: nowrap;
word-break: keep-all;
}
.chat .stuName{
display: block;
font-size: 12px;
margin-right: 15px;
margin-left: 289px;
color: #ffffff;
/* width: 58px; */
height: 20px;
white-space: nowrap;
word-break: keep-all;
}
.chat .stuNameBox{
float: right;
margin-top: 3px;
margin-left: 46px;
}
.chat .message_client .message {
font-size: 12px;
color: #fff;
margin-top: 5px;
line-height: 20px;
}
.triangle-isosceles {
position: relative;
bottom: 2px;
padding: 6px 10px 6px 10px;
border-radius: 5px;
display: inline-block;
/*min-width: 20px;*/
max-width:75%;
word-break: break-all;
}
.stutriangle-isosceles {
float:right;
position: relative;
bottom: 2px;
padding: 6px 10px 6px 10px;
border-radius: 5px;
display: inline-block;
/*min-width: 20px;*/
max-width:81%;
word-break: break-all;
}
.triangle-isosceles.leftmsg{
margin-left: 0px;
/*background: white;*/
/*border: 1px solid #d7d7d7;*/
background: #585859;
}
.stutriangle-isosceles.rightmsg{
margin-left: 8px;
background: #3498db;
/*border: 1px solid #d7d7d7;*/
}
.triangle-isosceles.leftmsg:after {
top: 6px;
left: -8px;
transform: rotate(294deg);
-ms-transform: rotate(294deg);
-moz-transform: rotate(294deg);
-webkit-transform: rotate(294deg);
-o-transform: rotate(294deg);
}
.stutriangle-isosceles.rightmsg:after {
top: 6px;
right: -8px;
transform: rotate(76deg);
-ms-transform: rotate(76deg);
-moz-transform: rotate(76deg);
-webkit-transform: rotate(76deg);
-o-transform: rotate(76deg);
}
.triangle-isosceles:after {
content: "";
position: absolute;
display: block;
width: 10px;
height: 10px;
background: url(../images/arrow-r.png) no-repeat;
}
.stutriangle-isosceles:after {
content: "";
position: absolute;
display: block;
width: 10px;
height: 10px;
background: url(../images/arrow.png) no-repeat;
}
.input-send{
position: absolute;
bottom: 0px;
width: 320px;
height: 72px;
border-top: 1px solid #666;
}
.input-send .face{
float: left;
font-size: 18px;
color: #ccc;
margin-left: 10px;
margin-top: 9px;
margin-bottom: 3px;
cursor: pointer;
}
.input-send .face:hover{
color:#e5e5e5;
}
.input-send .face:active{
color:#fff
}
/*全体禁言默认样式*/
.input-send .bannedBtn{
width: 19px;
height:17px;
float: left;
cursor: pointer;
margin: 11px 0 -2px 10px;
background: url(../images/banned/chat-normal.png) no-repeat;
background-size: 100% 100%;
}
/*.input-send .bannedBtn:hover{*/
/*background: url(../images/banned/chat-normal.png) no-repeat;*/
/*background-size: 100%;*/
/*}*/
/*全体禁言中的样式*/
.input-send .relieveBanned{
width: 20px;
height:20px;
float: left;
cursor: pointer;
margin: 11px -1px -3px 10px;;
background: url(../images/banned/-silenced-normal.png) no-repeat;
background-size: 100%;
}
.input-send .relieveBanned:hover{
background: url(../images/banned/-silenced-hover.png) no-repeat;
background-size: 100%;
}
.input-face{
width: 243px;
height: 26px;
line-height: 21px;
float: left;
border: none;
margin-top: 6px;
margin-left:10px;
background: #fafafa;
}
.chat .input-face input {
height: 26px;
line-height: 26px;
width: 235px;
border: none;
text-decoration: none;
outline-style: none;
background: #6a6a6c;
color: #ffffff;
font-size: 12px;
padding-left: 5px;
padding-right: 5px;
}
.input-send .send {
float: right;
width: 46px;
height: 26px;
font-size: 12px;
border-radius: 2px;
border: none;
background: #3598db;
color: #fff;
margin-top: 38px;
margin-right: 10px;
cursor: pointer;
}
.input-send .send:hover{
background: #57b2ee;
}
.input-send .send:active{
background: #318ecc;
}
/*表情*/
.swiper-container {
position: absolute;
width: 320px;
height: 153px;
bottom: 44px;
left: 0;
z-index: 1100;
overflow: hidden;
}
.inner-slide {
position: absolute;
top: 0;
left: 0;
width:640px;
height: 153px;
}
.inner-slide img{
width: 26px;
height: 26px;
-webkit-font-smoothing:antialiased;
}
.inner-slide .swiper-slide {
float: left;
width: 320px;
height: 153px;
}
.tiplist {
position: absolute;
right: 0px;
bottom: 0;
overflow: hidden;
width: 320px;
height: 14px;
}
.tiplist li:nth-child(1) {
float: left;
margin-left: 141px;
width: 8px;
height: 8px;
left: 100px;
cursor: pointer;
background: #999;
border-radius: 50%;
}
.tiplist li:nth-child(2) {
float: left;
margin-left: 15px;
width: 8px;
height: 8px;
left: 100px;
cursor: pointer;
background: #999;
border-radius: 50%;
}
.tiplist li.bg {
background: #ff6600;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
width: 320px;
}
.swiper-slide ul {
display: inline-block;
width: 100%;
white-space: normal;
padding-left: 0;
}
.swiper-slide li {
display: inline-block;
width: 10%;
height: 30px;
text-align: center;
line-height: 30px;
float: left;
margin-left: 7px;
cursor: pointer;
}
/*帮助弹出框*/
.helpBox{
display: none;
position: absolute;
top: 12%;
left: 33%;
width: 398px;
height: 298px;
background: white;
z-index: 4;
}
.helpBox .helpHeadline{
height: 32px;
line-height: 32px;
background: #3b3b3b;
}
.helpBox .helpHeadline .helpHeadlineTitle{
position: absolute;
left: 14px;
color: #fff;
}
.helpBox .helpHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.helpBox .helpHeadline a:hover{
color: #CCCCCC;
}
.helpBox .helpHeadline a:active{
color: #3b3b3b;
}
.helpContent{
height: 266px;
width: 398px;
background-color: #4f4e53;
overflow-x: hidden;
}
/*结束课堂弹出框*/
.endClassBox{
display: none;
position: absolute;
top: 35%;
left: 33%;
width: 370px;
height: 174px;
background: white;
z-index: 5;
border-radius: 3px;
}
.endClassBox .endClassHeadline{
height: 40px;
line-height: 40px;
background: #3b3b3b;
}
.endClassBox .endClassHeadline .endClassHeadlineTitle{
position: absolute;
left: 14px;
color: #fff;
font-size: 12px;
}
.endClassBox .endClassHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.endClassBox .endClassHeadline a:hover{
color: #CCCCCC;
}
.endClassBox .endClassHeadline a:active{
color: #3b3b3b;
}
.endClassContent{
height: 134px;
width: 370px;
background-color: #4f4e53;
overflow-x: hidden;
}
.endClassContent .endClassText{
font-size: 14px;
color: #fff;
text-align: center;
margin-top: 28px;
line-height: 14px;
position: absolute;
left: 50%;
top: 40px;
width: 200px;
margin-left: -100px;
}
.endClassContent .endClassEnsure{
width: 70px;
height: 32px;
background: #999;
border: 0;
margin-left: 72px;
margin-top: 77px;
cursor: pointer;
color: #fff;
border-radius: 3px;
}
.endClassContent .endClassCancel{
width: 70px;
height: 32px;
background: #3498db;
border: 0;
margin-top: 77px;
margin-left: 93px;
cursor: pointer;
color: #fff;
border-radius: 3px;
}
/*结束屏幕共享弹出框*/
.endShareBox{
display: none;
position: absolute;
top: 35%;
left: 33%;
width: 370px;
height: 174px;
background: white;
z-index: 5;
border-radius: 3px;
}
.endShareBox .endShareHeadline{
height: 40px;
line-height: 40px;
background: #3b3b3b;
}
.endShareBox .endShareHeadline .endShareHeadlineTitle{
position: absolute;
left: 14px;
color: #fff;
font-size: 12px;
}
.endShareBox .endShareHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.endShareBox .endShareHeadline a:hover{
color: #CCCCCC;
}
.endShareBox .endShareHeadline a:active{
color: #3b3b3b;
}
.endShareContent{
height: 134px;
width: 370px;
background-color: #4f4e53;
overflow-x: hidden;
}
.endShareContent .endShareText{
font-size: 14px;
color: #fff;
text-align: center;
margin-top: 28px;
line-height: 14px;
position: absolute;
left: 50%;
top: 40px;
width: 200px;
margin-left: -100px;
}
.endShareContent .endShareEnsure{
width: 70px;
height: 32px;
background: #999;
border: 0;
margin-left: 72px;
margin-top: 77px;
cursor: pointer;
color: #fff;
border-radius: 3px;
}
.endShareContent .endShareCancel{
width: 70px;
height: 32px;
background: #3498db;
border: 0;
margin-top: 77px;
margin-left: 93px;
cursor: pointer;
color: #fff;
border-radius: 3px;
}
/*退出课堂弹出框*/
.exitClassBox{
display: none;
position: absolute;
top: 35%;
left: 33%;
width: 370px;
height: 174px;
background: white;
z-index: 506;
border-radius: 3px;
}
.exitClassBox .exitClassHeadline{
height: 40px;
line-height: 40px;
background: #3b3b3b;
}
.exitClassBox .exitClassHeadline .exitClassHeadlineTitle{
position: absolute;
left: 14px;
color: #fff;
font-size: 12px;
}
.exitClassBox .exitClassHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.exitClassBox .exitClassHeadline a:hover{
color: #CCCCCC;
}
.exitClassBox .exitClassHeadline a:active{
color: #3b3b3b;
}
.exitClassContent{
height: 134px;
width: 370px;
background-color: #4f4e53;
overflow-x: hidden;
}
.exitClassContent .exitClassText{
font-size: 14px;
color: #fff;
text-align: center;
margin-top: 28px;
line-height: 15px;
position: absolute;
left: 50%;
top: 22%;
width: 200px;
margin-left: -100px;
}
.exitClassContent .exitClassEnsure{
width: 70px;
height: 32px;
background: #999;
border: 0;
margin-left: 72px;
margin-top: 78px;
cursor: pointer;
color: #fff;
border-radius: 3px;
}
.exitClassContent .exitClassCancel{
width: 70px;
height: 32px;
background: #3498db;
border: 0;
margin-top: 78px;
margin-left: 93px;
cursor: pointer;
color: #fff;
border-radius: 3px;
}
/*弹出框列表样式*/
.listModal{
display: none;
position: absolute;
top: 12%;
left: 33%;
width: 398px;
height: 298px;
background: white;
z-index: 5;
}
.listModal .listHeadline{
height: 40px;
line-height: 40px;
background: #3b3b3b;
}
.listModal .listHeadline .listHeadlineTitle{
position: absolute;
left: 14px;
color: #ccc;
font-size: 14px;
}
.listModal .listHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ccc;
}
.listModal .listHeadline a:hover{
color: #CCCCCC;
}
.listModal .listHeadline a:active{
color: #3b3b3b;
}
/*!*文件列表中的样式*!*/
/*.fileContent{*/
/*height: 266px;*/
/*width: 398px;*/
/*background-color: #4f4e53;*/
/*overflow: scroll;*/
/*overflow-x: hidden;*/
/*}*/
/*.fileContent div{*/
/*height: 36px;*/
/*line-height: 36px;*/
/*}*/
/*.fileContent div:nth-of-type(1){*/
/*padding-top: 18px;*/
/*}*/
/*.fileContent label:nth-of-type(1){*/
/*float: left;*/
/*margin-left: 30px;*/
/*color: #ccc;*/
/*}*/
/*.fileContent label:nth-of-type(2){*/
/*float: left;*/
/*display: inline-block;*/
/*width: 249px;*/
/*margin-left: 16px;*/
/*color: #ccc;*/
/*cursor: pointer;*/
/*white-space: nowrap;*/
/*overflow: hidden;*/
/*text-overflow: ellipsis;*/
/*}*/
/*.fileContent label:nth-of-type(3){*/
/*float: right;*/
/*margin-right: 36px;*/
/*color: #ccc;*/
/*cursor: pointer;*/
/*}*/
/*媒体共享文件列表*/
.mediaFileContentBox{
position: relative;
height: 266px;
width: 398px;
background-color: #4f4e53;
overflow-x: hidden;
}
.mediaFileContentBox .mediaFileContentMenu{
position: absolute;
left: 10px;
height: 45px;
width: 380px;
border-bottom: 1px solid #666;
}
.mediaFileContentBox .mediaFileContentMenu .mediaFileContentTxt{
position: absolute;
bottom: 3px;
font-size: 12px;
color: #ccc;
left: 5px;
}
.mediaFileContentBox .mediaFileContentMenu .mediaFileContentMenuSpan{
position: absolute;
right: 0;
top: 10px;
width: 64px;
height: 28px;
line-height: 28px;
overflow: hidden;
background: #3A9AD9;
border-radius: 2px;
cursor: pointer;
color: #ffffff;
}
.mediaFileContentBox .mediaFileContentMenu .mediaFileContentMenuLableIcon{
font-size: 20px;
left:5px;
position: absolute;
}
.mediaFileContentBox .mediaFileContentMenu .mediaFileContentMenuLableTxt{
font-size: 12px;
position: absolute;
left:25px;
}
.mediaFileContentBox .mediaFileContentMenu input{
position: absolute;
width: 124px;
right: 10px;
opacity: 0;
cursor: pointer;
}
.mediaFileContent{
position: absolute;
top: 46px;
height: 220px;
width: 398px;
background-color: #4f4e53;
overflow: scroll;
overflow-x: hidden;
}
.mediaFileContent div{
margin-left: 10px;
height: 36px;
line-height: 36px;
}
.mediaFileContent div:hover{
background: #666;
height: 36px;
line-height: 36px;
}
.mediaFileContent div:nth-of-type(1){
/*padding-top: 18px;*/
}
.mediaFileContent label:nth-of-type(1){
float: left;
margin-left: 14px;
color: #ccc;
}
.mediaFileContent label:nth-of-type(2){
float: left;
display: inline-block;
width: 249px;
font-size: 12px;
margin-left: 5px;
color: #ccc;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mediaFileContent label:nth-of-type(3){
float: right;
margin-right: 10px;
color: #ccc;
cursor: pointer;
}
/*加载转圈*/
.spinnerMasker{
display: none;
position: absolute;
z-index: 5;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
}
.spinner {
z-index: 1;
width: 33px;
height: 33px;
position: absolute;
top: 40%;
left:50%;
margin-left:-11px;
}
.spinnerHtml{
color:dodgerblue;
position: absolute;
/* top: 50%;*/
left:50%;
width:200px;
text-align: center;
margin-left:-100px;
}
.spinnerMask{
width:300px;
height:10px;
border-radius:5px;
background:rgba(0,0,0,.7);
position: absolute;
top:56%;
left:50%;
margin-left:-150px;
}
.exitSpinnerMasker{
position: absolute;
left:46%;
top:34%;
margin-left:130px;
display: none;
}
.exitSpinnerMasker .exitSpinnerMaskerA{
color:dodgerblue;
}
.minspinner{
width:0%;
height:10px;
border-radius:5px;
background:dodgerblue;
opacity: .7;
}
.container1 > div, .container2 > div, .container3 > div {
width: 10px;
height: 10px;
background-color:dodgerblue;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
/*屏幕共享*/
.screenSharingGroup{
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: #353536;
display: none;
}
.sharingMsgBox{
width:248px;
height:40px;
line-height: 40px;
position: absolute;
left:50%;
top:50%;
margin-left:-110px;
margin-top:25px;
font-size: 14px;
}
.sharingMsgBox1{
margin-left:-115px;
}
.shareBackdrop{
position: absolute;
left:15px;
top:-202px;
display: none;
}
.sharingMsg{
float: left;
width:188px;
height:100%;
background: #666;
text-align: center;
color:#fff;
border-radius: 30px;
display: none;
}
.sharingMsg1{
cursor: pointer;
text-decoration: underline;
}
.sharingMsg1:hover{
color: #e5e5e5;
}
.sharingMsg2{
cursor: pointer;
}
.downloadCancel{
float: left;
color:#fff;
cursor: pointer;
width:60px;
text-align: center;
display: none;
}
.downloadCancel:hover{
color: #e5e5e5;
}
/*媒体共享*/
.mediaShareGroup{
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: #353536;
display: none;
}
/*伴音*/
.musicShareGroup{
width:286px;
height:88px;
background: #4f4f52;
z-index: 2;
position: absolute;
left:0;
top:0;
box-shadow: 0 2px 1px #4f4f52;
display: none;
font-size: 12px;
color:#fff;
cursor: default;
}
.musicShareNameBox{
width: 80%;
height:40px;
margin-left:10%;
text-align: center;
position: relative;
}
.closeMusicClose{
width:15px;
height:15px;
position: absolute;
right:7px;
top:7px;
background: url(../images/music/delete-normal.png) no-repeat;
cursor: pointer;
}
.closeMusicClose:hover{
background: url(../images/music/delete-hover.png) no-repeat;
}
.musicIcon{
background: url(../images/music/icon-music.png) no-repeat;
width: 15px;
height: 15px;
display: inline-block;
margin-top:12px;
position: absolute;
left:0;
top:0;
}
.musicShareName{
background: url(../images/music/icon-music.png) no-repeat 0 4px;
padding:0 20px;
line-height: 40px;
background-size: 12px;
}
.musicSharePlayBox{
width:100%;
height:25px;
float: left;
padding:0 15px;
}
.musicSharePlayBox>div{
float: left;
}
.musicShareProgressBtn{
width:14px;
height:14px;
float: left;
margin-right:15px;
}
.musicShareProgressBtn span{
width:15px;
height:15px;
float: left;
cursor: pointer;
}
.musicSharePlayProgressBox{
width:145px;
height:2px;
margin-top:6px;
float: left;
position: relative;
}
.musicSharePlayProgressBox span{
display: inline-block;
}
.musicShare_bg{
width:145px;
height:2px;
background: #b2b2b2;
position: absolute;
left:0;
top:0;
cursor: pointer;
}
.musicShare_color{
width:0%;
height:2px;
background: #ed5c1c;
position: absolute;
left:0;
top:0;
cursor: pointer;
}
.musicShare_btn{
width:9px;
height:9px;
background: url(../images/music/Play-Control.png) no-repeat;
position: absolute;
left:0%;
top:-3px;
margin-left:-4px;
cursor: pointer;
}
.musicTimeProgress{
width:60px;
height:100%;
margin-left:15px;
}
/*播放暂停播放*/
.musicShareProgressPlay{
background: url(../images/music/play-normal.png) no-repeat;
}
.musicShareProgressPlay:hover{
background: url(../images/music/play-hover-.png) no-repeat;
}
.musicShareProgressPause{
background: url(../images/music/pause-normal.png) no-repeat;
display: none;
}
.musicShareProgressPause:hover{
background: url(../images/music/pause-hover.png) no-repeat;
}
/*音量控制*/
.musicVolumePlay{
background: url(../images/music/Speakers-normal.png) no-repeat;
}
.musicVolumePlay:hover{
background: url(../images/music/Speakers-hover.png) no-repeat;
}
.musicVolumePause{
background: url(../images/music/No-sound-normal-.png) no-repeat;
display: none;
}
.musicVolumePause:hover{
background: url(../images/music/No-sound-hover.png) no-repeat;
}
/*遮罩层*/
.masker {
display: none;
position: absolute;
z-index: 4;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
}
/*回放控制条*/
.recordPlayControl{
z-index: 1000;
}
.controlBarOut{
position: fixed;
bottom: 0px;
left: 0px;
height: 60px;
width: 100%;
min-width: 760px;
}
/*录制回放控制条的背景*/
.controlBarOpacity{
background-color: #111312;
height: 100%;
width: 100%;
opacity: 0.8;
}
.controlBarInner{
position: absolute;
top: 0;
width: 100%;
height: 100%
}
.replayProgressBar{
position: absolute;
left: 2%;
width: 96%;
outline-style: none;
}
.btn_recordPlay{
position: absolute;
top: 29px;
left: 18px;
height: 18px;
width: 18px;
background: url(../images/playBack/play.gif) no-repeat;
border: 0;
}
.btn_recordPause{
position: absolute;
top: 29px;
left: 18px;
height: 18px;
width: 18px;
background: url("../images/playBack/pause.gif") no-repeat;
border: 0;
}
.btn_recordClose{
position: absolute;
top: 29px;
right: 25px;
height: 18px;
width: 18px;
background: url("../images/playBack/rePlay.gif") no-repeat;
border: 0;
}
.classTimestampText{
float: left;
color: #ccc;
margin-left: 10px;
font-size: 12px;
}
.classTimestamp{
position: absolute;
left: 42px;
top: 30px;
width: 120px;
text-align: center;
background: transparent;
border: 0;
color: #6b6b6b;
}
input[type="range"] {
margin-top: 2px;
background-color: #272728;
-webkit-appearance: none;
height:12px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: default;
top: -5px;
height: 30px;
width: 20px;
background: none repeat scroll 0 0 #777;
border-radius: 15px;
-webkit-box-shadow: 0 -1px 1px black inset;
}
/*登录*/
.loginBg{
display: block;
position: absolute;
left:0;
top:0;
right:0;
bottom: 0;
z-index: 100;
/* background:#474749;
background: url("../images/newlogin/bg.jpg") no-repeat center center;*/
width:auto;
height: 100%;
background-size: cover;
}
.loginContentBox{
width: 400px;
height: 400px;
/* background: #484646;*/
position: absolute;
top: 20%;
left: 50%;
border-radius: 5px;
margin-left:-200px;
}
.loginBg .bgLogin{
width:100%;
height:100%;
background: rgba(0, 0, 0, .7);
}
.loginImg{
width:100%;
height: 100%;
background: url("../images/newlogin/student.png") no-repeat center bottom;
position: absolute;
bottom:0;
left:0;
}
.login_star{
width:100%;
height:100%;
}
@keyframes star{
from{transform: scale(0);}
to{transform: scale(2);}
}
@keyframes stars{
0% {
opacity: 0; }
50% {
opacity: .8; }
100% {
opacity: 0; }
}
.star{
width: 10px;
height: 10px;
background: url(../images/newlogin/xx.png) no-repeat;
background-size: 100% 100%;
position: absolute;
}
.login_star1{
left:80%;
top:7%;
animation: star 2s linear infinite;
animation: stars 2s linear infinite;
-webkit-animation: star 2s linear infinite;
-webkit-animation: stars 2s linear infinite;
}
.login_star2{
left:10%;
top:18%;
animation: star 1.8s linear infinite;
animation: stars 1.8s linear infinite;
-webkit-animation: star 1.8s linear infinite;
-webkit-animation: stars 1.8s linear infinite;
}
.login_star3{
left:60%;
top:20%;
animation: star 2.3s linear infinite;
animation: stars 2.3s linear infinite;
-webkit-animation: star 2.3s linear infinite;
-webkit-animation: stars 2.3s linear infinite;
}
.login_star4{
left:31%;
top:41%;
animation: star 1.4s linear infinite;
animation: stars 1.4s linear infinite;
-webkit-animation: star 1.4s linear infinite;
-webkit-animation: stars 1.4s linear infinite;
}
.login_star5{
left:78%;
top:50%;
animation: star 1.7s linear infinite;
animation: stars 1.7s linear infinite;
-webkit-animation: star 1.7s linear infinite;
-webkit-animation: stars 1.7s linear infinite;
}
.login_star6{
left:12%;
top:33%;
animation: star 2.5s linear infinite;
animation: stars 2.5s linear infinite;
-webkit-animation: star 2.5s linear infinite;
-webkit-animation: stars 2.5s linear infinite;
}
.login_star7{
left:24%;
top:30%;
animation: star 2.3s linear infinite;
animation: stars 2.3s linear infinite;
-webkit-animation: star 2.3s linear infinite;
-webkit-animation: stars 2.3s linear infinite;
}
.login_star8{
left:14%;
top:35%;
animation: star 2.2s linear infinite;
animation: stars 2.2s linear infinite;
-webkit-animation: star 2.2s linear infinite;
-webkit-animation: stars 2.2s linear infinite;
}
.login_star9{
left:64%;
top:55%;
animation: star 2.4s linear infinite;
animation: stars 2.4s linear infinite;
-webkit-animation: star 2.4s linear infinite;
-webkit-animation: stars 2.4s linear infinite;
}
.login_star10{
left:54%;
top:20%;
animation: star 2.7s linear infinite;
animation: stars 2.7s linear infinite;
-webkit-animation: star 2.7s linear infinite;
-webkit-animation: stars 2.7s linear infinite;
}
.login_star11{
left:74%;
top:23%;
animation: star 2.8s linear infinite;
animation: stars 2.8s linear infinite;
-webkit-animation: star 2.8s linear infinite;
-webkit-animation: stars 2.8s linear infinite;
}
.login_star12{
left:80%;
top:30%;
animation: star 3s linear infinite;
animation: stars 3s linear infinite;
-webkit-animation: star 3s linear infinite;
-webkit-animation: stars 3s linear infinite;
}
.loginContent{
position: absolute;
top: 15%;
left: 50%;
width: 270px;
height: 260px;
margin-left:-135px;
}
.loginContent input[type=text]{
color: white;
}
.loginContent .loginContentImg{
height: 35px;
width: 270px;
background: url("../images/newlogin/logo.png") no-repeat center center;
}
.loginContent .userNameLi{
height: 50px;
line-height: 50px;
width: 270px;
border:1px solid #fff;
border-radius:3px 3px 0 0;
/* background:#333;*/
opacity:0.8;
margin-top:30px;
display: none;
/*background: url("../images/login/userName.png") no-repeat left ;*/
}
.loginContent .userNameLi input,.loginContent .passWordLi input{
float: left;
margin-left: 12px;
width: 200px;
height: 50px;
border: none;
color:#fff ;
background-color:transparent;
}
/* WebKit browsers*/
.loginContent .userNameLi input::-webkit-input-placeholder{
font-size: 12px;
color: #fff;
}
/* Mozilla Firefox 4 to 18*/
.loginContent .userNameLi input:-moz-placeholder{
font-size: 12px;
color: #fff;
}
/* Mozilla Firefox 19+*/
.loginContent .userNameLi input::-moz-placeholder{
font-size: 12px;
color: #fff;
}
/* Internet Explorer 10+*/
.loginContent .userNameLi input:-ms-input-placeholder{
font-size: 12px;
color: #fff;
}
.loginContent .userNameLi input:focus{
outline-style: none;
}
/* WebKit browsers*/
.loginContent .passWordLi input::-webkit-input-placeholder{
font-size: 12px;
color: #ccc;
}
/* Mozilla Firefox 4 to 18*/
.loginContent .passWordLi input:-moz-placeholder{
font-size: 12px;
color: #ccc;
}
/* Mozilla Firefox 19+*/
.loginContent .passWordLi input::-moz-placeholder{
font-size: 12px;
color: #ccc;
}
/* Internet Explorer 10+*/
.loginContent .passWordLi input:-ms-input-placeholder{
font-size: 12px;
color: #ccc;
}
.loginContent .passWordLi input:focus{
outline-style: none;
}
.loginContent .loginUser{
line-height: 20px;
width: 270px;
/*border-bottom: 1px solid #ccc;*/
}
.loginContent .loginUser p{
/*display: none;*/
font-size: 12px;
color: #d95136;
/*margin-left: 45px;*/
}
.loginContent .passWordLi{
height: 50px;
line-height: 50px;
width: 270px;
border: 1px solid #fff;
border-top:none;
border-radius:0 0 3px 3px;
/* background:#333;*/
opacity:0.8;
display: none;
}
.loginContent .loginPassWord{
height: 20px;
line-height: 20px;
width: 270px;
/*border-bottom: 1px solid #ccc;*/
}
.loginContent .loginPassWord p{
/*display: none;*/
font-size: 12px;
color: #d95136;
/*margin-left: 45px;*/
display: none;
}
.loginContent .btnLoginLi{
height: 40px;
width: 270px;
display: none;
}
.loginContent .btnLoginLi button {
height: 40px;
width: 270px;
font-size: 14px;
background: #3598db;
color: #fff;
outline-style: none;
border: 0;
text-align: center;
border-radius:3px;
}
.loginContent .btnLoginLi button:hover {
background:#58aced;
}
.initParams .errorTip{
text-align: center;
/* margin: 237px auto;*/
height: 20px;
line-height: 20px;
width: 270px;
color: red;
float: left;
padding-top:20px;
display:none;
}
.loginContent .errorTip{
margin: 6px auto;
height: 20px;
width: 270px;
color: red;
text-align: center;
}
/*初始化参数*/
.initParamsOut{
display: block;
position: absolute;
left:0;
top:0;
right:0;
bottom: 0;
z-index: 100;
height: 100%;
/* background:#474749;*/
/* background: url("../images/newlogin/bg.jpg") no-repeat center center;*/
width:auto;
background-size: cover;
}
.initParamsBox{
width: 400px;
height: 400px;
/* background: #484646;*/
position: absolute;
top: 20%;
left: 50%;
border-radius: 5px;
margin-left:-200px;
}
.initParamsOut .bgInit{
width:100%;
height:100%;
background: rgba(0, 0, 0, .7);
}
::-ms-clear, ::-ms-reveal{display: none;}
.initParams{
position: absolute;
top: 15%;
left: 50%;
width: 270px;
height: 260px;
z-index: 10;
margin-left:-133px;
}
.initParams .initParamsImg{
height: 35px;
width: 270px;
background: url("../images/newlogin/logo.png") no-repeat center center;
}
.initParams .initParamsClassId{
height: 50px;
line-height: 50px;
width: 270px;
border:1px solid #fff;
border-radius:3px 3px 0 0;
/*background:#333;*/
opacity:0.8;
margin-top:30px;
display: none;
}
.initParams .initParamsClassId input,.initParams .initParamsUserId input {
float: left;
height: 51px;
border: none;
background-color:transparent;
}
.initParams .initParamsClassId input,.initParams .initParamsUserId input{
float: left;
padding-left:12px;
color:#fff;
}
.initParams .initParamsClassId input:focus,.initParams .initParamsUserId input:focus{
outline-style: none;
}
/* WebKit browsers*/
.loginContent .initParamsClassId input::-webkit-input-placeholder,.loginContent .initParamsUserId input::-webkit-input-placeholder{
font-size: 12px;
color: #fff;
}
/* Mozilla Firefox 4 to 18*/
.loginContent .initParamsClassId input:-moz-placeholder,.loginContent .initParamsUserId input:-moz-placeholder{
font-size: 12px;
color: #fff;
}
/* Mozilla Firefox 19+*/
.loginContent .initParamsClassId input::-moz-placeholder,.loginContent .initParamsUserId input::-moz-placeholder{
font-size: 12px;
color: #fff;
}
/* Internet Explorer 10+*/
.loginContent .initParamsClassId input:-ms-input-placeholder,.loginContent .initParamsUserId input:-ms-input-placeholder{
font-size: 12px;
color: #fff;
}
/* WebKit browsers*/
.loginContent .initParamsClassId input::-webkit-input-placeholder,.loginContent .initParamsUserId input::-webkit-input-placeholder{
font-size: 12px;
color: #fff;
}
.initParams .initParamsUserId{
height: 50px;
line-height: 50px;
width: 270px;
border: 1px solid #fff;
border-top:none;
border-radius:0 0 3px 3px;
/*background:#333;*/
opacity:0.8;
display: none;
}
.initParams .initParamsNull{
height:40px;
}
.initParams .initParamsRoleBtn{
height: 40px;
width: 270px;
display: none;
}
.initParams .initParamsRoleBtn button{
height: 40px;
width: 130px;
font-size: 14px;
background: #3598db;
color: #fff;
outline-style: none;
border: 0;
border-radius:3px;
margin-left:5px;
}
.initParams .initParamsRoleBtn button:hover{
background:#58aced;
}
.ensureTeaBtn{
display: none;
width: 80px;
}
.ensureStuBtn{
display: none;
width: 80px;
}
/*错误弹出框*/
.errorBox{
display: none;
position: absolute;
top: 35%;
left: 33%;
width: 370px;
height: 174px;
background: white;
z-index: 2000;
}
.errorBox .errorHeadline{
height: 40px;
line-height: 40px;
background: #3b3b3b;
}
.errorBox .errorHeadline .errorHeadlineTitle{
position: absolute;
left: 14px;
font-size: 12px;
color: #fff;
}
.errorBox .errorHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.errorBox .errorHeadline a:hover{
color: #CCCCCC;
}
.errorBox .errorHeadline a:active{
color: #3b3b3b;
}
.errorContent{
height: 134px;
width: 370px;
background-color: #4f4e53;
overflow-x: hidden;
}
.errorContent .errorText{
font-size: 14px;
color: #fff;
text-align: center;
line-height: 14px;
position: absolute;
left: 50%;
top: 45%;
width: 250px;
margin-left: -125px;
line-height: 16px;
}
.errorContent .errorEnsure{
width: 66px;
height: 32px;
background: #999;
border: 0;
margin-left: 83px;
margin-top: 31px;
cursor: pointer;
}
.errorContent .errorCancel{
width: 66px;
height: 32px;
background: #3498db;
border: 0;
margin-top: 31px;
margin-left: 93px;
cursor: pointer;
}
/*设置*/
.setContent li:nth-of-type(1),.setContent li:nth-of-type(3){
height:30px;
line-height: 30px;
}
.setContent li:nth-of-type(3){
margin-top: 36px;
}
.setContent li:nth-of-type(1) span,.setContent li:nth-of-type(3) span{
float: left;
font-size: 14px;
color: #666;
}
/*设置的弹出框 左右滑动*/
.setContent li:nth-of-type(4){
height: 48px;
line-height: 48px;
position: relative;
margin-top: 15px;
}
.setContent li:nth-of-type(4) p:nth-of-type(1){
position: absolute;
display: inline-block;
font-size: 14px;
color: #666;
left:0;
top:0;
}
.setContent li:nth-of-type(4) span:nth-of-type(1){
position: absolute;
display: inline-block;
margin-left: 70px;
left:0;
top:0;
}
.setContent li:nth-of-type(4) span:nth-of-type(2){
position: absolute;
display: inline-block;
left:80px;
top:0;
}
/*.setContent li:nth-of-type(4) .scrollBar{*/
/*position:absolute;*/
/*left: 92px;*/
/*display: inline-block;*/
/*width: 110px;*/
/*height: 2px;*/
/*background-color: #ccc;*/
/*margin: 24px 10px;*/
/*-webkit-border-radius: 2px;*/
/*-moz-border-radius: 2px;*/
/*border-radius: 2px;*/
/*cursor: pointer;*/
/*}*/
/*.setContent li:nth-of-type(4) .scroll_Thumb {*/
/*display: inline-block;*/
/*height: 10px;*/
/*width: 10px;*/
/*background-color: #efefef;*/
/*-webkit-border-radius: 2em;*/
/*-moz-border-radius: 2em;*/
/*border-radius: 2em;*/
/*border: 1px solid #ccc;*/
/*-webkit-box-shadow: 0px 0px 5px #ccc;*/
/*-moz-box-shadow: 0px 0px 5px #ccc;*/
/*box-shadow: 0px 0px 5px #ccc;*/
/*position: absolute;*/
/*cursor: pointer;*/
/*bottom: -4px;*/
/*left:0;*/
/*}*/
/*.setContent li:nth-of-type(4) .scroll_Thumb:hover {*/
/*background-color: #3498db;*/
/*border: 1px solid #fff;*/
/*}*/
.setContent li:nth-of-type(4) .soundRange{
position: absolute;
left: 90px;
top: 20px;
width: 270px;
cursor: pointer;
}
.setContent li:nth-of-type(4) input[type="range"]{
margin-top: 2px;
/*background-color: #ccc;*/
-webkit-appearance: none;
height: 3px;
background: -webkit-linear-gradient(#3498db, #3498db) no-repeat, #ddd;/*设置左边颜色为#61bd12，右边颜色为#ddd*/
cursor: pointer;
border: 0;
}
.setContent li:nth-of-type(4) input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;/*清除系统默认样式*/
height: 15px;/*拖动块高度*/
width: 15px;/*拖动块宽度*/
background: #fff;/*拖动块背景*/
border-radius: 50%; /*外观设置为圆形*/
/*border: solid 1px #ddd; !*设置边框*!*/
cursor: pointer;
}
.setContent li:nth-of-type(4) span:nth-of-type(3){
position:absolute;
left: 220px;
display: inline-block;
}
.setContent li:nth-of-type(4) span:nth-of-type(4){
position:absolute;
left: 245px;
display: inline-block;
}
/*.setContent li:nth-of-type(5){*/
/*height: 48px;*/
/*line-height: 48px;*/
/*position: relative;*/
/*margin-top: 10px;*/
/*}*/
/*.setContent li:nth-of-type(5) p:nth-of-type(1){*/
/*position: absolute;*/
/*border: none;*/
/*left: 0;*/
/*top:0;*/
/*width: 16px;*/
/*height: 16px;*/
/*margin-left: 70px;*/
/*background: url("../images/mic.png") no-repeat center center;*/
/*}*/
/*.set-voice-progress{*/
/*margin-left: 103px;*/
/*width: 150px;*/
/*height: 22px;*/
/*!*background: #3c3c3c;*!*/
/*position: relative;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-1{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 0;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 5s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 5s 0s infinite linear;*/
/*animation:throbber-loader 5s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-2{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 8px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 6s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 6s 0s infinite linear;*/
/*animation:throbber-loader 6s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-3{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 16px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 7s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 7s 0s infinite linear;*/
/*animation:throbber-loader 7s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-4{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 24px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 8s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 8s 0s infinite linear;*/
/*animation:throbber-loader 8s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-5{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 32px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 9s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 9s 0s infinite linear;*/
/*animation:throbber-loader 9s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-6{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 40px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 10s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 10s 0s infinite linear;*/
/*animation:throbber-loader 10s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-7{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 48px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 11s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 11s 0s infinite linear;*/
/*animation:throbber-loader 11s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-8{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 56px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 12s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 12s 0s infinite linear;*/
/*animation:throbber-loader 12s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-9{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 64px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 13s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 13s 0s infinite linear;*/
/*animation:throbber-loader 13s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-10{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 72px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 14s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 14s 0s infinite linear;*/
/*animation:throbber-loader 14s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-11{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 80px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 15s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 15s 0s infinite linear;*/
/*animation:throbber-loader 15s 0s infinite linear;*/
/*}*/
/*.set-voice-progress .set-voice-progress-span-12{*/
/*position: absolute;*/
/*width: 4px;*/
/*height: 17px;*/
/*left: 88px;*/
/*top:0;*/
/*background: #cbcbcb;*/
/*-moz-animation: throbber-loader 16s 0s infinite linear;*/
/*-webkit-animation:throbber-loader 16s 0s infinite linear;*/
/*animation:throbber-loader 16s 0s infinite linear;*/
/*}*/
.setContent li:nth-of-type(5){
height: 48px;
line-height: 48px;
position: relative;
margin-top: 40px;
}
.setContent li:nth-of-type(5) .setSave{
width: 66px;
height: 32px;
background: #999;
border: 0;
margin-left: 118px;
cursor: pointer;
color: #fff;
border-radius: 3px;
}
.setContent li:nth-of-type(5) .setCancel{
width: 66px;
height: 32px;
background: #3498db;
border: 0;
margin-left: 50px;
/*margin-left: 34px;*/
cursor: pointer;
color: #fff;
border-radius: 3px;
}
/*设置Select样式*/
.SelectList
{
float:left;
display:block;
width:325px;
height: 30px;
margin-left: 28px;
margin-right: 0;
padding-right: 14px;
background: transparent;
}
.SelectList option{
width: 218px;
height: 10px;
max-width: 218px;
}
.setContent li:nth-of-type(2){
display: none;
margin-top: 16px;
}
@-moz-keyframes throbber-loader {
0% {
background: #dde2e7;
}
10% {
background: #6b9dc8;
}
}
@-webkit-keyframes throbber-loader {
0% {
background: #dde2e7;
}
10% {
background: #6b9dc8;
}
}
@keyframes throbber-loader {
0% {
background: #dde2e7;
}
10% {
background: #6b9dc8;
}
}
.header,.docBox,.botTurn,.videoWindow,.left,.tabTitle,.input-send,.curClassUserList {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.leftGap{
width:13px;
height:100%;
position: absolute;
left:60px;
top:0;
display: none;
}
.rightGap{
width:10px;
height:100%;
float: right;
display: none;
}
/*控制左侧栏是否可点击的遮罩层*/
.leftBarEnabledMask{
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: none;
}
/*控制左侧栏是否可点击的遮罩层*/
.bottomBarEnabledMask{
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: none;
}
/*答题卡弹出框*/
.answerAllBox{
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: rgba(0, 0, 0, .7);
display: none;
z-index:502;
}
.themeBox{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 480px;
height: 560px;
background: #fcfcfc;
}
.themeBox .themeHeadline{
height: 35px;
line-height: 35px;
background: #3b3b3b;
}
.themeBox .themeHeadline .themeHeadlineTitle{
position: absolute;
left: 14px;
color: #fff;
}
.themeBox .themeHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.themeBox .themeHeadline a:active{
color: #3b3b3b;
}
.themeTit{
height: 30px;
line-height: 30px;
padding-top:10px;
border-bottom:1px solid #e1e1e1;
font-weight: normal;
}
.themeTit1{
font-weight: normal;
}
.themeTit1 b{
float: left;
}
.themeTit1 p{
font-size:12px;
letter-spacing:1px;
}
.themeCount{
width:90%;
padding-left:5%;
color:#666666;
}
.themeList{
border:1px solid #e1e1e1;
border-radius:4px;
margin-top:6px;
background: #fff;
position: relative;
height: 53px;
}
.themeTrends ul{
margin-left:15px;
}
.themeList ul li{
margin-top:10px;
}
.themeInput{
overflow: hidden;
height: auto;
margin-bottom:5px;
}
.themeInput ul{
width:310px;
margin-top:10px;
}
.themeInput ul li{
margin-bottom:10px;
margin-top:0;
}
.themeList ul li{
float: left;
}
.themeTrends ul li:last-of-type{
margin-right:10px;
font-weight:bold;
background:#f7f7f7;
border-radius:4px;
cursor:pointer;
}
.themeAdd{
width:30px;
height:30px;
border:1px solid #e1e1e1;
border-radius:4px;
line-height:30px;
text-align: center;
color:#666666;
}
.themeTrends ul li:last-of-type:hover{
background:#dfdada;
}
.themeTrends ul li:not(:first-of-type),.themeTrends ul li:not(:last-of-type){
float: left;
margin-right:15px;
position: relative;
}
.themeList ul li p{
width:32px;
height:32px;
border:1px solid #e1e1e1;
border-radius:4px;
line-height:32px;
text-align: center;
color:#666666;
}
.themeList ul li span{
display: none;
position: absolute;
right:-7px;
top:-6px;
width:15px;
height:15px;
line-height:13px;
text-align: center;
background:#e64b15;
color:#fff;
font-weight: bold;
border-radius:50%;
cursor:pointer;
}
.themeList ul li input{
width:60px;
height:30px;
border:1px solid #e1e1e1;
border-top:2px solid #e1e1e1;
color:#666666;
padding-left:5px;
}
.themeListFixed ul{
padding-left: 5px;
}
.themeListFixed ul li{
padding:0 5px;
}
.themeListFixed ul li p{
width:80px;
height: 32px;
line-height: 32px;
border:1px solid #e1e1e1;
border-radius:4px;
font-size: 14px;
}
.CountZero{
height: 50px;
clear: both;
}
.CountZero span{
float: left;
line-height: 50px;
font-size: 14px;
cursor:pointer;
}
.themeSelect{
width:80px;
height:30px;
border:1px solid #e1e1e1;
float: left;
position: relative;
margin-top:10px;
font-size: 14px;
cursor: pointer;
}
.themeSelect .show{
height:30px;
line-height: 30px;
padding-left:5px;
}
.themeSelect i{
position: absolute;
width:0;
height:0;
border:5px solid transparent;
border-top-color:#e1e1e1;
right:5px;
top:13px;
}
.themeSelect:hover i{
border-top-color:#3b3b3b;
}
.themeSelect .themeUl{
display: none;
width:80px;
height:126px;
position: absolute;
left:0;
top:-126px;
z-index:5;
border:1px solid #696969;
background: #fff;
}
.themeSelect ul li{
height: 21px;
line-height: 21px;
font-size: 12px;
padding-left:2px;
cursor: pointer;
}
.themeSelect ul li:hover{
background: #81868d;
color:#fff;
}
.themeSelect .active{
background: #3b3b3b;
color:#fff;
}
.dynamicRight{
float:right;
width:70px;
height:30px;
line-height: 30px;
text-align: center;
font-size: 14px;
background: #3b3b3b;
color:#fff;
margin-right:10px;
border-radius: 3px;
cursor:pointer;
position: absolute;
right:0;
top:12px;
display: none;
}
/*答题卡 input 错误提示框*/
.inputErrerBox{
display: none;
position: absolute;
z-index:5;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
}
.inputErrer{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 280px;
height: 152px;
background: white;
}
.inputErrer .inputErrerTitle{
height: 32px;
line-height: 32px;
background: #3b3b3b;
}
.inputErrer .inputErrerTitle a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.inputErrer .inputCount{
height: 130px;
line-height: 115px;
text-align: center;
}
/*答题卡结果弹出框*/
.resultBox{
display: none;
position: absolute;
left: 0;
right: 0;
top: 22%;
margin: auto;
width: 450px;
height:375px;
z-index: 5;
font-size: 14px;
}
.resultBox .resultHeadline{
height: 35px;
line-height: 35px;
background: #3b3b3b;
}
.resultBox .resultHeadline .resultHeadlineTitle{
position: absolute;
left: 14px;
color: #fff;
}
.resultBox .resultHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.resultBox .resultHeadline a:active{
color: #3b3b3b;
}
.resultContent{
background:#fcfcfc;
width:100%;
font-size: 14px;
position: relative;
}
.resultContent .resultTit{
width:90%;
height:50px;
position: relative;
font-size: 14px;
margin-left:5%;
}
.resultContent .resultTit p{
position: absolute;
top:15px;
}
.resultTit p:nth-child(1){
left:10px;
}
.resultTit p:nth-child(2){
right:10px;
color:#3b3b3b;
}
.layerBox{
width:310px;
min-height:70px;
background: #fff;
border-radius: 5px;
border:1px solid #d5d5d5;
z-index: 6;
position: absolute;
padding:10px;
display: none;
word-break:break-all;
}
.layerBox span{
display: inline-block;
color:#d46363;
height:25px;
line-height: 25px;
}
.resultListUl{
width:90%;
margin-left:5%;
}
.resultListUl li{
width:100%;
height:50px;
position:relative;
}
.resultListUl li b{
position: absolute;
left:0;
top:5px;
}
.resultListUl li span{
position: absolute;
right:0;
top:5px;
}
.resultListUl li .staticPlan{
width:100%;
height:10px;
background:#e8e8e8;
position: absolute;
left:0;
bottom:8px;
}
.resultListUl li .dynamicPlan{
width:0%;
height:10px;
background:#92e325;
position: absolute;
left:0;
bottom:8px;
}
.resultBtn{
width:50%;
height: 40px;
margin-left:25%;
padding:30px 0 20px 0;
}
.resultBtn p{
width:80px;
height:32px;
float: left;
margin:0 15px;
color:#fff;
text-align: center;
line-height: 32px;
cursor: pointer;
border-radius:3px;
}
.resultBtn .resultConceal{
background:#3b3b3b;
}
.resultBtn .resultTermination{
background: #89817e;
}
/*学生界面弹出框*/
.answerStudentBox{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 450px;
height: 250px;
background: white;
z-index: 5;
font-size: 14px;
display: none;
}
.answerStudentBox .studentHeadline{
height: 35px;
line-height: 35px;
background: #3b3b3b;
padding-left:14px;
color:#fff;
}
.countdown{
opacity: 0;
width:90%;
height:50px;
margin-left:5%;
padding-top:20px;
}
.signCountdown{
opacity: 0;
width:90%;
height:50px;
margin-left:5%;
padding-top:20px;
}
.resultValueUl{
width:100%;
height: 50px;
}
.resultValueUl li{
float: left;
text-align: center;
word-break: break-all;
}
.answerStudentContent .choiceBtn{
width:50%;
height: 40px;
margin-left:25%;
position: absolute;
left:0;
bottom:20px;
}
.choiceBtn p{
width:80px;
height:32px;
float: left;
margin:0 15px;
color:#fff;
text-align: center;
line-height: 32px;
cursor: pointer;
border-radius:3px;
}
.choiceBtn .referBtn{
background: #3b3b3b;
}
.choiceBtn .abandonBtn{
background: #89817e;
}
/*点名弹出框*/
.signAllBox{
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: rgba(0, 0, 0, .7);
display: none;
z-index:502;
}
.signBox{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 400px;
height: 250px;
background: white;
font-size: 14px;
}
.signBox .signHeadline{
height: 35px;
line-height: 35px;
background: #3b3b3b;
}
.signBox .signHeadline .signHeadlineTitle{
position: absolute;
left: 14px;
color: #fff;
}
.signBox .signHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.signBox .signHeadline a:active{
color: #3b3b3b;
}
.signContent{
background:#fcfcfc;
width:100%;
font-size: 14px;
height:215px;
}
.signSelect{
width:140px;
height:30px;
border:1px solid #e1e1e1;
position: relative;
font-size: 14px;
}
.signSelect .show{
height:32px;
line-height:32px;
padding-left:10px;
cursor: pointer;
}
.signSelect i{
position: absolute;
width:0;
height:0;
border:5px solid transparent;
border-top-color:#e1e1e1;
right:5px;
top:15px;
}
.signSelect:hover i{
border-top-color:#3b3b3b;
}
.signUl{
display: none;
width:140px;
height:110px;
position: absolute;
left:0;
top:-110px;
z-index:5;
border:1px solid #696969;
background: #fff;
}
.signSelect ul li{
height: 22px;
line-height: 22px;
font-size: 12px;
}
.signSelect ul li:hover{
background: #81868d;
color:#fff;
}
.signSelect .active{
background: #3b3b3b;
color:#fff;
}
.signContentB{
display: none;
}
.signContent .signSelect{
height:32px;
position:absolute;
left:35%;
top:100px;
}
.signContent .signBtn{
height:50px;
position: absolute;
bottom:35px;
left:35%;
}
.signBtn .sponsorSign{
width:140px;
height:45px;
line-height: 45px;
background: #3b3b3b;
color:#fff;
text-align: center;
border-radius:3px;
font-size: 16px;
cursor: pointer;
}
.turnListBox{
width:100%;
height:150px;
margin-top:10px;
overflow: hidden;
}
.turnListBox ul{
width:85%;
height:100%;
overflow-y: auto;
margin-left:13%;
}
.turnListBox ul li{
width:100%;
height:40px;
line-height: 40px;
}
.turnListBox ul li p{
float: left;
}
.turnListBox ul li .turnListItemName{
width:40%;
}
.turnListBox ul li .turnListItemTime{
width:60%;
}
.turnBox{
position: absolute;
right:5px;
bottom:15px;
width:60%;
}
.turnListBox ::-webkit-scrollbar{
width:11px;
}
.turnListBox ::-webkit-scrollbar-thumb{
background:#c6cacd;
}
.turnBox p{
float: left;
width:50%;
height:32px;
line-height: 32px;
text-align: center;
}
.turnBox .turnResult{
color:#3b3b3b;
font-size: 16px;
}
.turnBox .turnResultBtn{
background:#3b3b3b;
color:#fff;
border-radius:3px;
cursor: pointer;
}
/*学生端*/
.signStudentBox{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 400px;
height: 250px;
background: white;
z-index: 5;
font-size: 14px;
display: none;
}
.signStudentBox .signStudentHeadline{
height: 35px;
line-height: 35px;
background: #3b3b3b;
}
.signStudentBox .signStudentHeadline .signStudentHeadlineTitle{
position: absolute;
left: 14px;
color: #fff;
}
.signStudentBox .signStudentHeadline a{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.signStudentBox .signStudentHeadline a:active{
color: #3b3b3b;
}
.signStudentContent{
background:#fcfcfc;
width:100%;
height:215px;
font-size: 14px;
}
.turnStudentBtn{
width:140px;
height:40px;
line-height: 40px;
background: #3b3b3b;
color:#fff;
text-align: center;
border-radius:3px;
font-size: 16px;
cursor: pointer;
position: absolute;
left: 0;
right: 0;
margin: auto;
top:60%;
}
/*底部视频区域*/
.botVideoWindow{
width: 100%;
height:148px;
position: relative;
float: left;
display: none;
overflow-x: scroll;
overflow-y: hidden;
}
.botH5VideoBox{
width:100%;
/*width: 895px;*/
height:144px;
padding-top:14px;
display: none;
}
.botFlashVideoBox{
/*width: 895px;*/
width: 100%;
height:144px;
position: absolute;
left:0;
top:0;
display: none;
}
.botH5VideoSingleBox{
width:174px;
height:130px;
background: #262626;
/*margin-right:10px;*/
margin-left: 10px;
float: left;
display: none;
}
.centre{
width:150px;
height:100%;
float: right;
}
/*显示图片大图*/
.imagesLargerBox{
width:100%;
height:100%;
background: rgba(0, 0, 0, .7);
position: absolute;
left:0;
top:0;
}
.magnifyHeadline{
width:100%;
height:35px;
}
.magnifyHeadlineA{
position: absolute;
right:14px;
top:14px;
color:#fff;
}
.magnifyImgBox{
width:100%;
height:100%;
}
.magnifyImg{
max-width:90%;
max-height: 90%;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background-size:100% 100%;
}
/*聊天发送图片*/
.message .chatImg{
width: 100px;
height: auto;
cursor: pointer;
}
.fileImgBtn{
float: left;
font-size: 18px;
color: #ccc;
margin-left: 10px;
margin-top: 7px;
cursor: pointer;
}
.fileImgInput{
position: absolute;
left: 67px;
top: 7px;
width: 20px;
height: 20px;
opacity: 0;
cursor: pointer;
overflow: hidden;
font-size: 0;
}
/*媒体共享控制条*/
.h5MediaShareControls{
position: absolute;
bottom:0;
height: 36px;
width: 100%;
min-width: 330px;
background: #4f4f52;
display: none;
}
/*暂停/播放按钮*/
.mediaShareProgressBtn{
float: left;
width: 12px;
height: 36px;
line-height: 36px;
margin-right: 15px;
}
.mediaShareProgressPlay{
margin-top: 11px;
margin-left: 10px;
width: 15px;
height: 15px;
float: left;
cursor: pointer;
background: url("../images/media/play-normal.png") no-repeat;
}
.mediaShareProgressPause{
margin-top: 11px;
margin-left: 10px;
width: 15px;
height: 15px;
float: left;
cursor: pointer;
background: url("../images/media/pause-normal.png") no-repeat;
}
/*进度条*/
.mediaSharePlayProgressBox{
float: left;
margin-left: 10px;
width: 86%;
height: 2px;
margin-top: 3px;
position: relative;
}
.mediaSharePlayProgressBox span{
display: inline-block;
}
.mediaShare_bg{
width: 100%;
height: 7px;
background: #b2b2b2;
position: absolute;
left: 0;
top: 12px;
cursor: pointer;
}
.mediaShare_color{
height: 7px;
width: 0%;
background: #3598db;
.usersign{
width:420px;
height: 475px;
position: absolute;
left: 0;
top: 12px;
cursor: pointer;
}
.mediaShare_btn{
width: 20px;
height: 20px;
background: url(../images/media/Play-Control.png) no-repeat;
position: absolute;
left: 0%;
top: 9px;
margin-left: -4px;
cursor: pointer;
}
.mediaShareProgressVolBtn{
position: absolute;
right: 0px;
width: 12px;
height: 36px;
line-height: 36px;
margin-right: 22px;
}
.mediaShareTimestamp{
float: left;
margin-left: 8px;
width: 90px;
height: 20px;
margin-top: 10px;
position: relative;
font-size: 14px;
color: #b2b2b2;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
.mediaVolumePlay{
margin-top: 12px;
margin-left: 8px;
width: 17px;
height: 15px;
float: left;
cursor: pointer;
background: url(../images/media/speaker-normal.png) no-repeat;
.userLogin{
height:420px;
}
.mediaSharePlayProgressVoiceBox{
display: none;
width: 10px;
height: 80px;
.usersignA{
font-size: 16px;
position: absolute;
right: 20px;
bottom: 48px;
right:10px;
top:10px;
color: #666666;
}
.mediaShareVoice_bg{
width: 3px;
height: 100%;
background: #b2b2b2;
position: absolute;
right: 0.5px;
top: 12px;
.usersignTit{
font-size: 16px;
text-align: center;
height: 60px;
line-height: 60px;
border-bottom:1px solid #e6e6e6;
margin:0 30px 25px;
color:#666666;
}
.mediaShareVoice_color{
height: 100%;
width: 3px;
background: #3598db;
position: absolute;
left: 7px;
bottom: -12px;
.usersignLi{
height:32px;
margin:0 70px 20px;
line-height: 32px;
border-radius: 2px;
border:1px solid #e6e6e6;
font-size: 12px;
}
.mediaShareVoice_btn{
width: 10px;
height: 10px;
background: url(../images/media/volume-control.png) no-repeat;
position: absolute;
top: 0%;
margin-left: 4px;
margin-top: 7px;
cursor: pointer;
.userVerifyLi{
width: 157px;
position: relative;
}
.userVerifyLiInput{
/*1v1视频区域样式*/
.media1v1BoxView{
width:320px;
height:100%;
float: right;
position: relative;
display: none;
}
.media1v1BoxView_flash{
width:320px;
height:490px;
display: none;
.usersignInput{
padding-left:20px;
border:none;
background: none;
outline: none;
}
.media1v1BoxView_h5{
width:320px;
height:490px;
.userVerifyLiInputBtn{
height:32px;
border:none;
color:#fff;
background: #3498db;
width:100px;
text-align: center;
margin-left:20px;
position: absolute;
left:0;
border-radius: 3px;
right:-120px;
top:0;
display: none;
}
.media1v1BoxView_top,.media1v1BoxView_bottom{
width:320px;
height:240px;
cursor: pointer;
}
.media1v1BoxView_top{
.permitSign{
border:none;
margin-bottom:10px;
margin-top: -10px;
position: relative;
}
/*视频区域上一步下一步按钮*/
.styleStep{
width:15px;
height:30px;
position: absolute;
bottom:50px;
background: #474747;
opacity:.6;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.nextStep {
background: url("../images/media/turnRight-hover.png") no-repeat center center;
background-size: 100% 100%;
right: 3px;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
display: none;
.selectStatus{
padding-left:20px;
color:#333333;
}
.prevStep {
background: url("../images/media/turnLeft-hover.png") no-repeat center center;
background-size: 100% 100%;
position: absolute;
left: 13px;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
.btnUsersign{
width: 100%;
height:34px;
background: #3498db;
color:#fff;
text-align: center;
border:none;
border-radius: 3px;
cursor: pointer;
display: none;
}
/*flash和浏览器和摄像头麦克风错误*/
.errorHintBox{
z-index: 2000;
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: rgba(0, 0, 0, .7);
.permitSignIcon{
display: none;
}
.errorHint{
.permitSignIcon+label{
width: 18px;
height:18px;
display: inline-block;
cursor: pointer;
margin-right:15px;
background: url(../images/circle.png) no-repeat;
position: absolute;
left:0;
right: 0;
top:0;
bottom:0;
margin:auto;
width: 370px;
height: 220px;
background: #4f4e53;
color:#fff;
display: none;
}
.errorHint1{
height: 174px;
}
.errorHint2{
height:210px;
}
.errorHint3{
height: 190px;
}
.errorFlashHintHeadline{
height: 35px;
line-height: 35px;
background: #3b3b3b;
}
.errorHintHeadlineTitle{
position: absolute;
left: 14px;
font-size: 12px;
color: #fff;
}
.errorFlashHintA{
position: absolute;
top: 0;
right: 14px;
color: #ffffff;
}
.errorFlashHintA:hover{
color: #CCCCCC;
}
.errorFlashHintA:active{
color: #3b3b3b;
}
.errorHintTit{
font-size: 14px;
padding:7px 0 7px 20px;
top:5px;
}
.errorFlashHintList{
font-size:12px;
height: 26px;
line-height: 26px;
color:#fff;
text-decoration: underline;
.permitSignIcon:checked+label{
width: 18px;
height:18px;
display: inline-block;
width:100%;
cursor: pointer;
background: url(../images/circle01.png) no-repeat;
}
.errorFlashHintList:hover{
text-decoration: underline;
color:#5fa9da;
.permitSignMsg{
padding-left:30px;
}
.errorFlashIcon{
padding:0 5px 2px 10px;
}
.errorHintContent{
font-size: 14px;
text-align: center;
padding-top:70px;
}
.errornetworkHintContent{
font-size: 14px;
text-align: center;
padding-top:40px;
.btnUsersignLi{
margin-bottom: 10px;
}
.errorFlashTit{
display: inline-block;
font-size: 14px;
.loginBtnBox{
width:280px;
font-size: 12px;
text-align: right;
margin:0 70px;
}
.errorFlashLink{
.loginBtn{
color:#d95136;
text-decoration: underline;
}
.errorFlashLink:hover{
text-decoration: underline;
}
.flashHintImg{
width:92%;
height:100%;
margin-left:4%;
}
.errorDownloadFlashTit{
font-size: 14px;
padding:40px 20px 7px 20px;
}
.errorSetFlashHintTit{
font-size: 14px;
padding:25px 0 7px 20px;
}
.errorSetFlashHintInfo{
font-size: 14px;
border: 1px solid #666;
margin:10px;
padding:15px 10px 20px;
.usersignNameLi{
position: relative;
}
.errorSetFlashHintA{
font-size: 14px;
text-decoration: underline;
color:#3498db;
.requiredMsg{
position: absolute;
bottom: 25px;
right:36%;
width: 115px;
text-align: center;
right:-15px;
top:4px;
font-size: 20px;
line-height: 32px;
color:#d95136;
}
.errorSetFlashHintB{
font-size: 14px;
text-decoration: underline;
color:#3498db;
position: absolute;
bottom: 25px;
right:41%;
/*登录*/
.forgetPasswordBtn{
width:280px;
font-size: 12px;
text-align: right;
margin:0 70px;
color:#333333;
cursor: pointer;
display: none;
right:36%;
width: 115px;
text-align: center;
}
.errorSetFlashHintA:hover,.errorSetFlashHintB:hover{
color:#5fa9da;
text-decoration: underline;
margin-bottom:20px;
}
.errorFlashListLeft{
float: left;
width:40%;
padding-left:10px;
.nowSignBtn{
color:#d95136;
margin-top:20px;
}
.errorFlashListLeft1{
width:53%;
.openidOauthBox{
width:280px;
margin:0 70px;
}
.showWindowText{
font-size: 14px;
color: #fff;
text-align: center;
margin-top: 28px;
line-height: 14px;
position: absolute;
left: 50%;
top: 40px;
width: 200px;
margin-left: -100px;
}
.closeInfoBtn{
width: 70px;
height: 32px;
background: #999;
border: 0;
margin-left: 72px;
margin-top: 77px;
.openidOauth{
width:42px;
color:#bfbfbf;
cursor: pointer;
color: #fff;
border-radius: 3px;
}
.cancelCloseInfo{
background: #3498db;
margin-top: 78px;
margin-left: 93px;
}
.errorPublicHintContent{
font-size: 14px;
color: #fff;
text-align: center;
line-height: 14px;
position: absolute;
left: 50%;
top: 45%;
width: 250px;
margin-left: -125px;
line-height: 16px;
}
.setFlashGuideTit{
font-size: 14px;
padding-left:20px;
padding-top:10px;
}
.setFlashGuideList{
float: left;
width:100%;
height:30px;
line-height: 30px;
font-size: 14px;
}
.setFlashGuideListP{
float: left;
padding-left:10px;
}
.setFlashHintA{
float: right;
text-decoration: underline;
color:#3498db;
padding-right:20px;
.openidOauth1{
margin:0 60px;
}
.setFlashHintA:hover{
color:#5fa9da;
text-decoration: underline;
.openidOauth2{
padding-left:20px;
}
/*跳转到指定页*/
.botTurn .pageNo input{
float: right;
margin: 12px 10px 0 5px;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 3px;
background: #333333;
position: relative;
color: #CCCCCC;
text-align: center;
outline: none;
.weChatLogin{
width:42px;
height:42px;
display: inline-block;
}
.botTurn .turn .go{
float: right;
margin: 12px 10px 0 5px;
width: 28px;
height: 22px;
line-height: 22px;
border-radius: 3px;
position: relative;
font-size: 12px;
color: #fff;
cursor: pointer;
background: #3598db;
.openidOauthTit{
width: 42px;
text-align: center;
padding-top:5px;
display: inline-block;
}
/*人员搜索*/
.searchBox{
display: none;
position: absolute;
left: 10px;
top: 10px;
width: 300px;
height: 32px;
border-radius: 4px;
z-index: 1;
background: #e3e4e6;
}
.searchName{
height: 32px;
width: 265px;
outline: none;
border: none;
margin-left: 10px;
background: #e3e4e6;
font-size: 12px;
color: #333;
}
.clearInput{
position: absolute;
top: 8px;
cursor: pointer;
}
/*flash和浏览器和摄像头麦克风错误 END*/
/* warn警告框 */
.warnHintBox{
z-index: 2000;
width:300px;
height:120px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #fffdfd;
cursor: default;
font-size: 14px;
border-radius:4px;
box-shadow: 1px 3px 6px #adadad;
border: 1px solid #c1baba;
display: none;
}
.warnHintA{
position: absolute;
right:8px;
top:6px;
/*删除*/
.removeHandler{
width: 310px;
height:170px;
}
.warnHintContent{
width:100%;
height:120px;
line-height: 120px;
.removeHandlerContent{
text-align: center;
font-size: 16px;
color:#333333;
margin-top:60px;
}
/* warn警告框 END */
/*兼课声音控制*/
.invisible_speak{
float: left;
margin:10px 0 0 20px;
height:20px;
display: none;
}
.invisible_speakVolume{
width: 50px;
height: 15px;
float: left;
position: relative;
left:10px;
top:3px;
}
.invisible_speakVolumeBg{
width: 50px;
height: 15px;
background: url("../images/music/invisible_novolume.png");
}
.invisible_speakVolumePlanBox{
width: 50px;
height: 15px;
overflow: hidden;
position: absolute;
left:0;
top:0;
}
.invisible_speakVolumePlan{
width: 0%;
height: 15px;
position: absolute;
left:0;
top:0;
background: url("../images/music/invisible_volume.png");
.removeHandlerBtn{
margin-top:30px;
}
.invisible_speakBtn{
float: left;
position: relative;
width: 16px;
height: 18px;
.removeHandlerBtn button{
border:none;
width:72px;
height:34px;
border-radius: 3px;
}
.invisible_speakBtnOpen{
width: 16px;
height: 18px;
cursor: pointer;
.removeConfirm{
margin:0 30px 0 60px;
background: #3498db;
}
.invisible_speakBtnClose{
display: none;
position: absolute;
left: 0;
top:1px;
width: 16px;
height: 18px;
cursor: pointer;
.removeCancel{
background: #e6e6e6;
}
\ No newline at end of file
... ...
... ... @@ -6,1245 +6,363 @@
<link rel="stylesheet" href="stylesheets/style.css"/>
</head>
<body>
<div class="box">
<!--头部-->
<div class="baseboardBox">
<!--头部导航-->
<div class="headerBg">
<div class="header">
<li class="classStatusIcon iconfont"></li>
<!--左侧显示当前状态-->
<li class="classStatus"></li>
<!--当前课堂进行时间-->
<li class="classTimestampText"></li>
<!--当前课堂人数-->
<li class="curClassUserNum"><span id="memberNum"></span>
<span class="curClassUserNumTotal">0</span>
</li>
<!--左侧显示当前课堂主题-->
<li class="classTheme"></li>
<div class="exit header_title">
<span class="exitText header_text">退出</span>
<span class=" iconfont">&#xe607;</span>
</div>
<div class="setting header_title">
<span class="settingText header_text">设置</span>
<span class="iconfont">&#xe631;</span>
</div>
<div class="help header_title">
<span class="helpText header_text">帮助</span>
<span class="iconfont">&#xe608;</span>
</div>
<div class="sign header_title">
<span class="signText header_text">点名</span>
<span class="iconfont">&#xe67c;</span>
</div>
<div class="answer header_title">
<span class="answerText header_text">答题卡</span>
<span class="iconfont">&#xe67a;</span>
</div>
<div class="closeClass header_title">
<span class="startText header_text" id="endClassroom">结束课堂</span>
<span class="iconfont">&#xe660;</span>
</div>
<div class="pauseClass header_title">
<span class="startText header_text" id="pauseClassroom">暂停上课</span>
<span class="iconfont">&#xe60a;</span>
</div>
<div class="startClass header_title">
<span class="startText header_text" id="startClassroom">开始上课</span>
<span class="iconfont">&#xe61d;</span>
</div>
</div>
<!--头部以下的内容区域-->
<div class="mainContentBox clear" id="mainContentBox">
<div class="right">
<div class="videoWindow">
<!--flash播放器-->
<div class="videoDivBox" id="videoDivBox" style="background-color: #4c4c4c; width: 320px;height: 240px;">
</div>
<video id="replayVideo" poster="images/waiting.png" width="320" height="240"
style="background-color: #36a1c6;position: absolute;top: 0px;left: 0px">
您的浏览器不支持 video 标签。
</video>
</div>
<div class="discussAndUsers">
<ul class="tabTitle">
<li class="userListTitle">
<span id="rosterIcon" class="iconfont userListIcon">&#xe642;</span>
<span><em id="member">成员</em><em class="raiseNum"></em></span>
</li>
<li class="discussTitle ">
<span class="iconfont userListIcon">&#xe643;</span>
<span id="discuss">讨论</span>
</li>
<div class="header_img">
<img src="images/logo.png" alt="">
</div>
<ul class="header_list">
<li class="header_listMsg header_listTeacherMsg active" id="defaultBtn">首页</li>
<li class="header_listMsg" id="liveBtn">直播课堂</li>
<li class="header_listMsg header_listTeacherMsg" id="lanclassBtn">互动课堂</li>
<li class="header_listMsg header_listTeacherMsg" id="teacherBtn">老师</li>
</ul>
<!--举手按钮-->
<div id="raiseBtn" class="raiseBtn iconfont" title="举手按钮">&#xe603;</div>
<div class="controlBrush" title="控制学生画笔" id="controlBrush"></div>
<div class="tabCon curClassOn">
<!--搜索框-->
<div id="searchBox" class="searchBox">
<input id="searchName" class="searchName" type="text"/>
<span id="clearInput" class= "clearInput iconfont">&#xe635;</span>
</div>
<!--成员列表-->
<div class="curClassUserList">
<div id="curClassUserListTeacher"></div>
<div id="curClassUserListRaise"></div>
<div id="curClassUserListCommon"></div>
</div>
</div>
<div class="tabCon selectdOn">
<!--聊天区域-->
<div class="chat">
<div class="msg-border">
<div id="panel_message" class="msg clear">
</div>
</div>
<div class="input-send clear">
<button id="btn_send" class="send" type="submit">发送</button>
<span id="face" class="face iconfont">&#xe602;</span>
<span id="bannedBtn" class="bannedBtn" title="全体禁言"></span>
<span id="fileImg" class="fileImgBtn iconfont" title="上传图片">&#xe6c5;
<input type="file" id="fileImgInput" class="fileImgInput"/></span>
</span>
<!--监课音频推流控制-->
<div id="invisible_speak" class="invisible_speak">
<div class="invisible_speakBtn">
<img src="images/music/voice_close.png" alt="" id="invisible_speakBtnOpen" class="invisible_speakBtnOpen" title="开启音频">
<img src="images/music/voiceOpen.png" alt="" id="invisible_speakBtnClose" class="invisible_speakBtnClose" title="关闭音频">
<div class="header_seek">
<input type="text" class="header_seekInput">
<button class="header_seekBtn"><img src="" alt=""></button>
</div>
<div class="invisible_speakVolume">
<div class="invisible_speakVolumeBg" id="invisible_speakVolumeBg"></div>
<div class="invisible_speakVolumePlanBox">
<div class="invisible_speakVolumePlan" id="invisible_speakVolumePlan"></div>
</div>
</div>
</div>
<div class="input-face">
<input id="txt_message"
type="text"/>
</div>
</div>
</div>
<!--表情列表-->
<div id="facelist" class="swiper-container" style="display: none">
<div class="inner-slide" id="inner-slide">
<div id="slide1" class="swiper-slide">
<ul>
<li><img src="images/face/aimu.png" data-type="aimu">
</li>
<li><img src="images/face/daxiao.png" data-type="daxiao">
</li>
<li><img src="images/face/huaixiao.png" data-type="huaixiao">
</li>
<li><img src="images/face/liuhan.png" data-type="liuhan">
</li>
<li><img src="images/face/shuijiao.png" data-type="shuijiao">
</li>
<li><img src="images/face/yiwen.png" data-type="yiwen">
</li>
<li><img src="images/face/aoman.png" data-type="aoman">
</li>
<li><img src="images/face/jiew.png" data-type="jiew">
</li>
<li><img src="images/face/liulei.png" data-type="liulei">
</li>
<li><img src="images/face/sun.png" data-type="sun">
</li>
<li><img src="images/face/youhh.png" data-type="youhh">
</li>
<li><img src="images/face/baiyan.png" data-type="baiyan">
</li>
<li><img src="images/face/fadai.png" data-type="fadai">
</li>
<li><img src="images/face/jingkong.png" data-type="jingkong">
</li>
<li><img src="images/face/meiyan.png" data-type="meiyan">
</li>
<li><img src="images/face/tiaoxie.png" data-type="tiaoxie">
</li>
<li><img src="images/face/yue.png" data-type="yue">
</li>
<li><img src="images/face/baoquan.png" data-type="baoquan">
</li>
<li><img src="images/face/fanu.png" data-type="fanu">
</li>
<li><img src="images/face/jingya.png" data-type="jingya">
</li>
<li><img src="images/face/mojing.png" data-type="mojing">
</li>
<li><img src="images/face/touxiao.png" data-type="touxiao">
</li>
<li><img src="images/face/yumen.png" data-type="yumen">
</li>
<li><img src="images/face/bishi.png" data-type="bishi">
</li>
<li><img src="images/face/fendou.png" data-type="fendou">
</li>
<li><img src="images/face/kafei.png" data-type="kafei">
</li>
<li><img src="images/face/piezui.png" data-type="piezui">
</li>
<li><img src="images/face/tu.png" data-type="tu">
</li>
<li><img src="images/face/yun.png" data-type="yun">
</li>
<li><img src="images/face/bizui.png" data-type="bizui">
</li>
<li><img src="images/face/ganga.png" data-type="ganga">
</li>
<li><img src="images/face/kelian.png" data-type="kelian">
</li>
</ul>
</div>
<div id="slide2" class="swiper-slide">
<ul>
<li><img src="images/face/pijiu.png" data-type="pijiu">
</li>
<li><img src="images/face/weiqu.png" data-type="weiqu">
</li>
<li><img src="images/face/zaijian.png" data-type="zaijian">
</li>
<li><img src="images/face/cahan.png" data-type="cahan">
</li>
<li><img src="images/face/guai.png" data-type="guai">
</li>
<li><img src="images/face/koubi.png" data-type="koubi">
</li>
<li><img src="images/face/qiang.png" data-type="qiang">
</li>
<li><img src="images/face/weixiao.png" data-type="weixiao">
</li>
<li><img src="images/face/zancheng.png" data-type="zancheng">
</li>
<li><img src="images/face/cool.png" data-type="cool">
</li>
<li><img src="images/face/guzhang.png" data-type="guzhang">
</li>
<li><img src="images/face/kuaikl.png" data-type="kuaikl">
</li>
<li><img src="images/face/qinqin.png" data-type="qinqin">
</li>
<li><img src="images/face/woshou.png" data-type="woshou">
</li>
<li><img src="images/face/zhemo.png" data-type="zhemo">
</li>
<li><img src="images/face/dabing.png" data-type="dabing">
</li>
<li><img src="images/face/hanxiao.png" data-type="hanxiao">
</li>
<li><img src="images/face/kulou.png" data-type="kulou">
</li>
<li><img src="images/face/qiu.png" data-type="qiu">
</li>
<li><img src="images/face/xigua.png" data-type="xigua">
</li>
<li><img src="images/face/zhouma.png" data-type="zhouma">
</li>
<li><img src="images/face/daku.png" data-type="daku">
</li>
<li><img src="images/face/haqi.png" data-type="haqi">
</li>
<li><img src="images/face/kun.png" data-type="kun">
</li>
<li><img src="images/face/ruo.png" data-type="ruo">
</li>
<li><img src="images/face/xin.png" data-type="xin">
</li>
<li><img src="images/face/zuohh.png" data-type="zuohh">
</li>
<li><img src="images/face/dangao.png" data-type="dangao">
</li>
<li><img src="images/face/hua.png" data-type="hua">
</li>
<li><img src="images/face/lianhong.png" data-type="lianhong">
</li>
<li><img src="images/face/shuai.png" data-type="shuai">
</li>
<li><img src="images/face/yinxian.png" data-type="yinxian">
<ul class="DownloadLoginBox">
<li class="androidDownload">
移动端下载
</li>
<li class="userNews iconfont">&#xe608;</li>
<li class="userLoginBtn" id="homeUserLoginBtn"></li>
</ul>
</div>
</div>
<ul class="tiplist" id="tiplist">
<li class="bg"></li>
<li></li>
<!--图片轮播-->
<div class="slideshow" id="slideshow">
<ul class="motionMapBox" id="motionMapBox">
<li class="slidesMap"><img class="slidesImg" src="images/xdybg.png" alt=""></li>
<li class="slidesMap"><img class="slidesImg" src="images/bg.jpg" alt=""></li>
<li class="slidesMap"><img class="slidesImg" src="images/xdybg.png" alt=""></li>
<li class="slidesMap"><img class="slidesImg" src="images/bg.jpg" alt=""></li>
<li class="slidesMap"><img class="slidesImg" src="images/xdybg.png" alt=""></li>
</ul>
</div>
</div>
</div>
<!--箭头-->
<div class="arrowsBtn">
<div class="arrowsLeft"><p></p></div>
<div class="arrowsRight"><p></p></div>
</div>
</div>
<!--1V1视频布局-->
<div class="media1v1BoxView" id="media1v1BoxView">
<div class="media1v1BoxView_flash" id="media1v1BoxView_flash">
<!--<div id="media1v1BoxView_flash_content"></div>-->
</div>
<div class="media1v1BoxView_h5" id="media1v1BoxView_h5">
<div class="media1v1BoxView_top" id="media1v1BoxView_top">
<video id="media1v1BoxView_top_video" width="100%" height="100%"></video>
</div>
<div class="media1v1BoxView_bottom" id="media1v1BoxView_bottom">
<video id="media1v1BoxView_bottom_video" width="100%" height="100%"></video>
</div>
</div>
</div>
<div class="leftWarp">
<div class="leftWarp_top">
<!--左边栏-->
<div class="left">
<!--文档-->
<div class="docListOut docListOut1" id="docUploadOut" title="上传文档">
<span class="iconfont docList">&#xe648;<input type="file" id="file"/>
</span>
</div>
<div class="docListOut" id="docListOut" title="选择文档">
<span class="iconfont docList">&#xe620;</span>
<ol class="dots" id="dots">
</ol>
</div>
<div class="themeBox" id="themeBox">
<!--首页-->
<div class="box" id="defaultBox">
<div class="curriculumBox" id="liveListBox">
<div class="curriculumHandler">
<p class="curriculumTitle" id="liveCoursesTitle">最新直播课程</p>
<p class="curriculumMove">更多</p>
<img class="curriculumIcon" src="images/more.png" alt="">
</div>
<div class="curriculumListBox" id="liveList">
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<!--屏幕共享-->
<div class="docUploadForbid"></div>
<div class="docListOut" id="screenSharingOut" title="屏幕共享">
<span class="iconfont docList">&#xe66e;</span>
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<!--媒体共享-->
<div class="docListOut docUploadOut" id="mediaUpLoadOut" title="上传媒体文件">
<span class="iconfont docList">&#xe648;<input type="file" id="mediaFile"/>
</span>
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<div class="docListOut" id="mediaListOut" title="选择媒体文件">
<span class="iconfont docList">&#xe66f;</span>
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<!--伴音-->
<div class="docListOut" id="musicUploadOut" title="上传音频">
<span class="iconfont docList">&#xe68b;</span>
</div>
<!--控制左侧栏是否可点击的遮罩栏-->
<div class="leftBarEnabledMask" id="leftBarEnabledMask"></div>
</div>
<div class="leftGap"></div>
<!--<div class="rightGap"></div>-->
<div class="fold">
<!--显示隐藏右侧按钮-->
<div id="expand" class="expand">></div>
<div id="collapse" class="collapse"></div>
<div class="curriculumBox" id="lanclassListBox ">
<div class="curriculumHandler">
<p class="curriculumTitle" id="lessonsTitle">最新互动课程</p>
<p class="curriculumMove">更多</p>
<img class="curriculumIcon" src="images/more.png" alt="">
</div>
<div class="middle">
<div class="docBox">
<!--加载转圈-->
<div class="spinnerMasker">
<div class="exitSpinnerMasker">
<a href="javascript: void(0)" class="exitSpinnerMaskerA iconfont">&#xe638;</a>
</div>
<div class="spinnerMask"><div class="minspinner"></div></div>
<div class="spinnerHtml"></div>
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="curriculumListBox" id="lanclassList">
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
</div>
<!--文档-动态ppt-白板标注-->
<div class="docGroup" style="position: relative;background-color:rgb(50,50,50)" >
<iframe id="framePPT" class="framePPT" name="frame" src="" scrolling="no" frameborder="no"></iframe>
<img class="docView" width="100%"/>
<canvas id="canvasContent" class="canvasContent"></canvas>
<div class="laserBoard"><div class="laserRed"></div></div>
</div>
<!--屏幕共享-->
<div class="screenSharingGroup">
<div class="sharingMsgBox">
<!--<div class="sharingMsg"></div>-->
<img class="shareBackdrop" src="images/img.png" alt="">
<div id="opening" class="sharingMsg">正在开启</div>
<div id="download" class="sharingMsg sharingMsg1">请先下载最新版插件</div>
<div id="downloading" class="sharingMsg">正在下载中...</div>
<div id="stopShare" class="sharingMsg sharingMsg2">终止共享</div>
<div class="downloadCancel">取消</div>
<div class="curriculumBox curriculumBox1" id="teacherIntroBox">
<div class="curriculumHandler">
<p class="curriculumTitle">推荐老师</p>
<p class="curriculumMove">更多</p>
<img class="curriculumIcon" src="images/more.png" alt="">
</div>
<div class="screenMediaShareBox" style="position: absolute;width:100%;height: 100%; display: none">
<div id="screenMediaShare"></div>
<div class="curriculumListBox" id="teacherIntro">
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<div class="h5ScreenShareBox" style="position: absolute;width:100%;height: 100%; display: none">
<video id="h5ScreenShare" width="100%" height="100%"></video>
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<!--媒体共享-->
<div class="mediaShareGroup" id="mediaShareGroup">
<div class="h5MediaShareBox" style="position: absolute;width:100%;height: 100%; display: none">
<video id="h5MediaShare" width="100%" height="100%" autoplay="autoplay" ></video>
<div class="curriculumList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>
<!--媒体播放控制条-->
<div class="h5MediaShareControls" id="h5MediaShareControls">
<div class="mediaShareProgressBtn">
<span class="mediaShareProgressPlay" id="mediaShareProgressPlay" style="display: none;"></span>
<span class="mediaShareProgressPause" id="mediaShareProgressPause"></span>
</div>
<div class="mediaSharePlayProgressBox">
<span class="mediaShare_bg" id="mediaShareProgress_bg"></span>
<span class="mediaShare_color" id="mediaShareProgress_color" ></span>
<span class="mediaShare_btn" id="mediaShareProgress_btn"></span>
</div>
<div class="mediaShareTimestamp" id="mediaShareTimestamp">
00:00/00:00
</div>
<div class="mediaShareProgressVolBtn">
<span class="mediaVolumePlay" id="mediaShareVolumePlay"></span>
<!--课堂分类列表-->
<div class="classifyListBox" id="classifyListBox">
<div class="classifyListTitle" id="classifyListTitle">最新直播课程</div>
<div class="classifyListContent" id="classifyListContent">
<!--<div class="classifyList">
<img class="curriculumListImg" src="" alt="">
<p class="curriculumListTit">初一英语阅读理解习题课</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">今天 09:00-21:30</span>
<span class="curriculumListNum">3200人已预约</span>
</p>
</div>-->
</div>
<div class="mediaSharePlayProgressVoiceBox">
<span class="mediaShareVoice_bg" id="mediaShareVoice_bg"></span>
<span class="mediaShareVoice_color" id="mediaShareVoice_color"></span>
<span class="mediaShareVoice_btn" id="mediaShareVoice_btn"></span>
</div>
<!--互动课堂详情-->
<div class="lanclassBox" style="display: none">
<div class="lanclassContent">
<img class="lanclassContentCover" src="" alt="">
<div class="lanclassContentCenter">
<div class="lanclassContentTitle">
初一语文阅读理解习题课
</div>
<!--媒体共享区域的遮罩，不是老师的时候这个区域不可点击，需要遮罩盖住-->
<div class="mediaShareBoxMask" id="mediaShareBoxMask" style="position: absolute;width:100%;height: 100%;"></div>
<div class="lanclassContentInfo">
<img class="lanclassContentInfoPortrait" id="lanclassContentInfoPortrait" src="images/collect.png" alt="">
<span class="lanclassContentInfoName" id="lanclassContentInfoName">张媛媛</span>
</div>
<div class="lanclassContentInfoTime">
<span class="lanclassContentInfoTimeStart" lanclassContentInfoTimeStart>开始时间：2017-08-01 13:00:00</span>
<span class="lanclassContentInfoTimeEnd" lanclassContentInfoTimeEnd>结束时间：2017-08-01 13:00:00</span>
</div>
<!--伴音-->
<div class="musicShareGroup" id="musicShareGroup">
<div class="musicShareNameBox">
<span class="musicShareName" id="musicShareName">seasons in the sun</span>
<div class="lanclassContentApply" id="lanclassContentApply">我要报名</div>
</div>
<span class="closeMusicClose" id="closeMusicClose"></span>
<div class="musicSharePlayBox">
<div class="musicShareProgressBtn">
<span class="musicShareProgressPlay" id="musicShareProgressPlay"></span>
<span class="musicShareProgressPause" id="musicShareProgressPause"></span>
<div class="lanclassContentRight">
<div class="thirdPartyIconBox">
<span id="weixinIcon" class="thirdPartyIcon weixinIcon iconfont">&#xe608;</span>
<span id="qqIcon" class="thirdPartyIcon qqIcon iconfont">&#xe608;</span>
<span id="weiboIcon" class="thirdPartyIcon weiboIcon iconfont">&#xe608;</span>
</div>
<div class="musicSharePlayProgressBox">
<span class="musicShare_bg" id="musicShareProgress_bg"></span>
<span class="musicShare_color" id="musicShareProgress_color"></span>
<span class="musicShare_btn" id="musicShareProgress_btn"></span>
<div class="collectBox" id="collectYes">
<img class="collectIcon" id="collectYesIcon" src="images/collect.png" alt="">
<span class="collectText">已收藏</span>
</div>
<div class="musicTimeProgress">
<span class="musicPresentTime" id="musicPresentTime">0.00</span>
<span>/</span>
<span class="musicPresentTime" id="musicSumTime">0.00</span>
<div class="collectBox" id="collectNo">
<img class="collectIcon" id="collectNoIcon" src="images/not-collect.png" alt="">
<span class="collectText">未收藏</span>
</div>
</div>
<div class="musicSharePlayBox">
<div class="musicShareProgressBtn">
<span class="musicVolumePlay" id="musicShareVolumePlay"></span>
<span class="musicVolumePause" id="musicShareVolumePause"></span>
</div>
<div class="musicSharePlayProgressBox">
<span class="musicShare_bg" id="musicShareVoice_bg"></span>
<span class="musicShare_color" id="musicShareVoice_color"></span>
<span class="musicShare_btn" id="musicShareVoice_btn"></span>
<div class="lanclassContent" id="lanclassIntroduce">
<p class="lanclassIntroduceTitle">
课程介绍
</p>
<p class="lanclassIntroduceContent">
课程介绍Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar
tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
</p>
</div>
<div class="musicTimeProgress">
<span class="musicPresentTime" id="musicPlayPercentage">0%</span>
<div class="lanclassContent teacherInfos" id="teacherInfos">
<div class="lanclassIntroduceTitle" id="teacherInfoTitle">
老师简介
</div>
<div class="teacherInfoData">
<span class="teacherInfoName">张媛媛</span>
<span class="teacherInfoSchool">北京外国语学院</span>
</div>
<div class="musicShareBox" style="position: absolute;width:100%;height: 100%; display: none">
<div id="musicShare"></div>
<div class="lanclassIntroduceContent" id="teacherInfoContent">
课程介绍Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar
tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
</div>
<div class="h5MusicShareBox" style="position: absolute;width:100%;height: 100%; display: none">
<!--<video id="h5MusicShare" width="100%" height="100%" autoplay="autoplay"></video>-->
<audio class="h5Music" id="h5Music" controls="controls" style="position:absolute;z-index:10;top:0;left: 0;height: 100px;" autoplay="autoplay"></audio>
</div>
</div>
<!--折叠展开画板-->
<div class="foldDrawToolOut">
<span class="foldDrawTool">
<div class="arrowTop"></div>
<div class="arrowBottom"></div>
</span>
</div>
<div class="drawTool" style="display: block">
<li id="showColor" class="brushInfo showColor normal" title="选择颜色">
<!--颜色板-->
<ul class="toolColor">
<!--红色-->
<li id="redColor" class="redColor toolColorList" title="#b8242a" value="#b8242a"></li>
<!--蓝色-->
<li id="blueColor" class="blueColor toolColorList" title="#0071bc" value="#0071bc"></li>
<!--紫色-->
<li id="purpleColor" class="purpleColor toolColorList" title="#6a0db2" value="#6a0db2"></li>
<!--黄色-->
<li id="yellowColor" class="yellowColor toolColorList" title="#fae81b" value="#fae81b"></li>
<div class="footerBg">
<div class="footer">
<div class="footerLeft">
<ul class="footerLeftList">
<li class="footerLeftListMsg">企业合作</li>
<li class="footerLeftListMsg">人才招聘</li>
<li class="footerLeftListMsg">联系我们</li>
<li class="footerLeftListMsg">讲师招募</li>
<li class="footerLeftListMsg">常见问题</li>
<li class="footerLeftListMsg">意见反馈</li>
<li class="footerLeftListMsg">友情链接</li>
</ul>
</li>
<li id="showForm" class="brushInfo showForm " title="选择形状">
<!--颜色板-->
<ul class="toolForm">
<!--直线-->
<li id="straightBrush" class="straightBrush toolColorList" title="直线" value="#0071bc"></li>
<!--圆形-->
<li id="circleBrush" class="circleBrush toolColorList" title="圆形" value="#fae81b"></li>
<!--曲线-->
<li id="curveBrush" class="curveBrush toolColorList" title="曲线" value="#b8242a"></li>
<!--正方形-->
<li id="squareBrush" class="squareBrush toolColorList" title="正方形" value="#6a0db2"></li>
<!--自定义-->
<li id="customBrush" class="customBrush toolColorList" title="自定义" value="#6a0db2"></li>
</ul>
</li>
<li class="brushInfo pencil active" title="铅笔"></li>
<li class="brushInfo rescind normal" title="撤销上一步"></li>
<li class="brushInfo laserPen normal" title="激光笔"></li>
<li class="brushInfo clearContent normal" title="删除"></li>
</div>
<div class="botTurn" id="botTurn">
<div id="docControlBar">
<li class="turn" style=""><p class="go">GO</p></li>
<li class="pageNo" style=""><input type="text" id="pageNo"></li>
<li class="next-page "><a id="nextPage" class="nextPage" href="javascript:void(0)"><div class="arrowRight"></div></a></li>
<li class="total-page"><span id="totalPageNum">0</span></li>
<li class="bias" id="bias">/</li>
<li class="cur-page" id="curPage"><span id="currentPageNum">0</span></li>
<li class="prev"><a id="prevPage" class="prevPage" href="javascript:void(0)"><div class="arrowLeft"></div></a></li>
<li id="pptNextStep" class="pptNextStep iconfont" title="下一步动画">&#xe66d;</li>
<li id="pptPrevStep" class="pptPrevStep iconfont" title="上一步动画">&#xe66c;</li>
<li id="fitHeight" class="fitHeight setAdaptWH iconfont" title="自适应高" >&#xe696;</li>
<li id="fitWidth" class="fitWidth setAdaptWH iconfont" title="自适应宽">&#xe697;</li>
<li id="fitNormal" class="fitNormal setAdaptWH iconfont" title="显示全部">&#xe695;</li>
</div>
<li class="version" id="pcVersion"></li>
<!--控制底部栏是否可点击的遮罩栏-->
<div class="bottomBarEnabledMask" id="bottomBarEnabledMask"></div>
</div>
</div>
</div>
<div class="botVideoWindow" id="botVideoWindow">
<div class="botH5VideoBox" id="botH5VideoBox">
<video class="botH5VideoSingleBox" id="botH5VideoSingleBox_1"></video>
<video class="botH5VideoSingleBox" id="botH5VideoSingleBox_2"></video>
<video class="botH5VideoSingleBox" id="botH5VideoSingleBox_3"></video>
<video class="botH5VideoSingleBox" id="botH5VideoSingleBox_4"></video>
<video class="botH5VideoSingleBox" id="botH5VideoSingleBox_5"></video>
<video class="botH5VideoSingleBox" id="botH5VideoSingleBox_6"></video>
</div>
<div class="botFlashVideoBox" id="botFlashVideoBox"></div>
</div>
<span class="nextStep styleStep" id="nextStep"></span>
<span class="prevStep styleStep" id="prevStep"></span>
</div>
<!--文档上传的列表-->
<div class="listModal" id="docModalList">
<div class="listHeadline">
<div class="listHeadlineTitle" id="docListTitle">文档列表</div>
<a href="javascript: void(0)" id="closeDocList" class="iconfont">&#xe638;</a>
</div>
<div class="mediaFileContentBox">
<div class="mediaFileContentMenu">
<span class="mediaFileContentTxt">文件列表</span>
<span class="mediaFileContentMenuSpan ">
<lable class="mediaFileContentMenuLableIcon iconfont">&#xe672;</lable>
<label class="mediaFileContentMenuLableTxt">上传</label>
<input type="file" id="docFileBtn"/></span>
</div>
<div id="docFileContent" class="mediaFileContent" >
</div>
</div>
</div>
<!--媒体共享上传的列表-->
<div class="listModal" id="mediaShareModal">
<div class="listHeadline">
<div class="listHeadlineTitle" id="mediaListTitle">媒体文件列表</div>
<a href="javascript: void(0)" id="closeMediaList" class="iconfont">&#xe638;</a>
</div>
<div class="mediaFileContentBox">
<div class="mediaFileContentMenu">
<span class="mediaFileContentTxt">文件列表</span>
<span class="mediaFileContentMenuSpan ">
<lable class="mediaFileContentMenuLableIcon iconfont">&#xe672;</lable>
<label class="mediaFileContentMenuLableTxt">上传</label>
<input type="file" id="mediaFileBtn"/></span>
</div>
<div id="mediaFileContent" class="mediaFileContent" >
</div>
</div>
</div>
<!--伴音上传的列表-->
<div class="listModal" id="musicShareModal">
<div class="listHeadline">
<div class="listHeadlineTitle" id="musicListTitle">音频文件列表</div>
<a href="javascript: void(0)" id="closeMusicList" class="iconfont">&#xe638;</a>
</div>
<div class="mediaFileContentBox">
<div class="mediaFileContentMenu">
<span class="mediaFileContentTxt">文件列表</span>
<span class="mediaFileContentMenuSpan ">
<lable class="mediaFileContentMenuLableIcon iconfont">&#xe672;</lable>
<label class="mediaFileContentMenuLableTxt">上传</label>
<input type="file" id="musicFileBtn"/></span>
</div>
<div id="musicFileContent" class="mediaFileContent" >
</div>
</div>
<p class="copyrightMsg">© 2010 - 2015 三芒世纪（北京）科技有限公司 版权所有 京ICP备12014300号-1</p>
</div>
<div class="footerRight">
<!--帮助的弹出框-->
<div class="helpBox">
<div class="helpHeadline">
<div class="helpHeadlineTitle">帮助</div>
<a href="javascript: void(0)" class="iconfont">&#xe638;</a>
</div>
<div id="helpContent" class="helpContent" >
</div>
</div>
<!--结束课堂弹出框-->
<!-- <div class="endClassBox">
<div class="endClassHeadline">
<div class="endClassHeadlineTitle">结束课堂</div>
<a href="javascript: void(0)" class="endClassA iconfont ">&#xe638;</a>
</div>
<div id="endClassContent" class="endClassContent" >
<p class="endClassText">确定要结束当前课堂吗?</p>
<button class="endClassEnsure">确定</button>
<button class="endClassCancel">取消</button>
</div>
</div>-->
<!-- &lt;!&ndash;结束屏幕共享弹出框&ndash;&gt;
<div class="endShareBox">
<div class="endShareHeadline">
<div class="endShareHeadlineTitle">屏幕共享</div>
<a href="javascript: void(0)" class="endShareA iconfont ">&#xe638;</a>
</div>
<div id="endShareContent" class="endShareContent" >
<p class="endShareText">确定要结束屏幕共享吗?</p>
<button class="endShareEnsure">确定</button>
<button class="endShareCancel">取消</button>
</div>
</div>-->
<!-- &lt;!&ndash;退出弹出框&ndash;&gt;
<div class="exitClassBox">
<div class="exitClassHeadline">
<div class="exitClassHeadlineTitle">退出</div>
<a href="javascript: void(0)" class="exitClassA iconfont">&#xe638;</a>
</div>
<div id="exitClassContent" class="exitClassContent" >
<p class="exitClassText">确定要退出当前课堂吗?</p>
<button class="exitClassEnsure">确定</button>
<button class="exitClassCancel">取消</button>
</div>
</div>-->
</div>
<!--遮罩层-->
<div class="masker"></div>
<!--录制回放控制条-->
<div class="recordPlayControl"></div>
<!--登录-->
<div class="loginBg">
<!-- <div class="loginImg"></div>
<div class="login_star">
<p class="login_star1 star"></p>
<p class="login_star2 star"></p>
<p class="login_star3 star"></p>
<p class="login_star4 star"></p>
<p class="login_star5 star"></p>
<p class="login_star6 star"></p>
<p class="login_star7 star"></p>
<p class="login_star8 star"></p>
<p class="login_star9 star"></p>
<p class="login_star10 star"></p>
<p class="login_star11 star"></p>
<p class="login_star12 star"></p>
</div>-->
<div class="loginContentBox">
<ul class="loginContent">
<li class="loginContentImg"></li>
<li class="userNameLi">
<input class="userNameInput" type="text" placeholder="请输入用户名" maxlength="20"
</div>
<!--注册-->
<div class="userSignBox" id="userSignBox" style="display: none">
<div class="usersign" id="usersign">
<a href="javascript: void(0)" id="usersignA" class="usersignA iconfont">&#xe638;</a>
<ul>
<li class="usersignTit">注册</li>
<li class="usersignLi">
<input id="signName" class="userNameInput usersignInput" type="text" placeholder="填写用户名" maxlength="20"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
</li>
<li class="loginUser">
<p class="userTip"></p>
</li>
<li class="passWordLi">
<input class="passWordInput" type="password" placeholder="请输入密码">
<li class="usersignNameLi usersignLi">
<input id="signPhone" class="userPhoneInput usersignInput" type="text" placeholder="填写手机号" maxlength="20"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
<span class="requiredMsg">*</span>
</li>
<li class="loginPassWord">
<p class="passWordTip"></p>
<li class="usersignLi">
<input id="signMail" class="userMailInput usersignInput" type="text" placeholder="填写邮箱" maxlength="20"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
</li>
<p class="errorTip"></p>
<li class="btnLoginLi">
<button id="btnLogin">登录</button>
<li class="usersignNameLi usersignLi">
<input id="signPassWord" class="userPassWordInput usersignInput" type="text" placeholder="设置密码" maxlength="20"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
<span class="requiredMsg">*</span>
</li>
</ul>
</div>
<div class="bgLogin"></div>
</div>
<!--初始化参数-->
<div class="initParamsOut">
<!--<div class="loginImg"></div>-->
<div class="initParamsBox">
<ul class="initParams">
<li class="initParamsImg"></li>
<li class="initParamsClassId">
<input class="classId" type="text" placeholder="请输入课堂号">
<li class="userVerifyLi usersignLi">
<input id="securityCode" class="userVerifyLiInput usersignInput" type="text" placeholder="验证码" maxlength="5"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
<button class="userVerifyLiInputBtn">发送验证码</button>
</li>
<li class="initParamsUserId">
<input class="userId" type="text" placeholder="请输入userId">
<li class="permitSign usersignLi">
<input id="permitSign" class="permitSignIcon" type="checkbox">
<label for="permitSign"></label>
<span class="permitSignMsg">我已阅读并接受用户协议</span>
</li>
<li class="initParamsNull"></li>
<li class="initParamsRoleBtn">
<button class="ensureTeaBtn">老师</button>
<button class="ensureStuBtn">学生</button>
<li class="btnUsersignLi usersignLi">
<button id="signBtn" class="btnUsersign">注册</button>
</li>
<p class="errorTip"></p>
<p class="loginBtnBox">
<span>已有账号，去</span>
<a id="skipLoginBtn" class="loginBtn" href="javascript: void(0)">登录</a>
</p>
</ul>
</div>
<div class="bgInit"></div>
</div>
</div>
<div class="boxMask"></div>
<!--设置弹出框-->
<div id="H5settingBox" style="position: absolute;z-index:2100;width: 100%;height: 100%"></div>
<!--答题卡-->
<div class="answerAllBox">
<!--创建答题卡-->
<div class="themeBox">
<div class="themeHeadline">
<div class="themeHeadlineTitle">答题卡</div>
<a href="javascript: void(0)" class="themeHeadlineA iconfont ">&#xe638;</a>
</div>
<div id="themeContent" class="themeContent">
<div class="themeCount">
<h4 class="themeTit">卡片类型:</h4>
<div data-type="1" class="themeList themeTrends">
<ul class="themeTrendsUl" id="themeTrendsUlA">
<li class="themeTrendsLi">
<p></p>
<span>&times;</span>
</li>
<li class="themeTrendsLi">
<p></p>
<span>&times;</span>
</li>
<li class="themeTrendsLi">
<p></p>
<span>&times;</span>
</li>
<li class="themeTrendsLi">
<p></p>
<span>&times;</span>
</li>
<li class="themeAdd">
+
</li>
</ul>
<div class="dynamicRight">发布</div>
</div>
<div data-type="1" class="themeList themeTrends">
<ul class="themeTrendsUl" id="themeTrendsUlB">
<li class="themeTrendsLi">
<p>1</p>
<span>&times;</span>
</li>
<li class="themeTrendsLi">
<p>2</p>
<span>&times;</span>
</li>
<li class="themeTrendsLi">
<p>3</p>
<span>&times;</span>
</li>
<li class="themeTrendsLi">
<p>4</p>
<span>&times;</span>
</li>
<li class="themeAdd">
+
</li>
</ul>
<div class="dynamicRight">发布</div>
</div>
<div data-type="1" class="themeList themeTrends themeInput">
<ul class="themeTrendsUl" id="themeTrendsUlC">
<li class="themeTrendsLi">
<input type="text" class="themeVal" value="输入答案" maxlength="26">
<span>&times;</span>
</li>
<li class="themeTrendsLi">
<input type="text" class="themeVal" value="输入答案" maxlength="26">
<span>&times;</span>
</li>
<li class="themeTrendsLi">
<input type="text" class="themeVal" value="输入答案" maxlength="26">
<span>&times;</span>
</li>
<li class="themeAdd" id="themeAdd">
+
</li>
</ul>
<div class="dynamicRight dynamicRight1">发布</div>
</div>
<h6 class="themeTit1">
<b>*&nbsp;</b>
<p class="enterAnswer">填空题需要输入答案才能进行发布进行正确率统计</p>
</h6>
<div data-type="3" class="themeList themeListFixed clear">
<!--登录-->
<div class="userSignBox" id="userLoginBox" style="display: none" >
<div class="usersign userLogin" id="userLogin">
<a href="javascript: void(0)" id="userLoginA" class="usersignA iconfont">&#xe638;</a>
<ul>
<li>
<p class="gotIt">听明白了</p>
</li>
<li>
<p class="understand">没听明白</p>
</li>
</ul>
<div class="dynamicRight">发布</div>
</div>
<div data-type="3" class="themeList themeListFixed">
<ul>
<li>
<p class="yes">对</p>
</li>
<li>
<p class="wrong">错</p>
<li class="usersignTit">登录</li>
<li class="usersignNameLi usersignLi">
<input id="loginName" class="usersignInput" type="text" placeholder="手机/用户名/邮箱" maxlength="20"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
</li>
</ul>
<div class="dynamicRight">发布</div>
</div>
<div data-type="3" class="themeList themeListFixed">
<ul>
<li>
<p class="yup">是</p>
<li class="userPassWordLi usersignLi">
<input id="loginPassWord" class="userPassWordInput usersignInput" type="text" placeholder="密码" maxlength="20"
onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
</li>
<li>
<p class="nothing">无</p>
<p class="forgetPasswordBtn" id="forgetPasswordBtn">
忘记密码
</p>
<li class="btnUsersignLi usersignLi">
<button class="btnUsersign" id="userLoginBtn">提交</button>
</li>
</ul>
<div class="dynamicRight">发布</div>
</div>
<div class="CountZero">
<span>答题计时：</span>
<div class="themeSelect">
<div class="show slelctShow">
<p class="themeShow"></p>
<i class="triangle"></i>
</div>
<ul class="themeUl">
<!--<li data-val="0" data-ind="0" class="active"></li>
<li data-val="30" data-ind="1"></li>
<li data-val="60" data-ind="3"></li>
<li data-val="120" data-ind="4"></li>
<li data-val="180" data-ind="5"></li>
<li data-val="300" data-ind="6"></li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
<!--input错误提示框-->
<div class="inputErrerBox">
<div class="inputErrer">
<div class="inputErrerTitle">
<a href="javascript: void(0)" class="inputErrerA iconfont ">&#xe638;</a>
</div>
<div class="inputCount">
填空题答案不能为空
</div>
</div>
</div>
<!--答题卡结果弹出框-->
<div class="resultBox">
<div class="resultHeadline">
<div class="resultHeadlineTitle">答题卡</div>
<a href="javascript: void(0)" class="resultHeadlineA iconfont ">&#xe638;</a>
</div>
<div id="resultContent" class="resultContent">
<div class="resultTit">
<p class="answerResult">答题结果：</p>
<p><span class="share">共有</span><span class="attendNum">0</span><span class="participation">人参与</span></p>
</div>
<div class="layerBox">
<!--<span>dong</span><span>lse</span>-->
</div>
<ul class="resultListUl">
<!--<li class="resultList">
<b>A</b>
<span>0%</span>
<p></p>
</li>-->
</ul>
<div class="resultBtn">
<p class="resultConceal">隐藏</p>
<p class="resultTermination">终止</p>
</div>
</div>
</div>
<!--学生界面弹出框-->
<div class="answerStudentBox">
<div class="studentHeadline">
答题卡
</div>
<div class="answerStudentContent">
<!--倒计时盒子-->
<div class="countdown">
<p id="answerCountDown"></p>
</div>
<ul class="resultValueUl">
</ul>
<div class="choiceBtn">
<p class="referBtn">提交</p>
<p class="abandonBtn">放弃</p>
</div>
</div>
</div>
</div>
<!--点名-->
<div class="signAllBox">
<div class="signBox">
<div class="signHeadline">
<div class="signHeadlineTitle">点名</div>
<a href="javascript: void(0)" class="signHeadlineA iconfont ">&#xe638;</a>
</div>
<div id="signContentA" class="signContent signContentA">
<div class="signSelect">
<div class="show signShowBox" id="signShowBox">
<p class="signShow">无</p>
<i class="triangle"></i>
</div>
<ul class="signUl">
<!--<li data-val="0" data-ind="0" class="active">无</li>
<li data-val="5" data-ind="1">5秒</li>
<li data-val="10" data-ind="2">10秒</li>
<li data-val="15" data-ind="3">15秒</li>
<li data-val="30" data-ind="4">30秒</li>-->
</ul>
</div>
<div class="signBtn">
<p class="sponsorSign">发起点名</p>
</div>
</div>
<div id="signContentB" class="signContent signContentB">
<div class="turnListBox">
<ul class="turnList">
<!--<li class="turnListItem">
<p>dong</p>
<p>13:52:15</p>
</li>-->
</ul>
</div>
<div class="turnBox">
<p class="turnResult">
出勤人数：<span class="turnLen">0</span>
<p class="forgetPasswordBtn nowSignBtn" id="nowUserSign">
新用户注册
</p>
<p class="turnResultBtn">
终止点名
<li class="openidOauthBox">
<p class="openidOauth openidOauth2" id="openWeixin">
<span class="weChatLogin iconfont">&#xe638;</span>
<span class="openidOauthTit">微信</span>
</p>
</div>
</div>
</div>
<!--学生端-->
<div class="signStudentBox">
<div class="signStudentHeadline">
<div class="signStudentHeadlineTitle">点名</div>
<a href="javascript: void(0)" class="signStudentHeadlineA iconfont ">&#xe638;</a>
</div>
<div id="signStudentContent" class="signStudentContent">
<div class="signCountdown" id="signCountdown"></div>
<p class="turnStudentBtn">
签到
<p class="openidOauth openidOauth1" id="openQQ">
<span class="weChatLogin iconfont">&#xe638;</span>
<span class="openidOauthTit">QQ</span>
</p>
</div>
</div>
</div>
<!--显示图片大图-->
<div id="magnifyBox" class="magnifyBox" style="position: absolute;width:100%;height:100%;z-index:502;display: none;"></div>
<!--错误弹出框-->
<div class="errorBox">
<div class="errorHeadline">
<div class="errorHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorA iconfont">&#xe638;</a>
</div>
<div id="errorContent" class="errorContent" >
<p class="errorText"></p>
<!--<button class="errorEnsure">确定</button>-->
<!--<button class="errorCancel">取消</button>-->
<p class="openidOauth" id="openWeibo">
<span class="weChatLogin iconfont">&#xe638;</span>
<span class="openidOauthTit">微博</span>
</p>
</li>
</ul>
</div>
</div>
<!--flash和浏览器和摄像头麦克风错误 Flash_explorer_facility-->
<div class="errorHintBox">
<div class="errorHint errorTestLive" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div>
<p class="errorHintTit errorHintTit1" id="nowLiveVersion">现支持直播的浏览器版本:</p>
<div class="errorFlashListLeft errorFlashListLeft1">
<a href="http://chrome.360.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360jisu.png" alt=""><span class="speed360Recommend">360极速(推荐下载)</span></a>
<a href="http://www.google.cn/chrome/business/browser/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconChrome.png" alt=""><span>Google Chrome</span></a>
<a href="http://www.firefox.com.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconFirefox.png" alt=""><span>Firefox</span></a>
<a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconIE.png" alt=""><span>IE 10 </span></a>
<a href="http://se.360.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360.png" alt=""><span class="security360">360安全</span></a>
</div>
<div class="errorFlashListLeft">
<a href="http://ie.2345.cc/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon2345.png" alt=""><span>2345</span></a>
<a href="http://browser.qq.com/?adtag=SEM7" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconQQ.png" alt=""><span>QQ</span></a>
<a href="http://ie.sogou.com/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSougou.png" alt=""><span class="sogouExplorer">搜狗高速</span></a>
<a href="https://www.apple.com/cn/safari/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSafari.png" alt=""><span>safari</span></a>
</div>
</div>
</div>
<div class="errorHint errorHint3 errorPlayback" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div >
<p class="errorHintTit errorHintTit1" id="nowPlaybackVersion">现支持录制回放浏览器版本:</p>
<div class="errorFlashListLeft errorFlashListLeft1">
<a href="http://chrome.360.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360jisu.png" alt=""><span class="speed360Recommend">360极速(推荐下载)</span></a>
<a href="http://www.google.cn/chrome/business/browser/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconChrome.png" alt=""><span>Google Chrome</span></a>
<a href="http://www.firefox.com.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconFirefox.png" alt=""><span>Firefox</span></a>
<a href="http://se.360.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360.png" alt=""><span class="security360Only">360安全(仅9.1.0版本支持)</span></a>
</div>
<div class="errorFlashListLeft">
<a href="http://browser.qq.com/?adtag=SEM7" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconQQ.png" alt=""><span>QQ</span></a>
<a href="https://www.apple.com/cn/safari/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSafari.png" alt=""><span>safari</span></a>
</div>
</div>
</div>
<div class="errorHint errorHint1 notDetectionFlash" id="notDetectionFlash" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorSetFlashContent">
<p class="errorDownloadFlashTit" id="flashMsgContent">您的flash可能被禁用或版本过低，请下载后重试</p>
<p class="errorSetFlashHintB" id="flashDetailSteps">查看设置详细步骤</p>
<a class="errorSetFlashHintA" id="flashUpdataVersions" href='https://get2.adobe.com/cn/flashplayer/' target="_blank">下载最新版本</a>
</div>
</div>
<div class="errorHint errorHint2 notDetectionFlash_1" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorSetFlashContent">
<p class="setFlashGuideTit" id="browserAreaSettings">根据您的浏览器区设置:</p>
<div class="errorFlashListLeft">
<p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360jisu.png" alt=""><span class="speed360" id="e_speed360">360极速</span></p>
<p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconChrome.png" alt=""><span id="e_chrome">Google Chrome</span></p>
<p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconFirefox.png" alt=""><span id="e_firefox">Firefox</span></p>
<p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconIE.png" alt=""><span id="e_ie10">IE 10 </span></p>
<p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360.png" alt=""><span class="security360" id="e_security360">360安全</span></p>
</div>
<div class="errorFlashListLeft">
<p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon2345.png" alt=""><span id="e_2345">2345</span></p>
<p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconQQ.png" alt=""><span id="e_qq">QQ</span></p>
<p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSougou.png" alt=""><span class="sogouExplorer" id="e_sogou">搜狗高速</span></p>
<p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSafari.png" alt=""><span id="e_safari">safari</span></p>
</div>
<!--删除弹框-->
<div class="userSignBox" id="removeHandlerBox" style="display: none;">
<div class="usersign removeHandler" id="removeHandler">
<a href="javascript: void(0)" id="removeHandlerA" class="usersignA iconfont">&#xe638;</a>
<div class="removeHandlerContent">
确定删除吗？
</div>
<div class="removeHandlerBtn">
<button class="removeConfirm" id="removeConfirm">确定</button>
<button class="removeCancel" id="removeCancel">取消</button>
</div>
<div class="errorHint versionsFlash" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorHintContent">
<p class="errorFlashTit" id="flashVersionsLow">您的flash版本过低，请</p>
<a class="errorFlashLink" id="flashDownload" href='https://get2.adobe.com/cn/flashplayer/' target="_blank">下载</a>
<p class="errorFlashTit" id="flashRetry">后重试</p>
</div>
</div>
<div class="errorHint safariFlashBan" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorFlashContent">
<p class="errorHintTit flashForbiddenMsg">您的flash可能被禁用，请开启后重试!</p>
<img class="flashHintImg" src="images/flashHint/safari.png" alt="">
</div>
</div>
<div class="errorHint QQOrChromeFlashBan" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorFlashContent">
<p class="errorHintTit flashForbiddenMsg">您的flash可能被禁用，请开启后重试!</p>
<img class="flashHintImg" src="images/flashHint/qq_chrome.png" alt="">
</div>
</div>
<div class="errorHint sougouOr360jisuFlashBan" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorFlashContent">
<p class="errorHintTit flashForbiddenMsg">您的flash可能被禁用，请开启后重试!</p>
<img class="flashHintImg" src="images/flashHint/sougou_360jisu.png" alt="">
</div>
</div>
<div class="errorHint setChromeFlash" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorSetFlashContent">
<p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
<p class="errorSetFlashHintInfo">打开设置→开启网站运行flash</p>
<a class="errorSetFlashHintA" href="images/flashHint/setChrome.png" target=_blank>点击查看详情步骤</a>
</div>
</div>
<div class="errorHint setFirefoxFlash" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorSetFlashContent">
<p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
<p class="errorSetFlashHintInfo">地址栏输入about:addons→插件→开启Shockwave Flash</p>
<a class="errorSetFlashHintA" href="images/flashHint/setFirefox.png" target=_blank>点击查看详情步骤</a>
</div>
</div>
<div class="errorHint setQQFlash" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorSetFlashContent">
<p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
<p class="errorSetFlashHintInfo">地址栏输入qqbrowser://plugins→插件→开启Adobe Flash Player→运行</p>
<a class="errorSetFlashHintA" href="images/flashHint/setQQ.png" target=_blank>点击查看详情步骤</a>
</div>
</div>
<div class="errorHint set2345Flash" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorSetFlashContent">
<p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
<p class="errorSetFlashHintInfo">地址栏输入chrome://plugins→插件→开启Adobe Flash Player→运行</p>
<a class="errorSetFlashHintA" href="images/flashHint/set2345.png" target=_blank>点击查看详情步骤</a>
</div>
</div>
<div class="errorHint set360anquanFlash" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorSetFlashContent">
<p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
<p class="errorSetFlashHintInfo">地址栏输入se://plugins→插件→开启Adobe Flash Player→运行</p>
<a class="errorSetFlashHintA" href="images/flashHint/set360anquan.png" target=_blank>点击查看详情步骤</a>
</div>
</div>
<div class="errorHint set360jisuFlash" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorSetFlashContent">
<p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
<p class="errorSetFlashHintInfo">地址栏输入chrome://plugins→插件→开启Adobe Flash Player→运行</p>
<a class="errorSetFlashHintA" href="images/flashHint/set360jisu.png" target=_blank>点击查看详情步骤</a>
</div>
</div>
<div class="errorHint setsougouFlash" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorSetFlashContent">
<p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
<p class="errorSetFlashHintInfo">打开右上角工具→选项→程序→管理加载项→工具栏和扩展→开启Shockwave Flash Object</p>
<a class="errorSetFlashHintA" href="images/flashHint/setsougou.png" target=_blank>点击查看详情步骤</a>
</div>
</div>
<div class="errorHint errorHint1 errorPublicHint" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorPublicHintContent"></div>
</div>
<div class="errorHint errorHint1 networkDisconnection" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errornetworkHintContent"></div>
</div>
<div class="errorHint errorHint1 choiceHintBox" id="publicChoiceErrorrBox" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle" id="choiceHintBoxTitle"></div>
</div>
<div class="endClassHintContent" >
<p class="showWindowText" id="choiceHintBoxText"></p>
<button class="closeInfoBtn" id="choiceConfirm">确定</button>
<button class="cancelCloseInfo closeInfoBtn" id="choiceCancel">取消</button>
</div>
</div>
<div class="errorHint errorHint1 publicErrorBox" data="">
<div class="errorFlashHintHeadline">
<div class="errorHintHeadlineTitle"></div>
<a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
</div>
<div class="errorPublicHintContent"></div>
</div>
</div>
<!--warn提示信息-->
<div class="warnHintBox" id="warnHintBox">
<a href="javascript: void(0)" class="warnHintA iconfont" id="warnHintA">&#xe638;</a>
<p class="warnHintContent" id="warnHintContent">warn警告框</p>
</div>
</body>
</html>
\ No newline at end of file
... ...
... ... @@ -51,18 +51,18 @@ class Chat extends Ape {
this.userList.on(UserList.WINDOW_VIEW_CHANGE, this.onWindowViewChange.bind(this));
//布局
$("#txt_message")[0].value = ''
// $("#txt_message")[0].value = ''
//UI按钮点击事件
$("#btn_send").on("click", this._sendMessageHandler.bind(this));
//回车键发送聊天消息
let that = this;
$("#txt_message").on("keydown", function (e) {
/* $("#txt_message").on("keydown", function (e) {
let curKey = e.which;
if (ClassDataProxy.isKeypress) {
if (curKey == 13) that._sendMessageHandler();
}
});
});*/
$('.left').on('contextmenu', this._preventDefault.bind(this));
$('.header').on('contextmenu', this._preventDefault.bind(this));
... ...
... ... @@ -37,13 +37,13 @@ class ChatFace extends Emiter {
//选项卡s
this._changeTab();
//文字区域点击后表情消失
$("#txt_message").on("focus",that._hideFace.bind(this));
/* $("#txt_message").on("focus",that._hideFace.bind(this));
$("#panel_message").on("click",that._hideFace.bind(this));
$(".middle").on("click",that._hideFace.bind(this));
$(".left").on("click",that._hideFace.bind(this));
$(".header").on("click",that._hideFace.bind(this));
$(".videoWindow").on("click",that._hideFace.bind(this));
$(".userListTitle").on("click",that._hideFace.bind(this));
$(".userListTitle").on("click",that._hideFace.bind(this));*/
}
... ...
... ... @@ -32,7 +32,7 @@ class ClassApe extends Ape {
//设置当前版本号
$('#pcVersion').text("v2.58.3.20170823");
//布局，未加入课堂成之前上课界面不显示
$('.header').hide();
//$('.header').hide();
//$(".content ").hide();
$(".loginBg ").show();//登陆框
$(".initParamsOut ").show();//初始化界面
... ...
//*
// 首页模块
// */
import Loger from "../Loger";
import Ape from "./Ape";
import xdysdk from "libs/xdysdk";
import DrawTool from "./DrawTool";
import LaserPen from "./LaserPen";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
let loger = Loger.getLoger('PC-HomeApe');
class HomeApe extends Ape {
constructor() {
super();
this.classDateList = {};//课堂的所有数据
this.addEvent();
this.init();
}
init() {
//判断列表在右侧时取消边距
this._judgeListPlace();
$('#defaultBtn').on('click',this._lanclassBtnHandler.bind(this));
}
addEvent() {
}
_judgeListPlace(){
let i;
let curriculumList = document.getElementsByClassName('curriculumList');
for(i=0;i<curriculumList.length;i++){
if((i%4) == 3){
$(curriculumList[i]).addClass('classifyListR');
}
}
}
_lanclassBtnHandler(evt){
$(evt.target).addClass('active').siblings().removeClass('active');
$('#slideshow').show();
$('#defaultBox').show();
$('#classifyListBox').hide();
}
}
export default new HomeApe;
\ No newline at end of file
... ...
//*
// 互动课堂模块
// */
import Loger from "../Loger";
import Ape from "./Ape";
import xdysdk from "libs/xdysdk";
import DrawTool from "./DrawTool";
import LaserPen from "./LaserPen";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
let loger = Loger.getLoger('PC-LanclassApe');
const classifyList = `<div class="classifyList {_classifyListR}">
<img class="curriculumListImg" src="{_msgImg}" alt="">
<p class="curriculumListTit">{_classroomTitle}</p>
<p class="curriculumListInfo">
<span class="curriculumListTime">{_schoolTime}</span>
<span class="curriculumListNum">{_subscribeNum}</span>
</p>
</div>`;
class LanclassApe extends Ape {
constructor() {
super();
this.classDateList = {};//课堂的所有数据
this.addEvent();
this.init();
}
init() {
//判断列表在右侧时取消边距
this._judgeListPlace();
$('#collectYes').hide();
$('#lanclassBtn').on('click',this._lanclassBtnHandler.bind(this));
$('#classifyListBox').on('click','.pageNumBtn',this._pageNumBtnHandler.bind(this));//点击翻页
}
addEvent() {
}
_judgeListPlace(){
let i=(i%4);
$('#classifyListContent').find('.classifyList').eq(i==3).addClass('classifyListR');
}
_lanclassBtnHandler(evt){
$(evt.target).addClass('active').siblings().removeClass('active');
$('#slideshow').hide();
$('#defaultBox').hide();
$('#classifyListBox').show();
this.detailPage();
}
//点击翻页
_pageNumBtnHandler(evt){
let _ele = $(evt.target);
let that = this;
if(_ele.siblings().length > 0 ){
_ele.addClass('pageNumBtnCheck').siblings().removeClass('pageNumBtnCheck');
console.log(_ele.text(),111111111111111111111111111111111111)
$.ajax({
type: "PUT",
url: 'http://192.168.31.8:3000/meeting/getMeeting',
headers: {'Content-Type': 'application/json',
'page':_ele.text(),
'token':'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IlhXQnJlRU00T0swYTVqUUIyUTFicGtObHlxOUFWbXZkIiwibmFtZSI6ImFkbWluIiwiY29kZSI6MSwiaWF0IjoxNTAzNDUxODU0LCJleHAiOjIyODEwNTE4NTR9.3kTVzKd_jbP7l69nxOpNaFeSjVnnjZkagYMzRB8fjNo',
},
success:function(_data){
if(_data != 200 ){
// loger.warn(_data.data.msg)
}
that.classDateList = _data.returnData.data;
//切换列表内容
that._classDateContent(that.classDateList);
loger.log(_data,'成功')
},
error:function(error){
console.log(error,'失败')
}
})
}else{
return;
}
}
detailPage(){
let that = this;
$.ajax({
type: "PUT",
url: 'http://192.168.31.8:3000/meeting/getMeeting',
headers: {'Content-Type': 'application/json',
'token':'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IlhXQnJlRU00T0swYTVqUUIyUTFicGtObHlxOUFWbXZkIiwibmFtZSI6ImFkbWluIiwiY29kZSI6MSwiaWF0IjoxNTAzNDUxODU0LCJleHAiOjIyODEwNTE4NTR9.3kTVzKd_jbP7l69nxOpNaFeSjVnnjZkagYMzRB8fjNo'},
success:function(_data){
// loger.log(_data,'成功')
//获取课堂数据
that._gainClassData(_data);
},
error:function(error){
console.log(error,'失败')
}
})
}
_gainClassData(_data){
if(_data || _data.code == 200){
this.classDateList = _data.returnData.data;
let classifyListContent = $('#classifyListContent');
classifyListContent.empty();
//切换列表分类的标题
this._classDateTitle();
//切换列表内容
this._classDateContent(this.classDateList);
//页码
this._classDatepageNum(this.classDateList);
}
}
_classDateTitle(){
$('#classifyListTitle').html($('#lessonsTitle').html());
}
_classDateContent(_data){
let classifyListContent = $('#classifyListContent');
classifyListContent.empty();
let _dataList = _data.meetingInfo;
for(let i = 0;i<_dataList.length;i++){
let j = (i%4)==3;
let _classifyList = this._format(classifyList,{
_classifyListR : j?'classifyListR':'',
_msgImg :'../images/u373.png',
_classroomTitle : _dataList[i].meetingName,
_schoolTime : '11',
_subscribeNum : _dataList[i].reservationNumber+'人已预约'
})
classifyListContent.append(_classifyList);
}
}
_classDatepageNum(_data){ //page
let _pageContent = _data.count;
let _pageNum = Math.ceil(_pageContent / _data.pageno);
this.pagingConstruct(1,_pageNum);
}
pagingConstruct(paging,total){
let classifyListBox = $('#classifyListBox');
let pagingDivInnerHTML = '<div class="pageNumContentBox"><div class="pageNumContent">';
let isHiddenExist = 0;
for(let i =1 ;i<=total;i++){
if(i == paging){
pagingDivInnerHTML +='<span class="pageNumBtn pageNumBtnCheck">'+i+'</span>';
}else{
if (i < 4 || i < (paging + 4) && i > (paging - 2) && i < (total / 2 + 2) || i > (total - 2)) {
pagingDivInnerHTML +='<span class="pageNumBtn">'+i+'</span>';
isHiddenExist = 0;
}else{
if(isHiddenExist == 0){
pagingDivInnerHTML += '<span>...</span>';
isHiddenExist = 1;
}
}
}
}
pagingDivInnerHTML += '</div></div>';
classifyListBox.append(pagingDivInnerHTML);
}
//工具类
_format(str, obj) {
return str.replace(/\{(\w+)\}/g, function (match, group, index) {
return obj[group];
});
};
}
export default new LanclassApe;
\ No newline at end of file
... ...
//*
// 标注模块
// */
import Loger from "../Loger";
import Ape from "./Ape";
import xdysdk from "libs/xdysdk";
import DrawTool from "./DrawTool";
import LaserPen from "./LaserPen";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
let loger = Loger.getLoger('PC-LoginOrRegister');
class LoginOrRegister extends Ape {
constructor() {
super();
this.addEvent();
this.init();
}
init() {
$('#usersignA').on('click',this._usersignAHandler.bind(this));//关闭注册界面
$('#userLoginA').on('click',this._userLoginAHandler.bind(this));//关闭登录界面
$('#skipLoginBtn').on('click',this._skipLoginBtnHandler.bind(this));//注册跳转登录界面
$('#nowUserSign').on('click',this._nowUserSignHandler.bind(this));//新用户注册
$('#signPhone').on('focus',this._signFocusHandler.bind(this));//注册判断手机号
$('#signMail').on('focus',this._signFocusHandler.bind(this));//注册判断手机号
$('#signPassWord').on('focus',this._signFocusHandler.bind(this));//注册判断密码
$('#securityCode').on('focus',this._signFocusHandler.bind(this));//注册判断验证码
$('#signBtn').on('click',this._signBtnHandler.bind(this));//注册信息提交
$('#userLoginBtn').on('click',this._loginBtnHandler.bind(this));//登录信息提交
$('#homeUserLoginBtn').on('click',this._homeUserLoginBtnHandler.bind(this));//首页用户登录
}
addEvent() {
}
//关闭注册界面
_usersignAHandler(){
$('#userSignBox').hide();
}
//关闭登录界面
_userLoginAHandler(){
$('#userLoginBox').hide();
}
//注册跳转登录界面
_skipLoginBtnHandler(){
$('#userSignBox').hide();
$('#userLoginBox').show();
}
//新用户注册
_nowUserSignHandler(){
$('#userLoginBox').hide();
$('#userSignBox').show();
}
//首页用户登录
_homeUserLoginBtnHandler(){
$('#userLoginBox').show();
}
_signFocusHandler(evt){
let _ele = $(evt.target);
if(_ele.css('color') != 'rgb(0, 0, 0)'){
_ele.val('')
.css('color','#000');
}
}
_signName(_name){
if(!_name.value){
_name.focus();
return false;
}
}
_signPhone(phone){
let reg = "^1[3|4|5|8][0-9]\\d{8}$";
let re = new RegExp(reg);
if(!phone.value){
phone.focus();
return false;
}
if (re.test(phone.value)) {
$('#signPhone').css('color','#000');
} else {
$('#signPhone').val('手机号输入不合法')
.css('color','#d95136');
phone.focus();
return false;
}
}
_signMail(mail){
let filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!mail.value){
mail.focus();
return false;
}
if (filter.test(mail.value)){
$('#signMail').css('color','#000');
}
else {
$('#signMail').val('电子邮箱输入不合法')
.css('color','#d95136');
mail.focus();
return false;
}
}
//判断密码
_signPassWord(_passWord){
let reg = /^[0-9a-zA-Z]{8,12}$/;//密码正则
if(!_passWord.value){
_passWord.focus();
return false;
}
if(reg.test(_passWord.value)){
$('#signPassWord').css('color','#000');
}else{
$('#signPassWord').val('密码长度不够或太长')
.css('color','#d95136');
_passWord.focus();
return false;
}
}
//判断验证码
_securityCode(securityCode){
let reg= /^\d{4}$/;//验证码正则
if(!securityCode.value){
securityCode.focus();
return false;
}
if(reg.test(securityCode.value)){
$('#securityCode').css('color','#000');
}else{
$('#securityCode').val('验证码不正确')
.css('color','#d95136');
securityCode.focus();
return false;
}
}
//注册信息提交
_signBtnHandler(){
let _name = document.getElementById("signName");//用户名
let phone = document.getElementById("signPhone");//手机号
let mail = document.getElementById("signMail");//邮箱
let _passWord = document.getElementById("signPassWord");//密码
let securityCode = document.getElementById("securityCode");//验证码
let permitSign = document.getElementById("permitSign");//是否同意
if(_name.value && phone.value && mail.value && _passWord.value && securityCode.value && $(permitSign).is(':checked')){
let signInfo = {
"loginName": _name.value, // 登录名
"password": _passWord.value, //登录密码
"companyName":null, //公司名字
"userName":_name.value, //用户名
"userRole":4, // 用户角色 0超级管理员，1管理员，2监课，3老师，4学生
"userEmail":mail.value, // 用户邮箱
"userMobile":parseInt(phone.value), // 用户手机号
"content":"2017-09-01", // 用户简介
"groupId":1, //用户组id
"IDcard":123123
}
let that = this;
$.ajax({
type: "POST",
url: 'http://192.168.31.8:3000/users/addUser',
data: signInfo,
success:function(_data){
console.log(_data,'成功')
//注册成功后 跳转登录界面
that._successSign(_data);
},
error:function(error){
console.log(error,'失败')
}
})
}else{
this._securityCode(securityCode);//判断验证码
this._signPassWord(_passWord);//判断密码
this._signMail(mail);//判断邮箱
this._signPhone(phone);//判断手机号
this._signName(_name);//判断用户名
}
}
//注册成功后 跳转登录界面
_successSign(_data){
if(_data.code == 200){
this._skipLoginBtnHandler();
}
}
_loginName(_name){
if(_name.value){
_name.focus();
return false;
}
}
_loginPassWord(_passWord){
if(_passWord.value){
_passWord.focus();
return false;
}
}
//登录信息提交
_loginBtnHandler(){
let _name = document.getElementById("loginName");//用户名
let _passWord = document.getElementById("loginPassWord");//手机号
if(_name.value && _passWord.value){
let signInfo = {
"loginName": _name.value, // 登录名
"password": _passWord.value, //登录密码
"code":"quwerdf"
}
$.ajax({
type: "POST",
url: 'http://192.168.31.8:3000/users/login',
data: signInfo,
success:function(_data){
console.log(_data,'成功')
that.successLogin(_data);
},
error:function(error){
debugger;
console.log(error,'失败')
}
})
}else{
this._loginName(_name);//登录判断用户名
this._loginPassWord(_passWord);//登录判断密码
}
}
//用户成功登录
successLogin(_data){
if(_data.code == 200){
this._userLoginAHandler();
}
}
}
export default new LoginOrRegister;
\ No newline at end of file
... ...
//*
// 标注模块
// */
import Loger from "../Loger";
import Ape from "./Ape";
import xdysdk from "libs/xdysdk";
import DrawTool from "./DrawTool";
import LaserPen from "./LaserPen";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
let loger = Loger.getLoger('PC-Slideshow');
class Slideshow extends Ape {
constructor() {
super();
this._timer = null;
this.windowWidth = 0;
this.num = 0;
this.len = 0;
this.addEvent();
this.init();
}
init() {
$(window).on('resize',this._imgReload.bind(this));
this.slideImg();
this._imgReload();
$(".slidesImg").on('load', this._onLoadImage.bind(this));
$('#dots li').on('mouseenter',this._mouseenterHandler.bind(this));
$('#dots li').on('mouseleave',this._mouseleaveHandler.bind(this));
}
addEvent() {
}
_onLoadImage(){
this._imgReload();
}
slideImg(){
let oli = document.getElementById('dots').getElementsByTagName("li");
let _num = 0;
let clone=$(".slidesMap").first().clone();
$("#motionMapBox").append(clone);
let li = document.getElementById('motionMapBox').getElementsByTagName("li");
let size = li.length
this.num = _num;
this.len = size;
this._timer = setInterval(function(){
li[_num].style.display="none";
_num=++_num==size ? 0:_num;
li[_num].style.display="inline-block";
// $("#motionMapBox").stop().animate({left:-this.num*this.windowWidth},500);
$("#dots li").eq(_num).addClass('active').siblings().removeClass('active');
},3000);//切换时间
}
_mouseenterHandler(){
clearInterval(this._timer);
}
_mouseleaveHandler(){
}
_move(){
let li = document.getElementById('motionMapBox').getElementsByTagName("li");
this._timer = setInterval(function(){
li[_num].style.display="none";
_num=++_num==size ? 0:_num;
li[_num].style.display="inline-block";
// $("#motionMapBox").stop().animate({left:-this.num*this.windowWidth},500);
$("#dots li").eq(_num).addClass('active').siblings().removeClass('active');
},3000);//切换时间
}
/*slideImg(){
let i = 0;
let width = $('.slidesMap').width();
let clone=$(".slidesMap").first().clone();
$("#motionMapBox").append(clone);
let size = document.getElementById('motionMapBox').getElementsByTagName("li").length;
for(let j=0;j<size-1;j++){
$("#dots").append("<li></li>");
}
$("#dots li").first().addClass('active');
$(".dots li").hover(function(){
let index=$(this).index();
i=index;
$(".motionMapBox").stop().animate({left:-index*width},500);
$(this).addClass('active').siblings().removeClass('active');
})
let t=setInterval(function(){
i++;
move();
},2000);
//对banner定时器的操作
$(".slideshow").hover(function(){
clearInterval(t);
},function(){
t=setInterval(move,2000);
})
function move(){
if(i==size){
$("#motionMapBox").css({left:0});
i=1;
}
if(i==-1){
$("#motionMapBox").css({left:-(size-1)*width});
i=size-2;
}
$("#motionMapBox").stop().animate({left:-i*width},500);
if(i==size-1){
$("#dots li").eq(0).addClass('active').siblings().removeClass('active');
}else{
$("#dots li").eq(i).addClass('active').siblings().removeClass('active');
}
}
}*/
_imgReload(){
let _windowWidth = $("body").width();
this.windowWidth = _windowWidth;
$('.slidesMap').css({width:_windowWidth + "px"});
$('.slidesImg').css({width:_windowWidth + "px"});
/* let imgHeight = 0;
let wtmp = $("body").width();
$("#motionMapBox li").each(function(){
$(this).css({width:wtmp + "px"});
});
$(".slidesImg").each(function(){
$(this).css({width:wtmp + "px"});
imgHeight = $(this).height();
});*/
$('#motionMapBox').width($(".slidesMap").length * _windowWidth)
}
}
export default new Slideshow;
\ No newline at end of file
... ...
/**
* BxSlider v4.1.2 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Copyright 2014, Steven Wanderski - http://stevenwanderski.com - http://bxcreative.com
* Written while drinking Belgian ales and listening to jazz
*
* Released under the MIT license - http://opensource.org/licenses/MIT
*/
;(function($){
var plugin = {};
var defaults = {
// GENERAL
mode: 'horizontal',
slideSelector: '',
infiniteLoop: true,
hideControlOnEnd: false,
speed: 500,
easing: null,
slideMargin: 0,
startSlide: 0,
randomStart: false,
captions: false,
ticker: false,
tickerHover: false,
adaptiveHeight: false,
adaptiveHeightSpeed: 500,
video: false,
useCSS: true,
preloadImages: 'visible',
responsive: true,
slideZIndex: 50,
wrapperClass: 'bx-wrapper',
// TOUCH
touchEnabled: true,
swipeThreshold: 50,
oneToOneTouch: true,
preventDefaultSwipeX: true,
preventDefaultSwipeY: false,
// PAGER
pager: true,
pagerType: 'full',
pagerShortSeparator: ' / ',
pagerSelector: null,
buildPager: null,
pagerCustom: null,
// CONTROLS
controls: true,
nextText: 'Next',
prevText: 'Prev',
nextSelector: null,
prevSelector: null,
autoControls: false,
startText: 'Start',
stopText: 'Stop',
autoControlsCombine: false,
autoControlsSelector: null,
// AUTO
auto: false,
pause: 4000,
autoStart: true,
autoDirection: 'next',
autoHover: false,
autoDelay: 0,
autoSlideForOnePage: false,
// CAROUSEL
minSlides: 1,
maxSlides: 1,
moveSlides: 0,
slideWidth: 0,
// CALLBACKS
onSliderLoad: function() {},
onSlideBefore: function() {},
onSlideAfter: function() {},
onSlideNext: function() {},
onSlidePrev: function() {},
onSliderResize: function() {}
}
$.fn.bxSlider = function(options){
if(this.length == 0) return this;
// support mutltiple elements
if(this.length > 1){
this.each(function(){$(this).bxSlider(options)});
return this;
}
// create a namespace to be used throughout the plugin
var slider = {};
// set a reference to our slider element
var el = this;
plugin.el = this;
/**
* Makes slideshow responsive
*/
// first get the original window dimens (thanks alot IE)
var windowWidth = $(window).width();
var windowHeight = $(window).height();
/**
* ===================================================================================
* = PRIVATE FUNCTIONS
* ===================================================================================
*/
/**
* Initializes namespace settings to be used throughout plugin
*/
var init = function(){
// merge user-supplied options with the defaults
slider.settings = $.extend({}, defaults, options);
// parse slideWidth setting
slider.settings.slideWidth = parseInt(slider.settings.slideWidth);
// store the original children
slider.children = el.children(slider.settings.slideSelector);
// check if actual number of slides is less than minSlides / maxSlides
if(slider.children.length < slider.settings.minSlides) slider.settings.minSlides = slider.children.length;
if(slider.children.length < slider.settings.maxSlides) slider.settings.maxSlides = slider.children.length;
// if random start, set the startSlide setting to random number
if(slider.settings.randomStart) slider.settings.startSlide = Math.floor(Math.random() * slider.children.length);
// store active slide information
slider.active = { index: slider.settings.startSlide }
// store if the slider is in carousel mode (displaying / moving multiple slides)
slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1;
// if carousel, force preloadImages = 'all'
if(slider.carousel) slider.settings.preloadImages = 'all';
// calculate the min / max width thresholds based on min / max number of slides
// used to setup and update carousel slides dimensions
slider.minThreshold = (slider.settings.minSlides * slider.settings.slideWidth) + ((slider.settings.minSlides - 1) * slider.settings.slideMargin);
slider.maxThreshold = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
// store the current state of the slider (if currently animating, working is true)
slider.working = false;
// initialize the controls object
slider.controls = {};
// initialize an auto interval
slider.interval = null;
// determine which property to use for transitions
slider.animProp = slider.settings.mode == 'vertical' ? 'top' : 'left';
// determine if hardware acceleration can be used
slider.usingCSS = slider.settings.useCSS && slider.settings.mode != 'fade' && (function(){
// create our test div element
var div = document.createElement('div');
// css transition properties
var props = ['WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
// test for each property
for(var i in props){
if(div.style[props[i]] !== undefined){
slider.cssPrefix = props[i].replace('Perspective', '').toLowerCase();
slider.animProp = '-' + slider.cssPrefix + '-transform';
return true;
}
}
return false;
}());
// if vertical mode always make maxSlides and minSlides equal
if(slider.settings.mode == 'vertical') slider.settings.maxSlides = slider.settings.minSlides;
// save original style data
el.data("origStyle", el.attr("style"));
el.children(slider.settings.slideSelector).each(function() {
$(this).data("origStyle", $(this).attr("style"));
});
// perform all DOM / CSS modifications
setup();
}
/**
* Performs all DOM and CSS modifications
*/
var setup = function(){
// wrap el in a wrapper
el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');
// store a namspace reference to .bx-viewport
slider.viewport = el.parent();
// add a loading div to display while images are loading
slider.loader = $('<div class="bx-loading" />');
slider.viewport.prepend(slider.loader);
// set el to a massive width, to hold any needed slides
// also strip any margin and padding from el
el.css({
width: slider.settings.mode == 'horizontal' ? (slider.children.length * 100 + 215) + '%' : 'auto',
position: 'relative'
});
// if using CSS, add the easing property
if(slider.usingCSS && slider.settings.easing){
el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
// if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
}else if(!slider.settings.easing){
slider.settings.easing = 'swing';
}
var slidesShowing = getNumberSlidesShowing();
// make modifications to the viewport (.bx-viewport)
slider.viewport.css({
width: '100%',
overflow: 'hidden',
position: 'relative'
});
slider.viewport.parent().css({
maxWidth: getViewportMaxWidth()
});
// make modification to the wrapper (.bx-wrapper)
if(!slider.settings.pager) {
slider.viewport.parent().css({
margin: '0 auto 0px'
});
}
// apply css to all slider children
slider.children.css({
'float': slider.settings.mode == 'horizontal' ? 'left' : 'none',
listStyle: 'none',
position: 'relative'
});
// apply the calculated width after the float is applied to prevent scrollbar interference
slider.children.css('width', getSlideWidth());
// if slideMargin is supplied, add the css
if(slider.settings.mode == 'horizontal' && slider.settings.slideMargin > 0) slider.children.css('marginRight', slider.settings.slideMargin);
if(slider.settings.mode == 'vertical' && slider.settings.slideMargin > 0) slider.children.css('marginBottom', slider.settings.slideMargin);
// if "fade" mode, add positioning and z-index CSS
if(slider.settings.mode == 'fade'){
slider.children.css({
position: 'absolute',
zIndex: 0,
display: 'none'
});
// prepare the z-index on the showing element
slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});
}
// create an element to contain all slider controls (pager, start / stop, etc)
slider.controls.el = $('<div class="bx-controls" />');
// if captions are requested, add them
if(slider.settings.captions) appendCaptions();
// check if startSlide is last slide
slider.active.last = slider.settings.startSlide == getPagerQty() - 1;
// if video is true, set up the fitVids plugin
if(slider.settings.video) el.fitVids();
// set the default preload selector (visible)
var preloadSelector = slider.children.eq(slider.settings.startSlide);
if (slider.settings.preloadImages == "all") preloadSelector = slider.children;
// only check for control addition if not in "ticker" mode
if(!slider.settings.ticker){
// if pager is requested, add it
if(slider.settings.pager) appendPager();
// if controls are requested, add them
if(slider.settings.controls) appendControls();
// if auto is true, and auto controls are requested, add them
if(slider.settings.auto && slider.settings.autoControls) appendControlsAuto();
// if any control option is requested, add the controls wrapper
if(slider.settings.controls || slider.settings.autoControls || slider.settings.pager) slider.viewport.after(slider.controls.el);
// if ticker mode, do not allow a pager
}else{
slider.settings.pager = false;
}
// preload all images, then perform final DOM / CSS modifications that depend on images being loaded
loadElements(preloadSelector, start);
}
var loadElements = function(selector, callback){
var total = selector.find('img, iframe').length;
if (total == 0){
callback();
return;
}
var count = 0;
selector.find('img, iframe').each(function(){
$(this).one('load', function() {
if(++count == total) callback();
}).each(function() {
if(this.complete) $(this).load();
});
});
}
/**
* Start the slider
*/
var start = function(){
// if infinite loop, prepare additional slides
if(slider.settings.infiniteLoop && slider.settings.mode != 'fade' && !slider.settings.ticker){
var slice = slider.settings.mode == 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides;
var sliceAppend = slider.children.slice(0, slice).clone().addClass('bx-clone');
var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone');
el.append(sliceAppend).prepend(slicePrepend);
}
// remove the loading DOM element
slider.loader.remove();
// set the left / top position of "el"
setSlidePosition();
// if "vertical" mode, always use adaptiveHeight to prevent odd behavior
if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = true;
// set the viewport height
slider.viewport.height(getViewportHeight());
// make sure everything is positioned just right (same as a window resize)
el.redrawSlider();
// onSliderLoad callback
slider.settings.onSliderLoad(slider.active.index);
// slider has been fully initialized
slider.initialized = true;
// bind the resize call to the window
if (slider.settings.responsive) $(window).bind('resize', resizeWindow);
// if auto is true and has more than 1 page, start the show
if (slider.settings.auto && slider.settings.autoStart && (getPagerQty() > 1 || slider.settings.autoSlideForOnePage)) initAuto();
// if ticker is true, start the ticker
if (slider.settings.ticker) initTicker();
// if pager is requested, make the appropriate pager link active
if (slider.settings.pager) updatePagerActive(slider.settings.startSlide);
// check for any updates to the controls (like hideControlOnEnd updates)
if (slider.settings.controls) updateDirectionControls();
// if touchEnabled is true, setup the touch events
if (slider.settings.touchEnabled && !slider.settings.ticker) initTouch();
}
/**
* Returns the calculated height of the viewport, used to determine either adaptiveHeight or the maxHeight value
*/
var getViewportHeight = function(){
var height = 0;
// first determine which children (slides) should be used in our height calculation
var children = $();
// if mode is not "vertical" and adaptiveHeight is false, include all children
if(slider.settings.mode != 'vertical' && !slider.settings.adaptiveHeight){
children = slider.children;
}else{
// if not carousel, return the single active child
if(!slider.carousel){
children = slider.children.eq(slider.active.index);
// if carousel, return a slice of children
}else{
// get the individual slide index
var currentIndex = slider.settings.moveSlides == 1 ? slider.active.index : slider.active.index * getMoveBy();
// add the current slide to the children
children = slider.children.eq(currentIndex);
// cycle through the remaining "showing" slides
for (i = 1; i <= slider.settings.maxSlides - 1; i++){
// if looped back to the start
if(currentIndex + i >= slider.children.length){
children = children.add(slider.children.eq(i - 1));
}else{
children = children.add(slider.children.eq(currentIndex + i));
}
}
}
}
// if "vertical" mode, calculate the sum of the heights of the children
if(slider.settings.mode == 'vertical'){
children.each(function(index) {
height += $(this).outerHeight();
});
// add user-supplied margins
if(slider.settings.slideMargin > 0){
height += slider.settings.slideMargin * (slider.settings.minSlides - 1);
}
// if not "vertical" mode, calculate the max height of the children
}else{
height = Math.max.apply(Math, children.map(function(){
return $(this).outerHeight(false);
}).get());
}
if(slider.viewport.css('box-sizing') == 'border-box'){
height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom')) +
parseFloat(slider.viewport.css('border-top-width')) + parseFloat(slider.viewport.css('border-bottom-width'));
}else if(slider.viewport.css('box-sizing') == 'padding-box'){
height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom'));
}
return height;
}
/**
* Returns the calculated width to be used for the outer wrapper / viewport
*/
var getViewportMaxWidth = function(){
var width = '100%';
if(slider.settings.slideWidth > 0){
if(slider.settings.mode == 'horizontal'){
width = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
}else{
width = slider.settings.slideWidth;
}
}
return width;
}
/**
* Returns the calculated width to be applied to each slide
*/
var getSlideWidth = function(){
// start with any user-supplied slide width
var newElWidth = slider.settings.slideWidth;
// get the current viewport width
var wrapWidth = slider.viewport.width();
// if slide width was not supplied, or is larger than the viewport use the viewport width
if(slider.settings.slideWidth == 0 ||
(slider.settings.slideWidth > wrapWidth && !slider.carousel) ||
slider.settings.mode == 'vertical'){
newElWidth = wrapWidth;
// if carousel, use the thresholds to determine the width
}else if(slider.settings.maxSlides > 1 && slider.settings.mode == 'horizontal'){
if(wrapWidth > slider.maxThreshold){
// newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.maxSlides - 1))) / slider.settings.maxSlides;
}else if(wrapWidth < slider.minThreshold){
newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.minSlides - 1))) / slider.settings.minSlides;
}
}
return newElWidth;
}
/**
* Returns the number of slides currently visible in the viewport (includes partially visible slides)
*/
var getNumberSlidesShowing = function(){
var slidesShowing = 1;
if(slider.settings.mode == 'horizontal' && slider.settings.slideWidth > 0){
// if viewport is smaller than minThreshold, return minSlides
if(slider.viewport.width() < slider.minThreshold){
slidesShowing = slider.settings.minSlides;
// if viewport is larger than minThreshold, return maxSlides
}else if(slider.viewport.width() > slider.maxThreshold){
slidesShowing = slider.settings.maxSlides;
// if viewport is between min / max thresholds, divide viewport width by first child width
}else{
var childWidth = slider.children.first().width() + slider.settings.slideMargin;
slidesShowing = Math.floor((slider.viewport.width() +
slider.settings.slideMargin) / childWidth);
}
// if "vertical" mode, slides showing will always be minSlides
}else if(slider.settings.mode == 'vertical'){
slidesShowing = slider.settings.minSlides;
}
return slidesShowing;
}
/**
* Returns the number of pages (one full viewport of slides is one "page")
*/
var getPagerQty = function(){
var pagerQty = 0;
// if moveSlides is specified by the user
if(slider.settings.moveSlides > 0){
if(slider.settings.infiniteLoop){
pagerQty = Math.ceil(slider.children.length / getMoveBy());
}else{
// use a while loop to determine pages
var breakPoint = 0;
var counter = 0
// when breakpoint goes above children length, counter is the number of pages
while (breakPoint < slider.children.length){
++pagerQty;
breakPoint = counter + getNumberSlidesShowing();
counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
}
}
// if moveSlides is 0 (auto) divide children length by sides showing, then round up
}else{
pagerQty = Math.ceil(slider.children.length / getNumberSlidesShowing());
}
return pagerQty;
}
/**
* Returns the number of indivual slides by which to shift the slider
*/
var getMoveBy = function(){
// if moveSlides was set by the user and moveSlides is less than number of slides showing
if(slider.settings.moveSlides > 0 && slider.settings.moveSlides <= getNumberSlidesShowing()){
return slider.settings.moveSlides;
}
// if moveSlides is 0 (auto)
return getNumberSlidesShowing();
}
/**
* Sets the slider's (el) left or top position
*/
var setSlidePosition = function(){
// if last slide, not infinite loop, and number of children is larger than specified maxSlides
if(slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop){
if (slider.settings.mode == 'horizontal'){
// get the last child's position
var lastChild = slider.children.last();
var position = lastChild.position();
// set the left position
setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.outerWidth())), 'reset', 0);
}else if(slider.settings.mode == 'vertical'){
// get the last showing index's position
var lastShowingIndex = slider.children.length - slider.settings.minSlides;
var position = slider.children.eq(lastShowingIndex).position();
// set the top position
setPositionProperty(-position.top, 'reset', 0);
}
// if not last slide
}else{
// get the position of the first showing slide
var position = slider.children.eq(slider.active.index * getMoveBy()).position();
// check for last slide
if (slider.active.index == getPagerQty() - 1) slider.active.last = true;
// set the repective position
if (position != undefined){
if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0);
else if (slider.settings.mode == 'vertical') setPositionProperty(-position.top, 'reset', 0);
}
}
}
/**
* Sets the el's animating property position (which in turn will sometimes animate el).
* If using CSS, sets the transform property. If not using CSS, sets the top / left property.
*
* @param value (int)
* - the animating property's value
*
* @param type (string) 'slider', 'reset', 'ticker'
* - the type of instance for which the function is being
*
* @param duration (int)
* - the amount of time (in ms) the transition should occupy
*
* @param params (array) optional
* - an optional parameter containing any variables that need to be passed in
*/
var setPositionProperty = function(value, type, duration, params){
// use CSS transform
if(slider.usingCSS){
// determine the translate3d value
var propValue = slider.settings.mode == 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
// add the CSS transition-duration
el.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
if(type == 'slide'){
// set the property value
el.css(slider.animProp, propValue);
// bind a callback method - executes when CSS transition completes
el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
// unbind the callback
el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
updateAfterSlideTransition();
});
}else if(type == 'reset'){
el.css(slider.animProp, propValue);
}else if(type == 'ticker'){
// make the transition use 'linear'
el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
el.css(slider.animProp, propValue);
// bind a callback method - executes when CSS transition completes
el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
// unbind the callback
el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
// reset the position
setPositionProperty(params['resetValue'], 'reset', 0);
// start the loop again
tickerLoop();
});
}
// use JS animate
}else{
var animateObj = {};
animateObj[slider.animProp] = value;
if(type == 'slide'){
el.animate(animateObj, duration, slider.settings.easing, function(){
updateAfterSlideTransition();
});
}else if(type == 'reset'){
el.css(slider.animProp, value)
}else if(type == 'ticker'){
el.animate(animateObj, speed, 'linear', function(){
setPositionProperty(params['resetValue'], 'reset', 0);
// run the recursive loop after animation
tickerLoop();
});
}
}
}
/**
* Populates the pager with proper amount of pages
*/
var populatePager = function(){
var pagerHtml = '';
var pagerQty = getPagerQty();
// loop through each pager item
for(var i=0; i < pagerQty; i++){
var linkContent = '';
// if a buildPager function is supplied, use it to get pager link value, else use index + 1
if(slider.settings.buildPager && $.isFunction(slider.settings.buildPager)){
linkContent = slider.settings.buildPager(i);
slider.pagerEl.addClass('bx-custom-pager');
}else{
linkContent = i + 1;
slider.pagerEl.addClass('bx-default-pager');
}
// var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
// add the markup to the string
pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
};
// populate the pager element with pager links
slider.pagerEl.html(pagerHtml);
}
/**
* Appends the pager to the controls element
*/
var appendPager = function(){
if(!slider.settings.pagerCustom){
// create the pager DOM element
slider.pagerEl = $('<div class="bx-pager" />');
// if a pager selector was supplied, populate it with the pager
if(slider.settings.pagerSelector){
$(slider.settings.pagerSelector).html(slider.pagerEl);
// if no pager selector was supplied, add it after the wrapper
}else{
slider.controls.el.addClass('bx-has-pager').append(slider.pagerEl);
}
// populate the pager
populatePager();
}else{
slider.pagerEl = $(slider.settings.pagerCustom);
}
// assign the pager click binding
slider.pagerEl.on('click', 'a', clickPagerBind);
}
/**
* Appends prev / next controls to the controls element
*/
var appendControls = function(){
slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
// bind click actions to the controls
slider.controls.next.bind('click', clickNextBind);
slider.controls.prev.bind('click', clickPrevBind);
// if nextSlector was supplied, populate it
if(slider.settings.nextSelector){
$(slider.settings.nextSelector).append(slider.controls.next);
}
// if prevSlector was supplied, populate it
if(slider.settings.prevSelector){
$(slider.settings.prevSelector).append(slider.controls.prev);
}
// if no custom selectors were supplied
if(!slider.settings.nextSelector && !slider.settings.prevSelector){
// add the controls to the DOM
slider.controls.directionEl = $('<div class="bx-controls-direction" />');
// add the control elements to the directionEl
slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
// slider.viewport.append(slider.controls.directionEl);
slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
}
}
/**
* Appends start / stop auto controls to the controls element
*/
var appendControlsAuto = function(){
slider.controls.start = $('<div class="bx-controls-auto-item"><a class="bx-start" href="">' + slider.settings.startText + '</a></div>');
slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</a></div>');
// add the controls to the DOM
slider.controls.autoEl = $('<div class="bx-controls-auto" />');
// bind click actions to the controls
slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);
// if autoControlsCombine, insert only the "start" control
if(slider.settings.autoControlsCombine){
slider.controls.autoEl.append(slider.controls.start);
// if autoControlsCombine is false, insert both controls
}else{
slider.controls.autoEl.append(slider.controls.start).append(slider.controls.stop);
}
// if auto controls selector was supplied, populate it with the controls
if(slider.settings.autoControlsSelector){
$(slider.settings.autoControlsSelector).html(slider.controls.autoEl);
// if auto controls selector was not supplied, add it after the wrapper
}else{
slider.controls.el.addClass('bx-has-controls-auto').append(slider.controls.autoEl);
}
// update the auto controls
updateAutoControls(slider.settings.autoStart ? 'stop' : 'start');
}
/**
* Appends image captions to the DOM
*/
var appendCaptions = function(){
// cycle through each child
slider.children.each(function(index){
// get the image title attribute
var title = $(this).find('img:first').attr('title');
// append the caption
if (title != undefined && ('' + title).length) {
$(this).append('<div class="bx-caption"><span>' + title + '</span></div>');
}
});
}
/**
* Click next binding
*
* @param e (event)
* - DOM event object
*/
var clickNextBind = function(e){
// if auto show is running, stop it
if (slider.settings.auto) el.stopAuto();
el.goToNextSlide();
e.preventDefault();
}
/**
* Click prev binding
*
* @param e (event)
* - DOM event object
*/
var clickPrevBind = function(e){
// if auto show is running, stop it
if (slider.settings.auto) el.stopAuto();
el.goToPrevSlide();
e.preventDefault();
}
/**
* Click start binding
*
* @param e (event)
* - DOM event object
*/
var clickStartBind = function(e){
el.startAuto();
e.preventDefault();
}
/**
* Click stop binding
*
* @param e (event)
* - DOM event object
*/
var clickStopBind = function(e){
el.stopAuto();
e.preventDefault();
}
/**
* Click pager binding
*
* @param e (event)
* - DOM event object
*/
var clickPagerBind = function(e){
// if auto show is running, stop it
if (slider.settings.auto) el.stopAuto();
var pagerLink = $(e.currentTarget);
if(pagerLink.attr('data-slide-index') !== undefined){
var pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
// if clicked pager link is not active, continue with the goToSlide call
if(pagerIndex != slider.active.index) el.goToSlide(pagerIndex);
e.preventDefault();
}
}
/**
* Updates the pager links with an active class
*
* @param slideIndex (int)
* - index of slide to make active
*/
var updatePagerActive = function(slideIndex){
// if "short" pager type
var len = slider.children.length; // nb of children
if(slider.settings.pagerType == 'short'){
if(slider.settings.maxSlides > 1) {
len = Math.ceil(slider.children.length/slider.settings.maxSlides);
}
slider.pagerEl.html( (slideIndex + 1) + slider.settings.pagerShortSeparator + len);
return;
}
// remove all pager active classes
slider.pagerEl.find('a').removeClass('active');
// apply the active class for all pagers
slider.pagerEl.each(function(i, el) { $(el).find('a').eq(slideIndex).addClass('active'); });
}
/**
* Performs needed actions after a slide transition
*/
var updateAfterSlideTransition = function(){
// if infinte loop is true
if(slider.settings.infiniteLoop){
var position = '';
// first slide
if(slider.active.index == 0){
// set the new position
position = slider.children.eq(0).position();
// carousel, last slide
}else if(slider.active.index == getPagerQty() - 1 && slider.carousel){
position = slider.children.eq((getPagerQty() - 1) * getMoveBy()).position();
// last slide
}else if(slider.active.index == slider.children.length - 1){
position = slider.children.eq(slider.children.length - 1).position();
}
if(position){
if (slider.settings.mode == 'horizontal') { setPositionProperty(-position.left, 'reset', 0); }
else if (slider.settings.mode == 'vertical') { setPositionProperty(-position.top, 'reset', 0); }
}
}
// declare that the transition is complete
slider.working = false;
// onSlideAfter callback
slider.settings.onSlideAfter(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
}
/**
* Updates the auto controls state (either active, or combined switch)
*
* @param state (string) "start", "stop"
* - the new state of the auto show
*/
var updateAutoControls = function(state){
// if autoControlsCombine is true, replace the current control with the new state
if(slider.settings.autoControlsCombine){
slider.controls.autoEl.html(slider.controls[state]);
// if autoControlsCombine is false, apply the "active" class to the appropriate control
}else{
slider.controls.autoEl.find('a').removeClass('active');
slider.controls.autoEl.find('a:not(.bx-' + state + ')').addClass('active');
}
}
/**
* Updates the direction controls (checks if either should be hidden)
*/
var updateDirectionControls = function(){
if(getPagerQty() == 1){
slider.controls.prev.addClass('disabled');
slider.controls.next.addClass('disabled');
}else if(!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd){
// if first slide
if (slider.active.index == 0){
slider.controls.prev.addClass('disabled');
slider.controls.next.removeClass('disabled');
// if last slide
}else if(slider.active.index == getPagerQty() - 1){
slider.controls.next.addClass('disabled');
slider.controls.prev.removeClass('disabled');
// if any slide in the middle
}else{
slider.controls.prev.removeClass('disabled');
slider.controls.next.removeClass('disabled');
}
}
}
/**
* Initialzes the auto process
*/
var initAuto = function(){
// if autoDelay was supplied, launch the auto show using a setTimeout() call
if(slider.settings.autoDelay > 0){
var timeout = setTimeout(el.startAuto, slider.settings.autoDelay);
// if autoDelay was not supplied, start the auto show normally
}else{
el.startAuto();
}
// if autoHover is requested
if(slider.settings.autoHover){
// on el hover
el.hover(function(){
// if the auto show is currently playing (has an active interval)
if(slider.interval){
// stop the auto show and pass true agument which will prevent control update
el.stopAuto(true);
// create a new autoPaused value which will be used by the relative "mouseout" event
slider.autoPaused = true;
}
}, function(){
// if the autoPaused value was created be the prior "mouseover" event
if(slider.autoPaused){
// start the auto show and pass true agument which will prevent control update
el.startAuto(true);
// reset the autoPaused value
slider.autoPaused = null;
}
});
}
}
/**
* Initialzes the ticker process
*/
var initTicker = function(){
var startPosition = 0;
// if autoDirection is "next", append a clone of the entire slider
if(slider.settings.autoDirection == 'next'){
el.append(slider.children.clone().addClass('bx-clone'));
// if autoDirection is "prev", prepend a clone of the entire slider, and set the left position
}else{
el.prepend(slider.children.clone().addClass('bx-clone'));
var position = slider.children.first().position();
startPosition = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
}
setPositionProperty(startPosition, 'reset', 0);
// do not allow controls in ticker mode
slider.settings.pager = false;
slider.settings.controls = false;
slider.settings.autoControls = false;
// if autoHover is requested
if(slider.settings.tickerHover && !slider.usingCSS){
// on el hover
slider.viewport.hover(function(){
el.stop();
}, function(){
// calculate the total width of children (used to calculate the speed ratio)
var totalDimens = 0;
slider.children.each(function(index){
totalDimens += slider.settings.mode == 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
});
// calculate the speed ratio (used to determine the new speed to finish the paused animation)
var ratio = slider.settings.speed / totalDimens;
// determine which property to use
var property = slider.settings.mode == 'horizontal' ? 'left' : 'top';
// calculate the new speed
var newSpeed = ratio * (totalDimens - (Math.abs(parseInt(el.css(property)))));
tickerLoop(newSpeed);
});
}
// start the ticker loop
tickerLoop();
}
/**
* Runs a continuous loop, news ticker-style
*/
var tickerLoop = function(resumeSpeed){
speed = resumeSpeed ? resumeSpeed : slider.settings.speed;
var position = {left: 0, top: 0};
var reset = {left: 0, top: 0};
// if "next" animate left position to last child, then reset left to 0
if(slider.settings.autoDirection == 'next'){
position = el.find('.bx-clone').first().position();
// if "prev" animate left position to 0, then reset left to first non-clone child
}else{
reset = slider.children.first().position();
}
var animateProperty = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
var resetValue = slider.settings.mode == 'horizontal' ? -reset.left : -reset.top;
var params = {resetValue: resetValue};
setPositionProperty(animateProperty, 'ticker', speed, params);
}
/**
* Initializes touch events
*/
var initTouch = function(){
// initialize object to contain all touch values
slider.touch = {
start: {x: 0, y: 0},
end: {x: 0, y: 0}
}
slider.viewport.bind('touchstart', onTouchStart);
}
/**
* Event handler for "touchstart"
*
* @param e (event)
* - DOM event object
*/
var onTouchStart = function(e){
if(slider.working){
e.preventDefault();
}else{
// record the original position when touch starts
slider.touch.originalPos = el.position();
var orig = e.originalEvent;
// record the starting touch x, y coordinates
slider.touch.start.x = orig.changedTouches[0].pageX;
slider.touch.start.y = orig.changedTouches[0].pageY;
// bind a "touchmove" event to the viewport
slider.viewport.bind('touchmove', onTouchMove);
// bind a "touchend" event to the viewport
slider.viewport.bind('touchend', onTouchEnd);
}
}
/**
* Event handler for "touchmove"
*
* @param e (event)
* - DOM event object
*/
var onTouchMove = function(e){
var orig = e.originalEvent;
// if scrolling on y axis, do not prevent default
var xMovement = Math.abs(orig.changedTouches[0].pageX - slider.touch.start.x);
var yMovement = Math.abs(orig.changedTouches[0].pageY - slider.touch.start.y);
// x axis swipe
if((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX){
e.preventDefault();
// y axis swipe
}else if((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY){
e.preventDefault();
}
if(slider.settings.mode != 'fade' && slider.settings.oneToOneTouch){
var value = 0;
// if horizontal, drag along x axis
if(slider.settings.mode == 'horizontal'){
var change = orig.changedTouches[0].pageX - slider.touch.start.x;
value = slider.touch.originalPos.left + change;
// if vertical, drag along y axis
}else{
var change = orig.changedTouches[0].pageY - slider.touch.start.y;
value = slider.touch.originalPos.top + change;
}
setPositionProperty(value, 'reset', 0);
}
}
/**
* Event handler for "touchend"
*
* @param e (event)
* - DOM event object
*/
var onTouchEnd = function(e){
slider.viewport.unbind('touchmove', onTouchMove);
var orig = e.originalEvent;
var value = 0;
// record end x, y positions
slider.touch.end.x = orig.changedTouches[0].pageX;
slider.touch.end.y = orig.changedTouches[0].pageY;
// if fade mode, check if absolute x distance clears the threshold
if(slider.settings.mode == 'fade'){
var distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
if(distance >= slider.settings.swipeThreshold){
slider.touch.start.x > slider.touch.end.x ? el.goToNextSlide() : el.goToPrevSlide();
el.stopAuto();
}
// not fade mode
}else{
var distance = 0;
// calculate distance and el's animate property
if(slider.settings.mode == 'horizontal'){
distance = slider.touch.end.x - slider.touch.start.x;
value = slider.touch.originalPos.left;
}else{
distance = slider.touch.end.y - slider.touch.start.y;
value = slider.touch.originalPos.top;
}
// if not infinite loop and first / last slide, do not attempt a slide transition
if(!slider.settings.infiniteLoop && ((slider.active.index == 0 && distance > 0) || (slider.active.last && distance < 0))){
setPositionProperty(value, 'reset', 200);
}else{
// check if distance clears threshold
if(Math.abs(distance) >= slider.settings.swipeThreshold){
distance < 0 ? el.goToNextSlide() : el.goToPrevSlide();
el.stopAuto();
}else{
// el.animate(property, 200);
setPositionProperty(value, 'reset', 200);
}
}
}
slider.viewport.unbind('touchend', onTouchEnd);
}
/**
* Window resize event callback
*/
var resizeWindow = function(e){
// don't do anything if slider isn't initialized.
if(!slider.initialized) return;
// get the new window dimens (again, thank you IE)
var windowWidthNew = $(window).width();
var windowHeightNew = $(window).height();
// make sure that it is a true window resize
// *we must check this because our dinosaur friend IE fires a window resize event when certain DOM elements
// are resized. Can you just die already?*
if(windowWidth != windowWidthNew || windowHeight != windowHeightNew){
// set the new window dimens
windowWidth = windowWidthNew;
windowHeight = windowHeightNew;
// update all dynamic elements
el.redrawSlider();
// Call user resize handler
slider.settings.onSliderResize.call(el, slider.active.index);
}
}
/**
* ===================================================================================
* = PUBLIC FUNCTIONS
* ===================================================================================
*/
/**
* Performs slide transition to the specified slide
*
* @param slideIndex (int)
* - the destination slide's index (zero-based)
*
* @param direction (string)
* - INTERNAL USE ONLY - the direction of travel ("prev" / "next")
*/
el.goToSlide = function(slideIndex, direction){
// if plugin is currently in motion, ignore request
if(slider.working || slider.active.index == slideIndex) return;
// declare that plugin is in motion
slider.working = true;
// store the old index
slider.oldIndex = slider.active.index;
// if slideIndex is less than zero, set active index to last child (this happens during infinite loop)
if(slideIndex < 0){
slider.active.index = getPagerQty() - 1;
// if slideIndex is greater than children length, set active index to 0 (this happens during infinite loop)
}else if(slideIndex >= getPagerQty()){
slider.active.index = 0;
// set active index to requested slide
}else{
slider.active.index = slideIndex;
}
// onSlideBefore, onSlideNext, onSlidePrev callbacks
slider.settings.onSlideBefore(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
if(direction == 'next'){
slider.settings.onSlideNext(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
}else if(direction == 'prev'){
slider.settings.onSlidePrev(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
}
// check if last slide
slider.active.last = slider.active.index >= getPagerQty() - 1;
// update the pager with active class
if(slider.settings.pager) updatePagerActive(slider.active.index);
// // check for direction control update
if(slider.settings.controls) updateDirectionControls();
// if slider is set to mode: "fade"
if(slider.settings.mode == 'fade'){
// if adaptiveHeight is true and next height is different from current height, animate to the new height
if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
}
// fade out the visible child and reset its z-index value
slider.children.filter(':visible').fadeOut(slider.settings.speed).css({zIndex: 0});
// fade in the newly requested slide
slider.children.eq(slider.active.index).css('zIndex', slider.settings.slideZIndex+1).fadeIn(slider.settings.speed, function(){
$(this).css('zIndex', slider.settings.slideZIndex);
updateAfterSlideTransition();
});
// slider mode is not "fade"
}else{
// if adaptiveHeight is true and next height is different from current height, animate to the new height
if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
}
var moveBy = 0;
var position = {left: 0, top: 0};
// if carousel and not infinite loop
if(!slider.settings.infiniteLoop && slider.carousel && slider.active.last){
if(slider.settings.mode == 'horizontal'){
// get the last child position
var lastChild = slider.children.eq(slider.children.length - 1);
position = lastChild.position();
// calculate the position of the last slide
moveBy = slider.viewport.width() - lastChild.outerWidth();
}else{
// get last showing index position
var lastShowingIndex = slider.children.length - slider.settings.minSlides;
position = slider.children.eq(lastShowingIndex).position();
}
// horizontal carousel, going previous while on first slide (infiniteLoop mode)
}else if(slider.carousel && slider.active.last && direction == 'prev'){
// get the last child position
var eq = slider.settings.moveSlides == 1 ? slider.settings.maxSlides - getMoveBy() : ((getPagerQty() - 1) * getMoveBy()) - (slider.children.length - slider.settings.maxSlides);
var lastChild = el.children('.bx-clone').eq(eq);
position = lastChild.position();
// if infinite loop and "Next" is clicked on the last slide
}else if(direction == 'next' && slider.active.index == 0){
// get the last clone position
position = el.find('> .bx-clone').eq(slider.settings.maxSlides).position();
slider.active.last = false;
// normal non-zero requests
}else if(slideIndex >= 0){
var requestEl = slideIndex * getMoveBy();
position = slider.children.eq(requestEl).position();
}
/* If the position doesn't exist
* (e.g. if you destroy the slider on a next click),
* it doesn't throw an error.
*/
if ("undefined" !== typeof(position)) {
var value = slider.settings.mode == 'horizontal' ? -(position.left - moveBy) : -position.top;
// plugin values to be animated
setPositionProperty(value, 'slide', slider.settings.speed);
}
}
}
/**
* Transitions to the next slide in the show
*/
el.goToNextSlide = function(){
// if infiniteLoop is false and last page is showing, disregard call
if (!slider.settings.infiniteLoop && slider.active.last) return;
var pagerIndex = parseInt(slider.active.index) + 1;
el.goToSlide(pagerIndex, 'next');
}
/**
* Transitions to the prev slide in the show
*/
el.goToPrevSlide = function(){
// if infiniteLoop is false and last page is showing, disregard call
if (!slider.settings.infiniteLoop && slider.active.index == 0) return;
var pagerIndex = parseInt(slider.active.index) - 1;
el.goToSlide(pagerIndex, 'prev');
}
/**
* Starts the auto show
*
* @param preventControlUpdate (boolean)
* - if true, auto controls state will not be updated
*/
el.startAuto = function(preventControlUpdate){
// if an interval already exists, disregard call
if(slider.interval) return;
// create an interval
slider.interval = setInterval(function(){
slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
}, slider.settings.pause);
// if auto controls are displayed and preventControlUpdate is not true
if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');
}
/**
* Stops the auto show
*
* @param preventControlUpdate (boolean)
* - if true, auto controls state will not be updated
*/
el.stopAuto = function(preventControlUpdate){
// if no interval exists, disregard call
if(!slider.interval) return;
// clear the interval
clearInterval(slider.interval);
slider.interval = null;
// if auto controls are displayed and preventControlUpdate is not true
if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('start');
}
/**
* Returns current slide index (zero-based)
*/
el.getCurrentSlide = function(){
return slider.active.index;
}
/**
* Returns current slide element
*/
el.getCurrentSlideElement = function(){
return slider.children.eq(slider.active.index);
}
/**
* Returns number of slides in show
*/
el.getSlideCount = function(){
return slider.children.length;
}
/**
* Update all dynamic slider elements
*/
el.redrawSlider = function(){
// resize all children in ratio to new screen size
slider.children.add(el.find('.bx-clone')).width(getSlideWidth());
// adjust the height
slider.viewport.css('height', getViewportHeight());
// update the slide position
if(!slider.settings.ticker) setSlidePosition();
// if active.last was true before the screen resize, we want
// to keep it last no matter what screen size we end on
if (slider.active.last) slider.active.index = getPagerQty() - 1;
// if the active index (page) no longer exists due to the resize, simply set the index as last
if (slider.active.index >= getPagerQty()) slider.active.last = true;
// if a pager is being displayed and a custom pager is not being used, update it
if(slider.settings.pager && !slider.settings.pagerCustom){
populatePager();
updatePagerActive(slider.active.index);
}
}
/**
* Destroy the current instance of the slider (revert everything back to original state)
*/
el.destroySlider = function(){
// don't do anything if slider has already been destroyed
if(!slider.initialized) return;
slider.initialized = false;
$('.bx-clone', this).remove();
slider.children.each(function() {
$(this).data("origStyle") != undefined ? $(this).attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
});
$(this).data("origStyle") != undefined ? this.attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
$(this).unwrap().unwrap();
if(slider.controls.el) slider.controls.el.remove();
if(slider.controls.next) slider.controls.next.remove();
if(slider.controls.prev) slider.controls.prev.remove();
if(slider.pagerEl && slider.settings.controls) slider.pagerEl.remove();
$('.bx-caption', this).remove();
if(slider.controls.autoEl) slider.controls.autoEl.remove();
clearInterval(slider.interval);
if(slider.settings.responsive) $(window).unbind('resize', resizeWindow);
}
/**
* Reload the slider (revert all DOM changes, and re-initialize)
*/
el.reloadSlider = function(settings){
if (settings != undefined) options = settings;
el.destroySlider();
init();
}
init();
// returns the current jQuery object
return this;
}
})(jQuery);
... ...
... ... @@ -23,6 +23,10 @@ import SignApe from "ape/SignApe";
import localConfig from "local/localConfig";
import UIMagnifyApe from "ape/UIMagnifyApe";
import ErrorApe from 'ape/ErrorApe';
import Slideshow from 'ape/Slideshow';//图片轮播
import LoginOrRegister from 'ape/LoginOrRegister';//登录注册
import LanclassApe from 'ape/LanclassApe';//互动课堂
import HomeApe from 'ape/HomeApe';//首页
let loger = Loger.getLoger('PCLive');
... ... @@ -39,6 +43,9 @@ let _musicShareApe;
let _answerApe;
let _signApe;
let _loginOrRegister;
let _lanclassApe;
let _homeApe;
class Main {
constructor() {
... ... @@ -66,13 +73,11 @@ class Main {
loger.log("urlParams", urlParams);
if (urlParams) {
ClassDataProxy.classId = parseInt(urlParams.classId) || 0;
//let userName = urlParams.userName || "user_" + (new Date().getTime() % 1000000);
let userName = urlParams.userName || "";
ClassDataProxy.userName = decodeURI(userName);
ClassDataProxy.userId = urlParams.userId || userName;
/*if(!ClassDataProxy.userId||ClassDataProxy.userId=="0"){
ClassDataProxy.userId=userName;
}*/
ClassDataProxy.userRole = urlParams.userRole || "normal";
ClassDataProxy.isRecordPlayBack = Boolean(urlParams.playRecord);
ClassDataProxy.autoLogin = urlParams.m || 0;
... ... @@ -123,50 +128,58 @@ class Main {
//创建模块
//课堂模块
_classApe = new ClassApe();
_classApe.on(ClassApe.CLASS_STOP_MEDIA_PUBLISH, this._onClassStopMediaPublishHandler.bind(this));
// _classApe = new ClassApe();
// _classApe.on(ClassApe.CLASS_STOP_MEDIA_PUBLISH, this._onClassStopMediaPublishHandler.bind(this));
//答题卡模块
_answerApe = new AnswerApe();
// _answerApe = new AnswerApe();
//签到模块
_signApe = new SignApe();
// _signApe = new SignApe();
//聊天模块
_chatApe = new ChatApe();
_chatApe.on(UserList.WINDOW_VIEW_CHANGE, this.onWindowViewChange.bind(this));//监听用户列表模块布局发生改变，文档模块的大小需要调整
// _chatApe = new ChatApe();
// _chatApe.on(UserList.WINDOW_VIEW_CHANGE, this.onWindowViewChange.bind(this));//监听用户列表模块布局发生改变，文档模块的大小需要调整
//音频模块
//_audioApe = new AudioApe();
//文档模块
_docApe = new DocApe();
_docApe.on(DocApe.DOC_IMAGE_LOAD, this._docImageLoadHandler.bind(this));
_docApe.on(DocApe.SCENE_DOC_CHANGE, this._onSceneChangeHandler.bind(this));
// _docApe = new DocApe();
// _docApe.on(DocApe.DOC_IMAGE_LOAD, this._docImageLoadHandler.bind(this));
// _docApe.on(DocApe.SCENE_DOC_CHANGE, this._onSceneChangeHandler.bind(this));
//标注模块
_whiteBoardApe = new WhiteBoardApe();
// _whiteBoardApe = new WhiteBoardApe();
//激光笔模块
_laserPen = new LaserPen();
// _laserPen = new LaserPen();
//录制回放模块
_recordReplayApe = new RecordReplayApe();
_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_PLAY, this._onRecordReplayPlayHandler.bind(this));
_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_SEEK, this._onRecordReplaySeekHandler.bind(this));
_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_PAUSE, this._onRecordReplayPauseHandler.bind(this));
_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_STOP, this._onRecordReplayStopHandler.bind(this));
//_recordReplayApe = new RecordReplayApe();
//_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_PLAY, this._onRecordReplayPlayHandler.bind(this));
//_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_SEEK, this._onRecordReplaySeekHandler.bind(this));
//_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_PAUSE, this._onRecordReplayPauseHandler.bind(this));
//_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_STOP, this._onRecordReplayStopHandler.bind(this));
_screenShareApe = new ScreenShareApe();
_screenShareApe.on(ScreenShareApe.SCENE_SCREEN_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
//_screenShareApe = new ScreenShareApe();
//_screenShareApe.on(ScreenShareApe.SCENE_SCREEN_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
_mediaShareApe = new MediaShareApe();
_mediaShareApe.on(MediaShareApe.SCENE_MEDIA_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
// _mediaShareApe = new MediaShareApe();
// _mediaShareApe.on(MediaShareApe.SCENE_MEDIA_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
// _musicShareApe = new MusicShareApe();
// _musicShareApe.on(MusicShareApe.SCENE_MUSIC_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
_musicShareApe = new MusicShareApeTwo();
_musicShareApe.on(MusicShareApeTwo.SCENE_MUSIC_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
//视频模块
_mediaManagerApe = new MediaManagerApe();
_mediaManagerApe.on(MediaManagerApe.FLASH_LOADED, this._onFlashLoaded.bind(this));
// _musicShareApe = new MusicShareApeTwo();
// _musicShareApe.on(MusicShareApeTwo.SCENE_MUSIC_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
///视频模块
// _mediaManagerApe = new MediaManagerApe();
// _mediaManagerApe.on(MediaManagerApe.FLASH_LOADED, this._onFlashLoaded.bind(this));
//_mediaManagerApe.startLoadFlashTools();
//登录注册
_loginOrRegister = new LoginOrRegister();
//互动课堂
_lanclassApe = new LanclassApe();
//首页
_homeApe = new HomeApe();
this._onFlashLoaded();
}
... ...