调整打印页面宽度

src/App.vue

@@ -127,7 +127,7 @@ export default {
 <style lang="scss" scoped>
 #app {
   background: #f2f3f5;
-  min-width: 1440px;
+  // min-width: 1440px;
   min-height: 100%;
   padding-top: 64px;
 }

src/views/bookShelf/articleDetail.vue

@@ -1927,7 +1927,7 @@ export default {
     }
     .mene-right {
       position: fixed;
-      right: calc((100% - 1000px) / 2 - 172px);
+      right: 10px;
       top: 144px;
       width: 152px;
       max-height: 80%;

src/views/bookShelf/articleShareDetail.vue

@@ -1,359 +1,566 @@
 <template>
-  <div class="bookShare" :style="{background:bgColorList[activeIndex].contentBg}" v-if="articleInfo" :v-loading="loading">
-    <div class="navBar" :class="['navBar-'+bgColorList[activeIndex].type]" :style="{background:bgColorList[activeIndex].navBg}">
-        <div class="navBar-left" @click="cutLoginReg">
-            <svg-icon icon-class="logo"></svg-icon>
-        </div>
-        <div class="navBar-right">
-            <el-image
-                :src="personTouxiang"
-                fit="cover" style="width:24px;height:24px;margin:0 8px;border-radius:50%">
-            </el-image>
-            <span class="name">{{personName}}分享的文章</span>
-        </div>
+  <div
+    class="bookShare"
+    :style="{ background: bgColorList[activeIndex].contentBg }"
+    v-if="articleInfo"
+    :v-loading="loading"
+  >
+    <div
+      class="navBar"
+      :class="['navBar-' + bgColorList[activeIndex].type]"
+      :style="{ background: bgColorList[activeIndex].navBg }"
+    >
+      <div class="navBar-left" @click="cutLoginReg">
+        <svg-icon icon-class="logo"></svg-icon>
+      </div>
+      <div class="navBar-right">
+        <el-image
+          :src="personTouxiang"
+          fit="cover"
+          style="width: 24px; height: 24px; margin: 0 8px; border-radius: 50%"
+        >
+        </el-image>
+        <span class="name">{{ personName }}分享的文章</span>
+      </div>
     </div>
     <div class="article-box">
-        <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"></normal-model>
+      <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"
+          ></normal-model>
+        </div>
+        <!-- 词汇表 -->
+        <div
+          class="glossary-box"
+          :style="{ borderTopColor: bgColorList[activeIndex].contentBg }"
+        >
+          <div
+            class="title"
+            :style="{ color: bgColorList[activeIndex].glossaryTitle }"
+          >
+            <h2>词汇表</h2>
+            <a @click="showGlossary = !showGlossary">{{
+              showGlossary ? "收起" : "展开"
+            }}</a>
+          </div>
+          <el-collapse-transition>
+            <div v-if="showGlossary">
+              <template v-if="articleInfo.art_voc_data.length > 0">
+                <h4
+                  :style="{ color: bgColorList[activeIndex].glossarySubtitle }"
+                >
+                  生词
+                </h4>
+                <new-word-list
+                  class="newWord-list"
+                  :list="articleInfo.art_voc_data"
+                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
+                  :colorObj="bgColorList[activeIndex]"
+                  :likeWordList="likeWordList"
+                  @changeLike="changeLike"
+                ></new-word-list>
+              </template>
+              <template v-if="articleInfo.art_phrase_data.length > 0">
+                <h4
+                  :style="{ color: bgColorList[activeIndex].glossarySubtitle }"
+                >
+                  短语
+                </h4>
+                <phrase-list
+                  class="newWord-list"
+                  :list="articleInfo.art_phrase_data"
+                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
+                  :colorObj="bgColorList[activeIndex]"
+                  :likePhraseList="likePhraseList"
+                  @changeLike="changeLike"
+                ></phrase-list>
+              </template>
+              <template v-if="articleInfo.art_explain_data.length > 0">
+                <h4
+                  :style="{ color: bgColorList[activeIndex].glossarySubtitle }"
+                >
+                  注释
+                </h4>
+                <annotation-list
+                  class="newWord-list"
+                  :list="articleInfo.art_explain_data"
+                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
+                  :colorObj="bgColorList[activeIndex]"
+                ></annotation-list>
+              </template>
+            </div>
+          </el-collapse-transition>
+          <div
+            class="title"
+            :style="{
+              color: bgColorList[activeIndex].glossaryTitle,
+              marginTop: '40px',
+            }"
+          >
+            <h2>详细统计</h2>
+          </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 class="glossary-box" :style="{borderTopColor:bgColorList[activeIndex].contentBg}">
-                <div class="title" :style="{color:bgColorList[activeIndex].glossaryTitle}">
-                    <h2>词汇表</h2>
-                    <a @click="showGlossary=!showGlossary">{{showGlossary?'收起':'展开'}}</a>
-                </div>
-                <el-collapse-transition >
-                    <div v-if="showGlossary">
-                        <template v-if="articleInfo.art_voc_data.length>0">
-                            <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">生词</h4>
-                            <new-word-list class="newWord-list" :list="articleInfo.art_voc_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]" :likeWordList="likeWordList" @changeLike="changeLike"></new-word-list>
-                        </template>
-                        <template v-if="articleInfo.art_phrase_data.length>0">
-                            <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">短语</h4>
-                            <phrase-list class="newWord-list" :list="articleInfo.art_phrase_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]" :likePhraseList="likePhraseList" @changeLike="changeLike"></phrase-list>
-                        </template>
-                        <template v-if="articleInfo.art_explain_data.length>0">
-                            <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">注释</h4>
-                            <annotation-list class="newWord-list" :list="articleInfo.art_explain_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]"></annotation-list>
-                        </template>
-                    </div>
-                </el-collapse-transition>
-                <div class="title" :style="{color:bgColorList[activeIndex].glossaryTitle,marginTop:'40px'}">
-                    <h2>详细统计</h2>
-                </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>
-                    </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 :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>
     </div>
   </div>
 </template>
 
 <script>
-import NewWordList from './components/NewWordList.vue';
-import PhraseList from './components/PhraseList.vue';
-import AnnotationList from './components/AnnotationList.vue'
-import NormalModel from "./components/NormalModel.vue"
+import NewWordList from "./components/NewWordList.vue";
+import PhraseList from "./components/PhraseList.vue";
+import AnnotationList from "./components/AnnotationList.vue";
+import NormalModel from "./components/NormalModel.vue";
 import * as echarts from "echarts";
 import { getLogin } from "@/api/ajax";
 export default {
-  name: 'articleDetail',
-  computed: {
-    
-  },
+  name: "articleDetail",
+  computed: {},
   components: {
     NewWordList,
     PhraseList,
     AnnotationList,
     NormalModel,
   },
-  data(){
-    return{
-        personTouxiang:localStorage.getItem('share_person_touxiang')?localStorage.getItem('share_person_touxiang'):require('../../assets/avatar.png'),
-        personName:localStorage.getItem('share_person_name')?localStorage.getItem('share_person_name'):'',
-        LoginNavIndex: 0,
-        wordFontsize: 18, // 文章文字大小
-        bgColorList:[
-            {
-                type:'white',
-                contentBg:'#F2F3F5',
-                contentInnerBg:'#FFFFFF',
-                navBg:'#FFFFFF',
-                border:'#E5E6EB',
-                bg:'#FFFFFF',
-                border_active:'#3459D2',
-                boxBorder:'#E5E6EB',
-                titleColor:'#1F2C5C',
-                sourceColor:'#929CA8',
-                contentColor:'#2F3742',
-                btnColor:'#3459D2',
-                glossaryTitle:'#2F3742',
-                glossarySubtitle:'#4E5969',
-                glossaryBg:'#F7F8FA',
-                newWordColor:'#175DFF',
-                newWordOtherColor:'#667180',
-                newWordStar:'#FFB224',
-                newWordType:{
-                    'L0':{
-                        color:'#5B7217',
-                        bg:'#F1FCE3'
-                    },
-                    'L1':{
-                        color:'#3D9A50',
-                        bg:'#EFFCEF'
-                    },
-                    'L2':{
-                        color:'#0081F1',
-                        bg:'#E7F3FF'
-                    },
-                    'L3':{
-                        color:'#3459D2',
-                        bg:'#EEF3FF'
-                    },
-                    'LA':{
-                        color:'#E03177',
-                        bg:'#FFECF5'
-                    },
-                    'LB':{
-                        color:'#CD2B31',
-                        bg:'#FFE8E8'
-                    },
-                    'LC':{
-                        color:'#99A29E',
-                        bg:'#DFE4E2'
-                    },
-                    'LD':{
-                        color:'#504F57',
-                        bg:'#C1C5CD'
-                    }
-                },
-                phraseColor:'#ED5F00',
-                phraseOhterColor:'#2F3742',
-                annotationTitle:'#4E5969',
-                annotationOhter:'#667180',
-                statisticTitle:'#2F3742',
-                statisticValue:'#3459D2',
-                menuBg:'#EEF3FF',
-                audiobg:'#FFFFFF',
-                audioBorder:'#EBEBEB'
-            }
-        ],
-        activeIndex:0, // 选择主题色的索引
-        showGlossary: true, // 是否展开词汇表
-        wordInfo:{
-            length: {
-                        label:'文章长度',
-                        value:463
-                    },
-            number: {
-                        label:'词汇数量',
-                        value:236
-                    },
-            averageLength: {
-                        label:'平均词长',
-                        value:4.52
-                    },
-            lexicalDensity: {
-                        label:'词汇密度',
-                        value:0.51
-                    },
-            wordDifficulty: {
-                        label:'词汇难度',
-                        value:2.05
-                    },
-        },
-        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'
+  data() {
+    return {
+      personTouxiang: localStorage.getItem("share_person_touxiang")
+        ? localStorage.getItem("share_person_touxiang")
+        : require("../../assets/avatar.png"),
+      personName: localStorage.getItem("share_person_name")
+        ? localStorage.getItem("share_person_name")
+        : "",
+      LoginNavIndex: 0,
+      wordFontsize: 18, // 文章文字大小
+      bgColorList: [
+        {
+          type: "white",
+          contentBg: "#F2F3F5",
+          contentInnerBg: "#FFFFFF",
+          navBg: "#FFFFFF",
+          border: "#E5E6EB",
+          bg: "#FFFFFF",
+          border_active: "#3459D2",
+          boxBorder: "#E5E6EB",
+          titleColor: "#1F2C5C",
+          sourceColor: "#929CA8",
+          contentColor: "#2F3742",
+          btnColor: "#3459D2",
+          glossaryTitle: "#2F3742",
+          glossarySubtitle: "#4E5969",
+          glossaryBg: "#F7F8FA",
+          newWordColor: "#175DFF",
+          newWordOtherColor: "#667180",
+          newWordStar: "#FFB224",
+          newWordType: {
+            L0: {
+              color: "#5B7217",
+              bg: "#F1FCE3",
             },
-            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'
+            L1: {
+              color: "#3D9A50",
+              bg: "#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'
+            L2: {
+              color: "#0081F1",
+              bg: "#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'
+            L3: {
+              color: "#3459D2",
+              bg: "#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'
+            LA: {
+              color: "#E03177",
+              bg: "#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'
+            LB: {
+              color: "#CD2B31",
+              bg: "#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)'
+            LC: {
+              color: "#99A29E",
+              bg: "#DFE4E2",
             },
-            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'
-            }
+            LD: {
+              color: "#504F57",
+              bg: "#C1C5CD",
+            },
+          },
+          phraseColor: "#ED5F00",
+          phraseOhterColor: "#2F3742",
+          annotationTitle: "#4E5969",
+          annotationOhter: "#667180",
+          statisticTitle: "#2F3742",
+          statisticValue: "#3459D2",
+          menuBg: "#EEF3FF",
+          audiobg: "#FFFFFF",
+          audioBorder: "#EBEBEB",
         },
-        articleType:this.$route.query.type?this.$route.query.type*1:1,
-        articleId:this.$route.query.id?this.$route.query.id:'',
-        noRead: true, // 未读
-        support: false, // 点赞
-        oppose: false, // 不支持
-        timer: null,
-        readLength: 0,
-        articleInfo: null,
-        loading: false,
-        menuType: 'original',
-        menuFeature: '', // 功能
-        shareSrc: '', // 分享图片
-        share_url: '', // 分享链接
-        shareLoading: false,
-        likeWordList: [], // 收藏短语list
-        likePhraseList: [],
-        likeSentencelist: [],
-    }
+      ],
+      activeIndex: 0, // 选择主题色的索引
+      showGlossary: true, // 是否展开词汇表
+      wordInfo: {
+        length: {
+          label: "文章长度",
+          value: 463,
+        },
+        number: {
+          label: "词汇数量",
+          value: 236,
+        },
+        averageLength: {
+          label: "平均词长",
+          value: 4.52,
+        },
+        lexicalDensity: {
+          label: "词汇密度",
+          value: 0.51,
+        },
+        wordDifficulty: {
+          label: "词汇难度",
+          value: 2.05,
+        },
+      },
+      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",
+        },
+      },
+      articleType: this.$route.query.type ? this.$route.query.type * 1 : 1,
+      articleId: this.$route.query.id ? this.$route.query.id : "",
+      noRead: true, // 未读
+      support: false, // 点赞
+      oppose: false, // 不支持
+      timer: null,
+      readLength: 0,
+      articleInfo: null,
+      loading: false,
+      menuType: "original",
+      menuFeature: "", // 功能
+      shareSrc: "", // 分享图片
+      share_url: "", // 分享链接
+      shareLoading: false,
+      likeWordList: [], // 收藏短语list
+      likePhraseList: [],
+      likeSentencelist: [],
+    };
   },
   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");
-            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.bgColorList[this.activeIndex].type==='white'?this.articleInfo.vl_id==='VL26'?['#90C62F','#55B467','#F04F88','#F2555A','#D7DCDA','#99A29E']:['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:this.bgColorList[this.activeIndex].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");
+        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.bgColorList[this.activeIndex].type === "white"
+              ? this.articleInfo.vl_id === "VL26"
+                ? [
+                    "#90C62F",
+                    "#55B467",
+                    "#F04F88",
+                    "#F2555A",
+                    "#D7DCDA",
+                    "#99A29E",
+                  ]
+                : [
+                    "#90C62F",
+                    "#55B467",
+                    "#5FD4F4",
+                    "#5373E7",
+                    "#F04F88",
+                    "#F2555A",
+                    "#D7DCDA",
+                    "#99A29E",
+                  ]
+              : this.bgColorList[this.activeIndex].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, //不显示坐标轴刻度线
-                },
-                axisLine: {
-                    show: false, //不显示坐标轴线
-                },
-                axisLabel: {
-                    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)",
                 },
-            };
-            option && myChart.setOption(option);
-        }
+              },
+            },
+          ],
+          xAxis: {
+            show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, //不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, //不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, //不显示坐标轴上的文字
+            },
+          },
+        };
+        option && myChart.setOption(option);
+      }
     },
     // 鼠标进入
     gaolangbzt(index, id) {
@@ -373,241 +580,255 @@ export default {
         dataIndex: index,
       });
     },
-    getArticleDetail(){
-        this.loading = true
-        let this_ = this;
-        let MethodName = "/PaperServer/Client/Article/GetArticleDetail";
-        let data = {
-            id: this.articleId,
-        }
-        getLogin(MethodName, data)
+    getArticleDetail() {
+      this.loading = true;
+      let this_ = this;
+      let MethodName = "/PaperServer/Client/Article/GetArticleDetail";
+      let data = {
+        id: this.articleId,
+      };
+      getLogin(MethodName, data)
         .then((res) => {
-            this.loading = false
-            if(res.status===1){
-                this_.articleInfo = res.data
-                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])
-                    })
+          this.loading = false;
+          if (res.status === 1) {
+            this_.articleInfo = res.data;
+            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);
+              );
             }
+            setTimeout(() => {
+              this_.inityuan();
+            }, 100);
+          }
         })
         .catch(() => {
-            this.loading = false
-        }); 
-        getLogin('/ShopServer/Client/CollectManager/GetMyCollectIntegrateInfo_Article', {
-            article_id: this.articleId,
-        })
+          this.loading = false;
+        });
+      getLogin(
+        "/ShopServer/Client/CollectManager/GetMyCollectIntegrateInfo_Article",
+        {
+          article_id: this.articleId,
+        }
+      )
         .then((res) => {
-            if(res.status===1){ 
-                this.likeWordList = []
-                res.word_list.forEach(item=>{
-                    this.likeWordList.push(item.word)
-                })
-                this.likePhraseList = []
-                res.phrase_list.forEach(item=>{
-                    this.likePhraseList.push(item.phrase)
-                })
-                this.likeSentencelist = []
-                res.sentence_list.forEach(item=>{
-                    this.likeSentencelist.push(item.sentence_id)
-                })
-            }
+          if (res.status === 1) {
+            this.likeWordList = [];
+            res.word_list.forEach((item) => {
+              this.likeWordList.push(item.word);
+            });
+            this.likePhraseList = [];
+            res.phrase_list.forEach((item) => {
+              this.likePhraseList.push(item.phrase);
+            });
+            this.likeSentencelist = [];
+            res.sentence_list.forEach((item) => {
+              this.likeSentencelist.push(item.sentence_id);
+            });
+          }
         })
         .catch(() => {
-            this.loading = false
-        }); 
+          this.loading = false;
+        });
     },
     // 切换登录的注册
     cutLoginReg() {
       window.location.href = "/";
     },
-    changeLike(type,list){
-        this[type] = list
-    }
+    changeLike(type, list) {
+      this[type] = list;
+    },
   },
-  created(){
-    if(this.articleId){
-        this.getArticleDetail()
+  created() {
+    if (this.articleId) {
+      this.getArticleDetail();
     }
   },
-  mounted(){
-  }
-}
+  mounted() {},
+};
 </script>
 
 <style lang="scss" scoped>
-.bookShare{
-    min-height: calc(100vh - 64px);
-    .navBar-left{
-        cursor: pointer;
-        font-size: 0;
-        z-index: 2;
-        .svg-icon{
-            width: 204px;
-            height: 32px;
-            color: rgba(29, 33, 41, 1);
-        }
+.bookShare {
+  min-height: calc(100vh - 64px);
+  .navBar-left {
+    cursor: pointer;
+    font-size: 0;
+    z-index: 2;
+    .svg-icon {
+      width: 204px;
+      height: 32px;
+      color: rgba(29, 33, 41, 1);
     }
-    .navBar-right{
-        display: flex;
-        align-items: center;
-        span{
-            color: #86909C;
-            font-size: 16px;
-            font-weight: 500;
-            line-height: 24px; 
-        }
+  }
+  .navBar-right {
+    display: flex;
+    align-items: center;
+    span {
+      color: #86909c;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
     }
-    .article-box{
-        position: relative;
-        padding: 20px 0;
-        .artricle-inner{
-            width: 1000px;
-            margin: 0 auto;
-            border-radius: 8px;
-        }
-        .mene-right{
-            position: fixed;
-            right: calc((100% - 1000px)/2 - 196px);
-            top: 144px;
-            width: 176px;
-            background: #FFFFFF;
-            border: 1px solid #E5E6EB;
-            border-radius: 8px;
-            padding: 4px;
-        }
+  }
+  .article-box {
+    position: relative;
+    padding: 20px 0;
+    .artricle-inner {
+      width: 1000px;
+      margin: 0 auto;
+      border-radius: 8px;
     }
-    .atricle-data{
-        padding: 120px 100px 40px 100px;
+    .mene-right {
+      position: fixed;
+      right: 10px;
+      top: 144px;
+      width: 176px;
+      background: #ffffff;
+      border: 1px solid #e5e6eb;
+      border-radius: 8px;
+      padding: 4px;
     }
-    .glossary-box{
-        border-top: 1px solid #F2F3F5;
-        padding: 40px;
-        .title{
-            display: flex;
-            justify-content: space-between;
-            h2{
-                margin: 0;
-                font-weight: 400;
-                font-size: 24px;
-                line-height: 32px;
-            }
-            a{
-                font-weight: 400;
-                font-size: 16px;
-                line-height: 24px;
-            }
-        }
-        h4{
-            margin: 24px 0 8px 0;
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 20px;
-        }
+  }
+  .atricle-data {
+    padding: 120px 100px 40px 100px;
+  }
+  .glossary-box {
+    border-top: 1px solid #f2f3f5;
+    padding: 40px;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      h2 {
+        margin: 0;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 32px;
+      }
+      a {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+      }
     }
-    .newWord-list{
-        padding: 2px 4px;
+    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: 178px;
-            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;
-            }
-        }
+  }
+  .newWord-list {
+    padding: 2px 4px;
+  }
+  .word-info {
+    display: flex;
+    justify-content: space-between;
+    > div {
+      width: 178px;
+      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;
+      }
     }
-    .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;
+        }
+        .number {
+          width: 40px;
+          text-align: right;
         }
-        #shanxing_main{
-            flex: 1;
+        .percent {
+          width: 80px;
+          text-align: right;
         }
+      }
     }
+    #shanxing_main {
+      flex: 1;
+    }
+  }
 }
 </style>
 <style lang="scss">
-.bookShare{
-    .navBar{
-        border-color: transparent;
-        top: 0;
-        &-white{
-            border-color: #EBEBEB;
-            .el-input-number__decrease, .el-input-number__increase,.el-input__inner{
-                color: #1C2129;
-            }
-            .el-input-number__decrease{
-                border-right: 1px solid #E5E6EB;
-            }
-            .el-input-number__increase{
-                border-left: 1px solid #E5E6EB;
-            }
-            .goback{
-                color: #1D2129;
-            }
-            .border{
-                background: #E5E6EB;
-                height: 16px;
-                margin-top: 2px;
-            }
-            .article-title{
-                color: #86909C;
-            }
-        }
+.bookShare {
+  .navBar {
+    border-color: transparent;
+    top: 0;
+    &-white {
+      border-color: #ebebeb;
+      .el-input-number__decrease,
+      .el-input-number__increase,
+      .el-input__inner {
+        color: #1c2129;
+      }
+      .el-input-number__decrease {
+        border-right: 1px solid #e5e6eb;
+      }
+      .el-input-number__increase {
+        border-left: 1px solid #e5e6eb;
+      }
+      .goback {
+        color: #1d2129;
+      }
+      .border {
+        background: #e5e6eb;
+        height: 16px;
+        margin-top: 2px;
+      }
+      .article-title {
+        color: #86909c;
+      }
     }
+  }
 }
-.login-dialog{
-   .el-dialog__header,.el-dialog__body{
-        padding: 0;
-    }
-    .el-dialog{
-        border: 1px solid #E5E6EB;
-        box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
-        border-radius: 4px;
-        overflow: hidden;
-    } 
+.login-dialog {
+  .el-dialog__header,
+  .el-dialog__body {
+    padding: 0;
+  }
+  .el-dialog {
+    border: 1px solid #e5e6eb;
+    box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
+      0px 16px 24px 2px rgba(0, 0, 0, 0.04),
+      0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    overflow: hidden;
+  }
 }
 </style>

src/views/bookShelf/components/PrintModel.vue

@@ -1900,8 +1900,9 @@ export default {
     justify-content: center;
     padding-top: 46px;
     &-left {
-      width: 1070px;
-      margin: 8px 346px 8px 8px;
+      // width: 1070px;
+      flex: 1;
+      margin: 8px 370px 8px 8px;
       background: #fff;
       flex-shrink: 0;
 
@@ -2129,7 +2130,7 @@ export default {
       position: fixed;
       z-index: 1;
       top: 46px;
-      right: calc((100% - 1450px) / 2);
+      right: 0px;
       height: calc(100% - 48px);
       .config-box {
         height: calc(100% - 110px);