gcj 2 years ago
parent
commit
fc6de60edc
2 changed files with 90 additions and 22 deletions
  1. 8 8
      package-lock.json
  2. 82 14
      src/views/corpus/Result.vue

+ 8 - 8
package-lock.json

@@ -13291,7 +13291,7 @@
     },
     "vue-loader-v16": {
       "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
       "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
       "dev": true,
       "optional": true,
@@ -13303,7 +13303,7 @@
       "dependencies": {
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "optional": true,
@@ -13313,7 +13313,7 @@
         },
         "chalk": {
           "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "dev": true,
           "optional": true,
@@ -13324,7 +13324,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "optional": true,
@@ -13334,21 +13334,21 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true,
           "optional": true
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true,
           "optional": true
         },
         "loader-utils": {
           "version": "2.0.4",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
           "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
           "dev": true,
           "optional": true,
@@ -13360,7 +13360,7 @@
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "optional": true,

+ 82 - 14
src/views/corpus/Result.vue

@@ -143,7 +143,7 @@
                   />
                 </div>
               </template>
-              <div class="refresh">
+              <div class="refresh" @click="handleRefresh">
                 <img src="../../assets/teacherdev/refresh.png" alt="" />
               </div>
               <template v-if="patternIndex == 0">
@@ -187,18 +187,14 @@
                   <div class="top">
                     <div
                       class="number"
-                      :style="{
-                        marginBottom: sizeIndex == 2 ? '0' : '5px',
-                      }"
+                      :class="['number-' + sizeIndex + '-' + pinyinShow]"
                     >
                       {{ item.number }}.
                     </div>
                     <img
-                      :style="{
-                        marginBottom: sizeIndex == 2 ? '0' : '5px',
-                      }"
                       src="../../assets/teacherdev/speaker-one.png"
                       alt=""
+                      :class="['speaker-' + sizeIndex + '-' + pinyinShow]"
                     />
                     <div class="words">
                       <div
@@ -210,6 +206,7 @@
                           :style="{
                             fontSize: pinyinSize + 'px',
                           }"
+                          v-if="pinyinShow"
                         >
                           {{ items.pinyin }}
                         </div>
@@ -217,15 +214,15 @@
                           class="con"
                           :style="{
                             fontSize: conSize + 'px',
+                            lineHeight: conSize + 8 + 'px',
                           }"
                           v-html="items.con"
                         ></div>
                       </div>
                       <div
                         class="shiyi"
-                        :style="{
-                          marginBottom: sizeIndex == 2 ? '0' : '5px',
-                        }"
+                        :class="['shiyi-' + sizeIndex]"
+                        v-if="shiyiShow"
                       >
                         ({{ item.shiyi }})
                       </div>
@@ -307,6 +304,8 @@
                 borderBottom:
                   i == rightList.length - 1 ? 'none' : '1px solid #eeeeee',
               }"
+              @mouseover="gaolangbzt(i, 'shanxing_main')"
+              @mouseout="closegaolangbzt(i, 'shanxing_main')"
             >
               <div>
                 <span></span>
@@ -363,8 +362,8 @@ export default {
     //这里存放数据
     return {
       page: 1,
-      shiyiShow: false,
-      pinyinShow: false,
+      shiyiShow: true,
+      pinyinShow: true,
       JFIndex: 0,
       hzData: [],
       ShowHzData: [],
@@ -732,7 +731,7 @@ export default {
       KWICData: [
         {
           number: 1,
-          laiyuan: "轻松学中文1大撒大撒大苏打撒旦阿斯顿阿斯顿安生安生",
+          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
           resArr: [
             ["你"],
             [
@@ -906,6 +905,24 @@ export default {
       };
       option && myChart.setOption(option);
     },
+    // 鼠标进入
+    gaolangbzt(index, id) {
+      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
+      compareChart.dispatchAction({
+        type: "highlight",
+        seriesIndex: 0,
+        dataIndex: index,
+      });
+    },
+    // 鼠标移出
+    closegaolangbzt(index, id) {
+      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
+      compareChart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: index,
+      });
+    },
     changehzdata() {
       this.hzData = [];
       let arr = this.$route.query.keyword.split("");
@@ -926,6 +943,13 @@ export default {
       });
       this.gethzJSON();
     },
+    handleRefresh() {
+      this.pinyinShow = true;
+      this.shiyiShow = true;
+      this.sizeIndex = 1;
+      this.sort = "down";
+      this.KWIC_sortIndex = 0;
+    },
   },
   //生命周期 - 创建完成(可以访问当前this实例)
   created() {
@@ -1222,25 +1246,61 @@ export default {
             margin-bottom: 8px;
             .top {
               display: flex;
-              align-items: flex-end;
+              align-items: flex-start;
               flex-flow: wrap;
+              width: 100%;
               .number {
                 width: 22px;
                 font-weight: 400;
                 font-size: 14px;
+                line-height: 21px;
                 text-align: right;
                 color: rgba(0, 0, 0, 0.3);
                 margin-right: 8px;
+                margin-top: 19px;
+                &-1-false {
+                  margin-top: 3px;
+                }
+                &-0-true {
+                  margin-top: 21px;
+                }
+                &-0-false {
+                  margin-top: 5px;
+                }
+                &-2-true {
+                  margin-top: 17px;
+                }
+                &-2-false {
+                  margin-top: 1px;
+                }
               }
               img {
                 width: 16px;
                 height: 16px;
                 cursor: pointer;
                 margin-right: 8px;
+                margin-top: 22px;
+                &.speaker-1-false {
+                  margin-top: 6px;
+                }
+                &.speaker-0-true {
+                  margin-top: 24px;
+                }
+                &.speaker-0-false {
+                  margin-top: 8px;
+                }
+                &.speaker-2-true {
+                  margin-top: 20px;
+                }
+                &.speaker-2-false {
+                  margin-top: 4px;
+                }
               }
               .words {
                 display: flex;
                 align-items: flex-end;
+                flex: 1;
+                flex-flow: wrap;
                 > div {
                   .pinyin {
                     font-family: "GB-PINYINOK-B";
@@ -1248,6 +1308,7 @@ export default {
                     font-size: 12px;
                     color: rgba(0, 0, 0, 0.5);
                     text-align: center;
+                    margin-bottom: 2px;
                   }
                   .con {
                     font-family: "FZJCGFKTK";
@@ -1262,6 +1323,13 @@ export default {
                 font-weight: 400;
                 font-size: 12px;
                 color: #48a3e6;
+                line-height: 24px;
+                &-0 {
+                  line-height: 32px;
+                }
+                &-1 {
+                  line-height: 28px;
+                }
               }
             }
             .bottom {