更新页面

src/assets/images/WebsiteBanner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" zoomAndPan="magnify" viewBox="0 0 1440 809.999993" height="1080" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><filter x="0%" y="0%" width="100%" height="100%" id="f4951447d0"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" color-interpolation-filters="sRGB"/></filter><filter x="0%" y="0%" width="100%" height="100%" id="3bbf8702b4"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.2126 0.7152 0.0722 0 0" color-interpolation-filters="sRGB"/></filter><g/><clipPath id="ba8e36e8a3"><path d="M 299.09375 398.375 L 335.84375 398.375 L 335.84375 435.875 L 299.09375 435.875 Z M 299.09375 398.375 " clip-rule="nonzero"/></clipPath><clipPath id="b503c76304"><path d="M 299.09375 398.375 L 335.84375 398.375 L 335.84375 435.875 L 299.09375 435.875 Z M 299.09375 398.375 " clip-rule="nonzero"/></clipPath><clipPath id="fbaf57efa0"><path d="M 322.792969 435.875 C 322.34375 435.875 321.898438 435.800781 321.464844 435.652344 C 319.839844 435.09375 318.839844 433.605469 318.796875 431.675781 C 318.796875 431.664062 318.796875 431.652344 318.796875 431.644531 C 318.785156 428.484375 321.140625 426.035156 323.347656 424.796875 C 324.28125 424.273438 325.390625 424.019531 326.585938 424.035156 C 326.5 423.59375 326.34375 423.222656 326.117188 422.953125 C 325.429688 422.121094 323.96875 422.242188 322.84375 422.496094 C 320.011719 423.328125 318.210938 425.820312 316.304688 428.464844 C 315.507812 429.570312 314.683594 430.710938 313.773438 431.734375 C 312.5625 433.28125 311.039062 434.441406 309.363281 435.085938 C 307.808594 435.683594 306.164062 435.839844 304.609375 435.535156 C 302.128906 435.046875 300.222656 433.421875 299.632812 431.292969 C 299.226562 429.835938 299.109375 426.882812 302.867188 423.472656 C 302.910156 423.433594 302.949219 423.402344 302.996094 423.367188 C 303.382812 423.089844 303.785156 422.800781 304.179688 422.523438 C 305.898438 421.3125 307.648438 420.078125 308.808594 418.613281 C 308.519531 418.671875 308.226562 418.726562 307.933594 418.769531 C 305.457031 419.179688 303.457031 418.828125 301.988281 417.730469 C 301.914062 417.675781 301.84375 417.613281 301.78125 417.542969 C 299.738281 415.304688 299.238281 412.777344 300.40625 410.605469 C 301.632812 408.320312 304.53125 406.988281 307.296875 407.429688 C 308.699219 407.65625 309.964844 408.316406 310.949219 409.34375 C 311.976562 410.417969 312.675781 411.84375 313.027344 413.585938 C 317.320312 410.652344 320.066406 405.378906 319.460938 400.132812 C 319.367188 399.308594 319.957031 398.5625 320.78125 398.46875 C 321.601562 398.371094 322.347656 398.960938 322.441406 399.789062 C 322.695312 401.972656 322.496094 404.183594 321.851562 406.355469 C 321.234375 408.433594 320.242188 410.378906 318.898438 412.132812 C 317.554688 413.890625 315.941406 415.355469 314.097656 416.492188 C 313.703125 416.734375 313.304688 416.960938 312.898438 417.167969 C 312.566406 418.410156 311.921875 419.589844 310.960938 420.734375 C 309.539062 422.425781 307.609375 423.785156 305.90625 424.984375 C 305.527344 425.25 305.171875 425.5 304.824219 425.753906 C 302.992188 427.4375 302.15625 429.160156 302.523438 430.488281 C 302.808594 431.515625 303.828125 432.316406 305.1875 432.585938 C 306.921875 432.925781 309.472656 432.386719 311.433594 429.847656 C 311.457031 429.816406 311.480469 429.789062 311.503906 429.761719 C 312.324219 428.851562 313.078125 427.808594 313.875 426.703125 C 315.902344 423.890625 318.203125 420.699219 322.058594 419.59375 C 322.082031 419.589844 322.109375 419.582031 322.132812 419.574219 C 325.667969 418.761719 327.507812 419.917969 328.425781 421.035156 C 329.242188 422.019531 329.605469 423.277344 329.664062 424.617188 C 329.742188 424.648438 329.820312 424.675781 329.898438 424.707031 C 331.164062 425.195312 332.347656 425.921875 333.316406 426.804688 C 334.382812 427.785156 335.164062 428.933594 335.570312 430.136719 C 335.832031 430.921875 335.414062 431.773438 334.628906 432.039062 C 333.84375 432.304688 332.992188 431.882812 332.726562 431.097656 C 332.28125 429.777344 330.972656 428.492188 329.320312 427.726562 C 329.113281 428.578125 328.832031 429.402344 328.503906 430.164062 C 328 431.808594 327.351562 433.039062 326.480469 434.03125 C 325.496094 435.21875 324.140625 435.875 322.792969 435.875 Z M 321.796875 431.617188 C 321.808594 432.066406 321.933594 432.632812 322.441406 432.808594 C 322.890625 432.964844 323.601562 432.804688 324.179688 432.097656 C 324.191406 432.082031 324.207031 432.066406 324.21875 432.050781 C 324.816406 431.378906 325.277344 430.472656 325.660156 429.207031 C 325.675781 429.148438 325.695312 429.09375 325.71875 429.039062 C 326.015625 428.363281 326.246094 427.6875 326.402344 427.039062 C 325.792969 427.046875 325.25 427.175781 324.816406 427.417969 C 323.421875 428.199219 321.796875 429.769531 321.796875 431.617188 Z M 303.894531 415.398438 C 304.683594 415.925781 305.8Line truncated

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;
@@ -72,3 +72,18 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   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;