cnhis-design-vue 2.1.78 → 2.1.79

package/packages/multi-chat/chat/voice.vue

@@ -1,431 +1,431 @@
-<template>
-  <div class="voice-page" v-show="canRecordering">
-    <div class="voice-containter">
-      <a-icon class="close-icon" type="close" @click="closeVoice" />
-      <div class="img-wrap">
-        <div class="end-wrap" v-if="!isEndRecord">
-          <img src="../img/end-voice.png" alt="" />
-          <a-progress
-            @click.native="stopRecored"
-            class="progress-ele"
-            type="circle"
-            :percent="percent"
-            :showInfo="false"
-            :width="122"
-            :strokeWidth="2"
-            :showText="false"
-            :strokeColor="'#C80606'"
-          ></a-progress>
-        </div>
-        <div class="play-wrap" v-else>
-          <img v-if="!isRecordPlay" src="../img/audio-new.png" alt="" @click="toggleVoice(true)" />
-          <img v-else src="../img/audio-play.gif" alt="" @click="toggleVoice(false)" />
-        </div>
-      </div>
-      <p>{{ voiceText }}</p>
-      <div class="time-wrap">{{ handleVoiceTime }}</div>
-      <div class="btn-wrap">
-        <span @click="deleteVoice">删除</span>
-        <span @click="uploadFile" class="send-btn">发送</span>
-      </div>
-    </div>
-    <div style="display:none;">
-      <audio controls autoplay ref="audio" preload="auto" crossOrigin="anonymous" media-player="audioPlayer" :src="curAudioUrl" @ended="audioEnd"></audio>
-    </div>
-  </div>
-</template>
-<script>
-import { mapActions } from '../store/helper';
-import fetch from '@/utils/chatFetch';
-import Recorder from 'recorder-core';
-import 'recorder-core/src/engine/mp3';
-import 'recorder-core/src/engine/mp3-engine';
-// 由于大部分情况下ios-weixin的支持需要用到amr解码器，应当把amr引擎也加载进来
-import 'recorder-core/src/engine/beta-amr';
-import 'recorder-core/src/engine/beta-amr-engine';
-import { Icon, Progress } from 'ant-design-vue';
-
-export default {
-  name: 'Voice',
-  inject: ['store'],
-  components: {
-    [Progress.name]: Progress,
-    [Icon.name]:Icon,
-  },
-  props: {
-    showVoice: {
-      default: false
-    }
-  },
-  data() {
-    return {
-      rec: null,
-      recBlob: null,
-      recordTimer: null,
-      recordTime: 60,
-      voiceType: 2, // 1: C端, 2: B,
-      voiceTime: 0,
-
-      curDuration: 0,
-      voiceText: '',
-      curAudioUrl: '',
-      isEndRecord: false,
-      isRecordPlay: false,
-
-      voiceStartTime: 0,
-      isSendLoading: false,
-      isRecordering: false,
-      canRecordering: false
-    };
-  },
-
-  computed: {
-    handleVoiceTime() {
-      let res = this.voiceTime > 9 ? this.voiceTime : '0' + this.voiceTime;
-      return `00:${res}`;
-    },
-    percent() {
-      return (this.voiceTime / 60) * 100;
-    }
-  },
-  watch: {
-    showVoice: {
-      immediate: true,
-      handler(val) {
-        if (!val) return;
-        this.recOpen();
-      }
-    }
-  },
-  // 生命周期
-  beforeDestory() {
-    this.resetData();
-  },
-  created() {},
-
-  mounted() {},
-
-  // 方法
-  methods: {
-    ...mapActions(['sendMessage']),
-    handleEnv() {
-      this.recOpen(true);
-    },
-    closeVoice() {
-      this.resetData();
-      this.$emit('closeVoice');
-    },
-    resetData(isRestart) {
-      if (!isRestart) {
-        this.recClose();
-        this.rec = null;
-        this.curAudioUrl && (window.URL || window.webkitURL).revokeObjectURL(this.curAudioUrl);
-      }
-      this.recordTimer && clearInterval(this.recordTimer);
-      this.recBlob = null;
-      this.recordTimer = null;
-      this.recordTime = 60;
-      this.voiceTime = 0;
-      this.curDuration = 0;
-      this.voiceText = '点击停止录音';
-      this.curAudioUrl = '';
-      this.isEndRecord = false;
-      this.isRecordPlay = false;
-      this.voiceStartTime = 0;
-      this.isSendLoading = false;
-      this.isRecordering = false;
-    },
-    deleteVoice() {
-      let _this = this;
-      this.$confirm({
-        title: '确定要删除这段录音么',
-        okText: '确定',
-        cancelText: '取消',
-        onOk() {
-          _this.reStart();
-        },
-        onCancel() {}
-      });
-    },
-    reStart() {
-      this.resetData();
-      this.recOpen();
-    },
-    recOpen(flag) {
-      let _this = this;
-      _this.isRecordering = true;
-      _this.rec = Recorder({
-        type: 'mp3',
-        sampleRate: 16000,
-        bitRate: 16,
-        onProcess: function() {}
-      });
-      _this.voiceStartTime = new Date().getTime();
-
-      _this.rec?.open(
-        function() {
-          _this.canRecordering = true;
-          console.log('recOpen --- 已打开录音，可以点击开始了');
-          !flag && _this.recStart();
-          if (flag) {
-            setTimeout(() => {
-              _this.recStop();
-            }, 500);
-          }
-          // rec.start() 此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程
-        },
-        function(msg, isUserNotAllow) {
-          // 用户拒绝未授权或不支持
-          // clearTimeout(t);
-          _this.isRecordering = false;
-          _this.canRecordering = false;
-          _this.voiceText = '无法录音';
-          _this.closeVoice();
-          if (!flag) _this.$message.error('当前无法录音，请检查设备和权限');
-          console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg);
-        }
-      );
-    },
-    recStart() {
-      if (this.recordTimer) clearInterval(this.recordTimer);
-      if (this.rec && Recorder.IsOpen()) {
-        this.voiceText = '点击停止录音';
-        this.voiceStartTime = new Date().getTime();
-        this.rec.start();
-        this.recordTimer = setInterval(() => {
-          this.recordTime--;
-          this.voiceTime++;
-          if (this.recordTime <= 0) {
-            clearInterval(this.recordTimer);
-            this.recStop();
-          }
-        }, 1000);
-      } else {
-        console.log('未打开录音');
-      }
-    },
-    recStop() {
-      let _this = this;
-      if (_this.recordTimer) clearInterval(_this.recordTimer);
-      _this.isEndRecord = true;
-      _this.recordTime = 60;
-
-      if (!(_this.rec && Recorder.IsOpen())) {
-        console.log('recStop --- 未打开录音');
-        _this.isRecordering = false;
-        _this.resetVoiceSetting('未打开录音');
-        return;
-      }
-      _this.rec?.stop(
-        function(blob, duration) {
-          _this.recBlob = blob;
-          let tempDuration = Math.round(duration / 1000);
-          let curDuration;
-          if (tempDuration > 59) {
-            curDuration = 60;
-          } else {
-            curDuration = parseInt(duration / 1000);
-          }
-          _this.curDuration = curDuration;
-          if (curDuration < 1) {
-            _this.isRecordering = false;
-            _this.resetVoiceSetting('时间过短');
-            _this.$message.warning('时间过短');
-            return;
-          }
-          _this.recClose();
-        },
-        function(msg) {
-          _this.isRecordering = false;
-          _this.resetVoiceSetting('录音失败');
-          console.log('录音失败:' + msg, 1);
-        }
-      );
-    },
-    recClose() {
-      if (this.rec) {
-        this.rec.close();
-        this.voiceText = '录制完成，播放录音';
-        this.isRecordering = false;
-        console.log('recClose --- 已关闭');
-      } else {
-        this.isRecordering = false;
-        this.voiceText = '未打开录音';
-        console.log('recClose --- 未打开录音', 1);
-      }
-    },
-    stopRecored() {
-      this.recStop();
-    },
-    toggleVoice(isPlay) {
-      this.isRecordPlay = isPlay;
-      if (isPlay) {
-        this.recPlay();
-      } else {
-        this.audioEnd();
-      }
-    },
-    recPlay() {
-      if (!this.recBlob) {
-        console.log('请先录音，然后停止后再播放', 1);
-        return;
-      }
-      this.curAudioUrl = (window.URL || window.webkitURL).createObjectURL(this.recBlob);
-    },
-    audioEnd() {
-      this.curAudioUrl && (window.URL || window.webkitURL).revokeObjectURL(this.curAudioUrl);
-      this.curAudioUrl = '';
-      this.isRecordPlay = false;
-    },
-    uploadFile() {
-      if (this.isRecordering) return this.$message.warning('正在录音，请先点击停止录音，再次发送！');
-      if (this.isSendLoading) return this.$message.warning('正在发送...');
-      if (!this.recBlob) return;
-      if (this.curDuration < 1) {
-        return this.$message.warning('时间过短');
-      }
-      this.isSendLoading = true;
-      let form = new FormData();
-      form.append('file', this.recBlob, 'recorder.mp3');
-      // /hospitalUpload/file /api/inside/file
-      fetch
-        .post('/hospitalUpload/file', form)
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let { url = '' } = data?.map || {};
-            if (!url) return;
-            this.voiceSend(url, this.curDuration);
-          } else {
-            this.isSendLoading = false;
-            this.$message.warning(data.resultMsg || '上传失败');
-          }
-        })
-        .catch(err => {
-          this.resetVoiceSetting();
-          this.isSendLoading = false;
-          this.$message.warning(err?.resultMsg || '上传失败');
-          console.log(err, '上传失败的回调啦啦啦');
-        });
-    },
-    voiceSend(url, duration) {
-      if (!url) return;
-      let body = {
-        content: url,
-        type: 6,
-        duration
-      };
-      this.closeVoice();
-      this.sendMessage(body)
-        .then(() => {
-          this.isSendLoading = false;
-          this.recBlob = null;
-        })
-        .catch(() => {
-          this.isSendLoading = false;
-          this.$message.warning('发送失败');
-        });
-    },
-    resetVoiceSetting(text = '录制完成，播放录音') {
-      this.voiceText = text;
-      if (this.recordTimer) clearInterval(this.recordTimer);
-      this.voiceStartTime = 0;
-      this.curDuration = 0;
-      this.recordTime = 60;
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.voice-page {
-  &::before {
-    content: ' ';
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    cursor: default;
-  }
-  position: fixed;
-  z-index: 300000;
-  top: calc(50% - 232px);
-  left: calc(50% - 207px);
-  width: 414px;
-  height: 464px;
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0px 0px 16px 6px rgba(0, 0, 0, 0.14);
-  cursor: default;
-  .voice-containter {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    padding: 66px;
-    text-align: center;
-    .close-icon {
-      position: absolute;
-      top: 14px;
-      right: 14px;
-      font-size: 16px;
-      color: #979797;
-    }
-    .img-wrap {
-      width: 136px;
-      height: 136px;
-      margin: 26px auto;
-      cursor: pointer;
-      .end-wrap {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-        .progress-ele {
-          position: absolute;
-          top: 48%;
-          left: 49.8%;
-          transform: translate(-50%, -50%);
-        }
-      }
-      .play-wrap {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 120px;
-        height: 120px;
-        background: linear-gradient(180deg, #2d7aff 0%, #2c5df4 100%);
-        box-shadow: 0px 5px 8px 0px rgba(44, 101, 247, 0.39);
-        border-radius: 50%;
-        img {
-          width: 35px;
-        }
-      }
-    }
-    p {
-      margin-bottom: 10px;
-      font-size: 16px;
-    }
-    .time-wrap {
-      font-size: 30px;
-    }
-    .btn-wrap {
-      margin-top: 35px;
-      span {
-        display: inline-block;
-        padding: 8px 32px;
-        border-radius: 20px;
-        border: 1px solid #d9d9d9;
-        cursor: pointer;
-      }
-      .send-btn {
-        margin-left: 18px;
-        background: #2d7aff;
-        color: #fff;
-        border-color: #2d7aff;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="voice-page" v-show="canRecordering">
+    <div class="voice-containter">
+      <a-icon class="close-icon" type="close" @click="closeVoice" />
+      <div class="img-wrap">
+        <div class="end-wrap" v-if="!isEndRecord">
+          <img src="../img/end-voice.png" alt="" />
+          <a-progress
+            @click.native="stopRecored"
+            class="progress-ele"
+            type="circle"
+            :percent="percent"
+            :showInfo="false"
+            :width="122"
+            :strokeWidth="2"
+            :showText="false"
+            :strokeColor="'#C80606'"
+          ></a-progress>
+        </div>
+        <div class="play-wrap" v-else>
+          <img v-if="!isRecordPlay" src="../img/audio-new.png" alt="" @click="toggleVoice(true)" />
+          <img v-else src="../img/audio-play.gif" alt="" @click="toggleVoice(false)" />
+        </div>
+      </div>
+      <p>{{ voiceText }}</p>
+      <div class="time-wrap">{{ handleVoiceTime }}</div>
+      <div class="btn-wrap">
+        <span @click="deleteVoice">删除</span>
+        <span @click="uploadFile" class="send-btn">发送</span>
+      </div>
+    </div>
+    <div style="display:none;">
+      <audio controls autoplay ref="audio" preload="auto" crossOrigin="anonymous" media-player="audioPlayer" :src="curAudioUrl" @ended="audioEnd"></audio>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions } from '../store/helper';
+import fetch from '@/utils/chatFetch';
+import Recorder from 'recorder-core';
+import 'recorder-core/src/engine/mp3';
+import 'recorder-core/src/engine/mp3-engine';
+// 由于大部分情况下ios-weixin的支持需要用到amr解码器，应当把amr引擎也加载进来
+import 'recorder-core/src/engine/beta-amr';
+import 'recorder-core/src/engine/beta-amr-engine';
+import { Icon, Progress } from 'ant-design-vue';
+
+export default {
+  name: 'Voice',
+  inject: ['store'],
+  components: {
+    [Progress.name]: Progress,
+    [Icon.name]:Icon,
+  },
+  props: {
+    showVoice: {
+      default: false
+    }
+  },
+  data() {
+    return {
+      rec: null,
+      recBlob: null,
+      recordTimer: null,
+      recordTime: 60,
+      voiceType: 2, // 1: C端, 2: B,
+      voiceTime: 0,
+
+      curDuration: 0,
+      voiceText: '',
+      curAudioUrl: '',
+      isEndRecord: false,
+      isRecordPlay: false,
+
+      voiceStartTime: 0,
+      isSendLoading: false,
+      isRecordering: false,
+      canRecordering: false
+    };
+  },
+
+  computed: {
+    handleVoiceTime() {
+      let res = this.voiceTime > 9 ? this.voiceTime : '0' + this.voiceTime;
+      return `00:${res}`;
+    },
+    percent() {
+      return (this.voiceTime / 60) * 100;
+    }
+  },
+  watch: {
+    showVoice: {
+      immediate: true,
+      handler(val) {
+        if (!val) return;
+        this.recOpen();
+      }
+    }
+  },
+  // 生命周期
+  beforeDestory() {
+    this.resetData();
+  },
+  created() {},
+
+  mounted() {},
+
+  // 方法
+  methods: {
+    ...mapActions(['sendMessage']),
+    handleEnv() {
+      this.recOpen(true);
+    },
+    closeVoice() {
+      this.resetData();
+      this.$emit('closeVoice');
+    },
+    resetData(isRestart) {
+      if (!isRestart) {
+        this.recClose();
+        this.rec = null;
+        this.curAudioUrl && (window.URL || window.webkitURL).revokeObjectURL(this.curAudioUrl);
+      }
+      this.recordTimer && clearInterval(this.recordTimer);
+      this.recBlob = null;
+      this.recordTimer = null;
+      this.recordTime = 60;
+      this.voiceTime = 0;
+      this.curDuration = 0;
+      this.voiceText = '点击停止录音';
+      this.curAudioUrl = '';
+      this.isEndRecord = false;
+      this.isRecordPlay = false;
+      this.voiceStartTime = 0;
+      this.isSendLoading = false;
+      this.isRecordering = false;
+    },
+    deleteVoice() {
+      let _this = this;
+      this.$confirm({
+        title: '确定要删除这段录音么',
+        okText: '确定',
+        cancelText: '取消',
+        onOk() {
+          _this.reStart();
+        },
+        onCancel() {}
+      });
+    },
+    reStart() {
+      this.resetData();
+      this.recOpen();
+    },
+    recOpen(flag) {
+      let _this = this;
+      _this.isRecordering = true;
+      _this.rec = Recorder({
+        type: 'mp3',
+        sampleRate: 16000,
+        bitRate: 16,
+        onProcess: function() {}
+      });
+      _this.voiceStartTime = new Date().getTime();
+
+      _this.rec?.open(
+        function() {
+          _this.canRecordering = true;
+          console.log('recOpen --- 已打开录音，可以点击开始了');
+          !flag && _this.recStart();
+          if (flag) {
+            setTimeout(() => {
+              _this.recStop();
+            }, 500);
+          }
+          // rec.start() 此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程
+        },
+        function(msg, isUserNotAllow) {
+          // 用户拒绝未授权或不支持
+          // clearTimeout(t);
+          _this.isRecordering = false;
+          _this.canRecordering = false;
+          _this.voiceText = '无法录音';
+          _this.closeVoice();
+          if (!flag) _this.$message.error('当前无法录音，请检查设备和权限');
+          console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg);
+        }
+      );
+    },
+    recStart() {
+      if (this.recordTimer) clearInterval(this.recordTimer);
+      if (this.rec && Recorder.IsOpen()) {
+        this.voiceText = '点击停止录音';
+        this.voiceStartTime = new Date().getTime();
+        this.rec.start();
+        this.recordTimer = setInterval(() => {
+          this.recordTime--;
+          this.voiceTime++;
+          if (this.recordTime <= 0) {
+            clearInterval(this.recordTimer);
+            this.recStop();
+          }
+        }, 1000);
+      } else {
+        console.log('未打开录音');
+      }
+    },
+    recStop() {
+      let _this = this;
+      if (_this.recordTimer) clearInterval(_this.recordTimer);
+      _this.isEndRecord = true;
+      _this.recordTime = 60;
+
+      if (!(_this.rec && Recorder.IsOpen())) {
+        console.log('recStop --- 未打开录音');
+        _this.isRecordering = false;
+        _this.resetVoiceSetting('未打开录音');
+        return;
+      }
+      _this.rec?.stop(
+        function(blob, duration) {
+          _this.recBlob = blob;
+          let tempDuration = Math.round(duration / 1000);
+          let curDuration;
+          if (tempDuration > 59) {
+            curDuration = 60;
+          } else {
+            curDuration = parseInt(duration / 1000);
+          }
+          _this.curDuration = curDuration;
+          if (curDuration < 1) {
+            _this.isRecordering = false;
+            _this.resetVoiceSetting('时间过短');
+            _this.$message.warning('时间过短');
+            return;
+          }
+          _this.recClose();
+        },
+        function(msg) {
+          _this.isRecordering = false;
+          _this.resetVoiceSetting('录音失败');
+          console.log('录音失败:' + msg, 1);
+        }
+      );
+    },
+    recClose() {
+      if (this.rec) {
+        this.rec.close();
+        this.voiceText = '录制完成，播放录音';
+        this.isRecordering = false;
+        console.log('recClose --- 已关闭');
+      } else {
+        this.isRecordering = false;
+        this.voiceText = '未打开录音';
+        console.log('recClose --- 未打开录音', 1);
+      }
+    },
+    stopRecored() {
+      this.recStop();
+    },
+    toggleVoice(isPlay) {
+      this.isRecordPlay = isPlay;
+      if (isPlay) {
+        this.recPlay();
+      } else {
+        this.audioEnd();
+      }
+    },
+    recPlay() {
+      if (!this.recBlob) {
+        console.log('请先录音，然后停止后再播放', 1);
+        return;
+      }
+      this.curAudioUrl = (window.URL || window.webkitURL).createObjectURL(this.recBlob);
+    },
+    audioEnd() {
+      this.curAudioUrl && (window.URL || window.webkitURL).revokeObjectURL(this.curAudioUrl);
+      this.curAudioUrl = '';
+      this.isRecordPlay = false;
+    },
+    uploadFile() {
+      if (this.isRecordering) return this.$message.warning('正在录音，请先点击停止录音，再次发送！');
+      if (this.isSendLoading) return this.$message.warning('正在发送...');
+      if (!this.recBlob) return;
+      if (this.curDuration < 1) {
+        return this.$message.warning('时间过短');
+      }
+      this.isSendLoading = true;
+      let form = new FormData();
+      form.append('file', this.recBlob, 'recorder.mp3');
+      // /hospitalUpload/file /api/inside/file
+      fetch
+        .post('/hospitalUpload/file', form)
+        .then(({ data }) => {
+          if (data.result === 'SUCCESS') {
+            let { url = '' } = data?.map || {};
+            if (!url) return;
+            this.voiceSend(url, this.curDuration);
+          } else {
+            this.isSendLoading = false;
+            this.$message.warning(data.resultMsg || '上传失败');
+          }
+        })
+        .catch(err => {
+          this.resetVoiceSetting();
+          this.isSendLoading = false;
+          this.$message.warning(err?.resultMsg || '上传失败');
+          console.log(err, '上传失败的回调啦啦啦');
+        });
+    },
+    voiceSend(url, duration) {
+      if (!url) return;
+      let body = {
+        content: url,
+        type: 6,
+        duration
+      };
+      this.closeVoice();
+      this.sendMessage(body)
+        .then(() => {
+          this.isSendLoading = false;
+          this.recBlob = null;
+        })
+        .catch(() => {
+          this.isSendLoading = false;
+          this.$message.warning('发送失败');
+        });
+    },
+    resetVoiceSetting(text = '录制完成，播放录音') {
+      this.voiceText = text;
+      if (this.recordTimer) clearInterval(this.recordTimer);
+      this.voiceStartTime = 0;
+      this.curDuration = 0;
+      this.recordTime = 60;
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.voice-page {
+  &::before {
+    content: ' ';
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    cursor: default;
+  }
+  position: fixed;
+  z-index: 300000;
+  top: calc(50% - 232px);
+  left: calc(50% - 207px);
+  width: 414px;
+  height: 464px;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0px 0px 16px 6px rgba(0, 0, 0, 0.14);
+  cursor: default;
+  .voice-containter {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 66px;
+    text-align: center;
+    .close-icon {
+      position: absolute;
+      top: 14px;
+      right: 14px;
+      font-size: 16px;
+      color: #979797;
+    }
+    .img-wrap {
+      width: 136px;
+      height: 136px;
+      margin: 26px auto;
+      cursor: pointer;
+      .end-wrap {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        .progress-ele {
+          position: absolute;
+          top: 48%;
+          left: 49.8%;
+          transform: translate(-50%, -50%);
+        }
+      }
+      .play-wrap {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 120px;
+        height: 120px;
+        background: linear-gradient(180deg, #2d7aff 0%, #2c5df4 100%);
+        box-shadow: 0px 5px 8px 0px rgba(44, 101, 247, 0.39);
+        border-radius: 50%;
+        img {
+          width: 35px;
+        }
+      }
+    }
+    p {
+      margin-bottom: 10px;
+      font-size: 16px;
+    }
+    .time-wrap {
+      font-size: 30px;
+    }
+    .btn-wrap {
+      margin-top: 35px;
+      span {
+        display: inline-block;
+        padding: 8px 32px;
+        border-radius: 20px;
+        border: 1px solid #d9d9d9;
+        cursor: pointer;
+      }
+      .send-btn {
+        margin-left: 18px;
+        background: #2d7aff;
+        color: #fff;
+        border-color: #2d7aff;
+      }
+    }
+  }
+}
+</style>