intelligent-bookshelf/src/views/index.vue

<template>
  <div id="bookshelf">
    <!-- <div class="top-bg" /> -->
    <HeaderTop />
    <div class="bookshelf-header">
      <h2>RFID智慧书架</h2>
      <span class="shelf-num">01架</span>
    </div>
    <!-- 本架分类 -->
    <div class="book-category">
      <p>近代文学类</p>
      <p>古代文学类</p>
    </div>
    <!-- 智慧书架导航 -->
    <ul class="book-nav">
      <li>
        <img src="~@/assets/images/home/nav1.png">
        <p>图书检索</p>
      </li>
      <li @click="toHotBook">
        <img src="~@/assets/images/home/nav2.png">
        <p>热门图书</p>
      </li>
      <li @click="toAuthor">
        <img src="~@/assets/images/home/nav3.png">
        <p>作者推荐</p>
      </li>
      <li @click="toDigital">
        <img src="~@/assets/images/home/nav4.png">
        <p>数字资源</p>
      </li>
      <li>
        <img src="~@/assets/images/home/nav5.png">
        <p>场馆导航</p>
      </li>
    </ul>
    <!-- 本架图书 -->
    <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" @click="toCurrentRackMore">更多<i class="iconfont icon-zuo rotate" /></span>
      </div>
      <div class="rack-list">
        <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" @click="toNewBook">更多<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'
import HeaderTop from '@/views/module/headerTop.vue'
export default {
  name: 'Home',
  components: {
    BookListItem,
    HeaderTop
  },
  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')
    },
    toNewBook() {
      this.$router.push('/NewBook')
    },
    toHotBook() {
      this.$router.push('/HotBook')
    },
    toAuthor() {
      this.$router.push('/AuthorRecommend')
    },
    toDigital() {
      this.$router.push('/DigitalResource')
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>