修改生词 例句样式

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -90,7 +90,86 @@
           </div>
         </div>
         <div class="zhedie-white">
-          <div v-if="list1 && list1.length > 0" v-loading="loading1">
+          <div class="merge" v-loading="loading3">
+            <div class="topTitle">
+              <div class="left">
+                <div
+                  @click="cutLiju(0)"
+                  :class="[lijuIndex == 0 ? 'sele' : '']"
+                >
+                  <span> 全部 </span>
+                  <span>
+                    {{ list1.length + list2.length + list3.length }}
+                  </span>
+                </div>
+                <div
+                  @click="cutLiju(1)"
+                  v-if="list1 && list1.length > 0"
+                  :class="[lijuIndex == 1 ? 'sele' : '']"
+                >
+                  <span> 本课例句 </span>
+                  <span>{{ list1.length }} </span>
+                </div>
+                <div
+                  @click="cutLiju(2)"
+                  v-if="list2 && list2.length > 0"
+                  :class="[lijuIndex == 2 ? 'sele' : '']"
+                >
+                  <span> 本书例句 </span>
+                  <span>
+                    {{ list2.length }}
+                  </span>
+                </div>
+                <div
+                  @click="cutLiju(3)"
+                  v-if="list3 && list3.length > 0"
+                  :class="[lijuIndex == 3 ? 'sele' : '']"
+                >
+                  <span>本套例句</span>
+                  <span>{{ list.length }}</span>
+                </div>
+              </div>
+              <div class="right">
+                <div
+                  @click="cutPattern(0)"
+                  :class="[lijuPatternIndex == 0 ? 'sele' : '']"
+                >
+                  引语模式
+                </div>
+                <div
+                  @click="cutPattern(1)"
+                  :class="[lijuPatternIndex == 1 ? 'sele' : '']"
+                >
+                  KWIC模式
+                </div>
+              </div>
+            </div>
+            <div :class="['liju', lijuPatternIndex == 1 ? 'KWIC_liju' : '']">
+              <div v-for="(item, i) in CurrentList" :key="i">
+                <div>{{ i + 1 }}.</div>
+                <div>
+                  <template v-if="lijuPatternIndex == 1">
+                    <el-tooltip effect="dark" placement="bottom">
+                      <div slot="content">
+                        {{ item.source_courseware_name_path }}
+                      </div>
+                      <p class="p1">
+                        {{ item.source_courseware_name_path }}
+                      </p>
+                    </el-tooltip>
+                    <p class="p2" v-html="item.res"></p>
+                  </template>
+                  <template v-else>
+                    <p v-html="item.res"></p>
+                    <p class="p2">
+                      {{ item.source_courseware_name_path }}
+                    </p>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div v-if="list1 && list1.length > 0" v-loading="loading1">
             <div class="topTitle">
               <span>本课例句（{{ list1.length }}）</span>
               <span @click="handleChangeTab('wordShow')"
@@ -169,7 +248,7 @@
                 </div>
               </div>
             </el-collapse-transition>
-          </div>
+          </div> -->
         </div>
       </div>
       <div class="bottom" v-if="data && data.endata">
@@ -262,12 +341,16 @@ export default {
       list1: [],
       list2: [],
       list3: [],
+      allList: [],
       isShow: false,
       old_word: "",
       loading1: false,
       loading2: false,
       loading3: false,
       dataDetail: null,
+      lijuIndex: 0,
+      lijuPatternIndex: 0,
+      CurrentList: [],
     };
   },
   //计算属性 类似于data概念
@@ -290,6 +373,29 @@ export default {
   },
   //方法集合
   methods: {
+    // 切换模式
+    cutPattern(index) {
+      if (index == this.lijuPatternIndex) {
+        return;
+      }
+      this.lijuPatternIndex = index;
+    },
+    // 切换 例句
+    cutLiju(index) {
+      if (index == this.lijuIndex) {
+        return;
+      }
+      this.lijuIndex = index;
+      if (index == 0) {
+        this.CurrentList = JSON.parse(JSON.stringify(this.allList));
+      } else if (index == 1) {
+        this.CurrentList = JSON.parse(JSON.stringify(this.list1));
+      } else if (index == 2) {
+        this.CurrentList = JSON.parse(JSON.stringify(this.list2));
+      } else if (index == 3) {
+        this.CurrentList = JSON.parse(JSON.stringify(this.list3));
+      }
+    },
     playAudio() {},
     // 关闭单词详情
     closeWordShow() {
@@ -328,6 +434,7 @@ export default {
         .then((res) => {
           this.loading1 = false;
           this.list1 = this.handleExample(res.sentence_list);
+          this.allList = this.allList.concat(this.list1);
           console.log(this.list1);
           getContent(Mname, {
             courseware_id: this.currentTreeID, // 课件id
@@ -338,6 +445,8 @@ export default {
             .then((res) => {
               this.loading2 = false;
               this.list2 = this.handleExample(res.sentence_list);
+              this.allList = this.allList.concat(this.list2);
+
               getContent(Mname, {
                 courseware_id: this.currentTreeID, // 课件id
                 word: this.data.new_word, //生词
@@ -347,6 +456,9 @@ export default {
                 .then((res) => {
                   this.loading3 = false;
                   this.list3 = this.handleExample(res.sentence_list);
+                  this.allList = this.allList.concat(this.list3);
+                  this.CurrentList = JSON.parse(JSON.stringify(this.allList));
+                  console.log(this.allList);
                 })
                 .catch((err) => {
                   this.loading3 = false;
@@ -450,7 +562,8 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
@@ -689,6 +802,81 @@ export default {
           }
         }
       }
+      .merge {
+        .topTitle {
+          .left {
+            height: 100%;
+            display: flex;
+            font-size: 12px;
+            align-items: flex-end;
+            > div {
+              padding: 0 12px 8px 12px;
+              cursor: pointer;
+              > :nth-child(1) {
+                margin-right: 4px;
+                color: #000000;
+              }
+              > :nth-child(2) {
+                color: rgba(0, 0, 0, 0.5);
+              }
+            }
+            .sele {
+              border-bottom: 1px solid #ff5757;
+              > :nth-child(1) {
+                color: #ff5757;
+              }
+              > :nth-child(2) {
+                color: rgba(255, 87, 87, 0.5);
+              }
+            }
+          }
+          .right {
+            width: 144px;
+            height: 28px;
+            display: flex;
+            background: #eeeeee;
+            border-radius: 4px;
+            padding: 2px;
+            > div {
+              width: 76px;
+              height: 24px;
+              color: #888888;
+              text-align: center;
+              line-height: 24px;
+              cursor: pointer;
+            }
+            .sele {
+              background: #ffffff;
+              box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
+              color: #000000;
+            }
+          }
+        }
+        .KWIC_liju {
+          > div {
+            > div {
+              display: flex;
+              .p1 {
+                width: 117px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                margin-left: 16px;
+              }
+              .p2 {
+                width: 469px;
+                margin-left: 16px;
+                text-align: center;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 22px;
+                color: #000000;
+                opacity: 1;
+              }
+            }
+          }
+        }
+      }
     }
   }
   .bottom {
@@ -765,6 +953,10 @@ export default {
 }
 </style>
 <style lang="scss">
+.el-tooltip__popper,
+.is-dark {
+  z-index: 99999 !important;
+}
 .NPC-Big-Book-preview-red {
   .wordDetailChs {
     .zhedie-white {

vue.config.js

@@ -43,8 +43,8 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `https://gcls.utschool.cn/`,
-        //target: `https://gcls.helxsoft.cn/`,
+        // target: `https://gcls.utschool.cn/`,
+        target: `https://gcls.helxsoft.cn/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''