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-06-30 21:12:35 +08:00
parent 69c7e0a0f6
commit a7cf93d3e7
6 changed files with 136 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/touxiang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

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

@@ -1,7 +1,7 @@
<template>
<div class="header">
<div class="logo-all">
<img class="logo" src="../assets/logo/logo.png">
<img class="logo" src="../../assets/logo/logo.png">
<span class="HeaderWord">HelloGithub</span>
</div>

41
src/components/Home.vue → src/components/Home/Home.vue
View File

@@ -2,7 +2,7 @@
<el-container style="display: flex;flex-direction: row;">
<el-aside width="22vw" style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 5vh;">
<template>
<el-card class="box-card" style="width: 10vw;height: 50vh;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
<el-card class="box-card" style="position: fixed;width: 10vw;height: 50vh;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>
@@ -19,21 +19,33 @@
</el-card>
</template>
</el-aside>
<el-main style="height: 88vh;display: flex;flex-direction: row;flex-wrap: nowrap;">
<el-main style="display: flex;flex-direction: row;flex-wrap: nowrap;">
<template>
<div>
<el-tabs type="border-card" style="width: 45vw;height: 83vh;">
<el-tab-pane label="最热">
<el-tabs type="border-card" style="width: 45vw;">
<el-tab-pane label="最热" style="display: flex;justify-content: flex-start">
<ul
class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
<ProjectList></ProjectList>
</ol>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>
</el-tab-pane>
<el-tab-pane label="最新">
<div class="lsm-container">
<el-scrollbar class="scrollbar-wrapper" style="position: relative;height: 73vh;">
<el-scrollbar class="scrollbar-wrapper" style="position: relative;">
<div class="infinite-list-wrapper">
<ul
class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<li v-for="i in count" :key="i" class="list-item">
<ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
<ProjectList></ProjectList>
</li>
</ol>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>
@@ -41,9 +53,6 @@
</el-scrollbar>
</div>
</el-tab-pane>
<el-tab-pane label="最新">
最新
</el-tab-pane>
</el-tabs>
</div>
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
@@ -315,12 +324,14 @@ export default {
Vue.prototype.$notify({
title: '成功',
message: ('i', { style: 'color: teal'}, res.data.msg),
type: 'success'
type: 'success',
offset: 50
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg
message: res.data.msg,
offset: 50
});
}
console.log(res);
@@ -399,12 +410,14 @@ export default {
Vue.prototype.$notify({
title: '成功',
message: ('i', { style: 'color: teal'}, res.data.msg),
type: 'success'
type: 'success',
offset: 50
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg
message: res.data.msg,
offset: 50
});
}
console.log(res);

113
src/components/ProjectList.vue
View File

@@ -1,23 +1,110 @@
<template>
<div>
<el-descriptions>
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
<el-descriptions-item label="备注">
<el-tag size="small">学校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
</div>
<div class="ProjectList">
<div class="projectIco">
<img src="../assets/images/touxiang.png" style="width: 80px;height: 80px;margin-left: 10px;border-radius: 10px">
</div>
<div style="height: 12vh;margin-left: 5px;width: auto;display: flex;flex-direction: column;justify-content: space-between">
<div class="ProjectTitle">
<span>由密码学专家团队打造的开源隐私计算平台</span>
</div>
<div class="summary">
<span>随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近两..</span>
</div>
<div class="other">
<div class="otherInfo">
<div class="projectName">
<span style="color: #59A3A4">primihub</span><span style="color: rgb(156 163 175);"> • </span>
</div>
<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>
<div style="margin-left: 10px">
<span style="color: rgb(156 163 175); ">2023-6-30</span>
</div>
</div>
<div class="lookCount">
<i class="el-icon-view" style="color: rgb(156 163 175);"></i><span style="margin-left: 5px;color: rgb(156 163 175); ">1.3k</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ProjectList"
name: "ProjectList",
props: {
projectLists: Object
},
// 计算属性
computed: {
// 对时间进行格式化
formatTime: function() {
if (this.article) {
const dt = new Date(this.article.time)
const month = dt.getMonth()
const date = dt.getDate()
return `${month}月${date}日`
}
return '';
},
// 截取文章内容的前 35 个字，并加上省略号
brief: function() {
return this.projectLists.content.substr(0, 35) + '...';
}
}
}
</script>
<style scoped>
.ProjectList{
height: 15vh;
width: 100%;
/*background-color: #59A3A4;*/
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
border-radius: 10px;
cursor: pointer;
}
.ProjectList:hover{
background-color: #eeeeee;
}
.ProjectTitle{
display: flex;
flex-direction: row;
justify-content: flex-start;
color: black;
font-size: 18px;
}
.ProjectTitle:hover{
color: #59A3A4;
}
.summary{
color: rgb(156 163 175);
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.otherInfo{
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.projectName{
/*color: #1dc48c;*/
}
.other{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
}
</style>

2
src/router/index.js
View File

@@ -1,7 +1,7 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../views/index.vue'
import home from "@/components/Home.vue";
import home from "@/components/Home/Home.vue";
import monthly from "@/components/Monthly.vue";
import ranking from "@/components/Ranking.vue";
import paper from "@/components/Paper.vue";

11
src/views/index.vue
View File

@@ -14,7 +14,7 @@
</template>
<script>
import HeaderComponent from "@/components/Header.vue";
import HeaderComponent from "@/components/Home/Header.vue";
export default {
name:"HomeView",
@@ -23,8 +23,8 @@ export default {
}
}
</script>
<style>
.el-header {
<style scoped>
/deep/ .el-header {
position: fixed;
width: 100%;
height: 60px;
@@ -33,7 +33,10 @@ export default {
top: 0;
left: 0;
}
.el-main{
/deep/ .el-main{
margin-top: 2vh;
}
/deep/ .el-scrollbar__wrap {
overflow-x: hidden;
}
</style>