个人主页页面

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