个人主页页面

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