计时器

src/components/layout/index.module.less

@@ -281,11 +281,12 @@
 :global{
   .timerMeterConBoxClass_drag{
     box-shadow:initial;
+    width: 651px;
     .topDragDom{
       position: absolute;
       left: 0;
       top: 0;
-      width: 100%;
+      width: calc(100% - 31px);
       height: 40px;
     }
   }
@@ -295,7 +296,7 @@
   width: 31px;
   height: 32px;
   top: 16px;
-  right: -31px;
+  right: 0;
   cursor: pointer;
 }
 .propWrap {

src/components/timerMeter/TimerMeter.vue

@@ -2,27 +2,41 @@
   <div class="timerMeter">
     <div class="timeCon">
       <div class="timeBox">
-        <div class="timeInput mmTimeIpt" :class="{ timeFocus: mmFocus }">
+        <div class="timeInput mmTimeIpt">
           <div
             class="timeInputBtn"
             v-if="timeType === 'countdown'"
             :class="{ palyDisabled: playState === 'play' }"
           >
-            <img src="./img/upBtn.png" @click="handleMMTime(10)" />
-            <img src="./img/upBtn.png" @click="handleMMTime(1)" />
+            <div @click="handleMMTime(10)">
+              <img src="./img/upBtn.png" />
+            </div>
+            <div @click="handleMMTime(1)">
+              <img src="./img/upBtn.png" />
+            </div>
           </div>
           <div class="timeInputBox">
             <n-input-number
               :disabled="timeType === 'countup' || playState === 'play'"
-              @blur="handlemmblur"
-              @focus="handlemmfocus"
               placeholder=""
-              v-model:value="mmValue"
+              :value="mmValue"
               :format="(value: number | null)=>{
                 return value?(value<10?`0${value}`:value+''):'00'
               }"
-              :min="0"
-              :max="59"
+              :input-props="{
+                maxLength: '2'
+              }"
+              @update:value="(num:number)=>{
+                if(num){
+                  if(num<0){
+                    mmValue=0
+                  }else if(num>59){
+                    mmValue=59
+                  }else{
+                    mmValue=num
+                  }
+                }
+              }"
               :show-button="false"
             />
           </div>
@@ -31,32 +45,50 @@
             v-if="timeType === 'countdown'"
             :class="{ palyDisabled: playState === 'play' }"
           >
-            <img src="./img/downBtn.png" @click="handleMMTime(-10)" />
-            <img src="./img/downBtn.png" @click="handleMMTime(-1)" />
+            <div @click="handleMMTime(-10)">
+              <img src="./img/downBtn.png" />
+            </div>
+            <div @click="handleMMTime(-1)">
+              <img src="./img/downBtn.png" />
+            </div>
           </div>
         </div>
         <img class="midBg" src="./img/midBg.png" />
-        <div class="timeInput ssTimeIpt" :class="{ timeFocus: ssFocus }">
+        <div class="timeInput ssTimeIpt">
           <div
             class="timeInputBtn"
             v-if="timeType === 'countdown'"
             :class="{ palyDisabled: playState === 'play' }"
           >
-            <img src="./img/upBtn.png" @click="handleSSTime(10)" />
-            <img src="./img/upBtn.png" @click="handleSSTime(1)" />
+            <div @click="handleSSTime(10)">
+              <img src="./img/upBtn.png" />
+            </div>
+            <div @click="handleSSTime(1)">
+              <img src="./img/upBtn.png" />
+            </div>
           </div>
           <div class="timeInputBox">
             <n-input-number
               :disabled="timeType === 'countup' || playState === 'play'"
-              @blur="handlessblur"
-              @focus="handlessfocus"
               placeholder=""
-              v-model:value="ssValue"
+              :value="ssValue"
               :format="(value: number | null)=>{
                 return value?(value<10?`0${value}`:value+''):'00'
               }"
-              :min="0"
-              :max="59"
+              :input-props="{
+                maxLength: '2'
+              }"
+              @update:value="(num:number)=>{
+                if(num){
+                  if(num<0){
+                    ssValue=0
+                  }else if(num>59){
+                    ssValue=59
+                  }else{
+                    ssValue=num
+                  }
+                }
+              }"
               :show-button="false"
             />
           </div>
@@ -65,8 +97,12 @@
             v-if="timeType === 'countdown'"
             :class="{ palyDisabled: playState === 'play' }"
           >
-            <img src="./img/downBtn.png" @click="handleSSTime(-10)" />
-            <img src="./img/downBtn.png" @click="handleSSTime(-1)" />
+            <div @click="handleSSTime(-10)">
+              <img src="./img/downBtn.png" />
+            </div>
+            <div @click="handleSSTime(-1)">
+              <img src="./img/downBtn.png" />
+            </div>
           </div>
         </div>
       </div>
@@ -131,22 +167,6 @@ onUnmounted(() => {
   soundVIdeo.pause();
 });
 
-// input 状态
-const mmFocus = ref(false);
-const ssFocus = ref(false);
-function handlemmblur() {
-  mmFocus.value = false;
-}
-function handlessblur() {
-  ssFocus.value = false;
-}
-function handlemmfocus() {
-  mmFocus.value = true;
-}
-function handlessfocus() {
-  ssFocus.value = true;
-}
-
 // 计时类型
 const timeType = ref<'countdown' | 'countup'>('countdown');
 function handleChangeTimeType(type: 'countdown' | 'countup') {
@@ -175,23 +195,23 @@ watch(timeNum, () => {
 });
 function handleMMTime(num: number) {
   if (playState.value === 'play') return;
-  let newMmValue = mmValue.value + num;
+  const newMmValue = mmValue.value + num;
   if (newMmValue > 59) {
-    newMmValue = 59;
+    return;
   }
   if (newMmValue < 0) {
-    newMmValue = 0;
+    return;
   }
   mmValue.value = newMmValue;
 }
 function handleSSTime(num: number) {
   if (playState.value === 'play') return;
-  let newSsValue = ssValue.value + num;
+  const newSsValue = ssValue.value + num;
   if (newSsValue > 59) {
-    newSsValue = 59;
+    return;
   }
   if (newSsValue < 0) {
-    newSsValue = 0;
+    return;
   }
   ssValue.value = newSsValue;
 }
@@ -286,36 +306,13 @@ function handleCountUpStart() {
         width: 132px;
         height: 100%;
         position: relative;
-        padding: 6px 0 2px;
-        &.timeFocus::after {
-          content: '';
-          width: 1px;
-          height: 94px;
-          position: absolute;
-          background-color: #fff;
-          left: -10px;
-          top: 50%;
-          transform: translateY(-50%);
-          animation: blink 1.1s infinite;
-          @keyframes blink {
-            0% {
-              opacity: 1;
-            }
-            50% {
-              opacity: 0;
-            }
-            100% {
-              opacity: 1;
-            }
-          }
-        }
         &.mmTimeIpt,
         &.ssTimeIpt {
           &::before {
             content: 'M';
             position: absolute;
             font-weight: bold;
-            font-size: 16px;
+            font-size: 18px;
             color: #ffffff;
             top: 9px;
             right: -16px;
@@ -338,17 +335,20 @@ function handleCountUpStart() {
               --n-padding-left: initial !important;
               --n-padding-right: initial !important;
               --n-color-disabled: initial !important;
-              --n-caret-color: #3a3939 !important;
+              --n-caret-color: #ffffff !important;
               .n-input__border,
               .n-input__state-border {
                 display: none;
               }
               .n-input__input-el {
                 text-align: center;
-                font-family: DINAlternate, DINAlternate !important;
+                font-family: DINA !important;
                 font-weight: bold !important;
-                font-size: 126px !important;
+                font-size: 136px !important;
                 color: #ffffff !important;
+                &::selection {
+                  background: #555252;
+                }
               }
               &.n-input--disabled {
                 cursor: initial;
@@ -360,25 +360,41 @@ function handleCountUpStart() {
           }
         }
         .timeInputBtn {
-          width: 78px;
+          width: 100%;
           flex-shrink: 0;
           display: flex;
           justify-content: space-between;
-          & > img {
-            cursor: pointer;
-            width: 12px;
-            height: 8px;
-          }
-          &.palyDisabled > img {
-            opacity: 0.4;
+          &.palyDisabled > div {
             cursor: initial;
+            & > img {
+              opacity: 0.4;
+            }
+          }
+
+          & > div {
+            display: flex;
+            align-items: center;
+            height: 20px;
+            width: 50%;
+            cursor: pointer;
+            &:first-child {
+              flex-direction: row-reverse;
+              & > img {
+                margin: 0 22px 0 0;
+              }
+            }
+            & > img {
+              margin-left: 20px;
+              width: 12px;
+              height: 8px;
+            }
           }
         }
       }
     }
     .timeTools {
       flex-shrink: 0;
-      width: 138px;
+      min-width: 138px;
       .timeType {
         width: 100%;
         height: 40px;
@@ -441,7 +457,7 @@ function handleCountUpStart() {
         background: url('./img/timeNum.png') no-repeat;
         background-size: 100% 100%;
         font-weight: 600;
-        font-size: 16px;
+        font-size: 18px;
         color: #7c7c7c;
         line-height: 38px;
         text-align: center;

src/views/attend-class/index.module.less

@@ -808,11 +808,12 @@
 :global{
   .timerMeterConBoxClass_drag{
     box-shadow:initial;
+    width: 651px;
     .topDragDom{
       position: absolute;
       left: 0;
       top: 0;
-      width: 100%;
+      width: calc(100% - 31px);
       height: 40px;
     }
   }
@@ -822,7 +823,7 @@
   width: 31px;
   height: 32px;
   top: 16px;
-  right: -31px;
+  right: 0;
   cursor: pointer;
 }
 .workContainer {