张桐 / xdykt-build

转到一个项目
Toggle navigation Toggle navigation pinning
张桐
7f5dcd95 1 parent 3c81e0b7

修改聊天模块 内容区域长度随着内容变化 样式调整

内嵌 并排对比
正在显示 3 个修改的文件 包含 124 行增加 和 860 行删除
... ... @@ -1494,8 +1494,9 @@ height: 1080px;
border-radius: 8px;
display: inline-block;
min-width: 98px;
max-width: 280px;
max-width: 100%;
border: 1px solid #d7d7d7;
}
.chat .msg .teacher-msg p img:nth-of-type(1){
text-align: left;
... ... @@ -2963,9 +2964,10 @@ canvas {
border-radius: 8px;
display: inline-block;
min-width: 98px;
max-width: 280px;
max-width: 100%;
border: 1px solid #d7d7d7;
height: 37px;
/*height: 37px;*/
}
.chat .msg .teacher-msg p.left::after{
... ... @@ -3918,7 +3920,7 @@ canvas {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 100%;
width: 94%;
height: 30px;
}
.chat .msg .teacher-msg .teaImg{
... ... @@ -3926,18 +3928,20 @@ canvas {
}
.chat .msg .teacher-msg p {
position: relative;
top: -24px;
float: left;
padding: 8px;
font-size: 12px;
color: #333333;
background: white;
margin-left: 16px;
margin-left: 40px;
border-radius: 8px;
display: inline-block;
min-width: 98px;
max-width: 280px;
max-width: 100%;
border: 1px solid #d7d7d7;
height: 37px;
/*height: 37px;*/
word-break: break-all;
}
.chat .msg .teacher-msg p.left::after{
... ... @@ -3949,7 +3953,7 @@ canvas {
position: absolute;
float: left;
left: -8px;
bottom: 18px;
bottom: 33px;
display: block;
width: 10px;
height: 10px;
... ... @@ -4703,870 +4707,85 @@ canvas {
top: 97px;
}
}
/*h5课堂*/
.h5box{
display: none;
}
img {
vertical-align: middle;
}
ul,
ol {
list-style: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
.h1,
h1 {
font-size: 36px;
}
.h2,
h2 {
font-size: 30px;
}
.h3,
h3 {
font-size: 24px;
/*聊天区域*/
.message img{
width: 16px;
height: 16px;
}
.message_client{
overflow: hidden;
.h4,
h4 {
font-size: 18px;
}
.h5,
h5 {
.chat .TeaName{
font-size: 14px;
margin-left: 10px;
}
.h6,
h6 {
font-size: 12px;
}
.h1,
h1,
.h2,
h2,
.h3,
h3 {
margin-top: 20px;
margin-bottom: 20px;
}
.h4,
h4,
.h5,
h5,
.h6,
h6 {
margin-top: 10px;
margin-bottom: 10px;
}
p {
margin: 0 0 10px;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-indent {
text-indent: 2em;
}
.dn {
display: none;
}
.db {
display: block;
}
input,
button {
font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
.chat .stuName{
font-size: 14px;
margin-right: 10px;
}
.container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
.chat .message_client .message {
font-size: 14px;
color: #333;
margin-top: 5px;
line-height: 15px;
}
.video_container {
.triangle-isosceles {
position: relative;
padding: 6px 10px 6px 10px;
border-radius: 8px;
display: inline-block;
/*min-width: 20px;*/
max-width:90%;
word-break: break-all;
}
.video_container:before {
content: "";
display: block;
padding-top: 240px;
}
@media screen and (min-height: 568px) {
.video_container:before {
padding-top: 284px;
}
}
@media screen and (min-height: 667px) {
.video_container:before {
padding-top: 333px;
}
}
@media screen and (min-height: 768px) {
.video_container:before {
padding-top: 384px;
}
}
@media screen and (min-height: 1024px) {
.video_container:before {
padding-top: 512px;
}
}
.video_wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
#video_div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
text-align: center;
background: #333;
}
#video_div.hide {
display: none;
}
#video {
height: 100%;
width: auto;
}
#video_mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(../images/beginning.jpg) center center;
background-size: cover;
z-index: 1;
}
#online_users {
height: 28px;
min-width: 60px;
border: 1px solid #666;
border-radius: 0 14px 14px 0;
border-left: 0 none;
line-height: 28px;
font-size: 12px;
color: #999;
background: url(../images/icon1x.png) 0 -35px no-repeat rgba(0, 0, 0, 0.2);
padding: 0 10px 0 30px;
position: absolute;
left: 0;
top: 15px;
z-index: 3;
text-align: left;
}
#btn_video {
position: absolute;
right: 15px;
top: 15px;
z-index: 3;
background: url(../images/icon1x.png) 0 -190px no-repeat;
width: 40px;
height: 40px;
}
#btn_document {
position: absolute;
right: 15px;
top: 15px;
z-index: 3;
width: 40px;
height: 40px;
background: url(../images/icon1x.png) 0 -120px no-repeat;
}
#live_document_container {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
background: #333;
color: white;
overflow: hidden;
}
.content_container {
.stutriangle-isosceles {
float:right;
position: relative;
min-height: 200px;
}
.content_container .tab_container {
position: absolute;
left: 0;
top: 40px;
right: 0;
bottom: 0;
background: #e1e1e0;
}
.tab_container .tab_body {
width: 100%;
height: auto;
display: none;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.tab_container .tab_body {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: none;
}
.tab_container .tab_message {
bottom: 42px;
}
.tab_container .active {
display: block;
}
.tab_body_container {
padding: 2px 4px;
}
.message_container {
padding: 8px;
padding: 6px 10px 6px 10px;
border-radius: 8px;
display: inline-block;
/*min-width: 20px;*/
max-width:90%;
word-break: break-all;
}
.input_container {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 36px;
padding-top: 4px;
background: #fff;
border-top: 1px solid #ddd;
.triangle-isosceles.leftmsg{
margin-left: 8px;
background: white;
border: 1px solid #d7d7d7;
}
.dark .input_container {
border-top: 1px solid #373737;
.stutriangle-isosceles.rightmsg{
margin-left: 8px;
background: white;
border: 1px solid #d7d7d7;
}
.btn_more {
float: left;
width: 32px;
height: 32px;
margin-left: 5px;
background: url(../images/more.png) no-repeat #fdfdfd;
background-size: 212px;
border-radius: 20px;
.triangle-isosceles.leftmsg:after {
top: 6px;
left: -7px;
}
.btn_face {
float: left;
width: 32px;
height: 32px;
margin-left: 5px;
background: url(../images/more.png) no-repeat -60px 0 #fdfdfd;
background-size: 212px;
border-radius: 20px;
.stutriangle-isosceles.rightmsg:after {
top: 6px;
right:-7px;
}
.panel_more {
.triangle-isosceles:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
z-index: 3;
width: 100%;
height: 100%;
display: block;
width: 10px;
height: 10px;
background: url(../images/arrow.png) 50% 50%;
}
.panel_inner {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
background: #fff;
}
.list_buttons {
vertical-align: middle;
margin: 0 10px;
margin-top: 40px;
}
.list_buttons ul {
overflow: hidden;
}
.list_buttons ul li {
float: left;
width: 50%;
text-align: center;
}
.btn_layout div {
padding-top: 50px;
width: 60px;
display: inline-block;
background: url(../images/more.png) -106px 10px no-repeat;
background-size: 212px;
}
.btn_night div {
padding-top: 50px;
width: 60px;
display: inline-block;
height: 100%;
background: url(../images/more.png) -166px 10px no-repeat;
background-size: 212px;
}
.btn_close {
text-align: center;
padding-top: 30px;
padding-bottom: 10px;
}
.btn_close span {
display: inline-block;
width: 25px;
height: 20px;
background: url(../images/more.png) 0 -60px no-repeat;
background-size: 212px;
margin-top: 5px;
}
.list_faces {
overflow: hidden;
position: absolute;
left: 0;
bottom: 40px;
z-index: 9;
background: #fff;
}
.list_faces ul {
display: inline-block;
width: 100%;
white-space: normal;
}
.list_faces li {
display: inline-block;
width: 13%;
height: 40px;
text-align: center;
line-height: 40px;
}
.list_faces_scroller {
-webkit-transition: transform 0.5s ease;
white-space: nowrap;
}
.list_faces_paginator {
height: 10px;
line-height: 10px;
text-align: center;
margin: 10px 0;
}
.list_faces_paginator b {
display: inline-block;
width: 7px;
height: 7px;
border: 1px solid #ccc;
background: #ccc;
border-radius: 7px;
margin: 0 3px;
}
.list_faces_paginator b.selected {
border-color: #333;
background: #333;
}
.message_server {}
.message_client {
overflow: hidden;
margin-bottom: 10px;
}
.message_client .user_avatar {
margin-top: 4px;
width: 24px;
height: 24px;
}
.message_client p {
margin: 0;
line-height: 1.5em;
}
.message_client .username {
color: #999;
font-size: 12px;
margin-left: 8px;
margin-bottom: 6px;
}
.message_client .message {
color: #333;
}
.avatar {
width: 24px;
height: 24px;
}
.avatar_teacher {
background: url(../images/icon1x.png) no-repeat;
}
.avatar_student {
background: url(../images/icon1x.png) 0 -73px no-repeat;
}
.flag_teacher {
background: #ffcc00;
line-height: 20px;
display: inline-block;
width: 40px;
height: 20px;
border-radius: 4px;
text-align: center;
color: #fff;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.avatar_teacher {
background: url(../images/icon2x.png) no-repeat;
background-size: 37px;
}
.avatar_student {
background: url(../images/icon2x.png) 0 -73px no-repeat;
background-size: 37px;
}
#online_users {
background-image: url(../images/icon2x.png);
background-size: 37px;
}
#btn_document {
background-image: url(../images/icon2x.png);
background-size: 37px;
}
}
.document_pager {
position: absolute;
bottom: 10px;
left: 50%;
width: 46px;
height: 20px;
margin-left: -23px;
background: rgba(0, 0, 0, .3);
color: #ddd;
font-size: 12px;
border-radius: 4px;
line-height: 20px;
}
.document_image {
margin-top: 30px;
padding: 130px 0 0 0;
background: url(../images/no-document.png) no-repeat center center;
background-size: 100px;
font-size: 13px;
color: #666;
}
.detail_wrapper {
padding: 20px 15px;
color: #666;
font-size: 14px;
}
.detail_title {
font-size: 18px;
color: #000;
}
.detail_subtitle {}
.col-lg-12 {
padding: 0;
}
.mt10 {
margin-top: 10px;
}
.input_message {
width: 100%;
}
.btn {
display: inline-block;
padding: 0 12px;
font-size: 12px;
height: 31px;
line-height: 31px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 6px;
}
.btn-primary {
color: #fff;
background-color: #3598db;
border-color: #2e6da4;
}
.form-control {
display: block;
width: 100%;
height: 30px;
padding: 0 8px;
font-size: 12px;
line-height: 30px;
color: #626262;
background-color: #fff;
border: 1px solid #d8d8d8;
border-radius: 6px;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
list-style: none;
display: -webkit-box;
display: box;
line-height: 38px;
}
.dark .nav-tabs {
border-bottom: 1px solid #373737;
}
.nav-tabs > li {
-webkit-box-flex: 1;
box-flex: 1;
margin-bottom: -1px;
}
.nav-tabs > li > a {
position: relative;
display: block;
cursor: pointer;
text-align: center;
}
.nav-tabs > li.active > a {
color: #555;
cursor: default;
border-bottom: 2px solid #2e6da4;
}
.list_sliders {
position: relative;
}
.list_sliders img {
width: 100%;
}
.docAnno {
position: absolute;
top: 0px;
left: 0px;
}
.docAnno svg {
transform-origin: 0% 0% 0px;
-ms-transform-origin: 0% 0% 0px;
/* IE 9 */
-webkit-transform-origin: 0% 0% 0px;
/* Safari 和 Chrome */
-moz-transform-origin: 0% 0% 0px;
/* Firefox */
-o-transform-origin: 0% 0% 0px;
/* Opera */
}
.slideWrapper {
width: 100%;
}
.list_sliders .slide {
width: 100%;
}
.triangle-isosceles.left {
margin-left: 8px;
background: #fafafa;
border: 1px solid #cacaca;
}
.dark .triangle-isosceles.left {
background: #222;
border: 0 none;
}
.triangle-isosceles {
position: relative;
padding: 10px;
margin: 1em 0 3em;
border-radius: 8px;
display: inline-block;
min-width: 120px;
max-width: 100%;
word-break: break-all;
}
.triangle-isosceles.left:after {
top: 10px;
left: -8px;
}
.dark .triangle-isosceles.left:after {
top: 10px;
left: -6px;
}
.triangle-isosceles:after {
content: "";
.stutriangle-isosceles:after {
content: "";
position: absolute;
display: block;
width: 10px;
height: 10px;
background: url(../images/arrow.png) 50% 50%;
}
.dark .triangle-isosceles:after {
background-image: url(../images/arrow-dark.png);
}
.masker {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
}
.dlg_login {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.dlg_login .dlg_title {
height: 64px;
background-color: #09c;
padding-left: 110px;
background: url(../images/cat.png) no-repeat #09c 16px 0;
background-size: contain;
}
.dlg_login .dlg_inner {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
margin: -116px 0 0 -128px;
width: 256px;
/*height: 230px;*/
border: 0 solid;
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.dlg_login .form-control {
width: 196px;
display: inline-block;
}
.dlg_login .btn_login {
width: 215px;
height: 38px;
background: #0099cc;
border: 0 none;
font-size: 15px;
border-radius: 4px;
color: white;
}
.dlg_content {
text-align: center;
margin-top: 15px;
}
.dlg_content p {
margin-bottom: 15px;
}
.tip_panel {
position: absolute;
left: 50%;
top: 2%;
background: #4c4c4c;
color: #fff;
text-align: center;
width: 80%;
margin-left: -40%;
line-height: 30px;
border-radius: 4px;
z-index: 10;
}
.tip_message {
position: absolute;
left: 50%;
top: 50%;
background: #4c4c4c;
color: #fff;
text-align: center;
width: 50%;
margin-left: -25%;
line-height: 30px;
border-radius: 4px;
z-index: 10;
padding: 5px 0;
}
.dark {
background: #000;
}
.dark .nav-tabs {
background: #141414;
}
.dark .nav-tabs > li > a {
color: #666;
}
.dark .nav-tabs > li.active > a {
color: #39c;
}
.dark .content_container .tab_container {
background: #000;
}
.dark .input_container {
background: #141414;
}
.dark #txt_message {
background: #222;
border-color: #333;
}
.dark .btn_face,
.dark .btn_more {
background-color: #1c1c1c;
}
.dark .detail_title {
color: #999;
}
.dark .list_faces {
background: #ddd;
}
.dark .panel_inner {
background: #141414;
color: #999;
}
.dark .message_client .message {
color: #ddd;
background: url(../images/arrow-r.png) 50% 50%;
}
... ...
... ... @@ -374,7 +374,8 @@
</div>
<div class="teacherVideo">
<div class="publish" style="position:absolute;top: 0; width:240px;height:180px; -webkit-transform:scale(1.25);">
<div class="publish" style="position:absolute;top: 0; width:400px;height:300px; ">
<div id="publish"></div>
</div>
<div class="play" style="position:absolute;top: 0; width:240px;height:180px">
... ... @@ -398,12 +399,33 @@
<div class="chat">
<div class="msg-border">
<div id="panel_message" class="msg clear">
<!--<div class="message_client">-->
<!--<div style="float: left">-->
<!--<span class="TeaName">老师:</span>-->
<!--</div>-->
<!--<div style="margin-left: 44px">-->
<!--<div class="message triangle-isosceles leftmsg">打开</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="message_client">-->
<!--<div style="float: right">-->
<!--<span class="stuName">学生</span>-->
<!--</div>-->
<!--<div style="float:right;margin-right: 14px">-->
<!--<div class="message stutriangle-isosceles rightmsg">打开</div>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<!--<div class="teacher-msg "><img src="images/teacher-photo.png" alt="老师头像">-->
<!--<p class="left">哇哦。。。。。。</p></div>-->
<!--<div class="student-msg"><img src="images/student-photo.png" alt="学生头像">-->
<!--<p class="right">哇哦。。。。。。</p></div>-->
</div>
</div>
<div class="input-send clear">
<button id="btn_send" class="send" type="submit">发送</button>
<div class="input-face">
... ...
... ... @@ -29,16 +29,35 @@ var canvas ;
var context ;
//蒙版
var canvas_bak;
// 消息模板-老师
var tpl_message_teacher = `
<div class="teacher-msg "><img class="teaImg" src="images/teacher-photo.png" alt="老师头像">
<p>{message}</p></div>`;
var tpl_message_teacher = `<div class="message_client">
<div style="float: left">
<span class="TeaName"><img class="teaImg" src="images/teacher-photo.png" alt="老师头像"></span>
</div>
<div style="margin-left: 37px">
<div class="message triangle-isosceles leftmsg">{message}</div>
</div>
</div>`;
// 消息模板-学生
var tpl_message_student = `
<div class="student-msg"><img class="stuImg" src="images/student-photo.png" alt="学生头像">
<p>{message}</p></div>`;
var tpl_message_student = `<div class="message_client">
<div style="float: right">
<span class="stuName"><img class="teaImg" src="images/student-photo.png" alt="学生头像"></span>
</div>
<div style="margin-right: 47px">
<div class="message stutriangle-isosceles rightmsg">{message}</div>
</div>
</div>`;
// // 消息模板-老师
// var tpl_message_teacher = `
// <div class="teacher-msg "><img class="teaImg" src="images/teacher-photo.png" alt="老师头像">
// <p>{message}</p></div>`;
// // 消息模板-学生
// var tpl_message_student = `
// <div class="student-msg"><img class="stuImg" src="images/student-photo.png" alt="学生头像">
// <p>{message}</p></div>`;
//上传文件列表模板
var tpl_doc=`<li><div class="forSwitch"><span class="iconfont">&#xe639;</span><span class="itemName">{name}</span><span class="itemIdx">{itemIdx}</span></div><span class="deleteDoc iconfont">&#xe635;</span>
</li>`;
... ... @@ -936,7 +955,7 @@ function classJoinSuccess(callbackData){
classAllInfo=callbackData;
console.log("classJoinSuccess====>",callbackData);
//去掉复制功能
document.body.onselectstart=document.body.oncontextmenu=function(){ return false;}
// document.body.onselectstart=document.body.oncontextmenu=function(){ return false;}
//进入成功后 画笔可以使用
$(".Color1").trigger("click");
... ... @@ -1055,13 +1074,17 @@ function layoutView( ) {
$(".showImg").css("display","block");
});
$(document).keydown(function (e) {
if(event.keyCode==13){
$("#btn_send").click();
}
});
//发送聊天消息
$("#btn_send").click(function (e) {
console.log("点击了发送消息按钮------->");
sendChatMsg();
});
// 文件上传
... ...