mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
1 line
10 KiB
JavaScript
1 line
10 KiB
JavaScript
(()=>{return(e,a)=>{const t=`<div class=simple-home><div class=blackboards><div class=header><div class=title>活动</div><div class=more><icon type=mdi icon=dots-horizontal></icon>更多</div></div><input class="hidden-input blackboard-radio"type=radio name=blackboard v-for="(b, i) of blackboards":checked="i === 0":id="'blackboard' + i":data-index=i :key=i><div class=jump-dots><label v-for="(b, i) of blackboards":for="'blackboard' + i":key=i><div class=jump-dot></div></label></div><div class=blackboard-cards><a class=blackboard-card target=_blank v-for="(b, i) of blackboards":key=i :href=b.url :title=b.title><img :src=b.imageUrl :alt=b.title><div class=title>{{b.title}}</div></a></div></div><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></div>`;a.applyStyleFromText(`.simple-home{--title-color:black;color:#444;display:grid;grid-template-areas:"blackboards trendings" "info info" "categories categories";grid-template-columns:repeat(2,auto);grid-template-rows:repeat(3,auto);column-gap:52px;row-gap:32px}.simple-home,.simple-home *{transition:.2s ease-out}body.dark .simple-home{--title-color:white;color:#ddd}.simple-home .jump-dots{grid-area:dots;align-self:center;justify-self:center}.simple-home .jump-dots label{display:block}.simple-home .jump-dots label:not(:last-child){margin-bottom:6px}.simple-home .jump-dots .jump-dot{background-color:#ddd;width:8px;height:20px;border-radius:8px;cursor:pointer}body.dark .simple-home .jump-dots .jump-dot{background-color:#444}.simple-home .hidden-input{display:none}.simple-home .hidden-input:checked:nth-of-type(1)~.jump-dots label:nth-child(1) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(1)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 0 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(2)~.jump-dots label:nth-child(2) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(2)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 1 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(3)~.jump-dots label:nth-child(3) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(3)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 2 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(4)~.jump-dots label:nth-child(4) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(4)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 3 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(5)~.jump-dots label:nth-child(5) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(5)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 4 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(6)~.jump-dots label:nth-child(6) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(6)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 5 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(7)~.jump-dots label:nth-child(7) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(7)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 6 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(8)~.jump-dots label:nth-child(8) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(8)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 7 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(9)~.jump-dots label:nth-child(9) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(9)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 8 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(10)~.jump-dots label:nth-child(10) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(10)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 9 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(11)~.jump-dots label:nth-child(11) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(11)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 10 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(12)~.jump-dots label:nth-child(12) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(12)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 11 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(13)~.jump-dots label:nth-child(13) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(13)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 12 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(14)~.jump-dots label:nth-child(14) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(14)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 13 * var(--blackboard-height)))}.simple-home .hidden-input:checked:nth-of-type(15)~.jump-dots label:nth-child(15) .jump-dot{background-color:var(--theme-color);height:40px}.simple-home .hidden-input:checked:nth-of-type(15)~.blackboard-cards .blackboard-card{transform:translateY(calc(-1 * 14 * var(--blackboard-height)))}.simple-home .more{background-color:#ddd;cursor:pointer;padding:2px 16px 2px 8px;display:flex;align-items:center;border-radius:16px;font-size:14px}.simple-home .more .be-icon{margin-right:8px;transition:.3s cubic-bezier(.25,.46,.45,.94)}.simple-home .more:hover .be-icon{transform:rotate(180deg)}body.dark .simple-home .more{background-color:#333}.simple-home .blackboards{grid-area:blackboards;display:grid;grid-template-areas:"header header" "dots cards";grid-template-columns:8px 1fr;grid-template-rows:1fr 250px;row-gap:16px;column-gap:16px;align-self:start}.simple-home .blackboards .header{grid-area:header;display:flex;justify-content:space-between;align-items:center}.simple-home .blackboards .header .title{color:var(--title-color);font-weight:700;font-size:24px}.simple-home .blackboards .blackboard-cards{grid-area:cards;--blackboard-width:500px;--blackboard-height:250px;width:var(--blackboard-width);height:var(--blackboard-height);border-radius:16px;overflow:hidden}.simple-home .blackboards .blackboard-cards .blackboard-card{width:100%;height:100%;position:relative;display:block;transition:.3s cubic-bezier(.65,.05,.36,1)}.simple-home .blackboards .blackboard-cards .blackboard-card img{width:100%;height:100%;object-fit:fill;display:block}.simple-home .blackboards .blackboard-cards .blackboard-card .title{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:4px 16px;color:#fff;background-color:#000a;font-size:14px;font-weight:700;border-radius:14px;white-space:nowrap}.simple-home .trendings{grid-area: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:24px}.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;margin-top:16px;display:flex;overflow:auto;height:calc(var(--card-height) + 16px);width:calc(var(--card-width) * 3 + (16px * 3));scroll-snap-type:x mandatory;scrollbar-width:none!important}.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}`,"simple-home-style");const d=[{name:"一周",day:7},{name:"三日",day:3},{name:"昨日",day:1}];return{export:Object.assign({template:t},{components:{Icon:()=>a.importAsync("icon.vue"),VideoCard:()=>a.importAsync("video-card.vue")},data(){return{blackboards:[],tabs:d,currentTab:d[0],interval:0,trendingCards:[]}},methods:{async updateTrendingTab(e){const{getTrendingVideos:t}=await a.importAsync("trending-videos");this.trendingCards=await t(e.day)}},watch:{currentTab(e){this.updateTrendingTab(e)}},destroyed(){if(this.interval){clearInterval(this.interval)}},async mounted(){this.updateTrendingTab(this.currentTab);const{getBlackboards:e}=await a.importAsync("blackboard");this.blackboards=(await e()).filter(e=>!e.isAd);const t=dq(".blackboards");this.interval=setInterval(()=>{if(!document.hasFocus()||t.matches(".blackboards:hover")){return}const e=parseInt(dq(`.blackboard-radio:checked`).getAttribute("data-index"));let a;if(e===this.blackboards.length-1){a=0}else{a=e+1}dq(`.blackboard-radio[data-index='${a}']`).checked=true},5e3)}})}}})(); |