个人主页页面

src/assets/styles/portal-index.scss

@@ -169,4 +169,18 @@
     color: #999999;
     margin-top: 20px;
    }
+}
+.follow-home-title{
+    font-size: 18px;
+    font-weight: 600;
+    color: #333333;
+}
+.score-info{
+    font-size: 14px;
+    font-weight: 600;
+    color: #FC6401;
+}
+.follow-hide{
+    font-size: 12px;
+    color: #6E7B84;
 }

src/components/HomePage/answerList.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="answer-list">
+        <ul v-if="answerList.length > 0">
+            <li class="answer-list-index">
+                <h6 class="answer-title-info follow-home-title">行管专科名校直播班 
+                    <span class="follow-hide" style="float:right">
+                          <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
+                    </span>
+                </h6>
+                <p class="answer-text">
+                    假如你床头有 10 本书，你要在其中找到一本书，你会怎么找？你可能会说，扫一眼就找到了啊。假如你现在身处世界上最大的图书馆：美国国会图书馆，藏书超 2.1 亿本，现在你想在里边找某一本某某书，请问你如何找？一本一本翻吗？累死你，2.1 亿这个数字我给你换算了一下，把 2.1 亿本书铺起来可绕地球近两圈。不仅仅找书，图书馆每天还要在其中处理要在其中处要
+                    <span style="color:#0B4D9D;cursor:pointer;" @click.stop="changeIsAll(item)">
+                        {{false?'收起':'全文展开'}}
+                    </span>
+                </p>
+                <div>
+                    <interactBar :type="0" :shares="false" :views="false"  :data="item" :readonly="true"></interactBar> 
+                </div>
+            </li>
+        </ul>
+        <div v-else class="home-no-list">
+            <img class="img" src="/images/homeWu/no-answer.png" alt="" srcset="">
+            <p class="text">还没有回答</p>
+        </div>
+    </div>
+  </template>
+  
+  <script>
+    import interactBar from "@/components/Portal/interactBar.vue";
+    import author from "@/components/Portal/authorInfo.vue";
+      export default{
+        name:"answerList",
+        components: {
+          interactBar,
+          // timeShow,
+          author
+        },
+          data(){
+              return{
+                answerList:[{name:1},{name:2}]
+              }
+          },
+      methods:{
+         //展示全部
+         changeIsAll(item) {
+          item.isAll = !item.isAll;
+        },
+       
+       }
+      }
+  </script>
+  
+  <style lang="scss" scoped>
+    .answer-list{
+        ul{
+            margin: 0;
+        }
+        .answer-list-index{
+            padding: 30px 0;
+            border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
+        }
+        .answer-title-info{
+            margin: 0;
+            margin-bottom: 16px;
+        }
+        .answer-text{
+            margin-bottom: 18px;
+            font-size: 14px;
+            color: #333330;
+            line-height: 20px;
+        }
+    }
+  </style>
+  

src/components/HomePage/articleList.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="article-list">
+        <ul v-if="articleList.length > 0">
+            <li class="article-list-index">
+                <h6 class="article-title-info follow-home-title">《房产税落地其实不会对房价有大影响》 
+                    <span class="follow-hide" style="float:right">
+                          <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
+                    </span>
+                </h6>
+                <div style="height:58px;padding-top:14px ">
+                      <!-- <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author> -->
+                    </div>
+                <p class="article-text">
+                    假如你床头有 10 本书，你要在其中找到一本书，你会怎么找？你可能会说，扫一眼就找到了啊。假如你现在身处世界上最大的图书馆：美国国会图书馆，藏书超 2.1 亿本，现在你想在里边找某一本某某书，请问你如何找？一本一本翻吗？累死你，2.1 亿这个数字我给你换算了一下，把 2.1 亿本书铺起来可绕地球近两圈。不仅仅找书，图书馆每天还要在其中处理要在其中处要
+                    <span style="color:#0B4D9D;cursor:pointer;" @click.stop="changeIsAll(item)">
+                        {{false?'收起':'全文展开'}}
+                    </span>
+                </p>
+                <div>
+                    <interactBar :type="0" :shares="false" :views="false"  :data="item" :readonly="true"></interactBar> 
+                </div>
+            </li>
+        </ul>
+        <div v-else class="home-no-list">
+            <img class="img" style="width:150px;height:160px" src="/images/homeWu/no-article.png" alt="" srcset="">
+            <p class="text">还没有笔记</p>
+        </div>
+    </div>
+  </template>
+  
+  <script>
+    import interactBar from "@/components/Portal/interactBar.vue";
+    import author from "@/components/Portal/authorInfo.vue";
+      export default{
+        name:"articleList",
+        components: {
+          interactBar,
+          // timeShow,
+          author
+        },
+          data(){
+              return{
+                articleList:[{name:1},{name:2}]
+              }
+          },
+      methods:{
+         //展示全部
+         changeIsAll(item) {
+          item.isAll = !item.isAll;
+        },
+       
+       }
+      }
+  </script>
+  
+  <style lang="scss" scoped>
+    .article-list{
+        ul{
+            margin: 0;
+        }
+        .article-list-index{
+            padding: 30px 0;
+            border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
+        }
+        .article-title-info{
+            margin: 0;
+            margin-bottom: 16px;
+        }
+        .article-text{
+            margin-bottom: 18px;
+            font-size: 14px;
+            color: #333330;
+            line-height: 20px;
+        }
+    }
+  </style>
+  

src/components/HomePage/bookList.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="book-list">
+        <ul v-if="bookList.length > 0">
+            <li class="book-list-index">
+                <div class="index-left"><img src="/images/homeWu/book.png" alt=""></div>
+                <div class="index-conter">
+                    <h6 class="book-title-info follow-home-title">《百年孤独》<span style="margin-left:15px" class="portal-summary-text">[哥伦比亚] 加西亚·马尔克斯</span></h6>
+                    <p class="book-text">开始很吃力，越读越上瘾，惊人的叙事与潮水般的叙事，野兽般撕开真理的外衣。从四姑娘的第一本书，就开始了他的抄袭生涯而已开始很吃力，越读越上瘾，惊人的叙事与潮水般的叙事，野兽般撕开真理的外衣。从四姑娘的第一本书，就开始了了他的···</p>
+                    <el-rate
+                        v-model="value"
+                        disabled
+                        show-score
+                        text-color="#fc6401"
+                        score-template="{value}分">
+                        </el-rate>
+                </div>
+                <div class="index-right">
+                    <span class="follow-hide" style="float:right">
+                          <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
+                    </span>
+                    <el-button class="btn" type="primary">查看图书</el-button>
+                </div>
+            </li>
+        </ul>
+        <div v-else class="home-no-list">
+            <img class="img" style="width:258px;height:168px" src="/images/homeWu/no-book.png" />
+            <p class="text">还没有书籍</p>
+        </div>
+    </div>
+  </template>
+  
+  <script>
+    import interactBar from "@/components/Portal/interactBar.vue";
+    import author from "@/components/Portal/authorInfo.vue";
+      export default{
+        name:"bookList",
+        components: {
+          interactBar,
+          // timeShow,
+          author
+        },
+          data(){
+              return{
+                value:5,
+                bookList:[{name:1}]
+              }
+          },
+      methods:{
+         //展示全部
+         changeIsAll(item) {
+          item.isAll = !item.isAll;
+        },
+       
+       }
+      }
+  </script>
+  
+  <style lang="scss" scoped>
+    .book-list{
+        ul{
+            margin: 0;
+        }
+        .book-list-index{
+            padding: 30px 0;
+            border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
+            display: flex;
+            .index-left{
+                img{
+                    width: 110px;
+                    height: 144px;
+                }
+            }
+            .index-conter{
+                width: 100%;
+                margin: 0 30px;
+                ::v-deep .el-rate__icon{
+                    color: #FC6401 !important;
+                    font-size: 20px !important;
+                }
+            }
+            .index-right{
+                .btn{
+                    width: 140px;
+                    height: 40px;
+                    margin-top: 40px;
+                }
+            }
+        }
+        .book-title-info{
+            margin: 0;
+            margin-bottom: 16px;
+        }
+        .book-text{
+            margin-bottom: 28px;
+            font-size: 14px;
+            color: #333330;
+            line-height: 20px;
+        }
+    }
+  </style>
+  

src/components/HomePage/caseList.vue

@@ -8,7 +8,7 @@
                     <div class="case-info-title">
                     <div class="case-titdiv">
                         <span class="case-tittext" v-html="item.title"></span>
-                        <div class="case-info-date portal-time">
+                        <div class="follow-hide">
                           <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
                         </div>
                     </div>

src/components/HomePage/courseList.vue

@@ -11,7 +11,7 @@
                 <p class="portal-time">最新一次学习时间：2022-5-28 22:30:28</p>
             </div> 
             <div style="width:150px">
-                <div class="case-info-date portal-time" style="text-align: right;">
+                <div class="follow-hide" style="text-align: right;">
                     <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
                 </div>
                 <div class="btn-right">
@@ -57,12 +57,6 @@
             margin: 0;
             font-size: 18px !important;
             line-height: 25px;
-            .score-info{
-                font-size: 14px;
-                font-weight: 600;
-                color: #FC6401;
-                margin-left: 20px;
-            }
         }
         .title-info{
             font-size: 14px;

src/components/HomePage/followList.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <ul class="follow-top-tabs">
+        <li class="follow-home-title tabs-index" @click="tagTab(1)">他关注的人<span v-if="active == 1" class="line"></span></li>
+        <li class="follow-home-title tabs-index" @click="tagTab(2)">关注他的人<span v-if="active == 2" class="line"></span></li>
+    </ul>
+    <div v-if="followList.length > 0">
+        <div class="follow-list" v-for="item in followList">
+            <div><img style="width:60px;height:60" src="/images/Avatarwoman.png"/></div>
+            <div class="follow-center"> 
+                <p class="follow-home-title" style="font-size: 20px;margin-bottom: 12px;">小王<img style="width:22px;height:22;vertical-align:middle" src="/images/homeWu/man.png" /></p>
+                <p class="portal-summary-text">你必须非常努力才能看起来毫不费力</p>
+            </div>
+            <div>
+                <!-- <el-button plain class="btn" icon="el-icon-check">已关注</el-button> -->
+                <el-button type="primary" class="btn" icon="el-icon-plus">关注他</el-button>
+            </div>
+        </div>
+    </div>
+    <div v-else class="home-no-list">
+        <img class="img" style="width:186px;height:160px" src="/images/homeWu/no-follow.png" alt="" srcset="">
+        <p class="text">还没有笔记</p>
+    </div>
+  </div>
+</template>
+<script>
+import interactBar from "@/components/Portal/interactBar.vue";
+import author from "@/components/Portal/authorInfo.vue";
+  export default{
+    name:"articleList",
+    components: {
+      interactBar,
+      // timeShow,
+      author
+    },
+      data(){
+          return{
+            followList:[],
+            active:1,
+          }
+      },
+  methods:{
+     //展示全部
+     tagTab(num) {
+       this.active = num;
+     }
+   
+   }
+  }
+</script>
+<style lang="scss" scoped>
+.follow-top-tabs{
+  display: flex;
+  padding: 4px 0;
+  .tabs-index{
+    padding:0 60px 10px 10px;
+    .line{
+        display: inline-block;
+        width: 100%;
+        height: 4px;
+        background: #0060FF;
+        border-radius: 3px;
+    }
+  }
+}
+.follow-list{
+    display: flex;
+    border-top:  1px solid rgba($color: #999999, $alpha: 0.2);
+    padding: 36px 0 38px 0;
+    .follow-center{
+      flex: 100%;
+      margin-left: 20px
+    }
+    .btn{
+        margin-top: 18px;
+        height: 40px;
+        width: 140px;
+      }
+}
+</style>

src/components/HomePage/noteList.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="note-list">
+        <ul v-if="noteList.length > 0">
+            <li class="note-list-index">
+                <h6 class="note-title-info follow-home-title">行管专科 名校直播班 <span style="color: #333333;font-weight: 400;font-size: 14px;margin-left: 20px;">(通俗易懂的入门课程!)</span>  <span class="score-info" style="margin-left:22px">4.8分</span> 
+                    <span class="follow-hide" style="float:right">
+                          <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
+                    </span>
+                </h6>
+                <p class="note-text">
+                    假如你床头有 10 本书，你要在其中找到一本书，你会怎么找？你可能会说，扫一眼就找到了啊。假如你现在身处世界上最大的图书馆：美国国会图书馆，藏书超 2.1 亿本，现在你想在里边找某一本某某书，请问你如何找？一本一本翻吗？累死你，2.1 亿这个数字我给你换算了一下，把 2.1 亿本书铺起来可绕地球近两圈。不仅仅找书，图书馆每天还要在其中处理要在其中处要
+                    <span style="color:#0B4D9D;cursor:pointer;" >
+                        <!-- @click.stop="changeIsAll(item)" -->
+                        {{false?'收起':'全文展开'}}
+                    </span>
+                </p>
+                <div>
+                    <interactBar :type="0" :shares="false" :views="false"  :data="item" :readonly="true"></interactBar> 
+                </div>
+            </li>
+        </ul>
+        <div v-else class="home-no-list">
+            <img class="img" src="/images/homeWu/no-note.png" alt="" srcset="">
+            <p class="text">还没有笔记</p>
+        </div>
+    </div>
+  </template>
+  
+  <script>
+    import interactBar from "@/components/Portal/interactBar.vue";
+    import author from "@/components/Portal/authorInfo.vue";
+      export default{
+        name:"NoteList",
+        components: {
+          interactBar,
+          // timeShow,
+          author
+        },
+          data(){
+              return{
+                noteList:[{name:1},{name:2}]
+              }
+          },
+      methods:{
+         //展示全部
+         changeIsAll(item) {
+          item.isAll = !item.isAll;
+        },
+       
+       }
+      }
+  </script>
+  
+  <style lang="scss" scoped>
+    .note-list{
+        ul{
+            margin: 0;
+        }
+        .note-list-index{
+            padding: 30px 0;
+            border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
+        }
+        .note-title-info{
+            margin: 0;
+            margin-bottom: 16px;
+        }
+        .note-text{
+            margin-bottom: 18px;
+            font-size: 14px;
+            color: #333330;
+            line-height: 20px;
+        }
+    }
+  </style>
+  

src/components/HomePage/putTo.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="put-list">
+        <ul v-if="putList.length > 0">
+            <li class="put-list-index">
+                <h6 class="put-title-info follow-home-title">行管专科 名校直播班
+                    <span class="portal-time follow-hide" style="float:right">
+                          <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏
+                    </span>
+                </h6>
+                <div class="put-footer">
+                   <div style="margin-top:20px;font-size: 14px;color: #666666;">12个回答</div>
+                   <el-button class="btn" plain>去回答</el-button>
+                </div>
+            </li>
+        </ul>
+        <div v-else class="home-no-list">
+            <img class="img" style="width:204px;height:160px" src="/images/homeWu/no-put.png" alt="" srcset="">
+            <p class="text">还没有提问</p>
+        </div>
+    </div>
+  </template>
+  
+  <script>
+    import interactBar from "@/components/Portal/interactBar.vue";
+    import author from "@/components/Portal/authorInfo.vue";
+      export default{
+        name:"PutList",
+        components: {
+          interactBar,
+          // timeShow,
+          author
+        },
+          data(){
+              return{
+                putList:[{name:1},{name:2}]
+              }
+          },
+      methods:{
+    
+       
+       }
+      }
+  </script>
+  
+  <style lang="scss" scoped>
+    .put-list{
+        .put-title-info{
+            margin: 0;
+        }
+        ul{
+            margin: 0;
+        }
+        .put-footer{
+            display: flex;
+            justify-content: space-between;
+            margin-top: 24px;
+            .btn{
+                width: 140px;
+                height: 40px;
+            }
+            .el-button{
+                border: 1px solid #3379FB;
+                border-radius: 4px;
+                color: #3379FB;
+            }
+        }
+        .put-list-index{
+            padding: 40px 0 36px 0;
+            border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2);
+            &:first-child{
+                padding-top: 20px;
+            }
+        }
+    }
+  
+  </style>
+  

src/views/homepage/Index.vue

@@ -25,27 +25,27 @@
                     </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>
@@ -89,14 +89,19 @@
   </template>
   
   <script>
-    // import top from './components/TopNav/Index.vue'
     import top from '../../layout/components/TopNav/Index.vue'
     import UcHeader from '@/components/UcHeader/Index.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},
+        components:{top,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
         data(){
             return{
                 input:'',