Merge branch 'hqyDevNewVersion' of http://git.dayaedu.com/liushengqiang/music-score into feature-tianyong-newVersion

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

@@ -56,16 +56,20 @@
         margin-left: 10px;
         &.isMusicList{
             :global{
-                .van-notice-bar .van-notice-bar__content::after{
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    content: "";
-                    width: 11px;
-                    height: 6px;
-                    background: url("./image/sj.png") no-repeat;
-                    background-size: 100% 100%;                         
+                .van-notice-bar{
+                    &::after{
+                        max-width: calc(216px + 16px);
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        content: "";
+                        width: calc(var(--noticeBarWidth,100%) + 16px);
+                        height: 100%;
+                        background: url("./image/sj.png") no-repeat;
+                        background-size: 9px 6px;
+                        background-position: center right;                   
+                    }
+                    
                 }
             }
         }
@@ -77,10 +81,6 @@
                 font-weight: 600;
                 font-size: 18px;
                 color: #FFFFFF;
-                .van-notice-bar__content{
-                    position: relative;
-                    padding-right: 16px;
-                }
             }
         }
     }

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

@@ -1,4 +1,4 @@
-import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef, ComputedRef } from "vue";
+import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef, ComputedRef, nextTick } from "vue";
 import styles from "./index.module.less";
 
 import iconBack from "./image/icon-back.png";
@@ -558,7 +558,16 @@ export default defineComponent({
     onUnmounted(() => {
       window.removeEventListener("message", changePlay);
     });
-
+    const noticeBarWidth = ref<number>()
+    watch(()=>smoothAnimationState.isShow.value, ()=>{
+      // NoticeBar能不能滚动
+      if(smoothAnimationState.isShow.value && isMusicList.value){
+        nextTick(()=>{
+          const widthCon = (document.querySelector("#noticeBarRollDom .van-notice-bar__content") as any)?.offsetWidth || undefined
+          noticeBarWidth.value = widthCon
+        })
+      }
+    },{ immediate: true })
     // 设置改变触发
     watch(state.setting, () => {
       console.log(state.setting, "state.setting");
@@ -611,11 +620,18 @@ export default defineComponent({
           {/* 返回和标题 */}
           {
             !(state.playState == "play" || followData.start || evaluatingData.startBegin) &&
-              <div class={styles.headTopLeftBox}>
+              <div id="noticeBarRollDom" class={styles.headTopLeftBox}>
                 <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
                 {
                   smoothAnimationState.isShow.value ?
-                    <div class={[styles.title,isMusicList.value && styles.isMusicList, "driver-8"]} onClick={()=>{
+                    <div 
+                      style={
+                        noticeBarWidth.value ? {
+                          "--noticeBarWidth":noticeBarWidth.value + "px"
+                        } : {}
+                      }
+                      class={[styles.title,isMusicList.value && styles.isMusicList, "driver-8"]} 
+                      onClick={()=>{
                         isMusicList.value && (musicListShow.value = true)
                       }}>
                         <NoticeBar

src/page-instrument/view-detail/smoothAnimation/bird/index.module.less

@@ -3,7 +3,7 @@
 }
 .note{
     position: absolute;
-    width: 40Px;
+    width: 54Px;
     top: -16Px;
-    left: -28Px;
+    left: -38Px;
 }

src/page-instrument/view-detail/smoothAnimation/index.less

@@ -12,8 +12,8 @@
         position: relative;
         .smoothBot{
             position: absolute;
-            width: 40Px;
-            height: 50Px;
+            width: 36Px;
+            height: 46Px;
             left: 0;
             top: 0;
         }

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -162,8 +162,8 @@ export function moveSmoothAnimation(progress: number, activeIndex: number, isMov
    // 移动
    smoothAnimationMove(
       {
-         x: nowPointsPos.x - 20,
-         y: nowPointsPos.y - 25
+         x: nowPointsPos.x - 18,
+         y: nowPointsPos.y - 23
       },
       smoothAnimationState.pointsPos,
       smoothAnimationState.pointsPos.slice(0, nowIndex)
@@ -468,7 +468,7 @@ function createSmoothCurvePoints(pointsPos: pointsPosType, tension?: number, clo
  * 根据坐标划线
  */
 function drawSmoothCurve(context: CanvasRenderingContext2D, pointsPos: pointsPosType, progresspointsPos?: pointsPosType) {
-   context.lineWidth = 4
+   context.lineWidth = 2
    context.lineJoin = 'round';// 优化锯齿
    context.lineCap = 'round'; // 优化锯齿
    context.strokeStyle = "rgba(255,255,255,0.6)"