Refactor codes

This commit is contained in:
the1812 2022-06-25 17:05:51 +08:00
parent 156991e213
commit a3704d2564
3 changed files with 23 additions and 42 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>