语料库前端页面效果和交互，词句卡片列表页面效果

src/components/Header.vue

@@ -20,6 +20,12 @@
           {{ itemI.name }}
         </li>
       </ul>
+      <template v-else-if="seekShow">
+        <div class="ylk_seek" @keydown="downSeek">
+          <input type="text" v-model="keyword" />
+          <div @click="seekresult">搜索</div>
+        </div>
+      </template>
     </div>
     <div class="userName">
       <template v-if="projectShow">
@@ -63,9 +69,7 @@
             <div @click="visible = false">取消</div>
             <div>确认</div>
           </div>
-          <div slot="reference" class="set_corpus">
-            设置
-          </div>
+          <div slot="reference" class="set_corpus">设置</div>
         </el-popover>
       </template>
       <template>
@@ -147,9 +151,10 @@ import { updateWordPack } from "@/utils/i18n";
 
 export default {
   name: "LayoutHeader",
-  props: ["projectShow"],
+  props: ["projectShow", "seekShow"],
   data() {
     return {
+      keyword: "",
       visible: false,
       corpus: {
         difficlty: null,
@@ -227,6 +232,24 @@ export default {
     ...mapGetters(["language_type"]),
   },
   methods: {
+    downSeek(e) {
+      if (e.keyCode == 13) {
+        if (!this.keyword) {
+          this.$message.warning("请先输入内容");
+          return;
+        }
+        this.seekresult();
+      }
+    },
+    seekresult() {
+      this.$router.replace({
+        path: "/corpus/Result",
+        query: {
+          keyword: this.keyword,
+        },
+      });
+      this.$emit("changehzdata");
+    },
     // 前往个人中心
     gotoPersonalcenter() {
       if (!this.userMessage) {
@@ -552,6 +575,35 @@ export default {
       }
     }
   }
+  .ylk_seek {
+    margin-left: 24px;
+    height: 35px;
+    display: flex;
+    input {
+      width: 484px;
+      height: 35px;
+      background: #ffffff;
+      border: 1px solid #669aff;
+      outline: none;
+      padding: 0 10px;
+      box-sizing: border-box;
+    }
+    div {
+      width: 80px;
+      height: 100%;
+      background: #669aff;
+      border-width: 1px 1px 1px 0px;
+      box-sizing: border-box;
+      border-style: solid;
+      border-color: #669aff;
+      text-align: center;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 35px;
+      color: #ffffff;
+      cursor: pointer;
+    }
+  }
 }
 </style>
 <style lang="scss">

src/components/teacher-dev/TeachingTool.vue

@@ -33,6 +33,19 @@
         </div>
         <p>语料库词典</p>
       </div>
+      <div>
+        <div
+          style="background: #c254cc"
+          @click="
+            $router.push({
+              path: '/wordcard/table',
+            })
+          "
+        >
+          <img src="../../assets/teacherdev/jygj-3.png" alt="" />
+        </div>
+        <p>词句卡片</p>
+      </div>
     </div>
   </div>
 </template>

src/router/index.js

@@ -117,7 +117,12 @@ const routes = [{
   component: () =>
     import('@/views/corpus/Result')
 },
+{
 
+  path: '/wordcard/table',
+  component: () =>
+    import('@/views/wordcard/table')
+},
 {
   path: '*',
   redirect: '/404',

src/views/corpus/Result.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="result" v-loading="loading">
-    <Header :projectShow="true" />
+    <Header :projectShow="true" :seekShow="true" @changehzdata="changehzdata" />
     <div class="main">
       <div
         class="hanzi_list"
@@ -71,41 +71,195 @@
       <div class="txt_imgtable">
         <div class="left">
           <div class="top">
-            <div class="pattern">
-              <div
-                :class="[patternIndex == 0 ? 'sele' : '']"
-                @click="cutPattern(0)"
-              >
-                引语模式
+            <div>
+              <div class="pattern">
+                <div
+                  :class="[patternIndex == 0 ? 'sele' : '']"
+                  @click="cutPattern(0)"
+                >
+                  引语模式
+                </div>
+                <div
+                  :class="[patternIndex == 1 ? 'sele' : '']"
+                  @click="cutPattern(1)"
+                >
+                  KWIC模式
+                </div>
               </div>
-              <div
-                :class="[patternIndex == 1 ? 'sele' : '']"
-                @click="cutPattern(1)"
-              >
-                KWIC模式
+
+              <template v-if="patternIndex == 1">
+                <div class="KWIC_sort">
+                  <span
+                    :class="['sort', KWIC_sortIndex == 0 ? 'sele' : '']"
+                    @click="KWICsortEvent(0, 'sentence_list_sort_left')"
+                  >
+                    <img
+                      src="../../assets/teacherdev/analys-right.png"
+                      alt=""
+                    />
+                  </span>
+                  <span
+                    :class="['sort', KWIC_sortIndex == 1 ? 'sele' : '']"
+                    @click="KWICsortEvent(1, 'sentence_list_sort_mid')"
+                  >
+                    <img
+                      src="../../assets/teacherdev/analys-center.png"
+                      alt=""
+                    />
+                  </span>
+                  <span
+                    :class="['sort', KWIC_sortIndex == 2 ? 'sele' : '']"
+                    @click="KWICsortEvent(2, 'sentence_list_sort_right')"
+                  >
+                    <img src="../../assets/teacherdev/analys-left.png" alt="" />
+                  </span>
+                </div>
+              </template>
+              <template v-if="patternIndex == 0">
+                <div class="lang_sort" @click="sortEvent">
+                  长度
+                  <img
+                    v-if="sort == 'down'"
+                    src="../../assets/teacherdev/ylk-sort-down.png"
+                    alt=""
+                  />
+                  <img
+                    v-else
+                    src="../../assets/teacherdev/ylk-sort-up.png"
+                    alt=""
+                  />
+                </div>
+              </template>
+              <div class="refresh">
+                <img src="../../assets/teacherdev/refresh.png" alt="" />
               </div>
+              <template v-if="patternIndex == 0">
+                <el-switch
+                  v-model="pinyinShow"
+                  active-text="拼音"
+                  active-color="#424242"
+                  style="margin-left: 24px"
+                >
+                </el-switch>
+                <el-switch
+                  v-model="shiyiShow"
+                  active-text="释义"
+                  active-color="#424242"
+                  style="margin-left: 16px"
+                >
+                </el-switch>
+              </template>
+            </div>
+
+            <div class="size">
+              <span :class="[sizeIndex == 0 ? 'sele' : '']" @click="cutSize(0)"
+                >大</span
+              >
+              <span :class="[sizeIndex == 1 ? 'sele' : '']" @click="cutSize(1)"
+                >中</span
+              >
+              <span :class="[sizeIndex == 2 ? 'sele' : '']" @click="cutSize(2)"
+                >小</span
+              >
             </div>
-            <div class="lang_sort">
-              长度
-              <img src="" alt="" />
+          </div>
+          <div class="main">
+            <div class="list">
+              <template v-if="patternIndex == 0">
+                <div
+                  v-for="(item, i) in showData"
+                  :key="i + 'sentence'"
+                  class="one"
+                >
+                  <div class="top">
+                    <div
+                      class="number"
+                      :style="{
+                        marginBottom: sizeIndex == 2 ? '0' : '5px',
+                      }"
+                    >
+                      {{ item.number }}.
+                    </div>
+                    <img
+                      :style="{
+                        marginBottom: sizeIndex == 2 ? '0' : '5px',
+                      }"
+                      src="../../assets/teacherdev/speaker-one.png"
+                      alt=""
+                    />
+                    <div class="words">
+                      <div
+                        v-for="(items, indexs) in item.wordsList"
+                        :key="indexs + 'con'"
+                      >
+                        <div
+                          class="pinyin"
+                          :style="{
+                            fontSize: pinyinSize + 'px',
+                          }"
+                        >
+                          {{ items.pinyin }}
+                        </div>
+                        <div
+                          class="con"
+                          :style="{
+                            fontSize: conSize + 'px',
+                          }"
+                          v-html="items.con"
+                        ></div>
+                      </div>
+                    </div>
+                    <div
+                      class="shiyi"
+                      :style="{
+                        marginBottom: sizeIndex == 2 ? '0' : '5px',
+                      }"
+                    >
+                      （{{ item.shiyi }}）
+                    </div>
+                  </div>
+                  <div class="bottom">{{ item.laiyuan }}</div>
+                </div>
+              </template>
+              <template v-else>
+                <div
+                  v-for="(item, index) in KWICData"
+                  :key="'kwic' + index"
+                  class="kwic_one"
+                >
+                  <div class="number">{{ item.number }}</div>
+                  <el-tooltip effect="dark" placement="bottom">
+                    <div slot="content">
+                      {{ item.laiyuan }}
+                    </div>
+                    <div class="laiyuan">
+                      {{ item.laiyuan }}
+                    </div>
+                  </el-tooltip>
+                  <div
+                    class="word"
+                    :style="{
+                      fontSize: conSize + 'px',
+                    }"
+                  >
+                    <div v-for="(txt, indexs) in item.resArr">
+                      <span v-for="(txts, indexs) in txt" v-html="txts"></span>
+                    </div>
+                  </div>
+                </div>
+              </template>
             </div>
-            <div class="refresh">
-              <img src="../../assets/teacherdev/refresh.png" alt="" />
+            <div class="page">
+              <span class="text"> 共 条 命中 次 </span>
+              <el-pagination
+                background
+                @current-change="handleCurrentChange"
+                :current-page.sync="page"
+                layout="prev, pager, next"
+                :total="1000"
+              >
+              </el-pagination>
             </div>
-            <el-switch
-              v-model="pinyinShow"
-              active-text="拼音"
-              active-color="#424242"
-              style="margin-left: 32px"
-            >
-            </el-switch>
-            <el-switch
-              v-model="shiyiShow"
-              active-text="释义"
-              active-color="#424242"
-              style="margin-left: 16px"
-            >
-            </el-switch>
           </div>
         </div>
         <div class="right">
@@ -125,6 +279,41 @@
               </div>
             </div>
           </div>
+          <div id="shanxing_main" style="height: 398px"></div>
+          <div class="list">
+            <div
+              v-for="(item, i) in rightList"
+              :key="i + 'right'"
+              class="one"
+              :style="{
+                borderBottom:
+                  i == rightList.length - 1 ? 'none' : '1px solid #eeeeee',
+              }"
+            >
+              <div>
+                <span></span>
+                <span>{{ item.name }}</span>
+              </div>
+              <div>
+                <span>{{ item.value }}</span>
+              </div>
+              <div>
+                <span>{{ item.ratio * 100 }}%</span>
+              </div>
+            </div>
+            <div class="one all">
+              <div>
+                <span></span>
+                <span>全部</span>
+              </div>
+              <div>
+                <span>{{ allNumber }}</span>
+              </div>
+              <div>
+                <span>100%</span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -139,9 +328,10 @@ import { getLogin } from "@/api/api";
 import Strockplayredline from "@/components/corpus/Strockplayredline";
 import "@/utils/pinyin_dict_withtone";
 import "@/utils/pinyinUtil";
-import seekWord from "@/utils/lang.js";
 const OpenCC = require("opencc-js");
 const converter = OpenCC.Converter({ from: "cn", to: "tw" });
+import * as echarts from "echarts";
+
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -152,6 +342,7 @@ export default {
   data() {
     //这里存放数据
     return {
+      page: 1,
       shiyiShow: false,
       pinyinShow: false,
       JFIndex: 0,
@@ -162,13 +353,67 @@ export default {
       unfold: true,
       patternIndex: 0,
       rightTopIndex: 0,
+      sizeIndex: 1,
+      sort: "down",
       rightList: [
         {
-          name: "",
-          value: "",
-          ratio: "",
+          name: "good",
+          value: "10",
+          ratio: "0.1",
+        },
+        {
+          name: "OK",
+          value: "10",
+          ratio: "0.1",
+        },
+      ],
+      KWIC_sortIndex: 0,
+      allNumber: 0,
+      showData: [
+        {
+          number: 1,
+          mp3: "",
+          wordsList: [
+            {
+              pinyin: "dà",
+              con: "大",
+            },
+            {
+              pinyin: "wéi",
+              con: "为",
+            },
+            {
+              pinyin: "hǎo",
+              con: "好",
+            },
+            {
+              pinyin: "ma",
+              con: "吗",
+            },
+            {
+              pinyin: "",
+              con: "?",
+            },
+          ],
+          shiyi: "good, ok",
+          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
+        },
+      ],
+      KWICData: [
+        {
+          number: 1,
+          laiyuan: "轻松学中文1大撒大撒大苏打撒旦阿斯顿阿斯顿安生安生",
+          resArr: [
+            ["你"],
+            [
+              "<span style='color:red;background:#FFEFEF;padding:2px'>好</span>",
+            ],
+            ["吗"],
+          ],
         },
       ],
+      conSize: 20,
+      pinyinSize: 12,
     };
   },
   //计算属性 类似于data概念
@@ -177,6 +422,50 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    handleCurrentChange(val) {
+      this.page = val;
+    },
+    // KWIC排序
+    KWICsortEvent(index, type) {
+      this.KWIC_sortIndex = index;
+    },
+    // 排序
+    sortEvent() {
+      if (this.sort == "down") {
+        this.sort = "up";
+      } else {
+        this.sort = "down";
+      }
+    },
+    // 修改大小
+    cutSize(index) {
+      this.sizeIndex = index;
+      if (index == 0) {
+        //大
+        if (this.patternIndex == 0) {
+          this.conSize = 24;
+          this.pinyinSize = 12;
+        } else {
+          this.conSize = 20;
+        }
+      } else if (index == 1) {
+        //中
+        if (this.patternIndex == 0) {
+          this.conSize = 20;
+          this.pinyinSize = 12;
+        } else {
+          this.conSize = 17;
+        }
+      } else {
+        //小
+        if (this.patternIndex == 0) {
+          this.conSize = 16;
+          this.pinyinSize = 10;
+        } else {
+          this.conSize = 15;
+        }
+      }
+    },
     // 切换模式
     cutPattern(index) {
       this.patternIndex = index;
@@ -197,11 +486,10 @@ export default {
       this.JFIndex = index;
       if (index == 0) {
         //简体
+        this.gethzJSON();
       } else {
         //繁体
         this.hzData.forEach((item) => {
-          // let a = seekWord(item.con);
-          // item.fanti = a;
           let a = converter(item.con);
           item.fanti = a;
         });
@@ -234,10 +522,62 @@ export default {
           });
       });
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    if (this.$route.query.keyword) {
+    getrightListdata() {
+      this.inityuan();
+    },
+    inityuan() {
+      var chartDom = document.getElementById("shanxing_main");
+      var myChart = echarts.init(chartDom);
+      var option;
+      this.allNumber = 0;
+      let newdata = JSON.parse(JSON.stringify(this.rightList));
+      newdata.forEach((item) => {
+        this.allNumber += item.value * 1;
+        let percent = item.ratio * 100;
+        if (percent % 1 == 0) {
+          item.name = item.name + " " + percent + "%";
+        } else {
+          item.name = item.name + " " + percent.toFixed(2) + "%";
+        }
+      });
+      option = {
+        series: [
+          {
+            name: "Access From",
+            type: "pie",
+            // radius: ["50%", "50%"],
+            data: newdata,
+            itemStyle: {
+              //   borderColor: "#fff",
+              //   borderWidth: 2,
+            },
+            top: 50,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+        xAxis: {
+          show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          axisTick: {
+            show: false, //不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: false, //不显示坐标轴线
+          },
+          axisLabel: {
+            show: false, //不显示坐标轴上的文字
+          },
+        },
+      };
+      option && myChart.setOption(option);
+    },
+    changehzdata() {
+      this.hzData = [];
       let arr = this.$route.query.keyword.split("");
       arr.forEach((item) => {
         let result = pinyinUtil.getPinyin(item);
@@ -252,10 +592,18 @@ export default {
         this.ShowHzData = JSON.parse(JSON.stringify(this.hzData));
       });
       this.gethzJSON();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    if (this.$route.query.keyword) {
+      this.changehzdata();
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.getrightListdata();
+  },
   //生命周期-创建之前
   beforeCreated() {},
   //生命周期-挂载之前
@@ -276,7 +624,7 @@ export default {
 /* @import url(); 引入css类 */
 .result {
   min-height: 100%;
-  .main {
+  > .main {
     min-height: 100%;
     background: #f2f2f2;
     padding-top: 33px;
@@ -393,13 +741,51 @@ export default {
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       border-radius: 8px;
       margin-right: 8px;
-      .top {
+      padding-bottom: 58px;
+      position: relative;
+      > .top {
         border-bottom: 1px solid rgba(0, 0, 0, 0.08);
         height: 44px;
         display: flex;
         align-items: center;
+        justify-content: space-between;
         font-weight: 400;
         font-size: 12px;
+        color: #000000;
+        > div {
+          display: flex;
+          align-items: center;
+        }
+        .KWIC_sort {
+          margin-left: 24px;
+          display: flex;
+          span {
+            display: inline-block;
+            width: 28px;
+            height: 28px;
+            background: #ffffff;
+            border-radius: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+          }
+          .sele {
+            background: #f0f0f0;
+          }
+          .sort {
+            img {
+              width: 14px;
+              height: 12px;
+            }
+          }
+          .down {
+            img {
+              width: 16px;
+              height: 16px;
+            }
+          }
+        }
         .pattern {
           margin-left: 16px;
           width: 144px;
@@ -410,7 +796,7 @@ export default {
           justify-content: center;
           align-items: center;
           > div {
-            width: 64px;
+            width: 68px;
             height: 24px;
             text-align: center;
             line-height: 24px;
@@ -435,6 +821,12 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
+          cursor: pointer;
+          img {
+            width: 16px;
+            height: 16px;
+            margin-left: 2px;
+          }
         }
         .refresh {
           width: 28px;
@@ -451,14 +843,157 @@ export default {
             height: 16px;
           }
         }
+        .size {
+          margin-right: 12px;
+          span {
+            font-size: 14px;
+            padding: 4px;
+            cursor: pointer;
+          }
+          .sele {
+            background: #e6e6e6;
+            border-radius: 4px;
+          }
+        }
+      }
+      .main {
+        height: 95%;
+        .list {
+          margin-top: 16px;
+          .one {
+            padding: 0 16px;
+            margin-bottom: 8px;
+            .top {
+              display: flex;
+              align-items: flex-end;
+              .number {
+                width: 22px;
+                font-weight: 400;
+                font-size: 14px;
+                text-align: right;
+                color: rgba(0, 0, 0, 0.3);
+                margin-right: 8px;
+              }
+              img {
+                width: 16px;
+                height: 16px;
+                cursor: pointer;
+                margin-right: 8px;
+              }
+              .words {
+                display: flex;
+                align-items: flex-end;
+                > div {
+                  .pinyin {
+                    font-family: "GB-PINYINOK-B";
+                    font-weight: 500;
+                    font-size: 12px;
+                    color: rgba(0, 0, 0, 0.5);
+                    text-align: center;
+                  }
+                  .con {
+                    font-family: "FZJCGFKTK";
+                    font-weight: 400;
+                    font-size: 20px;
+                    color: #000000;
+                    text-align: center;
+                  }
+                }
+              }
+              .shiyi {
+                font-weight: 400;
+                font-size: 12px;
+                color: #48a3e6;
+              }
+            }
+            .bottom {
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 150%;
+              color: rgba(0, 0, 0, 0.3);
+              text-align: right;
+            }
+          }
+          .kwic_one {
+            padding: 0 16px;
+            display: flex;
+            align-items: center;
+            > :nth-child(1) {
+              width: 16px;
+              margin-right: 16px;
+              justify-content: flex-end;
+            }
+            .laiyuan {
+              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 {
+              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;
+                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;
+              }
+            }
+          }
+        }
+        .page {
+          padding: 0 24px 0 12px;
+          width: 93%;
+          position: absolute;
+          bottom: 16px;
+          display: flex;
+          justify-content: space-between;
+          .text {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            display: flex;
+            align-items: center;
+            text-align: center;
+            color: rgba(0, 0, 0, 0.6);
+            margin-right: 16px;
+          }
+        }
       }
     }
     .right {
       width: 630px;
-      height: 100px;
       background: #ffffff;
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       border-radius: 8px;
+      padding-bottom: 39px;
       .top {
         border-bottom: 1px solid rgba(0, 0, 0, 0.08);
         height: 44px;
@@ -491,6 +1026,36 @@ export default {
           }
         }
       }
+      .list {
+        width: 598px;
+        margin: 0 auto;
+        .one {
+          display: flex;
+          justify-content: space-between;
+          border-bottom: 1px solid #eeeeee;
+          padding: 12px;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22px;
+          color: #333333;
+          cursor: pointer;
+
+          > :nth-child(1) {
+            text-align: left;
+          }
+          > div {
+            width: 186px;
+            text-align: right;
+          }
+        }
+        .all {
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 22px;
+          color: #333333;
+          border-bottom: none;
+        }
+      }
     }
   }
 }
@@ -509,5 +1074,18 @@ export default {
   .el-switch.is-checked .el-switch__core::after {
     margin-left: -10px;
   }
+  .el-switch__label.is-active {
+    color: #000000;
+  }
+  .page {
+    .el-pagination.is-background .el-pager li:not(.disabled).active {
+      background-color: #0052d9;
+    }
+    .el-pager li {
+      background: #ffffff;
+      border: 1px solid #dcdcdc;
+      border-radius: 3px;
+    }
+  }
 }
 </style>

src/views/wordcard/table.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="cred_table">
+    <Header />
+    <div class="main">
+      <div>
+        <div class="title">词句卡片</div>
+        <div class="number_cread">
+          <span class="left">词汇数量：123</span>
+          <div class="right">开始创建</div>
+        </div>
+        <div class="table">
+          <div v-for="(item, i) in data" :key="i + 'one'">
+            <div class="number">{{ item.number }}</div>
+            <div class="dv">{{ item.fileName }}</div>
+            <div class="dv">{{ item.type == 1 ? "字卡片" : "句卡片" }}</div>
+            <div class="dv">{{ item.content }}</div>
+            <div class="dv">{{ item.time }}</div>
+            <el-popconfirm
+              title="确定删除这一条记录吗？"
+              @confirm="deleteOne(item.id, i)"
+            >
+              <img
+                slot="reference"
+                src="../../assets/teacherdev/delete-one.png"
+                alt=""
+              />
+            </el-popconfirm>
+          </div>
+        </div>
+        <div class="page">
+          <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            :page-sizes="[10, 20, 30, 40, 50]"
+            layout="prev, pager, next,jumper"
+            :current-page="page"
+            :page-size="pageSize"
+            :total="1000"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "@/components/Header";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    Header,
+  },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+      page: 1,
+      pageSize: 10,
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    deleteOne() {},
+    handleCurrentChange(val) {
+      this.page = val;
+    },
+    getdata() {
+      let data = [
+        {
+          fileName:
+            "这里是文件名文件名文件名这里是文件名文件名文件名这里是文件名文件名文件名",
+          type: 1,
+          content: "今天天气非常好 明天据说有雨 后天可能会有沙尘暴",
+          time: "2022-06-07 06:38",
+        },
+        {
+          fileName:
+            "这里是文件名文件名文件名这里是文件名文件名文件名这里是文件名文件名文件名",
+          type: 2,
+          content: "今天天气非常好 明天据说有雨 后天可能会有沙尘暴",
+          time: "2022-06-07 06:38",
+        },
+      ];
+      let num = this.page * this.pageSize - this.pageSize + 1;
+      data.forEach((item) => {
+        item.number = num;
+        num++;
+      });
+      this.data = data;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getdata();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.cred_table {
+  height: 100%;
+  .main {
+    min-height: 91%;
+    background: #f7f7f7;
+    padding-top: 54px;
+    > div {
+      width: 1200px;
+      margin: 0 auto;
+    }
+    .title {
+      font-weight: 700;
+      font-size: 30px;
+      line-height: 43px;
+      text-transform: uppercase;
+      color: #2c2c2c;
+    }
+    .number_cread {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 12px;
+      .left {
+        margin-top: 40px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: #000000;
+      }
+      .right {
+        width: 112px;
+        height: 40px;
+        background: #669aff;
+        border-radius: 4px;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 40px;
+        text-align: center;
+        color: #ffffff;
+        cursor: pointer;
+      }
+    }
+    .table {
+      margin-top: 16px;
+      > div {
+        display: flex;
+        align-items: center;
+        height: 48px;
+        background: #ffffff;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        font-weight: 400;
+        font-size: 16px;
+        color: #000000;
+        padding: 0 16px;
+        .number {
+          width: 20px;
+          text-align: right;
+        }
+        .dv {
+          margin-left: 24px;
+          width: 400px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          cursor: pointer;
+        }
+        img {
+          width: 24px;
+          height: 24px;
+          cursor: pointer;
+          margin-left: 24px;
+        }
+      }
+    }
+    .page {
+      margin-top: 24px;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.cred_table {
+  .page {
+    .el-pagination.is-background .el-pager li:not(.disabled).active {
+      background: none;
+    }
+    .el-pagination {
+      .btn-prev {
+        padding: 0 !important;
+        border: 1px solid #d9d9d9 !important;
+        background: none;
+      }
+      .btn-next {
+        padding: 0 !important;
+        border: 1px solid #d9d9d9 !important;
+        background: none;
+      }
+    }
+    .el-pager {
+      li {
+        border: 1px solid #d9d9d9 !important;
+        box-sizing: border-box;
+        border-radius: 2px;
+        margin: 0 7.5px;
+        background: none;
+      }
+      .el-icon,
+      .more,
+      .btn-quicknext,
+      .el-icon-more {
+        border: none !important;
+      }
+
+      .active {
+        color: black !important;
+        border: 1px solid black !important;
+      }
+    }
+  }
+}
+</style>