natasha 1 year ago
parent
commit
fa5983d2fd

+ 5 - 5
src/components/common/AudioLineSentence.vue

@@ -11,7 +11,8 @@
           audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
         ]"
       >
-        <svg-icon icon-class="play-fill" className="icon-svg"></svg-icon>
+        <svg-icon icon-class="pause" className="icon-svg" v-if="audio.playing"></svg-icon>
+        <svg-icon icon-class="play-fill" className="icon-svg" v-else></svg-icon>
       </div>
     </div>
 
@@ -414,8 +415,8 @@ export default {
     // background-size: 100% 100%;
   }
   .audioLine3 {
-    width: 56px;
-    height: 56px;
+    width: 40px;
+    height: 40px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 40px;
@@ -424,8 +425,6 @@ export default {
     align-items: center;
 
     .play {
-      width: 24px;
-      height: 24px;
       cursor: pointer;
     //   &.playBtn {
     //     background: url("../../../assets/icon/pause-24-normal-red.png")
@@ -442,6 +441,7 @@ export default {
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(0, 0, 0, 0.1);
       .play {
+        color: #fff;
         // &.playBtn {
         //   background: url("../../../assets/icon/pause-24-normal-yellow.png")
         //     no-repeat left top;

+ 10 - 0
src/icons/svg/repeat-line.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="repeat-line" clip-path="url(#clip0_1_64541)">
+<path id="Vector" d="M3.99935 2.6665H13.9993C14.3675 2.6665 14.666 2.96498 14.666 3.33317V7.99984H13.3327V3.99984H3.99935V5.99984L0.666016 3.33317L3.99935 0.666504V2.6665ZM11.9993 13.3332H1.99935C1.63116 13.3332 1.33268 13.0347 1.33268 12.6665V7.99984H2.66602V11.9998H11.9993V9.99984L15.3327 12.6665L11.9993 15.3332V13.3332Z" fill="currentColor" fill-opacity="0.88"/>
+</g>
+<defs>
+<clipPath id="clip0_1_64541">
+<rect width="16" height="16" fill="currentColor"/>
+</clipPath>
+</defs>
+</svg>

+ 170 - 242
src/views/bookShelf/components/Voicefullscreen.vue

@@ -7,7 +7,18 @@
       @mouseleave="setTopShow(false)"
     >
       <div :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
-        <div class="top-left">
+        <!-- <div class="top-left"> -->
+
+            <div
+            :class="['op-btn close-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="exitFullScreen"
+            >
+            <span
+                :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
+            >
+                <i class="el-icon-close"></i>
+            </span>
+            </div>
           <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
             <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
               <span
@@ -22,59 +33,8 @@
               ></span>
             </div>
           </div>
-          <div
-            :class="['set-fontSize', bgIndex == 1 ? 'set-fontSize-green' : '']"
-          >
-            <template v-if="hzSize >= 34">
-              <span
-                :class="[
-                  'font-jian-black',
-                  bgIndex == 1 ? 'font-jian-yellow' : '',
-                ]"
-                @click="setFontSize('-')"
-              >
-                <i class="el-icon-minus"></i>
-              </span>
-            </template>
-            <!-- <template v-else>
-              <span
-                :class="[
-                  'font-jian-black',
-                  bgIndex == 1
-                    ? 'font-jian-yellow-disabled'
-                    : 'font-jian-white-disabled',
-                ]"
-              >
-                <i class="el-icon-plus"></i>
-              </span>
-            </template> -->
-            <span
-              :class="['font-img-black', bgIndex == 1 ? 'font-img-yellow' : '']"
-            ></span>
-            <template v-if="hzSize <= 76">
-              <span
-                :class="[
-                  'font-jia-black',
-                  bgIndex == 1 ? 'font-jia-yellow' : '',
-                ]"
-                @click="setFontSize('+')"
-              >
-                <i class="el-icon-plus"></i>
-              </span>
-            </template>
-            <!-- <template v-else>
-              <span
-                :class="[
-                  'font-jia-black',
-                  bgIndex == 1
-                    ? 'font-jia-yellow-disabled'
-                    : 'font-jia-white-disabled',
-                ]"
-              ></span>
-            </template> -->
-          </div>
-        </div>
-        <div class="top-middle">
+        <!-- </div> -->
+        <!-- <div class="top-middle"> -->
           <template v-if="mp3">
             <AudioLineSentence
               :key="'sent' + curSentIndex"
@@ -109,7 +69,8 @@
                 !isRepeat && isAuto && bgIndex == 1 ? 'auto-icon-yellow' : '',
               ]"
             >
-            <svg-icon icon-class="repeat"></svg-icon>
+            <svg-icon v-if="isRepeat" icon-class="repeat"></svg-icon>
+            <svg-icon v-else icon-class="repeat-line"></svg-icon>
             </span>
           </div>
           <div
@@ -123,24 +84,67 @@
                 !isCollArr[curSentIndex] ? 'disabled' : '',
                 isCollArr[curSentIndex] && bgIndex == 1
                   ? 'coll-icon-yellow'
-                  : '',
+                  :isCollArr[curSentIndex] && bgIndex == 0
+                  ? 'coll-icon-green':'',
               ]"
             >
-                <svg-icon icon-class="like-line" className="icon-like"></svg-icon>
+                <svg-icon v-if="!isCollArr[curSentIndex]" icon-class="like-line" className="icon-like"></svg-icon>
+                <svg-icon v-else icon-class="like" className="icon-like"></svg-icon>
             </span>
           </div>
-        </div>
-        <div
-          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-          @click="exitFullScreen"
-        >
-          <span
-            :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
+          <div
+            :class="['set-fontSize', bgIndex == 1 ? 'set-fontSize-green' : '']"
           >
-            <i class="el-icon-close"></i>
-          </span>
+            <template v-if="hzSize >= 34">
+              <span
+                :class="[
+                  'font-jian-black',
+                  bgIndex == 1 ? 'font-jian-yellow' : '',
+                ]"
+                @click="setFontSize('-')"
+              >
+                <i class="el-icon-minus"></i>
+              </span>
+            </template>
+            <!-- <template v-else>
+              <span
+                :class="[
+                  'font-jian-black',
+                  bgIndex == 1
+                    ? 'font-jian-yellow-disabled'
+                    : 'font-jian-white-disabled',
+                ]"
+              >
+                <i class="el-icon-plus"></i>
+              </span>
+            </template> -->
+            <span
+              :class="['font-img-black', bgIndex == 1 ? 'font-img-yellow' : '']"
+            ></span>
+            <template v-if="hzSize <= 76">
+              <span
+                :class="[
+                  'font-jia-black',
+                  bgIndex == 1 ? 'font-jia-yellow' : '',
+                ]"
+                @click="setFontSize('+')"
+              >
+                <i class="el-icon-plus"></i>
+              </span>
+            </template>
+            <!-- <template v-else>
+              <span
+                :class="[
+                  'font-jia-black',
+                  bgIndex == 1
+                    ? 'font-jia-yellow-disabled'
+                    : 'font-jia-white-disabled',
+                ]"
+              ></span>
+            </template> -->
+          </div>
         </div>
-      </div>
+      <!-- </div> -->
     </div>
     <div class="voicefull-content" v-if="item">
       <div
@@ -187,7 +191,8 @@
                             curTime <= resArr.timeList[curSentIndex].e
                                 ? 'wordActive'
                                 : '',
-                            pItem.tokens[9]===''?'marginRight':'',pItem.marginRight?'marginSingleRight':''
+                            pItem.tokens[9]===''?'marginRight':'',pItem.marginRight?'marginSingleRight':'',
+                            bgIndex == 1 ? 'word-green' : '',
                         ]"
                         :style="{fontSize:hzSize + 'px'}"
                         >{{ pItem.tokens[2] }}</span
@@ -206,7 +211,8 @@
                             curTime <= resArr.timeList[curSentIndex].e
                                 ? 'wordActive'
                                 : '',
-                            item[pIndex + 1].tokens[8]===''?'marginLeft':'',item[pIndex + 1].marginRight?'marginSingleRight':''
+                            item[pIndex + 1].tokens[8]===''?'marginLeft':'',item[pIndex + 1].marginRight?'marginSingleRight':'',
+                            bgIndex == 1 ? 'word-green' : '',
                         ]"
                         :style="{fontSize:hzSize + 'px'}"
                     >{{ item[pIndex + 1].tokens[2] }}</span
@@ -532,13 +538,15 @@ export default {
         let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Sentence";
         let data = {
             sentence_id: this.curQue.art_corpus_data.sentList[this.curSentIndex].id,
-            audio_file_id: this.curQue.art_sound_srt_data.mp3,
-            audio_begin_time: this.curQue.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[this.curSentIndex].s:null,
-            audio_end_time: this.curQue.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[this.curSentIndex].e:null
+            audio_file_id: this.curQue.art_sound_srt_data?this.curQue.art_sound_srt_data.mp3:'',
+            audio_begin_time: this.curQue.art_sound_srt_data&&this.curQue.art_sound_srt_data.sents?this.curQue.art_sound_srt_data.sents[this.curSentIndex].s:null,
+            audio_end_time: this.curQue.art_sound_srt_data&&this.curQue.art_sound_srt_data.sents?this.curQue.art_sound_srt_data.sents[this.curSentIndex].e:null
         };
         getLogin(MethodName, data).then((res) => {
-            this.$set(this.isCollArr, this.curSentIndex, true);
-            this.$message.success("收藏成功!");
+            if(res.status===1){
+                this.$set(this.isCollArr, this.curSentIndex, true);
+                this.$message.success("收藏成功!");
+            } 
         });
     },
     //取消收藏
@@ -548,8 +556,10 @@ export default {
         sentence_id: this.curQue.art_corpus_data.sentList[this.curSentIndex].id
       };
       getLogin(MethodName, data).then((res) => {
-        this.$set(this.isCollArr, this.curSentIndex, false);
-        this.$message.success("取消成功!");
+        if(res.status===1){
+            this.$set(this.isCollArr, this.curSentIndex, false);
+            this.$message.success("取消成功!");
+        }
       });
     },
     //检查收藏状态
@@ -681,7 +691,6 @@ export default {
       _this.pauseAudio();
       _this.isPlaying = false;
       let item = JSON.parse(JSON.stringify(_this.resArr.wordsList[_this.curSentIndex]));
-      console.log(item)
       _this.item = item
       _this.resArr.wordsList.forEach((item) => {
         this.isCollArr.push(false);
@@ -975,68 +984,75 @@ export default {
     background: linear-gradient(180deg, #274533 0%, #385f45 100%);
   }
   &-top {
-    height: 136px;
-    width: 100%;
+    height: 100%;
+    width: 40px;
+    position: fixed;
+    top: 0;
+    right: 27px;
     box-sizing: border-box;
 
-    padding: 0 40px;
+    padding: 0;
 
     .voicefull-top-hidden {
       width: 100%;
-      height: 136px;
-      visibility: hidden;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      height: 310px;
+    //   visibility: hidden;
+      margin-top: -155px;
+      top: 50%;
+      position: absolute;
+      >div{
+        margin: 8px 0;
+      }
     }
     .voicefull-top-show {
       width: 100%;
-      height: 136px;
+      height: 310px;
       visibility: visible;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      margin-top: -155px;
+      position: absolute;
+      top: 50%;
+      >div{
+        margin: 8px 0;
+      }
     }
     .top-left {
-      display: flex;
-      justify-content: flex-start;
+    //   display: flex;
+    //   justify-content: flex-start;
       align-items: center;
     }
     .select-bg {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 96px;
-      height: 56px;
+      width: 40px;
+      height: 80px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 40px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    //   display: flex;
+    //   justify-content: center;
+    //   align-items: center;
       box-sizing: border-box;
-      margin-right: 32px;
+      text-align: center;
       &.select-bg-blue {
         background: rgba(255, 255, 255, 0.1);
         border: 1px solid rgba(0, 0, 0, 0.1);
       }
       > div {
-        width: 36px;
-        height: 36px;
+        width: 28px;
+        height: 28px;
         border-radius: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
+        margin: 8px 5px;
         &.bg-white-box {
           background: 0 0;
           margin-right: 4px;
           &.active {
-            background: #de4444;
+            background: #3459D2;
           }
         }
         &.bg-green-box {
           background: #fff;
           &.active {
-            background: #ffc600;
+            background: #fff;
           }
         }
 
@@ -1055,6 +1071,15 @@ export default {
         }
       }
     }
+    .el-icon-close{
+        line-height: 24px;
+        font-weight: bold;
+    }
+    .svg-icon{
+        width: 40px;
+        height: 40px;
+        padding: 12px;
+    }
     .set-fontSize {
       padding: 0 20px;
       height: 56px;
@@ -1138,10 +1163,7 @@ export default {
         }
       }
     }
-    .top-middle {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    // .top-middle {
       .audio-box {
         width: 56px;
         height: 56px;
@@ -1156,32 +1178,34 @@ export default {
           border: 1px solid rgba(0, 0, 0, 0.1);
         }
       }
-    }
+    // }
   }
   .op-btn {
-    width: 56px;
-    height: 56px;
+    width: 40px;
+    height: 40px;
+    // padding: 12px;
+    // font-size: 16px;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 
     cursor: pointer;
-    margin-left: 32px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     &-green {
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(0, 0, 0, 0.1);
+      color: #fff;
     }
     &.close-btn {
-      background: #274533;
-      border: 1px solid rgba(0, 0, 0, 0.1);
+      position: fixed;
+      top: 20px;
+      right: 27px;
+
     }
     > span {
-      width: 24px;
-      height: 24px;
       &.close-icon {
         // background: url("../../../assets/icon/cross-24-normal-black.png")
         //   no-repeat left top;
@@ -1195,89 +1219,32 @@ export default {
     }
   }
   .repeat-icon {
-    // background: url("../../../assets/icon/Repeat-24-normal-red.png") no-repeat
-    //   left top;
-    // background-size: 100% 100%;
-    // &.disabled {
-    //   background: url("../../../assets/icon/Repeat-24-disable-Black.png")
-    //     no-repeat left top;
-    //   background-size: 100% 100%;
-    // }
-    // &-yellow {
-    //   background: url("../../../assets/icon/Repeat-24-normal-yellow.png")
-    //     no-repeat left top;
-    //   background-size: 100% 100%;
-    // }
-    // &.auto-icon {
-    //   background: url("../../../assets/icon/Auto-24-next-red.png") no-repeat
-    //     left top;
-    //   background-size: 100% 100%;
-    //   &-yellow {
-    //     background: url("../../../assets/icon/Auto-24-next-yellow.png")
-    //       no-repeat left top;
-    //     background-size: 100% 100%;
-    //   }
-    // }
-  }
-  .pinyin-icon {
-    // background: url("../../../assets/icon/pinyin-24-normal-red.png") no-repeat
-    //   left top;
-    // background-size: 100% 100%;
-    // &.disabled {
-    //   background: url("../../../assets/icon/pinyin-24-disable-Black.png")
-    //     no-repeat left top;
-    //   background-size: 100% 100%;
-    // }
-    // &-yellow {
-    //   background: url("../../../assets/icon/pinyin-24-normal-yellow.png")
-    //     no-repeat left top;
-    //   background-size: 100% 100%;
-    // }
-  }
-  .en-icon {
-    // background: url("../../../assets/icon/EN-24-normal-Red.png") no-repeat left
-    //   top;
-    // background-size: 100% 100%;
-    // &.disabled {
-    //   background: url("../../../assets/icon/EN-24-disable-Black.png") no-repeat
-    //     left top;
-    //   background-size: 100% 100%;
-    // }
-    // &-yellow {
-    //   background: url("../../../assets/icon/EN-24-normal-yellow.png") no-repeat
-    //     left top;
-    //   background-size: 100% 100%;
-    // }
+    &.disabled {
+      color: #929CA8;
+    }
+    &-yellow {
+      color: #fff;
+    }
+    &.auto-icon {
+    //   color: #fff;
+      &-yellow {
+        
+      }
+    }
   }
   .coll-icon {
-    // background: url("../../../assets/icon/bookmarkfill-24-normal-red.png")
-    //   no-repeat left top;
-    // background-size: 100% 100%;
-    // &.disabled {
-    //   background: url("../../../assets/icon/bookmarkfill-24-disable-Black.png")
-    //     no-repeat left top;
-    //   background-size: 100% 100%;
-    // }
-    // &-yellow {
-    //   background: url("../../../assets/icon/bookmarkfill-24-normal-yellow.png")
-    //     no-repeat left top;
-    //   background-size: 100% 100%;
-    // }
-  }
-  .keyboard-icon {
-    // background: url("../../../assets/icon/enter-24-keyboard-red.png") no-repeat
-    //   left top;
-    // background-size: 100% 100%;
-    // &.disabled {
-    //   background: url("../../../assets/icon/enter-24-keyboard-disable-Black.png")
-    //     no-repeat left top;
-    //   background-size: 100% 100%;
-    // }
-    // &-yellow {
-    //   background: url("../../../assets/icon/enter-24-keyboard-yellow.png")
-    //     no-repeat left top;
-    //   background-size: 100% 100%;
-    // }
+    &-yellow {
+        color: #F2555A;
+        &.disabled {
+            color: #000;
+        }
+    }
+    &-green{
+        color: #F2555A;
+        &.disabled {
+            color: #fff;
+        }
+    }
   }
   &-content {
     flex: 1;
@@ -1285,51 +1252,6 @@ export default {
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    .vc-box {
-      padding: 0 8px 0 36px;
-      &-right {
-        padding: 0 36px 0 8px;
-      }
-    }
-    .vc-left {
-      width: 64px;
-      height: 64px;
-      cursor: pointer;
-    //   &-grey {
-    //     background: url("../../../assets/NPC/left-grey.png") no-repeat left top;
-    //     background-size: 100% 100%;
-    //   }
-    //   &-black {
-    //     background: url("../../../assets/NPC/left-black.png") no-repeat left top;
-    //     background-size: 100% 100%;
-    //   }
-    //   &-white {
-    //     background: url("../../../assets/NPC/left-white.png") no-repeat left top;
-    //     background-size: 100% 100%;
-    //   }
-      &.hidden {
-        visibility: hidden;
-      }
-    }
-    .vc-right {
-      width: 64px;
-      height: 64px;
-      cursor: pointer;
-    //   &-grey {
-    //     background: url("../../../assets/NPC/right-grey.png") no-repeat left top;
-    //     background-size: 100% 100%;
-    //   }
-    //   &-black {
-    //     background: url("../../../assets/NPC/right-black.png") no-repeat left
-    //       top;
-    //     background-size: 100% 100%;
-    //   }
-    //   &-white {
-    //     background: url("../../../assets/NPC/right-white.png") no-repeat left
-    //       top;
-    //     background-size: 100% 100%;
-    //   }
-    }
     .vc-main {
       width: fit-content;
       margin: 0 auto;
@@ -1509,6 +1431,12 @@ export default {
                 &.marginSingleRight{
                 padding-right: 3px;
                 }
+                &.word-green{
+                    color: #F7F8FA;
+                    &.wordActive {
+                        color: #FFCB47;
+                    }
+                }
             }
             &.padding {
                 padding: 0 3px;