文章细节

src/icons/svg/readed.svg

@@ -1,6 +1,6 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2553_100312)">
-<path d="M8.00065 14.6668C4.31875 14.6668 1.33398 11.682 1.33398 8.00016C1.33398 4.31826 4.31875 1.3335 8.00065 1.3335C11.6825 1.3335 14.6673 4.31826 14.6673 8.00016C14.6673 11.682 11.6825 14.6668 8.00065 14.6668ZM8.00065 13.3335C10.9462 13.3335 13.334 10.9457 13.334 8.00016C13.334 5.05464 10.9462 2.66683 8.00065 2.66683C5.05513 2.66683 2.66732 5.05464 2.66732 8.00016C2.66732 10.9457 5.05513 13.3335 8.00065 13.3335ZM7.33572 10.6668L4.50731 7.83843L5.45012 6.89556L7.33572 8.78123L11.107 5.00998L12.0498 5.95278L7.33572 10.6668Z" fill="#175DFF"/>
+<path d="M8.00065 14.6668C4.31875 14.6668 1.33398 11.682 1.33398 8.00016C1.33398 4.31826 4.31875 1.3335 8.00065 1.3335C11.6825 1.3335 14.6673 4.31826 14.6673 8.00016C14.6673 11.682 11.6825 14.6668 8.00065 14.6668ZM8.00065 13.3335C10.9462 13.3335 13.334 10.9457 13.334 8.00016C13.334 5.05464 10.9462 2.66683 8.00065 2.66683C5.05513 2.66683 2.66732 5.05464 2.66732 8.00016C2.66732 10.9457 5.05513 13.3335 8.00065 13.3335ZM7.33572 10.6668L4.50731 7.83843L5.45012 6.89556L7.33572 8.78123L11.107 5.00998L12.0498 5.95278L7.33572 10.6668Z" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_2553_100312">

src/views/bookShelf/articleDetail.vue

@@ -26,27 +26,27 @@
                 <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>
-                        <!-- <span :class="['oppose',oppose?'active':'']" @click="changeStatus('oppose')"><svg-icon icon-class="oppose"></svg-icon></span> -->
-                    </div>
-                    <div class="center">
-                        <el-button type="text" class="btn-left" :class="[activeArticleIndex===0?'not-allow':'']" @click="handlePage('-')"><svg-icon icon-class="arrow-left-line"></svg-icon>上一篇</el-button>
-                        <el-button type="text" class="btn-right" :class="[activeArticleIndex===issueChnTanList.length-1?'not-allow':'']" @click="handlePage('+')">下一篇<svg-icon icon-class="arrow-right-line"></svg-icon></el-button>
-                    </div>
-                    <div class="right">
-                        <template v-if="support">
-                            <span class="support" @click="handleReadArticle"><svg-icon icon-class="no-read"></svg-icon>标记为已读</span>
-                        </template>
-                        <template v-else>
-                            <span class="support readed"><svg-icon icon-class="readed"></svg-icon>已读</span>
-                        </template>
-                    </div>
+            </div>
+            <div class="article-btn" v-if="this.$route.query.iss_id&&menuType!=='practice'" :style="{background:bgColorList[activeIndex].glossaryBg}">
+                <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>
+                    <!-- <span :class="['oppose',oppose?'active':'']" @click="changeStatus('oppose')"><svg-icon icon-class="oppose"></svg-icon></span> -->
+                </div>
+                <div class="center">
+                    <el-button type="text" class="btn-left" :class="[activeArticleIndex===0?'not-allow':'']" @click="handlePage('-')" :style="{color: bgColorList[activeIndex].btnColor}"><svg-icon icon-class="arrow-left-line"></svg-icon>上一篇</el-button>
+                    <el-button type="text" class="btn-right" :class="[activeArticleIndex===issueChnTanList.length-1?'not-allow':'']" @click="handlePage('+')" :style="{color: bgColorList[activeIndex].btnColor}">下一篇<svg-icon icon-class="arrow-right-line"></svg-icon></el-button>
+                </div>
+                <div class="right">
+                    <template v-if="support">
+                        <span class="support" @click="handleReadArticle" :style="{color: bgColorList[activeIndex].btnColor}"><svg-icon icon-class="no-read"></svg-icon>标记为已读</span>
+                    </template>
+                    <template v-else>
+                        <span class="support readed" :style="{color: bgColorList[activeIndex].btnColor}"><svg-icon icon-class="readed" :style="{color: bgColorList[activeIndex].btnColor}"></svg-icon>已读</span>
+                    </template>
                 </div>
             </div>
             <!-- 词汇表 -->
-            <div class="glossary-box" :style="{borderTopColor:bgColorList[activeIndex].contentBg}" v-if="menuType!=='practice'">
+            <div class="glossary-box" v-if="menuType!=='practice'">
                 <div class="title" :style="{color:bgColorList[activeIndex].glossaryTitle}">
                     <h2>词汇表</h2>
                     <a @click="showGlossary=!showGlossary">{{showGlossary?'收起':'展开'}}</a>
@@ -69,44 +69,49 @@
                 </el-collapse-transition>
                 <div class="title" :style="{color:bgColorList[activeIndex].glossaryTitle,marginTop:'40px'}">
                     <h2>详细统计</h2>
+                    <a @click="showWordInfo=!showWordInfo">{{showWordInfo?'收起':'展开'}}</a>
                 </div>
-                <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">词汇信息</h4>
-                <div class="word-info" v-if="articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo">
-                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
-                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">文章长度</label>
-                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wc}}</span>
-                    </div>
-                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
-                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">词汇数量</label>
-                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wdc}}</span>
-                    </div>
-                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
-                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">平均词长</label>
-                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgWordLen}}</span>
-                    </div>
-                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
-                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">词汇密度</label>
-                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.vocabDensity}}</span>
-                    </div>
-                    <div :style="{background:bgColorList[activeIndex].glossaryBg}">
-                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">词汇难度</label>
-                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.vocabHardLevel}}</span>
+                <el-collapse-transition >
+                    <div v-if="showWordInfo">
+                        <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">词汇信息</h4>
+                        <div class="word-info" v-if="articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo">
+                            <div :style="{background:bgColorList[activeIndex].glossaryBg}">
+                                <label :style="{color:bgColorList[activeIndex].statisticTitle}">文章长度</label>
+                                <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wc}}</span>
+                            </div>
+                            <div :style="{background:bgColorList[activeIndex].glossaryBg}">
+                                <label :style="{color:bgColorList[activeIndex].statisticTitle}">词汇数量</label>
+                                <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.wdc}}</span>
+                            </div>
+                            <div :style="{background:bgColorList[activeIndex].glossaryBg}">
+                                <label :style="{color:bgColorList[activeIndex].statisticTitle}">平均词长</label>
+                                <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgWordLen}}</span>
+                            </div>
+                            <div :style="{background:bgColorList[activeIndex].glossaryBg}">
+                                <label :style="{color:bgColorList[activeIndex].statisticTitle}">词汇密度</label>
+                                <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.vocabDensity}}</span>
+                            </div>
+                            <div :style="{background:bgColorList[activeIndex].glossaryBg}">
+                                <label :style="{color:bgColorList[activeIndex].statisticTitle}">词汇难度</label>
+                                <span :style="{color:bgColorList[activeIndex].statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.vocabHardLevel}}</span>
+                            </div>
+                        </div>
+                        <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">词汇分布</h4>
+                        <div class="echarts-box" v-if="articleInfo&&articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo&&articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems">
+                            <ul class="echarts-type">
+                                <li v-for="(itemE,indexE) in articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems" :key="indexE"
+                                    @mouseover="gaolangbzt(indexE, 'shanxing_main')"
+                                    @mouseout="closegaolangbzt(indexE, 'shanxing_main')"
+                                    :style="{background:bgColorList[activeIndex].type==='white'?itemE.bg:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenBg:itemE.darkBg,color:bgColorList[activeIndex].type==='white'?itemE.color:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenColor:itemE.darkColor,borderColor:bgColorList[activeIndex].type==='white'?itemE.border:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenBorder:itemE.darkBorder}">
+                                    <span class="name">{{itemE.vlCnName}}</span>
+                                    <span class="number">{{itemE.value}}</span>
+                                    <span class="percent">{{itemE.vocabPercentStr}}</span>
+                                </li>
+                            </ul>
+                            <div id="shanxing_main" style="height: 360px"></div>
+                        </div>
                     </div>
-                </div>
-                <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">词汇分布</h4>
-                <div class="echarts-box" v-if="articleInfo&&articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo&&articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems">
-                    <ul class="echarts-type">
-                        <li v-for="(itemE,indexE) in articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems" :key="indexE"
-                            @mouseover="gaolangbzt(indexE, 'shanxing_main')"
-                            @mouseout="closegaolangbzt(indexE, 'shanxing_main')"
-                            :style="{background:bgColorList[activeIndex].type==='white'?itemE.bg:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenBg:itemE.darkBg,color:bgColorList[activeIndex].type==='white'?itemE.color:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenColor:itemE.darkColor,borderColor:bgColorList[activeIndex].type==='white'?itemE.border:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenBorder:itemE.darkBorder}">
-                            <span class="name">{{itemE.vlCnName}}</span>
-                            <span class="number">{{itemE.value}}</span>
-                            <span class="percent">{{itemE.vocabPercentStr}}</span>
-                        </li>
-                    </ul>
-                    <div id="shanxing_main" style="height: 360px"></div>
-                </div>
+                </el-collapse-transition>
             </div>
             <!-- 右侧菜单 -->
             <div class="mene-right" :style="{background:bgColorList[activeIndex].contentInnerBg,borderColor:bgColorList[activeIndex].glossaryBg}">
@@ -493,6 +498,7 @@ export default {
         ],
         activeIndex:0, // 选择主题色的索引
         showGlossary: true, // 是否展开词汇表
+        showWordInfo: true,
         wordList:[
             {
                 src: '.',
@@ -686,6 +692,18 @@ export default {
     }
   },
   watch: {
+    showWordInfo:{
+      handler(val, oldVal) {
+        const _this = this;
+        if (val) {
+            setTimeout(() => {
+                _this.inityuan()
+            }, 100);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    }
   },
   methods: {
     inityuan() {
@@ -1297,7 +1315,7 @@ export default {
         padding: 120px 100px 40px 100px;
     }
     .glossary-box{
-        border-top: 1px solid #F2F3F5;
+        // border-top: 1px solid #F2F3F5;
         padding: 40px;
         .title{
             display: flex;
@@ -1383,6 +1401,8 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 16px;
+    background: #F7F8FA;
     .right{
         width: 150px;
         margin-right: -8px;

src/views/bookShelf/components/NewWordList.vue

@@ -254,24 +254,24 @@ ul{
         display: flex;
         margin: 1px 0;
         border-radius: 4px;
-        &:hover{
-            background: #FFFFFF;
-        }
-        &.li-darkGreen{
-            &:hover{
-                background: #ECEFED;
-            }
-        }
-        &.li-darkBlue{
-            &:hover{
-                background: #4E5969;
-            }
-        }
-        &.li-armyGreen{
-            &:hover{
-                background: #66736D;
-            }
-        }
+        // &:hover{
+        //     background: #FFFFFF;
+        // }
+        // &.li-darkGreen{
+        //     &:hover{
+        //         background: #ECEFED;
+        //     }
+        // }
+        // &.li-darkBlue{
+        //     &:hover{
+        //         background: #4E5969;
+        //     }
+        // }
+        // &.li-armyGreen{
+        //     &:hover{
+        //         background: #66736D;
+        //     }
+        // }
         .icon-voice{
             width: 24px;
             height: 24px;
@@ -279,6 +279,10 @@ ul{
             color: #4E5969;
             margin-right: 8px;
             cursor: pointer;
+            border-radius: 20px;
+            &:hover{
+                background: #E5E6EB;
+            }
         }
         .xuhao{
             min-width: 22px;
@@ -300,8 +304,13 @@ ul{
             width: 24px;
             height: 24px;
             padding: 4px;
+            font-size: 16px;
             margin: 0 0 0 8px;
             cursor: pointer;
+            border-radius: 20px;
+            &:hover{
+                background: #E5E6EB;
+            }
             &.active{
               color: #F2555A;  
             }

src/views/bookShelf/components/PhraseList.vue

@@ -175,24 +175,24 @@ ul{
         display: flex;
         margin: 1px 0;
         border-radius: 4px;
-        &:hover{
-            background: #FFFFFF;
-        }
-        &.li-darkGreen{
-            &:hover{
-                background: #ECEFED;
-            }
-        }
-        &.li-darkBlue{
-            &:hover{
-                background: #4E5969;
-            }
-        }
-        &.li-armyGreen{
-            &:hover{
-                background: #66736D;
-            }
-        }
+        // &:hover{
+        //     background: #FFFFFF;
+        // }
+        // &.li-darkGreen{
+        //     &:hover{
+        //         background: #ECEFED;
+        //     }
+        // }
+        // &.li-darkBlue{
+        //     &:hover{
+        //         background: #4E5969;
+        //     }
+        // }
+        // &.li-armyGreen{
+        //     &:hover{
+        //         background: #66736D;
+        //     }
+        // }
         .xuhao{
             min-width: 22px;
             display: block;
@@ -215,6 +215,10 @@ ul{
             padding: 4px;
             margin: 0 0 0 8px;
             cursor: pointer;
+            border-radius: 20px;
+            &:hover{
+                background: #E5E6EB;
+            }
             &.active{
               color: #F2555A;  
             }

src/views/personalCenter/components/WordCard.vue

@@ -969,6 +969,8 @@ export default {
     }
     .list {
         margin-top: 16px;
+        max-height: 300px;
+        overflow: auto;
         .one {
             margin-bottom: 24px;
             word-break: break-word;