349 lines
14 KiB
Vue
349 lines
14 KiB
Vue
<template>
|
||
<el-container style="display: flex;flex-direction: row;">
|
||
<el-aside width="22vw"
|
||
style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 7vh;">
|
||
<template>
|
||
<el-card class="box-card"
|
||
style="position: fixed;width: 10vw;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
|
||
<div slot="header" class="clearfix">
|
||
<span><i class="el-icon-menu"></i> 热门标签</span>
|
||
</div>
|
||
<div class="bottom clearfix">
|
||
<el-scrollbar style="height:50vh">
|
||
<el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange" lazy>
|
||
<el-tab-pane v-for="(tag,index) in tags" :key="index" :index="tag.categoryId" :name="tag.categoryName" >
|
||
<span slot="label" style="border-radius: 10px;align-items: center;display: flex;flex-direction: row;justify-content: flex-start" v-html="tag.category"></span>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-scrollbar>
|
||
<!-- <div v-for="(tag,index) in tags" :key="index" class="text item">-->
|
||
<!--<!– <el-tag style="margin-top: 10px" type="success" v-html="tag"></el-tag>–>-->
|
||
<!-- </div>-->
|
||
<div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
|
||
<div>
|
||
<i class="el-icon-setting"></i>
|
||
<el-button type="text" class="button" @click="manageCategoryVisible=true">管理标签</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
</el-aside>
|
||
<el-main style="display: flex;flex-direction: row;flex-wrap: nowrap;">
|
||
<template>
|
||
<div class="main">
|
||
<el-tabs v-model="activeName" type="border-card" style=";margin-top:2.5vh;width: 45vw;" @tab-click="tabChange">
|
||
<el-tab-pane label="最新" name="first">
|
||
<ul
|
||
class="list"
|
||
v-infinite-scroll="load"
|
||
infinite-scroll-disabled="disabled">
|
||
<ol v-for="(project,index) in projectLists" :key="index" class="list-item"
|
||
style="display: flex;flex-direction: column;margin-left: -80px;" >
|
||
<ProjectList :project-lists="project"></ProjectList>
|
||
<el-divider></el-divider>
|
||
</ol>
|
||
</ul>
|
||
<p v-if="loading" style="color: #9ca3af">加载中...</p>
|
||
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
|
||
</el-tab-pane>
|
||
<el-tab-pane v-model="activeName" label="最热" name="second">
|
||
<div class="lsm-container">
|
||
<el-scrollbar class="scrollbar-wrapper" style="position: relative;">
|
||
<div class="infinite-list-wrapper">
|
||
<ul
|
||
class="list"
|
||
v-infinite-scroll="load"
|
||
infinite-scroll-disabled="disabled">
|
||
<ol v-for="(project,index) in projectLists" :key="index" class="list-item"
|
||
style="display: flex;flex-direction: column;margin-left: -80px">
|
||
<ProjectList :project-lists="project"></ProjectList>
|
||
<el-divider></el-divider>
|
||
</ol>
|
||
</ul>
|
||
<p v-if="loading" style="color: #9ca3af">加载中...</p>
|
||
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
<div style="margin-top: 2.5vh;margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
|
||
<el-card class="box-card" style="width: 15vw">
|
||
<el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
|
||
<UserInfo></UserInfo>
|
||
</el-card>
|
||
|
||
<el-card class="box-card" style="margin-top: 20px;width: 15vw">
|
||
<div slot="header" class="clearfix">
|
||
<el-statistic group-separator="," :precision="0" decimal-separator="." :value="userTotal" title="用户总数">
|
||
<template slot="prefix">
|
||
<i class="el-icon-s-flag" style="color: red"></i>
|
||
</template>
|
||
<template slot="suffix">
|
||
<i class="el-icon-s-flag" style="color: blue"></i>
|
||
</template>
|
||
</el-statistic>
|
||
|
||
<el-statistic group-separator="," :precision="0" decimal-separator="." :value="projectTotal" title="项目总数">
|
||
<template slot="prefix">
|
||
<i class="el-icon-s-flag" style="color: red"></i>
|
||
</template>
|
||
<template slot="suffix">
|
||
<i class="el-icon-s-flag" style="color: blue"></i>
|
||
</template>
|
||
</el-statistic>
|
||
</div>
|
||
<div class="text item">
|
||
<div style="font-size: 18px;color: #9ca3af;font-weight: bold"> 关于本站 </div>
|
||
<span>
|
||
HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。 希望大家能够在这里找到编程的快乐、 轻松搞定问题的技术方案、 大呼过瘾的开源神器， 顺其自然地开启开源之旅。
|
||
</span>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<!-- 登录注册-->
|
||
<LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
|
||
<!--管理标签弹框-->
|
||
<el-dialog
|
||
:visible.sync="manageCategoryVisible"
|
||
width="50vw">
|
||
<el-card class="box-card">
|
||
<el-checkbox-group v-model="checkboxGroup" size="medium" :max="10">
|
||
<el-checkbox style="margin-top: 20px" v-for="(tag,index) in tags" :key="index" v-html="tag.category" border size="medium"></el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-card>
|
||
<el-card class="box-card">
|
||
总共:
|
||
</el-card>
|
||
</el-dialog>
|
||
<el-backtop target=".main" :visibility-height="20" :right="10" :bottom="10"></el-backtop>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from 'axios'
|
||
import ProjectList from "@/components/Project/ProjectList.vue";
|
||
import UserInfo from "@/components/User/UserInfo.vue";
|
||
import LoginDialog from "@/components/Home/LoginDialog.vue";
|
||
|
||
export default {
|
||
name: "HomeComponent",
|
||
components: {LoginDialog, UserInfo, ProjectList},
|
||
|
||
data() {
|
||
return {
|
||
userTotal:null,
|
||
projectTotal:null,
|
||
checkboxGroup: [],
|
||
activeName: 'first',
|
||
currentTabName:"综合",
|
||
currentTabIndex:null,
|
||
projectLists:[],
|
||
tabindex:0,
|
||
count: 10,
|
||
loading: false,
|
||
loginDialogVisible: false,
|
||
manageCategoryVisible:false,
|
||
tags:null,
|
||
};
|
||
},
|
||
mounted() {
|
||
// this.account(); //获取cookie的方法
|
||
this.ProjectLists();
|
||
this.categoryList();
|
||
this.getUserTotal();
|
||
this.getProjectTotal();
|
||
},
|
||
created() {
|
||
},
|
||
computed: {
|
||
noMore() {
|
||
return this.count >= 10
|
||
},
|
||
disabled() {
|
||
return this.loading || this.noMore
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
|
||
openLogin() {
|
||
this.loginDialogVisible = true;
|
||
// this.$cookie.delete('username')
|
||
// this.$cookie.delete('password')
|
||
},
|
||
|
||
load() {
|
||
this.loading = true
|
||
setTimeout(() => {
|
||
this.count += 2
|
||
this.loading = false
|
||
}, 2000)
|
||
},
|
||
|
||
//-------首页列表-------
|
||
ProjectLists() {
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
|
||
// URL 中的查询参数
|
||
params: {
|
||
num: "0",
|
||
}
|
||
}).then((res)=>{
|
||
that.projectLists=res.data;
|
||
});
|
||
},
|
||
projectListsByCount(index,name){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/selectMostStar',
|
||
// URL 中的查询参数
|
||
params: {
|
||
num: index,
|
||
name:name
|
||
}
|
||
}).then((res)=>{
|
||
that.projectLists=res.data;
|
||
});
|
||
},
|
||
tabChange(tab) {
|
||
if(tab.name=="first"){
|
||
if(this.currentTabIndex!=null){
|
||
this.typeChangeFun(this.currentTabIndex,this.currentTabName);
|
||
}else {
|
||
this.ProjectLists();
|
||
}
|
||
}
|
||
if (tab.name == "second") {
|
||
if(this.currentTabIndex!=null){
|
||
this.projectListsByCount(this.currentTabIndex,this.currentTabName);
|
||
}else {
|
||
this.projectListsByCount(this.tabindex);
|
||
}
|
||
}
|
||
},
|
||
|
||
typeChangeFun(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;
|
||
});
|
||
},
|
||
|
||
typeChange(tab){
|
||
this.currentTabIndex=tab.index;
|
||
if(this.activeName==="first"){
|
||
this.typeChangeFun(tab.index,this.currentTabName);
|
||
}
|
||
if(this.activeName==="second"){
|
||
this.projectListsByCount(tab.index,this.currentTabName);
|
||
}
|
||
},
|
||
// 标签列表
|
||
categoryList(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
|
||
// URL 中的查询参数
|
||
params: {
|
||
}
|
||
}).then((res)=>{
|
||
// console.log(res);
|
||
that.tags=res.data;
|
||
});
|
||
},
|
||
|
||
getUserTotal(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/userNum',
|
||
// URL 中的查询参数
|
||
params: {
|
||
}
|
||
}).then((res)=>{
|
||
that.userTotal=res.data;
|
||
});
|
||
},
|
||
getProjectTotal(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/countNum',
|
||
// URL 中的查询参数
|
||
params: {
|
||
|
||
}
|
||
}).then((res)=>{
|
||
that.projectTotal=res.data;
|
||
});
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
::v-deep .el-scrollbar__wrap {
|
||
overflow-x: hidden;
|
||
}
|
||
/*去掉切换时el-tab-pane底部的蓝色下划线*/
|
||
::v-deep .el-tabs__active-bar {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/*去掉tabs底部的下划线*/
|
||
::v-deep .el-tabs__nav-wrap::after {
|
||
position: static !important;
|
||
}
|
||
::v-deep .el-tabs__item:hover{
|
||
background-color: #eeeeee;
|
||
}
|
||
::v-deep .el-tabs__item{
|
||
text-align: center;
|
||
}
|
||
::v-deep .el-tabs__nav{
|
||
/*margin-left: 7px;*/
|
||
}
|
||
::v-deep .el-tabs__item.is-active {
|
||
background-color: #eeeeee;
|
||
}
|
||
|
||
::v-deep .el-scrollbar__wrap {
|
||
/*overflow-y: hidden;*/
|
||
overflow-x: hidden;
|
||
}
|
||
.el-card{
|
||
border: none;
|
||
border-radius: 10px;
|
||
}
|
||
.el-tabs{
|
||
border: none;
|
||
border-radius: 10px;
|
||
}
|
||
.el-tabs__nav-scroll {
|
||
border-radius: 10px;
|
||
}
|
||
</style> |