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

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
Zhang HaoYang
2023-07-02 11:24:32 +08:00
parent 85608faf85 1538983616
commit 1bca584178
13 changed files with 237 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -15,6 +15,7 @@
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
@@ -29,4 +30,7 @@ nav a {
nav a.router-link-exact-active {
color: #42b983;
}
::-webkit-scrollbar{
display:none;
}
</style>

98
src/assets/icon/demo_index.html
View File

@@ -54,6 +54,30 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xec50;</span>
<div class="name">php</div>
<div class="code-name">&amp;#xec50;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">机器学习</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb76;</span>
<div class="name">css3</div>
<div class="code-name">&amp;#xeb76;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">Ruby语言</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xec1c;</span>
<div class="name">rust</div>
@@ -228,9 +252,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1688142699712') format('woff2'),
url('iconfont.woff?t=1688142699712') format('woff'),
url('iconfont.ttf?t=1688142699712') format('truetype');
src: url('iconfont.woff2?t=1688227003995') format('woff2'),
url('iconfont.woff?t=1688227003995') format('woff'),
url('iconfont.ttf?t=1688227003995') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -256,6 +280,42 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont el-ico-aliphp"></span>
<div class="name">
php
</div>
<div class="code-name">.el-ico-aliphp
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alijiqixuexi___"></span>
<div class="name">
机器学习
</div>
<div class="code-name">.el-ico-alijiqixuexi___
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alicss3"></span>
<div class="name">
css3
</div>
<div class="code-name">.el-ico-alicss3
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aliRubyyuyan"></span>
<div class="name">
Ruby语言
</div>
<div class="code-name">.el-ico-aliRubyyuyan
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alirust"></span>
<div class="name">
@@ -517,6 +577,38 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliphp"></use>
</svg>
<div class="name">php</div>
<div class="code-name">#el-ico-aliphp</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alijiqixuexi___"></use>
</svg>
<div class="name">机器学习</div>
<div class="code-name">#el-ico-alijiqixuexi___</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alicss3"></use>
</svg>
<div class="name">css3</div>
<div class="code-name">#el-ico-alicss3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliRubyyuyan"></use>
</svg>
<div class="name">Ruby语言</div>
<div class="code-name">#el-ico-aliRubyyuyan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alirust"></use>

37
src/assets/icon/iconfont.css
View File

@@ -1,8 +1,18 @@
@font-face {
font-family: "iconfont"; /* Project id 4146468 */
src: url('iconfont.woff2?t=1688142699712') format('woff2'),
url('iconfont.woff?t=1688142699712') format('woff'),
url('iconfont.ttf?t=1688142699712') format('truetype');
src: url('iconfont.woff2?t=1688227003995') format('woff2'),
url('iconfont.woff?t=1688227003995') format('woff'),
url('iconfont.ttf?t=1688227003995') format('truetype');
}
[class^="el-ico-ali"], [class*=" el-ico-ali"]/*这里有空格*/
{
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconfont {
@@ -12,14 +22,21 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="el-ico-ali"], [class*=" el-ico-ali"]/*这里有空格*/
{
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.el-ico-aliphp:before {
content: "\ec50";
}
.el-ico-alijiqixuexi___:before {
content: "\e601";
}
.el-ico-alicss3:before {
content: "\eb76";
}
.el-ico-aliRubyyuyan:before {
content: "\e61d";
}
.el-ico-alirust:before {

2
src/assets/icon/iconfont.js
View File

File diff suppressed because one or more lines are too long

28
src/assets/icon/iconfont.json
View File

@@ -5,6 +5,34 @@
"css_prefix_text": "el-ico-ali",
"description": "",
"glyphs": [
{
"icon_id": "15378684",
"name": "php",
"font_class": "php",
"unicode": "ec50",
"unicode_decimal": 60496
},
{
"icon_id": "10033408",
"name": "机器学习",
"font_class": "jiqixuexi___",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "15378279",
"name": "css3",
"font_class": "css3",
"unicode": "eb76",
"unicode_decimal": 60278
},
{
"icon_id": "20784475",
"name": "Ruby语言",
"font_class": "Rubyyuyan",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "27365258",
"name": "rust",

BIN
src/assets/icon/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/icon/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/icon/iconfont.woff2
View File

Binary file not shown.

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",

97
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.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">-->
<!--&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>
@@ -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
View 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>

2
src/components/ProjectList.vue → src/components/Home/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>

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