fix

src/views/coursewarePlay/index.module.less

@@ -116,11 +116,7 @@
   transform: translateY(-50%);
   right: 12px;
   z-index: 10;
-  .btnsWrap {
-    background: rgba(51, 51, 51, 0.4);
-    border-radius: 6px;
-    overflow: hidden;
-  }
+  
   .btnsBottom {
     margin-top: 10px;
   }
@@ -177,6 +173,11 @@
     }
   }
 }
+.btnsWrap {
+  background: rgba(51, 51, 51, 0.4);
+  border-radius: 6px;
+  overflow: hidden;
+}
 .popup {
   background: rgba(0, 0, 0, 0.5);
 }

src/views/coursewarePlay/index.tsx

@@ -810,18 +810,22 @@ export default defineComponent({
             {activeData.model && (
               <div class={styles.leftFixedBtns}>
                 {popupData.activeIndex != 0 && (
-                  <div
-                    class={[styles.fullBtn, styles.prePoint]}
-                    onClick={() => handlePreAndNext('up')}
-                  >
-                    <img src={iconUp} />
-                    <span style={{ textAlign: 'center' }}>上一个</span>
+                  <div class={[styles.btnsWrap, styles.prePoint]}>
+                    <div
+                      class={styles.fullBtn}
+                      onClick={() => handlePreAndNext('up')}
+                    >
+                      <img src={iconUp} />
+                      <span style={{ textAlign: 'center' }}>上一个</span>
+                    </div>
                   </div>
                 )}
                 {popupData.activeIndex != data.itemList.length - 1 && (
-                  <div class={[styles.fullBtn]} onClick={() => handlePreAndNext('down')}>
-                    <span style={{ textAlign: 'center' }}>下一个</span>
-                    <img src={iconDown} />
+                  <div class={[styles.btnsWrap, styles.prePoint]}>
+                    <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
+                      <span style={{ textAlign: 'center' }}>下一个</span>
+                      <img src={iconDown} />
+                    </div>
                   </div>
                 )}
               </div>

src/views/coursewarePlay/play.module.less

@@ -88,6 +88,7 @@
   width: 100%;
   height: 100%;
   background-color: #000;
+  transition: all 3s;
   video {
     width: 100%;
     height: 100%;
@@ -280,3 +281,7 @@
     }
   }
 }
+
+.noActive{
+  transform: rotate(-180deg) translate3d(0, 0, -800px);
+}

src/views/coursewarePlay/play.tsx

@@ -518,7 +518,7 @@ export default defineComponent({
               return isRender ? (
                 <div
                   key={'index' + mIndex}
-                  class={[styles.itemDiv]}
+                  class={[styles.itemDiv, popupData.activeIndex == mIndex ? '' : styles.noActive]}
                   style={{ zIndex: popupData.activeIndex == mIndex ? 10 : 1 }}
                   onClick={(e: Event) => {
                     e.stopPropagation()