GCLS_Page_Learn/src/views/live/teacher/index.vue

<template>
  <div class="live">
    <!--顶部-->
    <div class="live-top">
      <div class="live-title">
        <div
          class="live-title-name nowrap-ellipsis"
          :title="`${roomInfo.course_name} - ${roomInfo.cs_item_name} - ${roomInfo.task_name}`"
        >
          {{ roomInfo.course_name }} - {{ roomInfo.cs_item_name }} - {{ roomInfo.task_name }}
        </div>
        <div class="live-button-group">
          <el-button v-if="!liveStat" @click="startLive">
            {{ $t('Key418') }}
          </el-button>
          <el-button v-if="liveStat" icon="el-icon-switch-button" @click="closeLiveRoom">
            {{ $t('Key419') }}
          </el-button>
          <el-button v-if="liveStat" @click="reconnection">
            {{ $t('Key405') }}
          </el-button>
          <el-button @click="setDevice(true)">
            {{ $t('Key398') }}
          </el-button>
        </div>
      </div>
    </div>
    <!-- 主容器 -->
    <div class="live-container">
      <!-- 左侧 -->
      <div class="live-container-left">
        <div v-show="callLoading" class="loading">
          <div class="loading-wrapper">
            <el-avatar icon="el-icon-user" :src="connectStudent.student_image_url" />
            <p class="loading-title">
              {{ $t('Key420') }}【{{ connectStudent.student_name }}】，{{ $t('Key421') }}...
            </p>
            <div>
              <el-button type="danger" circle @click="handsDown">
                <svg-icon icon-class="hang-up" />
              </el-button>
            </div>
          </div>
        </div>
        <div v-show="connect" class="student-parent">
          <div v-show="roomInfo.video_mode === 1 || remoteStreamType === 1" id="student" />
          <template v-if="remoteStreamType !== 1">
            <template v-if="roomInfo.video_mode === 1">
              <el-button type="danger" @click="handsDown">
                <svg-icon icon-class="hang-up" /> {{ $t('Key422') }}
              </el-button>
            </template>
            <template v-else>
              <div class="student-audio">
                <el-avatar icon="el-icon-user" :src="connectStudent.student_image_url" />
                <span class="connect-name">{{ connectStudent.student_name }}</span>
                <el-button type="danger" circle @click="handsDown">
                  <svg-icon icon-class="hang-up" />
                </el-button>
              </div>
            </template>
          </template>
        </div>
        <div v-show="isDraw" id="draw-parent">
          <!-- 画笔设置 -->
          <div v-show="isDrawSetting" class="draw-setting">
            <span class="brush-shape" @click="drawChange('type', 2)">
              <svg-icon icon-class="brush-shape" />
            </span>
            <!-- 画笔颜色 -->
            <span
              v-for="item in drawColorList"
              :key="item"
              :class="['draw-color', item === curColor ? 'current' : '']"
              :style="{ 'background-color': item }"
              @click="drawChange('color', item)"
            />
            <span
              v-for="item in drawThicknessList"
              :key="item"
              class="draw-thickness"
              @click="drawChange('thickNess', item)"
            >
              <span :style="{ width: item * 2 + 'px', height: item * 2 + 'px' }" />
            </span>
            <span class="eraser" @click="drawChange('type', 9)">
              <svg-icon icon-class="back" />
            </span>
            <span class="eraser" @click="drawChange('type', 10)">
              <svg-icon icon-class="eraser" />
            </span>
            <span class="brush-clear" @click="drawChange('type', 0)">
              <svg-icon icon-class="clear" />
            </span>
          </div>
        </div>
        <div class="button-group">
          <div class="button-group-left">
            <span class="icon-button" @click="publishShareStream">
              <svg-icon :icon-class="remoteStreamType === 1 ? 'close' : 'share'" />
            </span>
            <span class="icon-button" @click="showDrawSetting">
              <svg-icon icon-class="draw" />
            </span>
            <span class="icon-button" @click="startGroup">
              <svg-icon icon-class="group" />
            </span>
            <span class="icon-button" @click="dialogVisible = true">
              <svg-icon icon-class="push" />
            </span>
          </div>
          <div class="button-group-right" />
        </div>
      </div>
      <!-- 右侧 -->
      <div class="live-container-right">
        <div class="live-teacher-lens">
          <div id="live" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false" />
          <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>{{ $t('Key409') }}</span>
            <span class="chat-bans" @click="chatBans">
              <input type="checkbox" :checked="isAllowChat" class="allow-chat">
              <span>{{ $t('Key423') }}</span>
            </span>
          </div>
          <div class="chat-window">
            <ul ref="chat" class="chat-window-ul">
              <li v-for="(item, i) in chatList" :key="i">
                <div class="msg-normal">
                  <span>{{ item.username }}: </span>
                  <span>{{ item.msg }}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="chat-speak">
            <el-input v-model="msg" :placeholder="$t('Key410')" maxlength="400" @keydown.enter.native="sendMsg">
              <el-button slot="append" @click="sendMsg">
                {{ $t('Key302') }}
              </el-button>
            </el-input>
          </div>
        </div>
      </div>
    </div>

    <!-- 推送资料列表 -->
    <div class="material-list">
      <el-tag
        v-for="item in material_list"
        :key="item.material_id"
        color="#fff"
        @click="showMaterial(item.material_id, item.material_type)"
      >
        <svg-icon :icon-class="item.material_type === 'COURSEWARE' ? 'courseware' : 'word'" /> {{ item.material_name }}
      </el-tag>
    </div>

    <!-- 学员列表 -->
    <div class="student-list">
      <div class="student-list-title">
        <span>{{ $t('Key296') }}（{{ student_list.length }} / {{ roomInfo.student_count }}）</span>
      </div>
      <div class="student-list-container">
        <ul>
          <li v-for="item in student_list" :key="item.room_user_id">
            <div class="li-top">
              <svg-icon
                v-if="item.is_mobile === 'true'"
                :icon-class="item.is_exit_page === 'true' ? 'mobile-close' : 'mobile'"
              />
              <el-avatar icon="el-icon-user" :size="40" :src="item.student_image_url" />
            </div>
            <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-black"
                  @click="handsDown(item.room_user_id)"
                />
                <svg-icon
                  v-else
                  icon-class="video"
                  @click="invite(item, 1, item.is_mobile === 'true', item.is_exit_page === 'true')"
                />
                <svg-icon
                  v-if="item.connection_mode === 2 && item.connection_status !== 0"
                  icon-class="hang-up-black"
                  @click="handsDown(item.room_user_id)"
                />
                <svg-icon
                  v-else
                  icon-class="voice"
                  @click="invite(item, 2, item.is_mobile === 'true', item.is_exit_page === 'true')"
                />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 推送资料 -->
    <select-material
      :dialog-visible="dialogVisible"
      :task-id="task_id"
      @dialogClose="dialogClose"
      @dialogPush="dialogPush"
    />

    <!-- 教师查看当前完成列表 -->
    <complete-list
      :task-id="task_id"
      :material-id="materialId"
      :material-type="materialType"
      :dialog-visible-complete="dialogVisibleComplete"
      @dialogCompleteClose="dialogCompleteClose"
    />

    <select-device
      :dialog-visible-device="dialogVisibleDevice"
      :device="device"
      @dialogDeviceClose="dialogDeviceClose"
    />

    <el-dialog
      :title="$t('Key424')"
      top="30vh"
      width="300px"
      class="dialog-group"
      :visible="dialogVisibleGroup"
      :close-on-click-modal="false"
    >
      <el-select v-model="group_count">
        <el-option v-for="i in groupNumList" :key="i" :label="i" :value="i" />
      </el-select>

      <span slot="footer">
        <el-button size="small" @click="closeGroup">{{ $t('Key83') }}</el-button>
        <el-button size="small" type="primary" @click="dialogGroup">{{ $t('Key94') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetLiveRoomData_DRTD,
  CloseLiveRoom,
  GetLiveRoomInfo,
  StudentExitLiveRoom,
  StartGroup,
  GetGroupStatus,
  DealStudentConnection,
  GetStudentInfo_Connection
} from '@/api/live';
import { app } from '@/store/mutation-types';
import SelectMaterial from '@/components/live/SelectMaterial.vue';
import CompleteList from './CompleteList.vue';
import SelectDevice from '../SelectDevice.vue';
import * as common from './live';

export default {
  components: {
    SelectMaterial,
    CompleteList,
    SelectDevice
  },
  data() {
    return {
      task_id: this.$route.query.task_id,
      // 连麦
      connect: false,
      // 连线学员信息
      connectStudent: {},
      // 等待接通
      callLoading: false,
      dialogVisible: false,
      // 学员完成
      dialogVisibleComplete: false,
      // 定时器
      timer: null,
      remoteStreamType: -1,
      rtc: null,
      roomData: {
        desc: '直播间标题',
        name: '姓名',
        user: {
          id: '',
          name: '',
          role: 'talker',
          rommid: ''
        },
        max_users: 1,
        allow_chat: true,
        allow_audio: true,
        allow_speak: true
      },
      roomInfo: {
        room_id: '',
        video_mode: 1,
        task_name: '',
        cs_item_name: '',
        course_name: '',
        teacher_name: '',
        student_count: 0,
        student_connection_info: {}
      },
      loadedNumber: 0,
      speakData: {},
      roomContext: {},
      msg: '',
      chatList: [],
      isDrawSetting: false,
      curColor: '#343434',
      drawColorList: ['#FF4747', '#343434', '#628EFF', '#FFCA0E'],
      drawThicknessList: ['1', '3', '5'],
      // 直播间学员列表
      student_list: [],
      // 直播状态
      liveStat: false,
      liveMenuShow: false,
      // 分组讨论
      groupNumList: [],
      group_count: 1,
      // 网络整体情况
      netStatus: 0,
      dialogVisibleGroup: false,
      dialogVisibleDevice: false,
      isRecreate: false,
      device: {
        video: [],
        audio: []
      },
      // 本地视频流画面、声音
      hasVideo: false,
      hasAudio: false,
      material_list: [],
      materialId: '',
      materialType: ''
    };
  },
  computed: {
    // 画板模式
    isDraw() {
      return !this.connect && !this.callLoading;
    },
    isAllowChat() {
      return !this.roomData.allow_chat;
    },
    netStatusColor() {
      if (this.netStatus >= 1000) {
        return '#f00';
      }
      if (this.netStatus >= 500) {
        return '#d6e91a';
      }
      if (this.netStatus >= 200) {
        return '#6aee4c';
      }
      return '#38d514';
    },
    connectUid() {
      return 'room_user_id' in this.connectStudent ? this.connectStudent.room_user_id : '';
    }
  },
  watch: {
    loadedNumber(newVal) {
      if (newVal === 5) {
        common.createScript('https://class.csslcloud.net/static/SDK/docSDK/drawSdk_3.0.js').onload = () => {
          this.initSDK();
          this.$loading().close();
        };
      }
    },
    // 聊天列表滚动
    chatList() {
      common.chatRoll(this, false);
    }
  },
  created() {
    GetGroupStatus({ task_id: this.task_id }).then(({ is_enable_group }) => {
      if (is_enable_group === 'true') {
        this.$router.push({
          path: '/live/teacher/group',
          query: {
            task_id: this.task_id
          }
        });
      } else {
        this.$loading({
          text: this.$i18n.t('Key425'),
          background: '#fff'
        });
        common.downloadWebSDK(this);
        this.getLiveRoomData_DRTD();
        this.getLiveRoomInfo();
      }
    });

    this.updateWordPack({
      word_key_list: [
        'Key418',
        'Key419',
        'Key405',
        'Key398',
        'Key420',
        'Key421',
        'Key422',
        'Key409',
        'Key423',
        'Key410',
        'Key302',
        'Key296',
        'Key424',
        'Key94',
        'Key83',
        'Key425',
        'Key426',
        'Key427',
        'Key428',
        'Key429',
        'Key430',
        'Key431',
        'Key432',
        'Key433',
        'Key434',
        'Key435',
        'Key436',
        'Key437',
        'Key438',
        'Key399',
        'Key401',
        'Key441'
      ]
    });
  },
  mounted() {
    document.addEventListener(
      'click',
      e => {
        let target = e.target;
        let isHasClass = false;
        do {
          if (target === null) {
            break;
          }
          if (target.className === 'draw-setting') {
            isHasClass = true;
          }
          target = target.parentElement;
        } while (!isHasClass);

        if (!isHasClass) {
          this.isDrawSetting = false;
        }
      },
      true
    );
    this.getLiveRoomData_DRTDPolling();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    common.closeVideo('main');
  },
  methods: {
    initSDK() {
      const { live_room_sys_user_id, room_id, session_id } = this.$route.query;
      this.rtc = common.initSDK({
        userid: live_room_sys_user_id,
        roomid: room_id,
        sessionid: session_id
      });
      common.initListener(this); // 注册监听事件
      this.getLiveStat();
    },

    getLiveRoomInfo() {
      GetLiveRoomInfo({ task_id: this.task_id }).then(
        ({
          room_id,
          video_mode,
          task_name,
          cs_item_name,
          course_name,
          teacher_name,
          student_count,
          student_connection_info
        }) => {
          this.roomInfo = {
            room_id,
            video_mode,
            task_name,
            cs_item_name,
            course_name,
            teacher_name,
            student_count,
            student_connection_info
          };
          this.connectStudent = student_connection_info;
          if (student_connection_info.connection_status === 1) {
            this.callLoading = true;
          }
          if (student_connection_info.connection_status === 2) {
            this.connect = true;
          }
        }
      );
    },

    closeLiveRoom() {
      CloseLiveRoom({ task_id: this.task_id }).then(() => {
        this.$router.push('/');
        this.$message.success(this.$i18n.t('Key426'));
      });
    },

    startLive() {
      common.startLive();
    },

    getLiveStat() {
      common.getLiveStat({
        success: data => {
          this.liveStat = data.started;
        },
        fail: str => {
          this.liveStat = false;
          console.log('直播关闭状态或查询直播失败', str);
        }
      });
    },

    // 推送桌面共享
    publishShareStream() {
      if (this.remoteStreamType === 1) {
        common.unPubShareStream();
      } else {
        common.publishShareStream();
      }
    },

    reconnection() {
      common.reconnection();
    },

    // 老师邀请学生上麦
    invite(student, mode, is_mobile, is_exit_page) {
      if (is_mobile && is_exit_page) {
        this.$message.warning(this.$i18n.t('Key427'));
        return;
      }
      if (this.connect || this.callLoading) {
        this.$message.warning(this.$i18n.t('Key428'));
        return;
      }
      this.callLoading = true;
      this.connectStudent = student;
      GetLiveRoomInfo({ task_id: this.task_id })
        .then(({ video_mode }) => {
          let uid = student.room_user_id;
          this.roomInfo.video_mode = mode;
          if (video_mode === mode) {
            this.inviteStudent(uid, student, mode);
          } else {
            common.roomUpdate({
              video_mode: mode,
              roomUpdateSuccess: data => {
                console.log(data, '连麦音视频模式更新请求成功！');
                this.inviteStudent(uid, student, mode);
              },
              roomUpdateFailed: () => {
                this.callLoading = false;
                this.$message.error(this.$i18n.t('Key429'));
              }
            });
          }
        })
        .catch(() => {
          this.callLoading = false;
        });
    },

    inviteStudent(uid, connectStudent, mode) {
      common.invite({
        uid,
        success: str => {
          console.log('邀请上麦成功', str);
          this.dealStudentConnection(uid, 1, mode);
          common.sendPublishMessage({
            type: 'inviteImage',
            connectStudent
          });
        },
        fail: data => {
          console.log('邀请上麦失败：', data);
          this.callLoading = false;
          this.$message.error(`${this.$i18n.t('Key430')}：${data.errorMsg}`);
        }
      });
    },

    dealStudentConnection(room_user_id, deal_mode, connection_mode) {
      DealStudentConnection({
        task_id: this.task_id,
        room_user_id,
        deal_mode,
        connection_mode
      }).then(() => {
        this.getLiveRoomData_DRTD();
      });
    },

    handsDown(uid) {
      let connectUid = typeof uid === 'string' ? uid : this.connectUid;
      if (connectUid.length === 0) {
        GetStudentInfo_Connection({ task_id: this.task_id }).then(({ room_user_id }) =>
          this.handsDown_Live(room_user_id)
        );
      } else {
        this.handsDown_Live(connectUid);
      }
    },

    // 下麦
    handsDown_Live(uid) {
      common.handsDown({
        uid,
        success: () => {
          if (this.callLoading) {
            common.sendPublishMessage({
              type: 'handsDown-load',
              uid
            });
          }

          this.dealStudentConnection(uid, 0, this.connectStudent.connection_mode);

          this.callLoading = false;
          this.connect = false;
          common.updateMcResult('', 0);
          this.$message.success(this.$i18n.t('Key431'));
          this.connectStudent = {};
        },
        fail: data => {
          this.callLoading = false;
          this.connect = false;
          console.log('下麦失败', data);
          this.$message.warning(`${this.$i18n.t('Key432')}：${data.errorMsg}`);
        }
      });
    },

    // 本地流视频开启、关闭
    playOrPauseVideo() {
      if (this.device.video.length === 0) {
        return this.$message.warning(this.$i18n.t('Key399'));
      }

      if (this.hasVideo) {
        common.pauseVideo({
          streamName: 'main',
          success: () => {
            this.$message.success(this.$i18n.t('Key433'));
            this.hasVideo = false;
          },
          fail: str => {
            this.$message.warning(str);
          }
        });
      } else {
        common.playVideo({
          streamName: 'main',
          success: () => {
            this.$message.success(this.$i18n.t('Key434'));
            this.hasVideo = true;
          },
          fail: str => {
            this.$message.warning(str);
          }
        });
      }
    },

    // 本地流音频开启、关闭
    playOrPauseAudio() {
      if (this.device.audio.length === 0) {
        return this.$message.warning(this.$i18n.t('Key401'));
      }

      if (this.hasAudio) {
        common.pauseAudio({
          streamName: 'main',
          success: () => {
            this.$message.success(this.$i18n.t('Key435'));
            this.hasAudio = false;
          },
          fail: str => {
            this.$message.warning(str);
          }
        });
      } else {
        common.playAudio({
          streamName: 'main',
          success: () => {
            this.$message.success(this.$i18n.t('Key436'));
            this.hasAudio = true;
          },
          fail: str => {
            this.$message.warning(str);
          }
        });
      }
    },

    // 发消息
    sendMsg() {
      common.sendMsg(this.msg);
      this.msg = '';
    },

    chatBans() {
      common.roomUpdate({
        allow_chat: !this.roomData.allow_chat,
        roomUpdateSuccess: data => {
          this.roomData.allow_chat = !this.roomData.allow_chat;
          console.log(data, '房间模板配置更新请求成功！');
        },
        roomUpdateFailed(data) {
          console.log(data, '房间模板配置更新请求失败！ 请稍后再试!');
        }
      });
    },

    // 画笔变更
    drawChange(action, value) {
      if (action === 'color') {
        common.drawChange(action, parseInt(Number(value.replace('#', '0x'))));
        this.curColor = value;
      } else {
        common.drawChange(action, value);
      }
      this.isDrawSetting = false;
    },

    // 设置音视频设备
    setDevice(isRecreate) {
      this.isRecreate = isRecreate;
      this.dialogVisibleDevice = true;
    },

    getNetPoint() {
      common.getNetPoint();
    },

    dialogDeviceClose(device) {
      this.$store.commit(`app/${app.SET_DEVICE}`, device);
      this.dialogVisibleDevice = false;
      if (this.isRecreate) {
        common.closeVideoTeacher({
          streamName: 'main',
          success: () => {
            common.createLocalStream(this);
          },
          fail: str => {
            console.log(str);
          }
        });
      } else {
        common.createLocalStream(this);
      }
    },

    showDrawSetting() {
      this.isDrawSetting = !this.isDrawSetting;
    },

    getLiveRoomData_DRTD() {
      GetLiveRoomData_DRTD({ task_id: this.task_id }).then(({ student_list, material_list }) => {
        this.student_list = student_list;
        this.material_list = material_list;
      });
    },

    getLiveRoomData_DRTDPolling() {
      this.timer = setInterval(() => {
        this.getLiveRoomData_DRTD();
      }, 5000);
    },

    studentExitLiveRoom(room_user_id, is_exit_page = true) {
      StudentExitLiveRoom({ task_id: this.task_id, room_user_id, is_exit_page });
    },

    publishStream() {
      common.publishStream('main');
    },

    // 分组讨论
    startGroup() {
      for (let i = 1; i <= this.student_list.length; i++) {
        this.groupNumList.push(i);
      }
      this.dialogVisibleGroup = true;
    },

    showMaterial(id, type) {
      this.materialId = id;
      this.materialType = type;
      this.dialogVisibleComplete = true;
    },

    // 弹出框方法
    dialogGroup() {
      const loading = this.$loading({
        text: this.$i18n.t('Key437')
      });
      // 开始分组讨论
      StartGroup({ task_id: this.task_id, group_count: this.group_count })
        .then(() => {
          this.$message.success(this.$i18n.t('Key438'));
          this.$router.push({
            path: '/live/teacher/group',
            query: {
              task_id: this.task_id
            }
          });
        })
        .finally(() => {
          loading.close();
        });
    },

    closeGroup() {
      this.dialogVisibleGroup = false;
      this.groupNumList = [];
      this.group_count = 1;
    },

    dialogClose() {
      this.dialogVisible = false;
    },

    dialogPush() {
      this.dialogVisible = false;
      this.dialogVisibleComplete = true;
    },

    dialogCompleteClose() {
      this.dialogVisibleComplete = false;
      this.materialId = '';
      this.materialType = '';
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin';

$live-bc: #3d3938;
$draw-h: 520px;

.live {
  @include dialog;

  min-width: 1440px;
  margin-bottom: 24px;

  .dialog-group .el-dialog__body {
    height: 65px;
  }

  // 顶部
  &-top {
    padding: 24px 32px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 1px 1px #ccc;

    .live-title {
      display: flex;
      justify-content: space-between;

      &-name {
        padding-right: 24px;
        font-size: 22px;
      }

      .live-button-group {
        min-width: 270px;

        .el-button {
          padding: 7px 12px;
          border-radius: 4px;
        }
      }
    }
  }

  // 主容器
  &-container {
    display: flex;

    &-left {
      flex: 1;
      background-color: #fff;
      border-radius: 8px;

      .loading {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: $draw-h;
        color: #fff;
        background-color: #646464;

        &-wrapper {
          text-align: center;

          > .el-avatar {
            width: 96px;
            height: 96px;
            margin-bottom: 24px;
            line-height: 96px;

            > &--icon {
              font-size: 36px;
            }
          }

          .loading-title {
            margin-bottom: 24px;
          }
        }
      }

      .student-parent {
        position: relative;
        width: 100%;
        height: $draw-h;

        #student {
          position: relative;
          width: 100%;
          height: $draw-h;
          background-color: $live-bc;
        }

        > .el-button {
          position: absolute;
          bottom: 40px;
          left: calc(50% - 44px);
        }

        .student-audio {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          background-color: #646464;

          .connect-name {
            margin: 24px 0;
            color: #fff;
          }

          > .el-avatar {
            width: 96px;
            height: 96px;
            line-height: 96px;

            > &--icon {
              font-size: 36px;
            }
          }
        }
      }

      // 画板
      #draw-parent {
        position: relative;
        width: 100%;
        height: $draw-h;
        overflow: hidden;
        background-color: $live-bc;

        // 设置屏幕画笔
        .draw-setting {
          position: absolute;
          bottom: 13px;
          left: 22px;
          z-index: 9999;
          height: 40px;
          padding: 6px;
          line-height: 28px;
          background-color: #a0a0a0;
          border-radius: 40px;

          > span {
            display: inline-block;
            margin-right: 10px;
            text-align: center;
          }

          > span.brush-shape {
            width: 28px;
            height: 28px;
            cursor: pointer;
            background-color: #fff;
            border-radius: 50%;
          }

          .draw-color {
            position: relative;
            top: 5px;
            width: 18px;
            height: 18px;
            cursor: pointer;
            border-radius: 50%;
          }

          .current::after {
            position: absolute;
            bottom: -7px;
            left: 7px;
            width: 4px;
            height: 4px;
            content: '';
            background-color: #292929;
            border-radius: 50%;
          }

          .draw-thickness {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            vertical-align: middle;
            cursor: pointer;

            span {
              background-color: #000;
              border-radius: 50%;
            }
          }

          > %brush-clear,
          .brush-clear {
            width: 28px;
            height: 28px;
            margin-right: 0;
            cursor: pointer;
            background-color: #666;
            border-radius: 50%;
          }

          > .eraser {
            @extend %brush-clear;

            margin-right: 12px;
          }
        }
      }

      .button-group {
        display: flex;
        justify-content: space-between;
        height: 48px;
        padding: 0 15px;
        background-color: #4d4d4d;
        border-bottom-left-radius: 5px;

        .svg-icon {
          font-size: 20px;
        }

        &-left {
          .stop-group {
            color: #fff;
          }

          > .icon-button {
            display: inline-block;
            height: 100%;
            padding: 14px 16px;
            cursor: pointer;

            &:active,
            &:hover {
              background-color: #3d3d3d;
            }
          }
        }
      }
    }

    &-right {
      width: 485px;
      height: 568px;
      background-color: #fff;

      .live-teacher-lens {
        position: relative;
        display: flex;
        overflow: hidden;

        #live {
          width: 272px;
          height: 152px;
          background-color: $live-bc;
        }

        .live-wrapper {
          position: absolute;
          display: flex;
          width: 272px;
          height: 40px;
          padding: 0 16px;
          line-height: 40px;
          color: #fff;
          background-color: rgba(0, 0, 0, 70%);
          transition: all 300ms ease-in 0s;

          > div:first-child {
            flex: 6;
          }

          &-right {
            flex: 4;
            text-align: right;

            .svg-icon {
              margin-right: 18px;
              cursor: pointer;
            }
          }
        }

        .live-operate {
          display: flex;
          flex: 1;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          &-icon {
            display: flex;
            padding-top: 18px;

            > .svg-icon {
              margin-left: 24px;
              cursor: pointer;
            }
          }
        }
      }

      // 聊天窗口
      &-chat {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 417px;
        border: 1px solid #ccc;

        .chat-top {
          display: flex;
          justify-content: space-between;
          padding: 15px 15px 10px;
          color: #959595;
          border-bottom: 1px solid #e6e6e6;

          .chat-bans {
            cursor: pointer;
          }

          .allow-chat {
            margin-right: 12px;
          }
        }

        .chat-window {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;

          &-ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: auto;

            .msg-normal {
              padding: 7px 16px;
            }
          }
        }

        .chat-speak {
          padding: 16px;
        }
      }
    }
  }

  .material-list {
    padding: 12px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;

    .el-tag {
      padding: 0 20px;
      margin: 0 0 8px 12px;
      color: $color;
      cursor: pointer;
      border-color: #e5e5e5;

      .svg-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }
  }

  // 学员列表
  .student-list {
    width: 100%;
    font-size: 14px;

    &-title {
      padding: 24px 16px;
      background-color: #fff;
    }

    &-container {
      padding: 16px 20px;
      background-color: #f2f2f2;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 120px;
          height: 144px;
          margin: 0 8px 8px 0;
          background-color: #fff;

          .li-top {
            position: relative;
            flex: 1;
            width: 100%;
            min-height: 72px;
            text-align: center;
            background-color: #000;

            .svg-icon {
              position: absolute;
              top: 10px;
              right: 10px;
            }

            .el-avatar--icon {
              margin-top: 16px;
            }
          }

          .li-bottom {
            flex: 1;
            min-height: 72px;
            padding: 16px 8px;

            &-operate {
              padding: 0 24px;

              .svg-icon {
                margin: 8px 4px 0;
                font-size: 18px;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>