更新页面

src/components/Monthly/MonthlyByTags.vue

@@ -4,11 +4,10 @@
             <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>分区
+                            《HelloGitHub》月刊 <span style="font-size:30px;font-weight:750">{{selectlabelItem}} </span>分区
                         </div>
                     </el-page-header>
                 </div>
@@ -32,7 +31,7 @@
                         </el-col>
                     </el-row>
                     <div class="ItemsContent" >
-                        <el-scrollbar class="scrollbar-wrapper" style="position: relative;" >
+                        <el-scrollbar class="scrollbar-wrapper" style="margin-left:-10px;width:fit-content" >
                             <div class="infinite-list-wrapper" >
                                 <ul class="list"
                                     v-infinite-scroll="load"
@@ -42,43 +41,51 @@
                                         <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 style="color: #9ca3af">加载中...</p>-->
-                                <p v-if="noMore" style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
+                                <p style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
                             </div>
                         </el-scrollbar>
                     </div>
                 </div>
             </div>
         </div>
+        <RightTools></RightTools>
     </div>
 </template>
 
 <script>
 import MonthlyItems from "@/components/Monthly/MonthlyItems.vue";
 import axios from "axios";
+import RightTools from "@/components/Home/RightTools.vue";
 
 export default {
     name: "MonthlyByTags",
-    components: {MonthlyItems},
+    components: {RightTools, MonthlyItems},
     data(){
         return{
             // 项目分类标签数组
             labelItem:[],
             // 项目列表：
-            projectLists:null,
+            projectLists:[],
             // 选择的分类：
             selectlabelItem:null,
             //种类对应项目数组：
             MonTypePro:[],
+            count: 10,
+            loading: false,
         }
     },
     //初始化
     mounted() {
       this.initPage() ;
     },
+    computed:{
+        noMore() {
+            return this.count >= 10
+        },
+    },
     methods:{
         test(){
             var that = this;
@@ -108,7 +115,8 @@ export default {
                 }
             }).then(function (res){
                 that.labelItem = [];
-                for(let i=0;i<res.data.length;i++){
+                let tmp = res.data;
+                for(let i=0;i < tmp.length;i++){
                     let tmp = res.data[i]['categoryName'];
                     that.labelItem.push(tmp);
                 }
@@ -130,13 +138,20 @@ export default {
                 that.projectLists=res.data;
             });
         },
+        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;
+    left:20px;
-    display: none;
+    //display: none;
 }
 </style>

src/components/Monthly/MonthlyItems.vue

@@ -58,7 +58,8 @@ export default {
             let pathInfo = this.$router.resolve({
                 path: '/ProjectDetail',
                 query:{
-                    id:id
+                    id:id,
+                    refresh:true
                 }
             })
             window.open(pathInfo.href, '_self');