<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>
  