mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-15 13:56:43 +08:00
227 lines
9.0 KiB
Vue
227 lines
9.0 KiB
Vue
<template>
|
|
<div class="follow-page">
|
|
<div class="follow-banner">
|
|
<portal-header current="follow" textColor="#fff" @emitInput="emitInput"></portal-header>
|
|
</div>
|
|
<div>
|
|
<div class="home-page-left">
|
|
<div class="book-input">
|
|
<span>分享书籍</span>
|
|
<el-input style="width:130px" v-model="input" placeholder="请输入内容"></el-input>
|
|
<i style="color: #333333" class="el-icon-search"></i>
|
|
</div>
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane name="first" label="动态">
|
|
<!-- <span slot="label"><svg-icon icon-class="home-dynamic" style="font-size: 30px;"></svg-icon> <span class="tabs-info">动态</span></span> -->
|
|
动态
|
|
</el-tab-pane>
|
|
<el-tab-pane name="second" label="课程">
|
|
<!-- <span slot="label"><svg-icon icon-class="home-course" style="font-size: 30px;"></svg-icon><span class="tabs-info">课程</span></span> -->
|
|
<course-list></course-list>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="case" label="案例">
|
|
<!-- <span slot="label"><svg-icon icon-class="home-case" style="font-size: 30px;"></svg-icon><span class="tabs-info">案例</span></span> -->
|
|
<case-list></case-list>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="note" label="笔记">
|
|
<!-- <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" label="提问">
|
|
<!-- <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" label="回答">
|
|
<!-- <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" label="文章">
|
|
<!-- <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" label="关注">
|
|
<!-- <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" label="书籍">
|
|
<!-- <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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import portalHeader from "@/components/PortalHeader.vue";
|
|
import UcHeader from '@/components/HomePage/homePage.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:{portalHeader,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
|
|
data(){
|
|
return{
|
|
input:'',
|
|
activeName:'first',
|
|
}
|
|
},
|
|
methods:{
|
|
handleClick() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.follow-banner{
|
|
background-color: #0078FC;
|
|
}
|
|
.follow-page{
|
|
background: #FFFFFF;
|
|
height: 100vh;
|
|
::v-deep .el-tabs__active-bar{
|
|
height: 4px;
|
|
border-radius: 3px;
|
|
background: #387DF7;
|
|
margin-top: 15px;
|
|
}
|
|
::v-deep .el-tabs__item{
|
|
padding: 0 30px;
|
|
height: 55px;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
::v-deep .el-tabs__item.is-active{
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
::v-deep .el-tabs__nav-wrap::after{
|
|
height: 1px;
|
|
background-color: 979797;
|
|
}
|
|
.home-page-left{
|
|
border-radius: 4px;
|
|
padding-top: 29px;
|
|
margin: 0px 20% 0 19%;
|
|
position: relative;
|
|
.book-input{
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 250px;
|
|
height: 40px;
|
|
border: 1px solid rgba(153,153,153,0.5);
|
|
border-radius: 19px;
|
|
span{
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
padding: 0 10px 0 16px;
|
|
border-right: 1px solid rgba($color: #999999, $alpha: 0.48);
|
|
}
|
|
::v-deep .el-input__inner{
|
|
border: none !important;
|
|
}
|
|
::v-deep .el-icon-search{
|
|
color: #333333 !important;
|
|
}
|
|
}
|
|
// display: flex;
|
|
.svg-icon{
|
|
vertical-align: middle;
|
|
}
|
|
.tabs-info{
|
|
font-size: 16px;
|
|
color: #333333;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
.home-page-right{
|
|
padding: 40px 52px 18px 52px;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
margin-left: 25px;
|
|
.total-per{
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
padding-bottom: 28px;
|
|
border-bottom: 1px solid rgba($color: #999999, $alpha: 0.21);
|
|
.per-li{
|
|
width: 90px;
|
|
text-align: center;
|
|
margin: 0 25px;
|
|
.per-info{
|
|
display: block;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
.per-text{
|
|
font-size: 14px;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
}
|
|
.ach-title{
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
.ach-ul{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border-bottom: 1px solid rgba($color: #999999, $alpha: 0.21);
|
|
padding-bottom: 4px;
|
|
.ach-box{
|
|
flex: 33%;
|
|
width: 57px;
|
|
text-align: center;
|
|
margin-bottom: 18px;
|
|
img{
|
|
width: 52px;
|
|
height: 58px;
|
|
margin-bottom: 4px;
|
|
}
|
|
p{
|
|
font-size: 14px;
|
|
color: #333333;
|
|
line-height: 20px;
|
|
}
|
|
|
|
}
|
|
}
|
|
.ava-info{
|
|
display: flex;
|
|
padding: 10px 0 30px 0;
|
|
img{
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.ava-text{
|
|
padding: 2px 0;
|
|
margin-left: 18px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
// }
|
|
}
|
|
</style>
|