开始上课

1

src/components/layout/index.module.less

@@ -340,8 +340,8 @@
 }
 
 .toolboxImg {
-  width: 66px;
-  height: 62px;
+  width: 83px;
+  height: 83px;
   position: absolute;
   right: 32px;
   bottom: 84px;
@@ -350,19 +350,19 @@
 }
 
 .isDragIng {
-  width: 66px;
-  height: 62px;
+  width: 83px;
+  height: 83px;
 }
 
-.toolClassImg {
-  width: 66px;
-  height: 62px;
-  position: absolute;
-  right: 32px;
-  bottom: 160px;
-  cursor: pointer;
-  z-index: 1000;
-}
+// .toolClassImg {
+//   width: 100px;
+//   height: 100px;
+//   // position: absolute;
+//   // right: 32px;
+//   // bottom: 160px;
+//   // cursor: pointer;
+//   // z-index: 1000;
+// }
 
 :global {
   .moveable-control-box {
@@ -375,7 +375,7 @@
 }
 
 .booxToolWrap {
-  width: 286px;
+  // width: 286px;
   height: 95px;
   background: #ffffff;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
@@ -387,11 +387,13 @@
   justify-content: space-between;
 
   .booxToolItem {
+    margin: 0 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 12px;
     cursor: pointer;
+    text-align: center;
 
     &:hover {
       opacity: 0.8;

src/components/layout/index.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
     const showModalTone = ref(false);
     const showModalTime = ref(false);
     const showBoxConent = ref(false);
-    const dialog = useDialog()
+    const dialog = useDialog();
     const boxBoundaryInfo = reactive({
       isBoundary: true,
       isBoundaryType: 'right' as any,
@@ -318,15 +318,17 @@ export default defineComponent({
     };
     onMounted(() => {
       initMoveable();
-      initMoveableClass();
+      // initMoveableClass();
       const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
-      const classEl = document.getElementById(`moveNPopover2`) as HTMLDivElement;
-      initBoxRectInfo(subdEl,boxBoundaryInfo);
-      initBoxRectInfo(classEl,classBoundaryInfo);
-      initBoundaryWrap(subdEl,boxBoundaryInfo)
-      initBoundaryWrap(classEl,classBoundaryInfo)
+      // const classEl = document.getElementById(
+      //   `moveNPopover2`
+      // ) as HTMLDivElement;
+      initBoxRectInfo(subdEl, boxBoundaryInfo);
+      // initBoxRectInfo(classEl, classBoundaryInfo);
+      initBoundaryWrap(subdEl, boxBoundaryInfo);
+      // initBoundaryWrap(classEl, classBoundaryInfo);
     });
-    const initBoundaryWrap = (target:any,wrapInfo:any)=>{
+    const initBoundaryWrap = (target: any, wrapInfo: any) => {
       target.addEventListener('mouseenter', () => {
         if (wrapInfo.isBoundary) {
           // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
@@ -372,11 +374,10 @@ export default defineComponent({
       //     }
       //   })
 
-
       // });
 
       actionEnd(target, 'right');
-    }
+    };
     const startShowModal = (val: 'setTimeIcon' | 'beatIcon' | 'toneIcon') => {
       if (val == 'setTimeIcon') {
         showModalTime.value = true;
@@ -427,7 +428,7 @@ export default defineComponent({
       }
     };
 
-    const initBoxRectInfo = (target:any,wrapInfo:any) => {
+    const initBoxRectInfo = (target: any, wrapInfo: any) => {
       // const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
       // console.log(subdEl, "subdEl", "drag");
       const subdElStyle = getComputedStyle(target, null);
@@ -476,7 +477,7 @@ export default defineComponent({
             {/* </div> */}
           </div>
         </div>
-        <img
+        {/* <img
           src={toolStartClass}
           id="moveNPopover2"
           style={{
@@ -492,7 +493,7 @@ export default defineComponent({
             isDragIng.value ? styles.isDragIng : ''
           ]}
           alt=""
-        />
+        /> */}
         <NPopover
           raw
           trigger="click"
@@ -538,6 +539,38 @@ export default defineComponent({
               <img src={setTimeIcon} alt="" />
               计时器
             </div>
+            <div   class={styles.booxToolItem} onClick={()=>{
+              showClass.value = true
+            }}  style={{
+                  display: [
+                    '/',
+                    '/home',
+                    '/classList',
+                    '/prepare-lessons'
+                  ].includes(route.path)
+                    ? 'none'
+                    : 'block'
+                }}>
+              <img
+                src={toolStartClass}
+
+                style={{
+                  display: [
+                    '/',
+                    '/home',
+                    '/classList',
+                    '/prepare-lessons'
+                  ].includes(route.path)
+                    ? 'none'
+                    : 'block'
+                }}
+                class={[
+                  styles.toolClassImg,
+                ]}
+                alt=""
+              />
+              开始上课
+            </div>
           </div>
         </NPopover>
 

src/components/timerMeter/components/countdown.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, nextTick, onMounted,computed } from 'vue';
+import { defineComponent, ref, watch, nextTick, onMounted,computed,onUnmounted } from 'vue';
 import styles from '../index.module.less';
 import { NTabs, NTabPane, NSpace, NButton, NImage, NInput, NInputNumber } from 'naive-ui';
 import { useRoute } from 'vue-router';
@@ -155,6 +155,9 @@ export default defineComponent({
       })
 
     })
+    onUnmounted(()=>{
+      soundVIdeo.pause()
+    })
    const addSecondTimer = (num:number)=>{
 
 

src/views/attend-class/index.module.less

@@ -436,8 +436,8 @@
 
 
 .toolboxImg {
-  width: 66px;
-  height: 62px;
+  width: 83px;
+  height: 83px;
   position: absolute;
   right: 16px;
   bottom: 164px;
@@ -446,13 +446,13 @@
 }
 
 .isDragIng {
-  width: 66px;
-  height: 62px;
+  width: 83px;
+  height: 83px;
 }
 
 .toolClassImg {
-  width: 66px;
-  height: 62px;
+  width: 83px;
+  height: 83px;
   position: absolute;
   right: 32px;
   bottom: 160px;
@@ -471,7 +471,7 @@
 }
 
 .booxToolWrap {
-  width: 286px;
+  // width: 286px;
   height: 95px;
   background: #ffffff;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
@@ -484,6 +484,7 @@
   overflow: hidden;
 
   .booxToolItem {
+    margin: 0 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -586,4 +587,4 @@
       }
     }
   }
-}
+}