You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.6 KiB
97 lines
2.6 KiB
<template>
|
|
<div id="bookshelf">
|
|
<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="toPath('/HotBook')">
|
|
<img src="~@/assets/images/home/nav2.png">
|
|
<p>热门图书</p>
|
|
</li>
|
|
<li @click="toPath('/AuthorRecommend')">
|
|
<img src="~@/assets/images/home/nav3.png">
|
|
<p>作者推荐</p>
|
|
</li>
|
|
<li @click="toPath('/DigitalResource')">
|
|
<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="toPath('/CurrentRackBook')">更多<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="toPath('/NewBook')">更多<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: {
|
|
toPath(path) {
|
|
this.$router.push(path)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~@/assets/styles/index.scss";
|
|
</style>
|