Bilibili-Evolved/min/trending-videos.vue.min.js
2020-07-15 20:16:47 +08:00

1 line
2.9 KiB
JavaScript

(()=>{return(e,t)=>{const n=`<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>`;t.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:n},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){return{trendingCards:unsafeWindow.__INITIAL_STATE__.recommendList.map(e=>{return{id:e.aid,aid:e.aid,bvid:e.bvid,timestamp:e.ctime*1e3,time:new Date(e.ctime*1e3),description:e.desc,duration:e.duration,durationText:formatDuration(e.duration),coverUrl:e.pic.replace("http:","https:"),title:e.title,coins:formatCount(e.stat.coin),danmakuCount:formatCount(e.stat.danmaku),like:formatCount(e.stat.like),playCount:formatCount(e.stat.view),upName:e.owner.name,upFaceUrl:e.owner.face.replace("http:","https:")}})}},methods:{scroll(e){const t=this.$refs.contents;const n=getComputedStyle(t);const i=parseFloat(n.getPropertyValue("--card-count"));const r=parseFloat(n.getPropertyValue("--card-width"));const a=16;const o=i*(r+a);t.scrollBy(e*o,0)}},async mounted(){if(!e.simpleHomeWheelScroll){return}const n=this.$refs.contents;const{enableHorizontalScroll:i}=await t.importAsync("horizontal-scroll");i(n)}})}}})();