更新样式

src/views/attend-class/index.tsx

@@ -243,8 +243,8 @@ export default defineComponent({
           };
         });
         setTimeout(() => {
-          data.animationState = 'end'
-        }, 500)
+          data.animationState = 'end';
+        }, 500);
       } catch {
         //
       }
@@ -313,7 +313,7 @@ export default defineComponent({
       getDetail();
       getLessonCoursewareDetail();
       if (data.type === 'preview') {
-        rightList.splice(1,1)
+        rightList.splice(1, 1);
       }
     });
 
@@ -493,16 +493,16 @@ export default defineComponent({
 
     // ppt iframe 点击事件
     // const iframeClick = () => {
-		// 	if(document.all) {
-		// 		document.getElementById("iframe-ppt")?.attachEvent("click", () => {
+    // 	if(document.all) {
+    // 		document.getElementById("iframe-ppt")?.attachEvent("click", () => {
     //       activeData.model = !activeData.model
     //     });
-		// 	} else {
-		// 		document.getElementById("iframe-ppt")?.contentWindow?.postMessage({
+    // 	} else {
+    // 		document.getElementById("iframe-ppt")?.contentWindow?.postMessage({
     //       api: 'onAttendToggleMenu'
     //     }, '*');
-		// 	}
-		// }
+    // 	}
+    // }
 
     // 切换播放
     // const togglePlay = (m: any, isPlay: boolean) => {
@@ -578,8 +578,8 @@ export default defineComponent({
     const handleSwipeChange = (index: number) => {
       // 如果是当前正在播放 或者是视频最后一个
       if (popupData.activeIndex == index) return;
-      data.animationState = 'start'
-      data.videoState = 'init'
+      data.animationState = 'start';
+      data.videoState = 'init';
       handleStop();
       clearTimeout(acitveTimer.value);
       activeData.model = true;
@@ -589,7 +589,7 @@ export default defineComponent({
       acitveTimer.value = setTimeout(
         () => {
           const item = data.itemList[index];
-          
+
           if (item) {
             if (item.type == 'MUSIC') {
               activeData.model = true;
@@ -614,7 +614,7 @@ export default defineComponent({
                   item.error = false;
                   //   item.videoEle?.onPlay();
                 }
-                data.animationState = 'end'
+                data.animationState = 'end';
               });
             }
             if (item.type === 'PPT') {
@@ -860,8 +860,8 @@ export default defineComponent({
     const toggleListenerKeyUp = (type: string) => {
       if (type === 'remove') {
         document.body.removeEventListener('keyup', () => {
-          listenerKeyUpState.value = false
-        })
+          listenerKeyUpState.value = false;
+        });
       } else {
         // 监听页面键盘事件 - 上下切换
         document.body.addEventListener('keyup', (e: KeyboardEvent) => {
@@ -876,9 +876,9 @@ export default defineComponent({
             handlePreAndNext('down');
           }
         });
-        listenerKeyUpState.value = true
+        listenerKeyUpState.value = true;
       }
-    }
+    };
 
     // 监听切换到ppt课件时，手动移除键盘监听器
     // watch(() => popupData.activeIndex, () => {
@@ -1098,12 +1098,12 @@ export default defineComponent({
       return false;
     });
     const activeVideoItem = computed(() => {
-      const item = data.itemList[popupData.activeIndex]
+      const item = data.itemList[popupData.activeIndex];
       if (item && item.type && item.type.toLocaleUpperCase() === 'VIDEO') {
-        return item
+        return item;
       }
-      return {}
-    })
+      return {};
+    });
 
     // 右侧菜单栏
     const rightList = reactive([
@@ -1111,43 +1111,43 @@ export default defineComponent({
         name: '结束课程',
         name2: '结束预览',
         icon: rightIconEnd,
-        id: 1,
+        id: 1
       },
       {
         name: '布置作业',
         icon: rightIconArrange,
-        id: 2,
+        id: 2
       },
       {
         name: '批注',
         icon: rightIconPostil,
-        id: 3,
+        id: 3
       },
       {
         name: '白板',
         icon: rightIconWhiteboard,
-        id: 4,
+        id: 4
       },
       {
         name: '节拍器',
         icon: rightIconMetronome,
-        id: 5,
+        id: 5
       },
       {
         name: '调音器',
         icon: rightIconTuner,
-        id: 6,
+        id: 6
       },
       {
         name: '计时器',
         icon: rightIconTimer,
-        id: 7,
+        id: 7
       },
       {
         name: '收起',
         icon: rightIconPackUp,
-        id: 8,
-      },
+        id: 8
+      }
     ]);
 
     // 底部菜单栏
@@ -1155,26 +1155,25 @@ export default defineComponent({
       {
         name: '切换章节',
         icon: bottomIconSwitch,
-        id: 1,
+        id: 1
       },
       {
         name: '资源列表',
         icon: bottomIconResource,
-        id: 2,
+        id: 2
       },
       {
         name: '上一张',
         icon: bottomIconPre,
-        id: 3,
+        id: 3
       },
       {
         name: '下一张',
         icon: bottomIconNext,
-        id: 4,
+        id: 4
       }
     ]);
     const rightColumnShow = ref(true);
- 
 
     // 右边栏操作
     const operateRightBtn = async (id: number) => {
@@ -1201,50 +1200,49 @@ export default defineComponent({
             rows: 99
           });
           if (res.data.rows && res.data.rows.length) {
-            data.modalAttendMessage =
-              '本节课已设置课后作业，是否布置？';
+            data.modalAttendMessage = '本节课已设置课后作业，是否布置？';
           }
-          data.modelAttendStatus = true;          
+          data.modelAttendStatus = true;
           break;
         case 3:
           openStudyTool({
             type: 'pen',
             icon: iconNote,
             name: '批注'
-          })          
+          });
           break;
         case 4:
           openStudyTool({
             type: 'whiteboard',
             icon: iconWhite,
             name: '白板'
-          })          
+          });
           break;
         case 5:
-          startShowModal('beatIcon')
+          startShowModal('beatIcon');
           break;
         case 6:
-          startShowModal('toneIcon')
+          startShowModal('toneIcon');
           break;
         case 7:
-          startShowModal('setTimeIcon')
+          startShowModal('setTimeIcon');
           break;
         case 8:
-          rightColumnShow.value = false
-          break;                                                                  
+          rightColumnShow.value = false;
+          break;
         default:
           break;
       }
-    }
+    };
 
     // 底部悬浮按钮操作
     const operateBottomBtn = (id: number) => {
       switch (id) {
         case 1:
-          popupData.chapterOpen = true
+          popupData.chapterOpen = true;
           break;
         case 2:
-          popupData.open = true
+          popupData.open = true;
           break;
         case 3:
           if (!isUpArrow.value) return;
@@ -1253,11 +1251,11 @@ export default defineComponent({
         case 4:
           if (!isDownArrow.value) return;
           handlePreAndNext('down');
-          break;      
+          break;
         default:
           break;
       }
-    }
+    };
 
     return () => (
       <div id="playContent" class={[styles.playContent, 'wrap']}>
@@ -1288,23 +1286,21 @@ export default defineComponent({
                         }
                       : { opacity: 0, zIndex: -1 }
                   }
-                  class={styles.itemDiv}
-                >
+                  class={styles.itemDiv}>
                   <VideoPlay
-                    ref={(el: any) => data.videoItemRef = el}
+                    ref={(el: any) => (data.videoItemRef = el)}
                     item={activeVideoItem.value}
                     showModel={activeData.model}
                     onClose={setModelOpen}
-
                     onCanplay={() => {
-                      data.videoState = 'play'
+                      data.videoState = 'play';
                     }}
                     onPause={() => {
-                      clearTimeout(activeData.timer)
-                      activeData.model = true
+                      clearTimeout(activeData.timer);
+                      activeData.model = true;
                     }}
                     onEnded={() => {
-                      const _index = popupData.activeIndex + 1
+                      const _index = popupData.activeIndex + 1;
                       if (_index < data.itemList.length) {
                         handleSwipeChange(_index);
                       }
@@ -1362,9 +1358,12 @@ export default defineComponent({
                       }}>
                       {m.type === 'VIDEO' ? (
                         <>
-                          <img src={m.coverImg} onLoad={() => {
-                            m.isprepare = true;
-                          }} />
+                          <img
+                            src={m.coverImg}
+                            onLoad={() => {
+                              m.isprepare = true;
+                            }}
+                          />
                           {/* <VideoPlay
                             ref={(v: any) => (data.videoRefs[mIndex] = v)}
                             item={m}
@@ -1392,12 +1391,12 @@ export default defineComponent({
                             }}
                           /> */}
                           <Transition name="van-fade">
-                            { (
+                            {
                               <div class={styles.loadWrap}>
                                 <Vue3Lottie
                                   animationData={playLoadData}></Vue3Lottie>
                               </div>
-                            )}
+                            }
                           </Transition>
                         </>
                       ) : m.type === 'IMG' ? (
@@ -1430,13 +1429,19 @@ export default defineComponent({
                             }
                           }}
                         />
-                      ) 
-                      // : m.type === 'PPT' ? <div class={styles.iframePpt}>
+                      ) : // : m.type === 'PPT' ? <div class={styles.iframePpt}>
                       //   <div class={styles.pptBox}></div>
                       //   <iframe src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(m.content)}`} width='100%' height='100%' frameborder='1'></iframe>
                       // </div>
-                      : m.type === 'PPT' ? <iframe src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(m.content)}`} width='100%' height='100%' frameborder='1'></iframe>                     
-                      : (
+                      m.type === 'PPT' ? (
+                        <iframe
+                          src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
+                            m.content
+                          )}`}
+                          width="100%"
+                          height="100%"
+                          frameborder="1"></iframe>
+                      ) : (
                         <MusicScore
                           activeModel={activeData.model}
                           activeStatus={popupData.activeIndex === mIndex}
@@ -1602,37 +1607,58 @@ export default defineComponent({
         </div> */}
 
         {/* 右边操作栏 */}
-        <div class={[styles.rightColumn, !rightColumnShow.value ? styles.rightColumnHide : '', studyData.type !== 'init' && (studyData.penShow || studyData.whiteboardShow) ? styles.rightColumnZ : '' ]}>
+        <div
+          class={[
+            styles.rightColumn,
+            !rightColumnShow.value ? styles.rightColumnHide : '',
+            studyData.type !== 'init' &&
+            (studyData.penShow || studyData.whiteboardShow)
+              ? styles.rightColumnZ
+              : ''
+          ]}>
           {rightList.map((item: any, index: number) => (
-              <div 
-                class={[
-                  styles.rightItem,
-                  (item.id === 2 && data.preStudentNum <= 0) ? styles.itemDisabled : ''
-                ]} 
-                onClick={() => operateRightBtn(item.id)}>
-                <img src={item.icon} />
-                <div class={styles.rightTips}>{index === 0 && data.type === 'preview' ? item.name2 : item.name}</div>
+            <div
+              class={[
+                styles.rightItem,
+                item.id === 2 && data.preStudentNum <= 0
+                  ? styles.itemDisabled
+                  : ''
+              ]}
+              onClick={() => operateRightBtn(item.id)}>
+              <img src={item.icon} />
+              <div class={styles.rightTips}>
+                {index === 0 && data.type === 'preview'
+                  ? item.name2
+                  : item.name}
               </div>
-            ))}
-        </div> 
-        {
-          !rightColumnShow.value && <img 
-            class={[styles.rightHideIcon, !rightColumnShow.value ? styles.rightIconShow : '']} 
+            </div>
+          ))}
+        </div>
+        {!rightColumnShow.value && (
+          <img
+            class={[
+              styles.rightHideIcon,
+              !rightColumnShow.value ? styles.rightIconShow : ''
+            ]}
             src={rightHideIcon}
-            onClick={() => rightColumnShow.value = true } />
-        }  
+            onClick={() => (rightColumnShow.value = true)}
+          />
+        )}
         {/* 右下角悬浮按钮 */}
         <div class={styles.bottomColumn}>
           {bottomList.map((item: any, index: number) => (
-              <div 
-                class={[
-                  styles.bottomItem,
-                  ((item.id === 3 && !isUpArrow.value) || (item.id === 4 && !isDownArrow.value)) ? styles.itemDisabled : ''
-                ]} 
-                onClick={() => operateBottomBtn(item.id)}>
-                <img src={item.icon} />
-                <div class={styles.bottomTips}>{item.name}</div>
-              </div>
+            <div
+              class={[
+                styles.bottomItem,
+                (item.id === 3 && !isUpArrow.value) ||
+                (item.id === 4 && !isDownArrow.value)
+                  ? styles.itemDisabled
+                  : ''
+              ]}
+              onClick={() => operateBottomBtn(item.id)}>
+              <img src={item.icon} />
+              <div class={styles.bottomTips}>{item.name}</div>
+            </div>
           ))}
         </div>
 
@@ -1727,7 +1753,7 @@ export default defineComponent({
             {/* <div class={styles.modelAttendContent}>
               {data.modalAttendMessage}
             </div> */}
-            <NSpace class={styles.btnGroupModal}>
+            <NSpace class={styles.btnGroupModal} justify="center">
               <NButton
                 type="default"
                 round