更新页面
This commit is contained in:
@@ -57,7 +57,8 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
}
|
||||
.RightContent{
|
||||
width:20vw;
|
||||
margin-top:10px;
|
||||
height:fit-content;
|
||||
margin-top:50px;
|
||||
margin-left:20px;
|
||||
border-radius: 6px;
|
||||
background-color: #ffffff;
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
<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 in Monely"
|
||||
v-for="item of Monely"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
@@ -72,7 +72,7 @@
|
||||
<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>
|
||||
<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/>
|
||||
@@ -80,19 +80,19 @@
|
||||
<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 v-model="value" filterable placeholder="分类" style="width:80px;">
|
||||
<el-select clearable v-model="selectlabelItem" placeholder="分类" style="width:100px;">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in labelItem"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<br/><br/>
|
||||
</div>
|
||||
<br/>
|
||||
<el-button type="info">查看分类</el-button>
|
||||
<el-button type="info" @click="changePage()">查看分类</el-button>
|
||||
<br/><br/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@@ -150,14 +150,23 @@ export default {
|
||||
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);
|
||||
},
|
||||
@@ -187,6 +196,22 @@ export default {
|
||||
// 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){
|
||||
@@ -205,6 +230,26 @@ export default {
|
||||
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,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -242,4 +287,9 @@ export default {
|
||||
text-align: center;
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
::v-deep .el-scrollbar{
|
||||
max-height:150px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
142
src/components/Monthly/MonthlyByTags.vue
Normal file
142
src/components/Monthly/MonthlyByTags.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="test" style="display:flex;flex-direction:row;flex-wrap: nowrap" >
|
||||
<div style="display: flex;flex-direction:column;flex-wrap: nowrap">
|
||||
<div class="PageHeader">
|
||||
<br/>
|
||||
<div style="display:flex;flex-wrap:nowrap">
|
||||
<el-button icon="el-icon-search" circle></el-button>
|
||||
<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:25px;font-weight: 650;margin-top:0px">
|
||||
《HelloGitHub》月刊<span style="font-size:18px">{{selectlabelItem}}</span>分区
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="PageContent">
|
||||
|
||||
<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;
|
||||
font-weight:550;color: #a9a9a9;
|
||||
line-height: 35px;
|
||||
text-align:left;background-color: #f4ffed;
|
||||
border-color: rgba(255,243,232,0.89);border-radius:10px">
|
||||
这里是按照<span style="font-size:20px;font-weight:600;color:#7e7e7e">「分类」</span>
|
||||
阅读往期的 HelloGitHub 月刊内容， 您目前在查看往期 HelloGitHub 月刊中的
|
||||
<span style="font-size:20px;font-weight:600;color:#7e7e7e">{{selectlabelItem}} 项目</span>
|
||||
集合。
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="ItemsContent" >
|
||||
<el-scrollbar class="scrollbar-wrapper" style="position: relative;" >
|
||||
<div class="infinite-list-wrapper" >
|
||||
<ul class="list"
|
||||
v-infinite-scroll="load"
|
||||
infinite-scroll-disabled="disabled"
|
||||
>
|
||||
<div style="text-align: center">
|
||||
<div v-for="(items,index2) of projectLists.length" :key="index2">
|
||||
<MonthlyItems :Items='projectLists[index2]'></MonthlyItems>
|
||||
</div>
|
||||
<div :id="index"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<p v-if="loading" style="color: #9ca3af">加载中...</p>
|
||||
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MonthlyItems from "@/components/Monthly/MonthlyItems.vue";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "MonthlyByTags",
|
||||
components: {MonthlyItems},
|
||||
data(){
|
||||
return{
|
||||
// 项目分类标签数组
|
||||
labelItem:[],
|
||||
// 项目列表：
|
||||
projectLists:null,
|
||||
// 选择的分类：
|
||||
selectlabelItem:null,
|
||||
//种类对应项目数组：
|
||||
MonTypePro:[],
|
||||
}
|
||||
},
|
||||
//初始化
|
||||
mounted() {
|
||||
this.initPage() ;
|
||||
},
|
||||
methods:{
|
||||
test(){
|
||||
var that = this;
|
||||
console.log(that.selectlabelItem);
|
||||
},
|
||||
// 初始化方法
|
||||
initPage(){
|
||||
this.selectlabelItem = this.$route.query.Protype;
|
||||
var that = this;
|
||||
this.getList(1,that.selectlabelItem);
|
||||
},
|
||||
goBack() {
|
||||
let pathInfo = this.$router.resolve({
|
||||
path: '/Monthly',
|
||||
query:{
|
||||
}
|
||||
})
|
||||
window.open(pathInfo.href, '_self');
|
||||
},
|
||||
// 获取所有标签列表
|
||||
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);
|
||||
}
|
||||
console.log(that.labelItem);
|
||||
})
|
||||
},
|
||||
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;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-page-header__left{
|
||||
left:-200px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<div style="display:flex;flex-direction:row;flex-wrap: nowrap">
|
||||
<div class="test" 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:18px;font-weight: 600;margin-top:-10px">
|
||||
<el-button ref="LastBtn" size="medium" type="primary" icon="el-icon-arrow-left">上一期</el-button>
|
||||
|
||||
<el-select no-data-text="MonthlyId" @change="ToDetail()" size="medium"
|
||||
clearable v-model="selectMonly" filterable placeholder="期数" style="width:80px;">
|
||||
<el-button @click="ToNearMon('LastBtn')" ref="LastBtn" size="medium" type="primary" icon="el-icon-arrow-left">上一期</el-button>
|
||||
<el-select @change="ToDetail()" size="medium"
|
||||
clearable v-model="selectMonly" filterable placeholder="跳转期数" style="width:80px;">
|
||||
<el-option
|
||||
v-for="item in Monely"
|
||||
:key="item"
|
||||
@@ -20,13 +19,13 @@
|
||||
</el-select>
|
||||
|
||||
/ {{Monely}}
|
||||
<el-button ref="NextBtn" size="medium" type="primary">下一期<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
||||
<el-button @click="ToNearMon('NextBtn')" ref="NextBtn" size="medium" type="primary">下一期<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
<div class="PageContent">
|
||||
<div style="font-size:35px;font-weight:750;">
|
||||
《HelloGitHub》月刊第{{selectMonly}}期
|
||||
《HelloGitHub》月刊第{{MonthlyId}}期
|
||||
</div>
|
||||
|
||||
<div style="margin-top:30px;width:50vw;margin-left:20px">
|
||||
@@ -43,31 +42,61 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="ItemsContent" >
|
||||
<el-scrollbar class="scrollbar-wrapper" style="position: relative;" >
|
||||
<div class="infinite-list-wrapper" >
|
||||
<ul class="list"
|
||||
v-infinite-scroll="load"
|
||||
infinite-scroll-disabled="disabled"
|
||||
>
|
||||
<div v-for="(items,index) in MonType.length" :key="index" style="text-align: center">
|
||||
<div class="scroll-content">
|
||||
<span style="font-size:40px;font-weight:700;font-family:'华文彩云' ">{{MonType[index]}}语言区</span>
|
||||
</div>
|
||||
<div v-for="(items,index2) of MonTypePro[index].length" :key="index2">
|
||||
<MonthlyItems :Items='MonTypePro[index][index2]'></MonthlyItems>
|
||||
</div>
|
||||
<div :id="index"></div>
|
||||
</div>
|
||||
<!-- <el-button @click="test()"></el-button>-->
|
||||
</ul>
|
||||
<p v-if="loading" style="color: #9ca3af">加载中...</p>
|
||||
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="RightContent" style="position:fixed;left:70vw;max-height:80vh;overflow: scroll">
|
||||
<el-row class="tac">
|
||||
<el-col :span="24">
|
||||
<h5 style="font-size:25px;">快速导航</h5>
|
||||
<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;">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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 Monthly from "@/components/Monthly/Monthly.vue";
|
||||
import MonthlyItems from "@/components/Monthly/MonthlyItems.vue"
|
||||
|
||||
export default {
|
||||
name: "MonthlyDetailComponent",
|
||||
components: {MonthlyItems},
|
||||
data(){
|
||||
return{
|
||||
//用户当前所处的月刊期号
|
||||
@@ -76,24 +105,110 @@ export default {
|
||||
Monely:null,
|
||||
// //用户选择跳转的月刊数
|
||||
selectMonly:null,
|
||||
//保存月刊内项目分类
|
||||
MonList:null,
|
||||
loading: false,
|
||||
count: 10,
|
||||
//测试组类：
|
||||
a1:null,
|
||||
//种类数组：
|
||||
MonType:[],
|
||||
//种类对应项目数组：
|
||||
MonTypePro:[],
|
||||
active:null,
|
||||
//图标列表：
|
||||
IconList:{"综合":"el-icon-discover", "C":"el-ico-alicyuyan", "C#":"el-ico-aliCyuyan", "C++":"el-ico-alicyuyan",
|
||||
"CSS":"el-ico-alicss3", "Go":"el-ico-aliGoyuyan", "Java":"el-ico-alijava", "JavaScript":"el-ico-alioutline-java-script",
|
||||
"Kotlin":"el-ico-alikotlin", "Objective-C":"el-ico-alicyuyan", "PHP":"el-ico-aliphp", "python":"el-ico-aliPython",
|
||||
"Ruby":"el-ico-aliRubyyuyan", "Rust":"el-ico-alirust", "Swift":"el-ico-aliswift",
|
||||
"Other":"el-icon--help", "开源书籍":"el-ico-alitushu", "机器学习":"el-ico-alijiqixuexi___"}
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getMonely();
|
||||
window.addEventListener('scroll', this.onScroll)
|
||||
this.initPage();
|
||||
this.getMonely();
|
||||
this.FreshItems();
|
||||
},
|
||||
destroy() {
|
||||
// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
|
||||
window.removeEventListener('scroll', this.onScroll)
|
||||
},
|
||||
computed:{
|
||||
noMore() {
|
||||
return this.count >= 10
|
||||
},
|
||||
disabled() {
|
||||
return this.loading || this.noMore
|
||||
}
|
||||
},
|
||||
beforeRouteLeave(to , from, next){
|
||||
if(to.name == 'Monthly'){
|
||||
from.meta.keepAlive = false;
|
||||
}
|
||||
next();
|
||||
},
|
||||
methods: {
|
||||
//滚动
|
||||
// 点击切换锚点：
|
||||
goAnchor(id) {
|
||||
var anchor = document.getElementById(id);
|
||||
// chrome
|
||||
document.body.scrollTop = anchor.offsetTop + anchor.offsetHeight;
|
||||
// firefox
|
||||
document.documentElement.scrollTop = anchor.offsetTop + anchor.offsetHeight;
|
||||
// safari
|
||||
window.pageYOffset = anchor.offsetTop + anchor.offsetHeight;
|
||||
var that = this;
|
||||
that.active = id;
|
||||
console.log(that.active);
|
||||
},
|
||||
onScroll() {
|
||||
// 获取所有锚点元素
|
||||
const navContents = document.querySelectorAll('.scroll-content')
|
||||
// 所有锚点元素的 offsetTop
|
||||
const offsetTopArr = []
|
||||
navContents.forEach(item => {
|
||||
offsetTopArr.push(item.offsetTop)
|
||||
})
|
||||
// 获取当前文档流的 scrollTop
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||
// 定义当前点亮的导航下标
|
||||
let navIndex = 0
|
||||
for (let n = 0; n < offsetTopArr.length; n++) {
|
||||
// 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
|
||||
// 那么此时导航索引就应该是 n 了
|
||||
if (scrollTop >= offsetTopArr[n]) {
|
||||
navIndex = n
|
||||
}
|
||||
}
|
||||
// 把下标赋值给 vue 的 data
|
||||
this.active = navIndex
|
||||
},
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
let pathInfo = this.$router.resolve({
|
||||
path: '/Monthly',
|
||||
query:{
|
||||
}
|
||||
})
|
||||
window.open(pathInfo.href, '_self');
|
||||
},
|
||||
initPage(){
|
||||
this.selectMonly = this.$route.query.MonethlyId;
|
||||
this.MonthlyId = this.$route.query.MonethlyId;
|
||||
this.selectMonly = this.MonthlyId;
|
||||
// if(parseInt(this.selectMonly) == parseInt(1) || parseInt(this.MonethlyId) == parseInt(1)){
|
||||
// this.$refs.LastBtn.style.display = "none"
|
||||
// }else if(parseInt(this.selectMonly) == this.Monely || parseInt(this.MonethlyId) == this.Monely){
|
||||
// this.$refs.NextBtn.style.display = "none"
|
||||
// }
|
||||
},
|
||||
test(){
|
||||
console.log(this.MonType);
|
||||
console.log(this.MonTypePro);
|
||||
console.log(this.MonList);
|
||||
},
|
||||
// 月刊总数:
|
||||
getMonely(){
|
||||
var that = this;
|
||||
axios({
|
||||
@@ -106,11 +221,38 @@ export default {
|
||||
// console.log(res.data);
|
||||
})
|
||||
},
|
||||
// 获取该期月刊中项目列表
|
||||
getList(num){
|
||||
var that = this;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectTerm',
|
||||
params: {
|
||||
type:num
|
||||
}
|
||||
}).then(function (res){
|
||||
that.MonList = res.data;
|
||||
that.MonType=[];
|
||||
that.MonTypePro=[];
|
||||
Object.keys(that.MonList).forEach(key=>{
|
||||
that.MonType.push(key);
|
||||
that.MonTypePro.push(that.MonList[key]);
|
||||
})
|
||||
})
|
||||
},
|
||||
// 月刊详情页面跳转
|
||||
ToDetail(){
|
||||
if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
|
||||
this.MonthlyId = this.selectMonly;
|
||||
let pathInfo = this.$router.resolve({
|
||||
path: '/MonthlyDetail',
|
||||
query:{
|
||||
MonethlyId:this.selectMonly
|
||||
}
|
||||
})
|
||||
window.open(pathInfo.href, '_self');
|
||||
// console.log(parseInt(this.selectMonly) + " " + parseInt(this.MonethlyId) )
|
||||
console.log("跳转成功")
|
||||
this.$router.go(0);
|
||||
}else{
|
||||
this.$message({
|
||||
message: '请输入正确的月刊号',
|
||||
@@ -120,12 +262,82 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
//上一期下一期：
|
||||
ToNearMon(name){
|
||||
if(name == "LastBtn" && this.MonthlyId>1){
|
||||
// this.selectMonly = this.MonthlyId -1;
|
||||
let pathInfo = this.$router.resolve({
|
||||
path: '/MonthlyDetail',
|
||||
query:{
|
||||
MonethlyId:this.MonthlyId - 1
|
||||
}
|
||||
})
|
||||
window.open(pathInfo.href, '_self');
|
||||
this.$router.go(0);
|
||||
}else if(name == "LastBtn" && this.MonthlyId == 1){
|
||||
this.$message({
|
||||
message: '您已处于第一期月刊！',
|
||||
type: 'warning',
|
||||
offset:100,
|
||||
duration:500,
|
||||
});
|
||||
}
|
||||
if(name == "NextBtn" && this.MonthlyId < this.Monely){
|
||||
let pathInfo = this.$router.resolve({
|
||||
path: '/MonthlyDetail',
|
||||
query:{
|
||||
MonethlyId:parseInt(this.MonthlyId) + parseInt(1)
|
||||
}
|
||||
})
|
||||
window.open(pathInfo.href, '_self');
|
||||
this.$router.go(0);
|
||||
}else if(name == "NextBtn" && this.MonthlyId == this.Monely){
|
||||
this.$message({
|
||||
message: '您已处于最后一期月刊!',
|
||||
type: 'warning',
|
||||
offset:100,
|
||||
duration:500,
|
||||
});
|
||||
}
|
||||
},
|
||||
// 更行月刊内容：
|
||||
FreshItems(){
|
||||
this.getList(this.MonthlyId);
|
||||
var that = this;
|
||||
that.active = 0;
|
||||
},
|
||||
load(){
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.count += 2
|
||||
this.loading = false
|
||||
}, 2000)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-page-header__left{
|
||||
left:-200px;
|
||||
}
|
||||
.ItemsContent{
|
||||
margin-left:-10px;
|
||||
width:54vw;
|
||||
}
|
||||
#menuItems{
|
||||
background-color:rgb(178, 178, 178);
|
||||
color:#fff;
|
||||
width:20vw;
|
||||
height:55px;
|
||||
font-size:20px;
|
||||
text-decoration-line: none;
|
||||
}
|
||||
#menuItems:hover{
|
||||
background-color:#a4a4a4;
|
||||
transform:scale(1.15);
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
113
src/components/Monthly/MonthlyItems.vue
Normal file
113
src/components/Monthly/MonthlyItems.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="MonItems">
|
||||
<div class="Title"><i class="el-icon-s-promotion"></i>{{briefTitle}}</div>
|
||||
<div class="State">
|
||||
<div style="margin-top:10px">
|
||||
<i class="el-icon-star-off"></i> Star:1400
|
||||
<i class="el-icon-set-up"></i> Fork:755
|
||||
<i class="el-icon-view"></i> 浏览量:{{Items.lookCount}}
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="medium" type="primary" plain @click="changePage(Items.projectId)">详 情</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ItemsContent">
|
||||
{{briefDescribe}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MonthlyItems",
|
||||
data(){
|
||||
return{
|
||||
content:'随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近' +
|
||||
'两年迎来了前所未有的热度。该项目是由密码学专家团队打造的隐私计算平台，它开箱即用、安全可靠，支持隐匿查询、' +
|
||||
'隐私求交、联合统计、数据资源管理等功能，实现了“数据可用不可见”，为数据安全流通保驾护航。',
|
||||
}
|
||||
|
||||
},
|
||||
props:{
|
||||
Items:{
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
briefTitle: function(){
|
||||
if(this.Items.projectTitle.length>=14){
|
||||
return this.Items.projectTitle.substr(0, 13) + '...';
|
||||
}else{
|
||||
return this.Items.projectTitle;
|
||||
}
|
||||
},
|
||||
briefDescribe: function(){
|
||||
if(this.Items.projectDescription.length >= 151){
|
||||
return this.Items.projectDescription.substr(0, 150) + '...';
|
||||
}else {
|
||||
return this.Items.projectDescription;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//项目详情
|
||||
changePage(id){
|
||||
let pathInfo = this.$router.resolve({
|
||||
path: '/ProjectDetail',
|
||||
query:{
|
||||
id:id
|
||||
}
|
||||
})
|
||||
window.open(pathInfo.href, '_self');
|
||||
this.$router.go(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.MonItems{
|
||||
width:52vw;
|
||||
margin-top:30px
|
||||
}
|
||||
.Title{
|
||||
margin-left:0px;
|
||||
width:fit-content;
|
||||
color: #7bb6ff;
|
||||
font-size:25px;
|
||||
font-weight:550;
|
||||
}
|
||||
.Title:hover{
|
||||
text-decoration-line:underline ;
|
||||
color: #2b93ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.State{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
margin-top:10px;
|
||||
margin-left:0px;
|
||||
width:48vw;
|
||||
/*width:fit-content;*/
|
||||
font-size:16px;
|
||||
font-family: '华文细黑';
|
||||
font-weight:700;
|
||||
color: #6b6b6b;
|
||||
}
|
||||
.ItemsContent{
|
||||
font-weight:550;
|
||||
margin-top:8px;
|
||||
margin-left:0px;
|
||||
width:700px;
|
||||
font-size:18px;
|
||||
/*background-color: #ff4949;*/
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -6,6 +6,7 @@ import monthly from "@/components/Monthly/Monthly.vue";
|
||||
import ranking from "@/components/Ranking.vue";
|
||||
import paper from "@/components/Paper/Paper.vue";
|
||||
import MonthlyDetail from "@/components/Monthly/MonthlyDetail.vue";
|
||||
import MonthlyByTags from "@/components/Monthly/MonthlyByTags.vue";
|
||||
import UserInfoPage from "@/components/User/UserInfoPage.vue";
|
||||
import ProjectDetail from "@/components/Project/ProjectDetail.vue";
|
||||
import ArticleDetail from "@/components/Paper/ArticleDetail.vue";
|
||||
@@ -56,6 +57,11 @@ const routes = [
|
||||
name: 'UserInfoPage',
|
||||
component: UserInfoPage
|
||||
},
|
||||
{
|
||||
path: '/MonthlyByTags',
|
||||
name: 'MonthlyByTags',
|
||||
component: MonthlyByTags
|
||||
},
|
||||
{
|
||||
path: '/ProjectDetail',
|
||||
name: 'ProjectDetail',
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-main>
|
||||
<!-- <keep-alive>-->
|
||||
<router-view></router-view>
|
||||
<!-- </keep-alive>-->
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
Reference in New Issue
Block a user