样式修改

src/components/Metronome/Metronome.vue

@@ -137,6 +137,7 @@ const emits = defineEmits<{
   (e: 'windowMet'): void;
   (e: 'closeMet'): void;
   (e: 'speedNumChange', num: number): void;
+  (e: 'playStateChange', state: 'play' | 'pause'): void;
 }>();
 
 /* dom */
@@ -255,6 +256,9 @@ onMounted(() => {
   iptDoms?.setAttribute('maxlength', '3');
   getCircleBar(speedToScalc(speedNum.value));
 });
+watch(playState, () => {
+  emits('playStateChange', playState.value);
+});
 watch(speedNum, () => {
   if (playState.value === 'play') {
     pausePlay();
@@ -409,14 +413,13 @@ function getCircleBar(steps: number) {
 }
 defineExpose({
   startPlay,
-  pausePlay,
-  playState
+  pausePlay
 });
 </script>
 
 <style lang="less" scoped>
 .Metronome {
-  width: 656Px;
+  width: 565Px;
   height: 554Px;
   background: url('./imgs/bg.png') no-repeat;
   background-size: 100% 100%;
@@ -556,15 +559,14 @@ defineExpose({
               display: flex;
               justify-content: center;
               align-items: center;
+              padding-top: 2Px;
               & > div:first-child {
-                font-family: PingFangSC, PingFang SC;
                 font-weight: 500;
                 font-size: 30Px;
                 color: #333333;
               }
               & > div:last-child {
                 margin-left: 2Px;
-                font-family: PingFangSC, PingFang SC;
                 font-weight: 500;
                 font-size: 14Px;
                 color: #333333;
@@ -635,7 +637,7 @@ defineExpose({
       line-height: 6Px;
       background: #ffffff;
       border-radius: 4Px;
-      width: 331Px;
+      width: 194Px;
       .n-slider-rail__fill {
         background: linear-gradient(90deg, #63daff 0%, #1798ff 100%);
         border-radius: 4Px;
@@ -689,6 +691,8 @@ defineExpose({
       &::before {
         background: #47a7fe !important;
         border-radius: 6Px !important;
+        left: 6Px;
+        right: 6Px;
       }
     }
     .n-base-select-option__content {
@@ -770,6 +774,8 @@ defineExpose({
       &::before {
         background: #47a7fe !important;
         border-radius: 6Px !important;
+        left: 6Px;
+        right: 6Px;
       }
     }
     .beatSymbolImg {
@@ -806,4 +812,13 @@ defineExpose({
     }
   }
 }
+.metronomeConBoxClass_drag
+  .v-binder-follower-container
+  .n-base-select-menu.n-select-menu {
+  --n-border-radius: 10Px !important;
+  .n-scrollbar-rail.n-scrollbar-rail--vertical{
+    right: 1Px;
+    opacity: 0.6;
+  }
+}
 </style>

src/components/Metronome/MetronomeBox.vue

@@ -1,11 +1,12 @@
 <template>
   <div v-if="isDrag" class="metronomeMinConMask"></div>
   <div
-    v-if="windowMet"
     class="metronomeMinCon"
     :class="[metronomeMinConBoxClass]"
     :style="metronomeMinConDragData.styleDrag.value"
     @mousedown="hanldeMetronomeMinmousedown"
+    v-if="metronomeShow || windowMet"
+    v-show="!metronomeShow"
   >
     <div class="topMetronomeMin">
       <img
@@ -13,7 +14,7 @@
         :style="{
           '--rotateWagTime': rotateWagTime + 's'
         }"
-        :class="{ pausedWagAnimation: playState === 'pause' }"
+        :class="{ playWagAnimation: playState === 'play' }"
         src="./imgs/zhen.png"
       />
       <img class="bai" src="./imgs/bai.png" />
@@ -26,7 +27,6 @@
         @click="
           () => {
             metronomeDom?.startPlay();
-            playState = 'play';
           }
         "
         src="./imgs/paly.png"
@@ -36,7 +36,6 @@
         @click="
           () => {
             metronomeDom?.pausePlay();
-            playState = 'pause';
           }
         "
         v-else
@@ -73,6 +72,7 @@
         @closeMet="handleCloseMet"
         @windowMet="handleWindowMet"
         @speedNumChange="handleSpeedNumChange"
+        @playStateChange="handlePlayStateChange"
       ></Metronome>
     </div>
   </NModal>
@@ -111,7 +111,13 @@ watch(metronomeShow, () => {
   }
 });
 const playState = ref<'play' | 'pause'>('pause');
+function handlePlayStateChange(state: 'play' | 'pause') {
+  playState.value = state;
+}
 const rotateWagTime = ref((60 * 2) / 90);
+function handleSpeedNumChange(num: number) {
+  rotateWagTime.value = parseFloat(((60 * 2) / num).toFixed(4));
+}
 onMounted(() => {
   document.addEventListener('visibilitychange', documentHidePause);
 });
@@ -121,16 +127,15 @@ onUnmounted(() => {
 function documentHidePause() {
   if (document.visibilityState === 'hidden') {
     metronomeDom.value?.pausePlay();
-    playState.value = 'pause';
   }
 }
 function handleCloseMet() {
   metronomeShow.value = false;
   windowMet.value = false;
+  playState.value = 'pause';
 }
 function handleWindowMet() {
   windowMet.value = true;
-  playState.value = metronomeDom.value!.playState;
   nextTick(() => {
     computedTransformOrigin();
     metronomeShow.value = false;
@@ -139,9 +144,6 @@ function handleWindowMet() {
 function handleSetting() {
   metronomeShow.value = true;
 }
-function handleSpeedNumChange(num: number) {
-  rotateWagTime.value = parseFloat(((60 * 2) / num).toFixed(4));
-}
 /* 指针拖动 */
 const users = useUserStore();
 const metronomeMinConBoxClass = 'metronomeMinConBoxClass_drag';
@@ -208,29 +210,28 @@ function hanldeMetronomeMinmousedown() {
       width: 13Px;
       height: 35Px;
       position: absolute;
-      bottom: 6Px;
+      bottom: 8Px;
       left: 50%;
       transform: translateX(-50%);
       transform-origin: 50% 100%;
-      animation: rotateWag var(--rotateWagTime) linear infinite;
-      &.pausedWagAnimation {
-        animation-play-state: paused;
+      &.playWagAnimation {
+        animation: rotateWag var(--rotateWagTime) linear infinite;
       }
       @keyframes rotateWag {
         0% {
-          transform: translateX(-50%) rotate(0deg);
+          transform: translateX(-50%) rotate(-90deg);
         }
         25% {
-          transform: translateX(-50%) rotate(90deg);
+          transform: translateX(-50%) rotate(0deg);
         }
         50% {
-          transform: translateX(-50%) rotate(0deg);
+          transform: translateX(-50%) rotate(90deg);
         }
         75% {
-          transform: translateX(-50%) rotate(-90deg);
+          transform: translateX(-50%) rotate(0deg);
         }
         100% {
-          transform: translateX(-50%) rotate(0deg);
+          transform: translateX(-50%) rotate(-90deg);
         }
       }
     }