Merge remote-tracking branch 'origin/master'
This commit is contained in:
@@ -20,7 +20,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchInput from "@/components/SearchInput.vue";
|
||||
import SearchInput from "@/components/Home/SearchInput.vue";
|
||||
|
||||
export default {
|
||||
name: "HeaderComponent",
|
||||
|
||||
@@ -9,18 +9,20 @@
|
||||
<span><i class="el-icon-menu"></i> 热门标签</span>
|
||||
</div>
|
||||
<div class="bottom clearfix">
|
||||
<el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange">
|
||||
<el-tab-pane v-for="(tag,index) in tags" :key="index" :index="index" :name="tag.name" >
|
||||
<span slot="label" style="text-align: center" v-html="tag.icon"></span>
|
||||
<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">管理标签</el-button>
|
||||
<el-button type="text" class="button" @click="manageCategoryVisible=true">管理标签</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -201,6 +203,17 @@
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
<!--管理标签弹框-->
|
||||
<el-dialog
|
||||
:visible.sync="manageCategoryVisible"
|
||||
width="50vw">
|
||||
<div>
|
||||
<ManageCategory></ManageCategory>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
@@ -208,11 +221,13 @@
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import Vue from "vue";
|
||||
import ProjectList from "@/components/ProjectList.vue";
|
||||
import ProjectList from "@/components/Home/ProjectList.vue";
|
||||
import manageCategory from "@/components/Home/ManageCategory.vue";
|
||||
import ManageCategory from "@/components/Home/ManageCategory.vue";
|
||||
|
||||
export default {
|
||||
name: "HomeComponent",
|
||||
components: {ProjectList},
|
||||
components: {ManageCategory, ProjectList},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
@@ -224,6 +239,7 @@ export default {
|
||||
loading: false,
|
||||
loginDialogVisible: false,
|
||||
registerDialogVisible: false,
|
||||
manageCategoryVisible:false,
|
||||
imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
|
||||
checked: false,
|
||||
passwordVisible: "password",
|
||||
@@ -247,38 +263,13 @@ 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-aliGoyuyan"></i> C#`,
|
||||
name:"C#"
|
||||
},
|
||||
{
|
||||
icon: `<i class="el-ico-alicyuyan"></i> C++`,
|
||||
name:"C++"
|
||||
},
|
||||
],
|
||||
|
||||
tags:null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.account(); //获取cookie的方法
|
||||
this.ProjectLists();
|
||||
this.categoryList();
|
||||
},
|
||||
created() {
|
||||
// if (sessionStorage.getItem('current_name') == null){
|
||||
@@ -294,6 +285,9 @@ export default {
|
||||
// next()
|
||||
},
|
||||
computed: {
|
||||
manageCategory() {
|
||||
return manageCategory
|
||||
},
|
||||
noMore() {
|
||||
return this.count >= 10
|
||||
},
|
||||
@@ -514,7 +508,7 @@ export default {
|
||||
that.projectLists=res.data;
|
||||
});
|
||||
},
|
||||
projectListsByCount(index){
|
||||
projectListsByCount(index,name){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
@@ -523,6 +517,7 @@ export default {
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
num: index,
|
||||
name:name
|
||||
}
|
||||
}).then((res)=>{
|
||||
// console.log(res.data);
|
||||
@@ -532,23 +527,21 @@ export default {
|
||||
tabChange(tab) {
|
||||
if(tab.name=="first"){
|
||||
if(this.currentTabIndex!=null){
|
||||
this. typeChangeFun(this.currentTabIndex);
|
||||
this.typeChangeFun(this.currentTabIndex,this.currentTabName);
|
||||
}else {
|
||||
this.ProjectLists();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
if (tab.name == "second") {
|
||||
if(this.currentTabIndex!=null){
|
||||
this.projectListsByCount(this.currentTabIndex);
|
||||
this.projectListsByCount(this.currentTabIndex,this.currentTabName);
|
||||
}else {
|
||||
this.projectListsByCount(this.tabindex);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
typeChangeFun(index){
|
||||
typeChangeFun(index,name){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
@@ -557,6 +550,7 @@ export default {
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
num: index,
|
||||
name:name
|
||||
}
|
||||
}).then((res)=>{
|
||||
console.log(res.data);
|
||||
@@ -567,12 +561,27 @@ export default {
|
||||
typeChange(tab){
|
||||
this.currentTabIndex=tab.index;
|
||||
if(this.activeName==="first"){
|
||||
this.typeChangeFun(tab.index);
|
||||
this.typeChangeFun(tab.index,this.currentTabName);
|
||||
}
|
||||
if(this.activeName==="second"){
|
||||
this.projectListsByCount(tab.index);
|
||||
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;
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
@@ -604,4 +613,8 @@ export default {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
25
src/components/Home/ManageCategory.vue
Normal file
25
src/components/Home/ManageCategory.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-checkbox-group v-model="checkboxGroup" size="medium">
|
||||
<el-checkbox label="备选项1" border></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ManageCategory",
|
||||
props: {
|
||||
tags: Object
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
checkboxGroup:[],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</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">{{projectLists.categoryName}}</el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
|
||||
<el-tag size="mini" style="margin-left: 5px" v-html="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>
|
||||
Reference in New Issue
Block a user