HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新页面

Browse Source
This commit is contained in:
Zhang HaoYang
2023-07-07 01:24:27 +08:00
parent 9bf3234398
commit 090136039e
6 changed files with 117 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/images/WebsiteBanner.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

17
src/assets/styles/element-variables.scss
View File

@@ -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;
}

9
src/components/Monthly/Monthly.vue
View File

@@ -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;

74
src/components/Monthly/MonthlyByTags.vue
View File

@@ -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({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
// URL 中的查询参数
params: {
num:index,
name:name
}
}).then((res)=>{
that.projectLists=res.data;
});
if(this.selectlabelItem == '综合'){
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
// URL 中的查询参数
params: {
num:0,
name:name
}
}).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

33
src/components/Monthly/MonthlyDetail.vue
View File

@@ -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) {

8
src/components/Monthly/MonthlyItems.vue
View File

@@ -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-set-up"></i>&nbsp;Fork:755&nbsp;&nbsp;&nbsp;&nbsp;
<i class="el-icon-star-off"></i>&nbsp;Star:{{Items.startNum}}&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;