feat: 新版评测报告页面init

src/page-instrument/report-new/index.module.less

@@ -0,0 +1,119 @@
+.reportDetail {
+    width: 100%;
+    min-height: 100vh;
+    --header-height: 62px;
+}
+
+.reportHead {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    padding: 0 22px;
+    height: var(--header-height);
+    .backIcon {
+        width: 32px;
+        height: 32px;
+    }
+    .content {
+        flex: 1;
+        margin: 0 12px;
+        .title {
+            display: flex;
+            align-items: center;
+            .titleName {
+                font-size: 16px;
+                color: #131415;
+                font-weight: 600;
+                margin-right: 6px;
+            }
+            .titleLevel {
+                border: 1px solid #01C1B5;
+                border-radius: 2px;
+                padding: 0 3px;
+                line-height: 16px;
+                font-size: 12px;
+                color: #01C1B5;
+                font-weight: normal;
+                transform: scale(0.9);
+            }
+        }
+        .score {
+            margin-top: 4px;
+            display: flex;
+            align-items: center;
+            span {
+                font-size: 12px;
+                color: #777777;
+            }
+            .total {
+                font-weight: 500;
+                color: #FF2F0E;
+            }
+        }        
+    }
+    .right {
+        display: flex;
+        align-items: center;
+        .fItem {
+            color: #1A1A1A;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            i {
+                width: 16px;
+                height: 16px;
+                border-radius: 4px;
+                border: 1px solid #88974C;
+                background: rgba(253, 255, 171, 0.41);
+                margin-right: 6px;
+            }
+        }
+        .sItem {
+            display: flex;
+            align-items: center;
+            color: #1A1A1A;
+            font-size: 13px;
+            margin-left: 20px;
+            i {
+                width: 16px;
+                height: 16px;
+                border-radius: 4px;
+                background: rgba(16, 216, 203, 0.6);
+                margin-right: 6px;
+            }
+        }
+        .videoIcon {
+            width: 71px;
+            height: 28px;
+            margin-left: 20px;
+            cursor: pointer;
+        }
+        :global{
+            .van-switch{
+                margin-left: 6px;
+                width: 25px;
+                height: 13px;
+                background-color: transparent!important;
+                background-image: url("./image/guan.png");
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                border-radius: 0;
+                &.van-switch--on{
+                    background-image: url("./image/kai.png");
+                }
+                .van-switch__node{
+                    display: none;
+                }
+            }
+        }        
+    }
+}
+
+.scoreTable {
+    padding-top: calc(var(--header-height) + 54px);
+    background: #ECFDFC;
+}

src/page-instrument/report-new/index.tsx

@@ -0,0 +1,75 @@
+import { Skeleton, Switch } from "vant";
+import { defineComponent, onBeforeMount, onBeforeUnmount, onMounted, reactive, Transition, watch, ref } from "vue";
+import state, { isRhythmicExercises, getMusicDetail, EnumMusicRenderType } from "../../state";
+import MusicScore from "../../view/music-score";
+import styles from "./index.module.less";
+import { getQuery } from "/src/utils/queryString";
+import backIcon from "./image/back_icon.png";
+import videoIcon from "./image/video_icon.png";
+
+
+export default defineComponent({
+  name: "music-list",
+  setup() {
+    const query: any = getQuery();
+    const scoreData = reactive({
+        videoFilePath: "", // 回放视频路径
+        openRealPitch: false,
+    });
+
+    onBeforeMount(() => {
+
+    });
+
+    onMounted(async () => {
+      state.isEvaluatReport = true;
+    });
+
+
+    return () => (
+      <div class={styles.reportDetail}>     
+        <div class={styles.reportHead}>
+            <img class={styles.backIcon} src={backIcon} />
+            <div class={styles.content}>
+                <div class={styles.title}>
+                    <span class={styles.titleName}>天空之城</span>
+                    <span class={styles.titleLevel}>入门级｜速度90</span>
+                </div>
+                <div class={styles.score}>
+                    <span class={styles.total}>总分: 78</span>
+                    <span>｜音准: 67</span>
+                    <span>｜节奏: 87</span>
+                    <span>｜完整度: 87</span>
+                </div>
+            </div>
+            <div class={styles.right}>
+                <div class={styles.fItem}>
+                    <i></i>
+                    <span>标准音高</span>
+                </div>
+                <div class={styles.sItem}>
+                    <i></i>
+                    <span>演奏音高</span>
+                </div>
+                <Switch 
+                    v-model={scoreData.openRealPitch}
+                    onChange={ async (value) => {
+                        // 
+                    }}
+                ></Switch>                
+                <img class={styles.videoIcon} src={videoIcon} />
+            </div>
+        </div>
+
+        <div class={styles.scoreTable}>
+            <table>
+                <tr>
+                    <td></td>
+                </tr>
+            </table>
+        </div>
+
+      </div>
+    );
+  },
+});

src/page-instrument/router.ts

@@ -28,6 +28,10 @@ const routes: RouteRecordRaw[] = [
     component: () => import("./simple-detail/index"),
   },
   {
+    path: "/report-new",
+    component: () => import("./report-new/index"),
+  },
+  {
     path: "/:pathMatch(.*)*",
     component: Notfind,
     meta: {

src/page-instrument/view-evaluat-report/index.tsx

@@ -250,7 +250,7 @@ export default defineComponent({
           }
           stemEl?.classList.add(colorsClass[errType]);
           svgEl?.classList.add(colorsClass[errType]);
-          console.log(123456,'添加颜色',errType)
+          // console.log(123456,'添加颜色',errType)
           // 评测过的音符，需要给小节添加背景色
           // if (errType !== "NOT_PLAYED") {
           //   const staveNote = svgEl?.parentNode?.parentNode?.querySelector(".vf-stave");