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

张桐
Commit 7f5dcd953c72903fe661b6765a32326ff39be494 7f5dcd95 1 parent 3c81e0b7
css/main.css
index.html
src/main.js
--- a/css/main.css
查看文件 @7f5dcd9
+++ b/css/main.css
查看文件 @7f5dcd9
@@ -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%;
 }
--- a/index.html
查看文件 @7f5dcd9
+++ b/index.html
查看文件 @7f5dcd9
@@ -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">
--- a/src/main.js
查看文件 @7f5dcd9
+++ b/src/main.js
查看文件 @7f5dcd9
@@ -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();
-
     });
     // 文件上传