Improve UI

This commit is contained in:
the1812 2019-09-15 14:29:36 +08:00
parent 52c186ac5e
commit 2ff5b85743
12 changed files with 84 additions and 28 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -77,7 +77,7 @@
"i18n.min.css": "026E95EA1D40DFA4F9B407B6F1BEFD85B2D0C90569ECE948290FB329424919C8", "i18n.min.css": "026E95EA1D40DFA4F9B407B6F1BEFD85B2D0C90569ECE948290FB329424919C8",
"i18n.min.js": "7FCB933FD43C05A152B672D4BD721F3ECEBA6AD29648379947DAAFC403907B38", "i18n.min.js": "7FCB933FD43C05A152B672D4BD721F3ECEBA6AD29648379947DAAFC403907B38",
"i18n.zh-TW.min.js": "803F67270809E3258E2B302ADE542B12EF222C83EDC67FB8C68301C5F4E3A1CC", "i18n.zh-TW.min.js": "803F67270809E3258E2B302ADE542B12EF222C83EDC67FB8C68301C5F4E3A1CC",
"icon.vue.min.js": "CE58414705A3B895ED015EA6CF3DD4FD3FC1FD30C20D5A19078CA3CB8D35ED89", "icon.vue.min.js": "B4A82F32A4F68300D4BAE98795466E7136E6633E70986B00C0B4D09716D30C8B",
"icons.min.css": "CA6478DC41BEA3E99C45E01D3CD6FC6D05F933D91A3EE9200AD5DC39828E5A17", "icons.min.css": "CA6478DC41BEA3E99C45E01D3CD6FC6D05F933D91A3EE9200AD5DC39828E5A17",
"image-resolution.min.js": "0D9679DD7D7CF2709368FC4811F03CC0379EE7286432B98DB7AAB45227D20C76", "image-resolution.min.js": "0D9679DD7D7CF2709368FC4811F03CC0379EE7286432B98DB7AAB45227D20C76",
"image-viewer.min.css": "219E206912EC6FCB0E9F0EC447D19073272A959F66A782D9DF55522FD8A488B5", "image-viewer.min.css": "219E206912EC6FCB0E9F0EC447D19073272A959F66A782D9DF55522FD8A488B5",
@ -89,7 +89,7 @@
"medal-helper.min.css": "205A02CC6E8B2DBDA222A0660D83EA6E4B24F0B5A753E269FED099AB8AE31B6C", "medal-helper.min.css": "205A02CC6E8B2DBDA222A0660D83EA6E4B24F0B5A753E269FED099AB8AE31B6C",
"medal-helper.min.html": "5D7057259368BE97DED3375DD904695B245AA2BF338C5E18CB3CF61DD913617C", "medal-helper.min.html": "5D7057259368BE97DED3375DD904695B245AA2BF338C5E18CB3CF61DD913617C",
"medal-helper.min.js": "33751914C5DE205D79E059F7BF285E325E4D6DBFC68AE7E4D4B6307672F23B6E", "medal-helper.min.js": "33751914C5DE205D79E059F7BF285E325E4D6DBFC68AE7E4D4B6307672F23B6E",
"minimal-home.vue.min.js": "F440FDBE4528567ED1101C03155E9F20DABB02A381F00A8ABFFCF915AEC83F3B", "minimal-home.vue.min.js": "DA0B5B208FE91E5617D6082167C5345FB32C4510ED20EA5F2C399EC9073062DA",
"narrow-danmaku.min.js": "12475431A527EFF15100AF57C9C53D0603BC27723126D966CB01240917602253", "narrow-danmaku.min.js": "12475431A527EFF15100AF57C9C53D0603BC27723126D966CB01240917602253",
"new-styles.min.js": "3D7E8E25C5B5B6BD3F784BC05D403C35F0658E67197F878874A9554C2FF5127B", "new-styles.min.js": "3D7E8E25C5B5B6BD3F784BC05D403C35F0658E67197F878874A9554C2FF5127B",
"no-banner.min.css": "DA096F94E7FA26992F3F71245E704D69A1C222D0ADA6F1990FA5D948507CE15F", "no-banner.min.css": "DA096F94E7FA26992F3F71245E704D69A1C222D0ADA6F1990FA5D948507CE15F",
@ -126,7 +126,7 @@
"simple-home.vue.min.js": "F64C88FB33612D715A4ED98A398E6D0E003DCDBF7A2CEDBA9FEC56A63E761A3C", "simple-home.vue.min.js": "F64C88FB33612D715A4ED98A398E6D0E003DCDBF7A2CEDBA9FEC56A63E761A3C",
"simplify-home.min.css": "D140F9B83D7320D925788348C66A8BE80CC63F699FBC1E029BD4385EFE19F10D", "simplify-home.min.css": "D140F9B83D7320D925788348C66A8BE80CC63F699FBC1E029BD4385EFE19F10D",
"simplify-home.min.js": "A81F7063A6EBA963E80673B0E285173D142C354388894AB4A872BFC73DEA4789", "simplify-home.min.js": "A81F7063A6EBA963E80673B0E285173D142C354388894AB4A872BFC73DEA4789",
"simplify-home.vue.min.js": "B3B67BA62EE1A8525DBE3D8777AFC3772C32C70C24C39291A51F4E4F8F8E6F24", "simplify-home.vue.min.js": "073A24094C480D6DD79006C3704002563AD9DF1BA496FF937DFE4A25869722E8",
"simplify-liveroom.min.css": "97060C7E91C8BC39534EC6A415C20AC2E5A29697A88E93F995EA112E145245D7", "simplify-liveroom.min.css": "97060C7E91C8BC39534EC6A415C20AC2E5A29697A88E93F995EA112E145245D7",
"simplify-liveroom.min.js": "B1C6EC224D28D6815BE9F788A72425AC1E199A716873977A4C0B757898BED632", "simplify-liveroom.min.js": "B1C6EC224D28D6815BE9F788A72425AC1E199A716873977A4C0B757898BED632",
"skip-charge-list.min.css": "D3C988CE131CEBFAC8A60360529C83EC4AE1B9EA122F9A6924F19963E25A4FE9", "skip-charge-list.min.css": "D3C988CE131CEBFAC8A60360529C83EC4AE1B9EA122F9A6924F19963E25A4FE9",

Binary file not shown.

2
min/icon.vue.min.js vendored
View File

@ -1 +1 @@
(()=>{return(o,e)=>{const n=`<i class=be-icon :class=classes></i>`;e.applyStyleFromText(`@font-face{font-family:be-main-iconfont;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format("truetype")}@font-face{font-family:be-extended-iconfont;src:url(//s1.hdslb.com/bfs/static/jinkela/video/asserts/iconfont.4bab144.ttf) format("truetype")}@font-face{font-family:be-home-iconfont;src:url(//s1.hdslb.com/bfs/static/jinkela/international-home/asserts/iconfont.ttf) format("truetype")}.be-icon{color:inherit;font-size:24px;font-style:normal}.be-icon.be-main-iconfont{font-family:be-main-iconfont!important}.be-icon.be-extended-iconfont{font-family:be-extended-iconfont!important}.be-icon.be-home-iconfont{font-family:be-home-iconfont!important}.be-icon.be-iconfont-logo::before{content:""}.be-icon.be-iconfont-lv0::before{content:"";color:#9a9a9a}.be-icon.be-iconfont-lv1::before{content:"";color:#646464}body.dark .be-icon.be-iconfont-lv0::before{color:#777}body.dark .be-icon.be-iconfont-lv1::before{color:#ddd}.be-icon.be-iconfont-lv2::before{content:"";color:#1bc861}.be-icon.be-iconfont-lv3::before{content:"";color:#22baea}.be-icon.be-iconfont-lv4::before{content:"";color:#eaa722}.be-icon.be-iconfont-lv5::before{content:"";color:#ff7631}.be-icon.be-iconfont-lv6::before{content:"";color:#ff3131}.be-icon.be-iconfont-profile::before{content:""}.be-icon.be-iconfont-posts::before{content:""}.be-icon.be-iconfont-wallet::before{content:""}.be-icon.be-iconfont-live-center::before{content:""}.be-icon.be-iconfont-order-center::before{content:""}.be-icon.be-iconfont-logout::before{content:""}.be-icon.be-iconfont-ok::before{content:""}.be-icon.be-iconfont-cancel::before{content:""}.be-icon.be-iconfont-bind-phone::before{content:""}.be-icon.be-iconfont-bind-email::before{content:""}.be-icon.be-iconfont-coin-outline::before{content:""}.be-icon.be-iconfont-coin::before{content:""}.be-icon.be-iconfont-b-coin::before{content:""}.be-icon.be-iconfont-activity::before{content:""}.be-icon.be-iconfont-message::before{content:""}.be-icon.be-iconfont-favorites-outline::before{content:""}.be-icon.be-iconfont-favorites::before{content:""}.be-icon.be-iconfont-history::before{content:""}.be-icon.be-iconfont-vip::before{content:""}.be-icon.be-iconfont-play::before{content:""}.be-icon.be-iconfont-danmaku::before{content:""}.be-icon.be-iconfont-like::before{content:""}.be-icon.be-iconfont-like-outline::before{content:""}.be-icon.be-iconfont-up::before{content:""}.be-icon.be-iconfont-up-outline::before{content:""}`,"icon-style");return{export:Object.assign({template:n},{props:{icon:String,type:String},computed:{classes(){if(this.icon===""||this.type===""){return[]}return[`be-iconfont-${this.icon}`,`be-${this.type}-iconfont`]}}})}}})(); (()=>{return(o,e)=>{const n=`<i class=be-icon :class=classes></i>`;e.applyStyleFromText(`@font-face{font-family:be-main-iconfont;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format("truetype")}@font-face{font-family:be-extended-iconfont;src:url(//s1.hdslb.com/bfs/static/jinkela/video/asserts/iconfont.4bab144.ttf) format("truetype")}@font-face{font-family:be-home-iconfont;src:url(//s1.hdslb.com/bfs/static/jinkela/international-home/asserts/iconfont.ttf) format("truetype")}.be-icon{color:inherit;font-size:24px;font-style:normal;line-height:1}.be-icon.be-main-iconfont{font-family:be-main-iconfont!important}.be-icon.be-extended-iconfont{font-family:be-extended-iconfont!important}.be-icon.be-home-iconfont{font-family:be-home-iconfont!important}.be-icon.be-iconfont-logo::before{content:""}.be-icon.be-iconfont-lv0::before{content:"";color:#9a9a9a}.be-icon.be-iconfont-lv1::before{content:"";color:#646464}body.dark .be-icon.be-iconfont-lv0::before{color:#777}body.dark .be-icon.be-iconfont-lv1::before{color:#ddd}.be-icon.be-iconfont-lv2::before{content:"";color:#1bc861}.be-icon.be-iconfont-lv3::before{content:"";color:#22baea}.be-icon.be-iconfont-lv4::before{content:"";color:#eaa722}.be-icon.be-iconfont-lv5::before{content:"";color:#ff7631}.be-icon.be-iconfont-lv6::before{content:"";color:#ff3131}.be-icon.be-iconfont-profile::before{content:""}.be-icon.be-iconfont-posts::before{content:""}.be-icon.be-iconfont-wallet::before{content:""}.be-icon.be-iconfont-live-center::before{content:""}.be-icon.be-iconfont-order-center::before{content:""}.be-icon.be-iconfont-logout::before{content:""}.be-icon.be-iconfont-ok::before{content:""}.be-icon.be-iconfont-cancel::before{content:""}.be-icon.be-iconfont-bind-phone::before{content:""}.be-icon.be-iconfont-bind-email::before{content:""}.be-icon.be-iconfont-coin-outline::before{content:""}.be-icon.be-iconfont-coin::before{content:""}.be-icon.be-iconfont-b-coin::before{content:""}.be-icon.be-iconfont-activity::before{content:""}.be-icon.be-iconfont-message::before{content:""}.be-icon.be-iconfont-favorites-outline::before{content:""}.be-icon.be-iconfont-favorites::before{content:""}.be-icon.be-iconfont-history::before{content:""}.be-icon.be-iconfont-vip::before{content:""}.be-icon.be-iconfont-play::before{content:""}.be-icon.be-iconfont-danmaku::before{content:""}.be-icon.be-iconfont-like::before{content:""}.be-icon.be-iconfont-like-outline::before{content:""}.be-icon.be-iconfont-up::before{content:""}.be-icon.be-iconfont-up-outline::before{content:""}`,"icon-style");return{export:Object.assign({template:n},{props:{icon:String,type:String},computed:{classes(){if(this.icon===""||this.type===""){return[]}if(this.type==="mdi"){return["mdi",`mdi-${this.icon}`]}return[`be-iconfont-${this.icon}`,`be-${this.type}-iconfont`]}}})}}})();

View File

@ -1 +1 @@
(()=>{return(a,e)=>{const i=`<div class=minimal-home><div class=minimal-home-header><img v-if=logoImage :src=logoImage width=120><icon v-else class=logo icon=logo type=main></icon><div class=home-tabs><div v-for="(tab, index) of tabs":key=index class=tab :class="{active: tab.active}":data-tab=tab.name @click=changeTab(tab)>{{tab.displayName}}</div></div></div><div class=minimal-home-content><transition name=minimal-home-content-transition mode=out-in><component :is=content :key=activeTab.name :show-rank=activeTab.showRank></component></transition></div></div>`;e.applyStyleFromText(`.minimal-home{--card-width:600px;--card-height:120px;--card-margin:16px;--card-column-count:2;transform:translateX(calc(var(--card-margin)/ 2))}.minimal-home,.minimal-home *{box-sizing:border-box;transition:color .2s ease-out,opacity .2s ease-out,transform .2s ease-out}.minimal-home .logo{font-size:40px;color:var(--theme-color)}.minimal-home .minimal-home-header{display:flex;align-items:center;justify-content:space-between}.minimal-home .minimal-home-header .home-tabs{display:flex;flex-grow:1;justify-content:flex-end;margin-right:var(--card-margin)}.minimal-home .minimal-home-header .home-tabs .tab{color:#707070;opacity:.75;position:relative;cursor:pointer;margin-left:32px}body.dark .minimal-home .minimal-home-header .home-tabs .tab{color:#eee}.minimal-home .minimal-home-header .home-tabs .tab.active{transform:scale(1.2);opacity:1;font-weight:700}.minimal-home .minimal-home-header .home-tabs .tab::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%) scaleX(0);height:3px;width:24px;background-color:var(--theme-color);border-radius:2px;transition:.2s ease-out}.minimal-home .minimal-home-header .home-tabs .tab.active::after{transform:translateX(-50%) scaleX(1)}.minimal-home .minimal-home-content{margin-top:32px;width:calc(var(--card-column-count) * (var(--card-width) + var(--card-margin)))}.minimal-home .minimal-home-content .minimal-home-content-transition-enter-active,.minimal-home .minimal-home-content .minimal-home-content-transition-leave-active{transition:.3s ease-out}.minimal-home .minimal-home-content .minimal-home-content-transition-enter,.minimal-home .minimal-home-content .minimal-home-content-transition-leave-to{opacity:0;transform:scale(.95)}@media screen and (max-width:1300px){.minimal-home{--card-column-count:1}}`,"minimal-home-style");const t=[{name:"video",displayName:"视频动态",active:true,more:"https://t.bilibili.com/?tab=8",showRank:false},{name:"ranking7",displayName:"热门视频",active:false,more:"https://www.bilibili.com/ranking/all/0/0/7",showRank:true}];return{export:Object.assign({template:i},{components:{Icon:()=>e.importAsync("icon.vue"),VideoList:()=>e.importAsync("video-list.vue")},data(){return{tabs:t,content:"VideoList",logoImage:null}},computed:{activeTab(){return this.tabs.find(a=>a.active)},rankDays(){return this.activeTab.rankDays||0}},async mounted(){if(a.minimalHomeSeasonLogo){const a=await Ajax.getJson("https://api.bilibili.com/x/web-show/res/locs?pf=0&ids=142");if(a.code!==0){return}this.logoImage=a.data[142][0].litpic}},methods:{changeTab(a){if(a.active){window.open(a.more,"_blank");return}const e=this.activeTab;e.active=false;a.active=true}}})}}})(); (()=>{return(i,o)=>{const a=`<div class=minimal-home><div class=minimal-home-header><img v-if=logoImage :src=logoImage width=120><icon v-else class=logo icon=logo type=main></icon><div class=home-tabs><div v-for="(tab, index) of tabs":key=index class=tab :class="{active: tab.active}":data-tab=tab.name @click=changeTab(tab)>{{tab.displayName}}</div></div></div><div class=minimal-home-content><transition name=minimal-home-content-transition mode=out-in><component :is=content :key=activeTab.name :show-rank=activeTab.showRank></component></transition></div><div class=minimal-home-footer><div class="footer-button view-more"@click=viewMore()><icon type=mdi icon=dots-horizontal-circle-outline></icon>查看更多</div><div class="footer-button go-to-top"@click=goToTop()><icon type=mdi icon=arrow-up-drop-circle-outline></icon>返回顶部</div></div></div>`;o.applyStyleFromText(`.minimal-home{--card-width:600px;--card-height:120px;--card-margin:16px;--card-column-count:2;transform:translateX(calc(var(--card-margin)/ 2))}.minimal-home,.minimal-home *{box-sizing:border-box;transition:color .2s ease-out,opacity .2s ease-out,transform .2s ease-out,background-color .2s ease-out}.minimal-home .logo{font-size:40px;color:var(--theme-color)}.minimal-home .minimal-home-header{display:flex;align-items:center;justify-content:space-between}.minimal-home .minimal-home-header .home-tabs{display:flex;flex-grow:1;justify-content:flex-end;margin-right:var(--card-margin)}.minimal-home .minimal-home-header .home-tabs .tab{color:#707070;opacity:.75;position:relative;cursor:pointer;margin-left:32px}body.dark .minimal-home .minimal-home-header .home-tabs .tab{color:#eee}.minimal-home .minimal-home-header .home-tabs .tab.active{transform:scale(1.2);opacity:1;font-weight:700}.minimal-home .minimal-home-header .home-tabs .tab::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%) scaleX(0);height:3px;width:24px;background-color:var(--theme-color);border-radius:2px;transition:.2s ease-out}.minimal-home .minimal-home-header .home-tabs .tab.active::after{transform:translateX(-50%) scaleX(1)}.minimal-home .minimal-home-content{margin-top:32px;min-height:100vh;width:calc(var(--card-column-count) * (var(--card-width) + var(--card-margin)))}.minimal-home .minimal-home-content .minimal-home-content-transition-enter-active,.minimal-home .minimal-home-content .minimal-home-content-transition-leave-active{transition:.3s ease-out}.minimal-home .minimal-home-content .minimal-home-content-transition-enter,.minimal-home .minimal-home-content .minimal-home-content-transition-leave-to{opacity:0;transform:scale(.95)}.minimal-home .minimal-home-footer{padding:24px 0;display:flex;justify-content:space-around;align-items:center;margin-right:var(--card-margin)}.minimal-home .minimal-home-footer .footer-button{display:flex;align-items:center;padding:8px 12px 8px 8px;background-color:var(--theme-color-50);color:var(--foreground-color);border-radius:24px;font-size:11pt;cursor:pointer}.minimal-home .minimal-home-footer .footer-button .be-icon{margin-right:8px}.minimal-home .minimal-home-footer .footer-button:hover{background-color:var(--theme-color-60)}@media screen and (max-width:1300px){.minimal-home{--card-column-count:1}}@media screen and (min-width:2000px){.minimal-home{--card-column-count:3}.minimal-home .cards.show-rank .video-card:nth-child(16),.minimal-home .cards.show-rank .video-card:nth-child(24),.minimal-home .cards.show-rank .video-card:nth-child(8){margin-right:calc(var(--card-margin) * 2 + var(--card-width))}}`,"minimal-home-style");const e=[{name:"video",displayName:"视频动态",active:true,more:"https://t.bilibili.com/?tab=8",showRank:false},{name:"ranking",displayName:"热门视频",active:false,more:"https://www.bilibili.com/ranking",showRank:true}];return{export:Object.assign({template:a},{components:{Icon:()=>o.importAsync("icon.vue"),VideoList:()=>o.importAsync("video-list.vue")},data(){return{tabs:e,content:"VideoList",logoImage:null}},computed:{activeTab(){return this.tabs.find(i=>i.active)},rankDays(){return this.activeTab.rankDays||0}},async mounted(){if(i.minimalHomeSeasonLogo){const i=await Ajax.getJson("https://api.bilibili.com/x/web-show/res/locs?pf=0&ids=142");if(i.code!==0){return}this.logoImage=i.data[142][0].litpic}},methods:{changeTab(i){if(i.active){window.open(i.more,"_blank");return}const o=this.activeTab;o.active=false;i.active=true},goToTop(){scrollTo(0,0)},viewMore(){open(this.activeTab.more,"_blank")}}})}}})();

View File

@ -1 +1 @@
(()=>{return(e,m)=>{const i=`<div class=simplify-home><component class=simplify-home-component :is=activeComponent></component></div>`;m.applyStyleFromText(`.simplify-home{margin-top:32px;display:flex;align-items:center;justify-content:center}.simplify-home .simplify-home-component{max-width:100%}`,"simplify-home-style");return{export:Object.assign({template:i},{components:{"minimal-home":()=>m.importAsync("minimal-home.vue"),"simple-home":()=>m.importAsync("simple-home.vue")},computed:{activeComponent(){return this.homeStyle==="清爽"?"simple-home":"minimal-home"}},props:{homeStyle:String}})}}})(); (()=>{return(e,m)=>{const o=`<div class=simplify-home><component class=simplify-home-component :is=activeComponent></component></div>`;m.applyStyleFromText(`.simplify-home{margin-top:32px;display:flex;align-items:center;justify-content:center}.simplify-home .simplify-home-component{max-width:100%}html{scroll-behavior:smooth}`,"simplify-home-style");return{export:Object.assign({template:o},{components:{"minimal-home":()=>m.importAsync("minimal-home.vue"),"simple-home":()=>m.importAsync("simple-home.vue")},computed:{activeComponent(){return this.homeStyle==="清爽"?"simple-home":"minimal-home"}},props:{homeStyle:String}})}}})();

View File

@ -13,6 +13,9 @@ export default {
if (this.icon === '' || this.type === '') { if (this.icon === '' || this.type === '') {
return [] return []
} }
if (this.type === 'mdi') {
return ['mdi', `mdi-${this.icon}`]
}
return [`be-iconfont-${this.icon}`, `be-${this.type}-iconfont`] return [`be-iconfont-${this.icon}`, `be-${this.type}-iconfont`]
} }
} }
@ -39,6 +42,7 @@ export default {
color: inherit; color: inherit;
font-size: 24px; font-size: 24px;
font-style: normal; font-style: normal;
line-height: 1;
&.be-main-iconfont { &.be-main-iconfont {
font-family: 'be-main-iconfont' !important; font-family: 'be-main-iconfont' !important;
} }

View File

@ -2,7 +2,7 @@
<div class="minimal-home"> <div class="minimal-home">
<div class="minimal-home-header"> <div class="minimal-home-header">
<img v-if="logoImage" :src="logoImage" width="120" /> <img v-if="logoImage" :src="logoImage" width="120" />
<Icon v-else class="logo" icon="logo" type="main"></Icon> <icon v-else class="logo" icon="logo" type="main"></icon>
<div class="home-tabs"> <div class="home-tabs">
<div <div
v-for="(tab, index) of tabs" v-for="(tab, index) of tabs"
@ -13,13 +13,20 @@
@click="changeTab(tab)" @click="changeTab(tab)"
>{{tab.displayName}}</div> >{{tab.displayName}}</div>
</div> </div>
<!-- <Search></Search> -->
</div> </div>
<div class="minimal-home-content"> <div class="minimal-home-content">
<transition name="minimal-home-content-transition" mode="out-in"> <transition name="minimal-home-content-transition" mode="out-in">
<component :is="content" :key="activeTab.name" :show-rank="activeTab.showRank"></component> <component :is="content" :key="activeTab.name" :show-rank="activeTab.showRank"></component>
</transition> </transition>
</div> </div>
<div class="minimal-home-footer">
<div class="footer-button view-more" @click="viewMore()">
<icon type="mdi" icon="dots-horizontal-circle-outline"></icon>查看更多
</div>
<div class="footer-button go-to-top" @click="goToTop()">
<icon type="mdi" icon="arrow-up-drop-circle-outline"></icon>返回顶部
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -38,15 +45,15 @@ const tabs = [
displayName: '视频动态', displayName: '视频动态',
active: true, active: true,
more: 'https://t.bilibili.com/?tab=8', more: 'https://t.bilibili.com/?tab=8',
showRank: false, showRank: false
}, },
{ {
name: 'ranking7', name: 'ranking',
displayName: '热门视频', displayName: '热门视频',
active: false, active: false,
more: 'https://www.bilibili.com/ranking/all/0/0/7', more: 'https://www.bilibili.com/ranking',
showRank: true, showRank: true
}, }
] as Tab[] ] as Tab[]
export default { export default {
components: { components: {
@ -89,6 +96,12 @@ export default {
const activeTab = this.activeTab const activeTab = this.activeTab
activeTab.active = false activeTab.active = false
tab.active = true tab.active = true
},
goToTop() {
scrollTo(0, 0)
},
viewMore() {
open(this.activeTab.more, '_blank')
} }
} }
} }
@ -104,7 +117,7 @@ export default {
& * { & * {
box-sizing: border-box; box-sizing: border-box;
transition: color 0.2s ease-out, opacity 0.2s ease-out, transition: color 0.2s ease-out, opacity 0.2s ease-out,
transform 0.2s ease-out; transform 0.2s ease-out, background-color 0.2s ease-out;
} }
.logo { .logo {
font-size: 40px; font-size: 40px;
@ -155,6 +168,7 @@ export default {
} }
.minimal-home-content { .minimal-home-content {
margin-top: 32px; margin-top: 32px;
min-height: 100vh;
width: calc( width: calc(
var(--card-column-count) * (var(--card-width) + var(--card-margin)) var(--card-column-count) * (var(--card-width) + var(--card-margin))
); );
@ -170,10 +184,45 @@ export default {
} }
} }
} }
.minimal-home-footer {
padding: 24px 0;
display: flex;
justify-content: space-around;
align-items: center;
margin-right: var(--card-margin);
.footer-button {
display: flex;
align-items: center;
padding: 8px 12px 8px 8px;
background-color: var(--theme-color-50);
color: var(--foreground-color);
border-radius: 24px;
font-size: 11pt;
cursor: pointer;
.be-icon {
margin-right: 8px;
}
&:hover {
background-color: var(--theme-color-60);
}
}
}
} }
@media screen and (max-width: 1300px) { @media screen and (max-width: 1300px) {
.minimal-home { .minimal-home {
--card-column-count: 1; --card-column-count: 1;
} }
} }
@media screen and (min-width: 2000px) {
.minimal-home {
--card-column-count: 3;
.cards.show-rank {
.video-card:nth-child(8),
.video-card:nth-child(16),
.video-card:nth-child(24) {
margin-right: calc(var(--card-margin) * 2 + var(--card-width));
}
}
}
}
</style> </style>

View File

@ -30,4 +30,7 @@ export default {
max-width: 100%; max-width: 100%;
} }
} }
html {
scroll-behavior: smooth;
}
</style> </style>