<template>
  <div class="book-box">
    <breadcrumb class="content-max-width crumb" :data="crumbData"/>
    <search />
    <screen-tabs class="tabs-box" :data="tabsData"></screen-tabs>
    <ul class="list-box content-max-width">
      <li>
        <item />
      </li>
      <li>
        <item />
      </li>
    </ul>
    <div class="pagination">
      <el-pagination
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import search from './components/search'
import item from './components/item'
import screenTabs from '@/components/tabs/screenTabs'
import breadcrumb from '@/components/breadcrumb'
export default {
  components: {
    search,
    item,
    screenTabs,
    breadcrumb
  },
  data() {
    return {
      tabsIndex: 0,
      tabsData: {
        name: '出版时间',
        options: ['全部', '2020年', '2019年', '2018年']
      },
      crumbData: [
        {
          path: '/',
          name: '首页'
        },
        {
          name: '教材中心'
        }
      ]
    }
  },
  methods: {
    tabs(n) {
      this.tabsIndex = n
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width{
  width: 1109px;
  margin: 0 auto;
}
.book-box{
  padding-top: 24px;
  .tabs-box{
    margin-top: 24px;
    // margin-bottom: 30px;
  }
  // .tabs-box{
  //   margin-top: 24px;
  //   margin-bottom: 30px;
  //   display: flex;
  //   justify-content: center;
  //   .name{
  //     font-size: 14px;
  //     color: #666666;
  //     line-height: 20px;
  //     margin-right: 24px;
  //   }
  //   ul{
  //     display: flex;
  //     li{
  //       position: relative;
  //       font-size: 14px;
  //       color: #666666;
  //       line-height: 20px;
  //       margin-right: 24px;
  //       cursor: pointer;
  //       &.active{
  //         &::after{
  //           content: '';
  //           position: absolute;
  //           bottom: -4px;
  //           left: 0;
  //           width: 100%;
  //           height: 2px;
  //           background: #AF1B40;
  //           border-radius: 1px;
  //         }
  //       }
  //     }
  //   }
  // }
}
.pagination{
  padding: 24px 0;
  display: flex;
  justify-content: center;
}
</style>
