修改样式

src/views/pre-register-active/compontent-show/active-show.tsx

@@ -1,7 +1,8 @@
 import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import styles from '../index.module.less'
 import styles2 from './show.module.less'
-import signinTips from '../images/signin-tips.png'
+// import signinTips from '../images/signin-tips.png'
+import threeMan from '../images/update/three-man.png'
 import { Button, CellGroup, Field } from 'vant'
 
 export default defineComponent({
@@ -40,6 +41,7 @@ export default defineComponent({
     })
     return () => (
       <div class={[styles['per-register-active'], styles2.actives]}>
+         <img class={styles.imgMan} src={threeMan} />
         <div class={styles.flowPath}>
           <i class={styles.flowPathTitle}></i>
           <div class={styles.flowPathContent} v-html={messageContent.value}>
@@ -71,38 +73,39 @@ export default defineComponent({
         </div>
 
         <div class={styles.signin}>
-          <div class={styles.tips}>
-            <img src={signinTips} class={styles.signinTips} />
-            <p>
-              请先进行<span>签到</span>，再观看<span>家长会视频</span>
-            </p>
-          </div>
+          <i class={styles.signinTitle}></i>
 
           <CellGroup class={styles.cellGroup} border={false}>
             <Field
               label="学生姓名"
+              required
+              border={false}
               labelAlign="top"
               placeholder="请输入学生姓名"
               autocomplete="off"
             />
             <Field
               label="年级"
+              required
+              border={false}
               labelAlign="top"
               placeholder="请选择年级"
-              isLink
+              rightIcon={"arrow-down"}
               readonly
               clickable={false}
             />
             <Field
               label="班级"
+              required
+              border={false}
               labelAlign="top"
               placeholder="请选择班级"
-              isLink
+              rightIcon={"arrow-down"}
               readonly
               clickable={false}
             />
 
-            <Button class={styles.submitBtn} onClick={onSubmit}></Button>
+            <div class={styles.submitBtn} onClick={onSubmit}></div>
           </CellGroup>
         </div>
       </div>

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

@@ -1,22 +1,30 @@
-import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
-import styles from '../video.module.less'
-import styles2 from './show.module.less'
-import { Button } from 'vant'
-import { browser } from '@/helpers/utils'
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from '../video.module.less';
+import styles2 from './show.module.less';
+import { Button } from 'vant';
+import { browser } from '@/helpers/utils';
 // import Plyr from 'plyr'
 // import 'plyr/dist/plyr.css'
-import { useRoute } from 'vue-router'
-import deepClone from '@/helpers/deep-clone'
-import TCPlayer from 'tcplayer.js'
-import 'tcplayer.js/dist/tcplayer.css'
+import { useRoute } from 'vue-router';
+import deepClone from '@/helpers/deep-clone';
+import TCPlayer from 'tcplayer.js';
+import 'tcplayer.js/dist/tcplayer.css';
 
 export default defineComponent({
   name: 'pre-register',
   emits: ['tabChange'],
   setup(props, { emit }) {
-    const route = useRoute()
-    const video = route.query.v ? JSON.parse(route.query.v as any) : []
-    console.log(route.query, 'query')
+    const route = useRoute();
+    const video = route.query.v ? JSON.parse(route.query.v as any) : [];
+    console.log(route.query, 'query');
     const forms = reactive({
       coverImg: route.query.coverImg,
       videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
@@ -25,7 +33,7 @@ export default defineComponent({
       videoDetails: deepClone(video),
       player: null as any,
       currentTime: 0
-    })
+    });
 
     /**
      * 视屏累计时长
@@ -104,89 +112,93 @@ export default defineComponent({
       //   const i = document.getElementById('fullscreen-back')
       //   i && i.remove()
       // })
-      const Button = TCPlayer.getComponent('Button')
-      const BigPlayButton = TCPlayer.getComponent('BigPlayButton')
+      const Button = TCPlayer.getComponent('Button');
+      const BigPlayButton = TCPlayer.getComponent('BigPlayButton');
       BigPlayButton.prototype.createEl = function () {
-        const el = Button.prototype.createEl.call(this)
+        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="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>';
 
         el.appendChild(
           TCPlayer.dom.createEl('div', {
             className: 'vjs-button-icon',
             innerHTML: _html
           })
-        )
-        return el
-      }
+        );
+        return el;
+      };
       forms.player = TCPlayer('register-video', {
         appID: '',
         controls: true,
         plugins: {
           ProgressMarker: true
         }
-      }) // player-container-id 为播放器容器 ID，必须与 html 中一致
+      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
       if (forms.player) {
-        forms.player.src(forms.introductionVideo) // url 播放地址
-        forms.player.poster(forms.coverImg || '')
+        forms.player.src(forms.introductionVideo); // url 播放地址
+        forms.player.poster(forms.coverImg || '');
 
         forms.player.on('loadedmetadata', () => {
-          checkVideoDetails(forms.player.currentTime())
-        })
+          checkVideoDetails(forms.player.currentTime());
+        });
 
         // 如何视频在缓存不会触发
         forms.player.on('timeupdate', (e: any) => {
           // 时间变化时更新每一段的状态
-          console.log(forms.player.currentTime(), 'forms.player.currentTime()', e)
-          checkVideoDetails(forms.player.currentTime())
-        })
+          console.log(
+            forms.player.currentTime(),
+            'forms.player.currentTime()',
+            e
+          );
+          checkVideoDetails(forms.player.currentTime());
+        });
 
         forms.player.on('fullscreenchange', () => {
           if (forms.player.isFullscreen()) {
-            console.log('fullscreen')
-            const i = document.createElement('i')
-            i.id = 'fullscreen-back'
-            i.className = 'van-icon van-icon-arrow-left video-back'
+            console.log('fullscreen');
+            const i = document.createElement('i');
+            i.id = 'fullscreen-back';
+            i.className = 'van-icon van-icon-arrow-left video-back';
             i.addEventListener('click', () => {
-              forms.player.exitFullscreen()
-            })
-            document.getElementsByClassName('video-js')[0].appendChild(i)
+              forms.player.exitFullscreen();
+            });
+            document.getElementsByClassName('video-js')[0].appendChild(i);
           } else {
-            console.log('exitfullscreen')
-            const i = document.getElementById('fullscreen-back')
-            i && i.remove()
+            console.log('exitfullscreen');
+            const i = document.getElementById('fullscreen-back');
+            i && i.remove();
           }
-        })
+        });
       }
-    }
+    };
 
     const checkVideoDetails = (time: number) => {
       forms.videoDetails.forEach((item: any) => {
         if (item.startNode <= time && time <= item.endNode) {
-          forms.id = item.id
+          forms.id = item.id;
         }
-      })
-    }
+      });
+    };
     onMounted(() => {
       nextTick(() => {
-        _init()
-      })
-    })
+        _init();
+      });
+    });
 
     const onSubmit = () => {
       // emit('tabChange', 3)
-    }
+    };
 
-    const messageContent = ref('')
-    const registerDisplay = ref()
+    const messageContent = ref('');
+    const registerDisplay = ref();
 
     const getMessage = (ev: any) => {
       if (ev.data.api === 'parent-notes') {
-        console.log(ev.data, 'data')
-        messageContent.value = ev.data.message || ''
-        registerDisplay.value = ev.data.registerDisplay || false
+        console.log(ev.data, 'data');
+        messageContent.value = ev.data.message || '';
+        registerDisplay.value = ev.data.registerDisplay || false;
       }
-    }
+    };
     onMounted(() => {
       nextTick(() => {
         // 是否加载完成
@@ -197,20 +209,22 @@ export default defineComponent({
               status: true
             },
             '*'
-          )
-      })
+          );
+      });
 
-      window.addEventListener('message', getMessage)
-    })
+      window.addEventListener('message', getMessage);
+    });
 
     onUnmounted(() => {
-      window.removeEventListener('message', getMessage)
-    })
+      window.removeEventListener('message', getMessage);
+    });
     return () => (
       <div class={[styles['pre-register-video'], styles2.activeVideo]}>
         <div class={styles.videoContainer}>
-          <div class={styles['video-content']}>
-            {/* <video
+          <i class={styles.videoTitle}></i>
+          <div class={styles.videoSection}>
+            <div class={styles['video-content']}>
+              {/* <video
               id="register-video"
               class={styles['video']}
               src={forms.introductionVideo}
@@ -218,25 +232,27 @@ export default defineComponent({
               poster={forms.coverImg as any}
               preload="auto"
             ></video> */}
-            <img src={forms.coverImg as any} class={styles.coverImg} />
-          </div>
-        </div>
-        <div class={styles.videoCount}>
-          <div class={styles.videoTitle}></div>
-          <div class={styles.videoCountContent}>
-            {forms.videoDetails.map((item: any) => (
-              <span
-                class={[item.id === forms.id ? styles.active : '']}
-                onClick={() => {
-                  forms.player.currentTime(item.startNode)
-                }}
-              >
-                {item.desc}
-              </span>
-            ))}
+              <img src={forms.coverImg as any} class={styles.coverImg} />
+            </div>
+            <div class={styles.videoCount}>
+              <div class={styles.videoTitles}>点击会议段落可重播：</div>
+              <div class={styles.videoCountContent}>
+                {forms.videoDetails.map((item: any) => (
+                  <span
+                    class={[item.id === forms.id ? styles.active : '']}
+                    onClick={() => {
+                      forms.player.currentTime(item.startNode);
+                    }}>
+                    {item.desc}
+                  </span>
+                ))}
+              </div>
+            </div>
           </div>
         </div>
+
         <div class={styles.messageContainer}>
+          <div class={styles.messageTitle}></div>
           <div class={styles.messageContent}>
             {/* <p>家长您好！</p>
             <p class={styles.c1}>
@@ -256,6 +272,6 @@ export default defineComponent({
           </div>
         </div>
       </div>
-    )
+    );
   }
-})
+});

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

@@ -1,41 +1,41 @@
 .per-register-active {
   min-height: 100vh;
-  background: url('./images/banner.png') no-repeat top center #C7F4FF;
+  background: url('./images/update/bg.png') no-repeat top center #85E2FF;
   background-size: contain;
-  padding-top: 176px;
+  padding-top: 250px;
   overflow: hidden;
+  position: relative;
+
+  .imgMan {
+    position: absolute;
+    top: 89px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 220px;
+  }
 }
 
 .flowPath {
   position: relative;
   margin: 0 14px 12px;
-  background: linear-gradient(180deg, #BFF4FF 0%, #80D3E1 100%);
-  box-shadow: 0 2px 4px 0 rgba(23, 89, 202, 0.92), inset 0 -9px 6px 0 #64BDFF, inset 0 3px 4px 0 #FFFFFF;
-  border-radius: 25px;
-  padding: 12px 10px 11px;
 
   .flowPathTitle {
     display: block;
-    position: absolute;
-    top: -4px;
-    left: 50%;
-    margin-left: -72px;
-    width: 144px;
-    height: 42px;
-    background: url('./images/flow-path-title.png') no-repeat center;
+    width: 100%;
+    height: 53px;
+    background: url('./images/update/title-1.png') no-repeat center;
     background-size: contain;
   }
 
   .flowPathContent {
-    padding: 31px 20px 14px;
-    font-size: 14px;
-    color: #2D1A18;
+    margin-top: -1px;
+    padding: 0 16px 20px;
+    font-size: 15px;
+    color: #000;
     line-height: 26px;
-
-    background: linear-gradient(180deg, #FFFFFA 0%, rgba(255, 255, 253, 0.87) 90%, rgba(255, 255, 255, 0.52) 100%);
-    box-shadow: 0 1px 6px 0 #D9EFF8;
-    border-radius: 18px;
-    border: 5px solid #139CF1;
+    border-radius: 0 0 16px 16px;
+    background-color: #fff;
     :global {
       img {
         width: 100% !important;
@@ -46,78 +46,66 @@
 
 .signin {
   position: relative;
-  margin: 0 10px 20px;
-  background: url('./images/signin-bg.png') no-repeat center;
-  background-size: contain;
+  margin: 0 14px 30px;
   min-height: 419px;
   overflow: hidden;
 
-  .tips {
-    margin: 27px 35px 0;
-    display: flex;
-    align-items: center;
-    background: #F1F1F1;
-    border-radius: 6px;
-    font-size: 13px;
-    color: #DC2A00;
-    line-height: 18px;
-
-    p {
-      padding-top: 2px;
-    }
-
-    span {
-      font-weight: bold;
-    }
-
-    .signinTips {
-      margin: 0 2px 0 4px;
-      width: 34px;
-      height: 28px;
-      object-fit: contain;
-    }
+  .signinTitle {
+    display: block;
+    width: 100%;
+    height: 53px;
+    background: url('./images/update/title-2.png') no-repeat center;
+    background-size: 100%;
   }
 }
 
 .cellGroup {
-  margin: 0 40px;
-  background-color: transparent;
-
+  background-color: #fff;
+  padding-bottom: 12px;
+  border-radius: 0 0 16px 16px;
   :global {
     .van-cell {
-      padding-top: 18px;
-      padding-left: 0;
-      padding-right: 0;
+      padding-top: 6px;
+      padding-left: 16px;
+      padding-right: 16px;
+      padding-bottom: 18px;
       background-color: transparent;
+      --van-field-icon-size: 14px;
+      --van-field-right-icon-color: #BBBBBB;
     }
 
     .van-field__label {
-      font-size: 16px;
-      font-weight: 500;
-      color: #333333;
+      font-weight: 600;
+      font-size: 15px;
+      color: #131415;
       line-height: 22px;
       margin-bottom: 10px;
     }
 
     input {
-      color: #666;
+      color: #131415;
       font-size: 16px;
-
+      height: 41px;
       &::placeholder {
-        color: #dcdcdc;
+        color: #BBBBBB;
       }
     }
+
+    .van-field__value {
+      background: #F4F4F4;
+      padding: 0 10px;
+      border-radius: 4px;
+    }
   }
 
   .submitBtn {
-    width: 190px;
-    height: 53px;
-    background: url('./images/signin-btn.png') no-repeat center;
+    cursor: pointer;
+    width: 275px;
+    height: 66px;
+    background: url('./images/update/signin-btn.png') no-repeat center;
     background-size: contain;
-    border: none;
     display: block;
-    margin: 18px auto 0;
-    border-radius: 50px;
+    margin: 6px auto 0;
   }
 }
 

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

@@ -1,6 +1,6 @@
 import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import signinTips from './images/signin-tips.png';
+// import signinTips from './images/signin-tips.png';
 import {
   Button,
   CellGroup,
@@ -11,6 +11,7 @@ import {
   showToast
 } from 'vant';
 import { useRoute, useRouter } from 'vue-router';
+import threeMan from './images/update/three-man.png'
 import OWxTip from '@/components/m-wx-tip';
 import { browser, getUrlCode } from '@/helpers/utils';
 import qs from 'query-string';
@@ -386,6 +387,7 @@ export default defineComponent({
     });
     return () => (
       <div class={styles['per-register-active']}>
+        <img class={styles.imgMan} src={threeMan} />
         <div class={styles.flowPath}>
           <i class={styles.flowPathTitle}></i>
           <div
@@ -394,27 +396,26 @@ export default defineComponent({
         </div>
 
         <div class={styles.signin}>
-          <div class={styles.tips}>
-            <img src={signinTips} class={styles.signinTips} />
-            <p>
-              请先进行<span>签到</span>，再观看<span>家长会视频</span>
-            </p>
-          </div>
+          <i class={styles.signinTitle}></i>
 
           <CellGroup class={styles.cellGroup} border={false}>
             <Field
               label="学生姓名"
+              required
               labelAlign="top"
               placeholder="请输入学生姓名"
               autocomplete="off"
               v-model={forms.username}
+              border={false}
             />
             <Field
               label="年级"
+              required
               labelAlign="top"
               placeholder="请选择年级"
-              isLink
+              rightIcon={!forms.gradeStatus ? "arrow-down" : "arrow-up"}
               readonly
+              border={false}
               modelValue={formatterClass(forms.currentGrade, forms.gradeList)}
               clickable={false}
               onClick={() => {
@@ -424,10 +425,12 @@ export default defineComponent({
             />
             <Field
               label="班级"
+              required
               labelAlign="top"
               placeholder="请选择班级"
-              isLink
+              rightIcon={!forms.classStatus ? "arrow-down" : "arrow-up"}
               readonly
+              border={false}
               modelValue={formatterClass(forms.currentClass, forms.classList)}
               clickable={false}
               onClick={() => {
@@ -443,7 +446,7 @@ export default defineComponent({
               }}
             />
 
-            <Button class={styles.submitBtn} onClick={onSubmit}></Button>
+            <div class={styles.submitBtn} onClick={onSubmit}></div>
           </CellGroup>
         </div>
 

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

@@ -1,31 +1,45 @@
 .pre-register-video {
-  min-height: calc(100vh - 176px);
-  background: url('./images/banner.png') no-repeat top center #C7F4FF;
+  min-height: 100vh;
+  background: url('./images/update/bg.png') no-repeat top center #85E2FF;
   background-size: contain;
-  padding-top: 160px;
+  padding-top: 121px;
   overflow: hidden;
 }
 
 .videoContainer {
   position: relative;
-  margin: 0 6px;
-  background: url('./images/video-bg.png') no-repeat center;
-  background-size: contain;
+  margin: 0 14px 20px;
+  // background: url('./images/video-bg.png') no-repeat center;
+  // background-size: contain;
   min-height: 265px;
+
+  .videoTitle {
+    display: block;
+    width: 100%;
+    height: 53px;
+    background: url('./images/update/title-3.png') no-repeat center;
+    background-size: 100%;
+  }
 }
 
-.video-content {
+.videoSection {
+  border-radius: 0 0 16px 16px;
+  background-color: #fff;
   position: relative;
-  width: 100%;
-  --plyr-color-main: #FF8057;
-  width: 303px;
-  height: 171px;
-  border-radius: 18px;
-  padding-top: 34px;
-  padding-bottom: 28px;
+  
   margin: 0 auto;
+  margin-top: -1px;
   box-sizing: content-box;
+  padding: 4px 16px 12px;
+}
 
+.video-content {
+  height: 170px;
+  --plyr-color-main: #FF8057;
+  padding: 4px;
+  background: linear-gradient( 135deg, #53C4FF 0%, #429BFF 100%);
+  border-radius: 12px;
+  box-sizing: content-box;
   .coverImg {
     width: 100%;
     height: 100%;
@@ -94,83 +108,39 @@
 
   .video {
     position: relative;
-    border-radius: 18px;
+    border-radius: 10px;
   }
 }
 
 .videoCount {
-  // position: relative;
-  // margin-top: 5px;
-  // background: url('./images/video-count.png') no-repeat center;
-  // background-size: contain;
-  // min-height: 82px;
-  // box-sizing: content-box;
-  // padding: 60px 36px 0;
   position: relative;
-  margin: 8px 14px 12px;
-  // background: url('./images/flow-path-bg.png') no-repeat center;
-  // background-size: contain;
-  background: linear-gradient(180deg, #BFF4FF 0%, #80D3E1 100%);
-  box-shadow: 0px 2px 4px 0px rgba(23, 89, 202, 0.92), inset 0px -9px 6px 0px #64BDFF, inset 0px 3px 4px 0px #FFFFFF;
-  border-radius: 25px;
-  padding: 12px 10px 11px;
-
-  .videoTitle {
-    display: block;
-    position: absolute;
-    top: -6px;
-    left: 50%;
-    margin-left: -93px;
-    width: 186px;
-    height: 32px;
-    background: url('./images/video-path-title.png') no-repeat center;
-    background-size: contain;
-  }
-
-  &::before,
-  &::after {
-    content: ' ';
-    position: absolute;
-    top: -33px;
-    width: 11px;
-    height: 44px;
-    background: url('./images/icon-connect.png') no-repeat center;
-    background-size: contain;
-  }
-
-  &::before {
-    left: 34px;
-  }
+  padding-top: 16px;
 
-  &::after {
-    right: 34px;
+  .videoTitles {
+    font-weight: 600;
+    font-size: 15px;
+    color: #000000;
+    line-height: 21px;
   }
 
-
   .videoCountContent {
-    padding: 31px 20px 14px;
     font-size: 14px;
     color: #2D1A18;
     line-height: 26px;
-
-    background: linear-gradient(180deg, #FFFFFA 0%, rgba(255, 255, 253, 0.87) 90%, rgba(255, 255, 255, 0.52) 100%);
-    box-shadow: 0px 1px 6px 0px #D9EFF8;
-    border-radius: 18px;
-    border: 5px solid #139CF1;
+    padding-top: 12px;
 
     span {
       font-size: 13px;
       color: #000000;
-      line-height: 18px;
+      line-height: 1.4;
       background: #E8EBEE;
-      border-radius: 14px;
-      padding: 4px 9px;
+      border-radius: 4px;
+      padding: 4px 10px;
       display: inline-block;
       margin-right: 8px;
-      margin-bottom: 6px;
+      margin-bottom: 8px;
 
       &.active {
-        font-weight: 600;
         color: #FFFFFF;
         background: #198CFE;
       }
@@ -198,40 +168,27 @@
 
 .messageContainer {
   margin: 0 10px 20px;
-  // background: url('./images/message-bg.png') no-repeat center;
-  // background-size: contain;
-  // min-height: 440px;
-  background: linear-gradient(180deg, #BFF4FF 0%, #80D3E1 100%);
-  box-shadow: 0px 2px 4px 0px rgba(23, 89, 202, 0.92), inset 0px -9px 6px 0px #64BDFF, inset 0px 3px 4px 0px #FFFFFF;
-  border-radius: 25px;
-  padding: 12px 10px 11px;
+
+  .messageTitle {
+    display: block;
+    width: 100%;
+    height: 53px;
+    background: url('./images/update/title-4.png') no-repeat center;
+    background-size: 100%;
+  }
 
   .messageContent {
-    padding: 12px 20px 12px;
-    font-size: 14px;
-    color: #2D1A18;
+    padding: 2px 16px 20px;
+    font-size: 15px;
+    color: #000000;
     line-height: 26px;
-
-    background: linear-gradient(180deg, #FFFFFA 0%, rgba(255, 255, 253, 0.87) 90%, rgba(255, 255, 255, 0.52) 100%);
-    box-shadow: 0px 1px 6px 0px #D9EFF8;
-    border-radius: 18px;
-    border: 5px solid #139CF1;
+    background-color: #fff;
+    border-radius: 0 0 16px 16px;
+    margin-top: -1px;
 
     &>div {
       text-align: justify;
     }
-
-    // p {
-    //   text-align: justify;
-    // }
-
-    // .c1 {
-    //   text-indent: 2em;
-
-    //   span {
-    //     color: #DD3210;
-    //   }
-    // }
   }
 
   .bottom {

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

@@ -1,27 +1,34 @@
-import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
-import styles from './video.module.less'
-import { Button, Loading } from 'vant'
-import { browser } from '@/helpers/utils'
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './video.module.less';
+import { Button, Loading } from 'vant';
+import { browser } from '@/helpers/utils';
 // import Plyr from 'plyr'
 // import 'plyr/dist/plyr.css'
-import TCPlayer from 'tcplayer.js'
-import 'tcplayer.js/dist/tcplayer.css'
-import { useInterval, useIntervalFn } from '@vueuse/core'
-import { useRoute, useRouter } from 'vue-router'
-import request from '@/helpers/request'
-import { usePageVisibility } from '@vant/use'
-import deepClone from '@/helpers/deep-clone'
+import TCPlayer from 'tcplayer.js';
+import 'tcplayer.js/dist/tcplayer.css';
+import { useInterval, useIntervalFn } from '@vueuse/core';
+import { useRoute, useRouter } from 'vue-router';
+import request from '@/helpers/request';
+import { usePageVisibility } from '@vant/use';
+import deepClone from '@/helpers/deep-clone';
 
 export default defineComponent({
   name: 'pre-register',
   setup() {
-    const route = useRoute()
-    const router = useRouter()
-    const pageVisibility = usePageVisibility()
-    const openId = sessionStorage.getItem('active-open-id')
+    const route = useRoute();
+    const router = useRouter();
+    const pageVisibility = usePageVisibility();
+    const openId = sessionStorage.getItem('active-open-id');
     // 页面定时
-    const pageTimer = useInterval(1000, { controls: true })
-    pageTimer.pause()
+    const pageTimer = useInterval(1000, { controls: true });
+    pageTimer.pause();
 
     const forms = reactive({
       videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
@@ -45,11 +52,11 @@ export default defineComponent({
       orchestraRegisterType: '',
       status: '',
       registerDisplay: true
-    })
+    });
 
     // 播放视频总时长
-    const videoIntervalRef = useInterval(1000, { controls: true })
-    videoIntervalRef.pause()
+    const videoIntervalRef = useInterval(1000, { controls: true });
+    videoIntervalRef.pause();
 
     /**
      * 格式化视屏播放有效时间 - 合并区间
@@ -58,31 +65,31 @@ export default defineComponent({
      * @returns [[0, 8], [10, 30]]
      */
     const formatEffectiveTime = (intervals: any[]) => {
-      const res: any = []
-      intervals.sort((a, b) => a[0] - b[0])
-      let prev = intervals[0]
+      const res: any = [];
+      intervals.sort((a, b) => a[0] - b[0]);
+      let prev = intervals[0];
       for (let i = 1; i < intervals.length; i++) {
-        const cur = intervals[i]
+        const cur = intervals[i];
         if (prev[1] >= cur[0]) {
           // 有重合
-          prev[1] = Math.max(cur[1], prev[1])
+          prev[1] = Math.max(cur[1], prev[1]);
         } else {
           // 不重合，prev推入res数组
-          res.push(prev)
-          prev = cur // 更新 prev
+          res.push(prev);
+          prev = cur; // 更新 prev
         }
       }
-      res.push(prev)
+      res.push(prev);
       // console.log(res, 'formatEffectiveTime')
 
-      return formatEffectiveTimeToAfter(res)
-    }
+      return formatEffectiveTimeToAfter(res);
+    };
 
     const formatEffectiveTimeToAfter = (res: any[]) => {
       // 格式化有效时间
-      const effective: any = []
-      const startNode = forms.pointVideo.startNode
-      const endNode = forms.pointVideo.endNode
+      const effective: any = [];
+      const startNode = forms.pointVideo.startNode;
+      const endNode = forms.pointVideo.endNode;
       // console.log(startNode, endNode, 'startNode')
       res.forEach((item: any) => {
         // 开始时间大于 设置时间
@@ -90,29 +97,37 @@ export default defineComponent({
           /**
            * 1、开始时间
            */
-          if (item[0] >= startNode && item[0] <= endNode && item[1] <= endNode) {
+          if (
+            item[0] >= startNode &&
+            item[0] <= endNode &&
+            item[1] <= endNode
+          ) {
             // console.log(1)
-            effective.push(item)
+            effective.push(item);
           }
           if (item[0] >= startNode && item[0] <= endNode && item[1] > endNode) {
             // console.log(3)
-            effective.push([item[0], endNode])
+            effective.push([item[0], endNode]);
           }
-          if (item[0] < startNode && item[1] > startNode && item[1] <= endNode) {
+          if (
+            item[0] < startNode &&
+            item[1] > startNode &&
+            item[1] <= endNode
+          ) {
             // console.log(4)
-            effective.push([startNode, item[1]])
+            effective.push([startNode, item[1]]);
           }
 
           if (item[0] < startNode && item[1] > startNode && item[1] > endNode) {
             // console.log(4)
-            effective.push([startNode, endNode])
+            effective.push([startNode, endNode]);
           }
         }
-      })
+      });
 
       // console.log(effective, 'effective')
-      return effective
-    }
+      return effective;
+    };
 
     /**
      * 获取数据有效期
@@ -120,22 +135,22 @@ export default defineComponent({
      * @returns 0s
      */
     const formatTimer = (intervals: any[]) => {
-      const afterIntervals = formatEffectiveTime(intervals)
+      const afterIntervals = formatEffectiveTime(intervals);
       // console.log(afterIntervals, 'afterIntervals')
-      let time = 0
+      let time = 0;
       afterIntervals.forEach((t: any) => {
-        time += t[1] - t[0]
-      })
-      return time
-    }
+        time += t[1] - t[0];
+      });
+      return time;
+    };
 
     const checkVideoDetails = (time: number) => {
       forms.videoDetails.forEach((item: any) => {
         if (item.startNode <= time && time <= item.endNode) {
-          forms.videoSelectId = item.id
+          forms.videoSelectId = item.id;
         }
-      })
-    }
+      });
+    };
 
     /**
      * 视屏累计时长
@@ -274,21 +289,21 @@ export default defineComponent({
       //   const i = document.getElementById('fullscreen-back')
       //   i && i.remove()
       // })
-      const Button = TCPlayer.getComponent('Button')
-      const BigPlayButton = TCPlayer.getComponent('BigPlayButton')
+      const Button = TCPlayer.getComponent('Button');
+      const BigPlayButton = TCPlayer.getComponent('BigPlayButton');
       BigPlayButton.prototype.createEl = function () {
-        const el = Button.prototype.createEl.call(this)
+        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="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>';
 
         el.appendChild(
           TCPlayer.dom.createEl('div', {
             className: 'vjs-button-icon',
             innerHTML: _html
           })
-        )
-        return el
-      }
+        );
+        return el;
+      };
       forms.player = TCPlayer('register-video', {
         appID: '',
         controls: true,
@@ -302,54 +317,54 @@ export default defineComponent({
           //   ]
           // }
         }
-      }) // player-container-id 为播放器容器 ID，必须与 html 中一致
+      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
       if (forms.player) {
-        forms.player.src(forms.introductionVideo) // url 播放地址
-        forms.player.poster(forms.coverImg || '')
+        forms.player.src(forms.introductionVideo); // url 播放地址
+        forms.player.poster(forms.coverImg || '');
 
         // forms.player.on('loadstart', () => {})
         forms.player.on('ready', (item: any) => {
-          console.log('ready', item)
+          console.log('ready', item);
 
           // forms.player.pause()
-        })
+        });
         forms.player.on('loadedmetadata', () => {
-          console.log('loadedmetadata')
-          forms.loading = false
-          forms.player.currentTime(forms.videoBrowsePoint)
-          checkVideoDetails(forms.player.currentTime())
-        })
+          console.log('loadedmetadata');
+          forms.loading = false;
+          forms.player.currentTime(forms.videoBrowsePoint);
+          checkVideoDetails(forms.player.currentTime());
+        });
 
         // 速度变化时
         forms.player.on('ratechange', () => {
           forms.playerSpeed =
             forms.playerSpeed < forms.player.playbackRate()
               ? forms.player.playbackRate()
-              : forms.playerSpeed
-        })
+              : forms.playerSpeed;
+        });
 
         forms.player.on('seeking', () => {
-          console.log('seeking')
-          videoIntervalRef.isActive.value && videoIntervalRef.pause()
-        })
+          console.log('seeking');
+          videoIntervalRef.isActive.value && videoIntervalRef.pause();
+        });
 
         // // 拖动结束时
         forms.player.on('seeked', () => {
-          console.log('seeked')
-          videoIntervalRef.isActive.value && videoIntervalRef.pause()
-        })
+          console.log('seeked');
+          videoIntervalRef.isActive.value && videoIntervalRef.pause();
+        });
 
         // 正在搜索中
         forms.player.on('waiting', () => {
           // console.log('waiting pause')
-          videoIntervalRef.isActive.value && videoIntervalRef.pause()
-        })
+          videoIntervalRef.isActive.value && videoIntervalRef.pause();
+        });
 
         // 如何视频在缓存不会触发
         forms.player.on('timeupdate', () => {
           // console.log('timeupdate', forms.player.currentTime())
           // 时间变化时更新每一段的状态
-          checkVideoDetails(forms.player.currentTime())
+          checkVideoDetails(forms.player.currentTime());
           // 判断视频计时器是否暂停，如果暂停则恢复
           // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
           if (
@@ -358,62 +373,62 @@ export default defineComponent({
             !forms.player.paused()
           ) {
             // console.log('timeupdate play')
-            videoIntervalRef.resume()
+            videoIntervalRef.resume();
           }
-        })
+        });
 
         // 视屏播放时暂停
         forms.player.on('ended', () => {
-          forms.player.pause()
-        })
+          forms.player.pause();
+        });
 
         // 开始播放
         forms.player.on('play', () => {
-          console.log('play')
+          console.log('play');
           // 判断视频计时器是否暂停，如果暂停则恢复
-          videoIntervalRef.resume()
-        })
+          videoIntervalRef.resume();
+        });
 
         // 暂停播放
         forms.player.on('pause', () => {
-          console.log('pause', videoIntervalRef.isActive.value)
+          console.log('pause', videoIntervalRef.isActive.value);
 
-          videoIntervalRef.pause()
-        })
+          videoIntervalRef.pause();
+        });
 
         forms.player.on('fullscreenchange', () => {
           if (forms.player.isFullscreen()) {
-            console.log('fullscreen')
-            const i = document.createElement('i')
-            i.id = 'fullscreen-back'
-            i.className = 'van-icon van-icon-arrow-left video-back'
+            console.log('fullscreen');
+            const i = document.createElement('i');
+            i.id = 'fullscreen-back';
+            i.className = 'van-icon van-icon-arrow-left video-back';
             i.addEventListener('click', () => {
-              forms.player.exitFullscreen()
-            })
-            document.getElementsByClassName('video-js')[0].appendChild(i)
+              forms.player.exitFullscreen();
+            });
+            document.getElementsByClassName('video-js')[0].appendChild(i);
           } else {
-            console.log('exitfullscreen')
-            const i = document.getElementById('fullscreen-back')
-            i && i.remove()
+            console.log('exitfullscreen');
+            const i = document.getElementById('fullscreen-back');
+            i && i.remove();
           }
-        })
+        });
       }
-      checkVideoDetails(0)
-    }
+      checkVideoDetails(0);
+    };
 
     // 保存零时时间
-    const moreTime: any = ref([]) // 多个观看时间段
-    let tempTime: any = [] // 临时存储时间
+    const moreTime: any = ref([]); // 多个观看时间段
+    let tempTime: any = []; // 临时存储时间
 
-    const currentTimer = useInterval(1000, { controls: true })
+    const currentTimer = useInterval(1000, { controls: true });
     // 监听播放状态，
     watch(
       () => videoIntervalRef.isActive.value,
       (newVal: boolean) => {
-        console.log(videoIntervalRef.isActive.value, 'videoIntervalRef')
-        initVideoCount(newVal)
+        console.log(videoIntervalRef.isActive.value, 'videoIntervalRef');
+        initVideoCount(newVal);
       }
-    )
+    );
 
     /**
      * 初始化视频时长
@@ -422,17 +437,17 @@ export default defineComponent({
      */
     const initVideoCount = (newVal: any, repeat = false) => {
       // console.log('watch', forms.player.currentTime)
-      const initTime = deepClone(tempTime)
+      const initTime = deepClone(tempTime);
       if (repeat) {
         if (tempTime.length > 0) {
           // console.log('join video', tempTime, 'initTime', initTime)
-          tempTime[1] = Math.floor(forms.player.currentTime())
+          tempTime[1] = Math.floor(forms.player.currentTime());
         }
       } else {
         if (newVal) {
-          tempTime[0] = Math.floor(forms.player.currentTime())
+          tempTime[0] = Math.floor(forms.player.currentTime());
         } else {
-          tempTime[1] = Math.floor(forms.player.currentTime())
+          tempTime[1] = Math.floor(forms.player.currentTime());
         }
       }
 
@@ -443,37 +458,45 @@ export default defineComponent({
         // console.log(tempTime, 'tempTime', moreTime.value)
         // 处理在短时间内的时间差 【视屏拖动，点击可能会导致时间差太大】
         const diffTime =
-          tempTime[1] - tempTime[0] - currentTimer.counter.value * forms.playerSpeed > 2
+          tempTime[1] -
+            tempTime[0] -
+            currentTimer.counter.value * forms.playerSpeed >
+          2;
         // console.log(diffTime, 'diffTime', currentTimer.counter.value, forms.playerSpeed, 'value')
         // 结束时间，如果 大于开始时间则清除
-        if (tempTime[1] >= tempTime[0] && !diffTime) moreTime.value.push(tempTime)
+        if (tempTime[1] >= tempTime[0] && !diffTime)
+          moreTime.value.push(tempTime);
         if (repeat) {
-          tempTime = deepClone(initTime)
+          tempTime = deepClone(initTime);
         } else {
-          tempTime = []
-          currentTimer.counter.value = 0
+          tempTime = [];
+          currentTimer.counter.value = 0;
         }
       }
 
       // console.log('观看的时间', moreTime)
-    }
+    };
 
     watch(pageVisibility, (value: any) => {
-      console.log('watch', value)
+      console.log('watch', value);
       if (value == 'hidden') {
-        forms.player.pause()
+        forms.player.pause();
       }
-    })
+    });
 
     // 更新时间
     const updateStat = async (pageBrowseTime = 10) => {
       try {
-        const videoBrowseData = moreTime.value.length > 0 ? formatEffectiveTime(moreTime.value) : []
+        const videoBrowseData =
+          moreTime.value.length > 0 ? formatEffectiveTime(moreTime.value) : [];
         // console.log(moreTime.value, videoBrowseData, 'video')
-        const time = videoBrowseData.length > 0 ? formatTimer(videoBrowseData) : 0
+        const time =
+          videoBrowseData.length > 0 ? formatTimer(videoBrowseData) : 0;
         // const videoCountTime = videoIntervalRef?.counter.value
         // 判断如何视屏播放时间大于视屏播放有效时间则说明数据有问题，进行重置数据
-        const rate = Math.floor((time / Math.floor(forms.pointVideoTime)) * 100)
+        const rate = Math.floor(
+          (time / Math.floor(forms.pointVideoTime)) * 100
+        );
         // console.log('videoIntervalRef?.counter.value', videoIntervalRef?.counter.value)
         await request.post('/edu-app/open/studentBrowseRecord/updateStat', {
           data: {
@@ -485,26 +508,26 @@ export default defineComponent({
             videoBrowseTime: videoIntervalRef?.counter.value, // 视频观看时长
             videoBrowsePoint: Math.floor(forms.player.currentTime() || 0) // 视频最后观看点 - 向下取整
           }
-        })
+        });
       } catch {
         //
       }
-    }
+    };
 
     // 提交
     const onSubmit = async () => {
       try {
-        forms.player.pause() // 视屏
-        forms.intervalFnRef?.pause() // 页面订时器
-        currentTimer.pause()
-        videoIntervalRef.pause()
+        forms.player.pause(); // 视屏
+        forms.intervalFnRef?.pause(); // 页面订时器
+        currentTimer.pause();
+        videoIntervalRef.pause();
         // 页面计时暂停
-        pageTimer.pause()
-        initVideoCount(videoIntervalRef.isActive.value)
+        pageTimer.pause();
+        initVideoCount(videoIntervalRef.isActive.value);
 
-        await updateStat()
+        await updateStat();
 
-        console.log(forms.orchestraRegisterType)
+        console.log(forms.orchestraRegisterType);
         // if (forms.orchestraRegisterType === 'PARENT_CONFERENCES') {
         //   window.location.href =
         //     window.location.origin +
@@ -526,61 +549,66 @@ export default defineComponent({
         //     })
         // }
       } catch (e) {
-        console.log(e, 'e')
+        console.log(e, 'e');
         // 还原
-        forms.intervalFnRef?.resume()
-        pageTimer.resume()
-        currentTimer.resume()
+        forms.intervalFnRef?.resume();
+        pageTimer.resume();
+        currentTimer.resume();
       }
-    }
+    };
 
     onMounted(async () => {
       try {
-        const { data } = await request.get('/edu-app/open/studentBrowseRecord/query', {
-          params: {
-            openId: forms.openId,
-            schoolId: forms.schoolId
+        const { data } = await request.get(
+          '/edu-app/open/studentBrowseRecord/query',
+          {
+            params: {
+              openId: forms.openId,
+              schoolId: forms.schoolId
+            }
           }
-        })
-        
-        forms.videoBrowsePoint = data.videoBrowsePoint || 0
+        );
+
+        forms.videoBrowsePoint = data.videoBrowsePoint || 0;
         if (forms.player) {
-          forms.player.currentTime(data.videoBrowsePoint || 0)
+          forms.player.currentTime(data.videoBrowsePoint || 0);
         }
-        forms.introductionVideo = data.introductionVideo
-        forms.introductionVideoTime = data.introductionVideoTime
-        forms.coverImg = data.coverImg
-        moreTime.value = data.videoBrowseData ? JSON.parse(data.videoBrowseData) : []
-        forms.parentConferencesNotes = data.parentConferencesNotes
+        forms.introductionVideo = data.introductionVideo;
+        forms.introductionVideoTime = data.introductionVideoTime;
+        forms.coverImg = data.coverImg;
+        moreTime.value = data.videoBrowseData
+          ? JSON.parse(data.videoBrowseData)
+          : [];
+        forms.parentConferencesNotes = data.parentConferencesNotes;
         // forms.orchestraRegisterType = data.orchestraRegisterType
-        forms.registerDisplay = data.registerDisplay
+        forms.registerDisplay = data.registerDisplay;
 
-        const videoDetails = data.videoDetails || []
+        const videoDetails = data.videoDetails || [];
         videoDetails.forEach((video: any) => {
           forms.videoDetails.push({
             startNode: video.startNode,
             endNode: video.endNode,
             desc: video.desc,
             id: video.id
-          })
+          });
           if (video.pointFlag) {
-            forms.pointVideo = video
-            forms.pointVideoTime = video.endNode - video.startNode
+            forms.pointVideo = video;
+            forms.pointVideoTime = video.endNode - video.startNode;
           }
-        })
+        });
 
-        _init()
+        _init();
         // 间隔多少时间同步数据
         forms.intervalFnRef = useIntervalFn(async () => {
           // 页面时间恢复
-          pageTimer.counter.value = 0
-          pageTimer.resume()
+          pageTimer.counter.value = 0;
+          pageTimer.resume();
           // 同步数据时先进行有效时间进行保存
-          initVideoCount(false, true)
+          initVideoCount(false, true);
 
-          await updateStat()
-          videoIntervalRef.counter.value = 0
-        }, 10000)
+          await updateStat();
+          videoIntervalRef.counter.value = 0;
+        }, 10000);
 
         // const arr = [
         //   [10, 10],
@@ -596,15 +624,15 @@ export default defineComponent({
       } catch {
         //
       }
-    })
+    });
 
     onUnmounted(() => {
-      forms.player?.fullscreen?.exit()
-      forms.intervalFnRef?.pause()
-      currentTimer.pause()
+      forms.player?.fullscreen?.exit();
+      forms.intervalFnRef?.pause();
+      currentTimer.pause();
       // 页面计时暂停
-      pageTimer.pause()
-    })
+      pageTimer.pause();
+    });
 
     // 判断是否有openId
     if (!forms.openId) {
@@ -613,93 +641,85 @@ export default defineComponent({
         query: {
           id: forms.schoolId
         }
-      })
+      });
     }
 
     const onPageShow = () => {
       // console.log(forms.isPageHide, 'showInfo')
       if (forms.isPageHide) {
-        window.location.reload()
+        window.location.reload();
       }
-    }
+    };
     // 处理监听页面返回不刷新的问题
-    window.addEventListener('pageshow', onPageShow)
+    window.addEventListener('pageshow', onPageShow);
 
     const onPageHide = () => {
       // console.log(forms.isPageHide, 'showInfo')
-      forms.isPageHide = true
-    }
-    window.addEventListener('pagehide', onPageHide)
+      forms.isPageHide = true;
+    };
+    window.addEventListener('pagehide', onPageHide);
 
     onUnmounted(() => {
-      window.removeEventListener('pageshow', onPageShow)
-      window.removeEventListener('pagehide', onPageHide)
-    })
+      window.removeEventListener('pageshow', onPageShow);
+      window.removeEventListener('pagehide', onPageHide);
+    });
     return () => (
       <div class={styles['pre-register-video']}>
         <div class={styles.videoContainer}>
-          <div class={styles['video-content']}>
-            <video
-              id="register-video"
-              class={styles['video']}
-              src={forms.introductionVideo}
-              playsinline={true}
-              poster={forms.coverImg}
-              preload="auto"
-            ></video>
-            {/* 加载视频使用 */}
-            {forms.loading && (
-              <div class={styles.loadingVideo}>
-                <Loading
-                  size={36}
-                  color="#FF8057"
-                  vertical
-                  style={{ height: '100%', justifyContent: 'center' }}
-                >
-                  加载中...
-                </Loading>
+          <i class={styles.videoTitle}></i>
+          <div class={styles.videoSection}>
+            <div class={styles['video-content']}>
+              <video
+                id="register-video"
+                class={styles['video']}
+                src={forms.introductionVideo}
+                playsinline={true}
+                poster={forms.coverImg}
+                preload="auto"></video>
+              {/* 加载视频使用 */}
+              {forms.loading && (
+                <div class={styles.loadingVideo}>
+                  <Loading
+                    size={36}
+                    color="#FF8057"
+                    vertical
+                    style={{ height: '100%', justifyContent: 'center' }}>
+                    加载中...
+                  </Loading>
+                </div>
+              )}
+            </div>
+            <div class={styles.videoCount}>
+              <div class={styles.videoTitles}>点击会议段落可重播：</div>
+              <div class={styles.videoCountContent}>
+                {forms.videoDetails.map((item: any) => (
+                  <span
+                    class={[
+                      item.id === forms.videoSelectId ? styles.active : ''
+                    ]}
+                    onClick={() => {
+                      forms.player.currentTime(item.startNode);
+                      forms.player.play();
+                      forms.videoBrowsePoint = item.startNode;
+                      checkVideoDetails(forms.player.currentTime());
+                    }}>
+                    {item.desc}
+                  </span>
+                ))}
               </div>
-            )}
-          </div>
-        </div>
-        <div class={styles.videoCount}>
-          <div class={styles.videoTitle}></div>
-          <div class={styles.videoCountContent}>
-            {forms.videoDetails.map((item: any) => (
-              <span
-                class={[item.id === forms.videoSelectId ? styles.active : '']}
-                onClick={() => {
-                  forms.player.currentTime(item.startNode)
-                  forms.player.play()
-                  forms.videoBrowsePoint = item.startNode
-                  checkVideoDetails(forms.player.currentTime())
-                }}
-              >
-                {item.desc}
-              </span>
-            ))}
+            </div>
           </div>
         </div>
+
         <div class={styles.messageContainer}>
+          <div class={styles.messageTitle}></div>
           <div class={styles.messageContent}>
-            {/* <p>家长您好！</p>
-            <p class={styles.c1}>
-              请家长们合理安排时间，<span>认真观看</span>家长会内容。在<span>详细了解</span>
-              所有要求后，有意向让孩子加入乐团的家长，请在<span>明晚20:00前</span>，为孩子完成
-              <span>乐团报名</span>。
-            </p>
-            <p class={styles.c1}>
-              下周，专业老师将针对意向入团学员进行身体条件确认。谢谢各位的支持！
-            </p>
-            <p class={styles.bottom}>
-              注：乐团于下学期正式开始训练，训练时间下学期开学前另行通知，训练时间会与学校其他社团错开，家长无需担心时间冲突问题。
-            </p> */}
             <div v-html={forms.parentConferencesNotes}></div>
 
             {/* {forms.registerDisplay && <Button class={styles.submitBtn} onClick={onSubmit}></Button>} */}
           </div>
         </div>
       </div>
-    )
+    );
   }
-})
+});