节奏律动 横屏 兼容宽度

src/view/rhythm/index.module.less

@@ -3,14 +3,11 @@
     height: 100%;
     position: relative;
     .titImg{
-        position: absolute;
-        left: 30px;
-        top: 50%;
-        transform: translateY(-50%);
         width: 100px;
         height: 38px;
         background: url("./imgs/tit.png") no-repeat;
         background-size: 100% 100%;
+        margin-right: 30px;
     }
     .rhythmBox{
         position: absolute;
@@ -67,9 +64,11 @@
         overflow: hidden;
         background: linear-gradient( 180deg, #AFE8FF 0%, #D9F3FE 100%);
         .titImg{
+            position: absolute;
             top: 10px;
             left: 50%;
             transform: translateX(-50%);
+            margin-right: 0;
         }
         .rhythmBox{
             flex-wrap: wrap;

src/view/rhythm/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onBeforeMount, ref } from "vue"
+import { computed, defineComponent, onMounted, ref } from "vue"
 import styles from "./index.module.less"
 import state from "/src/state"
 import { headTopData } from "/src/page-instrument/header-top"
@@ -57,12 +57,26 @@ export default defineComponent({
          }, [])
       }
       initRhythmData()
+      onMounted(() => {
+         // 横屏的时候 当宽度大于屏幕的时候缩小一点
+         if (headTopData.rhythmModeDirection !== "vertical") {
+            const element = document.querySelector(".rhythmBox-scale-element") as HTMLElement | null
+            if (element) {
+               const screenWidth = document.documentElement.clientWidth
+               const originalWidth = element.offsetWidth
+               // 保留一位小数
+               const scale = screenWidth < originalWidth ? Math.floor((screenWidth / originalWidth) * 10) / 10 : 1
+               element.style.transform = `translate(-50%, -50%) scale(${scale})`
+            }
+         }
+      })
       return () => {
          return (
             <>
                <div class={[styles.rhythm, headTopData.rhythmModeDirection === "vertical" && styles.vertical]}>
-                  <div class={styles.titImg}></div>
-                  <div class={styles.rhythmBox}>
+                  {headTopData.rhythmModeDirection === "vertical" && <div class={styles.titImg}></div>}
+                  <div class={[styles.rhythmBox, "rhythmBox-scale-element"]}>
+                     {headTopData.rhythmModeDirection !== "vertical" && <div class={styles.titImg}></div>}
                      {headTopData.rhythmModeDirection === "vertical" && (
                         <div
                            class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`]]}