diff --git a/src/assets/styles/element-variables.scss b/src/assets/styles/element-variables.scss
index 47e0d6c..be56db9 100644
--- a/src/assets/styles/element-variables.scss
+++ b/src/assets/styles/element-variables.scss
@@ -57,7 +57,8 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 }
 .RightContent{
   width:20vw;
-  margin-top:10px;
+  height:fit-content;
+  margin-top:50px;
   margin-left:20px;
   border-radius: 6px;
   background-color: #ffffff;
diff --git a/src/components/Monthly/Monthly.vue b/src/components/Monthly/Monthly.vue
index 6f4232b..80290db 100644
--- a/src/components/Monthly/Monthly.vue
+++ b/src/components/Monthly/Monthly.vue
@@ -54,7 +54,7 @@
                                     <span style="font-size:18px;font-weight:540;color: #676767">选择期数: &nbsp;</span>
                                     <el-select clearable v-model="selectMonly" filterable placeholder="期数" style="width:80px;">
                                         <el-option
-                                            v-for="item in Monely"
+                                            v-for="item of Monely"
                                             :key="item"
                                             :label="item"
                                             :value="item"
@@ -72,7 +72,7 @@
                             <el-card shadow="always" class="card_style">
                                 <span style="font-size:25px;font-weight:540;color: #676767">共包含</span>
                                 <br/><br/>
-                                <span style="font-size:55px;font-weight:650;color: #3d8bff">17</span>
+                                <span style="font-size:55px;font-weight:650;color: #3d8bff">{{labelItem.length}}</span>
                                 <br/><br/>
                                 <span style="font-size:25px;font-weight:540;color: #676767">类</span>
                                 <br/>
@@ -80,19 +80,19 @@
                                 <div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
                                     <br/>
                                     <span style="font-size:18px;font-weight:540;color: #676767">选择分类: &nbsp;</span>
-                                    <el-select v-model="value" filterable placeholder="分类" style="width:80px;">
+                                    <el-select clearable v-model="selectlabelItem" placeholder="分类" style="width:100px;">
                                         <el-option
-                                            v-for="item in options"
-                                            :key="item.value"
-                                            :label="item.label"
-                                            :value="item.value"
+                                            v-for="item in labelItem"
+                                            :key="item"
+                                            :label="item"
+                                            :value="item"
                                         >
                                         </el-option>
                                     </el-select>
                                     <br/><br/>
                                 </div>
                                 <br/>
-                                <el-button type="info">查看分类</el-button>
+                                <el-button type="info" @click="changePage()">查看分类</el-button>
                                 <br/><br/>
                             </el-card>
                         </el-col>
@@ -150,14 +150,23 @@ export default {
             Monely:0,
             //保存用户选择期刊期数：
             selectMonly:null,
+            // 保存用户选择的分类：
+            selectlabelItem:null,
+            //标签：
+            labelItem:[],
         };
     },
     // 初始化渲染页面
     mounted(){
         this.getMonely();
         this.getProjectNum();
+        this.getLabel();
     },
     methods: {
+        test(){
+          var that = this;
+          console.log(that.selectlabelItem);
+        },
         goBack() {
             window.history.go(-1);
         },
@@ -187,6 +196,22 @@ export default {
                 // console.log(res.data);
             })
         },
+        //获取所有标签：
+        getLabel(){
+            var that = this;
+            axios({
+                method: 'post',
+                url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
+                params: {
+                }
+            }).then(function (res){
+                that.labelItem = [];
+                for(let i=0;i<res.data.length;i++){
+                    let tmp = res.data[i]['categoryName'];
+                    that.labelItem.push(tmp);
+                }
+            })
+        },
         // 月刊详情页面跳转
         ToDetail(){
             if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
@@ -205,6 +230,26 @@ export default {
                     duration:700,
                 });
             }
+        },
+        // 月刊分类页跳转
+        changePage(){
+            if(this.selectlabelItem){
+                let pathInfo = this.$router.resolve({
+                    path: '/MonthlyByTags',
+                    query:{
+                        Protype:this.selectlabelItem
+                    }
+                })
+                window.open(pathInfo.href, '_self');
+            }else{
+                this.$message({
+                    message: '请选择分类类型',
+                    type: 'warning',
+                    offset:100,
+                    duration:700,
+                });
+            }
+
         }
     }
 }
@@ -242,4 +287,9 @@ export default {
     text-align: center;
     border-radius:10px;
 }
+
+::v-deep .el-scrollbar{
+    max-height:150px;
+    overflow: scroll;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Monthly/MonthlyByTags.vue b/src/components/Monthly/MonthlyByTags.vue
new file mode 100644
index 0000000..969c818
--- /dev/null
+++ b/src/components/Monthly/MonthlyByTags.vue
@@ -0,0 +1,142 @@
+<template>
+    <div class="test" style="display:flex;flex-direction:row;flex-wrap: nowrap" >
+        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
+            <div class="PageHeader">
+                <br/>
+                <div style="display:flex;flex-wrap:nowrap">
+                    <el-button icon="el-icon-search" circle></el-button>
+                    <el-page-header  @back="goBack" style="justify-content: center;">
+                        <div slot="title" style="font-size:23px;font-weight: 600;"></div>
+                        <div slot="content" style="font-size:25px;font-weight: 650;margin-top:0px">
+                            《HelloGitHub》月刊<span style="font-size:18px">{{selectlabelItem}}</span>分区
+                        </div>
+                    </el-page-header>
+                </div>
+
+            </div>
+            <div class="PageContent">
+
+                <div style="margin-top:30px;width:50vw;margin-left:20px">
+                    <el-row :gutter="24">
+                        <el-col :span="24">
+                            <el-card shadow="always" style="font-size: 18px;
+                                font-weight:550;color: #a9a9a9;
+                                line-height: 35px;
+                                text-align:left;background-color: #f4ffed;
+                                border-color: rgba(255,243,232,0.89);border-radius:10px">
+                                这里是按照<span style="font-size:20px;font-weight:600;color:#7e7e7e">「分类」</span>
+                                阅读往期的 HelloGitHub 月刊内容， 您目前在查看往期 HelloGitHub 月刊中的
+                                <span style="font-size:20px;font-weight:600;color:#7e7e7e">{{selectlabelItem}} 项目</span>
+                                集合。
+                            </el-card>
+                        </el-col>
+                    </el-row>
+                    <div class="ItemsContent" >
+                        <el-scrollbar class="scrollbar-wrapper" style="position: relative;" >
+                            <div class="infinite-list-wrapper" >
+                                <ul class="list"
+                                    v-infinite-scroll="load"
+                                    infinite-scroll-disabled="disabled"
+                                >
+                                    <div style="text-align: center">
+                                        <div v-for="(items,index2) of projectLists.length" :key="index2">
+                                            <MonthlyItems :Items='projectLists[index2]'></MonthlyItems>
+                                        </div>
+                                        <div :id="index"></div>
+                                    </div>
+                                </ul>
+                                <p v-if="loading" style="color: #9ca3af">加载中...</p>
+                                <p v-if="noMore" style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
+                            </div>
+                        </el-scrollbar>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import MonthlyItems from "@/components/Monthly/MonthlyItems.vue";
+import axios from "axios";
+
+export default {
+    name: "MonthlyByTags",
+    components: {MonthlyItems},
+    data(){
+        return{
+            // 项目分类标签数组
+            labelItem:[],
+            // 项目列表：
+            projectLists:null,
+            // 选择的分类：
+            selectlabelItem:null,
+            //种类对应项目数组：
+            MonTypePro:[],
+        }
+    },
+    //初始化
+    mounted() {
+      this.initPage() ;
+    },
+    methods:{
+        test(){
+            var that = this;
+            console.log(that.selectlabelItem);
+        },
+        // 初始化方法
+        initPage(){
+            this.selectlabelItem = this.$route.query.Protype;
+            var that = this;
+            this.getList(1,that.selectlabelItem);
+        },
+        goBack() {
+            let pathInfo = this.$router.resolve({
+                path: '/Monthly',
+                query:{
+                }
+            })
+            window.open(pathInfo.href, '_self');
+        },
+        // 获取所有标签列表
+        getLabel(){
+            var that = this;
+            axios({
+                method: 'post',
+                url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
+                params: {
+                }
+            }).then(function (res){
+                that.labelItem = [];
+                for(let i=0;i<res.data.length;i++){
+                    let tmp = res.data[i]['categoryName'];
+                    that.labelItem.push(tmp);
+                }
+                console.log(that.labelItem);
+            })
+        },
+         getList(index,name){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
+                // URL 中的查询参数
+                params: {
+                    num:index,
+                    name:name
+                }
+            }).then((res)=>{
+                that.projectLists=res.data;
+            });
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-page-header__left{
+    left:-200px;
+    display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Monthly/MonthlyDetail.vue b/src/components/Monthly/MonthlyDetail.vue
index 7b58326..95b87a0 100644
--- a/src/components/Monthly/MonthlyDetail.vue
+++ b/src/components/Monthly/MonthlyDetail.vue
@@ -1,15 +1,14 @@
 <template>
-    <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
+    <div class="test" style="display:flex;flex-direction:row;flex-wrap: nowrap" >
         <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
             <div class="PageHeader">
                 <br/>
                 <el-page-header  @back="goBack" style="justify-content: center;">
                     <div slot="title" style="font-size:23px;font-weight: 600;"></div>
                     <div slot="content" style="font-size:18px;font-weight: 600;margin-top:-10px">
-                        <el-button ref="LastBtn" size="medium" type="primary" icon="el-icon-arrow-left">上一期</el-button>
-                        &nbsp;
-                        <el-select  no-data-text="MonthlyId" @change="ToDetail()" size="medium"
-                                    clearable v-model="selectMonly" filterable placeholder="期数" style="width:80px;">
+                        <el-button @click="ToNearMon('LastBtn')" ref="LastBtn" size="medium" type="primary" icon="el-icon-arrow-left">上一期</el-button>&nbsp;
+                        <el-select  @change="ToDetail()" size="medium"
+                                    clearable v-model="selectMonly" filterable placeholder="跳转期数" style="width:80px;">
                             <el-option
                                 v-for="item in Monely"
                                 :key="item"
@@ -20,13 +19,13 @@
                         </el-select>
                         &nbsp;
                         / {{Monely}}&nbsp;
-                        <el-button ref="NextBtn" size="medium" type="primary">下一期<i class="el-icon-arrow-right el-icon--right"></i></el-button>
+                        <el-button @click="ToNearMon('NextBtn')" ref="NextBtn" size="medium" type="primary">下一期<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                     </div>
                 </el-page-header>
             </div>
             <div class="PageContent">
                 <div style="font-size:35px;font-weight:750;">
-                    《HelloGitHub》月刊第{{selectMonly}}期
+                    《HelloGitHub》月刊第{{MonthlyId}}期
                 </div>
 
                 <div style="margin-top:30px;width:50vw;margin-left:20px">
@@ -43,31 +42,61 @@
                             </el-card>
                         </el-col>
                     </el-row>
-                </div>
 
+                    <div class="ItemsContent" >
+                        <el-scrollbar class="scrollbar-wrapper" style="position: relative;" >
+                            <div class="infinite-list-wrapper" >
+                                <ul class="list"
+                                    v-infinite-scroll="load"
+                                    infinite-scroll-disabled="disabled"
+                                    >
+                                    <div v-for="(items,index) in MonType.length" :key="index" style="text-align: center">
+                                        <div class="scroll-content">
+                                            <span  style="font-size:40px;font-weight:700;font-family:'华文彩云' ">{{MonType[index]}}语言区</span>
+                                        </div>
+                                        <div v-for="(items,index2) of MonTypePro[index].length" :key="index2">
+                                            <MonthlyItems :Items='MonTypePro[index][index2]'></MonthlyItems>
+                                        </div>
+                                        <div :id="index"></div>
+                                    </div>
+<!--                                    <el-button @click="test()"></el-button>-->
+                                </ul>
+                                <p v-if="loading" style="color: #9ca3af">加载中...</p>
+                                <p v-if="noMore" style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
+                            </div>
+                        </el-scrollbar>
+                    </div>
+                </div>
             </div>
         </div>
-        <!--        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
-        <!--            <div class="UserInfo">-->
-        <!--                用户信息展示内容：-->
-        <!--            </div>-->
-        <!--            <div class="RightContent">-->
-        <!--                空位置，待填入-->
-        <!--            </div>-->
-        <!--            <div class="ReferralProgram">-->
-        <!--                推荐项目目录-->
-        <!--            </div>-->
-        <!--        </div>-->
+        <div class="RightContent" style="position:fixed;left:70vw;max-height:80vh;overflow: scroll">
+            <el-row class="tac">
+                <el-col :span="24">
+                    <h5 style="font-size:25px;">快速导航</h5>
+                        <div style="display: flex;flex-direction:row;flex-wrap:wrap">
+                            <a id="menuItems" v-for="(item,index2) in MonType" :key="index2" href="javascript:void(0)" @click="goAnchor(index2)">
+                                    <div  style="display:flex;text-align: left">
+                                        <div style="margin-top:16px;margin-left:8vw;">
+                                            <i id="icon" :class="IconList[MonType[index2]]" style="font-size:25px;color:#fff;font-weight:550"></i>
+                                            <span style="font-weight:550;margin-left:10px">{{MonType[index2]}}</span>
+                                        </div>
 
+                                    </div>
+                            </a>
+                        </div>
+                </el-col>
+            </el-row>
+        </div>
     </div>
 </template>
 
 <script>
 import axios from "axios";
-import Monthly from "@/components/Monthly/Monthly.vue";
+import MonthlyItems from "@/components/Monthly/MonthlyItems.vue"
 
 export default {
     name: "MonthlyDetailComponent",
+    components: {MonthlyItems},
     data(){
         return{
             //用户当前所处的月刊期号
@@ -76,24 +105,110 @@ export default {
             Monely:null,
             // //用户选择跳转的月刊数
             selectMonly:null,
+            //保存月刊内项目分类
+            MonList:null,
+            loading: false,
+            count: 10,
+            //测试组类：
+            a1:null,
+            //种类数组：
+            MonType:[],
+            //种类对应项目数组：
+            MonTypePro:[],
+            active:null,
+            //图标列表：
+            IconList:{"综合":"el-icon-discover", "C":"el-ico-alicyuyan", "C#":"el-ico-aliCyuyan", "C++":"el-ico-alicyuyan",
+                "CSS":"el-ico-alicss3", "Go":"el-ico-aliGoyuyan", "Java":"el-ico-alijava", "JavaScript":"el-ico-alioutline-java-script",
+                "Kotlin":"el-ico-alikotlin", "Objective-C":"el-ico-alicyuyan", "PHP":"el-ico-aliphp", "python":"el-ico-aliPython",
+                "Ruby":"el-ico-aliRubyyuyan", "Rust":"el-ico-alirust", "Swift":"el-ico-aliswift",
+                "Other":"el-icon--help", "开源书籍":"el-ico-alitushu", "机器学习":"el-ico-alijiqixuexi___"}
         }
+
     },
     mounted() {
-        this.getMonely();
+        window.addEventListener('scroll', this.onScroll)
         this.initPage();
+        this.getMonely();
+        this.FreshItems();
+    },
+    destroy() {
+        // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
+        window.removeEventListener('scroll', this.onScroll)
+    },
+    computed:{
+        noMore() {
+            return this.count >= 10
+        },
+        disabled() {
+            return this.loading || this.noMore
+        }
+    },
+    beforeRouteLeave(to , from, next){
+       if(to.name == 'Monthly'){
+           from.meta.keepAlive = false;
+       }
+       next();
     },
     methods: {
+        //滚动
+        // 点击切换锚点：
+        goAnchor(id) {
+            var anchor = document.getElementById(id);
+            // chrome
+            document.body.scrollTop = anchor.offsetTop + anchor.offsetHeight;
+            // firefox
+            document.documentElement.scrollTop = anchor.offsetTop + anchor.offsetHeight;
+            // safari
+            window.pageYOffset = anchor.offsetTop + anchor.offsetHeight;
+            var that = this;
+            that.active = id;
+            console.log(that.active);
+        },
+        onScroll() {
+            // 获取所有锚点元素
+            const navContents = document.querySelectorAll('.scroll-content')
+            // 所有锚点元素的 offsetTop
+            const offsetTopArr = []
+            navContents.forEach(item => {
+                offsetTopArr.push(item.offsetTop)
+            })
+            // 获取当前文档流的 scrollTop
+            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+            // 定义当前点亮的导航下标
+            let navIndex = 0
+            for (let n = 0; n < offsetTopArr.length; n++) {
+                // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
+                // 那么此时导航索引就应该是 n 了
+                if (scrollTop >= offsetTopArr[n]) {
+                    navIndex = n
+                }
+            }
+            // 把下标赋值给 vue 的 data
+            this.active = navIndex
+        },
         goBack() {
-            window.history.go(-1);
+            let pathInfo = this.$router.resolve({
+                path: '/Monthly',
+                query:{
+                }
+            })
+            window.open(pathInfo.href, '_self');
         },
         initPage(){
-            this.selectMonly = this.$route.query.MonethlyId;
+            this.MonthlyId = this.$route.query.MonethlyId;
+            this.selectMonly = this.MonthlyId;
             // if(parseInt(this.selectMonly) == parseInt(1) || parseInt(this.MonethlyId) == parseInt(1)){
             //     this.$refs.LastBtn.style.display = "none"
             // }else if(parseInt(this.selectMonly) == this.Monely || parseInt(this.MonethlyId) == this.Monely){
             //     this.$refs.NextBtn.style.display = "none"
             // }
         },
+        test(){
+            console.log(this.MonType);
+            console.log(this.MonTypePro);
+            console.log(this.MonList);
+        },
+        // 月刊总数:
         getMonely(){
             var that = this;
             axios({
@@ -106,11 +221,38 @@ export default {
                 // console.log(res.data);
             })
         },
+        // 获取该期月刊中项目列表
+        getList(num){
+            var that = this;
+            axios({
+                method: 'post',
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectTerm',
+                params: {
+                    type:num
+                }
+            }).then(function (res){
+                that.MonList = res.data;
+                that.MonType=[];
+                that.MonTypePro=[];
+                Object.keys(that.MonList).forEach(key=>{
+                    that.MonType.push(key);
+                    that.MonTypePro.push(that.MonList[key]);
+                })
+            })
+        },
         // 月刊详情页面跳转
         ToDetail(){
             if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
+                this.MonthlyId = this.selectMonly;
+                let pathInfo = this.$router.resolve({
+                    path: '/MonthlyDetail',
+                    query:{
+                        MonethlyId:this.selectMonly
+                    }
+                })
+                window.open(pathInfo.href, '_self');
                 // console.log(parseInt(this.selectMonly) + "   " + parseInt(this.MonethlyId) )
-                console.log("跳转成功")
+                this.$router.go(0);
             }else{
                 this.$message({
                     message: '请输入正确的月刊号',
@@ -120,12 +262,82 @@ export default {
                 });
             }
         },
+        //上一期下一期：
+        ToNearMon(name){
+            if(name == "LastBtn" && this.MonthlyId>1){
+                // this.selectMonly = this.MonthlyId -1;
+                let pathInfo = this.$router.resolve({
+                    path: '/MonthlyDetail',
+                    query:{
+                        MonethlyId:this.MonthlyId - 1
+                    }
+                })
+                window.open(pathInfo.href, '_self');
+                this.$router.go(0);
+            }else if(name == "LastBtn" && this.MonthlyId == 1){
+                this.$message({
+                    message: '您已处于第一期月刊！',
+                    type: 'warning',
+                    offset:100,
+                    duration:500,
+                });
+            }
+            if(name == "NextBtn" && this.MonthlyId < this.Monely){
+                let pathInfo = this.$router.resolve({
+                    path: '/MonthlyDetail',
+                    query:{
+                        MonethlyId:parseInt(this.MonthlyId) + parseInt(1)
+                    }
+                })
+                window.open(pathInfo.href, '_self');
+                this.$router.go(0);
+            }else if(name == "NextBtn" && this.MonthlyId == this.Monely){
+                this.$message({
+                    message: '您已处于最后一期月刊!',
+                    type: 'warning',
+                    offset:100,
+                    duration:500,
+                });
+            }
+        },
+        // 更行月刊内容：
+        FreshItems(){
+            this.getList(this.MonthlyId);
+            var that = this;
+            that.active = 0;
+        },
+        load(){
+            this.loading = true
+            setTimeout(() => {
+                this.count += 2
+                this.loading = false
+            }, 2000)
+        },
     }
 }
+
 </script>
 
 <style scoped lang="scss">
 ::v-deep .el-page-header__left{
   left:-200px;
 }
+.ItemsContent{
+    margin-left:-10px;
+    width:54vw;
+}
+#menuItems{
+    background-color:rgb(178, 178, 178);
+    color:#fff;
+    width:20vw;
+    height:55px;
+    font-size:20px;
+    text-decoration-line: none;
+}
+#menuItems:hover{
+    background-color:#a4a4a4;
+    transform:scale(1.15);
+    cursor:pointer;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/Monthly/MonthlyItems.vue b/src/components/Monthly/MonthlyItems.vue
new file mode 100644
index 0000000..9ab27c9
--- /dev/null
+++ b/src/components/Monthly/MonthlyItems.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="MonItems">
+        <div class="Title"><i class="el-icon-s-promotion"></i>{{briefTitle}}</div>
+        <div class="State">
+            <div style="margin-top:10px">
+                <i class="el-icon-star-off"></i>&nbsp;Star:1400&nbsp;&nbsp;&nbsp;&nbsp;
+                <i class="el-icon-set-up"></i>&nbsp;Fork:755&nbsp;&nbsp;&nbsp;&nbsp;
+                <i class="el-icon-view"></i>&nbsp;浏览量:{{Items.lookCount}}
+            </div>
+            <div>
+                <el-button size="medium" type="primary" plain @click="changePage(Items.projectId)">详&nbsp;&nbsp;&nbsp;情</el-button>
+            </div>
+        </div>
+        <div class="ItemsContent">
+            {{briefDescribe}}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MonthlyItems",
+    data(){
+        return{
+            content:'随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近' +
+                '两年迎来了前所未有的热度。该项目是由密码学专家团队打造的隐私计算平台，它开箱即用、安全可靠，支持隐匿查询、' +
+                '隐私求交、联合统计、数据资源管理等功能，实现了“数据可用不可见”，为数据安全流通保驾护航。',
+        }
+
+    },
+    props:{
+        Items:{
+            type: Object,
+            default () {
+                return {}
+            }
+        }
+    },
+    computed:{
+        briefTitle: function(){
+            if(this.Items.projectTitle.length>=14){
+                return this.Items.projectTitle.substr(0, 13) + '...';
+            }else{
+                return this.Items.projectTitle;
+            }
+        },
+        briefDescribe: function(){
+            if(this.Items.projectDescription.length >= 151){
+                return this.Items.projectDescription.substr(0, 150) + '...';
+            }else {
+                return this.Items.projectDescription;
+            }
+        }
+    },
+    methods:{
+        //项目详情
+        changePage(id){
+            let pathInfo = this.$router.resolve({
+                path: '/ProjectDetail',
+                query:{
+                    id:id
+                }
+            })
+            window.open(pathInfo.href, '_self');
+            this.$router.go(0);
+        }
+        }
+}
+
+</script>
+
+<style scoped>
+.MonItems{
+    width:52vw;
+    margin-top:30px
+}
+.Title{
+    margin-left:0px;
+    width:fit-content;
+    color: #7bb6ff;
+    font-size:25px;
+    font-weight:550;
+}
+.Title:hover{
+    text-decoration-line:underline ;
+    color: #2b93ff;
+    cursor: pointer;
+}
+.State{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    margin-top:10px;
+    margin-left:0px;
+    width:48vw;
+    /*width:fit-content;*/
+    font-size:16px;
+    font-family: '华文细黑';
+    font-weight:700;
+    color: #6b6b6b;
+}
+.ItemsContent{
+    font-weight:550;
+    margin-top:8px;
+    margin-left:0px;
+    width:700px;
+    font-size:18px;
+    /*background-color: #ff4949;*/
+    line-height: 35px;
+    text-align: left;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 6219de3..b9ec12b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ import monthly from "@/components/Monthly/Monthly.vue";
 import ranking from "@/components/Ranking.vue";
 import paper from "@/components/Paper/Paper.vue";
 import MonthlyDetail from "@/components/Monthly/MonthlyDetail.vue";
+import MonthlyByTags from "@/components/Monthly/MonthlyByTags.vue";
 import UserInfoPage from "@/components/User/UserInfoPage.vue";
 import ProjectDetail from "@/components/Project/ProjectDetail.vue";
 import ArticleDetail from "@/components/Paper/ArticleDetail.vue";
@@ -56,6 +57,11 @@ const routes = [
                 name: 'UserInfoPage',
                 component: UserInfoPage
             },
+            {
+                path: '/MonthlyByTags',
+                name: 'MonthlyByTags',
+                component: MonthlyByTags
+            },
             {
                 path: '/ProjectDetail',
                 name: 'ProjectDetail',
diff --git a/src/views/index.vue b/src/views/index.vue
index 152cccd..319a2c9 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -5,7 +5,9 @@
             </el-header>
             <el-container>
                 <el-main>
+<!--                    <keep-alive>-->
                         <router-view></router-view>
+<!--                    </keep-alive>-->
                 </el-main>
             </el-container>
         </el-container>