GCLS_Page_TC/src/views/corpus/Result.vue

<template>
  <div class="result" v-loading="loading">
    <Header
      :projectShow="true"
      :seekShow="true"
      :seekOption="false"
      :seekOptions="true"
      @changehzdata="changehzdata"
    />
    <div class="main">
      <div class="hanzi_list">
        <div class="top_jf">
          <div class="j_f">
            <div :class="[JFIndex == 0 ? 'sele' : '']" @click="jfEvent(0)">
              简
            </div>
            <div :class="[JFIndex == 1 ? 'sele' : '']" @click="jfEvent(1)">
              繁
            </div>
          </div>
        </div>
        <div
          class="list_one_box"
          :style="{
            overflowY: unfold ? 'scroll' : 'hidden',
          }"
        >
          <div
            class="list_one"
            v-for="(item, index) in ShowHzData"
            :key="'index' + index"
          >
            <Strockplayredline
              v-if="item.hzDetail.hz_json"
              :Book_text="JFIndex == 0 ? item.con : item.fanti"
              :playStorkes="true"
              :curItem="item.hzDetail"
              :targetDiv="'bwcHanziIntp' + index + item.con"
              :isHighlight="false"
              :judgeAnswer="2"
            />
            <div class="Highlight" v-if="item.hzDetail.hz_json">
              <div class="play_audio">
                <img src="../../assets/teacherdev/speaker-one.png" alt="" />
                <span>{{ item.pinyin }}</span>
              </div>
              <div
                v-for="(items, indexs) in item.hzDetail.hz_json.medians.length"
                :key="'row' + indexs"
                class="row"
              >
                <StrockplayredlineCorpus
                  :Book_text="JFIndex == 0 ? item.con : item.fanti"
                  :playStorkes="false"
                  :curItem="item.hzDetail"
                  :targetDiv="'bwcHanziIntp_height' + index + item.con + indexs"
                  :targetDivGray="
                    'bwcHanziIntp_height_Grey' + index + item.con + indexs
                  "
                  :isHighlight="true"
                  :judgeAnswer="indexs + 1"
                  :BoxbgType="0"
                  strokeColorgray="#aaaaaa"
                  strokeColor="#000000"
                />
                <div class="number">{{ indexs + 1 }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="shouqi" v-if="hzData.length > 2">
          <span @click="updownHz">
            <template v-if="unfold">
              <img src="../../assets/teacherdev/up.png" alt="" />
              收起
            </template>
            <template v-else>
              <img src="../../assets/teacherdev/down.png" alt="" />
              展开
            </template>
          </span>
        </div>
      </div>
      <div class="txt_imgtable">
        <div class="left">
          <div class="top">
            <div>
              <div class="pattern">
                <div
                  :class="[patternIndex == 0 ? 'sele' : '']"
                  @click="cutPattern(0)"
                >
                  引语模式
                </div>
                <div
                  :class="[patternIndex == 1 ? 'sele' : '']"
                  @click="cutPattern(1)"
                >
                  KWIC模式
                </div>
              </div>

              <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>
          <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
                        class="shiyi"
                        :style="{
                          marginBottom: sizeIndex == 2 ? '0' : '5px',
                        }"
                      >
                        （{{ item.shiyi }}）
                      </div>
                    </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" :key="indexs">
                      <span
                        v-for="(txts, indexs) in txt"
                        v-html="txts"
                        :key="indexs"
                      ></span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <div class="page">
              <span class="text"> 共 196 条 命中 213 次 </span>
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page.sync="page"
                layout="prev, pager, next"
                :total="1000"
                :pager-count="6"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div>
              <div
                :class="[rightTopIndex == 0 ? 'sele' : '']"
                @click="cutsyly(0)"
              >
                释义
              </div>
              <div
                :class="[rightTopIndex == 1 ? 'sele' : '']"
                @click="cutsyly(1)"
              >
                来源
              </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>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "@/components/Header";
import { getLogin } from "@/api/api";
import Strockplayredline from "@/components/corpus/Strockplayredline";
import StrockplayredlineCorpus from "@/components/corpus/StrockplayredlineCorpus";
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
const OpenCC = require("opencc-js");
const converter = OpenCC.Converter({ from: "cn", to: "tw" });
import * as echarts from "echarts";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
    Strockplayredline,
    StrockplayredlineCorpus,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      page: 1,
      shiyiShow: false,
      pinyinShow: false,
      JFIndex: 0,
      hzData: [],
      ShowHzData: [],
      loading: true,
      lang: null,
      unfold: true,
      patternIndex: 0,
      rightTopIndex: 0,
      sizeIndex: 1,
      sort: "down",
      rightList: [
        {
          name: "good",
          value: "4",
          ratio: "0.4",
        },
        {
          name: "OK",
          value: "3",
          ratio: "0.3",
        },
        {
          name: "nice",
          value: "2",
          ratio: "0.2",
        },
        {
          name: "yes",
          value: "1",
          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",
        },
        {
          number: 2,
          mp3: "",
          wordsList: [
            {
              pinyin: "wǒ",
              con: "我",
            },
            {
              pinyin: "hěn",
              con: "很",
            },
            {
              pinyin: "hǎo",
              con: "好",
            },
            {
              pinyin: "",
              con: "。",
            },
          ],
          shiyi: "good, ok",
          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
        },
        {
          number: 3,
          mp3: "",
          wordsList: [
            {
              pinyin: "jīn",
              con: "今",
            },
            {
              pinyin: "tiān",
              con: "天",
            },
            {
              pinyin: "yī",
              con: "一",
            },
            {
              pinyin: "qǐ",
              con: "起",
            },
            {
              pinyin: "qù",
              con: "去",
            },
            {
              pinyin: "kàn",
              con: "看",
            },
            {
              pinyin: "diàn",
              con: "电",
            },
            {
              pinyin: "yǐng",
              con: "影",
            },
            {
              pinyin: "hǎo",
              con: "好",
            },
            {
              pinyin: "ma",
              con: "吗",
            },
            {
              pinyin: "",
              con: "？",
            },
          ],
          shiyi: "good, ok",
          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
        },
        {
          number: 4,
          mp3: "",
          wordsList: [
            {
              pinyin: "zhè",
              con: "这",
            },
            {
              pinyin: "lǐ",
              con: "里",
            },
            {
              pinyin: "yǐ",
              con: "已",
            },
            {
              pinyin: "jīng",
              con: "经",
            },
            {
              pinyin: "hěn",
              con: "很",
            },
            {
              pinyin: "jiǔ",
              con: "久",
            },
            {
              pinyin: "hěn",
              con: "很",
            },
            {
              pinyin: "jiǔ",
              con: "久",
            },
            {
              pinyin: "hěn",
              con: "很",
            },
            {
              pinyin: "jiǔ",
              con: "久",
            },
            {
              pinyin: "měi",
              con: "没",
            },
            {
              pinyin: "yǒu",
              con: "有",
            },
            {
              pinyin: "guò",
              con: "过",
            },
            {
              pinyin: "zhè",
              con: "这",
            },
            {
              pinyin: "me",
              con: "么",
            },
            {
              pinyin: "hǎo",
              con: "好",
            },
            {
              pinyin: "de",
              con: "的",
            },
            {
              pinyin: "tiān",
              con: "天",
            },
            {
              pinyin: "qì",
              con: "气",
            },
            {
              pinyin: "le",
              con: "了",
            },
            {
              pinyin: "",
              con: "。",
            },
          ],
          shiyi: "good, ok",
          laiyuan: "《轻松学中文1》  Unit 1  课文一  P16",
        },
        {
          number: 5,
          mp3: "",
          wordsList: [
            {
              pinyin: "jīn",
              con: "今",
            },
            {
              pinyin: "tiān",
              con: "天",
            },
            {
              pinyin: "yī",
              con: "一",
            },
            {
              pinyin: "qǐ",
              con: "起",
            },
            {
              pinyin: "qù",
              con: "去",
            },
            {
              pinyin: "kàn",
              con: "看",
            },
            {
              pinyin: "diàn",
              con: "电",
            },
            {
              pinyin: "yǐng",
              con: "影",
            },
            {
              pinyin: "hǎo",
              con: "好",
            },
            {
              pinyin: "ma",
              con: "吗",
            },
            {
              pinyin: "jīn",
              con: "今",
            },
            {
              pinyin: "tiān",
              con: "天",
            },
            {
              pinyin: "yī",
              con: "一",
            },
            {
              pinyin: "qǐ",
              con: "起",
            },
            {
              pinyin: "qù",
              con: "去",
            },
            {
              pinyin: "kàn",
              con: "看",
            },
            {
              pinyin: "diàn",
              con: "电",
            },
            {
              pinyin: "yǐng",
              con: "影",
            },
            {
              pinyin: "hǎo",
              con: "好",
            },
            {
              pinyin: "ma",
              con: "吗",
            },
            {
              pinyin: "jīn",
              con: "今",
            },
            {
              pinyin: "tiān",
              con: "天",
            },
            {
              pinyin: "yī",
              con: "一",
            },
            {
              pinyin: "qǐ",
              con: "起",
            },
            {
              pinyin: "qù",
              con: "去",
            },
            {
              pinyin: "kàn",
              con: "看",
            },
            {
              pinyin: "diàn",
              con: "电",
            },
            {
              pinyin: "yǐng",
              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概念
  computed: {},
  //监控data中数据变化
  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;
    },
    // 切换释义来源
    cutsyly(index) {
      this.rightTopIndex = index;
    },
    updownHz() {
      this.unfold = !this.unfold;
      if (this.unfold) {
        this.ShowHzData = JSON.parse(JSON.stringify(this.hzData));
      } else {
        this.ShowHzData.splice(2);
      }
    },
    jfEvent(index) {
      this.JFIndex = index;
      if (index == 0) {
        //简体
        this.gethzJSON();
      } else {
        //繁体
        this.hzData.forEach((item) => {
          let a = converter(item.con);
          item.fanti = a;
        });
        this.gethzJSON();
      }
    },
    // 获取汉字josn
    gethzJSON() {
      this.loading = true;
      let MethodName = "hz_resource_manager-GetHZStrokesContent";
      this.hzData.forEach((item, i) => {
        let data = {
          hz: this.JFIndex == 0 ? item.con : item.fanti,
        };
        item.hzDetail = {
          hz_json: null,
        };
        this.$forceUpdate();
        getLogin(MethodName, data)
          .then((res) => {
            this.$set(item.hzDetail, "hz_json", res);
            this.$forceUpdate();
            this.ShowHzData = JSON.parse(JSON.stringify(this.hzData));
            if (i == this.hzData.length - 1) {
              this.loading = false;
            }
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    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) => {
        if (!/^[\u4e00-\u9fa5]/.test(item)) {
          return;
        }
        let result = pinyinUtil.getPinyin(item);
        let obj = {
          con: item,
          pinyin: result,
          hzDetail: {
            hz_json: null,
          },
        };
        this.hzData.push(obj);
        this.ShowHzData = JSON.parse(JSON.stringify(this.hzData));
      });
      this.gethzJSON();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.$route.query.keyword) {
      this.changehzdata();
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getrightListdata();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.result {
  min-height: 100%;
  > .main {
    min-height: 100%;
    background: #f2f2f2;
    padding-top: 33px;
    padding-bottom: 66px;
  }
  .hanzi_list {
    width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 8px;
    padding: 40px 13px;
    position: relative;
    box-sizing: border-box;
    .top_jf {
      width: 128px;
    }
    .j_f {
      display: flex;
      width: 60px;
      height: 24px;
      margin-bottom: 16px;
      margin-left: 33px;
      > :nth-child(1) {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        border-right: none;
      }
      > :nth-child(2) {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-left: none;
      }
      div {
        width: 30px;
        height: 24px;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        color: #de4444;
        cursor: pointer;
        border: 2px solid #de4444;
      }
      .sele {
        color: #ffffff;
        background: #de4444;
      }
    }
    .list_one_box {
      max-height: 750px;
      padding: 0 27px;
      &::-webkit-scrollbar-track-piece {
        background: #fff;
      }

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: #d9d9d9;
        border-radius: 20px;
      }
    }
    .list_one {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      .Highlight {
        flex: 1;
        margin-left: 22px;
        display: flex;
        flex-wrap: wrap;
        .play_audio {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 13px;
          img {
            width: 16px;
            height: 16px;
            cursor: pointer;
          }
          span {
            font-family: "GB-PINYINOK-B";
            font-weight: 400;
            font-size: 12px;
            margin-left: 5px;
            color: #000000;
          }
        }
      }
      .row {
        margin-right: 8px;
        margin-bottom: 8px;
        .number {
          margin-top: 9px;
          width: 64px;
          height: 20px;
          background: #e9e9e9;
          border-radius: 22px;
          text-align: center;
          line-height: 20px;
        }
      }
    }
    .shouqi {
      margin-top: 21;
      display: flex;
      justify-content: flex-end;
      position: absolute;
      right: 26px;
      bottom: 13px;
      span {
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
      }
      img {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
  }
  .txt_imgtable {
    width: 1200px;
    margin: 0 auto;
    margin-top: 8px;
    display: flex;
    .left {
      width: 562px;
      background: #ffffff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      margin-right: 8px;
      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;
          height: 28px;
          background: #eeeeee;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          > div {
            width: 68px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            color: #888888;
            cursor: pointer;
            font-weight: 400;
            font-size: 12px;
            border-radius: 2px;
          }
          .sele {
            background: #ffffff;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
            color: #000000;
          }
        }
        .lang_sort {
          width: 54px;
          height: 28px;
          background: #eeeeee;
          border-radius: 4px;
          margin-left: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          img {
            width: 16px;
            height: 16px;
            margin-left: 2px;
          }
        }
        .refresh {
          width: 28px;
          height: 28px;
          background: #eeeeee;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 8px;
          cursor: pointer;
          img {
            width: 16px;
            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;
              flex-flow: wrap;
              .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 10px 0 12px;
          width: 562px;
          position: absolute;
          bottom: 16px;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          .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;
      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;
        display: flex;
        align-items: center;
        > div {
          margin-left: 16px;
          width: 84px;
          height: 28px;
          background: #eeeeee;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          > div {
            border-radius: 2px;
            width: 40px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            color: #888888;
            cursor: pointer;
            font-weight: 400;
            font-size: 12px;
          }
          .sele {
            background: #ffffff;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
            color: #000000;
          }
        }
      }
      .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;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.result {
  .el-switch__core {
    width: 26px !important;
    height: 16px;
  }
  .el-switch__core:after {
    width: 8px;
    height: 8px;
    top: 2px;
  }
  .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>