CardList
This commit is contained in:
parent
55f39c3721
commit
cf862e1a2f
|
@ -41,7 +41,9 @@ const goToLibraryShow = (item) => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
|
<div
|
||||||
|
class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-5 md:gap-x-28 md:gap-y-12 mx-6"
|
||||||
|
>
|
||||||
<UCard
|
<UCard
|
||||||
v-if="props.list.length"
|
v-if="props.list.length"
|
||||||
v-for="(item, index) in props.list"
|
v-for="(item, index) in props.list"
|
||||||
|
@ -110,6 +112,7 @@ const goToLibraryShow = (item) => {
|
||||||
margin: 0 1em;
|
margin: 0 1em;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
|
@ -130,6 +133,7 @@ const goToLibraryShow = (item) => {
|
||||||
/* padding: 1em 1.3em; */
|
/* padding: 1em 1.3em; */
|
||||||
height: calc(100dvh - 13.5em);
|
height: calc(100dvh - 13.5em);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
/* margin: 0 24px; */
|
||||||
|
|
||||||
.library-list-item {
|
.library-list-item {
|
||||||
width: 140;
|
width: 140;
|
||||||
|
@ -166,5 +170,18 @@ const goToLibraryShow = (item) => {
|
||||||
letter-spacing: 0%;
|
letter-spacing: 0%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width: 719.99px) {
|
||||||
|
.library-list-contianer {
|
||||||
|
}
|
||||||
|
.library-list {
|
||||||
|
height: calc(100dvh - 8em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
margin-top: 4em;
|
||||||
|
margin-right: 2em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -179,4 +179,10 @@ const CardList = defineAsyncComponent(() =>
|
||||||
padding-top: 8.3em;
|
padding-top: 8.3em;
|
||||||
background: #f7fffd;
|
background: #f7fffd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 719.99px) {
|
||||||
|
.search-box-container {
|
||||||
|
padding-top: 0em;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user