文章右侧菜单

src/icons/svg/Down-line.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.64645 5.64645C3.84171 5.45118 4.15829 5.45118 4.35355 5.64645L8 9.29289L11.6464 5.64645C11.8417 5.45118 12.1583 5.45118 12.3536 5.64645C12.5488 5.84171 12.5488 6.15829 12.3536 6.35355L8.35355 10.3536C8.15829 10.5488 7.84171 10.5488 7.64645 10.3536L3.64645 6.35355C3.45118 6.15829 3.45118 5.84171 3.64645 5.64645Z" fill="currentColor"/>
+</svg>

src/icons/svg/Up-line.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97848 5.64645C8.17374 5.45118 8.49032 5.45118 8.68558 5.64645L12.6856 9.64645C12.8808 9.84171 12.8808 10.1583 12.6856 10.3536C12.4903 10.5488 12.1737 10.5488 11.9785 10.3536L8.33203 6.70711L4.68558 10.3536C4.49032 10.5488 4.17374 10.5488 3.97848 10.3536C3.78322 10.1583 3.78322 9.84171 3.97848 9.64645L7.97848 5.64645Z" fill="currentColor"/>
+</svg>

src/icons/svg/chart.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0005 1.25098C11.5863 1.25098 11.2505 1.58676 11.2505 2.00098V6.27861L8.8651 2.47269C8.70645 2.09007 8.26765 1.9085 7.88503 2.06716C6.57047 2.61225 5.38824 3.41019 4.3986 4.39983L4.3986 4.39983C2.45406 6.34439 1.25 9.03292 1.25 12.0012C1.25 17.9383 6.06294 22.7512 12 22.7512C14.9683 22.7512 17.6568 21.5472 19.6014 19.6026L18.7806 18.293C18.7806 18.293 18.7806 18.293 18.7806 18.293L19.6014 19.6026C20.5911 18.613 21.389 17.4307 21.9341 16.1162C22.0927 15.7336 21.9111 15.2948 21.5285 15.1361C21.1459 14.9775 20.7071 15.159 20.5484 15.5417C20.1247 16.5637 19.5226 17.4938 18.7806 18.293L15.3071 12.751H22.0005C22.4147 12.751 22.7505 12.4152 22.7505 12.001C22.7505 6.06391 17.9376 1.25098 12.0005 1.25098ZM15.3071 12.751L18.7806 18.293C18.7022 18.3775 18.6222 18.4605 18.5407 18.5419L18.5407 18.5419C16.866 20.2167 14.5545 21.2512 12 21.2512C6.89136 21.2512 2.75 17.1099 2.75 12.0012C2.75 9.44672 3.78452 7.13525 5.45926 5.46048C6.31186 4.6079 7.32953 3.92134 8.45957 3.45276C8.8422 3.29411 9.02376 2.85531 8.8651 2.47269L11.2505 6.27862V12.001C11.2505 12.4152 11.5863 12.751 12.0005 12.751H15.3071ZM14.3669 11.251H21.2205C20.8586 6.74047 17.261 3.14286 12.7505 2.78094V8.67189L14.3669 11.251ZM12.7505 8.6719L14.3669 11.251H12.7505V8.6719Z" fill="currentColor"/>
+</svg>

src/icons/svg/cloud.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1568 3.80355C6.81579 3.41874 3.58343 5.13373 2.02887 8.11599C0.474303 11.0983 0.919447 14.7302 3.14819 17.2488C3.42269 17.559 3.89668 17.5879 4.20688 17.3134C4.51708 17.0389 4.54602 16.5649 4.27151 16.2547C2.45456 14.2015 2.09166 11.2406 3.359 8.80935C4.62634 6.37811 7.26146 4.97999 9.98521 5.2937C12.7089 5.60741 14.9572 7.56802 15.6387 10.2237C15.7238 10.5554 16.0227 10.7873 16.3651 10.7873H17.5262C19.2945 10.7859 20.8003 11.6986 21.2844 13.2265C21.7923 14.8298 21.2024 16.5772 19.8268 17.5446C19.4879 17.7828 19.4064 18.2507 19.6447 18.5895C19.8829 18.9283 20.3508 19.0098 20.6896 18.7716C22.6005 17.4278 23.4199 15.0005 22.7143 12.7735C21.9849 10.4714 19.7744 9.28574 17.5251 9.28727L16.9251 9.28727C15.9305 6.31843 13.3021 4.16581 10.1568 3.80355ZM6.99951 16.749C6.5853 16.749 6.24951 17.0848 6.24951 17.499V20.499C6.24951 20.9132 6.5853 21.249 6.99951 21.249H16.9995C17.4137 21.249 17.7495 20.9132 17.7495 20.499V17.499C17.7495 17.0848 17.4137 16.749 16.9995 16.749H6.99951ZM7.74951 19.749V18.249H16.2495V19.749H7.74951ZM10.2485 14.001C10.2485 13.5868 10.5843 13.251 10.9985 13.251H16.9985C17.4127 13.251 17.7485 13.5868 17.7485 14.001C17.7485 14.4152 17.4127 14.751 16.9985 14.751H10.9985C10.5843 14.751 10.2485 14.4152 10.2485 14.001ZM6.99951 13.251C6.5853 13.251 6.24951 13.5868 6.24951 14.001C6.24951 14.4152 6.5853 14.751 6.99951 14.751H7.99951C8.41373 14.751 8.74951 14.4152 8.74951 14.001C8.74951 13.5868 8.41373 13.251 7.99951 13.251H6.99951Z" fill="currentColor"/>
+</svg>

src/icons/svg/filtrate.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.31871 4.18643C2.44114 3.92042 2.70718 3.75 3.00001 3.75H21C21.2928 3.75 21.5589 3.92042 21.6813 4.18643C21.8037 4.45243 21.7602 4.76537 21.5697 4.9878L14.55 13.1861V21C14.55 21.2593 14.4161 21.5002 14.1959 21.637C13.9757 21.7739 13.7004 21.7873 13.4679 21.6725L9.86792 19.8947C9.61201 19.7683 9.45001 19.5076 9.45001 19.2222V13.1861L2.43031 4.9878C2.23986 4.76537 2.19628 4.45243 2.31871 4.18643ZM4.62955 5.25L10.7697 12.4211C10.8861 12.557 10.95 12.73 10.95 12.9089V18.7561L13.05 19.7932V12.9089C13.05 12.73 13.114 12.557 13.2303 12.4211L19.3705 5.25H4.62955Z" fill="currentColor"/>
+</svg>

src/icons/svg/list.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 2.25C2.98122 2.25 1.75 3.48122 1.75 5C1.75 6.51882 2.98122 7.75 4.5 7.75C6.01875 7.75 7.25 6.51883 7.25 5C7.25 3.48121 6.01876 2.25 4.5 2.25ZM3.25 5C3.25 4.30964 3.80964 3.75 4.5 3.75C5.19034 3.75 5.75 4.30965 5.75 5C5.75 5.69037 5.19035 6.25 4.5 6.25C3.80964 6.25 3.25 5.69038 3.25 5ZM4.5 16.251C2.98121 16.251 1.75 17.4822 1.75 19.001C1.75 20.5197 2.98121 21.751 4.5 21.751C6.01876 21.751 7.25 20.5197 7.25 19.001C7.25 17.4822 6.01876 16.251 4.5 16.251ZM3.25 19.001C3.25 18.3106 3.80965 17.751 4.5 17.751C5.19034 17.751 5.75 18.3106 5.75 19.001C5.75 19.6913 5.19034 20.251 4.5 20.251C3.80965 20.251 3.25 19.6913 3.25 19.001ZM1.75 11.999C1.75 10.4802 2.98122 9.24902 4.5 9.24902C6.01875 9.24902 7.25 10.4802 7.25 11.999C7.25 13.5178 6.01875 14.749 4.5 14.749C2.98122 14.749 1.75 13.5178 1.75 11.999ZM4.5 10.749C3.80964 10.749 3.25 11.3086 3.25 11.999C3.25 12.6894 3.80964 13.249 4.5 13.249C5.19035 13.249 5.75 12.6894 5.75 11.999C5.75 11.3086 5.19035 10.749 4.5 10.749ZM10.4995 11.25C10.0853 11.25 9.74951 11.5858 9.74951 12C9.74951 12.4142 10.0853 12.75 10.4995 12.75H21.4995C21.9137 12.75 22.2495 12.4142 22.2495 12C22.2495 11.5858 21.9137 11.25 21.4995 11.25H10.4995ZM9.74951 18.999C9.74951 18.5848 10.0853 18.249 10.4995 18.249H21.4995C21.9137 18.249 22.2495 18.5848 22.2495 18.999C22.2495 19.4132 21.9137 19.749 21.4995 19.749H10.4995C10.0853 19.749 9.74951 19.4132 9.74951 18.999ZM10.4995 4.25098C10.0853 4.25098 9.74951 4.58676 9.74951 5.00098C9.74951 5.41519 10.0853 5.75098 10.4995 5.75098H21.4995C21.9137 5.75098 22.2495 5.41519 22.2495 5.00098C22.2495 4.58676 21.9137 4.25098 21.4995 4.25098H10.4995Z" fill="currentColor"/>
+</svg>

src/icons/svg/print.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.25098C4.58579 1.25098 4.25 1.58676 4.25 2.00098V9.24902H2C1.58579 9.24902 1.25 9.58481 1.25 9.99902V18.999C1.25 19.4132 1.58579 19.749 2 19.749H4.74805V21.999C4.74805 22.4132 5.08383 22.749 5.49805 22.749H18.498C18.9123 22.749 19.248 22.4132 19.248 21.999V19.749H22C22.4142 19.749 22.75 19.4132 22.75 18.999V9.99902C22.75 9.58481 22.4142 9.24902 22 9.24902H19.75V2.00098C19.75 1.58676 19.4142 1.25098 19 1.25098H5ZM4.94546 10.749C4.96347 10.7503 4.98166 10.751 5 10.751H19C19.0183 10.751 19.0365 10.7503 19.0545 10.749H21.25V18.249H19.2586V15.999C19.2586 15.5848 18.9229 15.249 18.5086 15.249H18.498H5.49805H5.49025C5.07604 15.249 4.74025 15.5848 4.74025 15.999V18.249H2.75V10.749H4.94546ZM18.25 9.24902V2.75098H5.75V9.24902H18.25ZM6.24805 16.749H17.748V21.249H6.24805V16.749Z" fill="currentColor" fill-opacity="0.88"/>
+</svg>

src/icons/svg/record.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0005 2.75098C10.4817 2.75098 9.25049 3.98219 9.25049 5.50098V12.001C9.25049 13.5198 10.4817 14.751 12.0005 14.751C13.5193 14.751 14.7505 13.5198 14.7505 12.001V5.50098C14.7505 3.98219 13.5193 2.75098 12.0005 2.75098ZM7.75049 5.50098C7.75049 3.15377 9.65328 1.25098 12.0005 1.25098C14.3477 1.25098 16.2505 3.15377 16.2505 5.50098V12.001C16.2505 14.3482 14.3477 16.251 12.0005 16.251C9.65328 16.251 7.75049 14.3482 7.75049 12.001V5.50098ZM4.5 10.749C4.91421 10.749 5.25 11.0848 5.25 11.499C5.25 15.227 8.27206 18.249 12 18.249C15.7279 18.249 18.75 15.227 18.75 11.499C18.75 11.0848 19.0858 10.749 19.5 10.749C19.9142 10.749 20.25 11.0848 20.25 11.499C20.25 15.8026 16.9549 19.3365 12.75 19.7154V21.999C12.75 22.4132 12.4142 22.749 12 22.749C11.5858 22.749 11.25 22.4132 11.25 21.999V19.7154C7.04511 19.3365 3.75 15.8026 3.75 11.499C3.75 11.0848 4.08579 10.749 4.5 10.749Z" fill="currentColor" fill-opacity="0.88"/>
+</svg>

src/icons/svg/search-text.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.66797 11.418C3.66797 7.13776 7.13776 3.66797 11.418 3.66797C15.6982 3.66797 19.168 7.13776 19.168 11.418C19.168 15.6982 15.6982 19.168 11.418 19.168C7.13776 19.168 3.66797 15.6982 3.66797 11.418ZM11.418 2.16797C6.30933 2.16797 2.16797 6.30933 2.16797 11.418C2.16797 16.5266 6.30933 20.668 11.418 20.668C13.7027 20.668 15.7939 19.8397 17.4078 18.467L19.9702 21.0294C20.2631 21.3222 20.7379 21.3222 21.0308 21.0294C21.3237 20.7365 21.3237 20.2616 21.0308 19.9687L18.4683 17.4062C19.8402 15.7925 20.668 13.7019 20.668 11.418C20.668 6.30933 16.5266 2.16797 11.418 2.16797ZM12.2505 9.24902H14C14.4142 9.24902 14.75 8.91324 14.75 8.49902C14.75 8.08481 14.4142 7.74902 14 7.74902H11.5005H9C8.58579 7.74902 8.25 8.08481 8.25 8.49902C8.25 8.91324 8.58579 9.24902 9 9.24902H10.7505V15.499C10.7505 15.9132 11.0863 16.249 11.5005 16.249C11.9147 16.249 12.2505 15.9132 12.2505 15.499V9.24902Z" fill="currentColor"/>
+</svg>

src/views/bookShelf/articleDetail.vue

@@ -68,6 +68,10 @@
                     <div id="shanxing_main" style="height: 360px"></div>
                 </div>
             </div>
+            <!-- 右侧菜单 -->
+            <div class="mene-right" :style="{background:bgColorList[activeIndex].contentInnerBg,borderColor:bgColorList[activeIndex].glossaryBg}">
+                <menu-right :colorObj="bgColorList[activeIndex]"></menu-right>
+            </div>
         </div>
     </div>
   </div>
@@ -80,6 +84,7 @@ 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 MenuRight from "./components/MenuRight.vue"
 import * as echarts from "echarts";
 export default {
   name: 'articleDetail',
@@ -92,7 +97,8 @@ export default {
     NewWordList,
     PhraseList,
     AnnotationList,
-    NormalModel
+    NormalModel,
+    MenuRight
   },
   data(){
     return{
@@ -134,7 +140,10 @@ export default {
                 annotationTitle:'#4E5969',
                 annotationOhter:'#667180',
                 statisticTitle:'#2F3742',
-                statisticValue:'#3459D2'
+                statisticValue:'#3459D2',
+                menuBg:'#EEF3FF',
+                audiobg:'#FFFFFF',
+                audioBorder:'#EBEBEB'
             },
             {
                 type:'darkGreen',
@@ -170,7 +179,10 @@ export default {
                 phraseColor:'#ED5F00',
                 phraseOhterColor:'#2F3742',
                 statisticTitle:'#393F3C',
-                statisticValue:'#299772'
+                statisticValue:'#299772',
+                menuBg:'#E9F7F2',
+                audiobg:'#ECEFED',
+                audioBorder:'#DFE4E2'
             },
             {
                 type:'darkBlue',
@@ -206,7 +218,10 @@ export default {
                 phraseColor:'#ED5F00',
                 phraseOhterColor:'#929CA8',
                 statisticTitle:'#D0D3D9',
-                statisticValue:'#5373E7'
+                statisticValue:'#5373E7',
+                menuBg:'#EEF3FF',
+                audiobg:'#3E4855',
+                audioBorder:'#2F3742'
             },
             {
                 type:'armyGreen',
@@ -242,7 +257,10 @@ export default {
                 phraseColor:'#ED5F00',
                 phraseOhterColor:'#99A29E',
                 statisticTitle:'#D0D3D9',
-                statisticValue:'#30A47D'
+                statisticValue:'#30A47D',
+                menuBg:'#EEF3FF',
+                audiobg:'#4A524E',
+                audioBorder:'#393F3C'
             }
         ],
         activeIndex:0, // 选择主题色的索引
@@ -591,6 +609,16 @@ export default {
             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;
+        }
     }
     .atricle-data{
         padding: 120px 100px 40px 100px;

src/views/bookShelf/components/MenuRight.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="menu-box">
+        <template v-for="(item,index) in list">
+            <div class="menu-item" :key="index" @click="handleChange(index,item)" :style="{background:activeIndex===index?colorObj.menuBg:'',color:activeIndex===index?colorObj.statisticValue:colorObj.glossaryTitle}" v-if="index<5||foldFlag">
+                <svg-icon :icon-class="item.icon" v-if="item.icon"></svg-icon>
+                <el-switch
+                    v-else
+                    v-model="item.flag"
+                    active-color="#175DFF"
+                    inactive-color="#D0D3D9">
+                </el-switch>
+                <span>{{item.name}}</span>
+            </div>
+            <el-divider :key="index" v-if="index===2||index===4||(index===list.length-1&&foldFlag)" :style="{backgroundColor:colorObj.glossaryBg}"></el-divider>
+        </template>
+        <a class="flod-btn" @click="foldFlag=!foldFlag">{{foldFlag?'收起':'展开'}}<svg-icon :icon-class="foldFlag?'Up-line':'Down-line'"></svg-icon></a>
+    </div>
+    
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ["colorObj"],
+  data() {
+    //这里存放数据
+    return {
+        list:[
+            {
+                icon:'',
+                name:'生词及短语',
+                flag:false
+            },
+            {
+                icon:'record',
+                name:'朗读练习'
+            },
+            {
+                icon:'search-text',
+                name:'文内检索'
+            },
+            {
+                icon:'print',
+                name:'打印文章'
+            },
+            {
+                icon:'share',
+                name:'分享'
+            },
+            {
+                icon:'list',
+                name:'目录'
+            },
+            {
+                icon:'cloud',
+                name:'词云'
+            },
+            {
+                icon:'filtrate',
+                name:'词汇类型'
+            },
+            {
+                icon:'chart',
+                name:'文章信息'
+            },
+            {
+                icon:'',
+                name:'显示笔记',
+                flag:false
+            }
+        ],
+        activeIndex:null,
+        foldFlag:false
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {
+
+  },
+  //方法集合
+  methods: {
+    handleChange(index,item){
+        this.activeIndex = index
+        this.list.forEach(item => {
+            item.flag = false
+        });
+        if(!item.icon){
+            item.flag = true
+        }
+    },
+    handleChangeSwitch(value){
+        this.switchFlag = value
+        if(!this.switchFlag) this.activeIndex = null
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.menu-box{
+    .menu-item{
+        margin: 1px 0;
+        cursor: pointer;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: #2F3742;
+        padding: 4px;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        height: 48px;
+        .svg-icon{
+            width: 40px;
+            height: 40px;
+            padding: 8px;
+        }
+        .el-switch{
+            width: 28px;
+            height: 16px;
+            line-height: 16px;
+            margin: 0 6px;
+        }
+        span{
+            margin-left: 16px;
+        }
+    }
+    .flod-btn{
+        display: block;
+        width: 168px;
+        height: 28px;
+        text-align: center;
+        font-size: 12px;
+        line-height: 28px;
+        color: #99A29E;
+        .svg-icon{
+            margin-left: 4px;
+        }
+    }
+}
+</style>
+<style lang="scss">
+.menu-box{
+    .el-switch__core{
+        height: 16px;
+    }
+    .el-switch__core:after{
+        width: 12px;
+        height: 12px;
+    }
+    .el-switch.is-checked .el-switch__core::after{
+        margin-left: -14px;
+    }
+    .el-divider{
+        margin: 0;
+    }
+}
+</style>

src/views/bookShelf/components/NormalModel.vue

@@ -10,7 +10,7 @@
             class="aduioLine-content aduioLine-box"
             v-if="
                 curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
-            "
+            " :style="{background:colorObj.audiobg,borderColor:colorObj.audioBorder}"
         >
             <AudioLine
                 audioId="artNormalAudio"