Merge branch 'hqyDev' of http://git.dayaedu.com/liushengqiang/classroom-app into jenkins-test

src/views/creation/edit/index.tsx

@@ -1,6 +1,6 @@
 import MHeader from '@/components/m-header';
 import MSticky from '@/components/m-sticky';
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, onBeforeUnmount } from 'vue';
 import styles from './index.module.less';
 import { Button, Field, showToast } from 'vant';
 import MUploader from '@/components/m-uploader';
@@ -56,8 +56,15 @@ export default defineComponent({
         }
       );
     };
-
+    // 设置导航栏颜色
+    function setStatusBarTextColor(isWhite:boolean){
+      postMessage({
+        api: 'setStatusBarTextColor',
+        content: { statusBarTextColor: isWhite }
+      })
+    }
     onMounted(async () => {
+      setStatusBarTextColor(false)
       try {
         const { data } = await api_userMusicDetail(state.id);
         state.musicDetail = data;
@@ -73,6 +80,9 @@ export default defineComponent({
         //
       }
     });
+    onBeforeUnmount(()=>{
+      setStatusBarTextColor(true)
+    })
     return () => (
       <div>
         <MSticky position="top">

src/views/creation/index-share.tsx

@@ -10,7 +10,7 @@ import {
 // import WaveSurfer from 'wavesurfer.js';
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
 import styles from './index.module.less';
-import { Cell, Image, List, Popup, Sticky, TextEllipsis } from 'vant';
+import { Cell, Image, List, Popup, Sticky, TextEllipsis, NoticeBar } from 'vant';
 import iconMember from './images/icon-member.png';
 import iconZan from './images/icon-zan.png';
 import iconZanActive from './images/icon-zan-active.png';
@@ -509,7 +509,10 @@ export default defineComponent({
           <>
             <div class={styles.singerBox}>
               <div class={styles.musicSheetName}>
-                {state.musicDetail?.musicSheetName}
+                <NoticeBar
+                    text={state.musicDetail?.musicSheetName}
+                    background="none"
+                />
               </div>
               <div class={styles.singerName}>
                 演奏：{state.musicDetail?.username}

src/views/creation/index.module.less

@@ -527,14 +527,24 @@
   height: 20vh;
   display: flex;
   flex-direction: column;
-  justify-content: end;
+  justify-content: flex-end;
   .musicSheetName{
-    text-align: center;
-    font-weight: 600;
-    font-size: 20px;
-    color: #FFFFFF;
-    line-height: 28px;
-    margin-bottom: 10px;
+    width: 200px;
+    margin: 0 auto 10px;
+    :global{
+      .van-notice-bar{
+          padding: 0;
+          height: 28px;
+          font-weight: 600;
+          font-size: 20px;
+          color: #FFFFFF;
+          line-height: 28px;
+          .van-notice-bar__content{
+            min-width: 100%;
+            text-align: center;
+          }
+      }
+    }
   }
   .singerName{
     text-align: center;
@@ -630,7 +640,7 @@
     .van-cell__value{
       display: flex;
       align-items: center;
-      justify-content: end;
+      justify-content: flex-end;
     }
   }
   .playImg{

src/views/creation/playCreation/index.module.less

@@ -4,7 +4,7 @@
   position: relative;
   overflow: hidden;
   &.landscapeScreen{
-    width: 100vh;
+    width: var(--creationHeight, 100vh);
     height: 100vw;
     position: absolute;
     top: 50%;
@@ -16,7 +16,7 @@
         pointer-events: none;
       }
       .osmdLoadingPop{
-        width: 100vh !important;
+        width: var(--creationHeight, 100vh) !important;
         height: 100vw !important;
         min-height: 100vw !important;
       }
@@ -34,6 +34,9 @@
           width: 100%;
           height: 100%;
           z-index: initial;
+          .plyr__video-wrapper{
+            z-index: -1;  // 旋转之后 视频video跑到最上层了，在video容器上改变图层位置信息
+          }
           .plyr__controls{
               background: initial;
               padding: 0 20px 20px;
@@ -180,7 +183,7 @@
       height: 32px;
     }
     .musicDetail{
-      margin-left: 10px;
+      margin-left: 20px;
       .musicSheetName{
         width: 300px;
         margin-top: 4px;

src/views/creation/playCreation/index.tsx

@@ -36,6 +36,7 @@ export default defineComponent({
     const loaded = ref(false)
     let isInitAudioVisualDraw = false
     const { registerDrag, unRegisterDrag } = landscapeScreenDrag()
+    const creationHeight = ref(0)
     watch(landscapeScreen, ()=>{
       if(landscapeScreen.value){
         registerDrag()
@@ -296,7 +297,9 @@ export default defineComponent({
       }else{
         // web端使用旋转的方式
         updateLandscapeScreenState()
+        setFullHeight()
         window.addEventListener('resize', updateLandscapeScreenState)
+        window.addEventListener('resize', setFullHeight)
       }
     }
     function updateLandscapeScreenState(){
@@ -394,6 +397,12 @@ export default defineComponent({
         updateProgressStaff
       }
     }
+    function setFullHeight(){
+      // ios 浏览器100vh 不等于可视区
+      requestAnimationFrame(()=>{
+        creationHeight.value = window.innerHeight
+      })
+    }
     onMounted(()=>{
       // 五线谱
       initStaff()
@@ -410,11 +419,18 @@ export default defineComponent({
         });
       }else{
         window.removeEventListener('resize', updateLandscapeScreenState)
+        window.removeEventListener('resize', setFullHeight)
       }
       _plrl?.destroy()
     })
     return () =>
-    <div id="landscapeScreenPlay" class={[styles.playCreation,landscapeScreen.value && styles.landscapeScreen,!loaded.value && styles.notLoaded]}
+    <div id="landscapeScreenPlay"
+      class={[styles.playCreation,landscapeScreen.value && styles.landscapeScreen,!loaded.value && styles.notLoaded]}
+      style={
+        {
+          "--creationHeight":creationHeight.value ? creationHeight.value+"px" : "100vh"
+        }
+      }
       onClick={
         (event)=>{
           staffState.isShow && handlerClickPlay(event)

src/views/download/index.module.less

@@ -3,7 +3,7 @@
   background: url('./images/download_bg.png') no-repeat top center;
   background-size: cover;
   min-height: 100vh;
-  padding: 6px 15px 0 23px;
+  padding: 30px 34px 0 34px;
   text-align: center;
 
   :global {