修改问题与样式

src/views/tempo-practice/index.module.less

@@ -139,7 +139,6 @@
 
 
     .beat {
-      transition: all .1s ease;
       border: 2px solid #fff;
       // width: 65px;
       // height: 86px;
@@ -172,7 +171,6 @@
     border: 3px solid #fff;
     background: #FFFFFF;
     position: relative;
-    transition: all .1s ease;
 
     .direction {
       position: absolute;
@@ -380,7 +378,6 @@
       .beat {
         width: 85px;
         height: 105px;
-        transition: all .1s ease;
 
         img {
           width: 64px;
@@ -401,7 +398,6 @@
         .beat {
           width: 42px !important;
           height: 56px !important;
-          transition: all .1s ease;
 
           img {
             width: 28px;

src/views/tempo-practice/index.tsx

@@ -150,8 +150,8 @@ export default defineComponent({
     const handlePlayType = () => {
       handleStop();
       // 判断是否有设置
-
-      if (setting.playType === 'beat') {
+      const playType = getSettingValue('playType');
+      if (playType === 'beat') {
         updateSettingValue('playType', 'tempo');
       } else {
         updateSettingValue('playType', 'beat');
@@ -271,6 +271,13 @@ export default defineComponent({
     };
 
     onMounted(() => {
+      // 安卓的状态栏
+      postMessage({
+        api: 'setStatusBarVisibility',
+        content: {
+          isVisibility: 0
+        }
+      });
       if (route.query.modeType) {
         state.modeType = route.query.modeType;
       }
@@ -289,6 +296,22 @@ export default defineComponent({
       window.removeEventListener('message', onIframeHandle);
     });
 
+    watch(
+      () => state.settingStatus,
+      () => {
+        if (!state.settingStatus) {
+          state.speedList.forEach((item: any) => {
+            if (item.value === getSettingValue('speed')) {
+              item.color = '#1CACF1';
+            } else {
+              item.color = '#060606';
+            }
+          });
+          handleStop();
+        }
+      }
+    );
+
     expose({
       resetSetting
     });

src/views/tempo-practice/setting-modal/index.tsx

@@ -161,8 +161,7 @@ export default defineComponent({
           props.class,
           styles.settingContainer,
           state.win === 'pc' ? styles.pcS : '',
-          state.platform === 'modal' && state.win !== 'pc' ? styles.modalS : '',
-          'settingContainer_pc'
+          state.platform === 'modal' && state.win !== 'pc' ? styles.modalS : ''
         ]}>
         {/* <div class={styles.title}></div> */}
         <div class={[styles.iconTitBox, 'iconTitBoxMove']}>
@@ -288,7 +287,7 @@ export default defineComponent({
                         <div
                           draggable={true}
                           onDragstart={(e: any) => {
-                            console.log('1111');
+                            // console.log('1111');
                             e.dataTransfer.setData(
                               'text',
                               JSON.stringify({

src/views/tempo-practice/setting-pc-modal/index.module.less

@@ -6,6 +6,9 @@
   overflow: hidden;
 
   .settingModalShow {
+    z-index: 10;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
     height: 100% !important;
     width: 354px !important;
   }
@@ -71,6 +74,12 @@
   background: url("../images/pc_bg.png") no-repeat center center / cover;
   width: 639px;
 
+  z-index: 10;
+  // &::before {
+  //   content: '';
+
+  // }
+
   .btnSubmit {
     position: absolute;
     bottom: 11px;

src/views/tempo-practice/setting-pc-modal/index.tsx

@@ -30,7 +30,8 @@ export default defineComponent({
       <div
         class={[
           styles.settingPcModal,
-          state.platform === 'modal' && state.win !== 'pc' ? styles.modal : ''
+          state.platform === 'modal' && state.win !== 'pc' ? styles.modal : '',
+          'settingContainer_pc'
         ]}>
         <div class={styles.conCon}>
           <div class={styles.container}>
@@ -63,6 +64,7 @@ export default defineComponent({
                             part.forEach((child: any, cj: number) => {
                               if (i === ci && jIndex === cj) {
                                 child.url = dropItem.url;
+                                child.index = dropItem.index;
                               }
                             });
                           }
@@ -100,7 +102,7 @@ export default defineComponent({
 
         {route.query.platform === 'modal' && (
           <Dragbom
-            showGuide={props.showGuide}
+            showGuide={true}
             onGuideDone={() => emit('guideDone')}></Dragbom>
         )}
       </div>