mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Refactor codes
This commit is contained in:
parent
156991e213
commit
a3704d2564
@ -17,13 +17,13 @@ const tabs: TabMappings = [
|
||||
{
|
||||
name: MinimalHomeTabOption.Feeds,
|
||||
displayName: '动态',
|
||||
component: () => import('./tabs/MinimalHomeFeeds.vue').then(m => m.default),
|
||||
component: () => import('./tabs/Feeds.vue').then(m => m.default),
|
||||
activeLink: 'https://t.bilibili.com/?tab=video',
|
||||
},
|
||||
{
|
||||
name: MinimalHomeTabOption.Trending,
|
||||
displayName: minimalHomeOptions.personalized ? '推荐' : '热门',
|
||||
component: () => import('./tabs/MinimalHomeTrending.vue').then(m => m.default),
|
||||
component: () => import('./tabs/Trending.vue').then(m => m.default),
|
||||
activeLink: 'https://www.bilibili.com/v/popular/all',
|
||||
},
|
||||
]
|
||||
@ -73,6 +73,21 @@ export default Vue.extend({
|
||||
flex-direction: column;
|
||||
&-tabs {
|
||||
flex-grow: 1;
|
||||
.minimal-home-tab {
|
||||
&-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
var(--minimal-home-card-column),
|
||||
var(--card-width)
|
||||
);
|
||||
gap: 12px;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 16px;
|
||||
.video-card * {
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="minimal-home-feeds" :class="{ loading, loaded, error }">
|
||||
<div class="minimal-home-feeds-cards">
|
||||
<div class="minimal-home-tab" :class="{ loading, loaded, error }">
|
||||
<div class="minimal-home-tab-cards">
|
||||
<VideoCard v-for="c of cards" :key="c.id" :data="c" />
|
||||
</div>
|
||||
<VEmpty v-if="loaded && cards.length === 0" />
|
||||
<ScrollTrigger @trigger="loadCards" />
|
||||
<MinimalHomeOperations v-if="loaded" @refresh="refresh" />
|
||||
<MinimalHomeOperations v-if="cards.length > 0" @refresh="refresh" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -60,20 +60,3 @@ export default Vue.extend({
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.minimal-home-feeds {
|
||||
&-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
var(--minimal-home-card-column),
|
||||
var(--card-width)
|
||||
);
|
||||
gap: 12px;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 16px;
|
||||
.video-card * {
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="minimal-home-trending" :class="{ loading, loaded, error }">
|
||||
<div class="minimal-home-trending-cards">
|
||||
<div class="minimal-home-tab" :class="{ loading, loaded, error }">
|
||||
<div class="minimal-home-tab-cards">
|
||||
<VideoCard v-for="c of cards" :key="c.id" :data="c" />
|
||||
</div>
|
||||
<VEmpty v-if="loaded && cards.length === 0" />
|
||||
<VLoading v-if="loading && cards.length === 0" />
|
||||
<MinimalHomeOperations v-if="loaded" @refresh="loadCards" />
|
||||
<MinimalHomeOperations v-if="cards.length > 0" @refresh="loadCards" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -62,20 +62,3 @@ export default Vue.extend({
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.minimal-home-trending {
|
||||
&-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
var(--minimal-home-card-column),
|
||||
var(--card-width)
|
||||
);
|
||||
gap: 12px;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 16px;
|
||||
.video-card * {
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user