修改样式

src/components/card-preview/video-modal/index.module.less

@@ -77,6 +77,7 @@
 
 
     .actionBtnSpeed {
+      position: relative;
       width: 32px;
       height: 32px;
       background-color: transparent;
@@ -141,13 +142,13 @@
 .sliderPopup {
   position: absolute;
   z-index: 9999;
-  left: 130px;
-  bottom: 82px;
+  left: -13px;
+  bottom: 35px;
   display: flex;
   align-items: center;
   flex-direction: column;
   height: 252px;
-  width: 59Px;
+  width: 59px;
   padding: 12Px 0 15Px;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI4AAAJcCAMAAAAYSmw3AAAAaVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnbPKNAAAAI3RSTlOzAAUJiqaplqF6V0c4nSevpJN+GAZtX1EQGpqDPTQVc2QhqyTybJ0AAAKuSURBVHja7NRJVsJQAAXRRxMg9BwgGWX/2xT0KCKII5M/uHcFNaqMntm25+mm2uVf7KrN9NxuR8885ozX9Sw9mNXr8Z85p2WV3lTL0+uc1SK9Wqxe5HTz9G7e/ZbTZBDN05xJnYHUk8ec4yGDORx/5hz3GdD+eJ8zOWRQh8ldTp2B1d9zmgyuueV0KUD3lTNPAeafOasUYfWRc1qkCIvTe84yhVhec8ZVClGNLznrFGM9yvAHvKkvObMUYzbKNgXZpk1B2pxTkHOmKcg0mxRkk2ImeFVll4IUFQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAG3twIAAAAAAA5P/aCKqqqqqqqqqqqqqqqtJ+nSQ3CgVRFH2XjwCjHnWoCTXe/yJrUlEljCz7R9riD/Ks4E7yRaRzzjnnnHPOOeecc845zZWQuUZKyEhTJWSqXAnJtVFCNtopITvNlJCZKJSMAvGmZLwhJkrGBJElM4SjDEGtRNQgCJWSUAUQMFYSxoAASiWgBBCQxnFN/uWw1eC2/M+h0cAa7nNCqUGVoZPDaqEBLVZ0c9iXGky552MOodFAmkA/B64axBUe5jA56OUOE+6IjvFCL7UY0yG6Ql3oZYo68DwH1qfmXS/w3pzWfCQeyGb1Ja8K/ZKiyi/1LOMB8UTWFzcH4+wBnhCRsmNEDbFErPW3e3ZEE9FCrm+p6THkWHu29BlyjD1XIthyCEt9YUMEaw7tFz0XIthzaMvnz3YUew7tQZ86ZsSx53Ce6hP5mqcsOfE9eSCePYdVpQeWhhqEwX6hnrLFQFjcej2HFgthchupY3rGRNjcCt2pVtgIo1lxV7PHSFjtl/orP2Ml7E7HuTRvTtiJH9G2/AiRlD84lRqqt/0KYQAAAABJRU5ErkJggg==') no-repeat top center;
   background-size: contain;
@@ -174,13 +175,13 @@
 
   .sliderPoint {
     background: #FFFFFF;
-    box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
+    box-shadow: 0 2px 4px 0px rgba(102, 102, 102, 0.77);
     border-radius: 14px;
     font-size: 14Px;
     font-weight: 500;
     height: 22Px;
     color: #198CFE;
-    min-width: 40Px;
+    min-width: 40px;
     text-align: center;
     vertical-align: text-bottom;
 

src/components/card-preview/video-modal/index.tsx

@@ -199,6 +199,65 @@ export default defineComponent({
                   videoFroms.speedControl = !videoFroms.speedControl;
                 }}>
                 <img src={iconSpeed} />
+
+                <div
+                  style={{
+                    display: videoFroms.speedControl ? 'block' : 'none'
+                  }}>
+                  <div
+                    class={styles.sliderPopup}
+                    onClick={(e: Event) => {
+                      e.stopPropagation();
+                    }}>
+                    <i
+                      class={styles.iconAdd}
+                      onClick={() => {
+                        if (videoFroms.defaultSpeed >= 1.5) {
+                          return;
+                        }
+
+                        if (videoItem.value) {
+                          videoFroms.defaultSpeed =
+                            (videoFroms.defaultSpeed * 10 + 1) / 10;
+                          videoItem.value.playbackRate(videoFroms.defaultSpeed);
+                        }
+                      }}></i>
+                    <NSlider
+                      value={videoFroms.defaultSpeed}
+                      step={0.1}
+                      max={1.5}
+                      min={0.5}
+                      vertical
+                      tooltip={false}
+                      onUpdate:value={(val: number) => {
+                        videoFroms.defaultSpeed = val;
+                        if (videoItem.value) {
+                          videoItem.value.playbackRate(videoFroms.defaultSpeed);
+                        }
+                      }}>
+                      {{
+                        thumb: () => (
+                          <div class={styles.sliderPoint}>
+                            {videoFroms.defaultSpeed}
+                            <span>x</span>
+                          </div>
+                        )
+                      }}
+                    </NSlider>
+                    <i
+                      class={[styles.iconCut]}
+                      onClick={() => {
+                        if (videoFroms.defaultSpeed <= 0.5) {
+                          return;
+                        }
+                        if (videoItem.value) {
+                          videoFroms.defaultSpeed =
+                            (videoFroms.defaultSpeed * 10 - 1) / 10;
+                          videoItem.value.playbackRate(videoFroms.defaultSpeed);
+                        }
+                      }}></i>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -241,65 +300,6 @@ export default defineComponent({
             </div>
           </div>
         </div>
-
-        <div
-          style={{
-            display: videoFroms.speedControl ? 'block' : 'none'
-          }}>
-          <div
-            class={styles.sliderPopup}
-            onClick={(e: Event) => {
-              e.stopPropagation();
-            }}>
-            <i
-              class={styles.iconAdd}
-              onClick={() => {
-                if (videoFroms.defaultSpeed >= 1.5) {
-                  return;
-                }
-
-                if (videoItem.value) {
-                  videoFroms.defaultSpeed =
-                    (videoFroms.defaultSpeed * 10 + 1) / 10;
-                  videoItem.value.playbackRate(videoFroms.defaultSpeed);
-                }
-              }}></i>
-            <NSlider
-              value={videoFroms.defaultSpeed}
-              step={0.1}
-              max={1.5}
-              min={0.5}
-              vertical
-              tooltip={false}
-              onUpdate:value={(val: number) => {
-                videoFroms.defaultSpeed = val;
-                if (videoItem.value) {
-                  videoItem.value.playbackRate(videoFroms.defaultSpeed);
-                }
-              }}>
-              {{
-                thumb: () => (
-                  <div class={styles.sliderPoint}>
-                    {videoFroms.defaultSpeed}
-                    <span>x</span>
-                  </div>
-                )
-              }}
-            </NSlider>
-            <i
-              class={[styles.iconCut]}
-              onClick={() => {
-                if (videoFroms.defaultSpeed <= 0.5) {
-                  return;
-                }
-                if (videoItem.value) {
-                  videoFroms.defaultSpeed =
-                    (videoFroms.defaultSpeed * 10 - 1) / 10;
-                  videoItem.value.playbackRate(videoFroms.defaultSpeed);
-                }
-              }}></i>
-          </div>
-        </div>
       </div>
     );
   }

src/views/attend-class/component/video-play.tsx

@@ -316,6 +316,66 @@ export default defineComponent({
 
               <div class={styles.actionBtnSpeed} id={speedBtnId}>
                 <img src={iconSpeed} />
+
+                <div
+                  style={{
+                    display: videoFroms.speedControl ? 'block' : 'none'
+                  }}>
+                  <div
+                    class={styles.sliderPopup}
+                    onClick={(e: Event) => {
+                      e.stopPropagation();
+                    }}>
+                    <i
+                      class={styles.iconAdd}
+                      onClick={() => {
+                        if (videoFroms.defaultSpeed >= 1.5) {
+                          return;
+                        }
+
+                        if (videoItem.value) {
+                          videoFroms.defaultSpeed =
+                            (videoFroms.defaultSpeed * 10 + 1) / 10;
+                          videoItem.value.playbackRate(videoFroms.defaultSpeed);
+                        }
+                      }}></i>
+                    <NSlider
+                      value={videoFroms.defaultSpeed}
+                      step={0.1}
+                      max={1.5}
+                      min={0.5}
+                      vertical
+                      tooltip={false}
+                      onUpdate:value={(val: number) => {
+                        videoFroms.defaultSpeed = val;
+
+                        if (videoItem.value) {
+                          videoItem.value.playbackRate(videoFroms.defaultSpeed);
+                        }
+                      }}>
+                      {{
+                        thumb: () => (
+                          <div class={styles.sliderPoint}>
+                            {videoFroms.defaultSpeed}
+                            <span>x</span>
+                          </div>
+                        )
+                      }}
+                    </NSlider>
+                    <i
+                      class={[styles.iconCut]}
+                      onClick={() => {
+                        if (videoFroms.defaultSpeed <= 0.5) {
+                          return;
+                        }
+                        if (videoItem.value) {
+                          videoFroms.defaultSpeed =
+                            (videoFroms.defaultSpeed * 10 - 1) / 10;
+                          videoItem.value.playbackRate(videoFroms.defaultSpeed);
+                        }
+                      }}></i>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -353,66 +413,6 @@ export default defineComponent({
             </div>
           </div>
         </div>
-
-        <div
-          style={{
-            display: videoFroms.speedControl ? 'block' : 'none'
-          }}>
-          <div
-            class={styles.sliderPopup}
-            onClick={(e: Event) => {
-              e.stopPropagation();
-            }}>
-            <i
-              class={styles.iconAdd}
-              onClick={() => {
-                if (videoFroms.defaultSpeed >= 1.5) {
-                  return;
-                }
-
-                if (videoItem.value) {
-                  videoFroms.defaultSpeed =
-                    (videoFroms.defaultSpeed * 10 + 1) / 10;
-                  videoItem.value.playbackRate(videoFroms.defaultSpeed);
-                }
-              }}></i>
-            <NSlider
-              value={videoFroms.defaultSpeed}
-              step={0.1}
-              max={1.5}
-              min={0.5}
-              vertical
-              tooltip={false}
-              onUpdate:value={(val: number) => {
-                videoFroms.defaultSpeed = val;
-
-                if (videoItem.value) {
-                  videoItem.value.playbackRate(videoFroms.defaultSpeed);
-                }
-              }}>
-              {{
-                thumb: () => (
-                  <div class={styles.sliderPoint}>
-                    {videoFroms.defaultSpeed}
-                    <span>x</span>
-                  </div>
-                )
-              }}
-            </NSlider>
-            <i
-              class={[styles.iconCut]}
-              onClick={() => {
-                if (videoFroms.defaultSpeed <= 0.5) {
-                  return;
-                }
-                if (videoItem.value) {
-                  videoFroms.defaultSpeed =
-                    (videoFroms.defaultSpeed * 10 - 1) / 10;
-                  videoItem.value.playbackRate(videoFroms.defaultSpeed);
-                }
-              }}></i>
-          </div>
-        </div>
       </div>
     );
   }

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

@@ -94,6 +94,7 @@
     }
 
     .actionBtnSpeed {
+      position: relative;
       width: 40px;
       height: 40px;
       background-color: transparent;
@@ -140,13 +141,13 @@
 .sliderPopup {
   position: absolute;
   z-index: 9999;
-  left: 164px;
-  bottom: 90px;
+  left: -10px;
+  bottom: 55px;
   display: flex;
   align-items: center;
   flex-direction: column;
   height: 252px;
-  width: 59Px;
+  width: 59px;
   padding: 12Px 0 15Px;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI4AAAJcCAMAAAAYSmw3AAAAaVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnbPKNAAAAI3RSTlOzAAUJiqaplqF6V0c4nSevpJN+GAZtX1EQGpqDPTQVc2QhqyTybJ0AAAKuSURBVHja7NRJVsJQAAXRRxMg9BwgGWX/2xT0KCKII5M/uHcFNaqMntm25+mm2uVf7KrN9NxuR8885ozX9Sw9mNXr8Z85p2WV3lTL0+uc1SK9Wqxe5HTz9G7e/ZbTZBDN05xJnYHUk8ec4yGDORx/5hz3GdD+eJ8zOWRQh8ldTp2B1d9zmgyuueV0KUD3lTNPAeafOasUYfWRc1qkCIvTe84yhVhec8ZVClGNLznrFGM9yvAHvKkvObMUYzbKNgXZpk1B2pxTkHOmKcg0mxRkk2ImeFVll4IUFQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAG3twIAAAAAAA5P/aCKqqqqqqqqqqqqqqqtJ+nSQ3CgVRFH2XjwCjHnWoCTXe/yJrUlEljCz7R9riD/Ks4E7yRaRzzjnnnHPOOeecc845zZWQuUZKyEhTJWSqXAnJtVFCNtopITvNlJCZKJSMAvGmZLwhJkrGBJElM4SjDEGtRNQgCJWSUAUQMFYSxoAASiWgBBCQxnFN/uWw1eC2/M+h0cAa7nNCqUGVoZPDaqEBLVZ0c9iXGky552MOodFAmkA/B64axBUe5jA56OUOE+6IjvFCL7UY0yG6Ql3oZYo68DwH1qfmXS/w3pzWfCQeyGb1Ja8K/ZKiyi/1LOMB8UTWFzcH4+wBnhCRsmNEDbFErPW3e3ZEE9FCrm+p6THkWHu29BlyjD1XIthyCEt9YUMEaw7tFz0XIthzaMvnz3YUew7tQZ86ZsSx53Ce6hP5mqcsOfE9eSCePYdVpQeWhhqEwX6hnrLFQFjcej2HFgthchupY3rGRNjcCt2pVtgIo1lxV7PHSFjtl/orP2Ml7E7HuTRvTtiJH9G2/AiRlD84lRqqt/0KYQAAAABJRU5ErkJggg==') no-repeat top center;
   background-size: contain;
@@ -179,7 +180,7 @@
     font-weight: 500;
     height: 22Px;
     color: #198CFE;
-    min-width: 40Px;
+    min-width: 40px;
     text-align: center;
     vertical-align: text-bottom;