个人主页页面

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>