词典模块接口

src/views/dictionary/components/SearchInput.vue

@@ -1,182 +1,225 @@
 <template>
   <div class="search-box searchInput-compent">
-        <div class="search-top">
-            <el-input placeholder="输入你要查询的单词" v-model="searchInput" @input="handleSearchInput" @focus="handleSearchInput" @keyup.enter.native="handleSearch" maxlength="100"></el-input>
-            <a class="search-btn" @click="handleSearch">查询</a>
-        </div>
-        <div class="search-bottom" v-if="finalList.length>0&&showFinalFlag">
-            <div v-for="(item, index) in finalList" :key="index" @click="handleClickSelect(item)" :class="[index===finalIndex?'active':'']">
-                <span v-for="(itemB,indexB) in item.value.split(searchInput.trim())" :key="indexB">
-                    <a>{{itemB}}</a>
-                    <template v-if="indexB!==item.value.split(searchInput.trim()).length-1">
-                        <b>{{searchInput.trim()}}</b>
-                    </template>
-                </span>
-                <span class="para">{{item.para}}</span>
-            </div>
+    <div class="search-top">
+      <el-input
+        placeholder="输入你要查询的单词"
+        v-model="searchInput"
+        @input="handleSearchInput"
+        @focus="handleSearchInput"
+        @keyup.enter.native="handleSearch"
+        maxlength="100"
+      ></el-input>
+      <a class="search-btn" @click="handleSearch">查询</a>
+    </div>
+    <div
+      class="search-bottom"
+      :style="{ height: finalLoading ? '200px' : '' }"
+      v-if="showFinalFlag"
+      v-loading="finalLoading"
+    >
+      <template v-if="finalList.length > 0">
+        <div
+          v-for="(item, index) in finalList"
+          :key="index"
+          @click="handleClickSelect(item)"
+          :class="[index === finalIndex ? 'active' : '']"
+        >
+          <span
+            v-for="(itemB, indexB) in item.w.split(searchInput.trim())"
+            :key="indexB"
+          >
+            <a>{{ itemB }}</a>
+            <template
+              v-if="indexB !== item.w.split(searchInput.trim()).length - 1"
+            >
+              <b>{{ searchInput.trim() }}</b>
+            </template>
+          </span>
+          <span class="para">{{ item.m }}</span>
         </div>
+      </template>
     </div>
+  </div>
 </template>
 
 <script>
+import { getLogin } from "@/api/ajax";
 export default {
-  name: 'searchInput',
-  props:["restaurants", "searchQuery"],
-  data(){
-    return{
-        searchInput: this.searchQuery ? this.searchQuery : '', // 搜索内容
-        finalList: [], // 最终搜索结果
-        showFinalFlag: false, // 显示搜索结果列表
-        finalIndex: null,
-    }
-  },
-  computed: {
-    
+  name: "searchInput",
+  props: ["restaurants", "searchQuery"],
+  data() {
+    return {
+      searchInput: this.searchQuery ? this.searchQuery : "", // 搜索内容
+      finalList: [], // 最终搜索结果
+      showFinalFlag: false, // 显示搜索结果列表
+      finalIndex: null,
+      finalLoading: false,
+    };
   },
-  components: {
-  },
-  methods:{
+  computed: {},
+  components: {},
+  methods: {
     // 筛选内容
-    handleSearchInput(){
-        // 因为要搜索短语 所以前端不去除空格
-        let searchValue = this.searchInput.trim()
-        this.finalIndex = null
-        this.finalList = []
-        this.showFinalFlag = false
-        if(searchValue){
-            this.restaurants.forEach(item => {
-                if(item.value.indexOf(searchValue)>-1){
-                    this.finalList.push(item)
-                }
-            });
-            this.showFinalFlag = true
-        }
+    handleSearchInput() {
+      // 因为要搜索短语 所以前端不去除空格
+      let searchValue = this.searchInput.trim();
+      this.finalIndex = null;
+      this.finalList = [];
+      if (searchValue) {
+        this.finalLoading = true;
+        this.showFinalFlag = true;
+        let MethodName = "/PaperServer/Client/Dict/GetWordSuggests";
+        let data = {
+          limit: 10,
+          keyword: searchValue,
+        };
+        getLogin(MethodName, data)
+          .then((res) => {
+            this.finalLoading = false;
+            if (res.status === 1) {
+              this.finalList = res.data;
+            }
+          })
+          .catch(() => {
+            this.finalLoading = false;
+          });
+      } else {
+        this.showFinalFlag = false;
+      }
     },
     // 点击选择搜索内容
-    handleClickSelect(item){
-        this.searchInput = item.value
-        this.showFinalFlag = false
+    handleClickSelect(item) {
+      this.searchInput = item.w;
+      this.showFinalFlag = false;
     },
     // 点击查询 保留最近10条
-    handleSearch(e){
-        // console.log(e)
-        // if((e.isComposing && e.type == 'keyup') || e.type == 'click'){
-        //     console.log(e)
-            this.showFinalFlag = false
-            // this.lastSearchList.push(this.searchInput.trim())
-            // this.lastSearchList = this.lastSearchList.slice(-10)
-            if(this.searchInput.trim()){
-                this.goto(this.searchInput.trim())
-            }else{
-                this.$message.warning('请先输入要查询的内容');
-            }
-        // }
+    handleSearch(e) {
+      // console.log(e)
+      // if((e.isComposing && e.type == 'keyup') || e.type == 'click'){
+      //     console.log(e)
+      this.showFinalFlag = false;
+      // this.lastSearchList.push(this.searchInput.trim())
+      // this.lastSearchList = this.lastSearchList.slice(-10)
+      if (this.searchInput.trim()) {
+        this.goto(this.searchInput.trim());
+      } else {
+        this.$message.warning("请先输入要查询的内容");
+      }
+      // }
     },
-    goto(content){
-        this.$router.push({
-            path: "/dictionary/detail",
-            query: {
-                content: content
-            },
-        });
+    goto(content) {
+      this.$router.push({
+        path: "/dictionary/detail",
+        query: {
+          content: content,
+        },
+      });
+      window.location.reload();
     },
     // 监听上下键
-    keyDownUp(){
-        document.onkeydown =  (e) => {
-          //事件对象兼容
-          let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
-          //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
-          if (e1 && e1.keyCode == 38) {
-            // 按下上箭头
-            if(this.finalList.length>0&&this.finalIndex){
-                this.finalIndex--
-            }
-            e.preventDefault()
-          } else if (e1 && e1.keyCode == 40) {
-            // 按下下箭头
-            if(this.finalList.length>0&&this.finalIndex!==null&&this.finalIndex<this.finalList.length-1){
-                this.finalIndex++
-            }else if(this.finalList.length>0&&this.finalIndex===null){
-                this.finalIndex = 0
-            }
-            e.preventDefault()
+    keyDownUp() {
+      document.onkeydown = (e) => {
+        //事件对象兼容
+        let e1 =
+          e || event || window.event || arguments.callee.caller.arguments[0];
+        //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
+        if (e1 && e1.keyCode == 38) {
+          // 按下上箭头
+          if (this.finalList.length > 0 && this.finalIndex) {
+            this.finalIndex--;
           }
-          if(this.finalIndex!==null) this.searchInput = this.finalList[this.finalIndex].value
+          e.preventDefault();
+        } else if (e1 && e1.keyCode == 40) {
+          // 按下下箭头
+          if (
+            this.finalList.length > 0 &&
+            this.finalIndex !== null &&
+            this.finalIndex < this.finalList.length - 1
+          ) {
+            this.finalIndex++;
+          } else if (this.finalList.length > 0 && this.finalIndex === null) {
+            this.finalIndex = 0;
+          }
+          e.preventDefault();
         }
-    }
+        if (this.finalIndex !== null)
+          this.searchInput = this.finalList[this.finalIndex].value;
+      };
+    },
   },
-  mounted(){
-    this.keyDownUp()
-  }
-}
+  mounted() {
+    this.keyDownUp();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.search-box{
-    background: #FFFFFF;
-    border-radius: 30px;
-    width: 740px;
-    padding: 4px;
-    .search-top{
-        display: flex;
-    }
-    .search-bottom{
-        max-height: 200px;
-        overflow-y: auto;
-        margin-top: 4px;
-        &::-webkit-scrollbar { 
-            display: none;
-        }
-        >div{
-            padding: 8px 24px;
-            overflow: hidden;
-            font-size: 16px;
-            line-height: 24px;
-            display: flex;
-            cursor: pointer;
-            &:hover,&.active{
-                background: #f5f5f5;
-            }
-            a{
-                color: rgba(141, 164, 239, 1);
-            }
-            b{
-                color: rgba(52, 89, 210, 1);
-            }
-            .para{
-                color: rgba(0, 0, 0, 0.48);
-                margin-left: 8px;
-                flex: 1;
-                overflow:hidden;
-                text-overflow:ellipsis;
-                white-space: nowrap;
-            }
-        }
+.search-box {
+  background: #ffffff;
+  border-radius: 30px;
+  width: 740px;
+  padding: 4px;
+  .search-top {
+    display: flex;
+  }
+  .search-bottom {
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 4px;
+    &::-webkit-scrollbar {
+      display: none;
     }
-    .search-btn{
-        width: 116px;
-        height: 48px;
-        display: block;
-        background: #EEF3FF;
-        border-radius: 30px;
-        cursor: pointer;
-        text-align: center;
-        line-height: 48px;
-        font-size: 16px;
-        color: #3459D2;
+    > div {
+      padding: 8px 24px;
+      overflow: hidden;
+      font-size: 16px;
+      line-height: 24px;
+      display: flex;
+      cursor: pointer;
+      &:hover,
+      &.active {
+        background: #f5f5f5;
+      }
+      a {
+        color: rgba(141, 164, 239, 1);
+      }
+      b {
+        color: rgba(52, 89, 210, 1);
+      }
+      .para {
+        color: rgba(0, 0, 0, 0.48);
+        margin-left: 8px;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
+  }
+  .search-btn {
+    width: 116px;
+    height: 48px;
+    display: block;
+    background: #eef3ff;
+    border-radius: 30px;
+    cursor: pointer;
+    text-align: center;
+    line-height: 48px;
+    font-size: 16px;
+    color: #3459d2;
+  }
 }
 </style>
 <style lang="scss">
-.searchInput-compent{
-    overflow: hidden;
-    input{
-        border: none;
-        padding-left: 24px;
-        height: 48px;
-        line-height: 48px;
-        font-size: 16px;
-        color: rgba(0, 0, 0, 0.88);
-    }
+.searchInput-compent {
+  overflow: hidden;
+  input {
+    border: none;
+    padding-left: 24px;
+    height: 48px;
+    line-height: 48px;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.88);
+  }
 }
-</style>
+</style>

src/views/dictionary/index.vue

@@ -7,26 +7,31 @@
       :LoginNavIndex="3"
     />
     <div class="banner">
-        <img src="../../assets/dictionary-big.png" />
+      <img src="../../assets/dictionary-big.png" />
     </div>
     <SearchInput class="search-compent" :restaurants="restaurants" />
     <div class="main">
-      <div v-if="lastSearchList.length>0">
+      <div v-if="lastSearchList.length > 0">
         <h2>查询记录</h2>
         <ul>
-            <li v-for="(item,index) in lastSearchList" :key="index">
-                <b @click="goto(item)">{{item}}</b>
-                <i class="el-icon-close" @click="handleDelete(index)"></i>
-            </li>
+          <li v-for="(item, index) in lastSearchList" :key="index">
+            <b @click="goto(item)">{{ item }}</b>
+            <i class="el-icon-close" @click="handleDelete(index)"></i>
+          </li>
         </ul>
       </div>
-      <div v-if="hotSearchList.length>0">
+      <div v-if="hotSearchList.length > 0">
         <h2>热门查询</h2>
         <ul class="hotSearch">
-            <li v-for="(item,index) in hotSearchList" :key="index" :class="[index%3==2?'noMargin':'']" @click="goto(item)">
-                <span :class="['xuhao_'+index]">{{index+1}}</span>
-                <b :title="item">{{item}}</b>
-            </li>
+          <li
+            v-for="(item, index) in hotSearchList"
+            :key="index"
+            :class="[index % 3 == 2 ? 'noMargin' : '']"
+            @click="goto(item)"
+          >
+            <span :class="['xuhao_' + index]">{{ index + 1 }}</span>
+            <b :title="item">{{ item }}</b>
+          </li>
         </ul>
       </div>
     </div>
@@ -37,7 +42,8 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "../../components/Header.vue";
-import SearchInput from "./components/SearchInput.vue"
+import SearchInput from "./components/SearchInput.vue";
+import { getLogin } from "@/api/ajax";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -46,18 +52,10 @@ export default {
   data() {
     //这里存放数据
     return {
-      restaurants: [
-          { "value": "co", "para": "abbr. 一氧化碳" },
-          { "value": "comco", "para": "abbr. 一氧化碳1111" },
-          { "value": "come in", "para": "abbr. 组件对象模型" },
-          { "value": "content", "para": "adj. 满足的，满意的，甘愿的" },
-          { "value": "cogent", "para": "adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的" },
-        ],
-      hotSearchList: [ // 热门查询列表
-        'ChartGpt','Covid-19','AI','Roman','FIFA','Messi','the three body','Encanto','Premier'
-      ],
-      lastSearchList: ['891期','理性与神秘','局外人'], // 查询记录列表
-    }
+      restaurants: [],
+      hotSearchList: [],
+      lastSearchList: [], // 查询记录列表
+    };
   },
   //计算属性 类似于data概念
   computed: {},
@@ -66,145 +64,171 @@ export default {
   //方法集合
   methods: {
     // 删除热门查询某条
-    handleDelete(index){
-        this.lastSearchList.splice(index,1)
+    handleDelete(index) {
+      this.lastSearchList.splice(index, 1);
+    },
+    goto(content) {
+      this.$router.push({
+        path: "/dictionary/detail",
+        query: {
+          content: content,
+        },
+      });
+    },
+    // 查询系统搜索关键热词
+    getHotWordList() {
+      let MethodName = "/PaperServer/Client/Dict/QueryHotWordList";
+      let data = {
+        limit: 9,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          this.hotSearchList = res.data;
+        }
+      });
     },
-    goto(content){
-        this.$router.push({
-            path: "/dictionary/detail",
-            query: {
-                content: content
-            },
-        });
+    // 查询用户最近搜索的单词
+    getUserSearchList() {
+      let MethodName = "/PaperServer/Client/Dict/QueryUserSearchWordList";
+      let data = {
+        limit: 10,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          this.lastSearchList = res.data;
+        }
+      });
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-
+    this.getHotWordList();
+    this.getUserSearchList();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.dictionary{
-    position: relative;
-    .banner{
-        background: #3459D2;
-        height: 209px;
-        text-align: center;
-        font-size: 0;
-        img{
-            height: 64px;
-            margin-top: 73px;
-        }
+.dictionary {
+  position: relative;
+  .banner {
+    background: #3459d2;
+    height: 209px;
+    text-align: center;
+    font-size: 0;
+    img {
+      height: 64px;
+      margin-top: 73px;
     }
-    .search-compent{
-        box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
-        width: 740px;
-        position: absolute;
-        top: 181px;
-        left: 50%;
-        margin-left: -370px;
+  }
+  .search-compent {
+    box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
+      0px 16px 24px 2px rgba(0, 0, 0, 0.04),
+      0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+    width: 740px;
+    position: absolute;
+    top: 181px;
+    left: 50%;
+    margin-left: -370px;
+  }
+  .main {
+    width: 740px;
+    margin: 0 auto;
+    padding-top: 36px;
+    h2 {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: rgba(0, 0, 0, 0.48);
+      margin-top: 32px;
+      margin-bottom: 0px;
+    }
+    ul {
+      list-style: none;
+      display: flex;
+      flex-flow: wrap;
+      margin: 0;
+      padding: 8px 0 0 0;
+      li {
+        padding: 8px 12px 8px;
+        background: #e9f7f2;
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        margin: 8px 7px 8px 0;
+        b {
+          color: #299772;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+          cursor: pointer;
+        }
+        .el-icon-close {
+          color: #299772;
+          cursor: pointer;
+          margin-left: 8px;
+        }
+      }
     }
-    .main{
-        width: 740px;
-        margin: 0 auto;
-        padding-top: 36px;
-        h2{
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 24px;
-            color: rgba(0, 0, 0, 0.48);
-            margin-top: 32px;
-            margin-bottom: 0px;
+    .hotSearch {
+      li {
+        width: 240px;
+        height: 56px;
+        background: #ffffff;
+        border-radius: 8px;
+        cursor: pointer;
+        margin-right: 10px;
+        padding: 16px 26px;
+        &.noMargin {
+          margin-right: 0;
         }
-        ul{
-            list-style: none;
-            display: flex;
-            flex-flow: wrap;
-            margin: 0;
-            padding: 8px 0 0 0;
-            li{
-                padding: 8px 12px 8px;
-                background: #E9F7F2;
-                border-radius: 20px;
-                display: flex;
-                align-items: center;
-                margin: 8px 7px 8px 0;
-                b{
-                    color: #299772;
-                    font-weight: 400;
-                    font-size: 16px;
-                    line-height: 24px;
-                    cursor: pointer;
-                }
-                .el-icon-close{
-                    color: #299772;
-                    cursor: pointer;
-                    margin-left: 8px;
-                }
-            }
+        span {
+          display: block;
+          background: #5373e7;
+          border-radius: 2px;
+          width: 18px;
+          height: 18px;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 18px;
+          text-align: center;
+          color: #ffffff;
+          &.xuhao_0 {
+            background: #cd2b31;
+          }
+          &.xuhao_1 {
+            background: #ed5f00;
+          }
+          &.xuhao_2 {
+            background: #f8960d;
+          }
         }
-        .hotSearch{
-            li{
-                width: 240px;
-                height: 56px;
-                background: #FFFFFF;
-                border-radius: 8px;
-                cursor: pointer;
-                margin-right: 10px;
-                padding: 16px 26px;
-                &.noMargin{
-                    margin-right: 0;
-                }
-                span{
-                    display: block;
-                    background: #5373E7;
-                    border-radius: 2px;
-                    width: 18px;
-                    height: 18px;
-                    font-weight: 400;
-                    font-size: 14px;
-                    line-height: 18px;
-                    text-align: center;
-                    color: #FFFFFF;
-                    &.xuhao_0{
-                        background: #CD2B31;
-                    }
-                    &.xuhao_1{
-                        background: #ED5F00;
-                    }
-                    &.xuhao_2{
-                        background: #F8960D;
-                    }
-                }
-                b{
-                    color: #2F3742;
-                    margin-left: 10px;
-                    flex: 1;
-                    overflow: hidden;
-                    text-overflow:ellipsis;
-                    white-space: nowrap;
-                }
-            }
+        b {
+          color: #2f3742;
+          margin-left: 10px;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
+      }
     }
+  }
 }
-</style>
+</style>

src/views/dictionary/searchDetail.vue

@@ -7,57 +7,200 @@
       :LoginNavIndex="3"
     />
     <div class="banner">
-        <a class="goback" @click="$router.push('/dictionary')"><i class="el-icon-arrow-left"></i>返回</a>
-        <div class="banner-inner">
-            <img src="../../assets/icon-book-small.png" />
-            <SearchInput class="search-compent" :restaurants="restaurants" :searchQuery="searchQuery" />
-        </div>
+      <a class="goback" @click="$router.push('/dictionary')"
+        ><i class="el-icon-arrow-left"></i>返回</a
+      >
+      <div class="banner-inner">
+        <img src="../../assets/icon-book-small.png" />
+        <SearchInput
+          class="search-compent"
+          :restaurants="restaurants"
+          :searchQuery="searchQuery"
+        />
+      </div>
     </div>
     <div class="main">
-        <span class="source">{{data.source}}</span>
-        <div class="headWord-box">
-            <p>{{data.headWord}}</p>
-            <svg-icon icon-class="like" className="icon-like" @click="handleCollect('no')"></svg-icon>
+      <span class="source">{{ data.source }}</span>
+      <div class="headWord-box">
+        <p>{{ data.headWord }}</p>
+        <svg-icon
+          icon-class="like"
+          className="icon-like"
+          @click="handleCollect('no')"
+        ></svg-icon>
+      </div>
+      <p class="testType" v-if="data.testType">{{ data.testType }}</p>
+      <div
+        class="pronunciations-list"
+        v-if="data.pronunciations && data.pronunciations.length > 0"
+      >
+        <div
+          class="pronunciations-item"
+          v-for="(itemP, indexP) in data.pronunciations"
+          :key="indexP"
+        >
+          <label v-if="itemP.region">{{
+            itemP.region == "uk" ? "英" : "美"
+          }}</label>
+          <span v-if="itemP.phonetic">{{ itemP.phonetic }}</span>
+          <img v-if="itemP.sound" src="../../assets/icon-speaker.png" />
         </div>
-        <p class="testType" v-if="data.testType">{{data.testType}}</p>
-        <div class="pronunciations-list" v-if="data.pronunciations&&data.pronunciations.length>0">
-            <div class="pronunciations-item" v-for="(itemP,indexP) in data.pronunciations" :key="indexP">
-                <label v-if="itemP.region">{{itemP.region=='uk'?'英':'美'}}</label>
-                <span v-if="itemP.phonetic">{{itemP.phonetic}}</span>
-                <img v-if="itemP.sound" src="../../assets/icon-speaker.png" />
-            </div>
+      </div>
+      <div
+        class="definition-list"
+        v-if="data.definition_list && data.definition_list.length > 0"
+      >
+        <div
+          class="definition-item"
+          v-for="(itemD, indexD) in data.definition_list"
+          :key="indexD"
+        >
+          <label>{{ itemD.part }}</label>
+          <p>{{ itemD.des }}</p>
         </div>
-        <div class="definition-list" v-if="data.definition_list&&data.definition_list.length>0">
-            <div class="definition-item" v-for="(itemD,indexD) in data.definition_list" :key="indexD">
-                <label>{{itemD.part}}</label>
-                <p>{{itemD.des}}</p>
-            </div>
+      </div>
+      <el-divider content-position="left">例句</el-divider>
+      <div class="number-list" v-if="sentKwicData">
+        <div
+          class="number-item"
+          :class="[activeIndex === 0 ? 'active' : '']"
+          @click="handleLookStore(0)"
+        >
+          <label>全部</label>
+          <span>{{ sentKwicData.total }}</span>
         </div>
-        <el-divider content-position="left">例句</el-divider>
-        <div class="number-list" v-if="data.bookstore&&data.bookstore.length>0">
-            <div class="number-item" :class="[activeIndex===indexB?'active':'']" v-for="(itemB,indexB) in data.bookstore" :key="indexB" @click="handleLookStore(indexB)">
-                <label>{{itemB.label}}</label>
-                <span>{{itemB.value}}</span>
-            </div>
+        <div
+          class="number-item"
+          :class="[activeIndex === 1 ? 'active' : '']"
+          @click="handleLookStore(1)"
+        >
+          <label>我的书架</label>
+          <span>{{ sentKwicData.my_bought_total }}</span>
         </div>
-        <div class="module-box">
-            <el-switch
-                v-model="kwicFlag"
-                active-text="KWIC模式">
-            </el-switch>
-            <div class="align-box" v-if="kwicFlag">
-                <a :class="[kwicAlign=='left'?'active':'']" @click="kwicAlign='left'">
-                    <svg-icon icon-class="align-left" className="icon-align"></svg-icon>
-                </a>
-                <a :class="[kwicAlign=='center'?'active':'']" @click="kwicAlign='center'">
-                    <svg-icon icon-class="align-center" className="icon-align"></svg-icon>
-                </a>
-                <a :class="[kwicAlign=='right'?'active':'']" @click="kwicAlign='right'">
-                    <svg-icon icon-class="align-right" className="icon-align"></svg-icon>
-                </a>
-            </div>
+      </div>
+      <div class="module-box">
+        <el-switch
+          v-model="kwicFlag"
+          active-color="#175DFF"
+          active-text="KWIC模式"
+        >
+        </el-switch>
+        <div class="align-box" v-if="kwicFlag">
+          <a
+            :class="[kwicAlign == 'left' ? 'active' : '']"
+            @click="kwicAlign = 'left'"
+          >
+            <svg-icon icon-class="align-left" className="icon-align"></svg-icon>
+          </a>
+          <a
+            :class="[kwicAlign == 'center' ? 'active' : '']"
+            @click="kwicAlign = 'center'"
+          >
+            <svg-icon
+              icon-class="align-center"
+              className="icon-align"
+            ></svg-icon>
+          </a>
+          <a
+            :class="[kwicAlign == 'right' ? 'active' : '']"
+            @click="kwicAlign = 'right'"
+          >
+            <svg-icon
+              icon-class="align-right"
+              className="icon-align"
+            ></svg-icon>
+          </a>
         </div>
-        
+      </div>
+      <div class="list">
+        <template v-if="!kwicFlag">
+          <div
+            v-for="(item, i) in activeIndex === 0
+              ? sentKwicData.sentence_list
+              : sentKwicData.shelf_list"
+            :key="i + 'sentence'"
+            class="one"
+          >
+            <div class="top">
+              <div class="number">{{ item.number }}.</div>
+              <div class="words">
+                <span v-html="item.res"></span>
+              </div>
+            </div>
+            <div class="bottom">
+              {{ item.source_courseware_name_path }}
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <template v-if="activeIndex === 0">
+            <div
+              v-for="(item, index) in kwicAlign === 'left'
+                ? sentKwicData.sentence_list_sort_left
+                : kwicAlign === 'center'
+                ? sentKwicData.sentence_list_sort_mid
+                : sentKwicData.sentence_list_sort_right"
+              :key="'kwic' + index"
+              class="kwic_one"
+            >
+              <div class="number">{{ item.number }}</div>
+              <el-tooltip effect="dark" placement="bottom">
+                <div class="content" slot="content">
+                  {{ item.source_courseware_name_path }}
+                </div>
+                <div class="laiyuan">
+                  {{ item.source_courseware_name_path }}
+                </div>
+              </el-tooltip>
+              <div class="word_sentence">
+                <div v-for="(txt, indexs) in item.resArr" :key="indexs">
+                  <span
+                    v-for="(txts, indexs) in txt"
+                    v-html="txts[0]"
+                    :key="indexs"
+                  ></span>
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-if="activeIndex === 1">
+            <div
+              v-for="(item, index) in kwicAlign === 'left'
+                ? sentKwicData.shelf_list_sort_left
+                : kwicAlign === 'center'
+                ? sentKwicData.shelf_list_sort_mid
+                : sentKwicData.shelf_list_sort_right"
+              :key="'kwic' + index"
+              class="kwic_one"
+            >
+              <div class="number">{{ item.number }}</div>
+              <el-tooltip effect="dark" placement="bottom">
+                <div class="content" slot="content">
+                  {{ item.source_courseware_name_path }}
+                </div>
+                <div class="laiyuan">
+                  {{ item.source_courseware_name_path }}
+                </div>
+              </el-tooltip>
+              <div class="word_sentence">
+                <div v-for="(txt, indexs) in item.resArr" :key="indexs">
+                  <span
+                    v-for="(txts, indexs) in txt"
+                    v-html="txts[0]"
+                    :key="indexs"
+                  ></span>
+                </div>
+              </div>
+            </div>
+          </template>
+        </template>
+        <a
+          class="load-more"
+          @click="loadMore"
+          v-if="activeIndex === 0 ? maxPage > pageNo : maxPageShelf > pageNo"
+          >加载更多</a
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -66,7 +209,8 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "../../components/Header.vue";
-import SearchInput from "./components/SearchInput.vue"
+import SearchInput from "./components/SearchInput.vue";
+import { getLogin } from "@/api/ajax";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -75,362 +219,979 @@ export default {
   data() {
     //这里存放数据
     return {
-      restaurants: [
-          { "value": "co", "para": "abbr. 一氧化碳" },
-          { "value": "comco", "para": "abbr. 一氧化碳1111" },
-          { "value": "come in", "para": "abbr. 组件对象模型" },
-          { "value": "content", "para": "adj. 满足的，满意的，甘愿的" },
-          { "value": "cogent", "para": "adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的adj. 有说服力的，令人信服的" },
-      ],
-      searchQuery: this.$route.query.content?this.$route.query.content:'',
-      data:{
-        source:'金山词霸',
-        headWord:'cogent',
-        testType:'GRE/IELTS',
-        pronunciations:[
-            {
-                region:'uk',
-                phonetic: '/ˈkəʊdʒənt/',
-                sound:'https://mk.wmjh.cn/bva-upload-h8o01cxdm6g/word_mp3/03/03717__bond_n0205.mp3'
-            },
-            {
-                region:'us',
-                phonetic: '/ˈkoʊdʒənt/',
-                sound:'https://mk.wmjh.cn/bva-upload-h8o01cxdm6g/word_mp3/03/03717__bond_n0205.mp3'
-            },
+      restaurants: [],
+      searchQuery: this.$route.query.content ? this.$route.query.content : "",
+      data: {
+        source: "金山词霸",
+        headWord: "cogent",
+        testType: "GRE/IELTS",
+        pronunciations: [
+          {
+            region: "uk",
+            phonetic: "/ˈkəʊdʒənt/",
+            sound:
+              "https://mk.wmjh.cn/bva-upload-h8o01cxdm6g/word_mp3/03/03717__bond_n0205.mp3",
+          },
+          {
+            region: "us",
+            phonetic: "/ˈkoʊdʒənt/",
+            sound:
+              "https://mk.wmjh.cn/bva-upload-h8o01cxdm6g/word_mp3/03/03717__bond_n0205.mp3",
+          },
         ],
         definition_list: [
-            {
-                part: 'adj.',
-                des: '（理由、论据）有说服力的，令人信服的；'
-            },
-            {
-                part: 'n.',
-                des: '例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者'
-            },
-            {
-                part: 'v.',
-                des: '得到说明，可加以举例说明'
-            },
-            {
-                part: 'adj.',
-                des: '（理由、论据）有说服力的，令人信服的；'
-            },
-            {
-                part: 'n.',
-                des: '例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者'
-            },
-            {
-                part: 'v.',
-                des: '得到说明，可加以举例说明'
-            },
-            {
-                part: 'adj.',
-                des: '（理由、论据）有说服力的，令人信服的；'
-            },
-            {
-                part: 'n.',
-                des: '例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者'
-            },
-            {
-                part: 'v.',
-                des: '得到说明，可加以举例说明'
-            },
-            {
-                part: 'adj.',
-                des: '（理由、论据）有说服力的，令人信服的；'
-            },
-            {
-                part: 'n.',
-                des: '例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者'
-            },
-            {
-                part: 'v.',
-                des: '得到说明，可加以举例说明'
-            }
+          {
+            part: "adj.",
+            des: "（理由、论据）有说服力的，令人信服的；",
+          },
+          {
+            part: "n.",
+            des: "例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者",
+          },
+          {
+            part: "v.",
+            des: "得到说明，可加以举例说明",
+          },
+          {
+            part: "adj.",
+            des: "（理由、论据）有说服力的，令人信服的；",
+          },
+          {
+            part: "n.",
+            des: "例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者",
+          },
+          {
+            part: "v.",
+            des: "得到说明，可加以举例说明",
+          },
+          {
+            part: "adj.",
+            des: "（理由、论据）有说服力的，令人信服的；",
+          },
+          {
+            part: "n.",
+            des: "例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者",
+          },
+          {
+            part: "v.",
+            des: "得到说明，可加以举例说明",
+          },
+          {
+            part: "adj.",
+            des: "（理由、论据）有说服力的，令人信服的；",
+          },
+          {
+            part: "n.",
+            des: "例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者",
+          },
+          {
+            part: "v.",
+            des: "得到说明，可加以举例说明",
+          },
         ],
         bookstore: [
-            {
-                label:'全部',
-                value: 9
-            },
-            {
-                label:'我的书架',
-                value: 7
-            }
-        ]
+          {
+            label: "全部",
+            value: 9,
+          },
+          {
+            label: "我的书架",
+            value: 7,
+          },
+        ],
       },
       kwicFlag: false,
       activeIndex: 0, // 高亮索引
-      kwicAlign: 'left',
-    }
+      kwicAlign: "left",
+      enFhList: [
+        ",",
+        ".",
+        ";",
+        "?",
+        "!",
+        ":",
+        ">",
+        "<",
+        "'",
+        ")",
+        "”",
+        '"',
+        "#",
+      ],
+      pageNo: 1,
+      pageNoNew: 1,
+      maxPage: 1,
+      maxPageShelf: 1,
+      audio: new Audio(),
+      voiceSrc: "",
+      voicePauseSrc: "",
+      voicePlaySrc: require("../../assets/voice-play-red.png"),
+      sentKwicData: {
+        my_bought_total: 0,
+        total: 0,
+        max_page_no: 0,
+        sentence_list: [],
+        sentence_list_sort_left: [],
+        sentence_list_sort_mid: [],
+        sentence_list_sort_right: [],
+        shelf_list: [],
+        shelf_list_sort_left: [],
+        shelf_list_sort_mid: [],
+        shelf_list_sort_right: [],
+      },
+    };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
   watch: {
-    $route:{
-        immediate:true,
-        handler(){
-            if(this.$route.query.content){
-                $(".main").animate({
-                    scrollTop: 0
-                }, 200);
-            }
-        },
-        deep: true
-    }
+    $route: {
+      immediate: true,
+      handler() {
+        if (this.$route.query.content) {
+          $(".main").animate(
+            {
+              scrollTop: 0,
+            },
+            200
+          );
+        }
+      },
+      deep: true,
+    },
   },
   //方法集合
   methods: {
-    handleCollect(type){
-        if(type=='no'){
-            alert('收藏成功')
+    handleCollect(type) {
+      if (type == "no") {
+        alert("收藏成功");
+      }
+    },
+    handleLookStore(index) {
+      this.activeIndex = index;
+    },
+    getWordDetail() {
+      let MethodName = "/PaperServer/Client/Dict/QueryJinShanDictData";
+      let data = {
+        word: this.searchQuery,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
         }
+      });
+    },
+    // 加载更多‘
+    loadMore() {
+      this.pageNoNew++;
+      this.getQuerySentKwic();
+    },
+    // 获取例句
+    getQuerySentKwic() {
+      this.pageNo = this.pageNoNew;
+      this.loading = true;
+      getLogin("/PaperServer/Client/Dict/QuerySentKwicData", {
+        word: this.searchQuery,
+        page_size: 30,
+        page_no: this.pageNo,
+        only_my_bought: false,
+        kwic_type: 0,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.status === 1) {
+            this.sentKwicData.max_page_no = res.data.max_page_no;
+            this.sentKwicData.my_bought_total = res.my_bought_total;
+            this.sentKwicData.total = res.total;
+            if (res.data && res.data.results) {
+              this.maxPage = res.data.max_page_no;
+              res.data.results.forEach((item, indexs) => {
+                let tokenIndexArr = item.token_idx_arr;
+                let str = "";
+                item.number = indexs + 1 + 30 * (this.pageNo - 1);
+                tokenIndexArr.forEach((index) => {
+                  item.tokens[index][0] =
+                    '<span style="color:#ED5F00;font-weight:600;">' +
+                    item.tokens[index][0] +
+                    "</span>";
+                });
+                // for(let i = 0; i< item.tokens.length)
+                item.tokens.forEach((items) => {
+                  str += items[0] + items[3];
+                });
+                item.res = str;
+                item.source_courseware_name_path =
+                  item.study_phase_name +
+                  "版 / " +
+                  item.iss_no +
+                  " / " +
+                  item.release_date +
+                  " / " +
+                  item.art_title;
+              });
+              this.sentKwicData.sentence_list =
+                this.sentKwicData.sentence_list.concat(res.data.results);
+            }
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      getLogin("/PaperServer/Client/Dict/QuerySentKwicData", {
+        word: this.searchQuery,
+        page_size: 30,
+        page_no: this.pageNo,
+        only_my_bought: false,
+        kwic_type: 1,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.status === 1) {
+            if (res.data && res.data.results) {
+              res.data.results.forEach((item, indexs) => {
+                item.number = indexs + 1 + 30 * (this.pageNo - 1);
+                item.source_courseware_name_path =
+                  item.study_phase_name +
+                  "版 / " +
+                  item.iss_no +
+                  " / " +
+                  item.release_date +
+                  " / " +
+                  item.art_title;
+              });
+              this.sentKwicData.sentence_list_sort_left =
+                this.sentKwicData.sentence_list_sort_left.concat(
+                  this.handleExample(res.data.results, "left")
+                );
+            }
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      getLogin("/PaperServer/Client/Dict/QuerySentKwicData", {
+        word: this.searchQuery,
+        page_size: 30,
+        page_no: this.pageNo,
+        only_my_bought: false,
+        kwic_type: 2,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.status === 1) {
+            if (res.data && res.data.results) {
+              res.data.results.forEach((item, indexs) => {
+                item.number = indexs + 1 + 30 * (this.pageNo - 1);
+                item.source_courseware_name_path =
+                  item.study_phase_name +
+                  "版 / " +
+                  item.iss_no +
+                  " / " +
+                  item.release_date +
+                  " / " +
+                  item.art_title;
+              });
+              this.sentKwicData.sentence_list_sort_mid =
+                this.sentKwicData.sentence_list_sort_mid.concat(
+                  this.handleExample(res.data.results, "mid")
+                );
+            }
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      getLogin("/PaperServer/Client/Dict/QuerySentKwicData", {
+        word: this.searchQuery,
+        page_size: 30,
+        page_no: this.pageNo,
+        only_my_bought: false,
+        kwic_type: 3,
+      }).then((res) => {
+        this.loading = false;
+        if (res.status === 1) {
+          if (res.data && res.data.results) {
+            res.data.results.forEach((item, indexs) => {
+              item.number = indexs + 1 + 30 * (this.pageNo - 1);
+              item.source_courseware_name_path =
+                item.study_phase_name +
+                "版 / " +
+                item.iss_no +
+                " / " +
+                item.release_date +
+                " / " +
+                item.art_title;
+            });
+            this.sentKwicData.sentence_list_sort_right =
+              this.sentKwicData.sentence_list_sort_right.concat(
+                this.handleExample(res.data.results, "right")
+              );
+          }
+        }
+      });
+      getLogin("/PaperServer/Client/Dict/QuerySentKwicData", {
+        word: this.searchQuery,
+        page_size: 30,
+        page_no: this.pageNo,
+        only_my_bought: true,
+        kwic_type: 0,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.status === 1) {
+            if (res.data && res.data.results) {
+              this.maxPageShelf = res.data.max_page_no;
+              res.data.results.forEach((item, indexs) => {
+                let tokenIndexArr = item.token_idx_arr;
+                let str = "";
+                item.number = indexs + 1 + 30 * (this.pageNo - 1);
+                tokenIndexArr.forEach((index) => {
+                  item.tokens[index][0] =
+                    '<span style="color:#ED5F00;font-weight:600;">' +
+                    item.tokens[index][0] +
+                    "</span>";
+                });
+                // for(let i = 0; i< item.tokens.length)
+                item.tokens.forEach((items) => {
+                  str += items[0] + items[3];
+                });
+                item.res = str;
+                item.source_courseware_name_path =
+                  item.study_phase_name +
+                  "版 / " +
+                  item.iss_no +
+                  " / " +
+                  item.release_date +
+                  " / " +
+                  item.art_title;
+              });
+              this.sentKwicData.shelf_list =
+                this.sentKwicData.shelf_list.concat(res.data.results);
+            }
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      getLogin("/PaperServer/Client/Dict/QuerySentKwicData", {
+        word: this.searchQuery,
+        page_size: 30,
+        page_no: this.pageNo,
+        only_my_bought: true,
+        kwic_type: 1,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.status === 1) {
+            if (res.data && res.data.results) {
+              res.data.results.forEach((item, indexs) => {
+                item.number = indexs + 1 + 30 * (this.pageNo - 1);
+                item.source_courseware_name_path =
+                  item.study_phase_name +
+                  "版 / " +
+                  item.iss_no +
+                  " / " +
+                  item.release_date +
+                  " / " +
+                  item.art_title;
+              });
+              this.sentKwicData.shelf_list_sort_left =
+                this.sentKwicData.shelf_list_sort_left.concat(
+                  this.handleExample(res.data.results, "left")
+                );
+            }
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      getLogin("/PaperServer/Client/Dict/QuerySentKwicData", {
+        word: this.searchQuery,
+        page_size: 30,
+        page_no: this.pageNo,
+        only_my_bought: true,
+        kwic_type: 2,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.status === 1) {
+            if (res.data && res.data.results) {
+              res.data.results.forEach((item, indexs) => {
+                item.number = indexs + 1 + 30 * (this.pageNo - 1);
+                item.source_courseware_name_path =
+                  item.study_phase_name +
+                  "版 / " +
+                  item.iss_no +
+                  " / " +
+                  item.release_date +
+                  " / " +
+                  item.art_title;
+              });
+              this.sentKwicData.shelf_list_sort_mid =
+                this.sentKwicData.shelf_list_sort_mid.concat(
+                  this.handleExample(res.data.results, "mid")
+                );
+            }
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+      getLogin("/PaperServer/Client/Dict/QuerySentKwicData", {
+        word: this.searchQuery,
+        page_size: 30,
+        page_no: this.pageNo,
+        only_my_bought: true,
+        kwic_type: 3,
+      }).then((res) => {
+        this.loading = false;
+        if (res.status === 1) {
+          if (res.data && res.data.results) {
+            res.data.results.forEach((item, indexs) => {
+              item.number = indexs + 1 + 30 * (this.pageNo - 1);
+              item.source_courseware_name_path =
+                item.study_phase_name +
+                "版 / " +
+                item.iss_no +
+                " / " +
+                item.release_date +
+                " / " +
+                item.art_title;
+            });
+            this.sentKwicData.shelf_list_sort_right =
+              this.sentKwicData.shelf_list_sort_right.concat(
+                this.handleExample(res.data.results, "right")
+              );
+          }
+        }
+      });
+    },
+    handleExample(list, type) {
+      if (list.length > 0) {
+        list = list.map((item, index) => {
+          let str = item.source_courseware_name_path;
+          item.show_source_courseware_name_path = str.slice(0, 8) + "...";
+          if (type == "left") {
+            let arr = JSON.parse(JSON.stringify(item.tokens));
+            arr.forEach((items, indexs) => {
+              if (indexs == item.token_idx) {
+                arr[
+                  indexs
+                ][0] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs][0]}</span>`;
+              }
+            });
+            let data = this.changefiveword(arr, item.token_idx, type);
+            item.resArr = data;
+          } else if (type == "right") {
+            let arr = JSON.parse(JSON.stringify(item.tokens));
+            arr.forEach((items, indexs) => {
+              if (indexs == item.token_idx) {
+                arr[
+                  indexs
+                ][0] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs][0]}</span>`;
+              }
+            });
+            let data = this.changefiveword(arr, item.token_idx, type);
+            item.resArr = data;
+          } else if (type == "mid") {
+            let arr = JSON.parse(JSON.stringify(item.tokens));
+            arr.forEach((items, indexs) => {
+              if (indexs == item.token_idx) {
+                arr[
+                  indexs
+                ][0] = `<span style=color:#DE4444;font-weight:700;>${arr[indexs][0]}</span>`;
+              }
+            });
+            let data = this.changefiveword(arr, item.token_idx, type);
+            item.resArr = data;
+          } else {
+            let newsentence = JSON.parse(JSON.stringify(item.sentence));
+            let res = "";
+            for (let i = 0; i < item.position_list.length; i++) {
+              let part1 = "";
+              let part2 = "";
+              let part3 = "";
+              if (item.position_list.length > 1) {
+                if (i == 0) {
+                  part1 = newsentence.substring(0, item.position_list[i].begin);
+                  part2 = newsentence.substring(
+                    item.position_list[i].begin,
+                    item.position_list[i].end
+                  );
+                  part3 = newsentence.substring(
+                    item.position_list[i].end,
+                    item.position_list[i + 1].begin
+                  );
+                } else if (i == item.position_list.length - 1) {
+                  part2 = newsentence.substring(
+                    item.position_list[i].begin,
+                    item.position_list[i].end
+                  );
+                  part3 = newsentence.substring(item.position_list[i].end);
+                } else {
+                  part2 = newsentence.substring(
+                    item.position_list[i].begin,
+                    item.position_list[i].end
+                  );
+                  part3 = newsentence.substring(
+                    item.position_list[i].end,
+                    item.position_list[i + 1].begin
+                  );
+                }
+              } else {
+                part1 = newsentence.substring(0, item.position_list[i].begin);
+                part2 = newsentence.substring(
+                  item.position_list[i].begin,
+                  item.position_list[i].end
+                );
+                part3 = newsentence.substring(item.position_list[i].end);
+              }
+              res +=
+                part1 +
+                '<span style="color:#DE4444;">' +
+                part2 +
+                "</span>" +
+                part3;
+            }
+            item.res = res;
+          }
+          return item;
+        });
+        return list;
+      } else {
+        return [];
+      }
+    },
+    changefiveword(arr, index, type) {
+      let num = 6;
+      let colorIndex = 0;
+      let colorList = ["#4D7EFF", "#A4430F", "#9342C5", "#FF8718", "#1DAA91"];
+      for (let i = 1; i < num; i++) {
+        if (type == "left") {
+          if (index - i >= 0) {
+            if (this.enFhList.indexOf(arr[index - i][0]) == -1) {
+              // if(arr[index - i + 1]&&arr[index - i + 1][3]===''){
+              arr[index - i][0] = `<span style=color:${
+                colorList[colorIndex]
+              };>${arr[index - i][0]}</span>`;
+              colorIndex++;
+              // }
+            } else {
+              if (arr[index - i - 1] && arr[index - i - 1][3] === "") num++;
+            }
+          }
+        } else if (type == "right") {
+          if (index + i <= arr.length - 1) {
+            if (this.enFhList.indexOf(arr[index + i][0]) == -1) {
+              arr[index + i][0] = `<span style=color:${
+                colorList[colorIndex]
+              };>${arr[index + i][0]}</span>`;
+              colorIndex++;
+            } else {
+              num++;
+            }
+          }
+        }
+      }
+      let newarr = [];
+      let arr1 = [];
+      let arr2 = [];
+      let arr3 = [];
+      arr.forEach((item, i) => {
+        if (i < index) {
+          arr1.push(item);
+        } else if (i == index) {
+          arr2.push(item);
+        } else {
+          arr3.push(item);
+        }
+      });
+      newarr.push(arr1);
+      newarr.push(arr2);
+      newarr.push(arr3);
+      return newarr;
     },
-    handleLookStore(index){
-        this.activeIndex = index
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-
+    this.getWordDetail();
+    this.getQuerySentKwic();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.dictionary-detail{
-    .banner{
-        width: 100%;
-        height: 88px;
-        background: #3459D2;
-        position: relative;
-        .goback{
-            position: absolute;
-            left: 24px;
-            top: 24px;
-            width: 96px;
-            height: 40px;
-            display: block;
-            text-align: center;
-            cursor: pointer;
-            color: #FFFFFF;
-            line-height: 40px;
-            .el-icon-arrow-left{
-                width: 24px;
-                height: 24px;
-                text-align: center;
-                line-height: 24px;
-                margin: 0 4px;
-            }
+.dictionary-detail {
+  .banner {
+    width: 100%;
+    height: 88px;
+    background: #3459d2;
+    position: relative;
+    .goback {
+      position: absolute;
+      left: 24px;
+      top: 24px;
+      width: 96px;
+      height: 40px;
+      display: block;
+      text-align: center;
+      cursor: pointer;
+      color: #ffffff;
+      line-height: 40px;
+      .el-icon-arrow-left {
+        width: 24px;
+        height: 24px;
+        text-align: center;
+        line-height: 24px;
+        margin: 0 4px;
+      }
+    }
+    .banner-inner {
+      width: 868px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto;
+      position: relative;
+      > img {
+        width: 40px;
+        margin-right: 24px;
+        position: absolute;
+        left: 50%;
+        top: 24px;
+        margin-left: -434px;
+      }
+      .search-compent {
+        position: absolute;
+        top: 16px;
+        box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
+          0px 16px 24px 2px rgba(0, 0, 0, 0.04),
+          0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+      }
+    }
+  }
+  .main {
+    width: 740px;
+    margin: 32px auto;
+    background: #ffffff;
+    border-radius: 8px;
+    padding: 64px 72px;
+    max-height: calc(100vh - 216px);
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    .source {
+      display: inline-block;
+      padding: 1px 8px;
+      color: #1d2129;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 22px;
+      background: #f2f3f5;
+      border-radius: 2px;
+    }
+    .headWord-box {
+      display: flex;
+      align-items: center;
+      margin: 16px 0;
+      p {
+        color: #175dff;
+        font-weight: 700;
+        font-size: 40px;
+        line-height: 48px;
+        margin: 0;
+        font-family: "Rubik";
+      }
+      svg {
+        width: 24px;
+        height: 24px;
+        margin-left: 24px;
+        color: #d0d3d9;
+        cursor: pointer;
+      }
+    }
+    .testType {
+      color: #929ca8;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      margin: 0 0 16px;
+    }
+    .pronunciations-list {
+      margin-bottom: 16px;
+      display: flex;
+      > div {
+        display: flex;
+        margin-right: 24px;
+      }
+      label {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: #1c2129;
+        margin-right: 8px;
+      }
+      span {
+        margin-right: 8px;
+        font-family: "robot";
+        color: #1c2129;
+        font-size: 16px;
+        line-height: 24px;
+      }
+      img {
+        width: 24px;
+      }
+    }
+    .definition-list {
+      padding-bottom: 8px;
+      .definition-item {
+        padding-bottom: 16px;
+        display: flex;
+        label {
+          color: #1c2129;
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 24px;
+          min-width: 44px;
         }
-        .banner-inner{
-            width: 868px;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 auto;
-            position: relative;
-            > img{
-                width: 40px;
-                margin-right: 24px;
-                position: absolute;
-                left: 50%;
-                top: 24px;
-                margin-left: -434px;
-            }
-            .search-compent{
-                position: absolute;
-                top: 16px;
-            }
+        p {
+          margin: 0;
+          flex: 1;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
         }
+      }
     }
-    .main{
-        width: 740px;
-        margin: 32px auto;
-        background: #FFFFFF;
-        border-radius: 8px;
-        padding: 64px 72px;
-        max-height: calc(100vh - 216px);
-        overflow-y: scroll;
-        &::-webkit-scrollbar {
-            display: none;
-        }
-        .source{
-            display: inline-block;
-            padding: 1px 8px;
-            color: #1D2129;
+    .number-list {
+      display: flex;
+      margin-bottom: 24px;
+      .number-item {
+        border-radius: 100px;
+        height: 32px;
+        font-size: 14px;
+        line-height: 22px;
+        color: #4e5969;
+        padding: 5px 16px;
+        margin-right: 12px;
+        cursor: pointer;
+        &.active {
+          background: #f2f3f5;
+          font-weight: 500;
+          color: #165dff;
+          label {
             font-weight: 500;
-            font-size: 14px;
-            line-height: 22px;
-            background: #F2F3F5;
-            border-radius: 2px;
+          }
         }
-        .headWord-box{
-            display: flex;
-            align-items: center;
-            margin: 16px 0;
-            p{
-                color: #175DFF;
-                font-weight: 700;
-                font-size: 40px;
-                line-height: 48px;
-                margin: 0;
-                font-family: 'Rubik';
-            }
-            svg{
-                width: 24px;
-                height: 24px;
-                margin-left: 24px;
-                color: #D0D3D9;
-                cursor: pointer;
-            }
+        label {
+          font-weight: 400;
+          margin-right: 5px;
+          cursor: pointer;
         }
-        .testType{
-            color: #929CA8;
-            font-weight: 400;
-            font-size: 16px;
-            line-height: 24px;
-            margin: 0 0 16px;
+      }
+    }
+    .module-box {
+      display: flex;
+      align-items: center;
+      height: 30px;
+      > div.align-box {
+        background: #e5e6eb;
+        border-radius: 4px;
+        margin-left: 32px;
+        padding: 2px;
+        display: flex;
+        a {
+          width: 48px;
+          height: 26px;
+          display: block;
+          text-align: center;
+          color: rgba(0, 0, 0, 0.56);
+          svg {
+            width: 16px;
+            height: 16px;
+            margin-top: 5px;
+          }
+          &.active {
+            background: #ffffff;
+            border-radius: 3px;
+            color: #3459d2;
+          }
         }
-        .pronunciations-list{
-            margin-bottom: 16px;
-            display: flex;
-            > div{
-                display: flex;
-                margin-right: 24px;
+      }
+    }
+    .list {
+      margin-top: 16px;
+      max-height: 300px;
+      overflow: auto;
+      .one {
+        margin-bottom: 24px;
+        word-break: break-word;
+        .top {
+          display: flex;
+          // flex-flow: wrap;
+          width: 100%;
+
+          .number {
+            width: 22px;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            color: #2f3742;
+            margin-right: 8px;
+            flex-shrink: 0;
+            &-1-false {
+              margin-top: 3px;
             }
-            label{
-                font-weight: 400;
-                font-size: 16px;
-                line-height: 24px;
-                color: #1C2129;
-                margin-right: 8px;
+            &-0-true {
+              margin-top: 21px;
             }
-            span{
-                margin-right: 8px;
-                font-family: 'robot';
-                color: #1C2129;
-                font-size: 16px;
-                line-height: 24px;
+            &-0-false {
+              margin-top: 5px;
             }
-            img{
-                width: 24px;
+            &-2-true {
+              margin-top: 17px;
             }
-        }
-        .definition-list{
-            padding-bottom: 8px;
-            .definition-item{
-                padding-bottom: 16px;
-                display: flex;
-                label{
-                    color: #1C2129;
-                    font-weight: 500;
-                    font-size: 16px;
-                    line-height: 24px;
-                    min-width: 44px;
-                }
-                p{
-                    margin: 0;
-                    flex: 1;
-                    font-weight: 400;
-                    font-size: 16px;
-                    line-height: 24px;
-                }
+            &-2-false {
+              margin-top: 1px;
             }
-        }
-        .number-list{
-            display: flex;
-            margin-bottom: 24px;
-            .number-item{
-                border-radius: 100px;
-                height: 32px;
+          }
+          .words {
+            word-break: break-all;
+            > div {
+              .pinyin {
+                font-family: "GB-PINYINOK-B";
+                font-weight: 500;
+                font-size: 12px;
+                color: rgba(0, 0, 0, 0.5);
+                text-align: center;
+                margin-bottom: 2px;
+              }
+              .con {
+                font-weight: 400;
                 font-size: 14px;
                 line-height: 22px;
-                color: #4E5969;
-                padding: 5px 16px;
-                margin-right: 12px;
-                cursor: pointer;
-                &.active{
-                    background: #F2F3F5;
-                    font-weight: 500;
-                    color: #165DFF;
-                    label{
-                        font-weight: 500;
-                    }
-                }
-                label{
-                    font-weight: 400;
-                    margin-right: 5px;
-                    cursor: pointer;
-                }
+                color: #2f3742;
+                text-align: center;
+              }
             }
+            span {
+              font-size: 14px;
+              line-height: 22px;
+              word-break: break-word;
+            }
+          }
+        }
+        .bottom {
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 20px;
+          color: #929ca8;
+          padding-left: 30px;
+          margin-top: 8px;
         }
-        .module-box{
+      }
+      .kwic_one {
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+        > :nth-child(1) {
+          width: 32px;
+          justify-content: flex-end;
+          flex-shrink: 0;
+        }
+        .laiyuan,
+        .content {
+          width: 117px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.65);
+        }
+        .word_sentence {
+          font-family: "FZJCGFKTK";
+          width: 361px;
+          height: 22px;
+          margin-left: 16px;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22px;
+          color: #000000;
+          opacity: 1;
+          display: flex;
+          justify-content: center;
+          overflow: hidden;
+          white-space: nowrap;
+          > :nth-child(1) {
+            // direction: rtl;
+            // unicode-bidi: plaintext;
+            // text-align: right;
             display: flex;
-            align-items: center;
-            height: 30px;
-            > div.align-box{
-                background: #E5E6EB;
-                border-radius: 4px;
-                margin-left: 32px;
-                padding: 2px;
-                display: flex;
-                a{
-                    width: 48px;
-                    height: 26px;
-                    display: block;
-                    text-align: center;
-                    color: rgba(0, 0, 0, 0.56);
-                    svg{
-                        width: 16px;
-                        height: 16px;
-                        margin-top: 5px;
-                    }
-                    &.active{
-                        background: #FFFFFF;
-                        border-radius: 3px;
-                        color: #3459D2;
-                    }
-                }
-            }
+            justify-content: end;
+            width: 172px;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+          > :nth-child(3) {
+            direction: ltr;
+            unicode-bidi: plaintext;
+            text-align: left;
+            width: 172px;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+          span {
+            margin: 0 2px;
+            color: #929ca8;
+            font-size: 14px;
+            line-height: 22px;
+          }
         }
+      }
     }
+    .load-more {
+      cursor: pointer;
+      font-size: 14px;
+      display: block;
+      text-align: center;
+      margin: 4px;
+    }
+  }
 }
 </style>
 <style lang="scss">
-.dictionary-detail{
-    .el-divider--horizontal{
-        margin-top: 8px;
-    }
-    .el-divider__text{
-        color: #1D2129;
-    }
-    .el-switch__label.is-active{
-        color: #000000;
-    }
-    .el-switch.is-checked .el-switch__core{
-        background-color: #175DFF;
-        border-color: #175DFF;
-    }
+.dictionary-detail {
+  .el-divider--horizontal {
+    margin-top: 8px;
+  }
+  .el-divider__text {
+    color: #1d2129;
+  }
+  .el-switch__label.is-active {
+    color: #000000;
+  }
+  .el-switch.is-checked .el-switch__core {
+    background-color: #175dff;
+    border-color: #175dff;
+  }
 }
-</style>
+</style>

src/views/search/index.vue

@@ -107,7 +107,7 @@ export default {
     getUserSearchList() {
       let MethodName = "/PaperServer/Client/Dict/QueryUserSearchWordList";
       let data = {
-        limit: 9,
+        limit: 10,
       };
       getLogin(MethodName, data).then((res) => {
         if (res.status === 1) {