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,
|
name: MinimalHomeTabOption.Feeds,
|
||||||
displayName: '动态',
|
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',
|
activeLink: 'https://t.bilibili.com/?tab=video',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: MinimalHomeTabOption.Trending,
|
name: MinimalHomeTabOption.Trending,
|
||||||
displayName: minimalHomeOptions.personalized ? '推荐' : '热门',
|
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',
|
activeLink: 'https://www.bilibili.com/v/popular/all',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
@ -73,6 +73,21 @@ export default Vue.extend({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
&-tabs {
|
&-tabs {
|
||||||
flex-grow: 1;
|
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>
|
</style>
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="minimal-home-feeds" :class="{ loading, loaded, error }">
|
<div class="minimal-home-tab" :class="{ loading, loaded, error }">
|
||||||
<div class="minimal-home-feeds-cards">
|
<div class="minimal-home-tab-cards">
|
||||||
<VideoCard v-for="c of cards" :key="c.id" :data="c" />
|
<VideoCard v-for="c of cards" :key="c.id" :data="c" />
|
||||||
</div>
|
</div>
|
||||||
<VEmpty v-if="loaded && cards.length === 0" />
|
<VEmpty v-if="loaded && cards.length === 0" />
|
||||||
<ScrollTrigger @trigger="loadCards" />
|
<ScrollTrigger @trigger="loadCards" />
|
||||||
<MinimalHomeOperations v-if="loaded" @refresh="refresh" />
|
<MinimalHomeOperations v-if="cards.length > 0" @refresh="refresh" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@ -60,20 +60,3 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</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>
|
<template>
|
||||||
<div class="minimal-home-trending" :class="{ loading, loaded, error }">
|
<div class="minimal-home-tab" :class="{ loading, loaded, error }">
|
||||||
<div class="minimal-home-trending-cards">
|
<div class="minimal-home-tab-cards">
|
||||||
<VideoCard v-for="c of cards" :key="c.id" :data="c" />
|
<VideoCard v-for="c of cards" :key="c.id" :data="c" />
|
||||||
</div>
|
</div>
|
||||||
<VEmpty v-if="loaded && cards.length === 0" />
|
<VEmpty v-if="loaded && cards.length === 0" />
|
||||||
<VLoading v-if="loading && 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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@ -62,20 +62,3 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</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