扇形图悬浮，词句卡片预览bug

src/views/corpus/Result.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="result" v-loading="loading">
-    <Header :projectShow="true" :seekShow="true" :seekOption="false" :seekOptions="true" @changehzdata="changehzdata" />
+    <Header
+      :projectShow="true"
+      :seekShow="true"
+      :seekOption="false"
+      :seekOptions="true"
+      @changehzdata="changehzdata"
+    />
     <div class="main">
-      <div
-        class="hanzi_list"
-      >
+      <div class="hanzi_list">
         <div class="top_jf">
           <div class="j_f">
             <div :class="[JFIndex == 0 ? 'sele' : '']" @click="jfEvent(0)">
@@ -15,48 +19,50 @@
             </div>
           </div>
         </div>
-        <div class="list_one_box"
-            :style="{
-                overflowY: unfold ? 'scroll' : 'hidden',
-            }">
-            <div
+        <div
+          class="list_one_box"
+          :style="{
+            overflowY: unfold ? 'scroll' : 'hidden',
+          }"
+        >
+          <div
             class="list_one"
             v-for="(item, index) in ShowHzData"
             :key="'index' + index"
-            >
+          >
             <Strockplayredline
-                v-if="item.hzDetail.hz_json"
-                :Book_text="JFIndex == 0 ? item.con : item.fanti"
-                :playStorkes="true"
-                :curItem="item.hzDetail"
-                :targetDiv="'bwcHanziIntp' + index + item.con"
-                :isHighlight="false"
-                :judgeAnswer="2"
+              v-if="item.hzDetail.hz_json"
+              :Book_text="JFIndex == 0 ? item.con : item.fanti"
+              :playStorkes="true"
+              :curItem="item.hzDetail"
+              :targetDiv="'bwcHanziIntp' + index + item.con"
+              :isHighlight="false"
+              :judgeAnswer="2"
             />
             <div class="Highlight" v-if="item.hzDetail.hz_json">
-                <div class="play_audio">
+              <div class="play_audio">
                 <img src="../../assets/teacherdev/speaker-one.png" alt="" />
                 <span>{{ item.pinyin }}</span>
-                </div>
-                <div
+              </div>
+              <div
                 v-for="(items, indexs) in item.hzDetail.hz_json.medians.length"
                 :key="'row' + indexs"
                 class="row"
-                >
+              >
                 <Strockplayredline
-                    :Book_text="JFIndex == 0 ? item.con : item.fanti"
-                    :playStorkes="false"
-                    :curItem="item.hzDetail"
-                    :targetDiv="'bwcHanziIntp_height' + index + item.con + indexs"
-                    :isHighlight="true"
-                    :judgeAnswer="indexs + 1"
+                  :Book_text="JFIndex == 0 ? item.con : item.fanti"
+                  :playStorkes="false"
+                  :curItem="item.hzDetail"
+                  :targetDiv="'bwcHanziIntp_height' + index + item.con + indexs"
+                  :isHighlight="true"
+                  :judgeAnswer="indexs + 1"
                 />
                 <div class="number">{{ indexs + 1 }}</div>
-                </div>
-            </div>
+              </div>
             </div>
+          </div>
         </div>
-        <div class="shouqi" v-if="hzData.length>2">
+        <div class="shouqi" v-if="hzData.length > 2">
           <span @click="updownHz">
             <template v-if="unfold">
               <img src="../../assets/teacherdev/up.png" alt="" />
@@ -213,7 +219,7 @@
                             v-if="shiyiShow"
                             >
                         （{{ item.shiyi }}）
-                        </div>
+                      </div>
                     </div>
                   </div>
                   <div class="bottom">{{ item.laiyuan }}</div>
@@ -241,7 +247,11 @@
                     }"
                   >
                     <div v-for="(txt, indexs) in item.resArr" :key="indexs">
-                      <span v-for="(txts, indexs) in txt" v-html="txts" :key="indexs"></span>
+                      <span
+                        v-for="(txts, indexs) in txt"
+                        v-html="txts"
+                        :key="indexs"
+                      ></span>
                     </div>
                   </div>
                 </div>
@@ -288,6 +298,8 @@
                 borderBottom:
                   i == rightList.length - 1 ? 'none' : '1px solid #eeeeee',
               }"
+              @mouseover="gaolangbzt(i, 'shanxing_main')"
+              @mouseout="closegaolangbzt(i, 'shanxing_main')"
             >
               <div>
                 <span></span>
@@ -885,12 +897,30 @@ 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("");
       arr.forEach((item) => {
-        if(!/^[\u4e00-\u9fa5]/.test(item)){
-            return
+        if (!/^[\u4e00-\u9fa5]/.test(item)) {
+          return;
         }
         let result = pinyinUtil.getPinyin(item);
         let obj = {
@@ -992,21 +1022,21 @@ export default {
         background: #de4444;
       }
     }
-    .list_one_box{ 
-        max-height: 750px;
-        padding: 0 27px;
-        &::-webkit-scrollbar-track-piece {
-            background: #fff;
-        }
+    .list_one_box {
+      max-height: 750px;
+      padding: 0 27px;
+      &::-webkit-scrollbar-track-piece {
+        background: #fff;
+      }
 
-        &::-webkit-scrollbar {
-            width: 4px;
-        }
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
 
-        &::-webkit-scrollbar-thumb {
-            background: #D9D9D9;
-            border-radius: 20px;
-        }
+      &::-webkit-scrollbar-thumb {
+        background: #d9d9d9;
+        border-radius: 20px;
+      }
     }
     .list_one {
       margin-bottom: 20px;

src/views/wordcard/cread.vue

@@ -160,7 +160,7 @@
         alt=""
         @click="closepreviewEvent"
       />
-      <div class="preview_main">
+      <div class="preview_main" v-loading="isPreviewMainLoading">
         <img
           class="left"
           src="../../assets/teacherdev/creadCad-left.png"
@@ -170,6 +170,7 @@
         <div class="word_main">
           <div class="word_main_table">
             <writeTable
+              v-if="isPreviewMainShow"
               :type="typeIndex"
               :dataConfig="writeTableData"
               :data="writeTableData.result[previewIndex]"
@@ -243,6 +244,8 @@ export default {
       htmlTitle: "1",
       saveShow: false,
       writetableShow: true,
+      isPreviewMainShow: true,
+      isPreviewMainLoading: false,
     };
   },
   //计算属性 类似于data概念
@@ -276,13 +279,25 @@ export default {
           this.$message.warning("当前已经是最后一页");
           return;
         }
+        this.isPreviewMainShow = false;
+        this.isPreviewMainLoading = true;
         this.previewIndex++;
+        setTimeout(() => {
+          this.isPreviewMainLoading = false;
+          this.isPreviewMainShow = true;
+        }, 100);
       } else {
         if (this.previewIndex == 0) {
           this.$message.warning("当前已经是第一页");
           return;
         }
+        this.isPreviewMainShow = false;
+        this.isPreviewMainLoading = true;
         this.previewIndex--;
+        setTimeout(() => {
+          this.isPreviewMainLoading = false;
+          this.isPreviewMainShow = true;
+        }, 100);
       }
     },
     // 预览
@@ -898,6 +913,11 @@ export default {
       display: flex;
       align-items: center;
       height: 100%;
+      .word_main_table {
+        width: 595px;
+        height: 842px;
+        box-sizing: border-box;
+      }
       > div {
         margin: 0 24px;
       }
@@ -978,11 +998,11 @@ export default {
     .el-switch__label.is-active {
       color: #000000;
     }
-    .numbre-input{
-        .el-input__inner {
-            padding: 0;
-            text-align: center;
-        }
+    .numbre-input {
+      .el-input__inner {
+        padding: 0;
+        text-align: center;
+      }
     }
   }
 }