hsk文档修改

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -29,6 +29,10 @@
           :class="['pinyin-16', isShowPY ? '' : 'disabled']"
           @click="changePinyin"
         ></span>
+        <span
+          :class="['EN-16', isShowEN ? '' : 'disabled']"
+          @click="changeEN"
+        ></span>
       </div>
     </div>
 
@@ -311,7 +315,7 @@
                 </div>
                 <div style="clear: both; overflow: hidden"></div>
                 <div
-                  v-if="item.enwords"
+                  v-if="item.enwords && isShowEN"
                   :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
                 >
                   {{ item.enwords }}
@@ -423,6 +427,7 @@ export default {
       stopAudio: false,
       sentIndex: 0,
       isShowPY: true,
+      isShowEN: true,
       isRepeat: false,
       currSent: null, //当前句子的时间
       isRecord: false,
@@ -634,6 +639,10 @@ export default {
     changePinyin() {
       this.isShowPY = !this.isShowPY;
     },
+    // 英文的显示和隐藏
+    changeEN(){
+        this.isShowEN = !this.isShowEN;
+    },
     // 单句是否重复播放
     changeRepeat() {
       let _this = this;
@@ -676,7 +685,7 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      width: 72px;
+      width: 92px;
       height: 40px;
       box-sizing: border-box;
       padding: 0 12px;

src/components/Adult/preview/WordPhrase.vue

@@ -412,6 +412,7 @@ export default {
         width: 48px;
         box-sizing: border-box;
         text-align: left;
+        font-style:italic;
       }
       .NPC-word-tab-def {
         flex: 1;

src/components/Adult/preview/components/Practice.vue

@@ -115,7 +115,7 @@
                   :class="navIndex == 1 ? 'active' : ''"
                   @click="changeNav(1)"
                 >
-                  默写
+                  临摹
                 </li>
               </ul>
             </div>
@@ -205,7 +205,7 @@
                   :class="navIndex == 1 ? 'active' : ''"
                   @click="changeNav(1)"
                 >
-                  默写
+                  临摹
                 </li>
               </ul>
             </div>

src/styles/index.scss

@@ -232,11 +232,11 @@ input:-ms-input-placeholder {
             display: block;
         }
     }
-    .adult-book-main{
-      min-height: 32px;
-      display:flex;
-      justify-content: flex-start;
-      align-items:center;
+    .adult-book-main {
+        min-height: 32px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
     }
     .adult-book-input {
         width: 500px;
@@ -277,18 +277,18 @@ input:-ms-input-placeholder {
                 width: 25px;
             }
         }
-      &.Audio-tts{
-        .audioLine {
-          .playBtn {
-              background: url("../assets/NPC/tts-play-red.png") no-repeat left top;
-              background-size: 100% 100%;
-          }
-          .pauseBtn {
-              background: url("../assets/NPC/tts-red.png") no-repeat left top;
-              background-size: 100% 100%;
-          }
-      }
-      }
+        &.Audio-tts {
+            .audioLine {
+                .playBtn {
+                    background: url("../assets/NPC/tts-play-red.png") no-repeat left top;
+                    background-size: 100% 100%;
+                }
+                .pauseBtn {
+                    background: url("../assets/NPC/tts-red.png") no-repeat left top;
+                    background-size: 100% 100%;
+                }
+            }
+        }
     }
     .Repeat-16 {
         background: url("../assets/icon/Repeat-16-normal-red.png") no-repeat left top;
@@ -306,6 +306,14 @@ input:-ms-input-placeholder {
             background-size: 100% 100%;
         }
     }
+    .EN-16 {
+        background: url("../assets/icon/EN-16-normal-red.png") no-repeat left top;
+        background-size: 100% 100%;
+        &.disabled {
+            background: url("../assets/icon/EN-16-disable-Black.png") no-repeat left top;
+            background-size: 100% 100%;
+        }
+    }
     &.NPC-Big-Book-preview-green {
         .Audio {
             .audioLine {
@@ -321,36 +329,43 @@ input:-ms-input-placeholder {
                     width: 25px;
                 }
             }
-            &.Audio-tts{
-              .audioLine {
-                .playBtn {
-                    background: url("../assets/NPC/tts-play-green.png") no-repeat left top;
-                    background-size: 100% 100%;
+            &.Audio-tts {
+                .audioLine {
+                    .playBtn {
+                        background: url("../assets/NPC/tts-play-green.png") no-repeat left top;
+                        background-size: 100% 100%;
+                    }
+                    .pauseBtn {
+                        background: url("../assets/NPC/tts-green.png") no-repeat left top;
+                        background-size: 100% 100%;
+                    }
                 }
-                .pauseBtn {
-                    background: url("../assets/NPC/tts-green.png") no-repeat left top;
-                    background-size: 100% 100%;
-                }
-                
-            }
             }
         }
         .Repeat-16 {
-          background: url("../assets/icon/Repeat-16-normal-Green.png") no-repeat left top;
-          background-size: 100% 100%;
-          &.disabled {
-              background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
-              background-size: 100% 100%;
-          }
-      }
-      .pinyin-16 {
-          background: url("../assets/icon/pinyin-16-normal-Green.png") no-repeat left top;
-          background-size: 100% 100%;
-          &.disabled {
-              background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
-              background-size: 100% 100%;
-          }
-      }
+            background: url("../assets/icon/Repeat-16-normal-Green.png") no-repeat left top;
+            background-size: 100% 100%;
+            &.disabled {
+                background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
+                background-size: 100% 100%;
+            }
+        }
+        .pinyin-16 {
+            background: url("../assets/icon/pinyin-16-normal-Green.png") no-repeat left top;
+            background-size: 100% 100%;
+            &.disabled {
+                background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
+                background-size: 100% 100%;
+            }
+        }
+        .EN-16 {
+            background: url("../assets/icon/EN-16-normal-Green.png") no-repeat left top;
+            background-size: 100% 100%;
+            &.disabled {
+                background: url("../assets/icon/EN-16-disable-Black.png") no-repeat left top;
+                background-size: 100% 100%;
+            }
+        }
     }
     &.NPC-Big-Book-preview-brown {
         .Audio {
@@ -367,36 +382,43 @@ input:-ms-input-placeholder {
                     width: 25px;
                 }
             }
-            &.Audio-tts{
-              .audioLine {
-                .playBtn {
-                    background: url("../assets/NPC/tts-play-brown.png") no-repeat left top;
-                    background-size: 100% 100%;
-                }
-                .pauseBtn {
-                    background: url("../assets/NPC/tts-brown.png") no-repeat left top;
-                    background-size: 100% 100%;
+            &.Audio-tts {
+                .audioLine {
+                    .playBtn {
+                        background: url("../assets/NPC/tts-play-brown.png") no-repeat left top;
+                        background-size: 100% 100%;
+                    }
+                    .pauseBtn {
+                        background: url("../assets/NPC/tts-brown.png") no-repeat left top;
+                        background-size: 100% 100%;
+                    }
                 }
-                
-            }
             }
         }
         .Repeat-16 {
-          background: url("../assets/icon/Repeat-16-normal-Brown.png") no-repeat left top;
-          background-size: 100% 100%;
-          &.disabled {
-              background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
-              background-size: 100% 100%;
-          }
-      }
-      .pinyin-16 {
-          background: url("../assets/icon/pinyin-16-normal-Brown.png") no-repeat left top;
-          background-size: 100% 100%;
-          &.disabled {
-              background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
-              background-size: 100% 100%;
-          }
-      }
+            background: url("../assets/icon/Repeat-16-normal-Brown.png") no-repeat left top;
+            background-size: 100% 100%;
+            &.disabled {
+                background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
+                background-size: 100% 100%;
+            }
+        }
+        .pinyin-16 {
+            background: url("../assets/icon/pinyin-16-normal-Brown.png") no-repeat left top;
+            background-size: 100% 100%;
+            &.disabled {
+                background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
+                background-size: 100% 100%;
+            }
+        }
+        .EN-16 {
+            background: url("../assets/icon/EN-16-normal-Brown.png") no-repeat left top;
+            background-size: 100% 100%;
+            &.disabled {
+                background: url("../assets/icon/EN-16-disable-Black.png") no-repeat left top;
+                background-size: 100% 100%;
+            }
+        }
     }
 }