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

文件移动

Browse Source
This commit is contained in:
landaiqing
2023-07-02 23:07:12 +08:00
parent 2e9510a064
commit a6260431a5
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/components/Monthly/Monthly.vue Normal file
View File

@@ -0,0 +1,245 @@
<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: center;">
<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">选择期数: &nbsp;</span>
<el-select clearable v-model="selectMonly" filterable placeholder="期数" style="width:80px;">
<el-option
v-for="item in 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">17</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">选择分类: &nbsp;</span>
<el-select v-model="value" filterable placeholder="分类" style="width:80px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<br/><br/>
</div>
<br/>
<el-button type="info">查看分类</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>
<!-- <div style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
<!-- <div class="UserInfo">-->
<!-- 用户信息展示内容：-->
<!-- </div>-->
<!-- <div class="RightContent">-->
<!-- 空位置，待填入-->
<!-- </div>-->
<!-- <div class="ReferralProgram">-->
<!-- 推荐项目目录-->
<!-- </div>-->
<!-- </div>-->
</div>
</template>
<script>
import axios from 'axios'
import Vue from "vue";
export default {
name: "MonthlyComponent",
data(){
return{
// 项目总数
ProjectNum:0,
//期刊总数：
Monely:0,
//保存用户选择期刊期数：
selectMonly:null,
};
},
// 初始化渲染页面
mounted(){
this.getMonely();
this.getProjectNum();
},
methods: {
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);
})
},
// 月刊详情页面跳转
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,
});
}
}
}
}
</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:nth-child(2n) {
background-size: cover;
background-image: url("../../assets/images/美人.jpg");
}
.el-carousel__item:nth-child(2n+1) {
background-size: cover;
background-image: url("../../assets/images/美人.jpg");
}
.card_style{
height:390px;
font-size: 18px;
background-color: #ffffff;
border-color: rgba(209, 225, 189, 0.89);
text-align: center;
border-radius:10px;
}
</style>