更新页面

src/assets/styles/element-variables.scss

@@ -56,7 +56,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   box-shadow: -10px 5px 10px 5px #eaeaea;
 }
 .RightContent{
-  width:20vw;
+  width:15vw;
   height:fit-content;
   margin-top:50px;
   margin-left:20px;
@@ -71,4 +71,19 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   border-radius: 6px;
   background-color: #ffffff;
   box-shadow: -10px 5px 10px 5px #eaeaea;
+}
+//回到顶部按钮CSS
+.backbutton{
+  position:fixed;
+  left:70vw;
+  top:90vh;
+  width:60px;
+  height:60px;
+  border-radius:10px;
+  border:2px solid #dadada;
+  background-color: #e8e8e8;
+  box-shadow: -5px 5px 5px 5px #eaeaea;
+}
+.backbutton :hover{
+  color: #789be5!important;
 }

src/components/Monthly/Monthly.vue

@@ -128,7 +128,6 @@
 
 <script>
 import axios from 'axios'
-import Vue from "vue";
 import RightTools from "@/components/Home/RightTools.vue";
 export default {
     name: "MonthlyComponent",
@@ -261,14 +260,18 @@ export default {
     margin: 0;
 }
 
+.el-carousel__item{
+    width:450px;
+}
+
 .el-carousel__item:nth-child(2n) {
     background-size: cover;
-    background-image: url("../../assets/images/美人.jpg");
+    background-image: url("../../assets/images/WebsiteBanner.svg");
 }
 
 .el-carousel__item:nth-child(2n+1) {
     background-size: cover;
-    background-image: url("../../assets/images/美人.jpg");
+    background-image: url("../../assets/images/WebsiteBanner.svg");
 }
 .card_style{
     height:390px;

src/components/Monthly/MonthlyByTags.vue

@@ -31,6 +31,7 @@
                         </el-col>
                     </el-row>
                     <div class="ItemsContent" >
+                        <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
                         <el-scrollbar class="scrollbar-wrapper" style="margin-left:-10px;width:fit-content" >
                             <div class="infinite-list-wrapper" >
                                 <ul class="list"
@@ -41,15 +42,18 @@
                                         <div v-for="(items,index2) of projectLists.length" :key="index2">
                                             <MonthlyItems :Items='projectLists[index2]'></MonthlyItems>
                                         </div>
+
                                     </div>
                                 </ul>
-<!--                                <p style="color: #9ca3af">加载中...</p>-->
+                                <p style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
-                                <p style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
                             </div>
                         </el-scrollbar>
                     </div>
                 </div>
             </div>
+            <button class="backbutton" @click="backTop()">
+                <span  style="font-family: 华文琥珀;font-size:25px;color:#acbfe0">UP</span>
+            </button>
         </div>
         <RightTools></RightTools>
     </div>
@@ -79,14 +83,40 @@ export default {
     },
     //初始化
     mounted() {
+      window.addEventListener('scroll', this.scrollToTop);
       this.initPage() ;
     },
+    destroyed () {
+        window.removeEventListener('scroll', this.scrollToTop)
+    },
     computed:{
         noMore() {
             return this.count >= 10
         },
     },
     methods:{
+        backTop () {
+            const that = this
+            let timer = setInterval(() => {
+                let ispeed = Math.floor(-that.scrollTop / 5)
+                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
+                if (that.scrollTop === 0) {
+                    clearInterval(timer)
+                }
+            }, 16)
+        },
+
+        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
+        scrollToTop () {
+            const that = this
+            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+            that.scrollTop = scrollTop
+            if (that.scrollTop > 60) {
+                that.btnFlag = true
+            } else {
+                that.btnFlag = false
+            }
+        },
         test(){
             var that = this;
             console.log(that.selectlabelItem);
@@ -125,18 +155,34 @@ export default {
         },
          getList(index,name){
             var that=this;
-            axios({
+            if(this.selectlabelItem == '综合'){
-                method: 'post',
+                axios({
-                // 请求的地址
+                    method: 'post',
-                url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
+                    // 请求的地址
-                // URL 中的查询参数
+                    url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
-                params: {
+                    // URL 中的查询参数
-                    num:index,
+                    params: {
-                    name:name
+                        num:0,
-                }
+                        name:name
-            }).then((res)=>{
+                    }
-                that.projectLists=res.data;
+                }).then((res)=>{
-            });
+                    that.projectLists=res.data;
+                });
+            }else{
+                axios({
+                    method: 'post',
+                    // 请求的地址
+                    url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
+                    // URL 中的查询参数
+                    params: {
+                        num:index,
+                        name:name
+                    }
+                }).then((res)=>{
+                    that.projectLists=res.data;
+                });
+            }
+
         },
         load() {
             this.loading = true

src/components/Monthly/MonthlyDetail.vue

@@ -76,7 +76,7 @@
                         <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;">
+                                        <div style="margin-top:16px;margin-left:4vw;">
                                             <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>
@@ -87,6 +87,9 @@
                 </el-col>
             </el-row>
         </div>
+        <button class="backbutton" @click="backTop()">
+            <span  style="font-family: 华文琥珀;font-size:25px;color:#acbfe0">UP</span>
+        </button>
     </div>
 </template>
 
@@ -126,14 +129,16 @@ export default {
 
     },
     mounted() {
-        window.addEventListener('scroll', this.onScroll)
+        window.addEventListener('scroll', this.onScroll);
+        window.addEventListener('scroll', this.scrollToTop);
         this.initPage();
         this.getMonely();
         this.FreshItems();
     },
     destroy() {
         // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
-        window.removeEventListener('scroll', this.onScroll)
+        window.removeEventListener('scroll', this.onScroll);
+        window.removeEventListener('scroll', this.scrollToTop);
     },
     computed:{
         noMore() {
@@ -150,6 +155,28 @@ export default {
        next();
     },
     methods: {
+        backTop () {
+            const that = this
+            let timer = setInterval(() => {
+                let ispeed = Math.floor(-that.scrollTop / 5)
+                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
+                if (that.scrollTop === 0) {
+                    clearInterval(timer)
+                }
+            }, 16)
+        },
+
+        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
+        scrollToTop () {
+            const that = this
+            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+            that.scrollTop = scrollTop
+            if (that.scrollTop > 60) {
+                that.btnFlag = true
+            } else {
+                that.btnFlag = false
+            }
+        },
         //滚动
         // 点击切换锚点：
         goAnchor(id) {

src/components/Monthly/MonthlyItems.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="MonItems">
-        <div class="Title"><i class="el-icon-s-promotion"></i>{{briefTitle}}</div>
+        <a class="Title" :href="Items.projectUrl"><i class="el-icon-s-promotion"></i>{{briefTitle}}</a>
         <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-star-off"></i>&nbsp;Star:{{Items.startNum}}&nbsp;&nbsp;&nbsp;&nbsp;
-                <i class="el-icon-set-up"></i>&nbsp;Fork:755&nbsp;&nbsp;&nbsp;&nbsp;
+                <i class="el-icon-time"></i>&nbsp;提交时间:&nbsp;{{Items.submitTime}}&nbsp;&nbsp;&nbsp;&nbsp;
                 <i class="el-icon-view"></i>&nbsp;浏览量:{{Items.lookCount}}
             </div>
             <div>
@@ -76,7 +76,7 @@ export default {
     margin-top:30px
 }
 .Title{
-    margin-left:0px;
+    margin-left:-450px;
     width:fit-content;
     color: #7bb6ff;
     font-size:25px;