Bilibili-Evolved/min/trending-videos.vue.min.js
2019-10-24 23:44:50 +08:00

1 line
2.7 KiB
JavaScript

(()=>{return(e,t)=>{const a=`<div class=trendings><div class=header><div class=title>热门</div><div class=tabs><div class=tab v-for="tab in tabs":key=tab.day @click="currentTab = tab":class="{active: currentTab === tab}"><div class=tab-name>{{tab.name}}</div></div></div></div><div class=contents><div class=card-wrapper v-for="card in trendingCards":key=card.id><video-card :data=card orientation=vertical></video-card></div></div></div>`;t.applyStyleFromText(`.simple-home .trendings{display:flex;flex-direction:column}.simple-home .trendings .header{display:flex;justify-content:space-between;align-items:center;padding:0 8px}.simple-home .trendings .header .title{color:var(--title-color);font-weight:700;font-size:22px}.simple-home .trendings .header .tabs{display:flex;align-items:center}.simple-home .trendings .header .tabs .tab{cursor:pointer;position:relative}.simple-home .trendings .header .tabs .tab .tab-name{opacity:.5;font-size:14px}.simple-home .trendings .header .tabs .tab:not(:last-child){margin-right:24px}.simple-home .trendings .header .tabs .tab::after{content:"";width:calc(80%);height:3px;border-radius:2px;position:absolute;background-color:var(--theme-color);left:10%;bottom:-6px;transform:scaleX(0);transition:.2s ease-out}.simple-home .trendings .header .tabs .tab.active::after{transform:scaleX(1)}.simple-home .trendings .header .tabs .tab.active .tab-name{font-weight:700;opacity:1;transform:scale(1.1)}.simple-home .trendings .contents{--card-width:200px;--card-height:250px;--card-count:3;margin-top:16px;display:flex;overflow:auto;height:calc(var(--card-height) + 16px);width:calc((var(--card-width) + 16px) * var(--card-count));scroll-snap-type:x mandatory;scrollbar-width:none!important}@media screen and (max-width:1250px) and (min-width:900px){.simple-home .trendings .contents{--card-count:2}}@media screen and (max-width:1050px) and (min-width:900px){.simple-home .trendings .contents{--card-count:1}}@media screen and (min-width:1600px){.simple-home .trendings .contents{--card-count:4}}@media screen and (min-width:1900px){.simple-home .trendings .contents{--card-count:5}}.simple-home .trendings .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .trendings .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}`,"trending-videos-style");const n=[{name:"一周",day:7},{name:"三日",day:3},{name:"昨日",day:1}];return{export:Object.assign({template:a},{components:{VideoCard:()=>t.importAsync("video-card.vue")},data(){return{tabs:n,currentTab:n[0],trendingCards:[]}},watch:{currentTab(e){this.updateTrendingTab(e)}},methods:{async updateTrendingTab(e){const{getTrendingVideos:a}=await t.importAsync("trending-videos");this.trendingCards=await a(e.day)}},mounted(){this.updateTrendingTab(this.currentTab)}})}}})();