mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Improve UI
This commit is contained in:
parent
52c186ac5e
commit
2ff5b85743
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
@ -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",
|
||||||
|
|||||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/icon.vue.min.js
vendored
2
min/icon.vue.min.js
vendored
@ -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`]}}})}}})();
|
||||||
2
min/minimal-home.vue.min.js
vendored
2
min/minimal-home.vue.min.js
vendored
@ -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")}}})}}})();
|
||||||
2
min/simplify-home.vue.min.js
vendored
2
min/simplify-home.vue.min.js
vendored
@ -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}})}}})();
|
||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
@ -30,4 +30,7 @@ export default {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user