update 新版直播的画板

src/views/new_live/student/index.vue

@@ -361,6 +361,11 @@ function toggle(type) {
       width: 100%;
       height: 100%;
       overflow: hidden;
+
+      #draw-parent {
+        height: 100%;
+        margin: auto;
+      }
     }
   }
 
@@ -419,10 +424,3 @@ function toggle(type) {
   }
 }
 </style>
-
-<style lang="scss">
-#draw-parent {
-  height: 100%;
-  margin: auto;
-}
-</style>

src/views/new_live/teacher/index.vue

@@ -32,7 +32,7 @@
         <!-- 画板 -->
         <div class="draw" :style="{ left: isShowDraw ? '0' : `-${innerWidth}px` }">
           <div id="draw-parent">
-            <div v-show="isDrawSetting" class="draw-setting">
+            <div class="draw-setting">
               <span class="brush-shape" @click="changeDraw('type', 2)">
                 <svg-icon icon-class="brush-shape" />
               </span>
@@ -262,7 +262,8 @@ function changeWhiteboard() {
   isShowDraw.value = !isShowDraw.value;
   sendPublishMessage({ type: 'changeWhiteboard', isShow: isShowDraw.value });
 }
-const { changeDraw, curColor, drawColorList, drawThicknessList, isDrawSetting } = useWhiteboard();
+
+const { changeDraw, curColor, drawColorList, drawThicknessList } = useWhiteboard();
 // 聊天
 let cPage = ref();
 const { chatList, chatShow, sendMsg, toggle: chatToggle } = useChat(cPage);
@@ -506,6 +507,89 @@ function closeLiveRoom() {
       width: 100%;
       height: 100%;
       overflow: hidden;
+
+      #draw-parent {
+        height: 100%;
+        margin: auto;
+
+        .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;
+          }
+        }
+      }
     }
   }
 
@@ -619,9 +703,4 @@ function closeLiveRoom() {
     }
   }
 }
-
-#draw-parent {
-  height: 100%;
-  margin: auto;
-}
 </style>

src/views/new_live/teacher/live.js

@@ -646,7 +646,6 @@ export function useGroup(task_id, router) {
 }
 
 export function useWhiteboard() {
-  let isDrawSetting = ref(false);
   let curColor = ref('#343434');
   let drawColorList = ['#FF4747', '#343434', '#628EFF', '#FFCA0E'];
   let drawThicknessList = ['1', '3', '5'];
@@ -658,11 +657,9 @@ export function useWhiteboard() {
     } else {
       drawChange(action, value);
     }
-    isDrawSetting.value = false;
   }
 
   return {
-    isDrawSetting,
     curColor,
     drawColorList,
     drawThicknessList,