hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-10 19:36:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

个人主页页面

Browse Source
This commit is contained in:
zhaofang
2022-09-15 17:14:32 +08:00
parent 36c7dfc988
commit 2c6c545012
14 changed files with 513 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/homeWu/book.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
public/images/homeWu/man.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
public/images/homeWu/no-article.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/images/homeWu/woman.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

14
src/assets/styles/portal-index.scss
View File

@@ -170,3 +170,17 @@
margin-top: 20px;
}
}
.follow-home-title{
font-size: 18px;
font-weight: 600;
color: #333333;
}
.score-info{
font-size: 14px;
font-weight: 600;
color: #FC6401;
}
.follow-hide{
font-size: 12px;
color: #6E7B84;
}

74
src/components/HomePage/answerList.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<div class="answer-list">
<ul v-if="answerList.length > 0">
<li class="answer-list-index">
<h6 class="answer-title-info follow-home-title">行管专科名校直播班
<span class="follow-hide" style="float:right">
<svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
</span>
</h6>
<p class="answer-text">
假如你床头有 10 本书，你要在其中找到一本书，你会怎么找？你可能会说，扫一眼就找到了啊。假如你现在身处世界上最大的图书馆：美国国会图书馆，藏书超 2.1 亿本，现在你想在里边找某一本某某书，请问你如何找？一本一本翻吗？累死你，2.1 亿这个数字我给你换算了一下，把 2.1 亿本书铺起来可绕地球近两圈。不仅仅找书，图书馆每天还要在其中处理要在其中处要
<span style="color:#0B4D9D;cursor:pointer;" @click.stop="changeIsAll(item)">
{{false?'收起':'全文展开'}}
</span>
</p>
<div>
<interactBar :type="0" :shares="false" :views="false" :data="item" :readonly="true"></interactBar>
</div>
</li>
</ul>
<div v-else class="home-no-list">
<img class="img" src="/images/homeWu/no-answer.png" alt="" srcset="">
<p class="text">还没有回答</p>
</div>
</div>
</template>
<script>
import interactBar from "@/components/Portal/interactBar.vue";
import author from "@/components/Portal/authorInfo.vue";
export default{
name:"answerList",
components: {
interactBar,
// timeShow,
author
},
data(){
return{
answerList:[{name:1},{name:2}]
}
},
methods:{
//展示全部
changeIsAll(item) {
item.isAll = !item.isAll;
},
}
}
</script>
<style lang="scss" scoped>
.answer-list{
ul{
margin: 0;
}
.answer-list-index{
padding: 30px 0;
border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
}
.answer-title-info{
margin: 0;
margin-bottom: 16px;
}
.answer-text{
margin-bottom: 18px;
font-size: 14px;
color: #333330;
line-height: 20px;
}
}
</style>

77
src/components/HomePage/articleList.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div class="article-list">
<ul v-if="articleList.length > 0">
<li class="article-list-index">
<h6 class="article-title-info follow-home-title">《房产税落地其实不会对房价有大影响》
<span class="follow-hide" style="float:right">
<svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
</span>
</h6>
<div style="height:58px;padding-top:14px ">
<!-- <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author> -->
</div>
<p class="article-text">
假如你床头有 10 本书，你要在其中找到一本书，你会怎么找？你可能会说，扫一眼就找到了啊。假如你现在身处世界上最大的图书馆：美国国会图书馆，藏书超 2.1 亿本，现在你想在里边找某一本某某书，请问你如何找？一本一本翻吗？累死你，2.1 亿这个数字我给你换算了一下，把 2.1 亿本书铺起来可绕地球近两圈。不仅仅找书，图书馆每天还要在其中处理要在其中处要
<span style="color:#0B4D9D;cursor:pointer;" @click.stop="changeIsAll(item)">
{{false?'收起':'全文展开'}}
</span>
</p>
<div>
<interactBar :type="0" :shares="false" :views="false" :data="item" :readonly="true"></interactBar>
</div>
</li>
</ul>
<div v-else class="home-no-list">
<img class="img" style="width:150px;height:160px" src="/images/homeWu/no-article.png" alt="" srcset="">
<p class="text">还没有笔记</p>
</div>
</div>
</template>
<script>
import interactBar from "@/components/Portal/interactBar.vue";
import author from "@/components/Portal/authorInfo.vue";
export default{
name:"articleList",
components: {
interactBar,
// timeShow,
author
},
data(){
return{
articleList:[{name:1},{name:2}]
}
},
methods:{
//展示全部
changeIsAll(item) {
item.isAll = !item.isAll;
},
}
}
</script>
<style lang="scss" scoped>
.article-list{
ul{
margin: 0;
}
.article-list-index{
padding: 30px 0;
border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
}
.article-title-info{
margin: 0;
margin-bottom: 16px;
}
.article-text{
margin-bottom: 18px;
font-size: 14px;
color: #333330;
line-height: 20px;
}
}
</style>

101
src/components/HomePage/bookList.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<div class="book-list">
<ul v-if="bookList.length > 0">
<li class="book-list-index">
<div class="index-left"><img src="/images/homeWu/book.png" alt=""></div>
<div class="index-conter">
<h6 class="book-title-info follow-home-title">《百年孤独》<span style="margin-left:15px" class="portal-summary-text">[哥伦比亚] 加西亚·马尔克斯</span></h6>
<p class="book-text">开始很吃力，越读越上瘾，惊人的叙事与潮水般的叙事，野兽般撕开真理的外衣。从四姑娘的第一本书，就开始了他的抄袭生涯而已开始很吃力，越读越上瘾，惊人的叙事与潮水般的叙事，野兽般撕开真理的外衣。从四姑娘的第一本书，就开始了了他的···</p>
<el-rate
v-model="value"
disabled
show-score
text-color="#fc6401"
score-template="{value}分">
</el-rate>
</div>
<div class="index-right">
<span class="follow-hide" style="float:right">
<svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
</span>
<el-button class="btn" type="primary">查看图书</el-button>
</div>
</li>
</ul>
<div v-else class="home-no-list">
<img class="img" style="width:258px;height:168px" src="/images/homeWu/no-book.png" />
<p class="text">还没有书籍</p>
</div>
</div>
</template>
<script>
import interactBar from "@/components/Portal/interactBar.vue";
import author from "@/components/Portal/authorInfo.vue";
export default{
name:"bookList",
components: {
interactBar,
// timeShow,
author
},
data(){
return{
value:5,
bookList:[{name:1}]
}
},
methods:{
//展示全部
changeIsAll(item) {
item.isAll = !item.isAll;
},
}
}
</script>
<style lang="scss" scoped>
.book-list{
ul{
margin: 0;
}
.book-list-index{
padding: 30px 0;
border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
display: flex;
.index-left{
img{
width: 110px;
height: 144px;
}
}
.index-conter{
width: 100%;
margin: 0 30px;
::v-deep .el-rate__icon{
color: #FC6401 !important;
font-size: 20px !important;
}
}
.index-right{
.btn{
width: 140px;
height: 40px;
margin-top: 40px;
}
}
}
.book-title-info{
margin: 0;
margin-bottom: 16px;
}
.book-text{
margin-bottom: 28px;
font-size: 14px;
color: #333330;
line-height: 20px;
}
}
</style>

2
src/components/HomePage/caseList.vue
View File

@@ -8,7 +8,7 @@
<div class="case-info-title">
<div class="case-titdiv">
<span class="case-tittext" v-html="item.title"></span>
<div class="case-info-date portal-time">
<div class="follow-hide">
<svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
</div>
</div>

8
src/components/HomePage/courseList.vue
View File

@@ -11,7 +11,7 @@
<p class="portal-time">最新一次学习时间：2022-5-28 22:30:28</p>
</div>
<div style="width:150px">
<div class="case-info-date portal-time" style="text-align: right;">
<div class="follow-hide" style="text-align: right;">
<svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
</div>
<div class="btn-right">
@@ -57,12 +57,6 @@
margin: 0;
font-size: 18px !important;
line-height: 25px;
.score-info{
font-size: 14px;
font-weight: 600;
color: #FC6401;
margin-left: 20px;
}
}
.title-info{
font-size: 14px;

80
src/components/HomePage/followList.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div>
<ul class="follow-top-tabs">
<li class="follow-home-title tabs-index" @click="tagTab(1)">他关注的人<span v-if="active == 1" class="line"></span></li>
<li class="follow-home-title tabs-index" @click="tagTab(2)">关注他的人<span v-if="active == 2" class="line"></span></li>
</ul>
<div v-if="followList.length > 0">
<div class="follow-list" v-for="item in followList">
<div><img style="width:60px;height:60" src="/images/Avatarwoman.png"/></div>
<div class="follow-center">
<p class="follow-home-title" style="font-size: 20px;margin-bottom: 12px;">小王<img style="width:22px;height:22;vertical-align:middle" src="/images/homeWu/man.png" /></p>
<p class="portal-summary-text">你必须非常努力才能看起来毫不费力</p>
</div>
<div>
<!-- <el-button plain class="btn" icon="el-icon-check">已关注</el-button> -->
<el-button type="primary" class="btn" icon="el-icon-plus">关注他</el-button>
</div>
</div>
</div>
<div v-else class="home-no-list">
<img class="img" style="width:186px;height:160px" src="/images/homeWu/no-follow.png" alt="" srcset="">
<p class="text">还没有笔记</p>
</div>
</div>
</template>
<script>
import interactBar from "@/components/Portal/interactBar.vue";
import author from "@/components/Portal/authorInfo.vue";
export default{
name:"articleList",
components: {
interactBar,
// timeShow,
author
},
data(){
return{
followList:[],
active:1,
}
},
methods:{
//展示全部
tagTab(num) {
this.active = num;
}
}
}
</script>
<style lang="scss" scoped>
.follow-top-tabs{
display: flex;
padding: 4px 0;
.tabs-index{
padding:0 60px 10px 10px;
.line{
display: inline-block;
width: 100%;
height: 4px;
background: #0060FF;
border-radius: 3px;
}
}
}
.follow-list{
display: flex;
border-top: 1px solid rgba($color: #999999, $alpha: 0.2);
padding: 36px 0 38px 0;
.follow-center{
flex: 100%;
margin-left: 20px
}
.btn{
margin-top: 18px;
height: 40px;
width: 140px;
}
}
</style>

75
src/components/HomePage/noteList.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<div class="note-list">
<ul v-if="noteList.length > 0">
<li class="note-list-index">
<h6 class="note-title-info follow-home-title">行管专科 名校直播班 <span style="color: #333333;font-weight: 400;font-size: 14px;margin-left: 20px;">(通俗易懂的入门课程!)</span> <span class="score-info" style="margin-left:22px">4.8分</span>
<span class="follow-hide" style="float:right">
<svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
</span>
</h6>
<p class="note-text">
假如你床头有 10 本书，你要在其中找到一本书，你会怎么找？你可能会说，扫一眼就找到了啊。假如你现在身处世界上最大的图书馆：美国国会图书馆，藏书超 2.1 亿本，现在你想在里边找某一本某某书，请问你如何找？一本一本翻吗？累死你，2.1 亿这个数字我给你换算了一下，把 2.1 亿本书铺起来可绕地球近两圈。不仅仅找书，图书馆每天还要在其中处理要在其中处要
<span style="color:#0B4D9D;cursor:pointer;" >
<!-- @click.stop="changeIsAll(item)" -->
{{false?'收起':'全文展开'}}
</span>
</p>
<div>
<interactBar :type="0" :shares="false" :views="false" :data="item" :readonly="true"></interactBar>
</div>
</li>
</ul>
<div v-else class="home-no-list">
<img class="img" src="/images/homeWu/no-note.png" alt="" srcset="">
<p class="text">还没有笔记</p>
</div>
</div>
</template>
<script>
import interactBar from "@/components/Portal/interactBar.vue";
import author from "@/components/Portal/authorInfo.vue";
export default{
name:"NoteList",
components: {
interactBar,
// timeShow,
author
},
data(){
return{
noteList:[{name:1},{name:2}]
}
},
methods:{
//展示全部
changeIsAll(item) {
item.isAll = !item.isAll;
},
}
}
</script>
<style lang="scss" scoped>
.note-list{
ul{
margin: 0;
}
.note-list-index{
padding: 30px 0;
border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
}
.note-title-info{
margin: 0;
margin-bottom: 16px;
}
.note-text{
margin-bottom: 18px;
font-size: 14px;
color: #333330;
line-height: 20px;
}
}
</style>

77
src/components/HomePage/putTo.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div class="put-list">
<ul v-if="putList.length > 0">
<li class="put-list-index">
<h6 class="put-title-info follow-home-title">行管专科 名校直播班
<span class="portal-time follow-hide" style="float:right">
<svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
</span>
</h6>
<div class="put-footer">
<div style="margin-top:20px;font-size: 14px;color: #666666;">12个回答</div>
<el-button class="btn" plain>去回答</el-button>
</div>
</li>
</ul>
<div v-else class="home-no-list">
<img class="img" style="width:204px;height:160px" src="/images/homeWu/no-put.png" alt="" srcset="">
<p class="text">还没有提问</p>
</div>
</div>
</template>
<script>
import interactBar from "@/components/Portal/interactBar.vue";
import author from "@/components/Portal/authorInfo.vue";
export default{
name:"PutList",
components: {
interactBar,
// timeShow,
author
},
data(){
return{
putList:[{name:1},{name:2}]
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.put-list{
.put-title-info{
margin: 0;
}
ul{
margin: 0;
}
.put-footer{
display: flex;
justify-content: space-between;
margin-top: 24px;
.btn{
width: 140px;
height: 40px;
}
.el-button{
border: 1px solid #3379FB;
border-radius: 4px;
color: #3379FB;
}
}
.put-list-index{
padding: 40px 0 36px 0;
border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2);
&:first-child{
padding-top: 20px;
}
}
}
</style>

21
src/views/homepage/Index.vue
View File

@@ -25,27 +25,27 @@
</el-tab-pane>
<el-tab-pane name="note">
<span slot="label"><svg-icon icon-class="home-note" style="font-size: 30px;"></svg-icon><span class="tabs-info">笔记</span></span>
笔记
<note-list></note-list>
</el-tab-pane>
<el-tab-pane name="qa">
<span slot="label"><svg-icon icon-class="home-qa" style="font-size: 30px;"></svg-icon><span class="tabs-info">提问</span></span>
提问
<put-list></put-list>
</el-tab-pane>
<el-tab-pane name="answer">
<span slot="label"><svg-icon icon-class="home-answer" style="font-size: 30px;"></svg-icon><span class="tabs-info">回答</span></span>
回答
<answer-list></answer-list>
</el-tab-pane>
<el-tab-pane name="article">
<span slot="label"><svg-icon icon-class="home-article" style="font-size: 30px;"></svg-icon><span class="tabs-info">文章</span></span>
文章
<article-list></article-list>
</el-tab-pane>
<el-tab-pane name="fourth">
<span slot="label"><svg-icon icon-class="home-follow" style="font-size: 30px;"></svg-icon><span class="tabs-info">关注</span></span>
关注
<follow-list></follow-list>
</el-tab-pane>
<el-tab-pane name="book">
<span slot="label"><svg-icon icon-class="home-book" style="font-size: 30px;"></svg-icon><span class="tabs-info">书籍</span></span>
书籍
<book-list></book-list>
</el-tab-pane>
</el-tabs>
<div style="width:200px"></div>
@@ -89,14 +89,19 @@
</template>
<script>
// import top from './components/TopNav/Index.vue'
import top from '../../layout/components/TopNav/Index.vue'
import UcHeader from '@/components/UcHeader/Index.vue'
import CaseList from '@/components/HomePage/caseList.vue'
import CourseList from '@/components/HomePage/courseList.vue'
import NoteList from "@/components/HomePage/noteList.vue"
import PutList from "@/components/HomePage/putTo.vue"
import AnswerList from "@/components/HomePage/answerList.vue"
import ArticleList from "@/components/HomePage/articleList.vue"
import FollowList from "@/components/HomePage/followList.vue"
import BookList from "@/components/HomePage/bookList.vue"
export default{
components:{top,UcHeader,CaseList,CourseList},
components:{top,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
data(){
return{
input:'',