样式修改

src/views/fill-questionnaire/index.tsx

@@ -37,7 +37,7 @@ export default defineComponent({
   name: 'fill-questionnaire',
   setup() {
     const router = useRouter();
-    const route = useRoute();  
+    const route = useRoute();
 
     const classList: any = [];
     for (let i = 1; i <= 40; i++) {
@@ -97,7 +97,7 @@ export default defineComponent({
       '7': '七年级',
       '8': '八年级',
       '9': '九年级'
-    } as any;   
+    } as any;
     const getGradeList = (gradeYear?: string, instrumentCode?: string) => {
       let tempList: any = [];
       const five = [
@@ -189,7 +189,7 @@ export default defineComponent({
       classPopupIndex: [] as any, // 班级下拉索引
       areaList: [] as any,
       showPicker: false,
-      gradeAndClass: [gradeList, classList], 
+      gradeAndClass: [gradeList, classList],
       gradeAndClassIndex: [] as any,
       submitLoading: false,
       id: null as any,
@@ -285,7 +285,7 @@ export default defineComponent({
         //
       }
     }
-    
+
     /** 手机号变更时清空验证码信息，用户信息 */
     const phoneChangeEmptyInfo = () => {
 
@@ -532,7 +532,7 @@ export default defineComponent({
       } catch {
         //
       }
-    };    
+    };
 
     onUnmounted(() => {
       window.removeEventListener('pageshow', onPageShow);
@@ -544,7 +544,7 @@ export default defineComponent({
           <div class={styles.formItem}>
             <p>1. 学校</p>
             {
-              forms.areaName || forms.schoolName ? 
+              forms.areaName || forms.schoolName ?
               <div class={[styles.valDone, forms.schoolName && styles.valDone2, forms.schoolStatus && styles.openVal]} onClick={() => forms.schoolStatus = true}>
                 {forms.schoolName && <span class={styles.vdSchool}>{forms.schoolName}</span>}
                 <span class={styles.vdArea}>{forms.areaName}</span>
@@ -570,12 +570,12 @@ export default defineComponent({
             <p>3. 年级班级</p>
             <div class={[styles.valDot, !forms.currentClass && styles.grayText, forms.gradeStatus && styles.openVal]}
              onClick={()=> forms.gradeStatus = true}>{forms.currentClass ? forms.currentGrade+forms.currentClass : '请选择年级班级'}<i></i></div>
-          </div>     
+          </div>
           <div class={styles.formItem}>
             <p>4. 在您了解以上数字化转型事项后，您是否支持学校开展音乐（器乐）课堂数字化转型</p>
             <div class={styles.selectItem}>
               {
-                forms.supportList.map(item => 
+                forms.supportList.map(item =>
                   <div onClick={() => (forms.supportFlag = item.val)}>
                     <i class={forms.supportFlag === item.val && styles.selectedIcon}></i>
                     <span>{item.title}</span>
@@ -583,22 +583,22 @@ export default defineComponent({
                 )
               }
             </div>
-          </div>    
+          </div>
           <div class={styles.formItem}>
             <p>5. 您是否愿意学生参加数字化转型<span>（注：以学生及家长自愿参加为原则。如愿意参加，家长需自行为学生准备好“器乐数字Ai”应用软件，市面上均有提供，大约300多元一年，学校不涉及任何收费行为。如不参加，学生按原有方式进行器乐课程学习）</span></p>
             <div class={styles.selectItem}>
               {
-                forms.willingList.map(item => 
+                forms.willingList.map(item =>
                   <div onClick={() => switchParticipationFlag(item.val)}>
                     <i class={forms.participationFlag === item.val && styles.selectedIcon}></i>
                     <span>{item.title}</span>
                   </div>
                 )
               }
-            </div>            
-          </div> 
+            </div>
+          </div>
           {
-            forms.participationFlag && 
+            forms.participationFlag &&
             <div class={styles.formItem}>
               <p>联系方式</p>
               <Field
@@ -646,18 +646,18 @@ export default defineComponent({
                       />
                     )
                 }}
-              </Field>                            
-          </div>            
-          }    
-   
+              </Field>
+          </div>
+          }
+
           {
-            forms.participationFlag !== null && 
+            forms.participationFlag !== null &&
             <img class={styles.bottomBtn} src={forms.participationFlag ? signupBtn : submitBtn}
               onClick={() => {
                 if (forms.submitLoading) return;
                 submitFill()
               }}
-            />      
+            />
           }
         </div>
 
@@ -676,7 +676,7 @@ export default defineComponent({
           />
         ) : null}
         {
-          forms.successPopShow && 
+          forms.successPopShow &&
           <div class={styles.successPop}>
             <div class={styles.successBox}>
               <img class={styles.sTitle} src={forms.participationFlag ? signSusIcon : subSusIcon} />
@@ -695,11 +695,10 @@ export default defineComponent({
           round
           class={'popupBottomSearch'}>
           <Area
-            visibleOptionNum={9}
             optionHeight={46}
             areaList={forms.areaList}
-            onCancel={() => { 
-              forms.showPicker = false 
+            onCancel={() => {
+              forms.showPicker = false
               // if (!forms.areaName) {
               //   forms.schoolStatus = false
               // }
@@ -716,7 +715,7 @@ export default defineComponent({
               forms.showPicker = false;
               // if (!forms.areaName) {
               //   forms.schoolStatus = false
-              // }              
+              // }
               forms.schoolAreaId = null;
               forms.schoolName = '';
               forms.gradeNumText = '';
@@ -747,7 +746,7 @@ export default defineComponent({
           {forms.schoolPopupShow && (
             <div>
               <Picker
-              
+
                 showToolbar
                 v-model={forms.schoolPopupIndex}
                 columns={forms.schoolAreaList}
@@ -812,7 +811,7 @@ export default defineComponent({
                 forms.currentGrade = val.selectedOptions[0].text;
                 forms.currentClass = val.selectedOptions[1].text;
                 forms.gradeStatus = false;
-                
+
               }}
             />
           )}

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

@@ -95,10 +95,19 @@
 .hideContent {
   opacity: 0;
 }
-
-.video-content {
+.videoBox{
   margin-top: 10px;
-  min-height: 170px;
+  width: 100%;
+  position: relative;
+  padding-top: 56.25%;
+}
+.video-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
   --plyr-color-main: #FF8057;
   padding: 4px;
   background: linear-gradient( 135deg, #53C4FF 0%, #429BFF 100%);
@@ -208,4 +217,4 @@
     left: 50%;
     transform: translateX(-50%);
   }
-}
+}

src/views/intention-questionnaire/index.tsx

@@ -189,30 +189,34 @@ 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['video-content']]}>
-              <video
-                id="register-video"
-                class={styles['video']}
-                src={forms.introductionVideo}
-                playsinline={true}
-                poster={forms.coverImg}
-                preload="auto"></video>
-            </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>
+            </div>
           </div>
           <div class={styles.contentBody} v-html={forms.contentB}></div>
           <div class={styles.contentBody} v-html={forms.contentC}></div>
           <div class={styles.contentBody}>
-            <div class={styles.cbTitle}>四、什么是器乐数字 Ai<span>（详见视频介绍）</span></div>          
-            <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 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>
+            </div>
+          </div>
           <div class={styles.contentBody} v-html={forms.contentD}></div>
         </div>