文内检索

public/ciyun/ciyunindex.html

@@ -145,7 +145,7 @@
         <div class="content">
             <div class="content-inner" style="padding: 0;">
                 <div class="cloudDiv">
-                    <div class="cloud-copyright">Copyright © Jason Davies</div>
+                    <!-- <div class="cloud-copyright">Copyright © Jason Davies</div> -->
                     <div class="cloud-con-div" id="cloudDiv"></div>
                 </div>
                 <form id="form">
@@ -223,7 +223,7 @@
                                     <div name="orientations" class="radio-con fl" value='3'><i class="radio-icon fl"></i>垂直和水平</div>
                                 </div>
                             </div>
-                            <div class="rule-item fl">
+                            <!-- <div class="rule-item fl">
                                 <p class="fl">单位：</p>
                                 <input type="text" hidden="" id="danwei" value="zi">
                                 <div class="rule-radio danwei fl">
@@ -232,7 +232,7 @@
                                     <div name="danwei" class="radio-con fl" value='ci'><i class="radio-icon fl"></i>词
                                     </div>
                                 </div>
-                            </div>
+                            </div> -->
                             <div id="angles" style="float: left" hidden="">
                                 <p>
                                     <input type="number" id="angle-count" value="5" min="1"><label for="angle-count">
@@ -408,11 +408,11 @@
         function getdata() {
             let data = {
                 type: 0,
-                articleId: articleId,
+                id: articleId,
                 stopWordStatus: W_stopWordStatus,
             }
             $.ajax({
-                url: window.location.href.substring(0, window.location.href.indexOf('/#/')) + "/GCLSTCServer/tools/TS/glossary/ciyun",
+                url: window.location.href.substring(0, window.location.href.indexOf('/#/')) + "/PaperServer/Client/Article/CalcArtWordCloud",
                 // url: "/i21st-newspaper-management-test/api/article/detail/wordCloud",
                 data: JSON.stringify(data),
                 contentType: "application/json",
@@ -525,7 +525,7 @@
 
         function initStopWords() {
             $.ajax({
-                url: window.location.href.substring(0, window.location.href.indexOf('/#/')) + "/GCLSTCServer/tools/TS/stop/word/list",
+                url: window.location.href.substring(0, window.location.href.indexOf('/#/')) + "/PaperServer/Client/Article/CalcArtWordCloud_stopWordList",
                 // url: "/i21st-newspaper-management-test/api/user/stopVocab/get",
                 data: JSON.stringify({}),
                 contentType: "application/json;charset=UTF-8",
@@ -807,7 +807,7 @@
         function updatawordData() {
             let userStopVocab = JSON.parse(JSON.stringify(oldstopWordList));
             $.ajax({
-                url: window.location.href.substring(0, window.location.href.indexOf('/#/')) + "/GCLSTCServer/tools/TS/stop/word/save",
+                url: window.location.href.substring(0, window.location.href.indexOf('/#/')) + "/PaperServer/Client/Article/CalcArtWordCloud_stopWordSave",
                 // url: "/i21st-newspaper-management-test/api/user/stopVocab/update",
                 data: JSON.stringify({
                     tenantId: "",

src/views/bookShelf/articleDetail.vue

@@ -22,7 +22,7 @@
             <div class="atricle-data">
                 <normal-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='original'" :articleInfo="articleInfo"></normal-model>
                 <phrase-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='newWord'" :articleInfo="articleInfo" :likePhraseList="likePhraseList" :likeWord="likeWordList" @changeLike="changeLike"></phrase-model>
-                <inner-text-search :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='search'" :articleInfo="articleInfo"></inner-text-search>
+                <inner-text-search :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='search'" :articleInfo="articleInfo" ref="innerTextSearchs"></inner-text-search>
                 <div class="article-btn" v-if="this.$route.query.iss_id">
                     <div class="left">
                         <span :class="['support colloct-article',!noRead?'active':'']" @click="changeStatus('noRead')"><svg-icon icon-class="like-line" :style="{marginRight:articleNumber?'8px':'0px'}"></svg-icon>{{articleNumber?articleNumber:''}}</span>
@@ -646,6 +646,8 @@ export default {
         ciyunShow: false, // 显示词云
     }
   },
+  watch: {
+  },
   methods: {
     inityuan() {
         if(this.articleInfo&&this.articleInfo.art_corpus_data&&this.articleInfo.art_corpus_data.artStatInfo&&this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems){
@@ -943,6 +945,11 @@ export default {
             }
         }else{
             this.menuType = type
+            if(type==='search'){
+                setTimeout(() => {
+                    this.$refs.innerTextSearchs.changeShow()
+                }, 100);
+            }
             this.menuFeature = ''
         }
     },
@@ -1195,6 +1202,7 @@ export default {
             border: 1px solid #E5E6EB;
             border-radius: 8px;
             padding: 4px;
+            z-index: 99;
         }
     }
     .atricle-data{

src/views/bookShelf/components/InnerTextSearch.vue

@@ -11,8 +11,9 @@
                     <span
                         class="NNPE-chs"
                         :class="[
-                            itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':'',itemR.highIndex?'fontWeight':''
+                            itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':'',itemR.highIndex?'fontWeight':'',itemR.color?'wordSelected':''
                         ]"
+                        :style="{background: itemR.color?itemR.color:'',borderColor:itemR.borderColor?itemR.borderColor:''}"
                         >{{ itemR.tokens[2] }}</span
                     >
                     <span
@@ -21,8 +22,9 @@
                         resArr[0].wordsList[indexR + 1].tokens[2] &&
                         enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1"
                         :class="[
-                                resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '?'marginRight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':''
+                                resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '?'marginRight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].color?'wordSelected':''
                             ]"
+                        :style="{background: resArr[0].wordsList[indexR + 1].color?resArr[0].wordsList[indexR + 1].color:'',borderColor:resArr[0].wordsList[indexR + 1].borderColor?resArr[0].wordsList[indexR + 1].borderColor:''}"
                         >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
                     >
                 </template>
@@ -70,9 +72,9 @@
                             <span
                                 class="NNPE-chs"
                                 :class="[
-                                    pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':''
+                                    pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':'',pItem.color?'wordSelected':''
                                 ]"
-                                :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
+                                :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor,background:pItem.color?pItem.color:'',borderColor:pItem.borderColor?pItem.borderColor:''}"
                                 >{{ pItem.tokens[2] }}</span
                             >
                             <span
@@ -81,9 +83,9 @@
                             item.wordsList[pIndex + 1].tokens[2] &&
                             enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
                             :class="[
-                                    item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':''
+                                    item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':'',item.wordsList[pIndex + 1].color?'wordSelected':''
                                 ]"
-                                :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
+                                :style="{fontSize:wordFontsize + 'px',color:colorObj.contentColor,background:item.wordsList[pIndex + 1].color?item.wordsList[pIndex + 1].color:'',borderColor:item.wordsList[pIndex + 1].borderColor?item.wordsList[pIndex + 1].borderColor:''}"
                             >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
                             >
                         </div>
@@ -97,6 +99,64 @@
     </template>
 
     <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
+    <div class="search-box" v-if="showSearch">
+        <span class="search-show-btn" @click="changeShow"></span>
+        <div class="search">
+            <div class="select-result" @click="showSearchColorList">
+                <span class="selectBg" :style="{ background: colorValue, borderColor: borderColorValue}"></span>
+                <i class="tri el-icon-arrow-down" ></i>
+            </div>
+            <input
+                class="searchVal"
+                v-model="searchVal"
+                @keyup.enter="onSearch"
+                :style="{ color: colorValue }"
+                @blur="searchVal = searchVal.trim()"
+                @keydown="searchValChange"
+            />
+            <i
+                class="search-icon"
+                style="cursor: pointer"
+                @click="onSearch"
+            >查找</i>
+            <ul class="searchColorList" v-if="isSCL">
+                <li
+                v-for="(item, index) in searchColorList"
+                :key="'search' + index"
+                @click="selectSearchColor(item, index)"
+                >
+                <span class="searchColor" :style="{ background: item, borderColor: borderColorList[index] }"></span>
+                </li>
+                <li class="close" @click="closeSearchColor">关闭</li>
+            </ul>
+        </div>
+        <div class="result-left-numberclose" v-if="searchWordShow">
+            <div>
+                <span>
+                    <span
+                    style="font-size: 12px; line-height: 20px; color: rgba(146, 156, 168, 1)"
+                    >
+                    匹配 {{ SearchwordNumber }} 次
+                    </span>
+                </span>
+                <span class="resule-right-btn" @click="clearSelected('all')"
+                    ><i class="el-icon-close"></i>清除标记</span
+                >
+            </div>
+            <ul class="search-list">
+                <li v-for="(itemS,indexs) in searchResultList.slice().reverse()" :key="indexs">
+                    <p>
+                        <span class="searchColor" :style="{ background: itemS.bg, borderColor: itemS.border }"></span>
+                        <b>{{itemS.text}}</b>
+                        <span>{{itemS.number}}</span>
+                        <i>{{itemS.percent}}%</i>
+                        <i class="el-icon-close" @click="deleteSearchList(searchResultList.length-1-indexs,itemS.text)"></i>
+                    </p>
+                    <label :style="{width:itemS.percent+'%',background: itemS.border}"></label>
+                </li>
+            </ul>
+        </div>
+    </div>
   </div>
 </template>
 
@@ -156,6 +216,43 @@ export default {
       articleImg: {}, // 文章图片
       paraIndex: -1, //段落索引
       sentIndex: -1, // 句子索引
+      showSearch: false,
+      colorValue: "#F5D90A",
+      borderColorValue: "#FEF2A4",
+      colorIndex: 0,
+      searchVal: "",
+      isSCL: false,
+      searchColorList: [
+        "#F5D90A",
+        "#FA934E",
+        "#65BA75",
+        "#3DB9CF",
+        "#D09E72",
+        "#99D52A",
+        "#BE93E4",
+        "#F2555A",
+        "#F04F88",
+        "#306EFF"
+      ],
+      borderColorList: [
+        "#FEF2A4",
+        "#FFDCC3",
+        "#CEEBCF",
+        "#C4EAEF",
+        "#EFDDCC",
+        "#D7F2B0",
+        "#EDDBF9",
+        "#EB9091",
+        "#E58FB1",
+        "#5E89EF"
+      ],
+      SearchwordNumber: 0,
+      searchWord: [],
+      searchWordShow: false,
+      currentcolorValue: [],
+      currentBorderColorValue: [],
+      searchResultList: [], // 匹配结果list
+      alreadySelectIndex: 0
     };
   },
   computed: {
@@ -189,7 +286,7 @@ export default {
                 isShow: this.enFhList.indexOf(items[2])==-1,
                 marginRight: indexs===item.tokens.length-1,
                 color: '',
-                bg: ''
+                borderColor: ''
             }
             resArr[item.pno].wordsList.push(obj)
         })
@@ -197,6 +294,162 @@ export default {
       });
       this.resArr = resArr;
     },
+    changeShow(){
+        this.showSearch = !this.showSearch
+    },
+    showSearchColorList() {
+      this.isSCL = !this.isSCL;
+    },
+    closeSearchColor() {
+      this.isSCL = false;
+    },
+    selectSearchColor(item, index) {
+      this.isSCL = false;
+      this.colorValue = item;
+      this.borderColorValue = this.borderColorList[index]
+      this.colorIndex = index;
+    },
+    searchValChange(e) {
+      if (this.searchVal.length == 1 && e.keyCode == 8) {
+        if (
+          this.colorIndex == this.alreadySelectIndex + 1 ||
+          this.searchWord.length == 0
+        ) {
+          this.alreadySelectIndex = 0
+          return;
+        }
+        this.colorIndex = this.alreadySelectIndex + 1;
+        this.colorValue = this.searchColorList[this.colorIndex];
+        this.borderColorValue = this.borderColorList[this.colorIndex]
+      }
+    },
+    onSearch() {
+      if (!this.searchVal) {
+        return;
+      }
+      this.searchWordShow = true;
+      let index = this.searchWord.indexOf(this.searchVal.toLowerCase());
+      if (index == -1) {
+        this.searchWord.push(this.searchVal.toLowerCase());
+        this.currentcolorValue.push(this.colorValue);
+        this.currentBorderColorValue.push(this.borderColorValue)
+      } else {
+        // this.currentcolorValue[index] = this.colorValue;
+        this.$set(this.currentcolorValue, index, this.colorValue);
+        this.$set(this.currentBorderColorValue, index, this.borderColorValue);
+      }
+      this.type = "";
+      this.calculateSearchwordNumber();
+      // this.searchVal = "";
+    },
+    // 计算匹配个数
+    async calculateSearchwordNumber() {
+        let arr = [];
+    //   await this.searchWord.forEach((item) => {
+    //     this.calculateIndex(this.textContent, item).then((res) => {
+    //       arr.push(res);
+    //     });
+    //   });
+        this.searchResultList = []
+        this.SearchwordNumber = 0;
+        // 匹配高亮
+        this.searchWord.forEach((searchItem, i) => {
+            let SearchwordNumber = 0
+            this.resArr.forEach((item) => {
+                item.wordsList.forEach((items) => {
+                    if (items.tokens[2].toLowerCase() == searchItem) {
+                        SearchwordNumber ++
+                        items.color = this.currentcolorValue[i];
+                        items.borderColor = this.currentBorderColorValue[i]
+                    }
+                });
+            });
+            if(SearchwordNumber>0){
+                this.searchResultList.push({
+                    number: SearchwordNumber,
+                    percent: (SearchwordNumber/this.articleInfo.art_corpus_data.artStatInfo.wdc*100).toFixed(2),
+                    text: searchItem,
+                    border: this.currentBorderColorValue[i],
+                    bg: this.currentcolorValue[i]
+                })
+            }
+            this.SearchwordNumber = SearchwordNumber; //高亮最后一次
+            if(SearchwordNumber>0&&i===this.searchWord.length-1){
+                this.alreadySelectIndex ++
+            }
+        });
+    },
+    // 找出对应字符的索引
+    calculateIndex(txt, key) {
+      return new Promise((reslove, reject) => {
+        // 去除标点
+        let keylength = key.length;
+        let arr = [];
+        for (let i = 0; i < txt.length; i++) {
+          if (txt[i] == key[0]) {
+            arr.push(i);
+          }
+        }
+        let indexArr = [];
+        arr.forEach((item) => {
+          let arr = [];
+          for (let i = 0; i < keylength; i++) {
+            if (txt[item + i] == key[i]) {
+              arr.push(item + i);
+            } else {
+              arr = [];
+            }
+          }
+          if (arr.length > 0) {
+            indexArr.push(arr);
+          }
+        });
+        reslove(indexArr);
+      });
+    },
+    clearSelected(all) {
+      let _this = this;
+      _this.type = "";
+      _this.searchVal = "";
+      _this.searchWord = [];
+      _this.currentcolorValue = [];
+      _this.currentBorderColorValue = []
+      _this.SearchwordNumber = 0;
+      if (all) {
+        this.seleLevelMapList = [];
+        _this.searchWordShow = false;
+        sessionStorage.setItem("tablehighlight", false);
+      }
+      this.colorIndex = 0;
+      this.colorValue = this.searchColorList[this.colorIndex];
+      this.borderColorValue = this.borderColorList[this.colorIndex]
+      this.searchResultList = []
+      this.closeSearchhighlight();
+    },
+    // 取消搜索高亮
+    closeSearchhighlight() {
+      this.resArr.forEach((item) => {
+        // item.forEach((items) => {
+        item.wordsList.forEach((itemss) => {
+          itemss.color = null;
+        });
+        // });
+      });
+    },
+    deleteSearchList(index,text){
+        this.searchResultList.splice(index,1)
+        this.currentcolorValue.splice(index,1)
+        this.searchWord.splice(index,1)
+        this.currentBorderColorValue.splice(index,1)
+        this.resArr.forEach((item) => {
+            item.wordsList.forEach((items) => {
+                if (items.tokens[2].toLowerCase() == text) {
+                    items.color = '';
+                    items.borderColor = ''
+                }
+            });
+        });
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -234,6 +487,11 @@ export default {
     .wordActive {
         color: #175DFF !important;
     }
+    .wordSelected{
+        border-radius: 4px;
+        border: 1px solid #FEF2A4;
+        box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
+    }
   }
   .table-box {
     // background: #f7f7f7;
@@ -297,6 +555,11 @@ export default {
           &.marginSingleRight{
             padding: 0 3px 0 0;
           }
+          &.wordSelected{
+            border-radius: 4px;
+            border: 1px solid #FEF2A4;
+            box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
+          }
         }
         &.padding {
           padding: 0 3px;
@@ -331,4 +594,222 @@ export default {
         width: 430px;
     }
 }
+.search-box{
+    position: fixed;
+    top: 200px;
+    width: 298px;
+    border-radius: 8px;
+    border: 1px solid #E5E6EB;
+    background: #FFF;
+    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+    // min-height: 204px;
+    right: calc((100% - 1000px)/2);
+    padding: 0 16px 16px;
+    .search-show-btn{
+        border-radius: 4px;
+        background:#D0D3D9;
+        width: 48px;
+        height: 4px;
+        display: block;
+        margin: 6px auto;
+        cursor: pointer;
+    }
+    .search {
+        position: relative;
+        height: 40px;
+        width: 100%;
+        border: 1px solid #dddddd;
+        box-sizing: border-box;
+        padding: 7px 0;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .select-result {
+            height: 24px;
+            width: 57px;
+            padding: 4px 11px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            cursor: pointer;
+            .selectBg {
+                width: 16px;
+                height: 16px;
+                background: #de4444;
+                border-radius: 2px;
+                border: 1px solid #FEF2A4;
+                box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
+            }
+            .tri {
+                width: 10px;
+                height: 10px;
+                font-size: 10px;
+                margin-left: 4px;
+                // background: url("../../assets/teacherdev/down-icon.png") no-repeat
+                // left top;
+                // background-size: 100% 100%;
+            }
+        }
+        .searchVal {
+            font-weight: bold;
+            width: 142px;
+            border: 0;
+            border-left: 1px solid #dddddd;
+            box-sizing: border-box;
+            outline: 0;
+            padding-left: 12px;
+        }
+        .search-icon {
+            position: absolute;
+            right: 12px;
+            display: block;
+            color: #175DFF;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 22px;
+        }
+        .searchColorList {
+            width: 58px;
+            position: absolute;
+            top: 38px;
+            left: 0;
+            border: 1px #d9d9d9 solid;
+            background: #fff;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            z-index: 2;
+            > li {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 8px 0;
+                cursor: pointer;
+                > span {
+                    width: 14px;
+                    height: 14px;
+                    border-radius: 2px;
+                    border: 1px solid #FEF2A4;
+                    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
+                }
+                &.close {
+                    font-size: 12px;
+                    border-top: 1px #d9d9d9 solid;
+                }
+            }
+        }
+    }
+    .result-left-numberclose {
+        margin-top: 16px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        border-radius: 4px;
+        background:#F7F8FA;
+        padding: 8px;
+        // min-height: 126px;
+        >div{
+            display: flex;
+            justify-content: space-between;
+        }
+        .resule-right-btn {
+            display: inline-block;
+            border-radius: 3px;
+            border: 1px solid#E5E6EB;
+            background:#FFF;
+            cursor: pointer;
+            height: 24px;
+            padding: 2px 8px;
+            color: var(--slate-10, #2F3742);
+            text-align: center;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 18px;
+            .el-icon-close{
+                margin-right: 8px;
+            }
+        }
+        .search-list{
+            width: 100%;
+            margin: 8px 0 0;
+            padding: 0;
+            max-height: 250px;
+            overflow: auto;
+            &::-webkit-scrollbar { 
+                display: none;
+            }
+            li{
+                padding: 1px 8px;
+                margin: 2px 0;
+                border-radius: 4px;
+                background:#FFF;
+                position: relative;
+                height: 34px;
+                .searchColor{
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 2px;
+                    border: 1px solid rgba(255, 255, 255, 0.40);
+                    background: #F5D90A;
+                    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
+                }
+                p{
+                    position: absolute;
+                    width: 234px;
+                    height: 34px;
+                    left: 8px;
+                    top: 1px;
+                    margin: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    z-index: 1;
+                }
+                b{
+                    color:#2F3742;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 22px;
+                    width: 62px;
+                }
+                span{
+                    width: 35px;
+                    text-align: right;
+                }
+                i{
+                    text-align: right;
+                    width: 81px;
+                    padding: 0 4px;
+                    margin: 0;
+                    height: 34px;
+                    line-height: 34px;
+                    font-style: normal;
+                }
+                .el-icon-close{
+                    font-size: 16px;
+                    color: #929CA8;
+                    cursor: pointer;
+                    width: 16px;
+                    height: 16px;
+                    padding: 0;
+                    line-height: 16px;
+                }
+                label{
+                    position: absolute;
+                    top: 1px;
+                    right: 28px;
+                    border-radius: 3px;
+                    background: rgba(240, 192, 0, 0.16);
+                    display: block;
+                    height: 32px;
+                    z-index: 0;
+                }
+            }
+        }
+    }
+}
 </style>