mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 10:56:44 +08:00
214 lines
8.4 KiB
Vue
214 lines
8.4 KiB
Vue
<template>
|
|
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import top from '../../layout/components/TopNav/Index.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:{top,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
|
|
data(){
|
|
return{
|
|
input:'',
|
|
activeName:'first',
|
|
}
|
|
},
|
|
methods:{
|
|
handleClick() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-page{
|
|
::v-deep .el-tabs__active-bar{
|
|
height: 4px;
|
|
border-radius: 3px;
|
|
background: #387DF7;
|
|
margin-top: 15px;
|
|
}
|
|
::v-deep .el-tabs__item{
|
|
padding: 0 17px;
|
|
height: 55px;
|
|
}
|
|
::v-deep .el-tabs__nav-wrap::after{
|
|
height: 1px;
|
|
background-color: 979797;
|
|
}
|
|
.home-page-box{
|
|
padding: 24px 84px;
|
|
display: flex;
|
|
.home-page-left{
|
|
flex: 1;
|
|
// width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 4px;
|
|
padding: 25px 47px;
|
|
position: relative;
|
|
.book-input{
|
|
position: absolute;
|
|
right: 50px;
|
|
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{
|
|
width: 395px;
|
|
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>
|
|
|