diff --git a/registry/lib/components/style/custom-navbar/manga/MangaPopup.vue b/registry/lib/components/style/custom-navbar/manga/MangaPopup.vue index c0f15fe3c..728853d43 100644 --- a/registry/lib/components/style/custom-navbar/manga/MangaPopup.vue +++ b/registry/lib/components/style/custom-navbar/manga/MangaPopup.vue @@ -14,6 +14,7 @@ const popper = usePopper(props) const loading = ref(true) const recommendItems = ref(undefined) const hotItems = ref(undefined) +const previewCard = ref(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" >
{{ card.title }}
+
+ +
@@ -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;