修改样式

src/views/pre-register-active/video.module.less

@@ -34,7 +34,7 @@
 }
 
 .video-content {
-  height: 170px;
+  min-height: 170px;
   --plyr-color-main: #FF8057;
   padding: 4px;
   background: linear-gradient( 135deg, #53C4FF 0%, #429BFF 100%);

src/views/pre-register-active/video.tsx

@@ -1,5 +1,6 @@
 import {
   defineComponent,
+  nextTick,
   onMounted,
   onUnmounted,
   reactive,
@@ -294,7 +295,7 @@ export default defineComponent({
       BigPlayButton.prototype.createEl = function () {
         const el = Button.prototype.createEl.call(this);
         const _html =
-          '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>';
+          '<button><svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="播放/播放" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="椭圆形" stroke="#FFFFFF" stroke-width="1.20385619" fill-opacity="0.3" fill="#000000" stroke-linecap="square" cx="25" cy="25" r="24.4114519"></circle><g id="视频/暂停" transform="translate(17.2619, 13.0952)" fill="#FFFFFF"><path d="M12.1943373,5.31370674 L19.8894148,18.3953385 C20.5636212,19.5414893 20.1810346,21.0171804 19.0348838,21.6913868 C18.6648746,21.9090393 18.2434029,22.0238095 17.8141251,22.0238095 L2.42397011,22.0238095 C1.09422728,22.0238095 0.0162577307,20.94584 0.0162577307,19.6160971 C0.0162577307,19.1868194 0.131027981,18.7653477 0.34868043,18.3953385 L8.04375794,5.31370674 C8.71796432,4.1675559 10.1936554,3.78496932 11.3398063,4.4591757 C11.6926653,4.66673986 11.9867731,4.96084767 12.1943373,5.31370674 Z" id="三角形" transform="translate(10.119, 11.9048) rotate(-270) translate(-10.119, -11.9048)"></path></g></g></svg></button>';
 
         el.appendChild(
           TCPlayer.dom.createEl('div', {
@@ -558,6 +559,14 @@ export default defineComponent({
     };
 
     onMounted(async () => {
+      nextTick(() => {
+        const videoRef: any = document.querySelector('#register-video')
+        if(videoRef) {
+          const rect = videoRef?.getBoundingClientRect()
+          console.log(rect)
+          videoRef.style.height = rect.width / 16 * 9 + 'px'
+        }
+      })
       try {
         const { data } = await request.get(
           '/edu-app/open/studentBrowseRecord/query',
@@ -668,7 +677,7 @@ export default defineComponent({
         <div class={styles.videoContainer}>
           <i class={styles.videoTitle}></i>
           <div class={styles.videoSection}>
-            <div class={styles['video-content']}>
+            <div class={[styles['video-content']]}>
               <video
                 id="register-video"
                 class={styles['video']}