|
|
@@ -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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
