132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
<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>
|