mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 19:06:43 +08:00
209 lines
7.1 KiB
Vue
209 lines
7.1 KiB
Vue
<template>
|
|
<div class="home-page">
|
|
<top></top>
|
|
<div style="height:72px"></div>
|
|
<UcHeader></UcHeader>
|
|
|
|
<div class="home-page-box">
|
|
<router-view />
|
|
<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>
|
|
|