首页

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
+    <keep-alive>
       <router-view />
+    </keep-alive>
   </div>
 </template>
 

src/assets/styles/index.scss

@@ -1,9 +1,11 @@
 #bookshelf{
   width: 100%;
-  height: 100vh;
+  height: 1920px;
+  padding-top: 60px;
   font-size: 30px;
   background: url('~@/assets/images/home/bg.png') no-repeat left top;
   background-size: cover;
+  overflow: hidden;
 }
 
 //c-s壳占位
@@ -76,21 +78,23 @@
   }
 }
 
-.current-rack{
+// 本架图书
+.book-rack{
   height: 770px;
   margin: 0 40px;
   padding: 0 40px 40px 40px;
   background-color: #fff;
   border-radius: 30px;
   box-shadow: 0px 0px 20px 1px #B8D3FF;
-  .rack-top{
+}
+.list-top{
   display: flex;
   justify-content: space-between;
   justify-items: center;
   align-items: center;
   padding: 30px 0 25px 0;
   font-size: 36px;
-    .rack-top-title{
+  .list-top-title{
     display: flex;
     justify-content: flex-start;
     font-size: 40px;
@@ -108,11 +112,12 @@
     }
   }
 }
-}
 
+// 本架图书list
 .rack-list{
   display: flex;
   justify-content: space-between;
+}
 
 .list-item{
   border: 1px solid #A2CCFF;
@@ -145,6 +150,7 @@
 }
 
 .list-big{
+  .list-item{
     width: 435px;
     height: 625px;
     margin-right: 45px;
@@ -161,14 +167,15 @@
       right: 16px;
     }
   }
+}
 
-  .list-right{
+.list-middle{
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 625px;
-    .list-middle{
+  .list-item{
     display: flex;
     height: calc(100%/2 - 20px);
     justify-content: space-between;
@@ -187,4 +194,28 @@
     }
   }
 }
+
+// 新书推荐
+.new-recommend{
+  height: 448px;
+  margin: 30px 40px 0 40px;
+}
+
+.list-small{
+  display: flex;
+  justify-content: space-between;
+  justify-items: center;
+  .list-item{
+    width: 200px;
+    border: none;
+    img{
+      display: block;
+      width: 100%;
+      height: 240px;
+      margin-bottom: 10px;
+    }
+    .book-title{
+      margin-bottom: 0;
+    }
+  }
 }

src/router/index.js

@@ -3,14 +3,24 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-const routes = [{
+const routes = [
+  {
     path: '/',
     name: 'index',
-  component: () => import('../views/index.vue'),
+    component: () => import('@/views/index.vue'),
     meta: {
-    title: '智慧大屏'
+      title: '智慧书架'
     }
-}]
+  },
+  {
+    path: '/CurrentRackBook',
+    name: 'CurrentRackBook',
+    component: () => import('@/views/bookRackList.vue'),
+    meta: {
+      title: '本架图书'
+    }
+  }
+]
 
 const router = new VueRouter({
   mode: 'history',

src/views/bookRackList.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="bookshelf">
+    <!-- <div class="top-bg" /> -->
+    <div class="bookshelf-header">
+      <h2>本架图书</h2>
+      <span>01架</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CurrentRackBook',
+  components: {
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+
+</style>

src/views/data.json

@@ -0,0 +1,55 @@
+{
+  "bookList":[
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    }
+  ],
+  "newList":[
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定4",
+      "ranking": 4,
+      "num": 1100
+    }
+  ]
+}

src/views/index.vue

@@ -1,14 +1,16 @@
 <template>
   <div id="bookshelf">
-    <div class="top-bg" />
+    <!-- <div class="top-bg" /> -->
     <div class="bookshelf-header">
       <h2>RFID智慧书架</h2>
       <span>01架</span>
     </div>
+    <!-- 本架分类 -->
     <div class="book-category">
       <p>近代文学类</p>
       <p>古代文学类</p>
     </div>
+    <!-- 智慧书架导航 -->
     <ul class="book-nav">
       <li>
         <img src="~@/assets/images/home/nav1.png">
@@ -31,83 +33,67 @@
         <p>场馆导航</p>
       </li>
     </ul>
-    <div class="current-rack">
-      <div class="rack-top">
-        <div class="rack-top-title">
+    <!-- 本架图书 -->
+    <div class="book-rack">
+      <div class="list-top">
+        <div class="list-top-title">
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-benjiatushu" />
           </svg>
           <p>本架图书</p>
         </div>
-        <span class="more">更多<i class="iconfont icon-zuo rotate" /></span>
+        <span class="more" @click="toCurrentRackMore">更多<i class="iconfont icon-zuo rotate" /></span>
       </div>
       <div class="rack-list">
-        <div class="list-item list-big">
-          <img src="https://qiniu.aiyxlib.com/bg.png">
-          <div class="book-info">
-            <h4 class="book-title title-item">大个子狗与小个子猫</h4>
-            <p class="book-author">作者姓名</p>
-            <div class="book-num">
-              <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-remen" />
-              </svg>
-              <p>200135</p>
-            </div>
-          </div>
-        </div>
-        <div class="list-right">
-          <div class="list-item list-middle">
-            <img src="https://qiniu.aiyxlib.com/bg.png">
-            <div class="book-info">
-              <h4 class="book-title">大个子狗与小个子猫</h4>
-              <p class="book-author">作者姓名</p>
-              <div class="book-num">
-                <svg class="icon" aria-hidden="true">
-                  <use xlink:href="#icon-remen" />
-                </svg>
-                <p>200135</p>
-              </div>
-            </div>
-          </div>
-          <div class="list-item list-middle">
-            <img src="https://qiniu.aiyxlib.com/bg.png">
-            <div class="book-info">
-              <h4 class="book-title">大个子狗与小个子猫</h4>
-              <p class="book-author">作者姓名</p>
-              <div class="book-num">
-                <svg class="icon" aria-hidden="true">
-                  <use xlink:href="#icon-remen" />
-                </svg>
-                <p>200135</p>
-              </div>
+        <BookListItem class="list-big" :list-data.sync="rackList" />
+        <BookListItem class="list-middle" :list-data.sync="otherList" :is-other-book="true" />
       </div>
     </div>
+    <!-- 新书推荐 -->
+    <div class="book-rack new-recommend">
+      <div class="list-top">
+        <div class="list-top-title">
+          <p>新书推荐</p>
         </div>
+        <span class="more">更多<i class="iconfont icon-zuo rotate" /></span>
       </div>
+      <BookListItem class="list-small" :list-data="newList" :is-new-book="true" />
     </div>
-
   </div>
 </template>
 
 <script>
+import data from './data'
+import BookListItem from '@/views/module/bookListItem.vue'
+
 export default {
   name: 'Home',
   components: {
+    BookListItem
   },
   data() {
     return {
+      rackList: [], // 本架图书排行第一
+      otherList: [], // 本架图书排行后两本
+      newList: [] // 新书推荐
     }
   },
   created() {
+    this.rackList = data.bookList.splice(0, 1)
+    this.otherList = data.bookList.splice(-2)
+    this.newList = data.newList
   },
   mounted() {
+
   },
   methods: {
+    toCurrentRackMore() {
+      this.$router.push('/CurrentRackBook')
+    }
   }
 }
 </script>
 
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
-
 </style>

src/views/module/bookListItem.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div v-for="item in listData" :key="item.ranking" class="list-item">
+      <img :src="item.img">
+      <div class="book-info">
+        <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.title }}</h4>
+        <p class="book-author">{{ item.author }}</p>
+        <div v-if="!isNewBook" class="book-num">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-remen" />
+          </svg>
+          <p>{{ item.num }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BookListItem',
+  props: {
+    listData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    isOtherBook: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    isNewBook: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  watch: {
+    listData: function(newValue, oldValue) {
+    },
+    isOtherBook: function(newValue, oldValue) {
+    },
+    isNewBook: function(newValue, oldValue) {
+    }
+  },
+  created() {
+    console.log(this.listData)
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>