文章信息

src/views/bookShelf/articleDetail.vue

@@ -23,6 +23,7 @@
                 <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" ref="innerTextSearchs"></inner-text-search>
+                <lexical-type :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='filtrate'" :articleInfo="articleInfo" ref="lexicalType"></lexical-type>
                 <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>
@@ -180,6 +181,7 @@ import PhraseModel from "./components/PhraseModel.vue"
 import MenuRight from "./components/MenuRight.vue"
 import ArticleInfo from "./components/ArticleInfo.vue"
 import InnerTextSearch from "./components/InnerTextSearch.vue"
+import LexicalType from "./components/LexicalType.vue"
 import * as echarts from "echarts";
 import { getLogin } from "@/api/ajax";
 import { getToken } from '@/utils/auth'
@@ -198,7 +200,8 @@ export default {
     MenuRight,
     PhraseModel,
     ArticleInfo,
-    InnerTextSearch
+    InnerTextSearch,
+    LexicalType
   },
   data(){
     return{
@@ -949,28 +952,32 @@ export default {
                 setTimeout(() => {
                     this.$refs.innerTextSearchs.changeShow()
                 }, 100);
+            }else if(type==='filtrate'){
+                setTimeout(() => {
+                    this.$refs.lexicalType.changeShow()
+                }, 100);
             }
             this.menuFeature = ''
         }
     },
     ciyunEvent() {
-        let MethodName = "/PaperServer/Client/Article/CalcArtWordCloud";
-        let data = {
-            type: 0,
-            id: this.articleId
-        }
-        getLogin(MethodName, data)
-        .then((res) => {
-            // this.ciyunShow = true
-            window.localStorage.setItem('ciyunData', JSON.stringify(res.data))
+        // let MethodName = "/PaperServer/Client/Article/CalcArtWordCloud";
+        // let data = {
+        //     type: 0,
+        //     id: this.articleId
+        // }
+        // getLogin(MethodName, data)
+        // .then((res) => {
+        //     // this.ciyunShow = true
+        //     window.localStorage.setItem('ciyunData', JSON.stringify(res.data))
             window.open(
             "./ciyun/ciyunindex.html?partitionKey=1&searchType=2&articleId=" +
                 this.articleId,
             "_blank"
             );
-        })
-        .catch(() => {
-        }); 
+        // })
+        // .catch(() => {
+        // }); 
     },
     handleCloseShare(){
         this.menuFeature = ''

src/views/bookShelf/components/ArticleInfo.vue

@@ -46,29 +46,29 @@
             </div>
             <div :style="{background:colorObj.glossaryBg}">
                 <label :style="{color:colorObj.statisticTitle}">平均句长</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wdc}}</span>
+                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgSentLen}}</span>
             </div>
             <div :style="{background:colorObj.glossaryBg}">
                 <label :style="{color:colorObj.statisticTitle}">长句数量</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgWordLen}}</span>
+                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.longSentCount}}</span>
             </div>
             <div :style="{background:colorObj.glossaryBg}">
                 <label :style="{color:colorObj.statisticTitle}">长句比例</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.vocabDensity}}</span>
+                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.longSentPercentStr}}</span>
             </div>
         </div>
         <div class="word-info word-infos" v-if="articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo">
             <div :style="{background:colorObj.glossaryBg}">
                 <label :style="{color:colorObj.statisticTitle}">段落数</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno}}</span>
+                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.paraCount}}</span>
             </div>
             <div :style="{background:colorObj.glossaryBg}">
                 <label :style="{color:colorObj.statisticTitle}">平均段长</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wdc}}</span>
+                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgParaLen}}</span>
             </div>
             <div :style="{background:colorObj.glossaryBg}">
                 <label :style="{color:colorObj.statisticTitle}">平均段落句子数</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgWordLen}}</span>
+                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgParaSentCount}}</span>
             </div>
         </div>
         <h4 :style="{color:colorObj.glossarySubtitle}">句长分布</h4>
@@ -87,11 +87,11 @@
         <div class="word-info word-infos" v-if="articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo">
             <div :style="{background:colorObj.glossaryBg,width:'456px'}">
                 <label :style="{color:colorObj.statisticTitle}">HM index</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno}}</span>
+                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.hmIndex}}</span>
             </div>
             <div :style="{background:colorObj.glossaryBg,width:'456px'}">
                 <label :style="{color:colorObj.statisticTitle}">HM CEFR</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wdc}}</span>
+                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.hmCefr}}</span>
             </div>
         </div>
     </div>

src/views/bookShelf/components/InnerTextSearch.vue

@@ -162,13 +162,11 @@
 
 <script>
 import AudioLine from "@/components/common/AudioLine.vue"
-import MagazineVideo from "./MagazineVideo.vue"
 export default {
   name: "ArticleView",
   props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
   components: {
     AudioLine,
-    MagazineVideo
   },
   data() {
     return {

src/views/bookShelf/components/LexicalType.vue

@@ -0,0 +1,509 @@
+<!--  -->
+<template>
+  <div class="NNPE-ArticleView" v-if="articleInfo">
+    <template v-if="resArr[0]&&resArr[0].wordsList[0]&&resArr[0].wordsList[0].hasOwnProperty('pno')&&resArr[0].wordsList[0].pno===0">
+        <h2 :class="['NNPE-words',]">
+            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}" 
+            :class="[
+                    itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':''
+                ]">
+                <template v-if="itemR.isShow">
+                    <span
+                        class="NNPE-chs"
+                        :class="[
+                            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
+                        class="NNPE-chs NNPE-chs-both"
+                        v-if="resArr[0].wordsList[indexR + 1] &&
+                        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].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>
+            <!-- {{itemR.tokens[2]}} -->
+            </span>
+        </h2>
+    </template>
+    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
+        {{articleInfo.art_author+' · '+articleInfo.study_phase_name+'版 · 第 '+articleInfo.iss_no+' 期 · '+articleInfo.release_date+' · '+articleInfo.chn_item+(articleInfo.page_no_in_pub?' · P'+articleInfo.page_no_in_pub:'')}}
+    </h6>
+    <div class="audio-box">
+        <div
+            class="aduioLine-content aduioLine-box"
+            v-if="
+                articleInfo.art_sound_url
+            " :style="{background:colorObj.audiobg,borderColor:colorObj.audioBorder}"
+        >
+            <AudioLine
+                audioId="artNormalAudio"
+                :mp3="articleInfo.art_sound_url"
+                :getCurTime="getCurTime"
+                ref="audioLine"
+                :mp3Source="'mp3'"
+            />
+            <svg-icon icon-class="icon-wrapper" class="wrapper"></svg-icon>
+        </div>
+    </div>
+    <template v-if="resArr.length > 0">
+      <div class="table-box">
+        <div
+          :class="['NNPE-detail']"
+          v-for="(item, index) in resArr"
+          :key="'detail' + index"
+        >
+          <div class="wordsList-box">
+            <div class="nnpe-sentence-box">
+              <div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex">
+                <template v-if="pItem.pno!==0">
+                    <template v-if="pItem.isShow">
+                        <div
+                            :class="[
+                            'NNPE-words',
+                            ]"
+                        >
+                            <span
+                                class="NNPE-chs"
+                                :class="[
+                                    pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':'',pItem.color?'wordSelected':''
+                                ]"
+                                :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1&&selectSentenceIdList.indexOf(pItem.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[pItem.sententLenType].color:sentenceLengthType[pItem.sententLenType].dark:'#929CA8',}"
+                                >{{ pItem.tokens[2] }}</span
+                            >
+                            <span
+                            class="NNPE-chs NNPE-chs-both"
+                            v-if="item.wordsList[pIndex + 1] &&
+                            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].color?'wordSelected':''
+                                ]"
+                                :style="{fontSize:wordFontsize + 'px',color:'#929CA8',}"
+                            >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
+                            >
+                        </div>
+                    </template>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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>
+  </div>
+</template>
+
+<script>
+import AudioLine from "@/components/common/AudioLine.vue"
+export default {
+  name: "ArticleView",
+  props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
+  components: {
+    AudioLine,
+  },
+  data() {
+    return {
+      resArr: [],
+      curTime: 0, //单位s
+      enFhList: [
+        ",",
+        ".",
+        ";",
+        "?",
+        "!",
+        ":",
+        ">",
+        "<",
+        "'",
+        "’",
+        "n't",
+        "n’t",
+        "n’ts",
+        "n‘t",
+        "'t",
+        "’t",
+        "‘t",
+        "'s",
+        "’s",
+        "‘s",
+        "'m",
+        "’m",
+        "‘m",
+        "'re",
+        "’re",
+        "‘re",
+        "'d",
+        "’d",
+        "‘d",
+        "'ve",
+        "’ve",
+        "‘ve",
+        ")",
+        "'ll",
+        "’ll",
+        "‘ll",
+        "”",
+      ],
+      articleImg: {}, // 文章图片
+      paraIndex: -1, //段落索引
+      sentIndex: -1, // 句子索引
+      showSearch: false,
+      vocabularyType:{
+        L0:{
+            bg:'#F2FCE3',
+            color:'#5B7217',
+            darkBg:'#5B7217',
+            border:'#F2FCE3',
+            darkColor:'rgba(255, 255, 255, 0.64)',
+            darkBorder:'rgba(255, 255, 255, 0.08)',
+            darkGreenBg:'#F2FCE3',
+            darkGreenColor:'#5B7217',
+            darkGreenBorder:'#F2FCE3'
+        },
+        L1:{
+            bg:'#EFFCEF',
+            color:'#3D9A50',
+            darkBg:'#2F6E3B',
+            darkColor:'rgba(255, 255, 255, 0.64)',
+            darkBorder:'rgba(255, 255, 255, 0.08)',
+            darkGreenBg:'#EFFCEF',
+            darkGreenColor:'#3D9A50',
+            darkGreenBorder:'#EFFCEF'
+        },
+        L2:{
+            bg:'#E7EEFF',
+            color:'#175DFF',
+            darkBg:'#006793',
+            darkColor:'rgba(255, 255, 255, 0.64)',
+            darkBorder:'rgba(255, 255, 255, 0.08)',
+            darkGreenBg:'#E7F3FF',
+            darkGreenColor:'#0081F1',
+            darkGreenBorder:'#E7F3FF'
+        },
+        L3:{
+            bg:'#EEF3FF',
+            color:'#3459D2',
+            darkBg:'#2C49AA',
+            darkColor:'rgba(255, 255, 255, 0.64)',
+            darkBorder:'rgba(255, 255, 255, 0.08)',
+            darkGreenBg:'#EEF3FF',
+            darkGreenColor:'#3459D2',
+            darkGreenBorder:'#EEF3FF'
+        },
+        LA:{
+            bg:'#FFECF5',
+            color:'#E03177',
+            darkBg:'#AE1955',
+            darkColor:'rgba(255, 255, 255, 0.64)',
+            darkBorder:'rgba(255, 255, 255, 0.08)',
+            darkGreenBg:'#FFECF5',
+            darkGreenColor:'#E03177',
+            darkGreenBorder:'#FFECF5'
+        },
+        LB:{
+            bg:'#FFE8E8',
+            color:'#CD2B31',
+            darkBg:'#8F2025',
+            darkColor:'rgba(255, 255, 255, 0.64)',
+            darkBorder:'rgba(255, 255, 255, 0.08)',
+            darkGreenBg:'#FFE8E8',
+            darkGreenColor:'#CD2B31',
+            darkGreenBorder:'#FFE8E8'
+        },
+        LC:{
+            bg:'#DFE4E2',
+            color:'#4A524E',
+            border:'rgba(0, 0, 0, 0.08)',
+            darkBg:'#4A524E',
+            darkColor:'rgba(255, 255, 255, 0.64)',
+            darkBorder:'rgba(255, 255, 255, 0.08)',
+            darkGreenBg:'#DFE4E2',
+            darkGreenColor:'#4A524E',
+            darkGreenBorder:'rgba(0, 0, 0, 0.08)'
+        },
+        LD:{
+            bg:'#C1C5CD',
+            color:'#504F57',
+            darkBg:'#2F3742',
+            darkColor:'rgba(255, 255, 255, 0.64)',
+            darkBorder:'rgba(255, 255, 255, 0.08)',
+            darkGreenBg:'#C1C5CD',
+            darkGreenColor:'#504F57',
+            darkGreenBorder:'#C1C5CD'
+        }
+      },
+      sentenceLengthType:{
+        '1-5':{
+            color: '#1C2129',
+            dark: '#fff'
+        },
+        '6-10':{
+            color: '#1C2129',
+            dark: '#fff'
+        },
+        '11-15':{
+            color: '#1C2129',
+            dark: '#fff'
+        },
+        '16-20':{
+            color: '#ED5F00',
+            dark: '#ED5F00'
+        },
+        '21-25':{
+            color: '#ED5F00',
+            dark: '#ED5F00'
+        },
+        '26-30':{
+            color: '#ED5F00',
+            dark: '#ED5F00'
+        },
+        '31-35':{
+            color: '#D23197',
+            dark: '#D23197'
+        },
+        '36-40':{
+            color: '#D23197',
+            dark: '#D23197'
+        },
+        '41-45':{
+            color: '#D23197',
+            dark: '#D23197'
+        },
+        '45+':{
+            color: '#FF0000',
+            dark: '#FF0000'
+        }
+      },
+      tabsIndex: 1,
+      selectSentenceType: [], //勾选的要显示的句子长度类型
+      selectSentenceIdList: ['i21a160966_D1AnUDT3','i21a160966_Gw6nMSGa'], // 勾选的药显示的句子id
+    };
+  },
+  computed: {
+  },
+  watch: {},
+  //方法集合
+  methods: {
+    getCurTime(curTime) {
+      this.curTime = curTime * 1000;
+    },
+    handleData() {
+      let resArr = [];
+      let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
+      let sentLenDistributeItems = articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo&&articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems?articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems:[]
+      let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
+      for(let i=0;i<leg+1;i++){
+        let obj = {
+            wordsList: [],
+            timeList: [],
+        }
+        resArr.push(obj)
+      }
+      articleInfo.art_corpus_data.sentList.forEach((item,index) => {
+        let sententLenType = ''
+        for(let i=0; i<sentLenDistributeItems.length; i++){
+            if(sentLenDistributeItems[i].sentIds.indexOf(item.id)>-1){
+                sententLenType = sentLenDistributeItems[i].rangeInfo
+                break
+            }
+        }
+        item.tokens.forEach((items,indexs)=>{
+            let obj = {
+                sent_id:item.id,
+                sno: item.sno-1,
+                pno: item.pno,
+                text: item.text,
+                tokens: items,
+                wIndex: indexs,
+                isShow: this.enFhList.indexOf(items[2])==-1,
+                marginRight: indexs===item.tokens.length-1,
+                sententLenType: sententLenType
+            }
+            resArr[item.pno].wordsList.push(obj)
+        })
+        resArr[item.pno].timeList.push(articleInfo.art_sound_srt_data.sents[index])
+      });
+      this.resArr = resArr;
+    },
+    changeShow(){
+        this.showSearch = !this.showSearch
+    },
+    
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.articleInfo) {
+      this.handleData();
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.NNPE-ArticleView {
+  width: 100%;
+  .nnpe-article-author{
+      margin: 24px 0;
+  }
+  h2{
+    display: flex;
+    flex-flow: wrap;
+    &.sentActive {
+        background: rgba(24, 144, 255, 0.1);
+    }
+    &.overActive {
+        background: rgba(0, 0, 0, 0.06);
+    }
+    .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;
+    // border-top: 1px solid rgba(0, 0, 0, 0.1);
+    :last-child {
+      :last-child.wordsList-box {
+        padding-bottom: 40px;
+      }
+    }
+    .wordsList-box {
+      flex: 1;
+      padding: 6px 0 12px 0;
+      .nnpe-sentence-box {
+        display: flex;
+        flex-flow: wrap;
+      }
+      > img {
+        max-width: 50%;
+        display: block;
+        padding: 16px 0;
+        margin: 0 auto;
+      }
+    }
+  }
+  .NNPE-detail {
+    clear: both;
+    overflow: hidden;
+    display: flex;
+    .NNPE-words {
+      float: left;
+      padding: 0;
+      &.noPadding{
+          padding:0;
+      }
+      &.sentActive {
+        background: rgba(24, 144, 255, 0.1);
+      }
+      &.overActive {
+        background: rgba(0, 0, 0, 0.06);
+      }
+      &.textLeft {
+        text-align: left;
+      }
+      &.textCenter {
+        text-align: center;
+      }
+      > span {
+        float: left;
+        cursor: pointer;
+        &.NNPE-chs {
+          //   font-size: 24px;
+          font-family: 'Smartisan';
+          line-height: 150%;
+          color: #000000;
+          &.wordActive {
+            color: #175DFF !important;
+          }
+          &.marginRight{
+            padding: 0 3px;
+          }
+          &.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;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.audio-box{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.aduioLine-box{
+    width: 516px;
+    height: 48px;
+    background: #FFFFFF;
+    border: 1px solid #EBEBEB;
+    border-radius: 30px;
+    display: flex;
+    align-items: center;
+    padding: 8px 24px;
+    .wrapper{
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+        color: #175DFF;
+        margin-left: 8px;
+    }
+    .Audio{
+        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;
+    }
+}
+</style>

src/views/bookShelf/components/NormalModel.vue

@@ -182,13 +182,11 @@
 
 <script>
 import AudioLine from "@/components/common/AudioLine.vue"
-import MagazineVideo from "./MagazineVideo.vue"
 export default {
   name: "ArticleView",
   props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
   components: {
     AudioLine,
-    MagazineVideo
   },
   data() {
     return {