297 lines
11 KiB
Vue
297 lines
11 KiB
Vue
|
||
<template>
|
||
<!--<div>-->
|
||
<!-- 月刊-->
|
||
<!--</div>-->
|
||
<div style="display: flex;flex-direction:row;flex-wrap: nowrap">
|
||
|
||
<div style="display: flex;flex-direction:column;flex-wrap: nowrap">
|
||
<div class="PageHeader">
|
||
<br/>
|
||
<el-page-header @back="goBack" style="justify-content:left;display: flex;">
|
||
<div slot="title" style="font-size:23px;font-weight: 600;"></div>
|
||
<div slot="content" style="font-size:23px;font-weight: 600;">
|
||
HelloGitHub 月刊
|
||
</div>
|
||
</el-page-header>
|
||
</div>
|
||
<div class="PageContent">
|
||
<div style="width:50vw;margin-left:20px">
|
||
<el-carousel :interval="4000" type="card" height="250px">
|
||
<el-carousel-item v-for="item in 6" :key="item">
|
||
<h3 class="medium">{{ item }}</h3>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
|
||
<div style="margin-top:30px;width:50vw;margin-left:20px">
|
||
<el-row :gutter="24">
|
||
<el-col :span="24">
|
||
<el-card shadow="always" style="font-size: 18px;
|
||
text-align:left;background-color: #f4ffed;
|
||
border-color: rgba(255,243,232,0.89);border-radius:10px">
|
||
<span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
|
||
分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包
|
||
括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div style="margin-top:30px;width:50vw;margin-left:20px">
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-card shadow="always" class="card_style">
|
||
<span style="font-size:25px;font-weight:540;color: #676767">已发布</span>
|
||
<br/><br/>
|
||
<span style="font-size:55px;font-weight:650;color: #3d8bff">{{Monely}}</span>
|
||
<br/><br/>
|
||
<span style="font-size:25px;font-weight:540;color: #676767">期</span>
|
||
<br/>
|
||
<br/>
|
||
<div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
|
||
<br/>
|
||
<span style="font-size:18px;font-weight:540;color: #676767">选择期数: </span>
|
||
<el-select clearable v-model="selectMonly" filterable placeholder="期数" style="width:80px;">
|
||
<el-option
|
||
v-for="item of Monely"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<br/><br/>
|
||
</div>
|
||
<br/>
|
||
<el-button type="info" @click="ToDetail()">阅读该期</el-button>
|
||
<br/><br/>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card shadow="always" class="card_style">
|
||
<span style="font-size:25px;font-weight:540;color: #676767">共包含</span>
|
||
<br/><br/>
|
||
<span style="font-size:55px;font-weight:650;color: #3d8bff">{{labelItem.length}}</span>
|
||
<br/><br/>
|
||
<span style="font-size:25px;font-weight:540;color: #676767">类</span>
|
||
<br/>
|
||
<br/>
|
||
<div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
|
||
<br/>
|
||
<span style="font-size:18px;font-weight:540;color: #676767">选择分类: </span>
|
||
<el-select clearable v-model="selectlabelItem" placeholder="分类" style="width:100px;">
|
||
<el-option
|
||
v-for="item in labelItem"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<br/><br/>
|
||
</div>
|
||
<br/>
|
||
<el-button type="info" @click="changePage()">查看分类</el-button>
|
||
<br/><br/>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card shadow="always" class="card_style" >
|
||
<span style="font-size:25px;font-weight:540;color: #676767">项目数</span>
|
||
<br/><br/>
|
||
<span style="font-size:55px;font-weight:650;color: #3d8bff">{{ProjectNum}}</span>
|
||
<br/><br/>
|
||
<span style="font-size:25px;font-weight:540;color: #676767">个</span>
|
||
<br/>
|
||
<br/>
|
||
<div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
|
||
<br/>
|
||
<span style="font-size:18px;font-weight:540;color: #676767">欢迎推荐和自荐项目！</span>
|
||
<br/><br/>
|
||
</div>
|
||
<el-button type="info" @click="getProjectNum()" style="margin-top:37px">推荐项目</el-button>
|
||
<br/><br/>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<br/>
|
||
<br/>
|
||
</div>
|
||
</div>
|
||
<RightTools></RightTools>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import axios from 'axios'
|
||
import RightTools from "@/components/Home/RightTools.vue";
|
||
export default {
|
||
name: "MonthlyComponent",
|
||
components: {RightTools},
|
||
data(){
|
||
return{
|
||
// 项目总数
|
||
ProjectNum:0,
|
||
//期刊总数：
|
||
Monely:0,
|
||
//保存用户选择期刊期数：
|
||
selectMonly:null,
|
||
// 保存用户选择的分类：
|
||
selectlabelItem:null,
|
||
//标签：
|
||
labelItem:[],
|
||
};
|
||
},
|
||
// 初始化渲染页面
|
||
mounted(){
|
||
this.getMonely();
|
||
this.getProjectNum();
|
||
this.getLabel();
|
||
},
|
||
methods: {
|
||
test(){
|
||
var that = this;
|
||
console.log(that.selectlabelItem);
|
||
},
|
||
goBack() {
|
||
window.history.go(-1);
|
||
},
|
||
// 获取项目总数
|
||
getProjectNum(){
|
||
var that = this;
|
||
axios({
|
||
method: 'post',
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/countNum',
|
||
params: {
|
||
}
|
||
}).then((res)=>{
|
||
that.ProjectNum = parseInt(res.data);
|
||
// console.log(res.data);
|
||
});
|
||
},
|
||
// 获取月刊总数
|
||
getMonely(){
|
||
var that = this;
|
||
axios({
|
||
method: 'post',
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/latest',
|
||
params: {
|
||
}
|
||
}).then(function (res){
|
||
that.Monely = parseInt(res.data);
|
||
// console.log(res.data);
|
||
})
|
||
},
|
||
//获取所有标签：
|
||
getLabel(){
|
||
var that = this;
|
||
axios({
|
||
method: 'post',
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
|
||
params: {
|
||
}
|
||
}).then(function (res){
|
||
that.labelItem = [];
|
||
for(let i=0;i<res.data.length;i++){
|
||
let tmp = res.data[i]['categoryName'];
|
||
that.labelItem.push(tmp);
|
||
}
|
||
})
|
||
},
|
||
// 月刊详情页面跳转
|
||
ToDetail(){
|
||
if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
|
||
let pathInfo = this.$router.resolve({
|
||
path: '/MonthlyDetail',
|
||
query:{
|
||
MonethlyId:this.selectMonly
|
||
}
|
||
})
|
||
window.open(pathInfo.href, '_self');
|
||
}else{
|
||
this.$message({
|
||
message: '请输入正确的月刊号',
|
||
type: 'warning',
|
||
offset:100,
|
||
duration:700,
|
||
});
|
||
}
|
||
},
|
||
// 月刊分类页跳转
|
||
changePage(){
|
||
if(this.selectlabelItem){
|
||
let pathInfo = this.$router.resolve({
|
||
path: '/MonthlyByTags',
|
||
query:{
|
||
Protype:this.selectlabelItem
|
||
}
|
||
})
|
||
window.open(pathInfo.href, '_self');
|
||
}else{
|
||
this.$message({
|
||
message: '请选择分类类型',
|
||
type: 'warning',
|
||
offset:100,
|
||
duration:700,
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
::v-deep .el-page-header__left{
|
||
left:-250px;
|
||
}
|
||
::v-deep .el-icon-back{
|
||
font-size:20px;
|
||
}
|
||
|
||
.el-carousel__item h3 {
|
||
color: #475669;
|
||
font-size: 14px;
|
||
opacity: 0.75;
|
||
line-height: 200px;
|
||
margin: 0;
|
||
}
|
||
|
||
.el-carousel__item{
|
||
width:450px;
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n) {
|
||
background-size: cover;
|
||
background-image: url("../../assets/images/WebsiteBanner.svg");
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n+1) {
|
||
background-size: cover;
|
||
background-image: url("../../assets/images/WebsiteBanner.svg");
|
||
}
|
||
.card_style{
|
||
height:390px;
|
||
font-size: 18px;
|
||
background-color: #ffffff;
|
||
border-color: rgba(209, 225, 189, 0.89);
|
||
text-align: center;
|
||
border-radius:10px;
|
||
}
|
||
|
||
::v-deep .el-scrollbar{
|
||
max-height:150px;
|
||
overflow: scroll;
|
||
}
|
||
|
||
::v-deep .el-page-header__left{
|
||
left:10px;
|
||
}
|
||
::v-deep .el-page-header__content{
|
||
flex:1;
|
||
}
|
||
|
||
</style> |