语料库词典 搜索页面效果

src/components/Header.vue

@@ -10,7 +10,7 @@
         @click="handleSelect"
       />
       <span class="logo-img" v-else>logo</span>
-      <ul class="logo-projectlist">
+      <ul class="logo-projectlist" v-if="!projectShow">
         <li
           v-for="(itemI, indexI) in projectList"
           :key="indexI"
@@ -22,6 +22,52 @@
       </ul>
     </div>
     <div class="userName">
+      <template v-if="projectShow">
+        <el-popover
+          placement="bottom"
+          width="335"
+          trigger="click"
+          v-model="visible"
+        >
+          <div class="set_corpus_dv">
+            <span>选择难度</span>
+            <el-select
+              style="width: 205px"
+              v-model="corpus.difficlty"
+              placeholder="请选择"
+            >
+            </el-select>
+          </div>
+          <div class="set_corpus_dv">
+            <span>选择范围</span>
+            <el-select
+              style="width: 205px"
+              v-model="corpus.scope"
+              placeholder="请选择"
+            >
+            </el-select>
+          </div>
+          <div class="set_corpus_dv">
+            <span>句子长度</span>
+            <el-input
+              v-model="corpus.sentenceStart"
+              style="width: 55px; margin-right: 8px"
+            ></el-input>
+            ——
+            <el-input
+              v-model="corpus.sentenceEnd"
+              style="width: 55px; margin-left: 8px"
+            ></el-input>
+          </div>
+          <div class="set_corpus_submit">
+            <div @click="visible = false">取消</div>
+            <div>确认</div>
+          </div>
+          <div slot="reference" class="set_corpus">
+            设置
+          </div>
+        </el-popover>
+      </template>
       <template>
         <el-dropdown
           style="margin-right: 16px; cursor: pointer"
@@ -101,9 +147,16 @@ import { updateWordPack } from "@/utils/i18n";
 
 export default {
   name: "LayoutHeader",
-  props: [],
+  props: ["projectShow"],
   data() {
     return {
+      visible: false,
+      corpus: {
+        difficlty: null,
+        scope: null,
+        sentenceStart: null,
+        sentenceEnd: null,
+      },
       activeIndex: "2", // 主导航索引
       LoginNavIndex: 0, //下拉框导航索引
       projectName: "教研中心",
@@ -382,6 +435,20 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+
+    .set_corpus {
+      width: 48px;
+      height: 35px;
+      background: #ebebeb;
+      border-radius: 8px;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 35px;
+      text-align: center;
+      color: #000000;
+      cursor: pointer;
+      margin-right: 24px;
+    }
     .seek {
       margin-right: 100px;
       position: relative;
@@ -514,6 +581,41 @@ export default {
     color: white;
   }
 }
+.set_corpus_dv {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  > span {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: #000000;
+    margin-right: 18px;
+  }
+}
+.set_corpus_submit {
+  margin-top: 32px;
+  display: flex;
+  justify-content: flex-end;
+  div {
+    width: 44px;
+    height: 32px;
+    border-radius: 4px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 32px;
+    text-align: center;
+    cursor: pointer;
+  }
+  > :nth-child(2) {
+    color: #ffffff;
+    background: #4992ff;
+  }
+  > :nth-child(1) {
+    color: #000000;
+    margin-right: 8px;
+  }
+}
 .projectList {
   &.el-dropdown-menu__item {
     line-height: 40px;

src/components/teacher-dev/TeachingTool.vue

@@ -20,19 +20,19 @@
         </div>
         <p>文本分析</p>
       </div>
-      <!-- <div>
+      <div>
         <div
           style="background: #d86046"
           @click="
             $router.push({
-              path: '',
+              path: '/corpus/seekPage',
             })
           "
         >
           <img src="../../assets/teacherdev/jygj-2.png" alt="" />
         </div>
         <p>语料库词典</p>
-      </div> -->
+      </div>
     </div>
   </div>
 </template>

src/router/index.js

@@ -106,6 +106,19 @@ const routes = [{
     import('@/views/Textanalysis/WordTable')
 },
 {
+
+  path: '/corpus/seekPage',
+  component: () =>
+    import('@/views/corpus/seekPage')
+},
+{
+
+  path: '/corpus/Result',
+  component: () =>
+    import('@/views/corpus/Result')
+},
+
+{
   path: '*',
   redirect: '/404',
 

src/views/corpus/seekPage.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="corpus_seekpage">
+    <Header :projectShow="true" />
+    <div class="title">
+      <p>语料库词典</p>
+      <p>Corpus Dictionary</p>
+    </div>
+    <div class="seek" @keydown="downSeek">
+      <input type="text" v-model="keyword" />
+      <button @click="seekEvent">搜索</button>
+    </div>
+    <div class="txt">共{{ 123 }}本教材，合计{{ 321 }}词。</div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "@/components/Header";
+
+export default {
+  name: "corpus_seekpage",
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    Header,
+  },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      keyword: null,
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    downSeek(e) {
+      if (e.keyCode == 13) {
+        if (!this.keyword) {
+          this.$message.warning("请先输入内容");
+          return;
+        }
+        this.seekEvent();
+      }
+    },
+    seekEvent() {
+      if (!this.keyword) {
+        this.$message.warning("请先输入内容");
+        return;
+      }
+      this.$router.push({
+        patth: "/corpus/Result",
+        query: {
+          keyword: this.keyword,
+        },
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.corpus_seekpage {
+  .title {
+    margin-top: 200px;
+    > :nth-child(1) {
+      font-weight: 700;
+      font-size: 48px;
+      line-height: 56px;
+      color: #000000;
+      margin-bottom: 12px;
+    }
+    > :nth-child(2) {
+      font-weight: 400;
+      font-size: 20px;
+      line-height: 23px;
+    }
+    > p {
+      margin: 0;
+      text-align: center;
+    }
+  }
+  .seek {
+    margin-top: 41px;
+    display: flex;
+    justify-content: center;
+    height: 51px;
+    input {
+      width: 468px;
+      height: 51px;
+      border: 1px solid #669aff;
+      outline: none;
+      box-sizing: border-box;
+      padding: 0 10px;
+    }
+    button {
+      width: 96px;
+      height: 100%;
+      background: #669aff;
+      border-width: 1px 1px 1px 0px;
+      border-style: solid;
+      border-color: #669aff;
+      text-align: center;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 51px;
+      color: #ffffff;
+      cursor: pointer;
+      box-sizing: border-box;
+    }
+  }
+  .txt {
+    margin-top: 41px;
+    text-align: center;
+
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: #000000;
+    opacity: 0.65;
+  }
+}
+</style>

src/views/teacher-dev/index.vue

@@ -44,9 +44,9 @@
     </div>
     <!-- 主要信息列表 -->
     <div class="main" v-loading="loading">
-      <!-- <div id="TEACHINGTOOL">
+      <div id="TEACHINGTOOL">
         <TeachingTool v-if="textAnalyseShow" />
-      </div> -->
+      </div>
       <div id="TEXTBOOK" v-if="textBookList">
         <Textbook v-if="textBookList.data" :classList="textBookList.data" />
       </div>