Fix image style of customNavbar(fix #4312)

原因:自定义顶栏的图片使用了 CSS 类 cover-container;该类被 B 站使用,进而影响到自定义顶栏
This commit is contained in:
timongh 2023-07-24 07:27:29 +08:00
parent 1e7c67bb61
commit 409b3652ff
4 changed files with 8 additions and 8 deletions

View File

@ -22,7 +22,7 @@
<transition-group v-else name="cards" tag="div" class="cards"> <transition-group v-else name="cards" tag="div" class="cards">
<div v-for="card of filteredCards" :key="card.id" class="favorite-card"> <div v-for="card of filteredCards" :key="card.id" class="favorite-card">
<a <a
class="cover-container" class="favorites-cover-container"
target="_blank" target="_blank"
:href="'https://www.bilibili.com/video/' + card.bvid" :href="'https://www.bilibili.com/video/' + card.bvid"
> >
@ -376,7 +376,7 @@ export default Vue.extend({
&:hover .cover { &:hover .cover {
transform: scale(1.05); transform: scale(1.05);
} }
.cover-container { .favorites-cover-container {
grid-area: cover; grid-area: cover;
overflow: hidden; overflow: hidden;
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;

View File

@ -48,7 +48,7 @@
</div> </div>
<transition-group name="time-group" tag="div" class="time-group-items"> <transition-group name="time-group" tag="div" class="time-group-items">
<div v-for="h of g.items" :key="h.id" class="time-group-item"> <div v-for="h of g.items" :key="h.id" class="time-group-item">
<a class="cover-container" target="_blank" :href="h.url"> <a class="history-cover-container" target="_blank" :href="h.url">
<DpiImage <DpiImage
class="cover" class="cover"
:src="h.cover" :src="h.cover"
@ -381,7 +381,7 @@ export default Vue.extend({
opacity: 1; opacity: 1;
} }
} }
.cover-container { .history-cover-container {
$height: 55px; $height: 55px;
$padding: 2px; $padding: 2px;
grid-area: cover; grid-area: cover;

View File

@ -11,7 +11,7 @@
:href="card.playUrl" :href="card.playUrl"
target="_blank" target="_blank"
> >
<div class="cover-container"> <div class="subscriptions-cover-container">
<DpiImage class="cover" :src="card.coverUrl" :size="64"></DpiImage> <DpiImage class="cover" :src="card.coverUrl" :size="64"></DpiImage>
</div> </div>
<div class="card-info"> <div class="card-info">
@ -186,7 +186,7 @@ export default Vue.extend({
background-color: #2d2d2d; background-color: #2d2d2d;
color: #eee; color: #eee;
} }
.cover-container { .subscriptions-cover-container {
height: 64px; height: 64px;
width: 64px; width: 64px;
border-radius: $radius 0 0 $radius; border-radius: $radius 0 0 $radius;

View File

@ -24,7 +24,7 @@
<VEmpty v-else-if="!loading && cards.length === 0"></VEmpty> <VEmpty v-else-if="!loading && cards.length === 0"></VEmpty>
<transition-group v-else name="cards" tag="div" class="watchlater-list-content"> <transition-group v-else name="cards" tag="div" class="watchlater-list-content">
<div v-for="(card, index) of filteredCards" :key="card.aid" class="watchlater-card"> <div v-for="(card, index) of filteredCards" :key="card.aid" class="watchlater-card">
<a class="cover-container" target="_blank" :href="card.href"> <a class="watchlater-cover-container" target="_blank" :href="card.href">
<DpiImage <DpiImage
class="cover" class="cover"
:src="card.coverUrl" :src="card.coverUrl"
@ -285,7 +285,7 @@ export default Vue.extend({
&:hover .cover { &:hover .cover {
transform: scale(1.05); transform: scale(1.05);
} }
.cover-container { .watchlater-cover-container {
grid-area: cover; grid-area: cover;
overflow: hidden; overflow: hidden;
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;