ls

src/router/schedule.ts

@@ -57,6 +57,14 @@ export const scheduleRoutes: Array<RouteConfig> = [
         meta: {
           title: '新建日程'
         }
+      },
+      {
+        path: 'speech-recognition',
+        name: 'SpeechRecognition',
+        component: () => import('@/views/schedule/speech-recognition.vue'),
+        meta: {
+          title: '语音识别'
+        }
       }
     ]
   }

src/views/schedule/create-events.vue

@@ -5,10 +5,9 @@
     @click-left="$router.go(-1)"
   >
     <app-icon
-    slot="right"
-      type="png"
+      slot="right"
+      icon-name="dot-h"
       class-name="w-5 h-3 flex items-center "
-      :path="require('@/assets/icons/dot-h.png')"
       @click="isShow()"
     />
     <div class="pt-14 px-4 pb-28">
@@ -20,10 +19,10 @@
       </div>
       <!-- 数据 -->
       <div>
-        <van-popup v-model="show" round position="bottom" :style="{ height: '15%' }" >
+        <van-action-sheet v-model="show" >
           <c-cell title="分享" titleColor="text-text-secondary "></c-cell>
           <c-cell title="删除" titleColor="text-text-secondary "></c-cell>
-        </van-popup>
+        </van-action-sheet>
         <c-cell title="日程名称" titleColor="text-text-secondary text-sm "/>
         <c-cell type="input" placeholder="请输入日程名称" leftinput="text-left text-text-secondary text-sm"/>
         <group-cell class="mt-4" title="基本信息" >
@@ -64,9 +63,9 @@
           </c-cell>
           <c-cell title="标签" titleColor="text-text-secondary text-sm">
             <div slot="right" class="flex text-white text-sm space-x-2">
-              <div class="bg-gray-300 rounded-full px-2.5" :class="class1" @click="clickTag(text1)">{{text1}}</div>
-              <div class="bg-gray-300 rounded-full px-2.5" :class="class2" @click="clickTag(text2)">{{text2}}</div>
-              <div class="bg-gray-300 rounded-full px-2.5" :class="class3" @click="clickTag(text3)">{{text3}}</div>
+              <div class="bg-gray-300 rounded-full px-2.5" :class="green" @click="clickTag(text1)">{{text1}}</div>
+              <div class="bg-gray-300 rounded-full px-2.5" :class="yellow" @click="clickTag(text2)">{{text2}}</div>
+              <div class="bg-gray-300 rounded-full px-2.5" :class="pink" @click="clickTag(text3)">{{text3}}</div>
             </div>
           </c-cell>
           <c-cell title="附件" titleColor="text-text-secondary text-sm">
@@ -79,7 +78,7 @@
           </c-cell>
         </group-cell>
         <!--按钮-->
-        <div class="fixed bottom-0 left-0 w-full px-4  bg-common-bg py-8">
+        <div class="fixed bottom-0 left-0 w-full px-4  bg-common-bg py-4">
           <c-button>
             发布
           </c-button>
@@ -91,10 +90,11 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { Popup } from 'vant';
 import { Switch } from 'vant';
+import { ActionSheet } from 'vant';
+
+Vue.use(ActionSheet);
 Vue.use(Switch);
-Vue.use(Popup);
 export default Vue.extend({
   name: "CreateEvents",
   components: {
@@ -117,9 +117,9 @@ export default Vue.extend({
       text1:'会议',
       text2:'外勤',
       text3:'出差',
-      class1:'',
-      class2:'',
-      class3:'',
+      green:'',
+      yellow:'',
+      pink:'',
     }
   },
   computed: {
@@ -135,24 +135,28 @@ export default Vue.extend({
       setInterval((res: any) => {
         let date=new Date();
         let mf = date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes();
-        let s=date.getSeconds();
-    　　let time = date.getHours()<12 ? date.getHours() +':'+ mf +'AM' : date.getHours() % 12 +':'+ mf +'PM';
-    　　this.gettime = time;
+        if(date.getHours()===24 || date.getHours()<12){
+         this.gettime = date.getHours()%12 +':'+ mf +'AM';
+        }else if(date.getHours()===12){
+          this.gettime = date.getHours() +':'+ mf +'PM';
+        }else if(date.getHours()>12){
+          this.gettime = date.getHours()%12 +':'+ mf +'PM';
+        }
       },1000)
     },
     clickTag(name:string){
       if(name==='会议'){
-        this.class2=''
-        this.class3=''
-        return this.class1='bg-gradient-to-r from-meeting-r to-meeting-l '
+        this.pink=''
+        this.yellow=''
+        return this.green='bg-gradient-to-r from-meeting-r to-meeting-l '
       }else if(name==='外勤'){
-         this.class1=''
-        this.class3=''
-        return this.class2='bg-gradient-to-r from-field-r to-field-l '
+         this.green=''
+        this.pink=''
+        return this.yellow='bg-gradient-to-r from-field-r to-field-l '
       }else if(name==='出差'){
-         this.class2=''
-        this.class1=''
-        return this.class3='bg-gradient-to-r from-trip-r to-trip-l '
+         this.yellow=''
+        this.green=''
+        return this.pink='bg-gradient-to-r from-trip-r to-trip-l '
       }
    },
   }

src/views/schedule/speech-recognition.vue

+<template>
+  <!-- 新建日程 -->
+  <main-page
+    left-arrow
+    @click-left="$router.go(-1)"
+  >
+    
+    <div class="pt-14 px-4 pb-28">
+      <!-- 文字部分 -->
+      <div class=" rounded-xl h-72 bg-white">
+
+      </div>
+      <!-- 语音部分 -->
+      <div class="flex items-center justify-center h-50 mt-4" @click="clickAnimation()">
+        <div class=" 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">
+                <div class="rounded-full w-1 h-5 bg-white" :class="long"></div>
+                <div class="rounded-full w-1 h-5 bg-white" :class="short"></div>
+                <div class="rounded-full w-1 h-5 bg-white" :class="long"></div>
+                <div class="rounded-full w-1 h-5 bg-white" :class="short"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-center text-xs text-text-secondary ">长按录音</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">
+          <div >
+            取消
+          </div>
+          <div>
+            确认
+          </div>
+        </div>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "SpeechRecognition",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+  },
+  created() {
+    // console.log(Mock, 'mock')
+    
+  },
+  data() {
+    return {
+      count:0,
+      larg:'',
+      long:'',
+      short:'',
+     
+    }
+  },
+  computed: {
+    // text() {
+    //   return this.currentRate.toFixed(0) + '%';
+    // },
+  },
+  methods:{
+   clickAnimation(){
+     this.count++
+     if(this.count%2===0){
+       this.count=0
+       this.larg=''
+       this.long=''
+       this.short=''
+     }else{
+       this.larg='larg'
+       this.long='long'
+       this.short='short'
+     }   
+   }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+  .larg{
+    animation:larg 2s linear infinite alternate ;
+  }
+  @keyframes larg
+  {
+    0%{width:80px;height:80px;}
+  }
+  .long{
+    animation:long 1s linear infinite alternate;
+  }
+  @keyframes long
+  {
+    0%{height:30px;}
+  }
+  .short{
+    animation:short 1s linear 0.5s infinite alternate;
+  }
+  @keyframes short
+  {
+    0%{height:30px;}
+  }
+</style>
\ No newline at end of file