intelligent-bookshelf/src/views/bookRackList.vue

<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">&#xe631;</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)">&#xe631;</span>
          <p><span style="margin-right:25px" @click="handlePage(1)">第一层</span><span>(共15本)</span></p>
          <span class="icon iconfont icon-r">&#xe62f;</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>