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.
106 lines
2.9 KiB
106 lines
2.9 KiB
<template>
|
|
<div id="bookshelf">
|
|
<HeaderTop />
|
|
<!-- <div class="top-bg" /> -->
|
|
<div class="bookshelf-header" style="height:120px">
|
|
<router-link to="/">
|
|
<span class="icon iconfont icon-l"></span>
|
|
</router-link>
|
|
<h2>本架图书</h2>
|
|
<div class="rack-direct">
|
|
<span :class="classnameL" @click="handleDirect(-1)">左</span>
|
|
<span :class="classnameR" @click="handleDirect(1)">右</span>
|
|
</div>
|
|
</div>
|
|
<div class="rack-box">
|
|
<div v-for="(item) in listData" :key="item" class="rack-item">
|
|
<ul class="rack-box-list">
|
|
<li class="list-item" @click="handleDetails">
|
|
<div class="box-txt">
|
|
<span class="book-name">书名书名书名</span>
|
|
<span class="book-writer">作者</span>
|
|
</div>
|
|
</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<!-- 15 -->
|
|
<!-- <li class="list-item">书</li>
|
|
<li class="list-item">书</li>
|
|
<li class="list-item">书</li> -->
|
|
</ul>
|
|
<div class="rack-floor">
|
|
<span class="icon iconfont icon-l" @click="handlePage(-1)"></span>
|
|
<p><span style="margin-right:25px" @click="handlePage(1)">第一层</span><span>(共15本)</span></p>
|
|
<span class="icon iconfont icon-r"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<BookDetails ref="detailDom" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import data1 from './data1.json'
|
|
import BookDetails from './module/bookDetails.vue'
|
|
import HeaderTop from '@/views/module/headerTop.vue'
|
|
|
|
export default {
|
|
name: 'CurrentRackBook',
|
|
components: {
|
|
BookDetails,
|
|
HeaderTop
|
|
},
|
|
data() {
|
|
return {
|
|
listData: [],
|
|
classnameL: 'rack-direct-active',
|
|
classnameR: null
|
|
}
|
|
},
|
|
created() {
|
|
this.listData = data1.listData
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
handleDetails() {
|
|
this.$refs.detailDom.dialogVisible = true
|
|
},
|
|
// 翻页
|
|
handlePage(page) {
|
|
if (page === 1) {
|
|
// 下一页
|
|
} else {
|
|
// 上一页
|
|
}
|
|
},
|
|
// 控制左右
|
|
handleDirect(n) {
|
|
if (n === -1) { // 左
|
|
this.classnameR = null
|
|
this.classnameL = 'rack-direct-active'
|
|
} else { // 右
|
|
this.classnameL = null
|
|
this.classnameR = 'rack-direct-active'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~@/assets/styles/index.scss";
|
|
|
|
</style>
|