优化

src/apps/AppBroadcast1/LiveBroadcast.vue

@@ -16,9 +16,9 @@
         <scroll-view scroll-y class="record-wrapper">
           <div class="record-item" v-for="(item, index) in recordList" :key="index">
             <image :src="user.avatar" />
-            <div class="right">
+            <div class="right" :style="{width: item.duration + '%'}">
               <image mode="aspectFit" @click="play(item.src, index)" v-if="!item.isPlay" src="./img/voice-icon.png" />
-              <image v-else src="./img/voice.gif" />
+              <image v-else @click="play(item.src, index)" src="./img/voice.gif" />
               <span>{{ item.duration }}"</span>
             </div>
           </div>
@@ -203,6 +203,17 @@
       },
 
       play (url, index) {
+        if (this.currIndex === index) {
+          this.innerAudioContext.destroy()
+          this.recordList.forEach((v, index) => {
+            this.$set(this.recordList[index], 'isPlay', false)
+          })
+
+          this.currIndex = -1
+
+          return false
+        }
+
         this.innerAudioContext.destroy()
         this.recordList.forEach((v, index) => {
           this.$set(this.recordList[index], 'isPlay', false)
@@ -486,8 +497,10 @@
         }
 
         .record-wrapper {
+          width: 100%;
           height: calc(100% - 116px);
           padding: 0 32px;
+          box-sizing: border-box;
 
           .record-item {
             display: flex;