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

留言页面

Browse Source
This commit is contained in:
zhaofang
2022-09-16 14:50:45 +08:00
parent 7e96df91bd
commit 6dd7dbf01e
5 changed files with 1515 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/views/homepage/page.vue Normal file
View File

@@ -0,0 +1,254 @@
<template>
<div class="home-page">
<!-- <top></top>
<div style="height:72px"></div>
<UcHeader></UcHeader>
<router-view /> -->
<div class="home-page-box">
<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>
<div class="home-page-right">
<ul class="total-per">
<li class="per-li">
<span class="per-info">456</span>
<span class="per-text">关注他的人</span>
</li>
<li class="per-li">
<span class="per-info">456</span>
<span class="per-text">他关注的人</span>
</li>
</ul>
<div style="padding-top:10px;">
<p class="ach-title">TA的成就</p>
<ul class="ach-ul">
<li class="ach-box" v-for="ach in 5">
<img src="/images/medal.png" alt="">
<p>跬步千里</p>
<p>LV.1</p>
</li>
</ul>
</div>
<div style="padding-top:16px">
<p class="ach-title">可能感兴趣</p>
<ul>
<li class="ava-info" v-for="ava in 3">
<img src="/images/Avatarwoman.png" />
<div class="ava-text">
<p style="color: #333333;">王明</p>
<p style="color: #666666;">你必须非常努力才能看起来毫不费力</p>
</div>
</li>
</ul>
</div>
</div>
</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>