add Card component

src/components/Card.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="book-card">
+    <div class="thumb">
+      <img :src="book.image" class="img" mode="aspectFit">
+    </div>
+    <div class="detail">
+      <div class="row text-primary">
+        <div class="right">
+          {{book.rate}}
+        </div>
+        <div class="left">
+          {{book.title}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="right text-primary">
+          浏览量:
+        </div>
+        <div class="left">
+          {{book.author}}
+        </div>
+      </div>
+      <div class="row">
+         <div class="right">
+           姓名
+           <!-- {{book.user_info.nickName}} -->
+        </div>
+        <div class="left">
+         {{book.publisher}}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['book'],
+
+  
+}
+</script>
+<style lang='scss' scoped>
+.book-card{
+  padding:5px;
+  overflow: hidden;
+  margin-top:5px;
+  margin-bottom:5px;
+  font-size:14px;
+  .thumb{
+    width:90px;
+    height:90px;
+    float: left;
+    margin:0 auto;
+    overflow:hidden;
+    .img{
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  .detail{
+    margin-left: 100px;
+    .row{
+      line-height:20px;
+      margin-bottom:3px;
+    }
+    .right{
+      float: right;
+      
+    }
+    .left{
+      margin-right:80px;
+    }
+  }
+  
+}
+</style>
+

src/components/Rate.vue

@@ -0,0 +1,11 @@
+<template>
+  
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/pages/books/Book.vue

@@ -1,12 +1,16 @@
 <template>
   <div>
     <p>图书列表</p>
-    <div v-for="book in books" :key="book.openid">{{book.title}}</div>
+    <Card v-for="book in books" :key="book.openid" :book='book'></Card>
   </div>
 </template>
 <script>
 import {get} from '@/util';
+import Card from '@/components/Card'
 export default {
+  components: {
+    Card
+  },
   data() {
     return {
       books: []