[timer] 计时器适配手机

masquevil · Jul 7, 2024 · eb341ca · eb341ca
1 parent 6ac9bdc
commit eb341ca
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/apps/timer/AppView.vue b/src/apps/timer/AppView.vue
@@ -4,7 +4,7 @@ import { useIntervalFn } from '@vueuse/core';
 import speak from './speak';
 
 const settingMinute = ref();
-const settingSecond = ref(0);
+const settingSecond = ref();
 const workingTime = ref(0);
 const speedUpSecond = ref();
 const stopTip = ref();
@@ -48,11 +48,11 @@ const { isActive, pause, resume } = useIntervalFn(
       speak(stopTip.value || '计时结束', { rate: speakSpeeds.normal });
       pause();
     } else if (workingTime.value % 60 === 0) {
-      speak(`剩余${speekWorkingTime.value}`, { rate: speakSpeeds.fast });
+      speak(`剩余${speekWorkingTime.value}`, { rate: speakSpeeds.normal });
     } else if (workingTime.value === 30) {
-      speak(`${speekWorkingTime.value}`, { rate: speakSpeeds.fast });
+      speak(`剩余${speekWorkingTime.value}`, { rate: speakSpeeds.normal });
     } else if (workingTime.value === 10) {
-      speak(`${speekWorkingTime.value}`, { rate: speakSpeeds.fast });
+      speak(`${speekWorkingTime.value}`, { rate: speakSpeeds.normal });
     } else if (workingTime.value <= 3) {
       speak(`${workingTime.value}`, { rate: speakSpeeds.fast });
     }
@@ -195,7 +195,9 @@ function onStop() {
 }
 
 .timer {
-  --timer-height: calc(100vh - 100px - 48px);
+  --timer-wide-height: calc(100vh - 100px - 48px);
+  --timer-compact-height: calc(80vw - 40px);
+  --timer-height: min(var(--timer-wide-height), var(--timer-compact-height));
 
   margin-bottom: 12px;
   width: 100%;
@@ -230,4 +232,15 @@ function onStop() {
   align-items: center;
   gap: 8px;
 }
+
+@media screen and (max-width: 720px) {
+  .action-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+  .action-card {
+    max-width: 100%;
+  }
+}
 </style>
diff --git a/src/apps/timer/speak.ts b/src/apps/timer/speak.ts
@@ -25,7 +25,6 @@ export default function speak(text: string, config: VoiceConfig = {}) {
   // 选择语音
   const listArr = window.speechSynthesis.getVoices();
   const preferredVoice = listArr.find((item) => item.name === 'Google 普通话（中国大陆）');
-  console.log('xxx', preferredVoice, listArr);
   if (preferredVoice) {
     instance.voice = preferredVoice;
   }