首页标签基本框架搭建
This commit is contained in:
@@ -4,14 +4,19 @@
|
||||
style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 5vh;">
|
||||
<template>
|
||||
<el-card class="box-card"
|
||||
style="position: fixed;width: 10vw;height: 50vh;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
|
||||
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">
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
<el-tag style="margin-top: 10px" type="success">{{ '标签 ' + o }}</el-tag>
|
||||
</div>
|
||||
<el-tabs tab-position="left" v-model="activeIndex" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="(tag,index) in tags" :key="index" :index="index">
|
||||
<span slot="label" style="text-align: center" :name="tag.name" v-html="tag.icon"></span>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- <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>
|
||||
@@ -31,8 +36,9 @@
|
||||
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: row;margin-left: -80px">
|
||||
style="display: flex;flex-direction: column;margin-left: -80px;" >
|
||||
<ProjectList :project-lists="project"></ProjectList>
|
||||
<el-divider></el-divider>
|
||||
</ol>
|
||||
</ul>
|
||||
<p v-if="loading">加载中...</p>
|
||||
@@ -47,8 +53,9 @@
|
||||
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: row;margin-left: -80px">
|
||||
style="display: flex;flex-direction: column;margin-left: -80px">
|
||||
<ProjectList :project-lists="project"></ProjectList>
|
||||
<el-divider></el-divider>
|
||||
</ol>
|
||||
</ul>
|
||||
<p v-if="loading">加载中...</p>
|
||||
@@ -209,6 +216,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
activeIndex:'综合',
|
||||
projectLists:[],
|
||||
count: 10,
|
||||
loading: false,
|
||||
@@ -237,6 +245,28 @@ export default {
|
||||
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
},
|
||||
// tags:['<i class="el-icon-discover"></i> 综 合',
|
||||
// '<i class="el-ico-alicyuyan"></i> C++',
|
||||
// '<i class="el-ico-aliPython"></i> python',
|
||||
// `<i class="el-ico-alijava"></i> java`,
|
||||
// `<i class="el-ico-alicyuyan"></i> C`,
|
||||
// `<i class="el-ico-alioutline-java-script"></i> javaScript`,
|
||||
// `<i class="el-ico-alicaishichang-"></i> 教 程`,
|
||||
// ],
|
||||
tags:[
|
||||
{
|
||||
icon: `<i class="el-icon-discover"></i> 综 合`,
|
||||
name:"综合"
|
||||
},
|
||||
{
|
||||
icon: `<i class="el-ico-alicyuyan"></i> C++`,
|
||||
name:"C++"
|
||||
},
|
||||
{
|
||||
icon: `<i class="el-ico-aliPython"></i> python`,
|
||||
name:"python"
|
||||
},
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
@@ -244,15 +274,33 @@ export default {
|
||||
this.account(); //获取cookie的方法
|
||||
this.ProjectLists();
|
||||
},
|
||||
created() {
|
||||
if (sessionStorage.getItem('current_name') == null){
|
||||
this.activeIndex = '综合'
|
||||
}else{
|
||||
this.activeIndex = sessionStorage.getItem('current_name')
|
||||
}
|
||||
},
|
||||
beforeRouteLeave(to, from, next){
|
||||
// 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
|
||||
// 根据个人需求决定清除的时间
|
||||
sessionStorage.removeItem('currentTab')
|
||||
next()
|
||||
},
|
||||
computed: {
|
||||
noMore() {
|
||||
return this.count >= 20
|
||||
return this.count >= 10
|
||||
},
|
||||
disabled() {
|
||||
return this.loading || this.noMore
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
// location.search:获取路由上的参数
|
||||
sessionStorage.setItem('current_name', this.activeIndex)
|
||||
},
|
||||
openLogin() {
|
||||
this.loginDialogVisible = true;
|
||||
},
|
||||
@@ -470,8 +518,7 @@ export default {
|
||||
if (tab.name == "second") {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
@@ -481,4 +528,26 @@ export default {
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/*去掉切换时el-tab-pane底部的蓝色下划线*/
|
||||
.el-tabs__active-bar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/*去掉tabs底部的下划线*/
|
||||
.el-tabs__nav-wrap::after {
|
||||
position: static !important;
|
||||
}
|
||||
.el-tabs__item:hover{
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.el-tabs__item{
|
||||
text-align: center;
|
||||
}
|
||||
.el-tabs__nav{
|
||||
/*margin-left: 7px;*/
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -18,7 +18,7 @@
|
||||
<div>
|
||||
<div style="margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;background-color: #ffba00"></div>
|
||||
</div>
|
||||
<el-tag size="mini" style="margin-left: 5px">C++</el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
|
||||
<el-tag size="mini" style="margin-left: 5px">{{projectLists.categoryName}}</el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
|
||||
<div style="margin-left: 10px">
|
||||
<span style="color: rgb(156 163 175); ">{{ formatTime }}</span>
|
||||
</div>
|
||||
@@ -54,7 +54,7 @@ export default {
|
||||
},
|
||||
// 截取文章内容的前 35 个字，并加上省略号
|
||||
brief: function() {
|
||||
return this.projectLists.projectDescription.substr(0, 35) + '...';
|
||||
return this.projectLists.projectDescription.substr(0, 33) + '...';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user