mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add manga cover preview
This commit is contained in:
parent
bd46496365
commit
9d5f1cb02e
@ -14,6 +14,7 @@ const popper = usePopper(props)
|
||||
const loading = ref(true)
|
||||
const recommendItems = ref<MangaRecommendItem[] | undefined>(undefined)
|
||||
const hotItems = ref<MangaHotItem[] | undefined>(undefined)
|
||||
const previewCard = ref<MangaHotItem | undefined>(undefined)
|
||||
const loadRecommendItems = async () => {
|
||||
if (recommendItems.value !== undefined) {
|
||||
return
|
||||
@ -90,12 +91,17 @@ defineExpose({
|
||||
class="hot-manga-card"
|
||||
:title="card.title"
|
||||
:href="'https://manga.bilibili.com/detail/mc' + card.comic_id"
|
||||
@mouseover="previewCard = card"
|
||||
@mouseout="previewCard = undefined"
|
||||
>
|
||||
<div class="hot-manga-card-title">
|
||||
{{ card.title }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="previewCard" class="hot-manga-card-preview">
|
||||
<img :src="previewCard.vertical_cover + '@450h.jpg'" :alt="previewCard.title" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -144,6 +150,7 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
.custom-navbar-manga-right-panel {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
@include v-stretch($gap);
|
||||
@ -191,6 +198,21 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
.hot-manga-card-preview {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: calc(-1 * #{$gap});
|
||||
right: calc(100% + #{$gap} + 1px);
|
||||
height: calc(100% - #{$gap});
|
||||
background-image: linear-gradient(to left, #fff 75%, transparent);
|
||||
padding: 18px 18px 18px 60px;
|
||||
img {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
aspect-ratio: 169 / 225;
|
||||
@include round-corner();
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-navbar-manga-panel-separator {
|
||||
width: 1px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user