mo 1 year ago
parent
commit
8d122180c7

+ 8 - 2
src/components/timerMeter/components/countdown.tsx

@@ -231,11 +231,14 @@ export default defineComponent({
                 <h4> 分</h4>
                 <h4> 分</h4>
 
 
                 <div class={styles.FlipClock}>
                 <div class={styles.FlipClock}>
+                  <div class={styles.numberWrap}>
                   <Flipper ref={flipperMinute1} />
                   <Flipper ref={flipperMinute1} />
                   <Flipper ref={flipperMinute2} />
                   <Flipper ref={flipperMinute2} />
+                  </div>
+
                   <div  class={styles.chioseWrap} class={[styles.chioseWrap,isPlaying.value ?styles.chioseHidden:'']}>
                   <div  class={styles.chioseWrap} class={[styles.chioseWrap,isPlaying.value ?styles.chioseHidden:'']}>
                     <img src={add} class={styles.add} alt="" onClick={()=>addSecondTimer(60)}/>
                     <img src={add} class={styles.add} alt="" onClick={()=>addSecondTimer(60)}/>
-                    <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} onUpdate:value={updateMin} v-model:value={mine.value}></NInputNumber>
+                    <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} onBlur={updateMin} v-model:value={mine.value}></NInputNumber>
                     <img src={minus} class={styles.minus} alt="" onClick={()=>minusSecondTimer(60)} />
                     <img src={minus} class={styles.minus} alt="" onClick={()=>minusSecondTimer(60)} />
                   </div>
                   </div>
                 </div>
                 </div>
@@ -249,11 +252,14 @@ export default defineComponent({
               <div class={styles.timerItemTopCore}>
               <div class={styles.timerItemTopCore}>
                 <h4> 秒 </h4>
                 <h4> 秒 </h4>
                 <div class={styles.FlipClock}>
                 <div class={styles.FlipClock}>
+                  <div class={styles.numberWrap}>
                   <Flipper ref={flipperSecond1} />
                   <Flipper ref={flipperSecond1} />
                   <Flipper ref={flipperSecond2} />
                   <Flipper ref={flipperSecond2} />
+                  </div>
+
                   <div  class={[styles.chioseWrap,isPlaying.value ?styles.chioseHidden:'']}>
                   <div  class={[styles.chioseWrap,isPlaying.value ?styles.chioseHidden:'']}>
                     <img src={add} class={styles.add} alt=""  onClick={()=>addSecondTimer(1)}/>
                     <img src={add} class={styles.add} alt=""  onClick={()=>addSecondTimer(1)}/>
-                    <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} v-model:value={second.value}  onUpdate:value={updateSecond}></NInputNumber>
+                    <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} v-model:value={second.value}  onBlur={updateSecond}></NInputNumber>
                     <img src={minus} class={styles.minus} alt="" onClick={()=>minusSecondTimer(1)} />
                     <img src={minus} class={styles.minus} alt="" onClick={()=>minusSecondTimer(1)} />
                   </div>
                   </div>
                 </div>
                 </div>

+ 11 - 7
src/components/timerMeter/components/positive.tsx

@@ -125,10 +125,10 @@ export default defineComponent({
     const onReset = () => {
     const onReset = () => {
 
 
       suspendNum()
       suspendNum()
-      nextTick(() => {
-        count.value = 0
+      count.value = 0
+      setTimeout(() => {
         init()
         init()
-      })
+      }, 300)
 
 
     }
     }
     onMounted(() => {
     onMounted(() => {
@@ -148,8 +148,10 @@ export default defineComponent({
                 <h4> 分</h4>
                 <h4> 分</h4>
 
 
                 <div class={styles.FlipClock}>
                 <div class={styles.FlipClock}>
-                  <Flipper ref={flipperMinute1} />
-                  <Flipper ref={flipperMinute2} />
+                  <div class={styles.numberWrap}>
+                    <Flipper ref={flipperMinute1} />
+                    <Flipper ref={flipperMinute2} />
+                  </div>
                 </div>
                 </div>
               </div>
               </div>
               <div class={styles.timerItemTopCore}>
               <div class={styles.timerItemTopCore}>
@@ -161,8 +163,10 @@ export default defineComponent({
                 <h4> 秒</h4>
                 <h4> 秒</h4>
 
 
                 <div class={styles.FlipClock}>
                 <div class={styles.FlipClock}>
-                  <Flipper ref={flipperSecond1} />
-                  <Flipper ref={flipperSecond2} />
+                  <div class={styles.numberWrap}>
+                    <Flipper ref={flipperSecond1} />
+                    <Flipper ref={flipperSecond2} />
+                  </div>
                 </div>
                 </div>
               </div>
               </div>
             </div>
             </div>

+ 22 - 0
src/components/timerMeter/index.module.less

@@ -166,6 +166,19 @@
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
 
 
+  :global {
+    .n-input__input {
+      line-height: 33px !important;
+      height: 33px !important;
+    }
+
+    .n-input__input-el {
+      line-height: 33px !important;
+      height: 33px !important;
+
+    }
+  }
+
   .add {
   .add {
     width: 16px;
     width: 16px;
     height: 16px;
     height: 16px;
@@ -179,8 +192,17 @@
     height: 4px;
     height: 4px;
     cursor: pointer;
     cursor: pointer;
   }
   }
+
+
 }
 }
 
 
 .chioseHidden {
 .chioseHidden {
   visibility: hidden;
   visibility: hidden;
+}
+
+.numberWrap {
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #fff;
+  box-shadow: 4px 4px 0px 0px #A2CAEE;
 }
 }

+ 2 - 2
src/components/timerMeter/modals/flipper.vue

@@ -90,11 +90,11 @@ export default {
   height: 178px;
   height: 178px;
   line-height: 178px;
   line-height: 178px;
   /* border: solid 1px #000; */
   /* border: solid 1px #000; */
-  border-radius: 10px;
+
   background: #fff;
   background: #fff;
   font-size: 128px;
   font-size: 128px;
   color: #131415;
   color: #131415;
-  box-shadow: 4px 4px 0px 0px #A2CAEE;
+
   text-align: center;
   text-align: center;
   font-family: 'DINA';
   font-family: 'DINA';
 }
 }

+ 7 - 3
src/custom-plugins/guide-page/music-guide.tsx

@@ -109,9 +109,13 @@ export default defineComponent({
 
 
       const ele: HTMLElement = document.getElementById(`music-${data.step}`)!;
       const ele: HTMLElement = document.getElementById(`music-${data.step}`)!;
 
 
-      if (ele) {
+      if (ele ) {
         const eleRect = ele.getBoundingClientRect();
         const eleRect = ele.getBoundingClientRect();
-
+        console.log(ele.style.display,'ele')
+        if(ele.style.display == 'none'){
+          handleNext()
+          return
+        }
         const left = data.steps[data.step].eleRectPadding?.left || 0;
         const left = data.steps[data.step].eleRectPadding?.left || 0;
         const top = data.steps[data.step].eleRectPadding?.top || 0;
         const top = data.steps[data.step].eleRectPadding?.top || 0;
         const width = data.steps[data.step].eleRectPadding?.width || 0;
         const width = data.steps[data.step].eleRectPadding?.width || 0;
@@ -140,7 +144,7 @@ export default defineComponent({
     })
     })
 
 
     const handleNext = () => {
     const handleNext = () => {
-      if (data.step >= 4) {
+      if (data.step >= 3) {
         endGuide();
         endGuide();
         return;
         return;
       }
       }