语音识别

src/views/schedule/speech-recognition.vue

@@ -10,7 +10,7 @@
 
       </div>
       <!-- 语音部分 -->
-      <div class="flex items-center justify-center h-50 w-80 mt-4" @click="clickAnimation()">
+      <!-- <div class="flex items-center justify-center h-50 w-80 mt-4" @click="clickAnimation()">
         <div class="absolute rounded-full bg-green-100 w-40 h-40 flex items-center justify-center" :class="larg">
           <div class=" rounded-full bg-green-200 w-32 h-32 flex items-center justify-center" :class="larg">
             <div class="little rounded-full bg-green-300 w-20 h-20 flex items-center justify-between px-6">
@@ -22,6 +22,19 @@
           </div>
         </div>
         <div class="flex items-center justify-center text-xs text-text-secondary mt-50">长按录音</div>
+      </div> -->
+      <div class="wrapper relative h-50 mt-4 overflow-hidden">
+        <div class="circle rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-green-200" />
+        <div class="circle-small rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-green-300" />
+        <div class="rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 bg-green-400" />
+        <div class="absolute w-7 h-5 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 line-wrapper flex items-center justify-between">
+          <div
+            v-for="i in 4"
+            :key="i"
+            class="rounded-full w-1 bg-white odd:h-3 even:h-5"
+            :class="i % 2 === 0 ? 'yyy' : 'xxx'"
+          ></div>
+        </div>
       </div>
       
       <div class="flex justify-between fixed bottom-0 left-0 w-full px-16 text-sm text-text-secondary bg-common-bg py-4">
@@ -105,4 +118,60 @@ export default Vue.extend({
   {
     0%{height:30px;}
   }
+
+  // .wrapper {
+  //   -webkit-backface-visibility: hidden;
+  //   -moz-backface-visibility: hidden;
+  //   backface-visibility: hidden;
+  //   -webkit-transform-style: preserve-3d;
+  //   -moz-transform-style: preserve-3d;
+  //   transform-style: preserve-3d;
+  //   -webkit-perspective: 1000;
+  //   -moz-perspective: 1000;
+  //   perspective: 1000;
+  // }
+
+  .circle {
+    animation: circle 1s linear infinite normal;
+    &-small {
+      animation: circle 1s linear 0.5s infinite normal;
+    }
+  }
+
+  .xxx {
+    animation: shortLine 0.5s ease-in-out infinite alternate;
+  }
+  .yyy {
+    animation: longLine 0.5s ease-in-out infinite alternate
+  }
+
+  @keyframes circle {
+    0% {
+      width: 5rem;
+      height: 5rem;
+      opacity: 1;
+    }
+    100% {
+      width: 12rem;
+      height: 12rem;
+      opacity: 0;
+    }
+  }
+
+  @keyframes shortLine {
+    0% {
+      height: 0.75rem;
+    }
+    100% {
+      height: 1.25rem;
+    }
+  }
+  @keyframes longLine {
+    0% {
+      height: 1.25rem;
+    }
+    100% {
+      height: 0.75rem;
+    }
+  }
 </style>
\ No newline at end of file

tailwind.config.js

@@ -992,7 +992,7 @@ module.exports = {
     gridRowStart: ['responsive'],
     gridTemplateColumns: ['responsive'],
     gridTemplateRows: ['responsive'],
-    height: ['responsive'],
+    height: ['responsive', 'odd', 'even'],
     hueRotate: ['responsive'],
     inset: ['responsive'],
     invert: ['responsive'],