课标同根词

public/ciyun/css/jiaocai.css

@@ -212,7 +212,7 @@ line-height: 24px;}
 .h6{color: #ff7043;} /*六级*/
 .h7{color: #e64a19;} /*六级派生*/
 .h12{color: #9C27B0;} /*考研*/
-.h8{color: #FB508A;} /*导出*/
+.h8{color: #FB508A;} /*课标同根词*/
 .h9{color: #F00;} /*超纲*/
 .h10{color: #9E9E9E;} /*专有：（说明：在黑色背景下使用，白色粗体）*/
 .h11{color: #3C4143;} /*其他*/

src/views/bookShelf/articleDetail.vue

@@ -1315,12 +1315,23 @@ export default {
             ) {
               this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems.forEach(
                 (item) => {
+                  if (item.vlCnName === "导出" || item.vlCnName === "导出词") {
+                    item.vlCnName = "课标同根词";
+                  }
                   item.value = item.vocabCount;
                   item = Object.assign(item, this.vocabularyType[item.vlId]);
                 }
               );
               if (this.articleInfo.art_voc_data) {
                 this.articleInfo.art_voc_data.forEach((item) => {
+                  if (
+                    item.word_explain &&
+                    item.word_explain.vl_level_name &&
+                    (item.word_explain.vl_level_name === "导出" ||
+                      item.word_explain.vl_level_name === "导出词")
+                  ) {
+                    item.word_explain.vl_level_name = "课标同根词";
+                  }
                   item.collect = false;
                 });
               }

src/views/bookShelf/articlePeruseDetail.vue

@@ -341,7 +341,7 @@ export default {
           newWordStar: "#FFB224",
           newWordType: {
             daochu: {
-              text: "导出",
+              text: "课标同根词",
               color: "#F5319D",
               bg: "#FFE8F1",
             },
@@ -382,7 +382,7 @@ export default {
           newWordStar: "#FFB224",
           newWordType: {
             daochu: {
-              text: "导出",
+              text: "课标同根词",
               color: "#F5319D",
               bg: "#FFE8F1",
             },
@@ -421,7 +421,7 @@ export default {
           newWordStar: "#816C00",
           newWordType: {
             daochu: {
-              text: "导出",
+              text: "课标同根词",
               color: "#801D45",
               bg: "#F04F88",
             },
@@ -460,7 +460,7 @@ export default {
           newWordStar: "#816C00",
           newWordType: {
             daochu: {
-              text: "导出",
+              text: "课标同根词",
               color: "#801D45",
               bg: "#F04F88",
             },

src/views/bookShelf/components/NewWordList.vue

@@ -1,90 +1,165 @@
 <template>
-    <div v-if="wordList.length>0">
-        <ul>
-            <li v-for="(itemW,indexW) in wordList" :key="indexW" :class="['li-'+colorObj.type]">
-                <svg-icon v-if="itemW.hasVoice&&!voiceSrc||itemW.hasVoice&&activeIndex!==indexW" icon-class="voice" className="icon-voice" @click="handlePlayVoice(itemW,indexW)"></svg-icon>
-                <img v-if="itemW.hasVoice&&voiceSrc&&activeIndex===indexW" :src="voiceSrc" class="icon-voice" />
-                <svg-icon v-if="!itemW.hasVoice" icon-class="voice" className="icon-voice" style="color:rgba(78, 89, 105, 0.3)"></svg-icon>
-                <div class="word-info">
-                    <div class="word-info-top">
-                        <b class="word" @click="showWord(itemW,indexW)" :style="{color:colorObj.newWordColor}">{{itemW.word}}</b>
-                        <span class="symbol" :style="{color:colorObj.newWordOtherColor}">{{itemW.symbol}}</span>
-                        <span class="star" v-if="itemW.rate">
-                            <svg-icon icon-class="star-filled" v-for="(itemS,indexS) in itemW.rate" :key="indexS" :style="{color:colorObj.newWordStar}"></svg-icon>
-                        </span>
-                        <div class="para-list">
-                            <div class="para" v-for="(itemP,indexP) in itemW.paraList" :key="indexP">
-                                <span class="cixing" :style="{color:colorObj.newWordOtherColor}">{{itemP.cixing}}</span>
-                                <span class="shiyi" :style="{color:colorObj.newWordOtherColor}">{{itemP.para}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <label class="word-type" :style="{color:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].color:'',background:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].bg:''}">{{itemW.typeCn}}</label>
-                <template v-if="!noLike">
-                    <svg-icon icon-class="like-line" className="icon-like" v-if="!itemW.collect" @click="handleCollect(itemW)"></svg-icon>
-                    <svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(itemW)"></svg-icon>
-                </template>
-                <!-- <i class="el-icon-arrow-right"></i> -->
-            </li>
-        </ul>
-        <el-dialog
-            :visible.sync="wordcardShow"
-            :show-close="false"
-            :close-on-click-modal="false"
-            width="570px"
-            class="login-dialog"
-            v-if="wordcardShow">
-            <WordCard @closeWord="closeWord" :dataObj="activeItem" :wordList="wordList" :activeObjIndex="activeObjIndex" @changeLike="changeLike" :likePhrase="likeWord"/>
-        </el-dialog>
-    </div>
-    
+  <div v-if="wordList.length > 0">
+    <ul>
+      <li
+        v-for="(itemW, indexW) in wordList"
+        :key="indexW"
+        :class="['li-' + colorObj.type]"
+      >
+        <svg-icon
+          v-if="
+            (itemW.hasVoice && !voiceSrc) ||
+            (itemW.hasVoice && activeIndex !== indexW)
+          "
+          icon-class="voice"
+          className="icon-voice"
+          @click="handlePlayVoice(itemW, indexW)"
+        ></svg-icon>
+        <img
+          v-if="itemW.hasVoice && voiceSrc && activeIndex === indexW"
+          :src="voiceSrc"
+          class="icon-voice"
+        />
+        <svg-icon
+          v-if="!itemW.hasVoice"
+          icon-class="voice"
+          className="icon-voice"
+          style="color: rgba(78, 89, 105, 0.3)"
+        ></svg-icon>
+        <div class="word-info">
+          <div class="word-info-top">
+            <b
+              class="word"
+              @click="showWord(itemW, indexW)"
+              :style="{ color: colorObj.newWordColor }"
+              >{{ itemW.word }}</b
+            >
+            <span
+              class="symbol"
+              :style="{ color: colorObj.newWordOtherColor }"
+              >{{ itemW.symbol }}</span
+            >
+            <span class="star" v-if="itemW.rate">
+              <svg-icon
+                icon-class="star-filled"
+                v-for="(itemS, indexS) in itemW.rate"
+                :key="indexS"
+                :style="{ color: colorObj.newWordStar }"
+              ></svg-icon>
+            </span>
+            <div class="para-list">
+              <div
+                class="para"
+                v-for="(itemP, indexP) in itemW.paraList"
+                :key="indexP"
+              >
+                <span
+                  class="cixing"
+                  :style="{ color: colorObj.newWordOtherColor }"
+                  >{{ itemP.cixing }}</span
+                >
+                <span
+                  class="shiyi"
+                  :style="{ color: colorObj.newWordOtherColor }"
+                  >{{ itemP.para }}</span
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <label
+          class="word-type"
+          :style="{
+            color: colorObj.newWordType[itemW.type]
+              ? colorObj.newWordType[itemW.type].color
+              : '',
+            background: colorObj.newWordType[itemW.type]
+              ? colorObj.newWordType[itemW.type].bg
+              : '',
+          }"
+          >{{ itemW.typeCn }}</label
+        >
+        <template v-if="!noLike">
+          <svg-icon
+            icon-class="like-line"
+            className="icon-like"
+            v-if="!itemW.collect"
+            @click="handleCollect(itemW)"
+          ></svg-icon>
+          <svg-icon
+            icon-class="like"
+            className="icon-like active"
+            v-else
+            @click="handleCollect(itemW)"
+          ></svg-icon>
+        </template>
+        <!-- <i class="el-icon-arrow-right"></i> -->
+      </li>
+    </ul>
+    <el-dialog
+      :visible.sync="wordcardShow"
+      :show-close="false"
+      :close-on-click-modal="false"
+      width="570px"
+      class="login-dialog"
+      v-if="wordcardShow"
+    >
+      <WordCard
+        @closeWord="closeWord"
+        :dataObj="activeItem"
+        :wordList="wordList"
+        :activeObjIndex="activeObjIndex"
+        @changeLike="changeLike"
+        :likePhrase="likeWord"
+      />
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import { getLogin } from "@/api/ajax";
-import WordCard from "../../personalCenter/components/WordCard.vue"
+import WordCard from "../../personalCenter/components/WordCard.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: {WordCard},
-  props: ["list","colorObj","likeWordList","noLike"],
+  components: { WordCard },
+  props: ["list", "colorObj", "likeWordList", "noLike"],
   data() {
     //这里存放数据
     return {
-        wordcardShow: false, // 词汇卡片flag
-        wordList: [],
-        audio: new Audio(),
-        voiceSrc: "",
-        voicePauseSrc: '',
-        voicePlaySrc: require("../../../assets/voice-play-red.png"),
-        activeIndex: null,
-        likeWord: JSON.parse(JSON.stringify(this.likeWordList)),
-        activeItem: null,
-        activeObjIndex: null,
-    }
+      wordcardShow: false, // 词汇卡片flag
+      wordList: [],
+      audio: new Audio(),
+      voiceSrc: "",
+      voicePauseSrc: "",
+      voicePlaySrc: require("../../../assets/voice-play-red.png"),
+      activeIndex: null,
+      likeWord: JSON.parse(JSON.stringify(this.likeWordList)),
+      activeItem: null,
+      activeObjIndex: null,
+    };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
   watch: {
-    list:{
+    list: {
       handler(val, oldVal) {
         const _this = this;
         if (val) {
-          this.handleData()
+          this.handleData();
         }
       },
       // 深度观察监听
       deep: true,
     },
-    likeWordList:{
+    likeWordList: {
       handler(val, oldVal) {
         const _this = this;
         if (val) {
-          this.likeWord= JSON.parse(JSON.stringify(this.likeWordList))
-          this.handleData()
+          this.likeWord = JSON.parse(JSON.stringify(this.likeWordList));
+          this.handleData();
         }
       },
       // 深度观察监听
@@ -94,294 +169,304 @@ export default {
   //方法集合
   methods: {
     // 收藏
-    handleCollect(item){
-        if(item.collect){
-            let MethodName = "/ShopServer/Client/CollectManager/CancelCollect_Word";
-            let data = {
-                word: item.word,
+    handleCollect(item) {
+      if (item.collect) {
+        let MethodName = "/ShopServer/Client/CollectManager/CancelCollect_Word";
+        let data = {
+          word: item.word,
+        };
+        getLogin(MethodName, data)
+          .then((res) => {
+            this.loading = false;
+            if (res.status === 1) {
+              item.collect = false;
+              this.$message({
+                message: "取消收藏",
+                type: "success",
+              });
+              this.likeWord.splice(this.likeWord.indexOf(item.word), 1);
+              this.$emit("changeLike", "likePhraseList", this.likeWord);
             }
-            getLogin(MethodName, data)
-            .then((res) => {
-                this.loading = false
-                if(res.status===1){
-                    item.collect = false
-                    this.$message({
-                        message: "取消收藏",
-                        type: "success",
-                    });
-                    this.likeWord.splice(this.likeWord.indexOf(item.word),1)
-                    this.$emit('changeLike','likePhraseList',this.likeWord)
-                }
-            })
-            .catch(() => {
-            });
-        }else{
-            let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Word";
-            let data = {
-                word: item.word,
-                pinyin: item.symbol,
-                explain: JSON.stringify(item.paraList),
-                is_new: "true",
-                audio_file_id: item.word_explain&&item.word_explain.ph_mp3_id?item.word_explain.ph_mp3_id:'',
-                audio_file_url: item.word_explain&&item.word_explain.ph_file_url?item.word_explain.ph_file_url:'',
-                article_id: this.$route.query.id,
-                word_id: item.id
+          })
+          .catch(() => {});
+      } else {
+        let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Word";
+        let data = {
+          word: item.word,
+          pinyin: item.symbol,
+          explain: JSON.stringify(item.paraList),
+          is_new: "true",
+          audio_file_id:
+            item.word_explain && item.word_explain.ph_mp3_id
+              ? item.word_explain.ph_mp3_id
+              : "",
+          audio_file_url:
+            item.word_explain && item.word_explain.ph_file_url
+              ? item.word_explain.ph_file_url
+              : "",
+          article_id: this.$route.query.id,
+          word_id: item.id,
+        };
+        getLogin(MethodName, data)
+          .then((res) => {
+            this.loading = false;
+            this.$forceUpdate();
+            if (res.status === 1) {
+              item.collect = true;
+              this.$message({
+                message: "收藏成功",
+                type: "success",
+              });
+              this.likeWord.push(item.word);
+              this.$emit("changeLike", "likeWordList", this.likeWord);
             }
-            getLogin(MethodName, data)
-            .then((res) => {
-                this.loading = false
-                this.$forceUpdate()
-                if(res.status===1){
-                    item.collect = true
-                    this.$message({
-                        message: "收藏成功",
-                        type: "success",
-                    });
-                    this.likeWord.push(item.word)
-                    this.$emit('changeLike','likeWordList',this.likeWord)
-                }
-            })
-            .catch(() => {
-            }); 
-        }
+          })
+          .catch(() => {});
+      }
     },
     // 查看单词卡片
-    showWord(obj,indexi){
-        this.wordcardShow = true
-        this.activeObjIndex = indexi  
-        this.activeItem = obj
+    showWord(obj, indexi) {
+      this.wordcardShow = true;
+      this.activeObjIndex = indexi;
+      this.activeItem = obj;
     },
     // 关闭单词卡片
-    closeWord(){
-        this.wordcardShow = false
+    closeWord() {
+      this.wordcardShow = false;
     },
-    async handlePlayVoice(item,index) {
+    async handlePlayVoice(item, index) {
       let _this = this;
-      let url = ''
-      if(item.originalObj.word_explain.ph_mp3_id){
-        await getLogin('/FileServer/GetFileInfo', {file_id:item.originalObj.word_explain.ph_mp3_id})
-        .then((res) => {
-            if(res.status===1){
-                url = res.file_url
-            }
-        })
-      }else if(item.originalObj.word_explain.ph_file_url){
-        url = item.originalObj.word_explain.ph_file_url
+      let url = "";
+      if (item.originalObj.word_explain.ph_mp3_id) {
+        await getLogin("/FileServer/GetFileInfo", {
+          file_id: item.originalObj.word_explain.ph_mp3_id,
+        }).then((res) => {
+          if (res.status === 1) {
+            url = res.file_url;
+          }
+        });
+      } else if (item.originalObj.word_explain.ph_file_url) {
+        url = item.originalObj.word_explain.ph_file_url;
       }
       if (!url) {
         return;
       }
-    //   if (!this.audio.paused) {
-    //     this.audio.pause();
-    //   } else 
+      //   if (!this.audio.paused) {
+      //     this.audio.pause();
+      //   } else
       {
         _this.audio.pause();
         _this.audio.load();
         _this.audio.src = url;
         _this.audio.loop = false;
         _this.audio.play();
-        _this.activeIndex = index
+        _this.activeIndex = index;
       }
     },
-    handleData(){
-        this.wordList = []
-        let wordList = JSON.parse(JSON.stringify(this.list))
-        wordList.forEach(items => {
-            let obj = {
-                src: items.ph_file_url?items.ph_file_url:'',
-                word: items.word_name,
-                symbol: items.word_explain.ph?items.word_explain.ph:'',
-                paraList: items.word_explain.word_para_list,
-                type: items.word_explain.vl_level?items.word_explain.vl_level:'',
-                typeCn: items.word_explain.vl_level_name?items.word_explain.vl_level_name:'',
-                rate: items.word_explain.star?items.word_explain.star:null,
-                originalObj: items,
-                hasVoice: items.word_explain.ph_mp3_id||items.word_explain.ph_file_url?true:false,
-                id: items.id,
-                collect: this.likeWord.indexOf(items.word_name)>-1?true:false,
-                isNew: true
-            }
-            this.wordList.push(obj)
-        });
-        // console.log(this.likeWordList)
-        // console.log(this.likeWord)
+    handleData() {
+      this.wordList = [];
+      let wordList = JSON.parse(JSON.stringify(this.list));
+      wordList.forEach((items) => {
+        let obj = {
+          src: items.ph_file_url ? items.ph_file_url : "",
+          word: items.word_name,
+          symbol: items.word_explain.ph ? items.word_explain.ph : "",
+          paraList: items.word_explain.word_para_list,
+          type: items.word_explain.vl_level ? items.word_explain.vl_level : "",
+          typeCn: items.word_explain.vl_level_name
+            ? items.word_explain.vl_level_name
+            : "",
+          rate: items.word_explain.star ? items.word_explain.star : null,
+          originalObj: items,
+          hasVoice:
+            items.word_explain.ph_mp3_id || items.word_explain.ph_file_url
+              ? true
+              : false,
+          id: items.id,
+          collect: this.likeWord.indexOf(items.word_name) > -1 ? true : false,
+          isNew: true,
+        };
+        this.wordList.push(obj);
+      });
+      // console.log(this.likeWordList)
+      // console.log(this.likeWord)
+    },
+    changeLike(obj, list) {
+      this.$emit("changeLike", obj, list);
     },
-    changeLike(obj,list){
-        this.$emit('changeLike',obj,list)
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.handleData()
+    this.handleData();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
     _this.voiceSrc = _this.voicePauseSrc;
     _this.audio.addEventListener("play", function () {
-    //   console.log("播放");
+      //   console.log("播放");
       _this.voiceSrc = _this.voicePlaySrc;
     });
     _this.audio.addEventListener("pause", function () {
       _this.voiceSrc = _this.voicePauseSrc;
     });
     _this.audio.addEventListener("ended", function () {
-    //   console.log("停止");
+      //   console.log("停止");
       _this.voiceSrc = _this.voicePauseSrc;
     });
   },
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-ul{
-    li{
-        padding: 8px;
-        display: flex;
-        margin: 1px 0;
-        border-radius: 4px;
-        // &:hover{
-        //     background: #FFFFFF;
-        // }
-        // &.li-darkGreen{
-        //     &:hover{
-        //         background: #ECEFED;
-        //     }
-        // }
-        // &.li-darkBlue{
-        //     &:hover{
-        //         background: #4E5969;
-        //     }
-        // }
-        // &.li-armyGreen{
-        //     &:hover{
-        //         background: #66736D;
-        //     }
-        // }
-        .icon-voice{
-            width: 24px;
-            height: 24px;
-            padding: 4px;
-            color: #4E5969;
-            margin-right: 8px;
-            cursor: pointer;
-            border-radius: 20px;
-            &:hover{
-                background: #E5E6EB;
-            }
-        }
-        .xuhao{
-            min-width: 22px;
-            display: block;
-            font-size: 14px;
-            line-height: 22px;
-            color: #2F3742;
-        }
-        .word-info{
-            flex: 1;
-        }
-        .sentence{
-            font-size: 14px;
-            line-height: 22px;
-            color: #2F3742;
-        }
-        .icon-like{
-            // color: #F2555A;
-            width: 24px;
-            height: 24px;
-            padding: 4px;
-            font-size: 16px;
-            margin: 0 0 0 8px;
-            cursor: pointer;
-            border-radius: 20px;
-            &:hover{
-                background: #E5E6EB;
-            }
-            &.active{
-              color: #F2555A;  
-            }
-        }
-        .word-type{
-            padding: 1px 8px;
-            border-radius: 2px;
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 22px;
-            height: 26px;
-        }
-        .el-icon-arrow-right{
-            width: 24px;
-            height: 24px;
-            color: #929CA8;
-            text-align: center;
-            line-height: 24px;
-            cursor: pointer;
-        }
-        .word-info-top{
-            display: flex;
-            .word{
-                font-weight: 700;
-                font-size: 14px;
-                line-height: 22px;
-                color: #175DFF;
-                margin-right: 8px;
-                font-family: 'Arial';
-                cursor: pointer;
-            }
-            .phrase{
-                font-weight: 500;
-                font-size: 14px;
-                line-height: 22px;
-                color: #ED5F00;
-            }
-            .symbol{
-                font-size: 14px;
-                line-height: 22px;
-                color: #4E5969;
-                margin-right: 8px;
-                font-family: 'Arial';
-            }
-            .star{
-                margin-right: 8px;
-                line-height: 20px;
-            }
-            .para-list{
-                flex: 1;
-                .para{
-                    display: flex;
-                    font-size: 14px;
-                    line-height: 22px;
-                    color: #4E5969;
-                    margin-bottom: 4px;
-                    .cixing{
-                        margin-right: 4px;
-                    }
-                }
-            }
-        }
-        .word-info-bottom{
-            font-size: 12px;
-            line-height: 20px;
-            color: #929CA8;
-            margin: 4px 8px 0 0;
-            span{
-                margin-right: 8px;
-            }
+ul {
+  li {
+    padding: 8px;
+    display: flex;
+    margin: 1px 0;
+    border-radius: 4px;
+    // &:hover{
+    //     background: #FFFFFF;
+    // }
+    // &.li-darkGreen{
+    //     &:hover{
+    //         background: #ECEFED;
+    //     }
+    // }
+    // &.li-darkBlue{
+    //     &:hover{
+    //         background: #4E5969;
+    //     }
+    // }
+    // &.li-armyGreen{
+    //     &:hover{
+    //         background: #66736D;
+    //     }
+    // }
+    .icon-voice {
+      width: 24px;
+      height: 24px;
+      padding: 4px;
+      color: #4e5969;
+      margin-right: 8px;
+      cursor: pointer;
+      border-radius: 20px;
+      &:hover {
+        background: #e5e6eb;
+      }
+    }
+    .xuhao {
+      min-width: 22px;
+      display: block;
+      font-size: 14px;
+      line-height: 22px;
+      color: #2f3742;
+    }
+    .word-info {
+      flex: 1;
+    }
+    .sentence {
+      font-size: 14px;
+      line-height: 22px;
+      color: #2f3742;
+    }
+    .icon-like {
+      // color: #F2555A;
+      width: 24px;
+      height: 24px;
+      padding: 4px;
+      font-size: 16px;
+      margin: 0 0 0 8px;
+      cursor: pointer;
+      border-radius: 20px;
+      &:hover {
+        background: #e5e6eb;
+      }
+      &.active {
+        color: #f2555a;
+      }
+    }
+    .word-type {
+      padding: 1px 8px;
+      border-radius: 2px;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 22px;
+      height: 26px;
+    }
+    .el-icon-arrow-right {
+      width: 24px;
+      height: 24px;
+      color: #929ca8;
+      text-align: center;
+      line-height: 24px;
+      cursor: pointer;
+    }
+    .word-info-top {
+      display: flex;
+      .word {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 22px;
+        color: #175dff;
+        margin-right: 8px;
+        font-family: "Arial";
+        cursor: pointer;
+      }
+      .phrase {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+        color: #ed5f00;
+      }
+      .symbol {
+        font-size: 14px;
+        line-height: 22px;
+        color: #4e5969;
+        margin-right: 8px;
+        font-family: "Arial";
+      }
+      .star {
+        margin-right: 8px;
+        line-height: 20px;
+      }
+      .para-list {
+        flex: 1;
+        .para {
+          display: flex;
+          font-size: 14px;
+          line-height: 22px;
+          color: #4e5969;
+          margin-bottom: 4px;
+          .cixing {
+            margin-right: 4px;
+          }
         }
+      }
+    }
+    .word-info-bottom {
+      font-size: 12px;
+      line-height: 20px;
+      color: #929ca8;
+      margin: 4px 8px 0 0;
+      span {
+        margin-right: 8px;
+      }
     }
+  }
 }
-</style>
+</style>

src/views/personalCenter/components/PersonalInfo.vue

@@ -1,183 +1,189 @@
 <template>
   <div class="personal-info" v-loading="loading">
     <div class="personal-info-top">
-        <div class="avator-box">
-           <el-image
-            :src="data.avatar?data.avatar:require('../../../assets/avatar.png')"
-            fit="cover" style="width:96px;height:96px;">
-          </el-image>
+      <div class="avator-box">
+        <el-image
+          :src="
+            data.avatar ? data.avatar : require('../../../assets/avatar.png')
+          "
+          fit="cover"
+          style="width: 96px; height: 96px"
+        >
+        </el-image>
+      </div>
+      <div class="center">
+        <p class="name">{{ data.name }}</p>
+        <span class="org_name">{{ data.org_name }}</span>
+        <!-- <span class="class">{{data.class}}</span> -->
+      </div>
+      <div class="right" v-if="readInfo">
+        <div class="item">
+          <p>共阅读文章</p>
+          <b class="number">{{ readInfo.article_count }}</b>
+          <span>篇</span>
         </div>
-        <div class="center">
-            <p class="name">{{data.name}}</p>
-            <span class="org_name">{{data.org_name}}</span>
-            <!-- <span class="class">{{data.class}}</span> -->
+        <el-divider direction="vertical"></el-divider>
+        <div class="item">
+          <p>累计阅读时长</p>
+          <b class="number">{{ readInfo.durationStr }}</b>
+          <span>小时</span>
         </div>
-        <div class="right" v-if="readInfo">
-            <div class="item">
-                <p>共阅读文章</p>
-                <b class="number">{{readInfo.article_count}}</b>
-                <span>篇</span>
-            </div>
-            <el-divider direction="vertical"></el-divider>
-            <div class="item">
-                <p>累计阅读时长</p>
-                <b class="number">{{readInfo.durationStr}}</b>
-                <span>小时</span>
-            </div>
-            <el-divider direction="vertical"></el-divider>
-            <div class="item">
-                <p>共阅读词数</p>
-                <b class="number">{{readInfo.article_diff_word_count}}</b>
-                <span>词</span>
-            </div>
-            <el-divider direction="vertical"></el-divider>
-            <div class="item">
-                <p>累计阅读长度</p>
-                <b class="number">{{readInfo.article_word_count}}</b>
-                <span>词</span>
-            </div>
+        <el-divider direction="vertical"></el-divider>
+        <div class="item">
+          <p>共阅读词数</p>
+          <b class="number">{{ readInfo.article_diff_word_count }}</b>
+          <span>词</span>
         </div>
+        <el-divider direction="vertical"></el-divider>
+        <div class="item">
+          <p>累计阅读长度</p>
+          <b class="number">{{ readInfo.article_word_count }}</b>
+          <span>词</span>
+        </div>
+      </div>
     </div>
     <div class="personal-info-bottom">
-        <!-- <div class="tabs-box">
+      <!-- <div class="tabs-box">
             <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">文章列表</a>
             <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">词汇列表</a>
         </div> -->
-        <template v-if="tabsIndex===0">
-            <!-- 序号默认倒序 文章增加跳转链接 -->
-            <el-table
-                :data="articleList"
-                v-loading="tableLoading"
-                :max-height="tableHeight"
-            >
-                <el-table-column
-                    type="index"
-                    label="#"
-                    width="72"
-                    :index="(pageNumber-1)*pageSize+1">
-                </el-table-column>
-                <el-table-column
-                    prop="title"
-                    label="文章">
-                    <template slot-scope="scope">
-                        <a @click="handleLink(scope.row)" style="color:#165DFF">
-                            {{scope.row.article_title}}
-                        </a>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    prop="study_phase_name"
-                    label="学段"
-                    width="81">
-                </el-table-column>
-                <el-table-column
-                    prop="issue_no_name"
-                    label="来源"
-                    width="197">
-                </el-table-column>
-                <el-table-column
-                    prop="words"
-                    label="词数/长度"
-                    width="140">
-                    <template slot-scope="scope">
-                        {{scope.row.article_diff_word_count+'/'+scope.row.article_word_count}}
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    prop="duration"
-                    label="阅读时长"
-                    width="140">
-                    <template slot-scope="scope">
-                        {{formatterDuration(scope.row)}}
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    prop="reading_time"
-                    label="阅读时间"
-                    width="160">
-                    <template slot-scope="scope">
-                        {{scope.row.reading_time?scope.row.reading_time.substring(0,16):'-'}}
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-pagination
-                background
-                @size-change="(val)=>handleSizeChange(val,'pageSize','pageNumber')"
-                @current-change="(val)=>handleCurrentChange(val,'pageNumber')"
-                :current-page="pageNumber"
-                :page-sizes="[10, 20, 30, 40, 50]"
-                :page-size="pageSize"
-                layout="total, prev, pager, next, sizes, jumper"
-                :total="total_count_a">
-            </el-pagination>
-        </template>
-        <template v-if="tabsIndex===1">
-            <el-table
-                :data="wordList"
-            >
-                <el-table-column
-                    prop="number"
-                    label="#"
-                    width="72"
-                    :index="(pageNumber-1)*pageSize+1">
-                </el-table-column>
-                <el-table-column
-                    prop="word"
-                    label="词汇"
-                    sortable
-                    width="160">
-                </el-table-column>
-                <el-table-column
-                    prop="type"
-                    label="类别"
-                    width="140"
-                    column-key="type">
-                    <template slot="header">
-                        <span>类别</span>
-                        <el-popover
-                            placement="bottom"
-                            width="128"
-                            trigger="click">
-                            <!-- <el-checkbox-group v-model="filterTypeArr" @change="handleChangeFilters"> -->
-                                <el-checkbox v-for="(itemT,indexT) in filtersTypeList" :key="indexT" :label="itemT.value" v-model="itemT.checkBox"  class="popover-checkbox" :checked="itemT.checkBox" @change="handleChangeFilters">{{itemT.text}}</el-checkbox>
-                                <div class="popover-bottom">
-                                    <a class="reset" @click="handleWordList">重置</a>
-                                    <a class="sure" @click="handleWordList">确定</a>
-                                </div>
-                            <!-- </el-checkbox-group> -->
-                            <svg-icon icon-class="filts" class="icon-filts" slot="reference"></svg-icon>
-                        </el-popover>
-                    </template>
-                    <template slot-scope="scope">
-                        <span class="type-label" :style="{color:wordTypeList[scope.row.type].color,background:wordTypeList[scope.row.type].bg}">{{wordTypeList[scope.row.type].text}}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    prop="source"
-                    label="来源">
-                </el-table-column>
-                <el-table-column
-                    prop="version"
-                    label="版本"
-                    width="140">
-                </el-table-column>
-                <el-table-column
-                    prop="studyDate"
-                    label="学习时间"
-                    width="160">
-                </el-table-column>
-            </el-table>
-            <el-pagination
-                background
-                @size-change="(val)=>handleSizeChange(val,'pageSizes','pageNumbers')"
-                @current-change="(val)=>handleCurrentChange(val,'pageNumbers')"
-                :current-page="pageNumbers"
-                :page-sizes="[10, 20, 30, 40, 50]"
-                :page-size="pageSizes"
-                layout="total, prev, pager, next, sizes, jumper"
-                :total="total_count_w">
-            </el-pagination>
-        </template>
+      <template v-if="tabsIndex === 0">
+        <!-- 序号默认倒序 文章增加跳转链接 -->
+        <el-table
+          :data="articleList"
+          v-loading="tableLoading"
+          :max-height="tableHeight"
+        >
+          <el-table-column
+            type="index"
+            label="#"
+            width="72"
+            :index="(pageNumber - 1) * pageSize + 1"
+          >
+          </el-table-column>
+          <el-table-column prop="title" label="文章">
+            <template slot-scope="scope">
+              <a @click="handleLink(scope.row)" style="color: #165dff">
+                {{ scope.row.article_title }}
+              </a>
+            </template>
+          </el-table-column>
+          <el-table-column prop="study_phase_name" label="学段" width="81">
+          </el-table-column>
+          <el-table-column prop="issue_no_name" label="来源" width="197">
+          </el-table-column>
+          <el-table-column prop="words" label="词数/长度" width="140">
+            <template slot-scope="scope">
+              {{
+                scope.row.article_diff_word_count +
+                "/" +
+                scope.row.article_word_count
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="duration" label="阅读时长" width="140">
+            <template slot-scope="scope">
+              {{ formatterDuration(scope.row) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="reading_time" label="阅读时间" width="160">
+            <template slot-scope="scope">
+              {{
+                scope.row.reading_time
+                  ? scope.row.reading_time.substring(0, 16)
+                  : "-"
+              }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          background
+          @size-change="
+            (val) => handleSizeChange(val, 'pageSize', 'pageNumber')
+          "
+          @current-change="(val) => handleCurrentChange(val, 'pageNumber')"
+          :current-page="pageNumber"
+          :page-sizes="[10, 20, 30, 40, 50]"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, sizes, jumper"
+          :total="total_count_a"
+        >
+        </el-pagination>
+      </template>
+      <template v-if="tabsIndex === 1">
+        <el-table :data="wordList">
+          <el-table-column
+            prop="number"
+            label="#"
+            width="72"
+            :index="(pageNumber - 1) * pageSize + 1"
+          >
+          </el-table-column>
+          <el-table-column prop="word" label="词汇" sortable width="160">
+          </el-table-column>
+          <el-table-column
+            prop="type"
+            label="类别"
+            width="140"
+            column-key="type"
+          >
+            <template slot="header">
+              <span>类别</span>
+              <el-popover placement="bottom" width="128" trigger="click">
+                <!-- <el-checkbox-group v-model="filterTypeArr" @change="handleChangeFilters"> -->
+                <el-checkbox
+                  v-for="(itemT, indexT) in filtersTypeList"
+                  :key="indexT"
+                  :label="itemT.value"
+                  v-model="itemT.checkBox"
+                  class="popover-checkbox"
+                  :checked="itemT.checkBox"
+                  @change="handleChangeFilters"
+                  >{{ itemT.text }}</el-checkbox
+                >
+                <div class="popover-bottom">
+                  <a class="reset" @click="handleWordList">重置</a>
+                  <a class="sure" @click="handleWordList">确定</a>
+                </div>
+                <!-- </el-checkbox-group> -->
+                <svg-icon
+                  icon-class="filts"
+                  class="icon-filts"
+                  slot="reference"
+                ></svg-icon>
+              </el-popover>
+            </template>
+            <template slot-scope="scope">
+              <span
+                class="type-label"
+                :style="{
+                  color: wordTypeList[scope.row.type].color,
+                  background: wordTypeList[scope.row.type].bg,
+                }"
+                >{{ wordTypeList[scope.row.type].text }}</span
+              >
+            </template>
+          </el-table-column>
+          <el-table-column prop="source" label="来源"> </el-table-column>
+          <el-table-column prop="version" label="版本" width="140">
+          </el-table-column>
+          <el-table-column prop="studyDate" label="学习时间" width="160">
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          background
+          @size-change="
+            (val) => handleSizeChange(val, 'pageSizes', 'pageNumbers')
+          "
+          @current-change="(val) => handleCurrentChange(val, 'pageNumbers')"
+          :current-page="pageNumbers"
+          :page-sizes="[10, 20, 30, 40, 50]"
+          :page-size="pageSizes"
+          layout="total, prev, pager, next, sizes, jumper"
+          :total="total_count_w"
+        >
+        </el-pagination>
+      </template>
     </div>
   </div>
 </template>
@@ -189,268 +195,269 @@ import { getLogin } from "@/api/ajax";
 import { formatSeconds } from "@/utils/index";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { },
+  components: {},
   props: [],
   data() {
     //这里存放数据
     return {
-        tabsIndex: 0, // tab
-        articleList: [
-            {
-                number:'461',
-                title:'Making room for the pet boom',
-                study:'高一',
-                source:'第865期',
-                words:'161/321',
-                readTime:'3分48秒',
-                readDate:'2021.3.12 15:23'
-            },
-            {
-                number:'460',
-                title:'KEY NOTIONS IN 2023 GOVERNMENT WORK REPORT',
-                study:'高一',
-                source:'第900期',
-                words:'161/321',
-                readTime:'3分48秒',
-                readDate:'2021.3.12 15:23'
-            },
-            {
-                number:'459',
-                title:'每日一练',
-                study:'高一',
-                source:'第865期',
-                words:'161/321',
-                readTime:'3分48秒',
-                readDate:'2021.3.12 15:23'
-            },
-            {
-                number:'458',
-                title:'JUST ASK 成长不烦恼 ',
-                study:'高一',
-                source:'第865期',
-                words:'161/321',
-                readTime:'3分48秒',
-                readDate:'2021.3.12 15:23'
-            },
-        ],
-        pageSize: 10, 
-        pageNumber: 1,
-        wordList:[
-            {
-                number:'4621',
-                word:'cremation',
-                type:1,
-                source:'Wearing memes on the runway',
-                version:'高二',
-                studyDate:'2021.3.12 15:23'
-            },
-            {
-                number:'4620',
-                word:'notion',
-                type:2,
-                source:'Science is the focus',
-                version:'高一',
-                studyDate:'2021.3.12 15:23'
-            },
-            {
-                number:'4619',
-                word:'computer',
-                type:3,
-                source:'Wearing memes on the runway',
-                version:'高二',
-                studyDate:'2021.3.12 15:23'
-            },
-            {
-                number:'4618',
-                word:'cremation',
-                type:4,
-                source:'Wearing memes on the runway',
-                version:'高二',
-                studyDate:'2021.3.12 15:23'
-            },
-        ],
-        pageSizes: 10, 
-        pageNumbers: 1,
-        wordTypeList:{
-            1: {
-                text: '小学',
-                bg: '#F8FCEF',
-                color: '#92D113'
-            },
-            2: {
-                text: '初中',
-                bg: '#F0FCEF',
-                color: '#00C643'
-            },
-            3: {
-                text: '必修',
-                bg: '#E8F7FF',
-                color: '#3491FA'
-            },
-            4: {
-                text: '选必',
-                bg: '#E8F3FF',
-                color: '#165DFF'
-            },
-            5: {
-                text: '导出',
-                bg: '#FFE8F1',
-                color: '#F5319D'
-            },
-            6: {
-                text: '超纲',
-                bg: '#FFECE8',
-                color: '#F53F3F'
-            },
-            7: {
-                text: '专有',
-                bg: '#9E9E9E;',
-                color: '#CBCBCB'
-            },
-            10: {
-                text: '其他',
-                bg: '#F4F4F4',
-                color: '#737373'
-            }
+      tabsIndex: 0, // tab
+      articleList: [
+        {
+          number: "461",
+          title: "Making room for the pet boom",
+          study: "高一",
+          source: "第865期",
+          words: "161/321",
+          readTime: "3分48秒",
+          readDate: "2021.3.12 15:23",
         },
-        filtersTypeList:[
-            {
-                text:'必修',
-                value:'3',
-                checkBox:''
-            },
-            {
-                text:'选必',
-                value:'4',
-                checkBox:''
-            },
-            {
-                text:'导出',
-                value:'5',
-                checkBox:''
-            },
-            {
-                text:'超纲',
-                value:'6',
-                checkBox:''
-            }
-        ],
-        filterTypeArr: [],
-        total_count_a: 0,
-        total_count_w: 0,
-        data: {
-            avatar: '',
-            name: '',
-            org_name: ''
+        {
+          number: "460",
+          title: "KEY NOTIONS IN 2023 GOVERNMENT WORK REPORT",
+          study: "高一",
+          source: "第900期",
+          words: "161/321",
+          readTime: "3分48秒",
+          readDate: "2021.3.12 15:23",
         },
-        loading: false,
-        readInfo: null,
-        tableLoading: false,
-        tableHeight: "", // 表格高度
-    }
+        {
+          number: "459",
+          title: "每日一练",
+          study: "高一",
+          source: "第865期",
+          words: "161/321",
+          readTime: "3分48秒",
+          readDate: "2021.3.12 15:23",
+        },
+        {
+          number: "458",
+          title: "JUST ASK 成长不烦恼 ",
+          study: "高一",
+          source: "第865期",
+          words: "161/321",
+          readTime: "3分48秒",
+          readDate: "2021.3.12 15:23",
+        },
+      ],
+      pageSize: 10,
+      pageNumber: 1,
+      wordList: [
+        {
+          number: "4621",
+          word: "cremation",
+          type: 1,
+          source: "Wearing memes on the runway",
+          version: "高二",
+          studyDate: "2021.3.12 15:23",
+        },
+        {
+          number: "4620",
+          word: "notion",
+          type: 2,
+          source: "Science is the focus",
+          version: "高一",
+          studyDate: "2021.3.12 15:23",
+        },
+        {
+          number: "4619",
+          word: "computer",
+          type: 3,
+          source: "Wearing memes on the runway",
+          version: "高二",
+          studyDate: "2021.3.12 15:23",
+        },
+        {
+          number: "4618",
+          word: "cremation",
+          type: 4,
+          source: "Wearing memes on the runway",
+          version: "高二",
+          studyDate: "2021.3.12 15:23",
+        },
+      ],
+      pageSizes: 10,
+      pageNumbers: 1,
+      wordTypeList: {
+        1: {
+          text: "小学",
+          bg: "#F8FCEF",
+          color: "#92D113",
+        },
+        2: {
+          text: "初中",
+          bg: "#F0FCEF",
+          color: "#00C643",
+        },
+        3: {
+          text: "必修",
+          bg: "#E8F7FF",
+          color: "#3491FA",
+        },
+        4: {
+          text: "选必",
+          bg: "#E8F3FF",
+          color: "#165DFF",
+        },
+        5: {
+          text: "课标同根词",
+          bg: "#FFE8F1",
+          color: "#F5319D",
+        },
+        6: {
+          text: "超纲",
+          bg: "#FFECE8",
+          color: "#F53F3F",
+        },
+        7: {
+          text: "专有",
+          bg: "#9E9E9E;",
+          color: "#CBCBCB",
+        },
+        10: {
+          text: "其他",
+          bg: "#F4F4F4",
+          color: "#737373",
+        },
+      },
+      filtersTypeList: [
+        {
+          text: "必修",
+          value: "3",
+          checkBox: "",
+        },
+        {
+          text: "选必",
+          value: "4",
+          checkBox: "",
+        },
+        {
+          text: "课标同根词",
+          value: "5",
+          checkBox: "",
+        },
+        {
+          text: "超纲",
+          value: "6",
+          checkBox: "",
+        },
+      ],
+      filterTypeArr: [],
+      total_count_a: 0,
+      total_count_w: 0,
+      data: {
+        avatar: "",
+        name: "",
+        org_name: "",
+      },
+      loading: false,
+      readInfo: null,
+      tableLoading: false,
+      tableHeight: "", // 表格高度
+    };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {
-
-  },
+  watch: {},
   //方法集合
   methods: {
-    formatterDuration(row){
-        let studyCn = ''
-        if(row.duration){
-            studyCn = formatSeconds(row.duration)
-        }else{
-            studyCn = '0'
-        }
-        return studyCn
+    formatterDuration(row) {
+      let studyCn = "";
+      if (row.duration) {
+        studyCn = formatSeconds(row.duration);
+      } else {
+        studyCn = "0";
+      }
+      return studyCn;
     },
     // 切换tabs
-    handleChangeTabs(value){
-        this.tabsIndex = value
-        this.getList()
+    handleChangeTabs(value) {
+      this.tabsIndex = value;
+      this.getList();
     },
-    handleSizeChange(val,type,page) {
-        this[type] = val
-        this[page] = 1
-        this.getList()
+    handleSizeChange(val, type, page) {
+      this[type] = val;
+      this[page] = 1;
+      this.getList();
     },
-    handleCurrentChange(val,type) {
-        this[type] = val
-        this.getList()
+    handleCurrentChange(val, type) {
+      this[type] = val;
+      this.getList();
     },
     // 跳转文章
-    handleLink(row){
-        let url  = '0&&&123&&&123&&&123'
-        if(row.goods_type===21){
-            this.$router.push({
-                path: "/articleDetail",
-                query: {
-                    headerConfig: encodeURIComponent(url),
-                    id: row.article_id
-                }, 
-            });
-        }else if(row.goods_type===3){
-            this.$router.push({
-                path: "/articlePeruseDetail",
-                query: {
-                    headerConfig: encodeURIComponent(url),
-                    peruseId: row.article_id
-                },
-            });
-        }
-        
+    handleLink(row) {
+      let url = "0&&&123&&&123&&&123";
+      if (row.goods_type === 21) {
+        this.$router.push({
+          path: "/articleDetail",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            id: row.article_id,
+          },
+        });
+      } else if (row.goods_type === 3) {
+        this.$router.push({
+          path: "/articlePeruseDetail",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            peruseId: row.article_id,
+          },
+        });
+      }
     },
-    handleChangeFilters(item){
-        console.log(item)
-        // if(this.filterTypeArr.indexOf(value)==-1){
-        //     this.filterTypeArr.push(value)
-        // }else{
-        //     this.filterTypeArr.splice(this.filterTypeArr.indexOf(value),1)
-        // }
+    handleChangeFilters(item) {
+      console.log(item);
+      // if(this.filterTypeArr.indexOf(value)==-1){
+      //     this.filterTypeArr.push(value)
+      // }else{
+      //     this.filterTypeArr.splice(this.filterTypeArr.indexOf(value),1)
+      // }
     },
     // 查询词汇列表
-    handleWordList(){
-        this.filterTypeArr=[]
+    handleWordList() {
+      this.filterTypeArr = [];
     },
-    getInfo(){
-        let MethodName = "/OrgServer/Client/PersonManager/GetMyInfo";
-        let data = {}
-        getLogin(MethodName, data)
+    getInfo() {
+      let MethodName = "/OrgServer/Client/PersonManager/GetMyInfo";
+      let data = {};
+      getLogin(MethodName, data)
         .then((res) => {
-            if(res.status===1){
-                this.data.name = res.person.user_name
-                this.data.avatar = res.person.image_url
-                this.data.org_name = res.person.org_name
-            }
-        }).catch((res) =>{
+          if (res.status === 1) {
+            this.data.name = res.person.user_name;
+            this.data.avatar = res.person.image_url;
+            this.data.org_name = res.person.org_name;
+          }
         })
+        .catch((res) => {});
     },
-    getList(){
-        this.loading = true
-        let MethodName = "/ShopServer/Client/ReadingRecordManager/PageQueryMyReadingRecord_Article";
-        let data = {
-            page_capacity: this.pageSize,
-            cur_page: this.pageNumber,
-            order_column_list: []
-        }
-        getLogin(MethodName, data)
+    getList() {
+      this.loading = true;
+      let MethodName =
+        "/ShopServer/Client/ReadingRecordManager/PageQueryMyReadingRecord_Article";
+      let data = {
+        page_capacity: this.pageSize,
+        cur_page: this.pageNumber,
+        order_column_list: [],
+      };
+      getLogin(MethodName, data)
         .then((res) => {
-            this.loading = false
-            if(res.status===1){
-                this.readInfo = res.sum_info
-                this.total_count_a = res.total_count
-                if(res.sum_info.duration<3600){
-                    this.readInfo.durationStr = '<1'
-                }else{
-                    this.readInfo.durationStr = Math.ceil(res.sum_info.duration/3600)
-                }
-                this.articleList = res.reading_record_list
+          this.loading = false;
+          if (res.status === 1) {
+            this.readInfo = res.sum_info;
+            this.total_count_a = res.total_count;
+            if (res.sum_info.duration < 3600) {
+              this.readInfo.durationStr = "<1";
+            } else {
+              this.readInfo.durationStr = Math.ceil(
+                res.sum_info.duration / 3600
+              );
             }
-        }).catch((res) =>{
-            this.loading = false
+            this.articleList = res.reading_record_list;
+          }
         })
+        .catch((res) => {
+          this.loading = false;
+        });
     },
     //计算table高度(动态设置table高度)
     getTableHeight() {
@@ -461,224 +468,222 @@ export default {
       } else {
         this.tableHeight = window.innerHeight - tableH;
       }
-    }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getTableHeight()
-    this.getInfo()
-    this.getList()
+    this.getTableHeight();
+    this.getInfo();
+    this.getList();
   },
   //生命周期 - 挂载完成（可以访问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类 */
-.personal-info{
-    &-top{
-        margin: 0 0 12px 0;
-        background: #FFFFFF;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        padding: 24px;
-        .avator-box{
-            width: 96px;
-            height: 96px;
-            position: relative;
-            .img-crop{
-                position: absolute;
-                // padding: 4px;
-                width: 20px;
-                height: 20px;
-                right: -4px;
-                bottom: -4px;
-                background: #F2F3F5;
-                border-radius: 10px;
-                display: block;
-                text-align: center;
-                line-height: 14px;
-                .svg-icon{
-                    width: 12px;
-                    height: 12px;
-                    color: #165DFF;
-                }
-            }
-            .el-image{
-                border-radius: 8px;
-                overflow: hidden;
-            }
-        }
-        .center{
-            flex: 1;
-            margin: 0 32px;
-            p{
-                margin: 0 0 8px 0;
-                font-weight: 500;
-                font-size: 24px;
-                line-height: 32px;
-                color: #1D2129;
-            }
-            span{
-                font-size: 16px;
-                line-height: 24px;
-                color: #1D2129;
-            }
-            .org_name{
-                margin-right: 40px;
-            }
-        }
-        .right{
-            display: flex;
-            align-items: center;
-            .item{
-                padding-left: 24px;
-                min-width: 120px;
-                p{
-                    margin: 0 0 8px 0;
-                    font-size: 14px;
-                    line-height: 22px;
-                    color: rgba(0, 0, 0, 0.56);
-                }
-                b{
-                    font-size: 24px;
-                    line-height: 32px;
-                    color: #2F3742;
-                    margin-right: 8px;
-                }
-                span{
-                    font-size: 14px;
-                    line-height: 22px;
-                    color: #2F3742;
-                }
-            }
-            .el-divider--vertical{
-                height: 56px;
-                background-color: #E5E6EB;
-            }
+.personal-info {
+  &-top {
+    margin: 0 0 12px 0;
+    background: #ffffff;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 24px;
+    .avator-box {
+      width: 96px;
+      height: 96px;
+      position: relative;
+      .img-crop {
+        position: absolute;
+        // padding: 4px;
+        width: 20px;
+        height: 20px;
+        right: -4px;
+        bottom: -4px;
+        background: #f2f3f5;
+        border-radius: 10px;
+        display: block;
+        text-align: center;
+        line-height: 14px;
+        .svg-icon {
+          width: 12px;
+          height: 12px;
+          color: #165dff;
         }
+      }
+      .el-image {
+        border-radius: 8px;
+        overflow: hidden;
+      }
     }
-    &-bottom{
-        padding: 24px;
-        background: #FFFFFF;
-        border-radius: 4px;
-        .tabs-box{
-            display: flex;
-            a{
-                font-size: 14px;
-                line-height: 22px;
-                color: #4E5969;
-                border-radius: 100px;
-                padding: 5px 16px;
-                margin-right: 24px;
-                &:hover{
-                    background: #F2F3F5;
-                }
-                &.active{
-                    background: #F2F3F5;
-                    font-weight: 500;
-                    color: #165DFF;
-                }
-            }
+    .center {
+      flex: 1;
+      margin: 0 32px;
+      p {
+        margin: 0 0 8px 0;
+        font-weight: 500;
+        font-size: 24px;
+        line-height: 32px;
+        color: #1d2129;
+      }
+      span {
+        font-size: 16px;
+        line-height: 24px;
+        color: #1d2129;
+      }
+      .org_name {
+        margin-right: 40px;
+      }
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      .item {
+        padding-left: 24px;
+        min-width: 120px;
+        p {
+          margin: 0 0 8px 0;
+          font-size: 14px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.56);
         }
-        .el-table{
-            margin: 0 0 24px 0;
+        b {
+          font-size: 24px;
+          line-height: 32px;
+          color: #2f3742;
+          margin-right: 8px;
         }
-        .el-pagination{
-            text-align: right;
+        span {
+          font-size: 14px;
+          line-height: 22px;
+          color: #2f3742;
         }
-        .type-label{
-            display: inline-block;
-            border-radius: 2px;
-            padding: 1px 8px;
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 22px;
+      }
+      .el-divider--vertical {
+        height: 56px;
+        background-color: #e5e6eb;
+      }
+    }
+  }
+  &-bottom {
+    padding: 24px;
+    background: #ffffff;
+    border-radius: 4px;
+    .tabs-box {
+      display: flex;
+      a {
+        font-size: 14px;
+        line-height: 22px;
+        color: #4e5969;
+        border-radius: 100px;
+        padding: 5px 16px;
+        margin-right: 24px;
+        &:hover {
+          background: #f2f3f5;
         }
-        .icon-filts{
-            padding: 8px 4px 0 4px;
-            width: 24px;
-            height: 24px;
-            cursor: pointer;
+        &.active {
+          background: #f2f3f5;
+          font-weight: 500;
+          color: #165dff;
         }
+      }
     }
+    .el-table {
+      margin: 0 0 24px 0;
+    }
+    .el-pagination {
+      text-align: right;
+    }
+    .type-label {
+      display: inline-block;
+      border-radius: 2px;
+      padding: 1px 8px;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    .icon-filts {
+      padding: 8px 4px 0 4px;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+  }
 }
 </style>
 <style lang="scss">
-.personal-info{
-    .el-table{
-        color: #1D2129;
-        th{
-            background: #F2F3F5;
-            padding: 3px 0;
-            height: 40px;
-            .cell{
-                display: flex;
-                align-items: center;
-            }
-        }
-        thead{
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 22px;
-            color: #1D2129;
-        }
-        .cell{
-            word-break: break-word;
-        }
+.personal-info {
+  .el-table {
+    color: #1d2129;
+    th {
+      background: #f2f3f5;
+      padding: 3px 0;
+      height: 40px;
+      .cell {
+        display: flex;
+        align-items: center;
+      }
+    }
+    thead {
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 22px;
+      color: #1d2129;
+    }
+    .cell {
+      word-break: break-word;
     }
+  }
 }
-.popover-checkbox{
-    margin-bottom: 10px;
+.popover-checkbox {
+  margin-bottom: 10px;
 }
-.popover-bottom{
-    border-top: 1px solid #E5E6EB;
-    display: flex;
-    justify-content: space-between;
-    padding-top: 8px;
-    a{
-        padding: 2px 12px;
-        background: #F2F3F5;
-        border-radius: 2px;
-        font-size: 12px;
-        line-height: 20px;
-        color: #4E5969;
+.popover-bottom {
+  border-top: 1px solid #e5e6eb;
+  display: flex;
+  justify-content: space-between;
+  padding-top: 8px;
+  a {
+    padding: 2px 12px;
+    background: #f2f3f5;
+    border-radius: 2px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #4e5969;
+  }
+  .reset {
+    &:hover {
+      background: #e5e6eb;
     }
-    .reset{
-        &:hover{
-            background: #E5E6EB;
-        }
-        &:focus{
-            background: #C9CDD4;
-        }
+    &:focus {
+      background: #c9cdd4;
     }
-    .sure{
-        background: #165DFF;
-        color: #FFFFFF;
-        &:hover{
-            background: #4080FF;
-        }
-        &:focus{
-            background: #0E42D2;
-        }
+  }
+  .sure {
+    background: #165dff;
+    color: #ffffff;
+    &:hover {
+      background: #4080ff;
     }
+    &:focus {
+      background: #0e42d2;
+    }
+  }
 }
-
 </style>