Bilibili-Evolved/registry/lib/components/style/home-redesign/minimal/MinimalHome.vue
2022-06-25 15:59:40 +08:00

73 lines
1.9 KiB
Vue

<template>
<HomeRedesignBase>
<div class="minimal-home">
<TabControl class="minimal-home-tabs" :tabs="tabs" />
</div>
</HomeRedesignBase>
</template>
<script lang="ts">
import { addComponentListener } from '@/core/settings'
import { TabControl } from '@/ui'
import { TabMappings } from '@/ui/tab-mapping'
import HomeRedesignBase from '../HomeRedesignBase.vue'
import { minimalHomeOptions } from './options'
import { MinimalHomeTabOption } from './types'
const tabs: TabMappings = [
{
name: MinimalHomeTabOption.Feeds,
displayName: '动态',
component: () => import('./tabs/MinimalHomeFeeds.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),
activeLink: 'https://www.bilibili.com/v/popular/all',
},
]
export default Vue.extend({
components: {
HomeRedesignBase,
TabControl,
},
data() {
return {
tabs,
}
},
mounted() {
const columnCountKey = '--minimal-home-column-count-override'
addComponentListener('minimalHome.columnCount', (count: number) => {
if (count > 0) {
(this.$el as HTMLElement).style.setProperty(columnCountKey, count.toString())
} else {
(this.$el as HTMLElement).style.removeProperty(columnCountKey)
}
}, true)
},
})
</script>
<style lang="scss">
@import 'common';
.minimal-home {
--minimal-home-auto-card-columns: 1;
--card-width: 600px;
--card-height: 122px;
@media screen and (min-width: 1080px) {
--minimal-home-auto-card-column: 2;
}
@media screen and (min-width: 2520px) {
--minimal-home-auto-card-column: 3;
}
--minimal-home-card-column: var(
--minimal-home-column-count-override,
var(--minimal-home-auto-card-column)
);
padding: 24px 32px;
}
</style>