|
|
@@ -0,0 +1,398 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="NNPE-ArticleView" v-if="articleInfo">
|
|
|
+ <template v-if="resArr[0]&&resArr[0].wordsList">
|
|
|
+ <h2>
|
|
|
+ <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':'',
|
|
|
+ itemR.isExplain||itemR.explainNumber?'hasExplain':''
|
|
|
+ ]">
|
|
|
+ <template v-if="itemR.isShow">
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ itemR.type,itemR.tokens[9]===''?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':'',
|
|
|
+ ]"
|
|
|
+ >{{ 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[8]===''?'marginLeft':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',
|
|
|
+ ]"
|
|
|
+ >{{ 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">
|
|
|
+ <template v-if="index!==0">
|
|
|
+ <div class="nnpe-sentence-box">
|
|
|
+ <div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :class="[pItem.isExplain||pItem.explainNumber?'hasExplain':'']">
|
|
|
+ <template v-if="pItem.isShow">
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'NNPE-words',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ pItem.type,pItem.tokens[9]===''?'marginRight':'',pItem.highIndex?'fontWeight':'',pItem.marginRigh?'marginSingleRight':''
|
|
|
+ ]"
|
|
|
+ :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
|
|
|
+ >{{ 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].type,item.wordsList[pIndex + 1].tokens[8]===''?'marginLeft':'',item.wordsList[pIndex + 1].highIndex?'fontWeight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':''
|
|
|
+ ]"
|
|
|
+ :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
|
|
|
+ >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </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: {}, // 文章图片
|
|
|
+ tokensArr: [],
|
|
|
+ sentenceList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isPlaying: function () {
|
|
|
+ let playing = false;
|
|
|
+ if (this.$refs.audioLine) {
|
|
|
+ playing = this.$refs.audioLine.audio.isPlaying;
|
|
|
+ }
|
|
|
+ return playing;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ getCurTime(curTime) {
|
|
|
+ this.curTime = curTime * 1000;
|
|
|
+ },
|
|
|
+ handleData() {
|
|
|
+ let explainNumber = 1
|
|
|
+ let resArr = [];
|
|
|
+ let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
|
|
|
+ this.sentenceList = articleInfo.art_corpus_data?articleInfo.art_corpus_data.sentList:[]
|
|
|
+ let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
|
|
|
+ this.sentenceList.forEach((item,index) => {
|
|
|
+ let flag = ''
|
|
|
+ item.StyleTokens = []
|
|
|
+ item.tokens.forEach((items,indexs)=>{
|
|
|
+ let obj = {
|
|
|
+ tokens: items,
|
|
|
+ marginRight: indexs===item.tokens.length-1
|
|
|
+ }
|
|
|
+ item.StyleTokens.push(obj)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ for(let i=0;i<leg+1;i++){
|
|
|
+ let obj = {
|
|
|
+ wordsList: []
|
|
|
+ }
|
|
|
+ resArr.push(obj)
|
|
|
+ }
|
|
|
+ this.sentenceList.forEach((item,index) => {
|
|
|
+ item.StyleTokens.forEach((items,indexs)=>{
|
|
|
+ items.isShow = this.enFhList.indexOf(items.tokens[2])==-1
|
|
|
+ resArr[item.pno].wordsList.push(items)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.resArr = resArr;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前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;
|
|
|
+ }
|
|
|
+ .hasExplain{
|
|
|
+ min-width: 3px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .explain-sub{
|
|
|
+ position: absolute;
|
|
|
+ bottom: -25px;
|
|
|
+ right: -10px;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ img{
|
|
|
+ width: 14px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ .word-box{
|
|
|
+ position: relative;
|
|
|
+ &.hasExplain{
|
|
|
+ min-width: 3px;
|
|
|
+ }
|
|
|
+ .explain-sub{
|
|
|
+ position: absolute;
|
|
|
+ bottom: -5px;
|
|
|
+ right: -10px;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ img{
|
|
|
+ width: 14px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > 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);
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ float: left;
|
|
|
+ cursor: pointer;
|
|
|
+ &.NNPE-chs {
|
|
|
+ // font-size: 24px;
|
|
|
+ font-family: 'Smartisan';
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ padding: 0 3px;
|
|
|
+ &.wordActive {
|
|
|
+ color: #175DFF !important;
|
|
|
+ }
|
|
|
+ &.marginRight{
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+ &.marginLeft{
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+ &.marginSingleRight{
|
|
|
+ padding: 0 3px 0 0;
|
|
|
+ }
|
|
|
+ &.fontWeight{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.newWord{
|
|
|
+ color: #3459D2 !important;
|
|
|
+ }
|
|
|
+ &.phrase{
|
|
|
+ color: #FF802B !important;
|
|
|
+ }
|
|
|
+ &.explain{
|
|
|
+ // color: #23C847 !important;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.padding {
|
|
|
+ padding: 0 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.audio-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .explain-video{
|
|
|
+ background: #FFB224;
|
|
|
+ border-color: #FFB224;
|
|
|
+ color: #FFFFFF;
|
|
|
+ width: 136px;
|
|
|
+ height: 48px;
|
|
|
+ padding: 0;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ border-radius: 30px;
|
|
|
+ .svg-icon{
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha