合并

src/router/schedule.ts

@@ -73,6 +73,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,29 +5,28 @@
     @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">
       <!-- 环形图 -->
       <div class="flex items-center justify-center">
-         <img src="@/assets/images/clock.png" alt="" class="h-50">
-         <div class="absolute pb-8 font-bold text-lg">{{time}}:{{min}}PM</div>
-         <div class="absolute text-sm mt-1">120min</div>
+        <img src="@/assets/images/clock.png" alt="" class=" h-50">
+        <div class="absolute mb-8 font-bold text-lg">{{gettime}}</div>
+        <div class="absolute text-sm mt-1">120min</div>
       </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="基本信息" >
-          <c-cell title="地点" titleColor="text-text-secondary text-sm" :content="content">
+          <c-cell title="地点" titleColor="text-text-secondary text-sm">
             <app-icon
               slot="right"
                 type="png"
@@ -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: {
@@ -107,28 +107,19 @@ export default Vue.extend({
   },
   created() {
     // console.log(Mock, 'mock')
-    let date=new Date();
-    if(date.getHours()===12){
-      this.time=12
-    }else{
-      this.time=date.getHours() % 12;
-    }
-    this.min=date.getMinutes();
+    this.getTime()
   },
   data() {
     return {
       show:false,
-      content:'',
-      time:0,
-      min:0,
+      gettime:'',
       checked:true,
-      active:'',
       text1:'会议',
       text2:'外勤',
       text3:'出差',
-      class1:'',
-      class2:'',
-      class3:'',
+      green:'',
+      yellow:'',
+      pink:'',
     }
   },
   computed: {
@@ -140,23 +131,34 @@ export default Vue.extend({
     isShow(){
       this.show=!this.show
     },
+    getTime(){
+      setInterval((res: any) => {
+        let date=new Date();
+        let mf = date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes();
+        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-l to-meeting-r '
+        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-l to-field-r '
+         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-l to-trip-r '
+         this.yellow=''
+        this.green=''
+        return this.pink='bg-gradient-to-r from-trip-r to-trip-l '
       }
-     
    },
-   
   }
 })
 </script>

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 1s 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