<template>
  <div class="all_books_seleton">
    <div class="all_books">
      <div class="filter_box">
        <div class="filter_list">
          <div class="filter_item">
            <div v-for="i in 2" :key="i" class="filter_inactivity"></div>
          </div>
        </div>
      </div>
      <div class="books_box">
        <div v-for="i in 2" :key="i" class="shelf">
          <div class="shelf_book">
            <div v-for="o in 5" :key="o" class="shelf_book_cover"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const OSS_URL = import.meta.env.VITE_OSS_URL
const nav_bg = `url(${OSS_URL}/english_client/normalMode/nav_bg.png)`
const bookshelf = `url(${OSS_URL}/english_client/normalMode/bookshelf.png)`
</script>

<style lang="scss" scoped>
.all_books_seleton {
  .all_books {
    width: 1860px;
    margin: 0 auto;
    height: calc(100vh - 58px);

    .filter_box {
      position: relative;
      padding: 0.67vh;

      &::after {
        content: '';
        position: absolute;
        top: 2.83vh;
        display: block;
        width: 1860px;
        height: 7.83vh;
        background-image: v-bind(nav_bg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: -1;
      }

      .filter_list {
        position: relative;
        padding: 3.33vh 52px;
        margin-left: 80px;
        width: 1680px;
        background-color: #fffef5;
        border-radius: 3.33vh;
        border: 0.33vh solid #d9d163;
        box-sizing: border-box;
        z-index: 99;

        .filter_item {
          display: flex;
          justify-content: space-around;

          .filter_inactivity {
            margin: 1.33vh 16px 0 0;
            width: 96px;
            height: 4.33vh;
            border-radius: 3vh;
            background-color: #fff99e;
            padding: 0.33vh 24px 0.33vh 40px;
            @include animation(animation-FFF56B, #fff56b);
          }

          .filter_active {
            margin: 1.33vh 16px 0 0;
            width: 144px;
            height: 4.33vh;
            border-radius: 0.67vh;
            background-color: #fff01f;
            @include animation(animation-FFF56B, #fff56b);
          }
        }
      }
    }

    .books_box {
      padding: 0 0 3.17vh 0;

      .shelf {
        margin-top: 2.67vh;
        position: relative;
        height: 36.5vh;

        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 21vh;
          width: 1860px;
          height: 15.5vh;
          background-image: v-bind(bookshelf);
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        &_book {
          display: flex;
          position: absolute;
          left: 130px;
          top: -0.83vh;
          z-index: 2;

          &_cover {
            position: relative;
            margin-right: 24px;
            width: 300px;
            height: 33.33vh;
            border-radius: 2.5vh;
            box-sizing: border-box;
            background-color: #fff99e;
            @include animation(animation-FFF352, #fff352);
          }
        }
      }
    }
  }
}
</style>
