update 新版直播的画板

src/styles/element-ui.scss

@@ -45,3 +45,11 @@
     color: #444;
   }
 }
+
+.el-popover {
+  background-color: #fff;
+
+  &[x-placement^='bottom'] .popper__arrow::after {
+    border-bottom-color: #fff !important;
+  }
+}

src/views/new_live/common/GroupList.vue

@@ -5,7 +5,7 @@
       :style="{
         flexWrap: isTowLine ? 'wrap' : 'nowrap',
         flex: isTowLine ? 1 : '',
-        'justify-content': isTowLine ? 'center' : ''
+        'justify-content': isTowLine || gList.length > 1 ? 'center' : ''
       }"
     >
       <div
@@ -25,7 +25,7 @@
             <span class="group-enter" @click="$emit('enterGroup', group_id)">进入</span>
           </div>
         </div>
-        <div class="student-list" :style="{ height: isTowLine ? 'calc(100vh - 890px)' : 'calc(100vh - 454px)' }">
+        <div class="student-list" :style="{ height: isTowLine ? 'calc((100vh - 552px) / 2)' : 'calc(100vh - 454px)' }">
           <div
             v-for="{ student_image_url, student_id, student_name } in student_list"
             :key="student_id"
@@ -36,7 +36,30 @@
               <span>{{ student_name }}</span>
             </div>
             <div class="student-item-right">
-              <svg-icon icon-class="live-mobile-grouping" />
+              <el-popover
+                :disabled="showAdjustGroup"
+                popper-class="student-item-operation"
+                trigger="click"
+                title="移动到..."
+                placement="bottom"
+                @hide="handlePopperHide"
+              >
+                <div class="adjust-group">
+                  <el-select v-model="adjustGroup">
+                    <el-option
+                      v-for="{ group_id: gId, group_name } in adjustGroupList"
+                      :key="gId"
+                      :label="group_name"
+                      :value="gId"
+                    />
+                  </el-select>
+                  <div class="operation-button">
+                    <el-button class="button-cancel" @click="adjustGroupCancel">取消</el-button>
+                    <el-button class="button-confirm">确定</el-button>
+                  </div>
+                </div>
+                <svg-icon slot="reference" icon-class="live-mobile-grouping" />
+              </el-popover>
             </div>
           </div>
         </div>
@@ -62,7 +85,7 @@ export default {
 </script>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 
 const props = defineProps({
   groupList: {
@@ -95,7 +118,7 @@ let isTowLine = computed(() => {
 
 let gList = computed(() => {
   const col = Math.floor((window.innerHeight - 192 - 204 - 68 - 4) / 44);
-  const col_2 = Math.floor((window.innerHeight - 192 - 204 - 68 - 8 - 100) / 44);
+  const col_2 = Math.floor((window.innerHeight - 192 - 204 - 112 - 24 - 8) / 44);
   const row = Math.floor((window.innerWidth - 116) / 342);
 
   let groupNum = props.groupList.length;
@@ -121,13 +144,27 @@ let gList = computed(() => {
 watch(gList, (newVal) => {
   if (curPage.value > newVal.length) curPage.value = newVal.length - 1;
 });
+
+let adjustGroup = ref('');
+let adjustGroupList = computed(() => {
+  return props.groupList.map(({ group_id }, i) => {
+    return { group_id, group_name: `分组${i + 1}` };
+  });
+});
+let showAdjustGroup = ref(false);
+function adjustGroupCancel() {
+  // showAdjustGroup.value = true;
+}
+function handlePopperHide() {
+  // showAdjustGroup.value = false;
+}
 </script>
 
 <style lang="scss" scoped>
 .group-list {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  height: 100%;
   padding: 102px 58px 32px;
   overflow: hidden;
 
@@ -220,7 +257,6 @@ watch(gList, (newVal) => {
     column-gap: 4px;
     align-items: center;
     justify-content: center;
-    padding-bottom: 32px;
 
     .circle-item {
       width: 8px;
@@ -236,3 +272,36 @@ watch(gList, (newVal) => {
   }
 }
 </style>
+
+<style lang="scss">
+.student-item-operation {
+  padding: 24px;
+
+  .adjust-group {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+
+    .operation-button {
+      display: flex;
+      justify-content: flex-end;
+
+      .button-cancel {
+        background-color: #f5f5f5;
+        border-color: #f5f5f5;
+      }
+
+      .button-confirm {
+        color: #fff;
+        background-color: #3fa1fb;
+        border-color: #3fa1fb;
+      }
+    }
+  }
+
+  .el-popover__title {
+    font-weight: 600;
+    color: #333;
+  }
+}
+</style>

src/views/new_live/common/PersonnelList.vue

@@ -237,7 +237,6 @@ let personList = computed(() => {
   width: 108px;
   min-width: 108px;
   padding: 4px;
-  background-color: #fff;
 
   .operation {
     color: #000;
@@ -260,9 +259,5 @@ let personList = computed(() => {
       }
     }
   }
-
-  &.el-popover[x-placement^='bottom'] .popper__arrow::after {
-    border-bottom-color: #fff;
-  }
 }
 </style>

src/views/new_live/teacher/group.vue

@@ -130,6 +130,7 @@ let group_list = ref([]); // 小组成员列表
 function getGroupInfo() {
   GetGroupInfo_Teacher({ task_id }).then(({ live_room_sys_user_id: liveId, group_list: gList }) => {
     group_list.value = gList;
+
     live_room_sys_user_id.value = liveId;
   });
 }
@@ -206,6 +207,7 @@ onBeforeUnmount(() => {
   flex-direction: column;
 
   .group-main {
+    display: flex;
     flex: 1;
     height: calc(100vh - 192px);
     min-height: calc(100vh - 192px);