播放过程中 模式提示

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

@@ -8,6 +8,29 @@
     padding: 0 30px;
     background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
 }
+.modeWarn{
+    position: fixed;
+    left: 30px;
+    bottom: 20px;
+    border-radius: 16px;
+    background-color: rgba(12,51,107,0.61);
+    padding: 6px 11px;
+    align-items: center;
+    display: flex;
+    opacity: 0;
+    transition: all .3s ease-in;
+    & > div{
+        margin-left: 4px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: rgba(255,255,255,0.7);
+    }    
+    & > img{
+        width: 18px;
+        height: 18px;
+    }
+}
 .headTopLeftBox{
     position: fixed;
     top: 20px;

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

@@ -640,6 +640,14 @@ export default defineComponent({
                 <div class={styles.title}>{state.modeType==="practise" ? '练习模式' : state.modeType==="follow" ? "跟练模式" : state.modeType==="evaluating" ? "评测模式" : ""}</div>
               </div>
           }
+          {/* 模式提醒 */}
+          {
+            state.modeType === "practise" &&
+              <div class={[styles.modeWarn, "practiseModeWarn"]}>
+                <img src={state.playType === "play" ? headImg("perform1.png") : headImg("sing1.png")} />
+                <div>{state.playType === "play" ? "演奏场景" : "演唱场景"}</div>
+              </div>
+          }
           {/* 功能按钮 */}
           <div
             class={[styles.headRight]}

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

@@ -40,6 +40,11 @@
 
         &.headHide {
             margin-bottom: calc(0Px - var(--header-height));
+            :global{
+                .practiseModeWarn{
+                    opacity: 1;
+                }
+            }
         }
     }