diff --git a/src/components/Monthly.vue b/src/components/Monthly.vue
index 55bca30..da22b94 100644
--- a/src/components/Monthly.vue
+++ b/src/components/Monthly.vue
@@ -64,7 +64,7 @@
                                     <br/><br/>
                                 </div>
                                 <br/>
-                                <el-button type="info" @click="getMonely()">阅读该期</el-button>
+                                <el-button type="info" @click="ToDetail()">阅读该期</el-button>
                                 <br/><br/>
                             </el-card>
                         </el-col>
@@ -154,8 +154,8 @@ export default {
     },
     // 初始化渲染页面
     mounted(){
-        this.getProjectNum();
         this.getMonely();
+        this.getProjectNum();
     },
     methods: {
         goBack() {
@@ -172,8 +172,9 @@ export default {
             }).then((res)=>{
                 that.ProjectNum = parseInt(res.data);
                 // console.log(res.data);
-            })
+            });
         },
+        // 获取月刊总数
         getMonely(){
             var that = this;
             axios({
@@ -182,12 +183,29 @@ export default {
                 params: {
                 }
             }).then(function (res){
-                    that.Monely = res.data;
-                // that.Monely = parseInt(res.data);
-                // that.selectMonly = that.Monely;
+                that.Monely = parseInt(res.data);
                 // console.log(res.data);
             })
         },
+        // 月刊详情页面跳转
+        ToDetail(){
+            if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
+                let pathInfo = this.$router.resolve({
+                    path: '/MonthlyDetail',
+                    query:{
+                        MonethlyId:this.selectMonly
+                    }
+                })
+                window.open(pathInfo.href, '_self');
+            }else{
+                this.$message({
+                    message: '请输入正确的月刊号',
+                    type: 'warning',
+                    offset:100,
+                    duration:700,
+                });
+            }
+        }
     }
 }
 </script>
diff --git a/src/components/MonthlyDetail.vue b/src/components/MonthlyDetail.vue
index 1b443ae..fcee0e7 100644
--- a/src/components/MonthlyDetail.vue
+++ b/src/components/MonthlyDetail.vue
@@ -1,15 +1,131 @@
 <template>
-  <div>
-      sssss
-  </div>
+    <div 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-option
+                                v-for="item in Monely"
+                                :key="item"
+                                :label="item"
+                                :value="item"
+                            >
+                            </el-option>
+                        </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>
+                    </div>
+                </el-page-header>
+            </div>
+            <div class="PageContent">
+                <div style="font-size:35px;font-weight:750;">
+                    《HelloGitHub》月刊第{{selectMonly}}期
+                </div>
+
+                <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">
+                                HelloGitHub 分享 GitHub 上有趣、入门级的开源项目，<span style="font-size:20px;font-weight:600;color:#7e7e7e">每月 28 号</span>更新一期。
+                                这里有好玩和入门级的开源项目、开源书籍、实战项目、企业级项目，让你用极短的时间
+                                感受到开源的魅力，对开源产生兴趣。
+                            </el-card>
+                        </el-col>
+                    </el-row>
+                </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>
 </template>
 
 <script>
+import axios from "axios";
+import Monthly from "@/components/Monthly.vue";
+
 export default {
-    name: "MonthlyDetailComponent"
+    name: "MonthlyDetailComponent",
+    data(){
+        return{
+            //用户当前所处的月刊期号
+            MonthlyId:null,
+            //月刊总数：
+            Monely:null,
+            // //用户选择跳转的月刊数
+            selectMonly:null,
+        }
+    },
+    mounted() {
+        this.getMonely();
+        this.initPage();
+    },
+    methods: {
+        goBack() {
+            window.history.go(-1);
+        },
+        initPage(){
+            this.selectMonly = this.$route.query.MonethlyId;
+            // 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"
+            // }
+        },
+        getMonely(){
+            var that = this;
+            axios({
+                method: 'post',
+                url: 'http://localhost:8082/helloGithub_war_exploded/latest',
+                params: {
+                }
+            }).then(function (res){
+                that.Monely = parseInt(res.data);
+                // console.log(res.data);
+            })
+        },
+        // 月刊详情页面跳转
+        ToDetail(){
+            if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
+                // console.log(parseInt(this.selectMonly) + "   " + parseInt(this.MonethlyId) )
+                console.log("跳转成功")
+            }else{
+                this.$message({
+                    message: '请输入正确的月刊号',
+                    type: 'warning',
+                    offset:100,
+                    duration:500,
+                });
+            }
+        },
+    }
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+::v-deep .el-page-header__left{
+  left:-200px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Paper.vue b/src/components/Paper.vue
index 785f05d..6f3e654 100644
--- a/src/components/Paper.vue
+++ b/src/components/Paper.vue
@@ -34,7 +34,6 @@ export default {
         goBack() {
             window.history.go(-1);
         },
-
     }
 }