askbot-dragon 1.3.1 → 1.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.3.01",
+  "version": "1.3.12",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/AnswerVoice.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="answer-voice">
+    <div :style="{ width: boxWidth + 'px' }" class="answer-voice">
         <audio :id="'audioTagCom_' + msg.id" :src="msg.content.url"></audio>
         <div class="audiocon">
             <!-- 按钮 -->
@@ -17,7 +17,7 @@
                     </div>
                 </div>
                 <div class="time">
-                    <span>{{otherTime }}</span>
+                    <span>{{ otherTime }}</span>
                 </div>
                 <!-- <div class="time">
                     <span>{{ allTime }}</span>
@@ -41,6 +41,7 @@ export default {
             allTime: 0,
             otherTime: 0,
             durationNum: 0,
+            boxWidth: 200
         }
     },
     watch: {
@@ -59,11 +60,21 @@ export default {
                 this.durationNum = this.activeAudio.duration;
                 console.log(this.activeAudio.duration);
                 this.allTime = this.transTime(this.activeAudio.duration);
+                if (this.activeAudio.duration >= 60) {
+                    this.boxWidth = 240;
+                } else {
+                    this.boxWidth = 160 + this.activeAudio.duration;
+                }
                 this._$(`#audioTagCom_${this.msg.id}`).on("loadedmetadata", (e) => {
                     console.log(e.currentTarget);
                     this.time = "00:00";
                     console.log(e.currentTarget.duration);
                     this.allTime = this.transTime(e.currentTarget.duration);
+                    if (this.activeAudio.duration >= 60) {
+                        this.boxWidth = 240;
+                    } else {
+                        this.boxWidth = 160 + this.activeAudio.duration;
+                    }
                     this.durationNum = e.currentTarget.duration;
                     this.otherTime = this.transTime(this.activeAudio.duration);
                     // this.activeAudio.play();
@@ -158,7 +169,10 @@ export default {
 </script>
 <style scoped lang="less">
 .answer-voice {
+    width: 100%;
     padding: 4px 0;
+    // min-width: 240px;
+
     .audiocon {
         display: flex;
         align-items: center;
@@ -169,11 +183,12 @@ export default {
 
     .leftBtn {
         width: 30px;
-        margin-right: 10px;
+
         span {
             i {
-                font-size: 30px;
+                font-size: 28px;
                 color: #ADC0F6;
+                line-height: 32px;
             }
         }
     }
@@ -188,7 +203,7 @@ export default {
         margin-left: 16px;
 
         .bar {
-            width: calc(100% - 60px);
+            width: calc(100% - 20px);
             position: relative;
             height: 30px;
             display: flex;
@@ -199,7 +214,7 @@ export default {
                 top: 0;
                 left: 0px;
                 z-index: 10;
-                width: 96%;
+                width: 98%;
                 height: 30px;
                 cursor: pointer;
 
@@ -224,7 +239,7 @@ export default {
                 position: absolute;
                 height: 4px;
                 top: 50%;
-                left: 0px;
+                left: 5px;
                 transform: translateY(-50%);
                 background-color: #366AFF;
 
@@ -232,7 +247,7 @@ export default {
                     content: "";
                     position: absolute;
                     top: -4px;
-                    right: -3px;
+                    right: -6px;
                     width: 5px;
                     height: 5px;
                     border-radius: 50%;