Bilibili-Evolved/min/minimal-home.vue.min.js
2019-09-15 13:32:20 +08:00

1 line
3.2 KiB
JavaScript

(()=>{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}}})}}})();