词云版权 分享图片宽度

public/ciyun/ciyunPrint.html

@@ -150,7 +150,7 @@
         <div class="contents">
             <div class="content-inner" style="padding: 0;width: 870px;">
                 <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" style="height: 0;overflow: hidden;">

public/ciyun/ciyunindex.html

@@ -145,7 +145,7 @@
         <div class="contents">
             <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">

src/views/bookShelf/articleDetail.vue

@@ -450,11 +450,11 @@
         <img :src="shareSrc" />
       </template>
       <template v-else>
-        <el-skeleton style="width: 240px" :loading="true" animated>
+        <el-skeleton style="width: 380px" :loading="true" animated>
           <template slot="template">
             <el-skeleton-item
               variant="image"
-              style="width: 380px; height: 532px"
+              style="width: 380px; height: 738px"
             />
           </template>
         </el-skeleton>
@@ -1992,7 +1992,7 @@ export default {
   position: fixed;
   top: 40%;
   left: 50%;
-  z-index: 9;
+  z-index: 10;
   font-size: 0;
   margin-top: -270px;
   margin-left: -214px;
@@ -2020,7 +2020,7 @@ export default {
   }
   img {
     width: 380px;
-    height: 532px;
+    height: 738px;
     border-radius: 16px;
     margin: 24px 0;
   }

src/views/bookShelf/components/ArticleInfo.vue

@@ -1,100 +1,230 @@
 <template>
-    <div class="article-info" :style="{background:colorObj.contentInnerBg}">
-        <i class="el-icon-close" @click="closeDialog" :style="{color:colorObj.sourceColor}"></i>
-        <h2 :style="{color:colorObj.titleColor}">{{articleInfo.art_corpus_data.artTitle}}</h2>
-        <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor}">
-            {{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>
-        <h4 :style="{color:colorObj.glossarySubtitle}">词汇信息</h4>
-        <div class="word-info" 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.artStatInfo.wc}}</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>
-            </div>
-            <div :style="{background:colorObj.glossaryBg}">
-                <label :style="{color:colorObj.statisticTitle}">平均词长</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgWordLen}}</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>
-            </div>
-        </div>
-        <h4 :style="{color:colorObj.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_s')"
-                    @mouseout="closegaolangbzt(indexE, 'shanxing_main_s')"
-                    :style="{background:colorObj.type==='white'?itemE.bg:colorObj.type==='darkGreen'?itemE.darkGreenBg:itemE.darkBg,color:colorObj.type==='white'?itemE.color:colorObj.type==='darkGreen'?itemE.darkGreenColor:itemE.darkColor,borderColor:colorObj.type==='white'?itemE.border:colorObj.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_s" style="height: 360px"></div>
-        </div>
-        <h4 :style="{color:colorObj.glossarySubtitle}">句法信息</h4>
-        <div class="word-info" 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.artStatInfo.sentCount}}</span>
-            </div>
-            <div :style="{background:colorObj.glossaryBg}">
-                <label :style="{color:colorObj.statisticTitle}">平均句长</label>
-                <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.longSentCount}}</span>
-            </div>
-            <div :style="{background:colorObj.glossaryBg}">
-                <label :style="{color:colorObj.statisticTitle}">长句比例</label>
-                <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.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.avgParaLen}}</span>
-            </div>
-            <div :style="{background:colorObj.glossaryBg}">
-                <label :style="{color:colorObj.statisticTitle}">平均段落句子数</label>
-                <span :style="{color:colorObj.statisticValue}">{{articleInfo.art_corpus_data.artStatInfo.avgParaSentCount}}</span>
-            </div>
-        </div>
-        <h4 :style="{color:colorObj.glossarySubtitle}">句长分布</h4>
-        <ul class="sentence-length-box" v-if="articleInfo&&articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo&&articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems">
-            <li v-for="(iteml,indexl) in articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems" :key="indexl" :style="{borderColor:colorObj.audioBorder,}">
-                <span class="l1" :style="{color:colorObj.statisticValue}">{{iteml.rangeInfo}}</span>
-                <span class="l2" :style="{color:colorObj.statisticValue}">{{iteml.count}}</span>
-                <span class="l3" :style="{color:colorObj.statisticValue}">{{iteml.percent}}%</span>
-                <p>
-                    <span class="l4" :style="{background:colorObj.statisticValue}"></span>
-                    <span class="l5" :style="{background:colorObj.statisticValue,width:iteml.percent+'%'}"></span>
-                </p>
-            </li>
-        </ul>
-        <h4 :style="{color:colorObj.glossarySubtitle}">语篇信息</h4>
-        <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.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.hmCefr}}</span>
-            </div>
-        </div>
+  <div class="article-info" :style="{ background: colorObj.contentInnerBg }">
+    <i
+      class="el-icon-close"
+      @click="closeDialog"
+      :style="{ color: colorObj.sourceColor }"
+    ></i>
+    <h2 :style="{ color: colorObj.titleColor }">
+      {{ articleInfo.art_corpus_data.artTitle }}
+    </h2>
+    <h6 class="nnpe-article-author" :style="{ color: colorObj.sourceColor }">
+      {{
+        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>
+    <h4 :style="{ color: colorObj.glossarySubtitle }">词汇信息</h4>
+    <div
+      class="word-info"
+      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.artStatInfo.wc
+        }}</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>
+      </div>
+      <div :style="{ background: colorObj.glossaryBg }">
+        <label :style="{ color: colorObj.statisticTitle }">平均词长</label>
+        <span :style="{ color: colorObj.statisticValue }">{{
+          articleInfo.art_corpus_data.artStatInfo.avgWordLen
+        }}</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>
+      </div>
+      <div :style="{ background: colorObj.glossaryBg }">
+        <label :style="{ color: colorObj.statisticTitle }">词汇难度</label>
+        <span :style="{ color: colorObj.statisticValue }">{{
+          articleInfo.art_corpus_data.artStatInfo.vocabHardLevel
+        }}</span>
+      </div>
     </div>
+    <h4 :style="{ color: colorObj.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_s')"
+          @mouseout="closegaolangbzt(indexE, 'shanxing_main_s')"
+          :style="{
+            background:
+              colorObj.type === 'white'
+                ? itemE.bg
+                : colorObj.type === 'darkGreen'
+                ? itemE.darkGreenBg
+                : itemE.darkBg,
+            color:
+              colorObj.type === 'white'
+                ? itemE.color
+                : colorObj.type === 'darkGreen'
+                ? itemE.darkGreenColor
+                : itemE.darkColor,
+            borderColor:
+              colorObj.type === 'white'
+                ? itemE.border
+                : colorObj.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_s" style="height: 360px"></div>
+    </div>
+    <h4 :style="{ color: colorObj.glossarySubtitle }">句法信息</h4>
+    <div
+      class="word-info"
+      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.artStatInfo.sentCount
+        }}</span>
+      </div>
+      <div :style="{ background: colorObj.glossaryBg }">
+        <label :style="{ color: colorObj.statisticTitle }">平均句长</label>
+        <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.longSentCount
+        }}</span>
+      </div>
+      <div :style="{ background: colorObj.glossaryBg }">
+        <label :style="{ color: colorObj.statisticTitle }">长句比例</label>
+        <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.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.avgParaLen
+        }}</span>
+      </div>
+      <div :style="{ background: colorObj.glossaryBg }">
+        <label :style="{ color: colorObj.statisticTitle }"
+          >平均段落句子数</label
+        >
+        <span :style="{ color: colorObj.statisticValue }">{{
+          articleInfo.art_corpus_data.artStatInfo.avgParaSentCount
+        }}</span>
+      </div>
+    </div>
+    <h4 :style="{ color: colorObj.glossarySubtitle }">句长分布</h4>
+    <ul
+      class="sentence-length-box"
+      v-if="
+        articleInfo &&
+        articleInfo.art_corpus_data &&
+        articleInfo.art_corpus_data.artStatInfo &&
+        articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems
+      "
+    >
+      <li
+        v-for="(iteml, indexl) in articleInfo.art_corpus_data.artStatInfo
+          .sentLenDistributeItems"
+        :key="indexl"
+        :style="{ borderColor: colorObj.audioBorder }"
+      >
+        <span class="l1" :style="{ color: colorObj.statisticValue }">{{
+          iteml.rangeInfo
+        }}</span>
+        <span class="l2" :style="{ color: colorObj.statisticValue }">{{
+          iteml.count
+        }}</span>
+        <span class="l3" :style="{ color: colorObj.statisticValue }"
+          >{{ iteml.percent }}%</span
+        >
+        <p>
+          <span
+            class="l4"
+            :style="{ background: colorObj.statisticValue }"
+          ></span>
+          <span
+            class="l5"
+            :style="{
+              background: colorObj.statisticValue,
+              width: iteml.percent + '%',
+            }"
+          ></span>
+        </p>
+      </li>
+    </ul>
+    <h4 :style="{ color: colorObj.glossarySubtitle }">语篇信息</h4>
+    <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.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.hmCefr
+        }}</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -103,156 +233,222 @@
 import * as echarts from "echarts";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { },
+  components: {},
   props: ["articleInfo", "colorObj"],
   data() {
     //这里存放数据
     return {
-        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:'#99A29E',
-                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'
-            }
+      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: "#99A29E",
+          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",
+        },
+      },
+    };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {
-
-  },
+  watch: {},
   //方法集合
   methods: {
     inityuan() {
-        if(this.articleInfo&&this.articleInfo.art_corpus_data&&this.articleInfo.art_corpus_data.artStatInfo&&this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems){
-            var chartDom = document.getElementById("shanxing_main_s");
-            var myChart = echarts.init(chartDom);
-            var option;
-            let newdata = JSON.parse(JSON.stringify(this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems));
-            newdata.forEach((item) => {
-                let percent = item.vocabPercent / 100;
-                if (percent % 1 == 0) {
-                    item.name = item.vlCnName + " " + percent + "%";
-                } else {
-                    item.name = item.vlCnName + " " + percent.toFixed(2) + "%";
-                }
-            });
-            option = {
-                color:this.colorObj.type==='white'?this.articleInfo.vl_id==='VL26'?['#90C62F','#55B467','#F04F88','#F2555A','#D7DCDA','#99A29E']:['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:this.colorObj.type==='darkGreen'?this.articleInfo.vl_id==='VL26'?['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:['#90C62F','#55B467','#F04F88','#F2555A','#D7DCDA','#99A29E']:this.articleInfo.vl_id==='VL26'?['#5B7217','#2F6E3B','#006793','#2C49AA','#AE1955','#F2555A','#4A524E','#2F3742']:['#5B7217','#2F6E3B','#AE1955','#F2555A','#4A524E','#2F3742'],
-                series: [
-                {
-                    name: "Access From",
-                    type: "pie",
-                    radius: ["50%", "90%"],
-                    data: newdata,
-                    itemStyle: {
-                    borderColor: "rgba(255, 255, 255, 0.24)",
-                    borderWidth: 1,
-                    },
-                    top: 50,
-                    emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: "rgba(0, 0, 0, 0.5)",
-                    },
-                    },
-                },
+      if (
+        this.articleInfo &&
+        this.articleInfo.art_corpus_data &&
+        this.articleInfo.art_corpus_data.artStatInfo &&
+        this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems
+      ) {
+        var chartDom = document.getElementById("shanxing_main_s");
+        var myChart = echarts.init(chartDom);
+        var option;
+        let newdata = JSON.parse(
+          JSON.stringify(
+            this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems
+          )
+        );
+        newdata.forEach((item) => {
+          let percent = item.vocabPercent / 100;
+          if (percent % 1 == 0) {
+            item.name = item.vlCnName + " " + percent + "%";
+          } else {
+            item.name = item.vlCnName + " " + percent.toFixed(2) + "%";
+          }
+        });
+        option = {
+          color:
+            this.colorObj.type === "white"
+              ? this.articleInfo.vl_id === "VL26"
+                ? [
+                    "#90C62F",
+                    "#55B467",
+                    "#F04F88",
+                    "#F2555A",
+                    "#D7DCDA",
+                    "#99A29E",
+                  ]
+                : [
+                    "#90C62F",
+                    "#55B467",
+                    "#5FD4F4",
+                    "#5373E7",
+                    "#F04F88",
+                    "#F2555A",
+                    "#D7DCDA",
+                    "#99A29E",
+                  ]
+              : this.colorObj.type === "darkGreen"
+              ? this.articleInfo.vl_id === "VL26"
+                ? [
+                    "#90C62F",
+                    "#55B467",
+                    "#5FD4F4",
+                    "#5373E7",
+                    "#F04F88",
+                    "#F2555A",
+                    "#D7DCDA",
+                    "#99A29E",
+                  ]
+                : [
+                    "#90C62F",
+                    "#55B467",
+                    "#F04F88",
+                    "#F2555A",
+                    "#D7DCDA",
+                    "#99A29E",
+                  ]
+              : this.articleInfo.vl_id === "VL26"
+              ? [
+                  "#5B7217",
+                  "#2F6E3B",
+                  "#006793",
+                  "#2C49AA",
+                  "#AE1955",
+                  "#F2555A",
+                  "#4A524E",
+                  "#2F3742",
+                ]
+              : [
+                  "#5B7217",
+                  "#2F6E3B",
+                  "#AE1955",
+                  "#F2555A",
+                  "#4A524E",
+                  "#2F3742",
                 ],
-                xAxis: {
-                show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-                axisTick: {
-                    show: false, //不显示坐标轴刻度线
+          series: [
+            {
+              name: "Access From",
+              type: "pie",
+              radius: ["50%", "90%"],
+              data: newdata,
+              itemStyle: {
+                borderColor: "rgba(255, 255, 255, 0.24)",
+                borderWidth: 1,
+              },
+              top: 50,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
                 },
-                axisLine: {
-                    show: false, //不显示坐标轴线
-                },
-                axisLabel: {
-                    show: false, //不显示坐标轴上的文字
-                },
-                },
-            };
-            option && myChart.setOption(option);
-        }
+              },
+            },
+          ],
+          xAxis: {
+            show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, //不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, //不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, //不显示坐标轴上的文字
+            },
+          },
+        };
+        option && myChart.setOption(option);
+      }
     },
     // 鼠标进入
     gaolangbzt(index, id) {
@@ -272,184 +468,200 @@ export default {
         dataIndex: index,
       });
     },
-    closeDialog(){
-        this.$emit("closeArticleInfo")
-    }
+    closeDialog() {
+      this.$emit("closeArticleInfo");
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    if(this.articleInfo&&this.articleInfo.art_corpus_data&&this.articleInfo.art_corpus_data.artStatInfo&&this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems){
-        this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems.forEach(item=>{
-            item.value = item.vocabCount
-            item = Object.assign(item, this.vocabularyType[item.vlId])
-        })
-        setTimeout(() => {
-            this.inityuan()
-        }, 100);
+    if (
+      this.articleInfo &&
+      this.articleInfo.art_corpus_data &&
+      this.articleInfo.art_corpus_data.artStatInfo &&
+      this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems
+    ) {
+      this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems.forEach(
+        (item) => {
+          item.value = item.vocabCount;
+          item = Object.assign(item, this.vocabularyType[item.vlId]);
+        }
+      );
+      setTimeout(() => {
+        this.inityuan();
+      }, 100);
     }
-    if(this.articleInfo&&this.articleInfo.art_corpus_data&&this.articleInfo.art_corpus_data.artStatInfo&&this.articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems){
-        this.articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems.forEach(item=>{
-            item.percent = (item.count/this.articleInfo.art_corpus_data.artStatInfo.sentCount*100).toFixed(2)
-        })
+    if (
+      this.articleInfo &&
+      this.articleInfo.art_corpus_data &&
+      this.articleInfo.art_corpus_data.artStatInfo &&
+      this.articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems
+    ) {
+      this.articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems.forEach(
+        (item) => {
+          item.percent = (
+            (item.count /
+              this.articleInfo.art_corpus_data.artStatInfo.sentCount) *
+            100
+          ).toFixed(2);
+        }
+      );
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.article-info{
-    padding: 48px 24px; 
-    position: relative;
-    .el-icon-close{
-        position: absolute;
-        right: 24px;
-        top: 24px;
-        cursor: pointer;
-        font-size: 24px;
-        color: rgba(47, 55, 66, 1);
-    }
-    h2{
-        color: #1F2C5C;
-        font-size: 48px;
-        font-weight: 700;
-        line-height: 56px;
-        margin: 0;
-    }
-    .nnpe-article-author{
-        margin: 24px 0;
-        color:#929CA8;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px; 
-    }
-    h4{
-        margin: 24px 0 8px 0;
+.article-info {
+  padding: 48px 24px;
+  position: relative;
+  .el-icon-close {
+    position: absolute;
+    right: 24px;
+    top: 24px;
+    cursor: pointer;
+    font-size: 24px;
+    color: rgba(47, 55, 66, 1);
+  }
+  h2 {
+    color: #1f2c5c;
+    font-size: 48px;
+    font-weight: 700;
+    line-height: 56px;
+    margin: 0;
+  }
+  .nnpe-article-author {
+    margin: 24px 0;
+    color: #929ca8;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  h4 {
+    margin: 24px 0 8px 0;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+  }
+  .word-info {
+    display: flex;
+    justify-content: space-between;
+    > div {
+      width: 168px;
+      height: 64px;
+      border-radius: 4px;
+      padding: 8px 12px;
+      label {
+        display: block;
         font-weight: 400;
         font-size: 12px;
         line-height: 20px;
+        margin-bottom: 4px;
+      }
+      span {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+      }
     }
-    .word-info{
-        display: flex;
-        justify-content: space-between;
-        >div{
-            width: 224px;
-            height: 64px;
-            border-radius: 4px;
-            padding: 8px 12px;
-            label{
-                display: block;
-                font-weight: 400;
-                font-size: 12px;
-                line-height: 20px;
-                margin-bottom: 4px;
-            }
-            span{
-                font-weight: 400;
-                font-size: 16px;
-                line-height: 24px;
-            }
-        }
-        &.word-infos{
-            margin-top: 8px;
-            > div{
-                width: 301px;
-            }
-        }
+    &.word-infos {
+      margin-top: 8px;
+      > div {
+        width: 301px;
+      }
     }
-    .echarts-box{
+  }
+  .echarts-box {
+    display: flex;
+    .echarts-type {
+      width: 232px;
+      flex-shrink: 0;
+      li {
+        height: 38px;
+        border-radius: 4px;
+        margin-bottom: 8px;
+        font-size: 14px;
+        line-height: 20px;
         display: flex;
-        .echarts-type{
-            width: 232px;
-            flex-shrink: 0;
-            li{
-                height: 38px;
-                border-radius: 4px;
-                margin-bottom: 8px;
-                font-size: 14px;
-                line-height: 20px;
-                display: flex;
-                padding: 8px 12px;
-                cursor: pointer;
-                border: 1px solid transparent;
-                .name{
-                    flex: 1;
-                }
-                .number{
-                    width: 40px;
-                    text-align: right;
-                }
-                .percent{
-                    width: 80px;
-                    text-align: right;
-                }
-            }
+        padding: 8px 12px;
+        cursor: pointer;
+        border: 1px solid transparent;
+        .name {
+          flex: 1;
         }
-        #shanxing_main_s{
-            flex: 1;
+        .number {
+          width: 40px;
+          text-align: right;
         }
-    }
-    .sentence-length-box{
-        li{
-            border-bottom: 1px solid#EBEBEB;
-            padding: 12px;
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-            line-height: 22px;
-            justify-content: space-between;
-            .l1{
-                width: 245px;
-                font-weight: 600;
-            }
-            .l2{
-                width: 72px;
-                text-align: center;
-            }
-            .l3{
-                width: 72px;
-                text-align: right;
-            }
-            .l4{
-                width: 100%;
-                border-radius: 8px;
-                height: 8px;
-                opacity: 0.3;
-                position: absolute;
-                left: 0;
-                top: 0;
-            }
-            p{
-                margin: 0;
-                width: 435px;
-                height: 8px;
-                position: relative;
-            }
-            .l5{
-                position: absolute;
-                height: 8px;
-                border-radius: 8px;
-                left: 0;
-                top: 0;
-            }
+        .percent {
+          width: 80px;
+          text-align: right;
         }
+      }
+    }
+    #shanxing_main_s {
+      flex: 1;
+    }
+  }
+  .sentence-length-box {
+    li {
+      border-bottom: 1px solid#EBEBEB;
+      padding: 12px;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      line-height: 22px;
+      justify-content: space-between;
+      .l1 {
+        width: 245px;
+        font-weight: 600;
+      }
+      .l2 {
+        width: 72px;
+        text-align: center;
+      }
+      .l3 {
+        width: 72px;
+        text-align: right;
+      }
+      .l4 {
+        width: 100%;
+        border-radius: 8px;
+        height: 8px;
+        opacity: 0.3;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      p {
+        margin: 0;
+        width: 435px;
+        height: 8px;
+        position: relative;
+      }
+      .l5 {
+        position: absolute;
+        height: 8px;
+        border-radius: 8px;
+        left: 0;
+        top: 0;
+      }
     }
+  }
 }
-</style>
+</style>