intelligent-bookshelf/src/views/bookRackList.vue

<template>
  <div id="bookshelf">
    <!-- <div class="top-bg" /> -->
    <div class="bookshelf-header" style="height:120px">
      <h2>本架图书</h2>
      <div class="rack-direct">
        <span class="rack-direct-active">左</span>
        <span>右</span>
      </div>
    </div>
    <div class="rack-box">
      <div v-for="(item) in listData" :key="item" class="rack-item">
        <ul class="rack-list">
          <li class="list-item">
            <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">&#xe631;</span>
          <p><span style="margin-right:25px">第一层</span><span>(共15本)</span></p>
          <span class="icon iconfont icon-r">&#xe62f;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import data1 from './data1.json'
export default {
  name: 'CurrentRackBook',
  components: {
  },
  data() {
    return {
      listData: [

      ]
    }
  },
  created() {
    this.listData = data1.listData
  },
  mounted() {
  },
  methods: {
  }
}
</script>

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

</style>