节奏律动模式 样式改动

src/view/rhythm/index copy.tsx

@@ -1,64 +0,0 @@
-import { computed, defineComponent, onBeforeMount, ref } from "vue"
-import styles from "./index.module.less"
-import state from "/src/state"
-import { headTopData } from "/src/page-instrument/header-top"
-
-export default defineComponent({
-   name: "rhythm",
-   setup(props, { emit, expose }) {
-      type rhythmData = {
-         isDot: boolean
-         denominator: number
-         isRestFlag: boolean
-         rhythmImg: string
-      }
-      const rhythmImgObj: Record<string, any> = {
-         "1/1": "1",
-         "1/2": "2",
-         "1/4": "3",
-         "1/8": "4",
-         "1/16": "5",
-         "1/32": "6",
-         "1/1.": "1",
-         "1/2.": "2",
-         "1/4.": "3",
-         "1/8.": "4",
-         "1/16.": "5",
-         "1/32.": "6",
-         rest: "7"
-      }
-      const rhythmData = ref<rhythmData[]>([])
-      const actRhythmData = computed<rhythmData[]>(() => {
-         return rhythmData.value.slice(state.activeNoteIndex, state.activeNoteIndex + 7)
-      })
-      function initRhythmData() {
-         rhythmData.value = state.times.map(item => {
-            const noteElement = item.noteElement
-            const isDot = !!noteElement?.DotsXml
-            const denominator = noteElement?.typeLength?.denominator || 4
-            const isRestFlag = !!noteElement?.isRestFlag
-            return {
-               isDot,
-               denominator,
-               isRestFlag,
-               rhythmImg: isRestFlag ? "rest" : `1/${denominator}${isDot ? "." : ""}`
-            }
-         })
-      }
-      initRhythmData()
-      return () => {
-         return (
-            <>
-               <div class={[styles.rhythm, headTopData.rhythmModeDirection === "vertical" && styles.vertical]}>
-                  <div class={styles.titImg}></div>
-                  <div class={styles.rhythmBox}>
-                     {actRhythmData.value.map(item => {
-                        return <div class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[item.rhythmImg]}`]]}></div>
-                     })}
-                  </div>
-               </div>
-            </>
-         )
-      }
-   }
-})

src/view/rhythm/index.module.less

@@ -30,15 +30,12 @@
             background-position: center;
             margin-right: 14px;
             &.active{
-                box-shadow: 0 0 0 2px #36A8FF; 
-            }
-            &:first-child{
-                width: 74px;
-                height: 74px;
-                background-size: 74px 74px;
+                width: 70px;
+                height: 70px;
+                background-size: 70px 70px;
+                border-radius: 19px;
                 background-color: #35A8FF;
-                border-radius: 20px;
-                box-shadow: 0 0 0 3px #ffffff;
+                box-shadow: 0 0 0 3px #ffffff; 
             }
             &:last-child{
                 margin-right: 0;
@@ -77,6 +74,10 @@
         .rhythmBox{
             flex-wrap: wrap;
             .rhythmImg{
+                &.active{
+                    background-color: #ffffff;
+                    box-shadow: 0 0 0 2px #35A8FF;   
+                }
                 margin-bottom: 20px;
                 width: 40px;
                 height: 40px;
@@ -103,6 +104,7 @@
                     background-size: 110px 110px;
                     border-radius: 28px;
                     box-shadow: 0 0 0 4px #FFFFFF;
+                    background-color: #35A8FF;
                 }
             }
         }

src/view/rhythm/index.tsx

@@ -63,7 +63,11 @@ export default defineComponent({
                <div class={[styles.rhythm, headTopData.rhythmModeDirection === "vertical" && styles.vertical]}>
                   <div class={styles.titImg}></div>
                   <div class={styles.rhythmBox}>
-                     <div class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`]]}></div>
+                     {headTopData.rhythmModeDirection === "vertical" && (
+                        <div
+                           class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`]]}
+                        ></div>
+                     )}
                      {actRhythmData.value.map((item, index) => {
                         return (
                            <div