From 96e21836e1868397503c82e3378f8a6920d03de3 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Sat, 11 Jun 2022 12:29:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppBroadcast1/LiveBroadcast.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/apps/AppBroadcast1/LiveBroadcast.vue b/src/apps/AppBroadcast1/LiveBroadcast.vue
index 85e2d42e..bff1d24e 100644
--- a/src/apps/AppBroadcast1/LiveBroadcast.vue
+++ b/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;