对比

src/components/common/AudioCompare.vue

@@ -112,9 +112,9 @@ export default {
   height: 16px;
   margin-left: 8px;
   &-big {
-    width: 24px;
-    height: 24px;
-    margin-left: 0px;
+    // width: 24px;
+    // height: 24px;
+    // margin-left: 0px;
   }
 }
 .compare-disable {

src/components/common/AudioRed.vue

@@ -3,7 +3,7 @@
   <div v-if="mp3" class="content-voices" @click="handlePlayVoice">
     <div class="full-drive">
         <svg-icon icon-class="Type-drive"></svg-icon>
-        <span>听对比2</span>
+        <span>听对比</span>
     </div>
 
     <!-- <svg-icon icon-class="Type-drive" :style="{color:'#fff'}" :class="type == 'full' ? 'icon-big' : ''"></svg-icon> -->
@@ -77,9 +77,7 @@ export default {
   // 方法集合
   methods: {
     handlePlayVoice() {
-        debugger
       let _this = this;
-      console.log(this.audio.paused);
       if (!_this.audio.paused) {
         _this.audio.pause();
       } else if (_this.isCompare) {

src/components/common/Soundrecorddiff.vue

@@ -14,10 +14,9 @@
       </div>
       <img @click="microphone" class="luyin-gif" :style="{width:'56px'}" v-else src="../../assets/voice-gif.png" />
     </div>
-
     <div
       v-if="
-        !microphoneStatus && recordList.length > 0 &&selectIndex || selectIndex == 0
+        !microphoneStatus && recordList.length > 0 &&(selectIndex || selectIndex == 0) && hasMicro
       "
       :class="[
         'hasRecord',
@@ -34,8 +33,8 @@
           )
         "
       >
-        <svg-icon icon-class="pause" className="icon-svg" v-if="hasMicro!=='normal'"></svg-icon>
-        <svg-icon icon-class="play-fill" className="icon-svg" v-else></svg-icon>
+        <svg-icon icon-class="pause" className="icon-svg" v-if="hasMicro==='active'"></svg-icon>
+        <svg-icon icon-class="play-fill" className="icon-svg" v-else-if="hasMicro==='normal'"></svg-icon>
       </div>
       <!-- <span
         class="record-time"
@@ -44,7 +43,7 @@
     </div>
     <el-select 
         v-model="selectIndex"
-        placeholder="No recording"
+        placeholder="请选择"
         no-data-text="No recording"
         :popper-append-to-body="false"
         @change="handleChangeRecord"
@@ -64,6 +63,7 @@
 
 <script>
 import Recorder from "js-audio-recorder"; // 录音插件
+import { getLogin } from "@/api/ajax";
 export default {
   components: {},
   props: [
@@ -289,9 +289,21 @@ export default {
       }
       return time;
     },
-    handleChangeRecord(index) {
-      this.recordtime = this.recordList[index].toltime;
-      this.wavblob = this.recordList[index].wavData;
+    async handleChangeRecord(index) {
+    //   this.recordtime = this.recordList[index].toltime;
+      this.recordtime = 5
+      let MethodName = "/PaperServer/Client/UserSentRec/FindById";
+      let data = {
+        id: this.recordList[index].id,
+        got_rec_data_flag: true
+      }
+      await getLogin(MethodName, data)
+      .then((res) => {
+        if(res.status===1){
+            this.wavblob = res.data.rec_sound_data;
+            this.recordList[index].wavData = res.data.rec_sound_data
+        }
+      })
       this.hasMicro = "normal";
       clearInterval(this.timer);
       this.audio.pause();
@@ -347,7 +359,7 @@ export default {
   .playBack {
     font-size: 24px;
     line-height: 24px;
-    margin-left: 8px;
+    // margin-left: 8px;
     color: #175DFF;
     // background: url("../../../assets/icon/play-24-normal-Black.png") center
     //   no-repeat;
@@ -366,7 +378,7 @@ export default {
   }
   .playBack-white {
     font-size: 24px;
-    margin-left: 8px;
+    // margin-left: 8px;
     line-height: 24px;
     color: #FFD617;
     cursor: pointer;

src/views/bookShelf/components/Voicefullscreen.vue

@@ -221,10 +221,9 @@
             :tmIndex="curSentIndex"
             :key="'Soundrecorddiff' + curSentIndex"
           />
-        </div>
+          <!-- v-if="isShowCompare" -->
           <div
             :class="['compare-box', bgIndex == 1 ? 'compare-box-white' : '']"
-            v-if="isShowCompare"
           >
             <Audio-compare
               :bgIndex="bgIndex"
@@ -245,6 +244,7 @@
               
             />
           </div>
+        </div>
         <div
           :class="[
             'page-count',
@@ -667,7 +667,7 @@ export default {
         getLogin(MethodName, data)
         .then((res) => {
             if(res.status===1){
-                this.historySentRecordList = res.data.all
+                this.historySentRecordList = res.data.all.reverse()
             }
         })
     },
@@ -1028,7 +1028,7 @@ export default {
   }
   &-top {
     height: 100%;
-    width: 40px;
+    width: 200px;
     position: fixed;
     top: 0;
     right: 27px;
@@ -1037,22 +1037,24 @@ export default {
     padding: 0;
 
     .voicefull-top-hidden {
-      width: 100%;
+      width: 40px;
       height: 310px;
       visibility: hidden;
       margin-top: -155px;
       top: 50%;
       position: absolute;
+      right: 0;
       >div{
         margin: 8px 0;
       }
     }
     .voicefull-top-show {
-      width: 100%;
+      width: 40px;
       height: 310px;
       visibility: visible;
       margin-top: -155px;
       position: absolute;
+      right: 0;
       top: 50%;
       >div{
         margin: 8px 0;
@@ -1126,6 +1128,7 @@ export default {
     .set-fontSize {
       position: relative;
       border-radius: 40px;
+      width: 40px;
       cursor: pointer;
       border: 1px solid rgba(0, 0, 0, 0.1);
       &-green {
@@ -1231,7 +1234,7 @@ export default {
     .vc-main {
       width: fit-content;
       margin: 0 auto;
-      padding: 0 67px;
+      padding: 0 200px;
     }
     .NNPE-words {
       float: left;
@@ -1396,7 +1399,7 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-    //   visibility: hidden;
+      visibility: hidden;
     }
     .bottom-left {
       display: flex;
@@ -1406,15 +1409,16 @@ export default {
         margin-left: 40px;
       }
       .compare-box {
-        height: 56px;
-        padding: 16px 16px;
-        box-sizing: border-box;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        border-radius: 0 40px 40px 0;
-        border-left: 0px solid rgba(0, 0, 0, 0.1);
+        margin-left: 16px;
+        // height: 56px;
+        // padding: 16px 16px;
+        // box-sizing: border-box;
+        // border: 1px solid rgba(0, 0, 0, 0.1);
+        // border-radius: 0 40px 40px 0;
+        // border-left: 0px solid rgba(0, 0, 0, 0.1);
         &-white {
-          background: rgba(255, 255, 255, 0.1);
-          border: 1px solid rgba(0, 0, 0, 0.1);
+        //   background: rgba(255, 255, 255, 0.1);
+        //   border: 1px solid rgba(0, 0, 0, 0.1);
           border-left: 0;
         }
         &-answer {