样式修改

src/views/intention-questionnaire/index.module.less

@@ -95,8 +95,13 @@
 .hideContent {
   opacity: 0;
 }
-.videoBox{
+.videoBoxCon{
+  padding: 4px;
+  background: linear-gradient( 135deg, #53C4FF 0%, #429BFF 100%);
+  border-radius: 12px;
   margin-top: 10px;
+}
+.videoBox{
   width: 100%;
   position: relative;
   padding-top: 56.25%;
@@ -109,9 +114,7 @@
   right: 0;
   overflow: hidden;
   --plyr-color-main: #FF8057;
-  padding: 4px;
-  background: linear-gradient( 135deg, #53C4FF 0%, #429BFF 100%);
-  border-radius: 12px;
+  // padding: 4px;
   box-sizing: content-box;
   .coverImg {
     width: 100%;

src/views/intention-questionnaire/index.tsx

@@ -72,20 +72,20 @@ export default defineComponent({
     onMounted(async () => {
       forms.meetingType = route.query.type || forms.meetingType;
       forms.code = route.query.code || forms.code;
-      nextTick(() => {
-        const videoRef: any = document.querySelector('#register-video')
-        const videoRef2: any = document.querySelector('#register-video2')
-        if(videoRef) {
-          const rect = videoRef?.getBoundingClientRect()
-          console.log(rect)
-          videoRef.style.height = rect.width / 16 * 9 + 'px'
-        }
-        if(videoRef2) {
-          const rect = videoRef2?.getBoundingClientRect()
-          console.log(rect)
-          videoRef2.style.height = rect.width / 16 * 9 + 'px'
-        }
-      })
+      // nextTick(() => {
+      //   const videoRef: any = document.querySelector('#register-video')
+      //   const videoRef2: any = document.querySelector('#register-video2')
+      //   if(videoRef) {
+      //     const rect = videoRef?.getBoundingClientRect()
+      //     console.log(rect)
+      //     videoRef.style.height = rect.width / 16 * 9 + 'px'
+      //   }
+      //   if(videoRef2) {
+      //     const rect = videoRef2?.getBoundingClientRect()
+      //     console.log(rect)
+      //     videoRef2.style.height = rect.width / 16 * 9 + 'px'
+      //   }
+      // })
       try {
         // 判断是否获取微信code码
         if (!forms.code && browser().weixin) return;
@@ -189,15 +189,17 @@ export default defineComponent({
           <div class={styles.contentBody} v-html={forms.contentA}></div>
           <div class={styles.contentBody}>
             <div class={styles.cbTitle}>一、什么是音乐（器乐）课堂数字化转型<span>（详见视频介绍）</span></div>
-            <div class={styles.videoBox}>
-              <div class={[styles['video-content']]}>
-                <video
-                  id="register-video"
-                  class={styles['video']}
-                  src={forms.introductionVideo}
-                  playsinline={true}
-                  poster={forms.coverImg}
-                  preload="auto"></video>
+            <div class={styles.videoBoxCon}>
+              <div class={styles.videoBox}>
+                <div class={[styles['video-content']]}>
+                  <video
+                    id="register-video"
+                    class={styles['video']}
+                    src={forms.introductionVideo}
+                    playsinline={true}
+                    poster={forms.coverImg}
+                    preload="auto"></video>
+                </div>
               </div>
             </div>
           </div>
@@ -205,15 +207,17 @@ export default defineComponent({
           <div class={styles.contentBody} v-html={forms.contentC}></div>
           <div class={styles.contentBody}>
             <div class={styles.cbTitle}>四、什么是器乐数字 Ai<span>（详见视频介绍）</span></div>
-            <div class={styles.videoBox}>
-              <div class={[styles['video-content']]}>
-                <video
-                  id="register-video2"
-                  class={styles['video']}
-                  src={forms.introductionVideo2}
-                  playsinline={true}
-                  poster={forms.coverImg2}
-                  preload="auto"></video>
+            <div class={styles.videoBoxCon}>
+              <div class={styles.videoBox}>
+                <div class={[styles['video-content']]}>
+                  <video
+                    id="register-video2"
+                    class={styles['video']}
+                    src={forms.introductionVideo2}
+                    playsinline={true}
+                    poster={forms.coverImg2}
+                    preload="auto"></video>
+                </div>
               </div>
             </div>
           </div>