Bilibili-Evolved/min/trending-videos.vue.min.js
2020-09-05 20:19:36 +08:00

1 line
2.5 KiB
JavaScript

(()=>{return(e,n)=>{const t=`<div class=trendings><div class=header><div class=title>热门</div><div class=page><div class=prev-page @click=scroll(-1)><icon type=extended icon=left-arrow></icon></div><div class=next-page @click=scroll(1)><icon type=extended icon=right-arrow></icon></div></div></div><div class=contents ref=contents><div class=card-wrapper v-for="card in trendingCards":key=card.id><video-card :data=card orientation=vertical></video-card></div></div></div>`;n.applyStyleFromText(`.simple-home .trendings{display:flex;flex-direction:column}.simple-home .trendings .header{padding:0 8px}.simple-home .trendings .header .page{display:flex;align-items:center}.simple-home .trendings .header .page>*{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#8882;border-radius:50%;margin-left:8px;cursor:pointer}.simple-home .trendings .header .page>:hover{background-color:#8884}.simple-home .trendings .header .page .prev-page .be-icon{transform:translateX(-1px)}.simple-home .trendings .header .page .next-page .be-icon{transform:translateX(1px)}.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));scrollbar-width:none!important}@media screen and (max-width:1300px) and (min-width:900px){.simple-home .trendings .contents{--card-count:2}}@media screen and (max-width:1100px) and (min-width:900px){.simple-home .trendings .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .trendings .contents{--card-count:4}}.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");return{export:Object.assign({template:t},{components:{VideoCard:()=>n.importAsync("video-card.vue"),Icon:()=>n.importAsync("icon.vue")},data(){return{trendingCards:[]}},methods:{scroll(e){const n=this.$refs.contents;const t=getComputedStyle(n);const r=parseFloat(t.getPropertyValue("--card-count"));const i=parseFloat(t.getPropertyValue("--card-width"));const a=16;const d=r*(i+a);n.scrollBy(e*d,0)}},async created(){const{getTrendingVideos:e}=await n.importAsync("trending-videos");this.trendingCards=e()},async mounted(){if(!e.simpleHomeWheelScroll){return}const t=this.$refs.contents;const{enableHorizontalScroll:r}=await n.importAsync("horizontal-scroll");r(t)}})}}})();