修改样式

src/views/attend-class/component/audio.module.less

@@ -37,22 +37,26 @@
   }
 }
 
+.sectionAnimate {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(126px);
+  transition: all .2s;
+}
+
 .controls {
   position: absolute;
-  // height: 126px;
   bottom: 126px;
   left: 0;
   right: 0;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(26px);
+  // backdrop-filter: blur(26px);
   height: 86px;
   padding: 10px 40px 0 !important;
-  transition: all 0.2s;
-  transition-delay: .4s;
+  transition: all 0.301s;
   display: flex;
   align-items: center;
-  transition: all .5s;
 
   .time {
     display: flex;
@@ -132,10 +136,3 @@
     }
   }
 }
-
-.sectionAnimate {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(100%);
-  transition: all .2s;
-}

src/views/attend-class/component/video.module.less

@@ -2,21 +2,26 @@
   width: 100%;
   height: 100%;
 
+  .sectionAnimate {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(126px);
+    transition: all .2s;
+  }
 
   .controls {
     position: absolute;
-    bottom: 0;
+    bottom: 126px;
     left: 0;
     right: 0;
     width: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(26px);
-    height: 150px;
-    padding: 0 250px 0 40px !important;
-    transition: all 0.5s;
+    background-color: rgba(0, 0, 0, 0.7);
+    // backdrop-filter: blur(26px);
+    height: 86px;
+    padding: 10px 40px 0 !important;
     display: flex;
     align-items: center;
-    transition: all .5s;
+    transition: all 0.301s;
 
     .time {
       display: flex;
@@ -60,8 +65,8 @@
 
     .actionBtn {
       display: flex;
-      width: 82px;
-      height: 82px;
+      width: 60px;
+      height: 60px;
       padding: 4px 0;
       background: transparent;
 
@@ -73,8 +78,8 @@
 
 
     .iconReplay {
-      width: 43px;
-      height: 42px;
+      width: 40px;
+      height: 39px;
       background-color: transparent;
 
       &>img {
@@ -97,12 +102,7 @@
     }
   }
 
-  .sectionAnimate {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(100%);
-    transition: all .5s;
-  }
+
 }
 
 
@@ -254,4 +254,4 @@
 //       }
 //     }
 //   }
-// }
+// }

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

@@ -348,6 +348,7 @@
   padding: 0 40px;
   height: 126px;
   background-color: rgba(0, 0, 0, 0.7);
+  pointer-events: none;
 
   .switchSpace {
     gap: 0 48px !important;
@@ -359,6 +360,7 @@
     align-items: center;
     flex-direction: column;
     cursor: pointer;
+    pointer-events: auto;
 
     &.btnsDisabled {
       opacity: 0.7;