Merge remote-tracking branch 'origin/hqyDev' into feature-tianyong

src/page-instrument/header-top/index.module.less

@@ -328,8 +328,8 @@
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        width: 38Px;
-        height: 38Px;
+        width: 38px;
+        height: 38px;
     }
 }
 
@@ -385,6 +385,12 @@
     background: url(./image/bg.png) no-repeat;
     background-size: cover;
     transition: all .3s;
+    &.isiPad{
+        .modeBox {
+            padding: 0 40px;
+        }
+    }
+
 
     &.hidden {
         opacity: 0;

src/page-instrument/header-top/modeView.tsx

@@ -20,6 +20,7 @@ import { popImgs, hanldeConfirmPop, hanldeClosePop, evaluatingData } from "/src/
 import { Popup } from "vant";
 import AbnormalPop from "/src/view/abnormal-pop";
 import { smoothAnimationState } from "../view-detail/smoothAnimation";
+import { browser } from "/src/utils";
 
 export default defineComponent({
   name: "modeView",
@@ -99,8 +100,10 @@ export default defineComponent({
         }
       }
     );      
+    const browserInfo = browser();
+    const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad || browserInfo.isTablet;
     return () => (
-      <div class={[styles.modeView, headTopData.modeType !== "init" && styles.hidden]}>
+      <div class={[styles.modeView, isPad && styles.isiPad, headTopData.modeType !== "init" && styles.hidden]}>
         <img
           src={backImg}
           class={styles.back}

src/page-instrument/header-top/settting/index.module.less

@@ -137,6 +137,7 @@
                                 line-height: 20px;
                                 text-align: center;
                                 padding-top: 3px;
+                                margin-bottom: 3px;
                             }
                             .speedBtn{
                                 width: 18px;

src/page-instrument/header-top/speed/index.module.less

@@ -1,5 +1,8 @@
 .speedContainer{
     width: 334px;
+    &.isHideBeat .content{
+        height: 190px;
+    }
     .head{
         height: 42px;
         position: relative;
@@ -106,6 +109,7 @@
                             line-height: 20px;
                             text-align: center;
                             padding-top: 3px;
+                            margin-bottom: 3px;
                         }
                         .speedBtn{
                             width: 18px;

src/page-instrument/header-top/speed/index.tsx

@@ -107,7 +107,7 @@ export default defineComponent({
 			}
 		};
 		return () => (
-			<div class={[styles.speedContainer]}>
+			<div class={[styles.speedContainer, !(state.isMixBeat && state.modeType !== "evaluating") && styles.isHideBeat]}>
 				<div class={[styles.head, "top_draging"]}>
 					<img class={styles.headTit} src={headImg("headTit.png")} />
 					<img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ headData.speedShow = false }} />

src/page-instrument/view-evaluat-report/component/share-top/index.module.less

@@ -226,19 +226,31 @@
     }
 }
 
-.playerBox {
-    width: 536px;
-    height: 314px;
+.playerBoxContent{
     background: #FFF8F8;
     border-radius: 20px;
     padding: 8px;
+    .playerBoxCon{
+        position: relative;
+        width: 520px;
+        padding-top: 56.25%;
+        &.padPlayerBox{
+            width: 428px;
+        }
+    }
+}
+.playerBox {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     overflow: hidden;
     :global {
         .plyr {
             border-radius: 16px;
             width: 100%;
             height: 100%;
-            box-shadow: 4px -3px 6px 0px #B2E8FF;
 
             .plyr__control.plyr__control--overlaid {
                 width: 48px;
@@ -254,7 +266,7 @@
 
             .plyr__controls {
                 background: initial;
-                padding: 0 20px 13px;
+                padding: 20px 20px 13px;
                 opacity: 1 !important;
                 transform: translateY(0) !important;
                 pointer-events: initial !important;
@@ -331,22 +343,10 @@
                 }
 
             }
-        }
-    }
-    &.padPlayerBox{
-        width: 428px;
-        height: 252px;
-        padding: 12px;
-        .audioBox{
-            .audioBga1{
-                width: 112px;
-            }
-            .audioBga2{
-                width: 206px;
-            }
-            .audioVisualizer{
-                width: 288px;
-                height: 50px;
+            .plyr__video-wrapper{
+                .plyr__poster{
+                    background-size: 100% 100%;
+                }
             }
         }
     }
@@ -407,6 +407,7 @@
     :global {
         .plyr {
             .plyr__controls {
+                background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
                 .plyr__controls__item.plyr__control {
                     .icon--pressed {
                         background-size: 100% 100% !important;
@@ -434,6 +435,9 @@
                         margin-top: -2px;
                     }
                 }
+                .plyr__controls__item.plyr__time{
+                    color: #fff;
+                }
 
             }
         }
@@ -515,7 +519,6 @@
     flex-wrap: wrap;
     margin-top: 16px;
     position: relative;
-    padding-bottom: 22px;
 
     .item {
         width: 50%;
@@ -564,6 +567,29 @@
     }
 }
 
+.tyImg{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, calc(-50% + 40px));
+    width: 184px;
+    height: 68px;
+}
+.playLarge {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 48px;
+    height: 48px;
+    background: url("./image/midPlay.png") no-repeat;
+    background-size: 100% 100%;
+    z-index: 12;
+    display: none;
+    &.playIngShow {
+        display: initial;
+    }
+}
 .gramoBox {
     position: absolute;
     left: 50%;
@@ -574,9 +600,11 @@
     height: 112px;
     background: url("./image/audio-bg.png") no-repeat center;
     background-size: contain;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     .gramoPan {
-      margin: 15px auto;
       z-index: 8;
       width: 82px;
       height: 82px;

src/page-instrument/view-evaluat-report/component/share-top/index.tsx

@@ -9,6 +9,7 @@ import iconhuifang from "./image/icon-huifang.png";
 import shiyiTop from "./image/shiyi-top.png";
 import shiyiClose from "./image/closeImg.png";
 import musicBg from "./image/music_bg.png";
+import tyImg from "./image/ty.png"
 import { Grid, GridItem, Popup } from "vant";
 import videobg from "./image/videobg.png";
 import "plyr/dist/plyr.css";
@@ -473,22 +474,28 @@ export default defineComponent({
               shareData._plrl?.pause();
             }}
           >
-            <div class={[styles.playerBox, isPad && styles.padPlayerBox, mediaType.value === "video" && styles.videoPlayerBox]}>
-              {mediaType.value === "audio" ? (
-                <div class={styles.audioBox}>
-                  <div class={styles.gramoBox}>
-                    <div class={[styles.gramoPan, !isPlayStatus.value && styles.imgRotate]}>
-                      <img class={styles.audioImg} src={musicBg} />
+            <div class={styles.playerBoxContent}>
+              <div class={[styles.playerBoxCon, isPad && styles.padPlayerBox]}>
+                <div class={[styles.playerBox, mediaType.value === "video" && styles.videoPlayerBox]}>
+                  {mediaType.value === "audio" ? (
+                    <div class={styles.audioBox}>
+                      <div class={styles.gramoBox}>
+                        <div class={[styles.gramoPan, !isPlayStatus.value && styles.imgRotate]}>
+                          <img class={styles.audioImg} src={musicBg} />
+                        </div>
+                        <i class={styles.audioPoint}></i>
+                        <i class={[styles.audioZhen, !isPlayStatus.value && styles.active]}></i>
+                      </div>  
+                      <img src={tyImg} class={styles.tyImg}  />                
+                      <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
+                      <audio crossorigin="anonymous" id="audioSrc" src={scoreData.value.videoFilePath} controls="false" preload="metadata" playsinline />
+                      <div onClick={() => { shareData._plrl.play() }} class={[styles.playLarge, !isPlayStatus.value && styles.playIngShow]}></div>
                     </div>
-                    <i class={styles.audioPoint}></i>
-                    <i class={[styles.audioZhen, !isPlayStatus.value && styles.active]}></i>
-                  </div>                  
-                  <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-                  <audio crossorigin="anonymous" id="audioSrc" src={scoreData.value.videoFilePath} controls="false" preload="metadata" playsinline />
+                  ) : (
+                    <video id="videoSrc" class={styles.videoBox} src={scoreData.value.videoFilePath} data-poster={videobg} preload="metadata" playsinline />
+                  )}
                 </div>
-              ) : (
-                <video id="videoSrc" class={styles.videoBox} src={scoreData.value.videoFilePath} data-poster={videobg} preload="metadata" playsinline />
-              )}
+              </div>
             </div>
           </Popup>