文章优化

src/components/common/AudioLine.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['Audio', mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '']">
+  <div :class="['Audio', mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '',colorObj?'Audio-'+colorObj.type:'']">
     <template v-if="type==='full'">
         <div class="full-drive" @click="PlayAudio">
             <svg-icon icon-class="Type-drive"></svg-icon>
@@ -16,10 +16,10 @@
         @click="PlayAudio"
       >
         <i class="el-icon-loading" v-if="audio.loading"></i>
-        <a class="active" v-if="audio.playing&&!audio.loading"><svg-icon icon-class="pause" className="icon-svg"></svg-icon></a>
-        <a v-if="!audio.playing&&!audio.loading"><svg-icon icon-class="play-fill" className="icon-svg"></svg-icon></a>
+        <a class="active" v-if="audio.playing&&!audio.loading" :style="{background:audio.playing?colorObj.audioBtnBg?colorObj.audioBtnBg:'':'none'}"><svg-icon icon-class="pause" className="icon-svg" :style="{color:colorObj?colorObj.audioBtnColor:''}"></svg-icon></a>
+        <a v-if="!audio.playing&&!audio.loading" :style="{background:audio.playing?colorObj.audioBtnBg?colorObj.audioBtnBg:'':'none'}"><svg-icon icon-class="play-fill" className="icon-svg" :style="{color:colorObj?colorObj.audioBtnColor:''}"></svg-icon></a>
       </div>
-      <span class="time-box"
+      <span class="time-box" :style="{color:colorObj?colorObj.audioTimeColor:''}"
         ><template v-if="audio.playing">-</template
         >{{
         audio.maxTime
@@ -29,7 +29,7 @@
       >
       <el-slider
         v-model="playValue"
-        :style="{ width: sliderWidth + 'px', height: '2px' }"
+        :style="{ width: sliderWidth + 'px', height: '2px'}"
         :format-tooltip="formatProcessToolTip"
         @change="changeCurrentTime"
       />
@@ -40,7 +40,7 @@
         @command="handleSpeed"
       >
         <span class="el-dropdown-link">
-            <span style="color: #2F3742; cursor: pointer; width: 35px; display:block; text-align: center;">{{playbackRateValue}}</span>
+            <span :style="{color: colorObj.audioSpeedColor?colorObj.audioSpeedColor:'#2F3742', cursor: 'pointer', width: '35px', display:'block', textAlign: 'center'}">{{playbackRateValue}}</span>
         </span>
         <el-dropdown-menu slot="dropdown">
             <el-dropdown-item :command="i" v-for="i in 5" :key="i" 
@@ -50,7 +50,7 @@
       </el-dropdown>
       <el-dropdown trigger="click" placement="top" szie="mini">
         <span class="el-dropdown-link">
-            <svg-icon icon-class="voice" className="icon-voice"></svg-icon>
+            <svg-icon icon-class="voice" className="icon-voice" :style="{color:colorObj?colorObj.audioBtnColor:''}"></svg-icon>
         </span>
         <el-dropdown-menu slot="dropdown">
             <el-slider
@@ -97,7 +97,8 @@ export default {
     "bg",
     "audioId",
     "type",
-    "borderRadius"
+    "borderRadius",
+    "colorObj"
   ],
   data() {
     // 这里存放数据
@@ -486,5 +487,29 @@ export default {
   .el-dropdown{
     margin: 0 8px;
   }
+  &-darkGreen{
+    .el-slider__bar {
+        background: #299772;
+    }
+    .el-slider__button {
+        background: #299772;
+    }
+  }
+  &-darkBlue{
+    .el-slider__bar {
+        background: #5373E7;
+    }
+    .el-slider__button {
+        background: #5373E7;
+    }
+  }
+  &-armyGreen{
+    .el-slider__bar {
+        background: #30A47D;
+    }
+    .el-slider__button {
+        background: #30A47D;
+    }
+  }
 }
 </style>

src/views/bookShelf/articleDetail.vue

@@ -8,7 +8,7 @@
             <p class="article-title">{{articleInfo.art_title}}</p>
         </div>
         <div class="navBar-right">
-            <el-input-number class="article-fontsize" v-model="wordFontsize" :step="2" step-strictly :min="12" :max="24" :style="{borderColor:bgColorList[activeIndex].boxBorder}"></el-input-number>
+            <el-input-number class="article-fontsize" v-model="wordFontsize" :step="2" step-strictly :min="12" :max="28" :style="{borderColor:bgColorList[activeIndex].boxBorder}"></el-input-number>
             <ul class="article-color" :style="{borderColor:bgColorList[activeIndex].boxBorder}">
                 <li :class="['color-item',activeIndex===indexC?'active':'']" v-for="(itemC,indexC) in bgColorList" :key="indexC" @click="handleChangeBgColor(indexC)" :style="{borderColor:activeIndex===indexC?itemC.border_active:''}">
                     <a :style="{background:itemC.border,borderColor:activeIndex===indexC?itemC.borderColor:''}"></a>
@@ -20,12 +20,12 @@
         <div class="artricle-inner" :style="{background:bgColorList[activeIndex].contentInnerBg}">
             <!-- 文章 -->
             <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" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></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" :likeSentencelist="likeSentencelist"></phrase-model>
-                <practice-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='practice'" :articleInfo="articleInfo" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></practice-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" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></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" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></lexical-type>
-                <notes-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='notebook'" :articleInfo="articleInfo" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></notes-model>
+                <normal-model :titleFontsize="48" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='original'" :articleInfo="articleInfo" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></normal-model>
+                <phrase-model :titleFontsize="48" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='newWord'" :articleInfo="articleInfo" :likePhraseList="likePhraseList" :likeWord="likeWordList" @changeLike="changeLike" :likeSentencelist="likeSentencelist"></phrase-model>
+                <practice-model :titleFontsize="48" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='practice'" :articleInfo="articleInfo" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></practice-model>
+                <inner-text-search :titleFontsize="48" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='search'" :articleInfo="articleInfo" ref="innerTextSearchs" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></inner-text-search>
+                <lexical-type :titleFontsize="48" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='filtrate'" :articleInfo="articleInfo" ref="lexicalType" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></lexical-type>
+                <notes-model :titleFontsize="48" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='notebook'" :articleInfo="articleInfo" :likeSentencelist="likeSentencelist" :likeWord="likeWordList"></notes-model>
                 <div class="article-btn" v-if="this.$route.query.iss_id&&menuType!=='practice'">
                     <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>
@@ -226,7 +226,7 @@ export default {
     return{
         config: this.$route.query.headerConfig?decodeURIComponent(this.$route.query.headerConfig):'',
         LoginNavIndex: 0,
-        wordFontsize: 18, // 文章文字大小
+        wordFontsize: 22, // 文章文字大小
         bgColorList:[
             {
                 type:'white',
@@ -289,7 +289,11 @@ export default {
                 statisticValue:'#3459D2',
                 menuBg:'#EEF3FF',
                 audiobg:'#FFFFFF',
-                audioBorder:'#EBEBEB'
+                audioBorder:'#EBEBEB',
+                audioBtnColor: '#175DFF',
+                audioBtnBg: '#EEF3FF',
+                audioTimeColor: '#2F3742',
+                audioSpeedColor: '#2F3742'
             },
             {
                 type:'darkGreen',
@@ -350,7 +354,11 @@ export default {
                 statisticValue:'#299772',
                 menuBg:'#E9F7F2',
                 audiobg:'#ECEFED',
-                audioBorder:'#DFE4E2'
+                audioBorder:'#DFE4E2',
+                audioBtnColor: '#299772',
+                audioBtnBg: '#DFE4E2',
+                audioTimeColor: '#393F3C',
+                audioSpeedColor: '#299772'
             },
             {
                 type:'darkBlue',
@@ -411,7 +419,11 @@ export default {
                 statisticValue:'#5373E7',
                 menuBg:'#EEF3FF',
                 audiobg:'#3E4855',
-                audioBorder:'#2F3742'
+                audioBorder:'#2F3742',
+                audioBtnColor: '#D0D3D9',
+                audioBtnBg: '#4E5969',
+                audioTimeColor: '#D0D3D9',
+                audioSpeedColor: '#D0D3D9'
             },
             {
                 type:'armyGreen',
@@ -472,7 +484,11 @@ export default {
                 statisticValue:'#30A47D',
                 menuBg:'#EEF3FF',
                 audiobg:'#4A524E',
-                audioBorder:'#393F3C'
+                audioBorder:'#393F3C',
+                audioBtnColor: '#D7DCDA',
+                audioBtnBg: '#66736D',
+                audioTimeColor: '#D7DCDA',
+                audioSpeedColor: '#D7DCDA'
             }
         ],
         activeIndex:0, // 选择主题色的索引

src/views/bookShelf/components/InnerTextSearch.vue

@@ -3,7 +3,7 @@
   <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'}" 
+            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:titleFontsize+'px',lineHeight:(titleFontsize+8)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}" 
             :class="[
                     itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':''
                 ]">
@@ -32,7 +32,7 @@
             </span>
         </h2>
     </template>
-    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
+    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:'14px',lineHeight:'22px',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">
@@ -48,8 +48,9 @@
                 :getCurTime="getCurTime"
                 ref="audioLine"
                 :mp3Source="'mp3'"
+                :colorObj="colorObj"
             />
-            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen"></svg-icon>
+            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen" :style="{color: colorObj.audioBtnColor}"></svg-icon>
         </div>
     </div>
     <template v-if="resArr.length > 0">

src/views/bookShelf/components/LexicalType.vue

@@ -3,7 +3,7 @@
   <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'}" 
+            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:titleFontsize+'px',lineHeight:(titleFontsize+8)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}" 
             :class="[
                     itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':''
                 ]">
@@ -44,7 +44,7 @@
             </span>
         </h2>
     </template>
-    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
+    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:'14px',lineHeight:'22px',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">
@@ -60,8 +60,9 @@
                 :getCurTime="getCurTime"
                 ref="audioLine"
                 :mp3Source="'mp3'"
+                :colorObj="colorObj"
             />
-            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen"></svg-icon>
+            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen" :style="{color: colorObj.audioBtnColor}"></svg-icon>
         </div>
     </div>
     <template v-if="resArr.length > 0">

src/views/bookShelf/components/NormalModel.vue

@@ -23,8 +23,9 @@
                     resArr[0].wordsList[0].pno == paraIndex && resArr[0].wordsList[0].sno == sentIndex
                         ? 'overActive'
                         : '',
+                    'NNPE-words-'+colorObj.type
                 ]">
-            <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'}" 
+            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:titleFontsize+'px',lineHeight:(titleFontsize+8)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}" 
             :class="[
                     isPlaying &&
                     resArr[0].timeList &&
@@ -59,7 +60,7 @@
                 </span>
         </h2>
     </template>
-    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
+    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:'14px',lineHeight:'22px',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">
@@ -75,12 +76,13 @@
                 :getCurTime="getCurTime"
                 ref="audioLine"
                 :mp3Source="'mp3'"
+                :colorObj="colorObj"
             />
-            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen"></svg-icon>
+            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen" :style="{color: colorObj.audioBtnColor}"></svg-icon>
         </div>
     </div>
     <template v-if="resArr.length > 0">
-      <div class="table-box">
+      <div class="table-box" :class="['table-box-'+colorObj.type]">
         <div
           :class="['NNPE-detail']"
           v-for="(item, index) in resArr"
@@ -395,6 +397,30 @@ export default {
     .wordActive {
         color: #175DFF !important;
     }
+    &.NNPE-words-darkGreen{
+        .wordActive {
+            color: #299772 !important;
+        }
+        &.sentActive {
+            background: #ECEFED !important;
+        }
+    }
+    &.NNPE-words-darkBlue{
+        .wordActive {
+            color: #5373E7 !important;
+        }
+        &.sentActive {
+            background:#1C2129 !important;
+        }
+    }
+    &.NNPE-words-armyGreen{
+        .wordActive {
+            color: #30A47D !important;
+        }
+        &.sentActive {
+            background: #2A2F2C !important;
+        }
+    }
   }
   .table-box {
     // background: #f7f7f7;
@@ -471,6 +497,54 @@ export default {
     }
   }
 }
+.table-box-darkGreen{
+    .NNPE-detail {
+        .NNPE-words {
+            &.sentActive {
+                background: #ECEFED !important;
+            }
+            > span {
+                &.NNPE-chs {
+                    &.wordActive {
+                        color: #299772 !important;
+                    }
+                }
+            }
+        }
+    }
+}
+.table-box-darkBlue{
+    .NNPE-detail {
+        .NNPE-words {
+            &.sentActive {
+                background: #1C2129 !important;
+            }
+            > span {
+                &.NNPE-chs {
+                    &.wordActive {
+                        color: #5373E7 !important;
+                    }
+                }
+            }
+        }
+    }
+}
+.table-box-armyGreen{
+    .NNPE-detail {
+        .NNPE-words {
+            &.sentActive {
+                background: #2A2F2C !important;
+            }
+            > span {
+                &.NNPE-chs {
+                    &.wordActive {
+                        color: #30A47D !important;
+                    }
+                }
+            }
+        }
+    }
+}
 .audio-box{
     display: flex;
     align-items: center;

src/views/bookShelf/components/NotesModel.vue

@@ -4,7 +4,7 @@
     <div class="NNPE-ArticleView" v-if="resArr">
         <template v-if="resArr[0]">
             <h2>
-                <span :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}">
+                <span :style="{color:colorObj.titleColor,fontSize:titleFontsize+'px',lineHeight:(titleFontsize+8)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}">
                         <span
                             class="NNPE-chs" v-html="resArr[0].text" @mousedown="mouseupClick(resArr[0],0)"
                             ></span
@@ -13,7 +13,7 @@
                 </span>
             </h2>
         </template>
-        <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
+        <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:'14px',lineHeight:'22px',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">
@@ -29,8 +29,9 @@
                     :getCurTime="getCurTime"
                     ref="audioLine"
                     :mp3Source="'mp3'"
+                    :colorObj="colorObj"
                 />
-                <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen"></svg-icon>
+                <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen" :style="{color: colorObj.audioBtnColor}"></svg-icon>
             </div>
         </div>
         <template v-if="resArr.length > 0">

src/views/bookShelf/components/PhraseModel.vue

@@ -3,7 +3,7 @@
   <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'}" 
+            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:titleFontsize+'px',lineHeight:(titleFontsize+8)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}" 
             :class="[
                     itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':'',
                     itemR.isExplain||itemR.explainNumber?'hasExplain':''
@@ -45,7 +45,7 @@
             </span>
         </h2>
     </template>
-    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
+    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:'14px',lineHeight:'22px',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">
@@ -61,8 +61,9 @@
                 :getCurTime="getCurTime"
                 ref="audioLine"
                 :mp3Source="'mp3'"
+                :colorObj="colorObj"
             />
-            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen"></svg-icon>
+            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen" :style="{color: colorObj.audioBtnColor}"></svg-icon>
         </div>
     </div>
     <template v-if="resArr.length > 0">

src/views/bookShelf/components/PracticeModel.vue

@@ -3,7 +3,7 @@
   <div class="NNPE-ArticleView" v-if="articleInfo">
     <template v-if="resArr&&resArr.wordsList&&resArr.wordsList[0]&&resArr.wordsList[0][0]&&resArr.wordsList[0][0].hasOwnProperty('pno')&&resArr.wordsList[0][0].pno===0">
         <h2 :class="['NNPE-words',]">
-            <span v-for="(itemR,indexR) in resArr.wordsList[0]" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700'}" 
+            <span v-for="(itemR,indexR) in resArr.wordsList[0]" :key="indexR" :style="{color:colorObj.titleColor,fontSize:titleFontsize+'px',lineHeight:(titleFontsize+8)+'px',marginRight:'10px',fontWeight:'700'}" 
             :class="[
                     itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':''
                 ]">
@@ -30,7 +30,7 @@
                 </span>
         </h2>
     </template>
-    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
+    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:'14px',lineHeight:'22px',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">
@@ -50,8 +50,9 @@
                 :ed="ed"
                 :showEd="showEd"
                 @emptyEd="emptyEd"
+                :colorObj="colorObj"
             />
-            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen"></svg-icon>
+            <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen" :style="{color: colorObj.audioBtnColor}"></svg-icon>
         </div>
     </div>
     <template v-if="resArr.wordsList&&resArr.wordsList.length > 0">