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 10:28:38 +08:00
parent 4463b1fe02
commit 71a299f4eb
13 changed files with 278 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Home/Header.vue
View File

@@ -20,7 +20,7 @@
</template>
<script>
import SearchInput from "@/components/SearchInput.vue";
import SearchInput from "@/components/Home/SearchInput.vue";
export default {
name: "HeaderComponent",

115
src/components/Home/Home.vue
View File

@@ -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.index" :name="tag.name" >
<span slot="label" style="border-radius: 10px;align-items: center;display: flex;flex-direction: row;justify-content: flex-start" v-html="tag.icon"></span>
</el-tab-pane>
</el-tabs>
</el-scrollbar>
<!-- <div v-for="(tag,index) in tags" :key="index" class="text item">-->
<!--&lt;!&ndash; <el-tag style="margin-top: 10px" type="success" v-html="tag"></el-tag>&ndash;&gt;-->
<!-- </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>
@@ -209,10 +222,12 @@
import axios from 'axios'
import Vue from "vue";
import ProjectList from "@/components/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",
@@ -257,21 +273,95 @@ export default {
// ],
tags:[
{
icon: `<i class="el-icon-discover"></i> 综 合`,
index:0,
icon: `<i class="el-icon-discover" style="margin-right: 10px"></i> 综合`,
name:"综合"
},
{
icon: `<i class="el-ico-alicyuyan"></i> C`,
index:1,
icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C`,
name:"C"
},
{
icon: `<i class="el-ico-aliGoyuyan"></i> C#`,
index:2,
icon: `<i class="el-ico-aliCyuyan" style="margin-right: 10px"></i> C#`,
name:"C#"
},
{
icon: `<i class="el-ico-alicyuyan"></i> C++`,
index:3,
icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C++`,
name:"C++"
},
{
index:4,
icon: `<i class="el-ico-alicss3" style="margin-right: 10px"></i> CSS`,
name:"CSS"
},
{
index:5,
icon: `<i class="el-ico-aliGoyuyan" style="margin-right: 10px"></i> Go`,
name:"Go"
},
{
index:6,
icon: `<i class="el-ico-alijava" style="margin-right: 10px"></i> Java`,
name:"Java"
},
{
index:7,
icon: `<i class="el-ico-alioutline-java-script" style="margin-right: 10px"></i> JavaScript`,
name:"JavaScript"
},
{
index:8,
icon: `<i class="el-ico-alikotlin" style="margin-right: 10px"></i> Kotlin`,
name:"Kotlin"
},
{
index:9,
icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> ObjectiveC`,
name:"Objective-C"
},
{
index:10,
icon: `<i class="el-ico-aliphp" style="margin-right: 10px"></i> PHP`,
name:"PHP"
},
{
index:11,
icon: `<i class="el-ico-aliPython" style="margin-right: 10px"></i> python`,
name:"python"
},
{
index:12,
icon: `<i class="el-ico-aliRubyyuyan" style="margin-right: 10px"></i> Ruby`,
name:"Ruby"
},
{
index:13,
icon: `<i class="el-ico-alirust" style="margin-right: 10px"></i> Rust`,
name:"Rust"
},
{
index:14,
icon: `<i class="el-ico-aliswift" style="margin-right: 10px"></i> Swift`,
name:"Swift"
},
{
index:15,
icon: `<i class="el-icon-s-help" style="margin-right: 10px"></i> Other`,
name:"Other"
},
{
index:16,
icon: `<i class="el-ico-alitushu" style="margin-right: 10px"></i> 开源书籍`,
name:"开源书籍"
},
{
index:17,
icon: `<i class="el-ico-alijiqixuexi___" style="margin-right: 10px"></i> 机器学习`,
name:"机器学习"
},
],
};
@@ -294,6 +384,9 @@ export default {
// next()
},
computed: {
manageCategory() {
return manageCategory
},
noMore() {
return this.count >= 10
},
@@ -604,4 +697,8 @@ export default {
background-color: #eeeeee;
}
.el-scrollbar__wrap {
overflow-y: hidden;
overflow-x: hidden;
}
</style>

15
src/components/Home/ManageCategory.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<el-card class="box-card">
</el-card>
</template>
<script>
export default {
name: "ManageCategory"
}
</script>
<style scoped>
</style>

0
src/components/SearchInput.vue → src/components/Home/SearchInput.vue
View File

2
src/components/ProjectList.vue
View File

@@ -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>