Merge remote-tracking branch 'origin/hqyDev' into ktyq-online-new

src/page-instrument/component/the-music-list/index.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
 	setup() {
 		return () => (
 			<>
-				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
+				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.7)'}}>
 					<div class={[styles.tabs, styles[state.modeType], state.platform === IPlatform.PC && styles.isPc]}>
 						<Tabs>
 							<Tab title="其他曲谱">

src/page-instrument/component/the-music-list/list.tsx

@@ -182,7 +182,7 @@ export default defineComponent({
                   <span>暂无内容</span>
                 </div>}
         </List>
-        <Popup  style={positionInfo.styleDrag.value} v-model:show={filterShow.value} class="popup-custom van-scale center-closeBtn musicListClass_drag" transition="van-scale" teleport="body" overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+        <Popup  style={positionInfo.styleDrag.value} v-model:show={filterShow.value} class="popup-custom van-scale center-closeBtn musicListClass_drag" transition="van-scale" teleport="body" overlay-style={{ background: "rgba(0, 0, 0, 0.7)" }}>
           <FilterList onClose={() => { filterShow.value = false }} onHandleConfirm={(queryObj) => {
             filterShow.value = false
             forms.audioPlayTypes = queryObj.audioPlayTypes

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

@@ -6,12 +6,12 @@
     flex-shrink: 0;
     margin-left: calc(-1 * var(--detailDataPaddingLeft));
     padding: 0 30px;
-    background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 19%, rgba(255,255,255,0.7) 100%);
+    background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 19%, rgba(255,255,255,1) 100%);
     &.follow{
-        background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(240,250,252,0.7) 19%, rgba(255,255,255,0.7) 100%);
+        background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(240,250,252,0.8) 19%, rgba(255,255,255,1) 100%);
     }
     &.evaluating{
-        background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(221,248,254,0.7) 19%, rgba(225,242,251,0.7) 100%);
+        background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(225,242,251,0.8) 19%, rgba(225,242,251,1) 100%);
     }
     &.headerTopRight {
         justify-content: flex-end;
@@ -122,14 +122,12 @@
     position: fixed;
     top: 20px;
     right: 30px;
-    height: 36px;
-    border-radius: 16px;
+    border-radius: 20px;
     background: #FFFFFF;
-    border-radius: 16px;
     border: 3px solid #B5ECF1;
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    padding: 6px 10px;
 
     .img {
         width: 18px;
@@ -200,6 +198,9 @@
 
             >img:nth-child(2) {
                 content: url("./image/backgroundAct.png");
+            }            
+            >img:nth-child(3) {
+                content: url("./image/mingsongAct.png");
             }
         }
 

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

@@ -187,8 +187,8 @@ function modeChangeHandleTimes(oldPlayType: "play" | "sing", oldPlaySource: IPla
   const playSource = nowPlaySource || state.playSource;
   const { notBeatFixtime, xmlMp3BeatFixTime, difftime } = state.times[0];
   const { isOpenMetronome, isSingOpenMetronome } = state;
-  // 跟练模式不切换时值  因为演奏加了唱名，所以往跟练模式切换的时候，刷新谱面的时候需要更新时值，这时候调用handleRessetState 会回到练习模式
-  if(state.modeType === "follow") {
+  // 因为演奏加了唱名，所以往跟练模式切换和评测模式切换的时候，刷新谱面的时候需要更新时值，这时候调用handleRessetState 会回到练习模式,这里是
+  if(state.modeType === "follow" || state.modeType === "evaluating") {
     return false
   }
   // 当相同时候也不处理
@@ -966,7 +966,7 @@ export default defineComponent({
                   </div>
                 </div>
                 {
-                  <Popup v-model:show={headData.speedShow} class="popup-custom van-scale center-closeBtn speedBoxClass_drag" transition="van-scale" teleport="body" style={speedInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+                  <Popup v-model:show={headData.speedShow} class="popup-custom van-scale center-closeBtn speedBoxClass_drag" transition="van-scale" teleport="body" style={speedInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.7)" }}>
                     <Speed />
                     {state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
                   </Popup>
@@ -1072,7 +1072,7 @@ export default defineComponent({
           <img class={styles.iconBtn} src={headImg("icon_reset.png")} />
         </div>
 
-        <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+        <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.7)" }}>
           <Settting />
           {state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
         </Popup>
@@ -1118,7 +1118,7 @@ export default defineComponent({
         )}
 
         {/** 评测作业，没有完成时，提示弹窗 */}
-        <Popup v-model:show={headTopData.workHomeNoDone} class="popup-custom van-scale center-closeBtn" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+        <Popup v-model:show={headTopData.workHomeNoDone} class="popup-custom van-scale center-closeBtn" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.7)" }}>
           <WorkHomePop onClose={handleResult} />
         </Popup>
       </>

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

@@ -221,7 +221,9 @@
                 }
                 &.speCon{
                     .tit{
+                        margin-top: 4px;
                         flex-shrink: 0;
+                        align-self: flex-start;
                     }
                     .radioBox {
                         flex-wrap: wrap;

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

@@ -295,7 +295,7 @@ export default defineComponent({
 					class="popup-custom van-scale center-closeBtn recommenBoxClass_drag"
 					transition="van-scale"
 					teleport="body"
-                    overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}
+                    overlay-style={{background:'rgba(0, 0, 0, 0.7)'}}
                     style={positionInfo.styleDrag.value}
 				>
                     <Recommendation

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

@@ -1,4 +1,10 @@
 .speedContainer{
+    &.isHideBeat .content{
+        height: 192px;
+        .speedSel{
+            padding-bottom: 0px !important;
+        }
+    }
     &.follow{
         .head{
             background: url("../image/headImg1.png") no-repeat;
@@ -63,7 +69,7 @@
     }
     .content{
         width: 354px;
-        height: 225px;
+        height: 250px;
         background: #B0D8FF;
         box-shadow: 0px 4px 0px 0px #7AAEE0;
         border-radius: 0px 0px 24px 24px;

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

@@ -113,7 +113,7 @@ export default defineComponent({
 			}
 		};
 		return () => (
-			<div class={[styles.speedContainer, styles[state.modeType]]}>
+			<div class={[styles.speedContainer, styles[state.modeType], !(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 }} />
@@ -143,7 +143,7 @@ export default defineComponent({
 							))}
 						</div>
 						{
-							state.isMixBeat && 
+							state.isMixBeat && state.modeType !== "evaluating" &&
 							<div class={styles.metronome}>
 								<div class={styles.tit}>节拍器</div>
 								<Switch 

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

@@ -376,7 +376,7 @@
                     color: #ffffff;
                 }
                 .plyr__poster{
-                    background-size: 100% 100%;
+                    background-size: cover;
                 }
             }
         }
@@ -404,9 +404,9 @@
         }
         .audioBga{
             position: absolute;
-            width: 100%;
+            width: 120%;
             top: 44%;
-            transform: translateY(-50%);
+            transform: translate(-10%, -50%);
         }
         .audioVisualizer {
             position: absolute;
@@ -505,7 +505,7 @@
     flex-wrap: wrap;
     margin-top: 16px;
     position: relative;
-    padding-bottom: 22px;
+    padding-bottom: 16px;
 
     .item {
         width: 50%;

src/view/plugins/toggleMusicSheet/index.tsx

@@ -112,7 +112,7 @@ export default defineComponent({
     }
 
     return () => (
-      <Popup v-model:show={toggleMusicSheet.show} class="popup-custom van-scale center-closeBtn switchBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
+      <Popup v-model:show={toggleMusicSheet.show} class="popup-custom van-scale center-closeBtn switchBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{background:'rgba(0, 0, 0, 0.7)'}}>
         <ChoosePartName
           partIndex={trackIdx.value || 0}
           partListNames={partListNames.value}

src/view/rhythm/index.module.less

@@ -15,8 +15,8 @@
         top: 50%;
         transform: translate(-50%, -50%);
         display: flex;
-        justify-content: center;
         align-items: center;
+        width: 520px;
         .rhythmImg{
             width: 50px;
             height: 50px;
@@ -72,6 +72,9 @@
         }
         .rhythmBox{
             flex-wrap: wrap;
+            align-content: flex-start;
+            width: initial;
+            height: 230px;
             .rhythmImg{
                 &.active{
                     background-color: #ffffff;
@@ -82,10 +85,14 @@
                 height: 40px;
                 border-radius: 10px;
                 background-size: 36px 36px;
+                &:nth-child(2){
+                    margin-left: 1px;
+                }
                 &:nth-child(4){
                     margin-right: 0;
                 }
                 &:nth-child(5){
+                    margin-left: 1px;
                     margin-bottom: 0;
                 }
                 &:nth-child(6){
@@ -96,14 +103,17 @@
                     margin-bottom: 0;
                 }
                 &:first-child{
-                    margin-left: 20px;
+                    margin-left: 21px;
                     margin-right: 20px;
                     width: 110px;
                     height: 110px;
                     background-size: 110px 110px;
                     border-radius: 28px;
-                    box-shadow: 0 0 0 4px #FFFFFF;
+                    box-shadow: 0 0 0 5px #FFFFFF;
                     background-color: #35A8FF;
+                    &.highlight {
+                        box-shadow: 0 0 0 5px transparent;
+                    }
                 }
             }
         }

src/view/rhythm/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onMounted, ref } from "vue"
+import { computed, defineComponent, onMounted, ref, watch } from "vue"
 import styles from "./index.module.less"
 import state from "/src/state"
 import { headTopData } from "/src/page-instrument/header-top"
@@ -29,8 +29,16 @@ export default defineComponent({
       }
       const rhythmData = ref<rhythmData[][]>([])
       const actRhythmData = computed<rhythmData[]>(() => {
+         if (headTopData.rhythmModeDirection === "vertical") {
+            isFlash.value = true
+            const _time = setTimeout(() => {
+               clearTimeout(_time)
+               isFlash.value = false
+            }, 80)
+         }
          return rhythmData.value[Math.floor(state.activeNoteIndex / 6)]
       })
+      const isFlash = ref(false)
       function initRhythmData() {
          const rhythmArr = state.times.map(item => {
             const noteElement = item.noteElement
@@ -56,6 +64,12 @@ export default defineComponent({
             return result
          }, [])
       }
+      watch(
+         () => state.times,
+         () => {
+            initRhythmData()
+         }
+      )
       initRhythmData()
       onMounted(() => {
          // 横屏的时候 当宽度大于屏幕的时候缩小一点
@@ -79,7 +93,11 @@ export default defineComponent({
                      {headTopData.rhythmModeDirection !== "vertical" && <div class={styles.titImg}></div>}
                      {headTopData.rhythmModeDirection === "vertical" && (
                         <div
-                           class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`]]}
+                           class={[
+                              styles.rhythmImg,
+                              styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`],
+                              isFlash.value && styles.highlight
+                           ]}
                         ></div>
                      )}
                      {actRhythmData.value.map((item, index) => {

src/view/selection/index.module.less

@@ -83,8 +83,8 @@
 
 .scoreItem {
     position: absolute;
-    left: 60%;
-    top: -120%;
+    left: 80%;
+    top: -45px;
     transform: translateX(-50%);
     font-size: 18px;
     font-family: "Roboto", sans-serif;
@@ -143,7 +143,7 @@
     height: 20px;
     border-radius: 50%;
     background-color: #0EA7FF;
-    color: #673207;
+    color: #ffffff;
     font-size: 14px;
     font-weight: 600;
 }

src/view/selection/index.tsx

@@ -134,9 +134,9 @@ const calcNoteData = () => {
 					} catch (error) {}
 
 					// console.log("🚀 ~ staveEle:", staveBbox.height)
-					selectData.measureHeight = staveBbox.height
 					let compareVal = staveBbox.height - minMeasureHeigt
 					compareVal = compareVal > 0 ? compareVal : 0
+					selectData.measureHeight = staveBbox.height - compareVal
 					noteItem.staveBox = {
 						left: staveBbox.x - parentLeft + "px",
 						// top: ((item.stave.y || 0) - 5) * state.zoom + "px",

src/view/tick/index.tsx

@@ -129,10 +129,10 @@ export const handleStartTick = async () => {
 export default defineComponent({
 	name: "metronome",
 	setup() {
-		const posObj = {
+		const posObj = reactive({
 			top: "0px",
 			left: "0px"
-		}
+		})
 		function initPos() {
 			const musicAndSelectionDom = document.querySelector("#musicAndSelection")
 			const osmdSvgPage1Dom = musicAndSelectionDom?.querySelector("#osmdSvgPage1")
@@ -141,7 +141,7 @@ export default defineComponent({
 			const osmdSvgPage1DomPos = osmdSvgPage1Dom?.getBoundingClientRect()
 			const stafflineDomPos = stafflineDom?.getBoundingClientRect()
 			Object.assign(posObj,{
-				top: (osmdSvgPage1DomPos?.top||0)-(musicAndSelectionDomPos?.top||0)-18+"px",
+				top: (osmdSvgPage1DomPos?.top||0)-(musicAndSelectionDomPos?.top||0)+13+"px",
 				left: (stafflineDomPos?.left||0)-(osmdSvgPage1DomPos?.left||0)+"px"
 			})
 		}