Browse Source

feat: 评测模式UI、评测结果UI

TIANYONG 4 months ago
parent
commit
5ae13a7601
28 changed files with 18 additions and 11 deletions
  1. 2 2
      instrument.html
  2. BIN
      src/page-instrument/evaluat-model/countdown/imgs/step1.png
  3. BIN
      src/page-instrument/evaluat-model/countdown/imgs/step2.png
  4. BIN
      src/page-instrument/evaluat-model/countdown/imgs/step3.png
  5. BIN
      src/page-instrument/evaluat-model/evaluat-result/img/bczp.png
  6. BIN
      src/page-instrument/evaluat-model/evaluat-result/img/bg1.png
  7. BIN
      src/page-instrument/evaluat-model/evaluat-result/img/bg2.png
  8. BIN
      src/page-instrument/evaluat-model/evaluat-result/img/ckzp.png
  9. BIN
      src/page-instrument/evaluat-model/evaluat-result/img/icon-badge.png
  10. BIN
      src/page-instrument/evaluat-model/evaluat-result/img/zlyc.png
  11. BIN
      src/page-instrument/evaluat-model/icons/lanya_erji.png
  12. BIN
      src/page-instrument/evaluat-model/icons/no_erji.png
  13. BIN
      src/page-instrument/evaluat-model/icons/tip_erji.png
  14. BIN
      src/page-instrument/evaluat-model/icons/youxian_erji.png
  15. 1 1
      src/page-instrument/evaluat-model/index.tsx
  16. BIN
      src/page-instrument/follow-model/microphone/images/microBg.png
  17. BIN
      src/page-instrument/header-top/image/reset.png
  18. BIN
      src/page-instrument/header-top/image/resetAct.png
  19. 6 0
      src/page-instrument/header-top/index.module.less
  20. 1 1
      src/page-instrument/header-top/index.tsx
  21. 1 0
      src/page-instrument/view-detail/index.module.less
  22. 6 6
      src/state.ts
  23. BIN
      src/view/evaluating/icons/1.png
  24. BIN
      src/view/evaluating/icons/2.png
  25. BIN
      src/view/evaluating/icons/3.png
  26. BIN
      src/view/evaluating/icons/4.png
  27. BIN
      src/view/evaluating/icons/5.png
  28. 1 1
      src/view/evaluating/index.tsx

+ 2 - 2
instrument.html

@@ -53,11 +53,11 @@
   </script> -->
 
   <script type="module" src="/src/page-instrument/main.ts"></script>
-  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
+  <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
   <script>
     // VConsole will be exported to `window.VConsole` by default.
     var vConsole = new window.VConsole();
-  </script>  
+  </script>   -->
 </body>
 
 </html>

BIN
src/page-instrument/evaluat-model/countdown/imgs/step1.png


BIN
src/page-instrument/evaluat-model/countdown/imgs/step2.png


BIN
src/page-instrument/evaluat-model/countdown/imgs/step3.png


BIN
src/page-instrument/evaluat-model/evaluat-result/img/bczp.png


BIN
src/page-instrument/evaluat-model/evaluat-result/img/bg1.png


BIN
src/page-instrument/evaluat-model/evaluat-result/img/bg2.png


BIN
src/page-instrument/evaluat-model/evaluat-result/img/ckzp.png


BIN
src/page-instrument/evaluat-model/evaluat-result/img/icon-badge.png


BIN
src/page-instrument/evaluat-model/evaluat-result/img/zlyc.png


BIN
src/page-instrument/evaluat-model/icons/lanya_erji.png


BIN
src/page-instrument/evaluat-model/icons/no_erji.png


BIN
src/page-instrument/evaluat-model/icons/tip_erji.png


BIN
src/page-instrument/evaluat-model/icons/youxian_erji.png


+ 1 - 1
src/page-instrument/evaluat-model/index.tsx

@@ -292,7 +292,7 @@ export default defineComponent({
       // let rate = state.speed / state.originSpeed;
       const rate = state.basePlayRate * state.originAudioPlayRate; // 播放倍率
       // rate = parseFloat(rate.toFixed(2));
-      console.log("速度比例", rate, "速度", state.speed);
+      // console.log("速度比例", rate, "速度", state.speed);
       calculateInfo = formatTimes();
       // 评测的速度,如果是选段,则选选段开头小节的速度
       const evaluatSpeed = state.sectionStatus && state.section.length === 2 && state.section[0].measureSpeed ? state.section[0].measureSpeed * state.basePlayRate : state.speed;

BIN
src/page-instrument/follow-model/microphone/images/microBg.png


BIN
src/page-instrument/header-top/image/reset.png


BIN
src/page-instrument/header-top/image/resetAct.png


+ 6 - 0
src/page-instrument/header-top/index.module.less

@@ -284,6 +284,12 @@
             ;
         }
 
+        &.cxSetBtn:active {
+            >img {
+                content: url("./image/resetAct.png");
+            }
+        }
+
         &.settingMode:active {
             >img {
                 content: url("./image/icon_menuAct.png");

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

@@ -903,7 +903,7 @@ export default defineComponent({
             )}
             {
               <div
-                class={[styles.btn, restoreBtn.value.disabled && styles.disabled, "driver-5-1"]}
+                class={[styles.btn, restoreBtn.value.disabled && styles.disabled, styles.cxSetBtn, "driver-5-1"]}
                 onClick={() => resetSettings()}
               >
                 <img class={styles.iconBtn} src={headImg("reset.png")} />

+ 1 - 0
src/page-instrument/view-detail/index.module.less

@@ -60,6 +60,7 @@
         height: var(--header-height);
         transition: all .3s;
         z-index: 99;
+        background: rgba(255, 255, 255, 0.7);
 
         &.headHide {
             margin-top: calc(0Px - var(--header-height));

+ 6 - 6
src/state.ts

@@ -1620,7 +1620,7 @@ function initMusicSource(data: any, tracks: string[], partIndex: number, workRec
   }
   // 当没有任何曲目的时候报错
   if (!musicObj?.audioFileUrl && !accompanyObj?.audioFileUrl && !fanSongObj?.audioFileUrl && !banSongObj?.audioFileUrl && !fanSongObj?.solmizationFileUrl && !fanSongObj?.femaleSolmizationFileUrl) {
-    state.noMusicSource = true // 没有音源文件
+    state.noMusicSource = !data.midiFileUrl ? true : false // 没有音源文件
     // 独奏的时候
     if(musicSheetType === "SINGLE"){
       // 并且是midi没有midi文件的时候
@@ -1863,7 +1863,7 @@ const setState = (data: any, index: number) => {
   }
   // 非APP打开的页面,禁止评测
   if (!storeData.isApp) {
-    state.enableEvaluation = false;
+    // state.enableEvaluation = false;
   }
   /**
    * 默认渲染什么谱面类型 & 能否转谱逻辑
@@ -2170,7 +2170,7 @@ watch(
         measureNum = nextMeasureNum
       }
       if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex))) {
-        item.querySelector('.vf-custom-bg')?.setAttribute("fill", state.isSimplePage ? "rgba(45, 199, 170, 0.3)" : "rgba(1, 193, 181, 0.2)")
+        item.querySelector('.vf-custom-bg')?.setAttribute("fill", state.isSimplePage ? "rgba(45, 199, 170, 0.3)" : "rgba(45, 199, 170, 0.2)")
         // 预备小节
         if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML && state.section.length === 2){
           item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255, 193, 48, 0.15)")
@@ -2190,7 +2190,7 @@ watch(
             rightMeasureNumberXML = state.section[0].MeasureNumberXML
           }
           if(measureNum >= leftMeasureNumberXML && measureNum <= rightMeasureNumberXML){
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(1, 193, 181, 0.15)")
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(45, 199, 170, 0.15)")
           }
           // 预备小节
           if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML){
@@ -2239,7 +2239,7 @@ watch(
           item.querySelector('.vf-custom-bg')?.setAttribute("fill", "transparent")
         }
         if (measureNum >= leftMeasureNumberXML && measureNum <= rightMeasureNumberXML) {
-          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(1, 193, 181, 0.15)")
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(45, 199, 170, 0.15)")
         }
         // 预备小节
         if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML){
@@ -2262,7 +2262,7 @@ watch(
           measureNum = nextMeasureNum
         }
         if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex)) ) {
-          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(1, 193, 181, 0.15)")
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(45, 199, 170, 0.15)")
         } else {
           item.querySelector('.vf-custom-bg')?.setAttribute("fill", "transparent")
         }

BIN
src/view/evaluating/icons/1.png


BIN
src/view/evaluating/icons/2.png


BIN
src/view/evaluating/icons/3.png


BIN
src/view/evaluating/icons/4.png


BIN
src/view/evaluating/icons/5.png


+ 1 - 1
src/view/evaluating/index.tsx

@@ -83,7 +83,7 @@ export const evaluatingData = reactive({
 	/** 评测结果 */
 	resultData: {} as any,
 	/** 评测结果弹窗 */
-	resulstMode: false,
+	resulstMode: true,
 	/** 是否是完整评测 */
 	isComplete: false,
 	/**  */