update

src/icons/svg/camera-on-black.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 18.5C16.4183 18.5 20 14.9183 20 10.5C20 6.08172 16.4183 2.5 12 2.5C7.58172 2.5 4 6.08172 4 10.5C4 14.9183 7.58172 18.5 12 18.5Z" stroke="#2C2C2C" stroke-width="1.5"/>
+<path d="M12 14C13.933 14 15.5 12.433 15.5 10.5C15.5 8.567 13.933 7 12 7C10.067 7 8.5 8.567 8.5 10.5C8.5 12.433 10.067 14 12 14Z" stroke="#2C2C2C" stroke-width="1.5"/>
+<path d="M8 21.5H16" stroke="#2C2C2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 18.5V21.5" stroke="#2C2C2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/icons/svg/hang-up-black.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4655 15.8529C20.2138 16.1045 19.8455 16.1999 19.5034 16.102L17.1299 15.4231C16.8191 15.3342 16.5721 15.0977 16.4699 14.791L15.6537 12.3422C15.6537 12.3422 14.201 11.3626 12.221 11.3626C10.2411 11.3627 8.79655 12.3423 8.79655 12.3423L7.9804 14.7906C7.87813 15.0975 7.63095 15.3341 7.3199 15.4229L4.93838 16.1025C4.59633 16.2001 4.22835 16.1047 3.97687 15.8532L2.21973 14.096C1.32489 13.2012 1.50977 11.7237 2.64372 11.162C4.97267 10.0082 8.79447 8.42385 12.221 8.42389C15.6476 8.42389 19.4694 10.0082 21.7983 11.162C22.9323 11.7238 23.1171 13.2012 22.2223 14.096L20.4655 15.8529Z" stroke="#2c2c2c" stroke-width="1.46939" stroke-linejoin="round"/>
+</svg>

src/icons/svg/mike-off-black.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M512 0C406.4 0 320 86.4 320 192v368c0 8.2 0.5 16.3 1.5 24.2l62.5-62.5V192c0-34 13.4-66.1 37.7-90.4C445.9 77.4 478 64 512 64s66.1 13.4 90.3 37.6C626.6 125.9 640 158 640 192v73.7l64-64V192C704 86.4 617.6 0 512 0zM272.4 633.3l-51.1 51.1c-4.8-11.7-8.8-23.7-12.2-36.1-0.7-2.7-1.1-5.6-1.1-8.4V496.7c0-17.4 13.7-32.2 31.1-32.7 18.1-0.5 32.9 14 32.9 32v129.8c0 2.5 0.1 5 0.4 7.5zM512 752c52.8 0 100.8-21.6 135.6-56.4S704 612.8 704 560V380.3l174.1-174.1c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L391.3 602.5 343 650.8l-44.7 44.7-46.3 46.3-115.1 115.1c-12.5 12.5-12.5 32.8 0 45.3 6.3 6.3 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4L293.3 791c48.2 46.8 111.1 77.9 179.7 86.6 4 0.5 7 3.9 7 7.9V944c0 8.8-7.2 16-16 16h-80c-17.7 0-33.7 7.2-45.3 18.7S320 1006.3 320 1024h384c0-35.4-28.7-64-64-64h-80c-8.8 0-16-7.2-16-16v-58.5c0-4 3-7.4 7-7.9 56-7 108.1-29 151.5-62.2 53.4-40.8 93.8-98.8 112.3-166.9 0.7-2.7 1.1-5.6 1.1-8.4V496c0-18-14.8-32.5-32.9-32-17.4 0.5-31.1 15.2-31.1 32.7v129.2c0 6.9-1.1 13.8-3.3 20.3C714.7 746.9 619.4 816 512 816c-66.3 0-128-26.4-173.5-70.2l44.2-44.2C416.8 732.9 462.3 752 512 752z m128-307.7V560c0 34-13.4 66.1-37.7 90.3C578.1 674.6 546 688 512 688c-31.1 0-60.6-11.2-84-31.7l212-212z" /></svg>

src/icons/svg/mike-on-black.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M512 650.497842a176.805755 176.805755 0 0 0 176.805755-176.805756V176.805755a176.805755 176.805755 0 0 0-353.61151 0v296.886331a176.805755 176.805755 0 0 0 176.805755 176.805756zM394.129496 176.805755a117.870504 117.870504 0 0 1 235.741008 0v296.886331a117.870504 117.870504 0 1 1-235.741008 0z"  /><path fill="#2c2c2c" d="M806.676259 443.708777a29.467626 29.467626 0 0 0-29.467626 29.467626v7.366906c0 142.844317-118.97554 259.094101-265.208633 259.094101s-265.208633-116.249784-265.208633-259.094101v-7.366906a29.467626 29.467626 0 0 0-58.935252 0v7.366906c0 165.018705 128.773525 301.011799 292.834532 316.776979V965.064748H364.661871a29.467626 29.467626 0 0 0 0 58.935252h294.676258a29.467626 29.467626 0 0 0 0-58.935252H539.625899v-167.891798c165.829065-13.776115 296.517986-150.579568 296.517986-316.776979v-7.366906a29.467626 29.467626 0 0 0-29.467626-29.320288z"  /></svg>

src/icons/svg/video.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01"/>
-<path d="M18 5H2V19H18V5Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22 7L18 10.375V13.625L22 17V7Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="7" cy="10" r="2" stroke="white" stroke-width="1.5"/>
+<path d="M24 0H0V24H24V0Z" fill="#2c2c2c" fill-opacity="0.01"/>
+<path d="M18 5H2V19H18V5Z" stroke="#2c2c2c" stroke-width="1.5" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 7L18 10.375V13.625L22 17V7Z" stroke="#2c2c2c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="7" cy="10" r="2" stroke="#2c2c2c" stroke-width="1.5"/>
 </svg>

src/icons/svg/voice.svg

@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23.5384 0.692383H1.38452V22.8462H23.5384V0.692383Z" fill="white" fill-opacity="0.01"/>
-<path d="M23.5384 0.692383H1.38452V22.8462H23.5384V0.692383Z" fill="white" fill-opacity="0.01"/>
-<path d="M8.01962 4.75098C8.35492 4.75098 8.66388 4.93285 8.82666 5.22602L9.95577 7.25993C10.1036 7.52624 10.1106 7.84835 9.97433 8.12079L8.88657 10.2963C8.88657 10.2963 9.2018 11.917 10.5211 13.2363C11.8404 14.5555 13.4556 14.8653 13.4556 14.8653L15.6308 13.7777C15.9034 13.6414 16.2257 13.6485 16.4921 13.7966L18.5318 14.9306C18.8247 15.0934 19.0064 15.4022 19.0064 15.7373V18.0789C19.0064 19.2714 17.8987 20.1327 16.7688 19.7514C14.4482 18.9684 10.8461 17.4776 8.56294 15.1944C6.27976 12.9112 4.78889 9.30907 4.00589 6.9885C3.62464 5.85861 4.48592 4.75098 5.67837 4.75098H8.01962Z" stroke="white" stroke-width="1.38462" stroke-linejoin="round"/>
+<path d="M23.5384 0.692383H1.38452V22.8462H23.5384V0.692383Z" fill="#2c2c2c" fill-opacity="0.01"/>
+<path d="M23.5384 0.692383H1.38452V22.8462H23.5384V0.692383Z" fill="#2c2c2c" fill-opacity="0.01"/>
+<path d="M8.01962 4.75098C8.35492 4.75098 8.66388 4.93285 8.82666 5.22602L9.95577 7.25993C10.1036 7.52624 10.1106 7.84835 9.97433 8.12079L8.88657 10.2963C8.88657 10.2963 9.2018 11.917 10.5211 13.2363C11.8404 14.5555 13.4556 14.8653 13.4556 14.8653L15.6308 13.7777C15.9034 13.6414 16.2257 13.6485 16.4921 13.7966L18.5318 14.9306C18.8247 15.0934 19.0064 15.4022 19.0064 15.7373V18.0789C19.0064 19.2714 17.8987 20.1327 16.7688 19.7514C14.4482 18.9684 10.8461 17.4776 8.56294 15.1944C6.27976 12.9112 4.78889 9.30907 4.00589 6.9885C3.62464 5.85861 4.48592 4.75098 5.67837 4.75098H8.01962Z" stroke="#2c2c2c" stroke-width="1.38462" stroke-linejoin="round"/>
 </svg>

src/views/live/common.js

@@ -263,9 +263,9 @@ export function downloadWebSDK(vue) {
 }
 
 // 聊天列表滚动
-export function chatRoll(vue) {
+export function chatRoll(vue, isGroup = true) {
   let chat = vue.$refs.chat;
-  let isBottom = chat.scrollTop >= chat.scrollHeight - 170;
+  let isBottom = chat.scrollTop >= chat.scrollHeight - (isGroup ? 170 : 310);
   vue.$nextTick(() => {
     if (isBottom) {
       chat.scrollTop = chat.scrollHeight;

src/views/live/student/group.vue

@@ -429,7 +429,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '~@/styles/mixin.scss';
 $live-bc: #3d3938;
 

src/views/live/student/index.vue

@@ -6,16 +6,9 @@
         <div class="live-title-name">{{ roomInfo.cs_item_name }} {{ roomInfo.task_name }}</div>
         <div>
           <el-button @click="exitRoom">退出房间</el-button>
-          <el-button @click="setDevice()">设置设备</el-button>
+          <el-button @click="setDevice">设置设备</el-button>
         </div>
       </div>
-      <div class="live-course-name">{{ roomInfo.course_name }}</div>
-      <div class="live-teacher">
-        <span class="live-teacher-name">
-          <svg-icon icon-class="person" />{{ roomInfo.teacher_name }}
-        </span>
-        <span><svg-icon icon-class="people" />{{ roomInfo.student_count }}</span>
-      </div>
     </div>
     <!-- 主容器 -->
     <div class="live-container">
@@ -68,7 +61,21 @@
             </span>
           </div>
         </div>
-        <div class="live-container-left-chat">
+      </div>
+      <!-- 右侧 -->
+      <div class="live-container-right">
+        <div class="live-teacher-lens">
+          <div id="live" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false"></div>
+          <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
+            <div class="live-wrapper-right">
+              <span :style="{ color: netStatusColor }">{{ netStatus }}</span>
+            </div>
+          </div>
+          <div class="live-operate">
+            <div>{{ roomInfo.teacher_name }}</div>
+          </div>
+        </div>
+        <div class="live-container-right-chat">
           <div class="chat-top">
             <span>聊天</span>
           </div>
@@ -94,34 +101,24 @@
           </div>
         </div>
       </div>
-      <!-- 右侧 -->
-      <div class="live-container-right">
-        <div
-          class="live-teacher-lens"
-          @mouseover="liveMenuShow = true"
-          @mouseout="liveMenuShow = false"
-        >
-          <div id="live"></div>
-          <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
-            <div>
-              {{ roomInfo.teacher_name }}
+    </div>
+
+    <!-- 学员列表 -->
+    <div class="student-list">
+      <div class="student-list-title">
+        <span>学员列表（{{ student_list.length }}）</span>
+      </div>
+      <div class="student-list-container">
+        <ul>
+          <li v-for="item in student_list" :key="item.room_user_id">
+            <div class="li-top">
+              <el-avatar icon="el-icon-user" :size="40" :src="item.student_image_url" />
             </div>
-            <div>
-              <span :style="{ color: netStatusColor }">{{ netStatus }}</span>
+            <div class="li-bottom">
+              <div class="name">{{ item.student_name }}</div>
             </div>
-          </div>
-        </div>
-        <div class="student-list">
-          <div class="student-list-title">学生列表</div>
-          <ul>
-            <li v-for="item in student_list" :key="item.room_user_id">
-              <div class="student-list-left">
-                <el-avatar icon="el-icon-user" size="small" :src="item.student_image_url" />
-                <span class="name">{{ item.student_name }}</span>
-              </div>
-            </li>
-          </ul>
-        </div>
+          </li>
+        </ul>
       </div>
     </div>
 
@@ -271,7 +268,7 @@ export default {
     },
     // 聊天列表滚动
     chatList() {
-      common.chatRoll(this);
+      common.chatRoll(this, false);
     }
   },
   created() {
@@ -504,12 +501,19 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '~@/styles/mixin.scss';
 $live-bc: #3d3938;
 
 .live {
-  @include container;
+  @include dialog;
+
+  margin-bottom: 24px;
+  min-width: 1440px;
+
+  .dialog-group .el-dialog__body {
+    height: 65px;
+  }
 
   // 顶部
   &-top {
@@ -517,6 +521,8 @@ $live-bc: #3d3938;
     padding: 24px 32px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
+    border-bottom: 1px solid #ccc;
+    box-shadow: 0 1px 1px #ccc;
 
     .live-title {
       display: flex;
@@ -531,37 +537,17 @@ $live-bc: #3d3938;
         padding: 7px 12px;
       }
     }
-
-    .live-course-name {
-      font-size: 14px;
-      color: #737373;
-      line-height: 30px;
-    }
-
-    .live-teacher {
-      margin-top: 12px;
-
-      .svg-icon {
-        margin-right: 8px;
-      }
-
-      &-name {
-        margin-right: 60px;
-      }
-    }
   }
 
   // 主容器
   &-container {
     display: flex;
-    justify-content: left;
 
     &-left {
-      width: 832px;
+      flex: 1;
       background-color: #fff;
       border-radius: 8px;
 
-      // 等待接通
       .loading {
         position: relative;
         width: 100%;
@@ -579,19 +565,19 @@ $live-bc: #3d3938;
             width: 96px;
             height: 96px;
             line-height: 96px;
+            margin-bottom: 24px;
 
-            &--icon {
+            > &--icon {
               font-size: 36px;
             }
           }
 
           .loading-title {
-            margin: 24px;
+            margin-bottom: 24px;
           }
         }
       }
 
-      // 连线
       .student-parent {
         position: relative;
         width: 100%;
@@ -629,26 +615,17 @@ $live-bc: #3d3938;
             height: 96px;
             line-height: 96px;
 
-            &--icon {
+            > &--icon {
               font-size: 36px;
             }
           }
         }
       }
 
-      // 分组讨论
-      .group {
-        width: 100%;
-        height: 468px;
-        position: relative;
-        background-color: $live-bc;
-        overflow: hidden;
-      }
-
       // 画板
       #draw-parent {
-        width: 100%;
-        height: 468px;
+        // width: 100%;
+        height: 520px;
         position: relative;
         background-color: $live-bc;
         overflow: hidden;
@@ -668,6 +645,10 @@ $live-bc: #3d3938;
 
         &-left,
         &-right {
+          .stop-group {
+            color: #fff;
+          }
+
           > .icon-button {
             display: inline-block;
             height: 100%;
@@ -681,12 +662,73 @@ $live-bc: #3d3938;
           }
         }
       }
+    }
+
+    &-right {
+      height: 568px;
+      width: 485px;
+      background-color: #fff;
+
+      .live-teacher-lens {
+        display: flex;
+        position: relative;
+        overflow: hidden;
+
+        #live {
+          width: 272px;
+          height: 152px;
+          background-color: $live-bc;
+        }
+
+        .live-wrapper {
+          display: flex;
+          position: absolute;
+          height: 40px;
+          width: 272px;
+          background-color: #000;
+          opacity: 0.7;
+          color: #fff;
+          line-height: 40px;
+          padding: 0 16px;
+          transition: all 300ms ease-in 0s;
+
+          > div:first-child {
+            flex: 6;
+          }
+
+          &-right {
+            flex: 4;
+            text-align: right;
+
+            .svg-icon {
+              cursor: pointer;
+              margin-right: 18px;
+            }
+          }
+        }
+
+        .live-operate {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          &-icon {
+            display: flex;
+            padding-top: 18px;
+
+            > .svg-icon {
+              margin-left: 24px;
+            }
+          }
+        }
+      }
 
       // 聊天窗口
       &-chat {
-        height: 278px;
+        height: 417px;
         border: 1px solid #ccc;
-        border-bottom-left-radius: 8px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -732,79 +774,58 @@ $live-bc: #3d3938;
         }
       }
     }
+  }
 
-    &-right {
-      padding: 8px;
-      background-color: #2c2c2c;
-      border-end-end-radius: 8px;
-
-      .live-teacher-lens {
-        position: relative;
-        overflow: hidden;
-
-        #live {
-          width: 352px;
-          height: 198px;
-          background-color: $live-bc;
-        }
-
-        .live-wrapper {
-          display: flex;
-          position: absolute;
-          height: 40px;
-          width: 100%;
-          background-color: #000;
-          opacity: 0.7;
-          color: #fff;
-          line-height: 40px;
-          padding: 0 16px;
-          transition: all 300ms ease-in 0s;
-
-          > div:first-child {
-            flex: 6;
-          }
+  // 学员列表
+  .student-list {
+    width: 100%;
+    font-size: 14px;
 
-          > div:last-child {
-            flex: 4;
-            text-align: right;
-          }
-        }
-      }
+    &-title {
+      padding: 24px 16px;
+      background-color: #fff;
+    }
 
-      .student-list {
-        width: 100%;
-        padding: 24px 16px;
-        margin-top: 2px;
-        height: calc(100% - 200px);
-        background-color: #2c2c2c;
-        font-size: 14px;
-        color: #fff;
+    &-container {
+      padding: 16px 20px;
+      background-color: #f2f2f2;
 
-        &-title {
-          margin-bottom: 16px;
-        }
+      ul {
+        display: flex;
+        flex-wrap: wrap;
 
         li {
           display: flex;
-          margin-bottom: 16px;
+          flex-direction: column;
+          align-items: center;
+          width: 120px;
+          height: 112px;
+          background-color: #fff;
+          margin: 0 8px 8px 0;
 
-          .student-list-left {
-            flex: 7;
+          .li-top {
+            width: 100%;
+            background-color: #000;
+            height: 72px;
+            text-align: center;
 
-            .name {
-              vertical-align: super;
-              margin-left: 8px;
+            .el-avatar--icon {
+              margin-top: 16px;
             }
           }
 
-          .student-list-right {
-            flex: 3;
+          .li-bottom {
+            height: 40px;
+            padding: 12px 8px;
 
-            .svg-icon {
-              font-size: 18px;
-              cursor: pointer;
-              margin-top: 7px;
-              margin-right: 8px;
+            &-operate {
+              padding: 0 24px;
+
+              .svg-icon {
+                font-size: 18px;
+                cursor: pointer;
+                margin: 8px 4px 0;
+              }
             }
           }
         }

src/views/live/teacher/group.vue

@@ -368,7 +368,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '~@/styles/mixin.scss';
 $live-bc: #3d3938;
 

src/views/live/teacher/index.vue

@@ -13,13 +13,6 @@
           <el-button @click="setDevice(true)">设置设备</el-button>
         </div>
       </div>
-      <div class="live-course-name">{{ roomInfo.course_name }}</div>
-      <div class="live-teacher">
-        <span class="live-teacher-name">
-          <svg-icon icon-class="person" />{{ roomInfo.teacher_name }}
-        </span>
-        <span><svg-icon icon-class="people" />{{ roomInfo.student_count }}</span>
-      </div>
     </div>
     <!-- 主容器 -->
     <div class="live-container">
@@ -107,7 +100,31 @@
           </div>
           <div class="button-group-right"></div>
         </div>
-        <div class="live-container-left-chat">
+      </div>
+      <!-- 右侧 -->
+      <div class="live-container-right">
+        <div class="live-teacher-lens">
+          <div id="live" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false"></div>
+          <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
+            <div class="live-wrapper-right">
+              <span :style="{ color: netStatusColor }">{{ netStatus }}</span>
+            </div>
+          </div>
+          <div class="live-operate">
+            <div>{{ roomInfo.teacher_name }}</div>
+            <div class="live-operate-icon">
+              <svg-icon
+                :icon-class="hasVideo ? 'camera-on-black' : 'camera-off-black'"
+                @click="playOrPauseVideo"
+              />
+              <svg-icon
+                :icon-class="hasAudio ? 'mike-on-black' : 'mike-off-black'"
+                @click="playOrPauseAudio"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="live-container-right-chat">
           <div class="chat-top">
             <span>聊天</span>
             <label @click="chatBans">
@@ -137,53 +154,38 @@
           </div>
         </div>
       </div>
-      <!-- 右侧 -->
-      <div class="live-container-right">
-        <div
-          class="live-teacher-lens"
-          @mouseover="liveMenuShow = true"
-          @mouseout="liveMenuShow = false"
-        >
-          <div id="live"></div>
-          <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
-            <div>
-              {{ roomInfo.teacher_name }}
-            </div>
-            <div class="live-wrapper-right">
-              <svg-icon
-                :icon-class="hasVideo ? 'camera-on' : 'camera-off'"
-                @click="playOrPauseVideo"
-              />
-              <svg-icon :icon-class="hasAudio ? 'mike-on' : 'mike-off'" @click="playOrPauseAudio" />
-              <span :style="{ color: netStatusColor }">{{ netStatus }}</span>
+    </div>
+
+    <!-- 学员列表 -->
+    <div class="student-list">
+      <div class="student-list-title">
+        <span>学员列表（{{ student_list.length }}）</span>
+      </div>
+      <div class="student-list-container">
+        <ul>
+          <li v-for="item in student_list" :key="item.room_user_id">
+            <div class="li-top">
+              <el-avatar icon="el-icon-user" :size="40" :src="item.student_image_url" />
             </div>
-          </div>
-        </div>
-        <div class="student-list">
-          <div class="student-list-title">学生列表</div>
-          <ul>
-            <li v-for="item in student_list" :key="item.room_user_id">
-              <div class="student-list-left">
-                <el-avatar icon="el-icon-user" size="small" :src="item.student_image_url" />
-                <span class="name">{{ item.student_name }}</span>
-              </div>
-              <div class="student-list-right">
+            <div class="li-bottom">
+              <div class="name">{{ item.student_name }}</div>
+              <div class="li-bottom-operate">
                 <svg-icon
                   v-if="item.connection_mode === 1 && item.connection_status !== 0"
-                  icon-class="hang-up"
+                  icon-class="hang-up-black"
                   @click="handsDown(item.room_user_id)"
                 />
                 <svg-icon v-else icon-class="video" @click="invite(item, 1)" />
                 <svg-icon
                   v-if="item.connection_mode === 2 && item.connection_status !== 0"
-                  icon-class="hang-up"
+                  icon-class="hang-up-black"
                   @click="handsDown(item.room_user_id)"
                 />
                 <svg-icon v-else icon-class="voice" @click="invite(item, 2)" />
               </div>
-            </li>
-          </ul>
-        </div>
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
 
@@ -356,7 +358,7 @@ export default {
     },
     // 聊天列表滚动
     chatList() {
-      common.chatRoll(this);
+      common.chatRoll(this, false);
     }
   },
   created() {
@@ -779,14 +781,16 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '~@/styles/mixin.scss';
 $live-bc: #3d3938;
 
 .live {
-  @include container;
   @include dialog;
 
+  margin-bottom: 24px;
+  min-width: 1440px;
+
   .dialog-group .el-dialog__body {
     height: 65px;
   }
@@ -797,6 +801,8 @@ $live-bc: #3d3938;
     padding: 24px 32px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
+    border-bottom: 1px solid #ccc;
+    box-shadow: 0 1px 1px #ccc;
 
     .live-title {
       display: flex;
@@ -811,33 +817,14 @@ $live-bc: #3d3938;
         padding: 7px 12px;
       }
     }
-
-    .live-course-name {
-      font-size: 14px;
-      color: #737373;
-      line-height: 30px;
-    }
-
-    .live-teacher {
-      margin-top: 12px;
-
-      .svg-icon {
-        margin-right: 8px;
-      }
-
-      &-name {
-        margin-right: 60px;
-      }
-    }
   }
 
   // 主容器
   &-container {
     display: flex;
-    justify-content: left;
 
     &-left {
-      width: 832px;
+      flex: 1;
       background-color: #fff;
       border-radius: 8px;
 
@@ -915,9 +902,10 @@ $live-bc: #3d3938;
         }
       }
 
+      // 画板
       #draw-parent {
-        width: 100%;
-        height: 468px;
+        // width: 100%;
+        height: 520px;
         position: relative;
         background-color: $live-bc;
         overflow: hidden;
@@ -1031,12 +1019,74 @@ $live-bc: #3d3938;
           }
         }
       }
+    }
+
+    &-right {
+      height: 568px;
+      width: 485px;
+      background-color: #fff;
+
+      .live-teacher-lens {
+        display: flex;
+        position: relative;
+        overflow: hidden;
+
+        #live {
+          width: 272px;
+          height: 152px;
+          background-color: $live-bc;
+        }
+
+        .live-wrapper {
+          display: flex;
+          position: absolute;
+          height: 40px;
+          width: 272px;
+          background-color: #000;
+          opacity: 0.7;
+          color: #fff;
+          line-height: 40px;
+          padding: 0 16px;
+          transition: all 300ms ease-in 0s;
+
+          > div:first-child {
+            flex: 6;
+          }
+
+          &-right {
+            flex: 4;
+            text-align: right;
+
+            .svg-icon {
+              cursor: pointer;
+              margin-right: 18px;
+            }
+          }
+        }
+
+        .live-operate {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          &-icon {
+            display: flex;
+            padding-top: 18px;
+
+            > .svg-icon {
+              cursor: pointer;
+              margin-left: 24px;
+            }
+          }
+        }
+      }
 
       // 聊天窗口
       &-chat {
-        height: 278px;
+        height: 417px;
         border: 1px solid #ccc;
-        border-bottom-left-radius: 8px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -1082,91 +1132,60 @@ $live-bc: #3d3938;
         }
       }
     }
+  }
 
-    &-right {
-      height: 794px;
-      padding: 8px;
-      background-color: #2c2c2c;
-      border-end-end-radius: 8px;
-
-      .live-teacher-lens {
-        position: relative;
-        overflow: hidden;
-
-        #live {
-          width: 352px;
-          height: 198px;
-          background-color: $live-bc;
-        }
-
-        .live-wrapper {
-          display: flex;
-          position: absolute;
-          height: 40px;
-          width: 100%;
-          background-color: #000;
-          opacity: 0.7;
-          color: #fff;
-          line-height: 40px;
-          padding: 0 16px;
-          transition: all 300ms ease-in 0s;
-
-          > div:first-child {
-            flex: 6;
-          }
-
-          &-right {
-            flex: 4;
-            text-align: right;
+  // 学员列表
+  .student-list {
+    width: 100%;
+    font-size: 14px;
 
-            .svg-icon {
-              cursor: pointer;
-              margin-right: 18px;
-            }
-          }
-        }
-      }
-
-      // 学员列表
-      .student-list {
-        width: 100%;
-        padding: 24px 16px;
-        margin-top: 2px;
-        height: calc(100% - 200px);
-        background-color: #2c2c2c;
-        font-size: 14px;
-        color: #fff;
+    &-title {
+      padding: 24px 16px;
+      background-color: #fff;
+    }
 
-        &-title {
-          margin-bottom: 16px;
-        }
+    &-container {
+      padding: 16px 20px;
+      background-color: #f2f2f2;
 
-        ul {
-          height: calc(100% - 18px);
-          overflow: auto;
-        }
+      ul {
+        display: flex;
+        flex-wrap: wrap;
 
         li {
           display: flex;
-          margin-bottom: 16px;
+          flex-direction: column;
+          align-items: center;
+          width: 120px;
+          height: 144px;
+          background-color: #fff;
+          margin: 0 8px 8px 0;
 
-          .student-list-left {
-            flex: 8;
+          .li-top {
+            flex: 1;
+            width: 100%;
+            background-color: #000;
+            min-height: 72px;
+            text-align: center;
 
-            .name {
-              vertical-align: super;
-              margin-left: 8px;
+            .el-avatar--icon {
+              margin-top: 16px;
             }
           }
 
-          .student-list-right {
-            flex: 2;
+          .li-bottom {
+            flex: 1;
+            min-height: 72px;
+            padding: 16px 8px;
 
-            .svg-icon {
-              font-size: 18px;
-              cursor: pointer;
-              margin-top: 7px;
-              margin-right: 8px;
+            &-operate {
+              padding: 0 24px;
+
+              .svg-icon {
+                font-size: 18px;
+                cursor: pointer;
+                margin: 8px 4px 0;
+              }
             }
           }
         }