解决简繁切换bug，语料库搜索结果完善

src/views/corpus/Result.vue

@@ -2,7 +2,12 @@
   <div class="result" v-loading="loading">
     <Header :projectShow="true" />
     <div class="main">
-      <div class="hanzi_list">
+      <div
+        class="hanzi_list"
+        :style="{
+          overflowY: unfold ? 'scroll' : 'hidden',
+        }"
+      >
         <div class="top_jf">
           <div class="j_f">
             <div :class="[JFIndex == 0 ? 'sele' : '']" @click="jfEvent(0)">
@@ -38,7 +43,6 @@
               class="row"
             >
               <Strockplayredline
-                v-if="item.hzDetail.hz_json"
                 :Book_text="JFIndex == 0 ? item.con : item.fanti"
                 :playStorkes="false"
                 :curItem="item.hzDetail"
@@ -64,6 +68,65 @@
           </span>
         </div>
       </div>
+      <div class="txt_imgtable">
+        <div class="left">
+          <div class="top">
+            <div class="pattern">
+              <div
+                :class="[patternIndex == 0 ? 'sele' : '']"
+                @click="cutPattern(0)"
+              >
+                引语模式
+              </div>
+              <div
+                :class="[patternIndex == 1 ? 'sele' : '']"
+                @click="cutPattern(1)"
+              >
+                KWIC模式
+              </div>
+            </div>
+            <div class="lang_sort">
+              长度
+              <img src="" alt="" />
+            </div>
+            <div class="refresh">
+              <img src="../../assets/teacherdev/refresh.png" alt="" />
+            </div>
+            <el-switch
+              v-model="pinyinShow"
+              active-text="拼音"
+              active-color="#424242"
+              style="margin-left: 32px"
+            >
+            </el-switch>
+            <el-switch
+              v-model="shiyiShow"
+              active-text="释义"
+              active-color="#424242"
+              style="margin-left: 16px"
+            >
+            </el-switch>
+          </div>
+        </div>
+        <div class="right">
+          <div class="top">
+            <div>
+              <div
+                :class="[rightTopIndex == 0 ? 'sele' : '']"
+                @click="cutsyly(0)"
+              >
+                释义
+              </div>
+              <div
+                :class="[rightTopIndex == 1 ? 'sele' : '']"
+                @click="cutsyly(1)"
+              >
+                来源
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -89,12 +152,23 @@ export default {
   data() {
     //这里存放数据
     return {
+      shiyiShow: false,
+      pinyinShow: false,
       JFIndex: 0,
       hzData: [],
       ShowHzData: [],
       loading: true,
       lang: null,
       unfold: true,
+      patternIndex: 0,
+      rightTopIndex: 0,
+      rightList: [
+        {
+          name: "",
+          value: "",
+          ratio: "",
+        },
+      ],
     };
   },
   //计算属性 类似于data概念
@@ -103,6 +177,14 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 切换模式
+    cutPattern(index) {
+      this.patternIndex = index;
+    },
+    // 切换释义来源
+    cutsyly(index) {
+      this.rightTopIndex = index;
+    },
     updownHz() {
       this.unfold = !this.unfold;
       if (this.unfold) {
@@ -137,9 +219,11 @@ export default {
         item.hzDetail = {
           hz_json: null,
         };
+        this.$forceUpdate();
         getLogin(MethodName, data)
           .then((res) => {
             this.$set(item.hzDetail, "hz_json", res);
+            this.$forceUpdate();
             this.ShowHzData = JSON.parse(JSON.stringify(this.hzData));
             if (i == this.hzData.length - 1) {
               this.loading = false;
@@ -191,7 +275,7 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .result {
-  height: 100%;
+  min-height: 100%;
   .main {
     min-height: 100%;
     background: #f2f2f2;
@@ -205,9 +289,6 @@ export default {
     background: #ffffff;
     border-radius: 8px;
     padding: 40px;
-
-    overflow-y: scroll;
-
     .top_jf {
       width: 128px;
     }
@@ -301,5 +382,132 @@ export default {
       }
     }
   }
+  .txt_imgtable {
+    width: 1200px;
+    margin: 0 auto;
+    margin-top: 8px;
+    display: flex;
+    .left {
+      width: 562px;
+      background: #ffffff;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 8px;
+      margin-right: 8px;
+      .top {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        height: 44px;
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 12px;
+        .pattern {
+          margin-left: 16px;
+          width: 144px;
+          height: 28px;
+          background: #eeeeee;
+          border-radius: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          > div {
+            width: 64px;
+            height: 24px;
+            text-align: center;
+            line-height: 24px;
+            color: #888888;
+            cursor: pointer;
+            font-weight: 400;
+            font-size: 12px;
+            border-radius: 2px;
+          }
+          .sele {
+            background: #ffffff;
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
+            color: #000000;
+          }
+        }
+        .lang_sort {
+          width: 54px;
+          height: 28px;
+          background: #eeeeee;
+          border-radius: 4px;
+          margin-left: 24px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .refresh {
+          width: 28px;
+          height: 28px;
+          background: #eeeeee;
+          border-radius: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-left: 8px;
+          cursor: pointer;
+          img {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+    .right {
+      width: 630px;
+      height: 100px;
+      background: #ffffff;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 8px;
+      .top {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        height: 44px;
+        display: flex;
+        align-items: center;
+        > div {
+          margin-left: 16px;
+          width: 84px;
+          height: 28px;
+          background: #eeeeee;
+          border-radius: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          > div {
+            border-radius: 2px;
+            width: 40px;
+            height: 24px;
+            text-align: center;
+            line-height: 24px;
+            color: #888888;
+            cursor: pointer;
+            font-weight: 400;
+            font-size: 12px;
+          }
+          .sele {
+            background: #ffffff;
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
+            color: #000000;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.result {
+  .el-switch__core {
+    width: 26px !important;
+    height: 16px;
+  }
+  .el-switch__core:after {
+    width: 8px;
+    height: 8px;
+    top: 2px;
+  }
+  .el-switch.is-checked .el-switch__core::after {
+    margin-left: -10px;
+  }
 }
 </style>