Add media query for narrow width

This commit is contained in:
the1812 2020-02-10 11:25:06 +08:00
parent 0ca04f5afb
commit 77686b1e2f
14 changed files with 55 additions and 82 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -130,7 +130,7 @@
"medal-helper.min.css": "6AF13675048FEBFB7E56ABE7462346BB53D22DE21DC31A34211872FCF6FA2A3B",
"medal-helper.min.html": "5D7057259368BE97DED3375DD904695B245AA2BF338C5E18CB3CF61DD913617C",
"medal-helper.min.js": "A55F702FF0D00578A6402784BE68D27BF44E789356FAA709B672B1D0BAA36A95",
"minimal-home.vue.min.js": "D57B319D596F36FF077B7E4D831E2D627C93B8BBED3639DD4199C661B82E9D9A",
"minimal-home.vue.min.js": "59D2CDA4F67F919252722ED02657EDA712ADAD04363BB71C5E5381DB7FA61B2B",
"mini-player-touch-move.min.css": "028540E4F40EFD23403CB3D8A654372D7CE65FFC1F95B9793C207179C7C3A9A2",
"mini-player-touch-move.min.js": "AAD61A7324B2852B3AA3400BA0E896D16A7DD3BF376FBCB6AF11B0DA55F7B831",
"narrow-danmaku.min.js": "12475431A527EFF15100AF57C9C53D0603BC27723126D966CB01240917602253",
@ -172,8 +172,8 @@
"simple-home.vue.min.js": "BB936D1E635E21B72A81F448F86AE2E6773ADABC204BFE4BF78A02BB604E16C0",
"simple-home-bangumi-category.vue.min.js": "3CE2077EAA17E33FC3B0003E528658D34F0BBC34259FF5E47E8D2025A11D47AB",
"simple-home-categories.vue.min.js": "DFF18335FC187158B907F996417CEE9D582182D00B4D5D312E10DEACFA31E0BA",
"simple-home-feeds.vue.min.js": "BFBE14AEE13D9ACC38BEB0F673ACA8FD2F99944B1189AE77F3BBBB253B248A3A",
"simple-home-normal-category.vue.min.js": "F3C1541942DC2C56D495662166FDAE7491F71666625E40E6A7A3465BF7922441",
"simple-home-feeds.vue.min.js": "8C783136555118CC4966B752ACE6D1AFAB5B526499BB8ED5800027E102289B74",
"simple-home-normal-category.vue.min.js": "71D58A93F0AFCEB58F01DAEA221F5FC9E33925006C53506328B5EBC486C75BD0",
"simplify-home.min.css": "50F0FA046D61ECE5183409CF97C8DBECB4CF64918DF813CD2B39BF9FBD314B42",
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
"simplify-home.vue.min.js": "62F246FD5C9172676A077DD1DFB1F5ACE0E018952D13E1AAD89B3EA2FD00F961",
@ -207,7 +207,7 @@
"video-dash.min.js": "E0345C36E793F8C05E5FC83DDAB88751CD6BA28FB0A1AA63BC20FBCE330F037B",
"video-downloader-fragment.min.js": "13B755C0EE0CA018AE65251E168BAF3395FEA2EB4FAD6949AADD752F61B8819B",
"video-info.min.js": "B837809D3D2C10CD34969143DC05EDD6F24C38181CF24FD705C80B9DD6E86B94",
"video-list.vue.min.js": "9F91DBF44D68C96E02B926A43617651BAE32A7095AA21F2B1073C343044877A5",
"video-list.vue.min.js": "9B0FB6AC3D3CD8D0250CBBC787D5BE823C46216CD71B9E8DCAC75AFE1BE5A9EA",
"video-story.min.js": "F9D4D2D80997DF5F11BF0CFA4D389B77BDBF1566EA6002E47174B68B440F3C0D",
"view-cover.min.js": "E4960587BFC4A219278EC300AFC8983AE4064D6FDBB42093E4EB7590726E229E",
"watchlater.min.js": "8C3C74E64A6D1B0FD5A40166FCB19981F86AF0A0E1003586DC591863C2022B18",

Binary file not shown.

View File

@ -1 +1 @@
(()=>{return(i,e)=>{const a=`<div class=minimal-home><div class=minimal-home-header><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 class=minimal-home-footer><div class="footer-button view-more"@click=viewMore()><icon type=mdi icon=dots-horizontal-circle-outline></icon>查看更多</div><div class="footer-button go-to-top"@click=goToTop()><icon type=mdi icon=arrow-up-drop-circle-outline></icon>返回顶部</div></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,background-color .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:center;margin-right:var(--card-margin)}.minimal-home .minimal-home-header .home-tabs .tab{color:#000;opacity:.75;position:relative;cursor:pointer}.minimal-home .minimal-home-header .home-tabs .tab:not(:first-child){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;min-height:100vh;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)}.minimal-home .minimal-home-footer{padding:24px 0;display:flex;justify-content:space-around;align-items:center;margin-right:var(--card-margin)}.minimal-home .minimal-home-footer .footer-button{display:flex;align-items:center;padding:8px 12px 8px 8px;background-color:#8882;color:#000;border-radius:24px;font-size:11pt;cursor:pointer}.minimal-home .minimal-home-footer .footer-button .be-icon{margin-right:8px}body.dark .minimal-home .minimal-home-footer .footer-button{color:#eee}.minimal-home .minimal-home-footer .footer-button:hover{background-color:#8884}@media screen and (max-width:1300px){.minimal-home{--card-column-count:1}}@media screen and (min-width:2000px){.minimal-home{--card-column-count:3}.minimal-home .cards.show-rank .video-card:nth-child(16),.minimal-home .cards.show-rank .video-card:nth-child(24),.minimal-home .cards.show-rank .video-card:nth-child(8){margin-right:calc(var(--card-margin) * 2 + var(--card-width))}}`,"minimal-home-style");const o=[{name:"video",displayName:"视频动态",active:true,more:"https://t.bilibili.com/?tab=8",showRank:false},{name:"ranking",displayName:"热门视频",active:false,more:"https://www.bilibili.com/ranking",showRank:true}];return{export:Object.assign({template:a},{components:{Icon:()=>e.importAsync("icon.vue"),VideoList:()=>e.importAsync("video-list.vue")},data(){return{tabs:o,content:"VideoList",logoImage:null}},computed:{activeTab(){return this.tabs.find(i=>i.active)},rankDays(){return this.activeTab.rankDays||0}},async mounted(){},methods:{changeTab(i){if(i.active){window.open(i.more,"_blank");return}const e=this.activeTab;e.active=false;i.active=true},goToTop(){scrollTo(0,0)},viewMore(){open(this.activeTab.more,"_blank")}}})}}})();
(()=>{return(i,a)=>{const e=`<div class=minimal-home><div class=minimal-home-header><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 class=minimal-home-footer><div class="footer-button view-more"@click=viewMore()><icon type=mdi icon=dots-horizontal-circle-outline></icon>查看更多</div><div class="footer-button go-to-top"@click=goToTop()><icon type=mdi icon=arrow-up-drop-circle-outline></icon>返回顶部</div></div></div>`;a.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,background-color .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:center;margin-right:var(--card-margin)}.minimal-home .minimal-home-header .home-tabs .tab{color:#000;opacity:.75;position:relative;cursor:pointer}.minimal-home .minimal-home-header .home-tabs .tab:not(:first-child){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;min-height:100vh;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)}.minimal-home .minimal-home-footer{padding:24px 0;display:flex;justify-content:space-around;align-items:center;margin-right:var(--card-margin)}.minimal-home .minimal-home-footer .footer-button{display:flex;align-items:center;padding:8px 12px 8px 8px;background-color:#8882;color:#000;border-radius:24px;font-size:11pt;cursor:pointer}.minimal-home .minimal-home-footer .footer-button .be-icon{margin-right:8px}body.dark .minimal-home .minimal-home-footer .footer-button{color:#eee}.minimal-home .minimal-home-footer .footer-button:hover{background-color:#8884}@media screen and (max-width:1300px){.minimal-home{--card-column-count:1}}@media screen and (max-width:680px){.minimal-home{--card-column-count:2;--card-width:210px;--card-height:240px}}@media screen and (max-width:470px){.minimal-home{--card-column-count:1}}@media screen and (min-width:2000px){.minimal-home{--card-column-count:3}.minimal-home .cards.show-rank .video-card:nth-child(16),.minimal-home .cards.show-rank .video-card:nth-child(24),.minimal-home .cards.show-rank .video-card:nth-child(8){margin-right:calc(var(--card-margin) * 2 + var(--card-width))}}`,"minimal-home-style");const o=[{name:"video",displayName:"视频动态",active:true,more:"https://t.bilibili.com/?tab=8",showRank:false},{name:"ranking",displayName:"热门视频",active:false,more:"https://www.bilibili.com/ranking",showRank:true}];return{export:Object.assign({template:e},{components:{Icon:()=>a.importAsync("icon.vue"),VideoList:()=>a.importAsync("video-list.vue")},data(){return{tabs:o,content:"VideoList",logoImage:null}},computed:{activeTab(){return this.tabs.find(i=>i.active)},rankDays(){return this.activeTab.rankDays||0}},async mounted(){},methods:{changeTab(i){if(i.active){window.open(i.more,"_blank");return}const a=this.activeTab;a.active=false;i.active=true},goToTop(){scrollTo(0,0)},viewMore(){open(this.activeTab.more,"_blank")}}})}}})();

View File

@ -1 +1 @@
(()=>{return(e,t)=>{const a=`<div class=feeds><div class=header><div class=tabs><div class=title>动态</div><div class=tab v-for="tab in tabs":key=tab.type @click=changeTab(tab) :class="{active: currentTab === tab}"><div class=tab-name>{{tab.name}}</div></div></div><a class=online target=_blank href=https://www.bilibili.com/video/online.html>在线人数: {{online}}</a><a class=more href=//t.bilibili.com/ target=_blank><icon type=home icon=activity></icon>全部动态</a></div><div class=contents><div class=card-wrapper v-for="card in feedCards":key=card.id><video-card :data=card orientation=vertical></video-card></div><div class=empty v-if="feedCards.length === 0">没有动态哦(´・_・\`)</div></div></div>`;t.applyStyleFromText(`.simple-home .feeds{justify-self:start;display:grid;grid-template-areas:"header header" "contents contents";grid-template-columns:repeat(2,auto);grid-template-rows:repeat(2,auto);row-gap:16px;column-gap:16px}.simple-home .feeds .header,.simple-home .feeds .sub-header{padding:0 8px}.simple-home .feeds .header .tab:nth-child(2),.simple-home .feeds .sub-header .tab:nth-child(2){margin-left:32px}.simple-home .feeds .header .online,.simple-home .feeds .sub-header .online{padding:8px 16px;height:32px;border-radius:16px;background-color:#8882;color:inherit;font-size:12px;display:flex;align-items:center;box-sizing:border-box}.simple-home .feeds .contents{grid-area:contents;display:flex;overflow:auto;--card-width:200px;--card-height:250px;--card-count:3;width:calc((var(--card-width) + 16px) * var(--card-count));padding-bottom:16px;scroll-snap-type:x mandatory;scrollbar-width:none!important;min-height:calc(var(--card-height) + 16px)}@media screen and (min-width:1100px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1300px){.simple-home .feeds .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .feeds .contents{--card-count:5}}.simple-home .feeds .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .feeds .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}.simple-home .feeds .contents .empty{display:flex;align-items:center;justify-content:center;width:100%;font-size:16px}`,"simple-home-feeds-style");const i=[{name:"视频",type:"video",url:"https://t.bilibili.com/?tab=8"},{name:"番剧",type:"bangumi",url:"https://t.bilibili.com/?tab=512"}];return{export:Object.assign({template:a},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){return{online:"--",tabs:i,currentTab:i[0],feedCards:[]}},watch:{currentTab(e){this.updateFeedCards(e)}},methods:{async updateFeedCards(e){const{getVideoFeeds:a}=await t.importAsync("feeds-apis");this.feedCards=await a(e.type)},changeTab(e){if(this.currentTab===e){open(e.url,"_blank")}else{this.currentTab=e}}},async mounted(){this.updateFeedCards(this.currentTab);const e=await Ajax.getJson("https://api.bilibili.com/x/web-interface/online");if(e.code===0){this.online=e.data.web_online}}})}}})();
(()=>{return(e,t)=>{const a=`<div class=feeds><div class=header><div class=tabs><div class=title>动态</div><div class=tab v-for="tab in tabs":key=tab.type @click=changeTab(tab) :class="{active: currentTab === tab}"><div class=tab-name>{{tab.name}}</div></div></div><a class=online target=_blank href=https://www.bilibili.com/video/online.html>在线人数: {{online}}</a><a class=more href=//t.bilibili.com/ target=_blank><icon type=home icon=activity></icon>全部动态</a></div><div class=contents><div class=card-wrapper v-for="card in feedCards":key=card.id><video-card :data=card orientation=vertical></video-card></div><div class=empty v-if="feedCards.length === 0">没有动态哦(´・_・\`)</div></div></div>`;t.applyStyleFromText(`.simple-home .feeds{justify-self:start;display:grid;grid-template-areas:"header header" "contents contents";grid-template-columns:repeat(2,auto);grid-template-rows:repeat(2,auto);row-gap:16px;column-gap:16px}.simple-home .feeds .header,.simple-home .feeds .sub-header{padding:0 8px}.simple-home .feeds .header .tab:nth-child(2),.simple-home .feeds .sub-header .tab:nth-child(2){margin-left:32px}.simple-home .feeds .header .online,.simple-home .feeds .sub-header .online{padding:8px 16px;height:32px;border-radius:16px;background-color:#8882;color:inherit;font-size:12px;display:flex;align-items:center;box-sizing:border-box}.simple-home .feeds .contents{grid-area:contents;display:flex;overflow:auto;--card-width:200px;--card-height:250px;--card-count:2;width:calc((var(--card-width) + 16px) * var(--card-count));padding-bottom:16px;scroll-snap-type:x mandatory;scrollbar-width:none!important;min-height:calc(var(--card-height) + 16px)}@media screen and (max-width:900px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1100px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1300px){.simple-home .feeds .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .feeds .contents{--card-count:5}}.simple-home .feeds .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .feeds .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}.simple-home .feeds .contents .empty{display:flex;align-items:center;justify-content:center;width:100%;font-size:16px}`,"simple-home-feeds-style");const i=[{name:"视频",type:"video",url:"https://t.bilibili.com/?tab=8"},{name:"番剧",type:"bangumi",url:"https://t.bilibili.com/?tab=512"}];return{export:Object.assign({template:a},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){return{online:"--",tabs:i,currentTab:i[0],feedCards:[]}},watch:{currentTab(e){this.updateFeedCards(e)}},methods:{async updateFeedCards(e){const{getVideoFeeds:a}=await t.importAsync("feeds-apis");this.feedCards=await a(e.type)},changeTab(e){if(this.currentTab===e){open(e.url,"_blank")}else{this.currentTab=e}}},async mounted(){this.updateFeedCards(this.currentTab);const e=await Ajax.getJson("https://api.bilibili.com/x/web-interface/online");if(e.code===0){this.online=e.data.web_online}}})}}})();

View File

@ -1 +1 @@
(()=>{return(t,i)=>{const e=`<div class=category-view :class="{'new-activity-loading': newActivity.loading,'new-post-loading': newPost.loading,'rank-loading': rank.loading}"><slideshow-cards class=new-activity :cards=newActivity.videos :error=newActivity.error :show-stat=true @refresh=loadNewActivity() title=有新动态></slideshow-cards><slideshow-cards class=new-post :cards=newPost.videos :error=newPost.errors :show-stat=false @refresh=loadNewPost() title=最新发布></slideshow-cards><rank-list :videos=rank.videos></rank-list><div class="new-activity loading"></div><div class="new-post loading"></div><div class="rank loading"></div></div>`;i.applyStyleFromText(`.category-view{display:grid;grid-template:"new-activity rank" 1fr "new-post rank" 1fr/1fr calc(1.5 * var(--rank-width) + 10px);grid-row-gap:24px;row-gap:24px;grid-column-gap:32px;column-gap:32px;position:relative}.category-view,.category-view *,.category-view ::after,.category-view ::before{transition:.2s ease-out}.category-view .loading{opacity:0;pointer-events:none;border-radius:16px;position:absolute}.category-view .new-activity{align-self:start;grid-area:new-activity}.category-view .new-post{align-self:end;grid-area:new-post}.category-view.new-activity-loading .new-activity.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.category-view.new-activity-loading .new-activity:not(.loading){opacity:0;pointer-events:none}.category-view.new-post-loading .new-post.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.category-view.new-post-loading .new-post:not(.loading){opacity:0;pointer-events:none}.category-view .rank{grid-area:rank}.category-view.rank-loading .rank.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.category-view.rank-loading .rank:not(.loading){opacity:0;pointer-events:none}@media screen and (max-width:1300px){.category-view{grid-template:"new-activity" 1fr "new-post" 1fr "rank" auto/1fr}.category-view .rank{justify-self:center}}`,"simple-home-normal-category-style");return{export:Object.assign({template:e},{components:{SlideshowCards:()=>i.importAsync("slideshow-cards.vue"),RankList:()=>i.importAsync("rank-list.vue")},store:store,props:{rid:{type:Number,required:true}},data(){return{newActivity:{error:false,loading:true,videos:[]},newPost:{error:false,loading:true,videos:[]},rank:{error:false,loading:true,videos:[]},loaded:false}},computed:{...Vuex.mapState(["watchlaterList"])},methods:{async loadCards(t,i,e){if(e===undefined){e=(t=>{const i=getUID();const e=_.get(t,"data.archives",[]);return e.map(t=>{return{id:t.aid,aid:t.aid,coverUrl:t.pic.replace("http:","https:"),title:t.title,upName:t.owner.name,upFaceUrl:t.owner.face.replace("http:","https:"),upID:t.owner.mid,playCount:t.stat.view,danmakuCount:t.stat.danmaku,like:t.stat.like,coins:t.stat.coin,description:t.desc,type:t.tname,watchlater:i?this.watchlaterList.includes(t.aid):null}})})}try{this[t].loading=true;const a=await Ajax.getJson(i);if(a.code!==0){this[t].error=true}this[t].videos=e(a)}catch(i){logError(i);this[t].error=true}finally{this[t].loading=false}},async loadNewActivity(){await this.loadCards("newActivity",`https://api.bilibili.com/x/web-interface/dynamic/region?ps=10&rid=${this.rid}`)},async loadNewPost(){await this.loadCards("newPost",`https://api.bilibili.com/x/web-interface/newlist?ps=10&rid=${this.rid}`)},async loadRank(){await this.loadCards("rank",`https://api.bilibili.com/x/web-interface/ranking/region?rid=${this.rid}&day=3&original=0`,t=>{const i=getUID();const e=t.data;return e.map(t=>{return{id:t.aid,aid:parseInt(t.aid),title:t.title,playCount:t.play,favorites:t.favorites,upID:t.mid,upName:t.author,description:t.description,coverUrl:t.pic.replace("http:","https:"),coins:t.coins,durationText:t.duration,points:t.pts,watchlater:i?this.watchlaterList.includes(parseInt(t.aid)):null}})})},...Vuex.mapActions(["toggleWatchlater"]),updateVideos(){this.loadNewActivity();this.loadNewPost();this.loadRank()}},watch:{rid(t){if(t>0){if(this.loaded){this.updateVideos()}}else{console.warn(`rid=${t}`)}}},mounted(){const t=new IntersectionObserver(()=>{this.updateVideos();this.loaded=true;t.disconnect()});t.observe(this.$el)}})}}})();
(()=>{return(t,i)=>{const e=`<div class=category-view :class="{'new-activity-loading': newActivity.loading,'new-post-loading': newPost.loading,'rank-loading': rank.loading}"><slideshow-cards class=new-activity :cards=newActivity.videos :error=newActivity.error :show-stat=true @refresh=loadNewActivity() title=有新动态></slideshow-cards><slideshow-cards class=new-post :cards=newPost.videos :error=newPost.errors :show-stat=false @refresh=loadNewPost() title=最新发布></slideshow-cards><rank-list :videos=rank.videos></rank-list><div class="new-activity loading"></div><div class="new-post loading"></div><div class="rank loading"></div></div>`;i.applyStyleFromText(`.category-view{display:grid;grid-template:"new-activity rank" 1fr "new-post rank" 1fr/1fr calc(1.5 * var(--rank-width) + 10px);grid-row-gap:24px;row-gap:24px;grid-column-gap:32px;column-gap:32px;position:relative}.category-view,.category-view *,.category-view ::after,.category-view ::before{transition:.2s ease-out}.category-view .loading{opacity:0;pointer-events:none;border-radius:16px;position:absolute}.category-view .new-activity{align-self:start;grid-area:new-activity}.category-view .new-post{align-self:end;grid-area:new-post}.category-view.new-activity-loading .new-activity.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.category-view.new-activity-loading .new-activity:not(.loading){opacity:0;pointer-events:none}.category-view.new-post-loading .new-post.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.category-view.new-post-loading .new-post:not(.loading){opacity:0;pointer-events:none}.category-view .rank{grid-area:rank}.category-view.rank-loading .rank.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.category-view.rank-loading .rank:not(.loading){opacity:0;pointer-events:none}@media screen and (max-width:1300px){.category-view{grid-template:"new-activity" 1fr "new-post" 1fr "rank" auto/1fr}.category-view .rank{display:none;justify-self:center}}`,"simple-home-normal-category-style");return{export:Object.assign({template:e},{components:{SlideshowCards:()=>i.importAsync("slideshow-cards.vue"),RankList:()=>i.importAsync("rank-list.vue")},store:store,props:{rid:{type:Number,required:true}},data(){return{newActivity:{error:false,loading:true,videos:[]},newPost:{error:false,loading:true,videos:[]},rank:{error:false,loading:true,videos:[]},loaded:false}},computed:{...Vuex.mapState(["watchlaterList"])},methods:{async loadCards(t,i,e){if(e===undefined){e=(t=>{const i=getUID();const e=_.get(t,"data.archives",[]);return e.map(t=>{return{id:t.aid,aid:t.aid,coverUrl:t.pic.replace("http:","https:"),title:t.title,upName:t.owner.name,upFaceUrl:t.owner.face.replace("http:","https:"),upID:t.owner.mid,playCount:t.stat.view,danmakuCount:t.stat.danmaku,like:t.stat.like,coins:t.stat.coin,description:t.desc,type:t.tname,watchlater:i?this.watchlaterList.includes(t.aid):null}})})}try{this[t].loading=true;const a=await Ajax.getJson(i);if(a.code!==0){this[t].error=true}this[t].videos=e(a)}catch(i){logError(i);this[t].error=true}finally{this[t].loading=false}},async loadNewActivity(){await this.loadCards("newActivity",`https://api.bilibili.com/x/web-interface/dynamic/region?ps=10&rid=${this.rid}`)},async loadNewPost(){await this.loadCards("newPost",`https://api.bilibili.com/x/web-interface/newlist?ps=10&rid=${this.rid}`)},async loadRank(){await this.loadCards("rank",`https://api.bilibili.com/x/web-interface/ranking/region?rid=${this.rid}&day=3&original=0`,t=>{const i=getUID();const e=t.data;return e.map(t=>{return{id:t.aid,aid:parseInt(t.aid),title:t.title,playCount:t.play,favorites:t.favorites,upID:t.mid,upName:t.author,description:t.description,coverUrl:t.pic.replace("http:","https:"),coins:t.coins,durationText:t.duration,points:t.pts,watchlater:i?this.watchlaterList.includes(parseInt(t.aid)):null}})})},...Vuex.mapActions(["toggleWatchlater"]),updateVideos(){this.loadNewActivity();this.loadNewPost();this.loadRank()}},watch:{rid(t){if(t>0){if(this.loaded){this.updateVideos()}}else{console.warn(`rid=${t}`)}}},mounted(){const t=new IntersectionObserver(()=>{this.updateVideos();this.loaded=true;t.disconnect()});t.observe(this.$el)}})}}})();

View File

@ -1 +1 @@
(()=>{return(i,e)=>{const a=`<div class=video-list><div class=loading v-if=loading><i class="mdi mdi-18px mdi-loading mdi-spin"></i>加载中...</div><div class=cards :class="{'show-rank': showRank}"v-else-if=cards.length><video-card v-for="card of cards":key=card.id :data=card></video-card></div><div class=empty v-else>空空如也哦 = ̄ω ̄=</div></div>`;e.applyStyleFromText(`.minimal-home .video-list .empty,.minimal-home .video-list .loading{height:48px;display:flex;align-items:center;justify-content:center;font-size:11pt;color:#707070}.minimal-home .video-list .empty .mdi,.minimal-home .video-list .loading .mdi{margin-right:8px}body.dark .minimal-home .video-list .empty,body.dark .minimal-home .video-list .loading{color:#eee}.minimal-home .video-list .cards{display:flex;flex-wrap:wrap;align-items:flex-end}.minimal-home .video-list .cards.show-rank .video-card:nth-child(1),.minimal-home .video-list .cards.show-rank .video-card:nth-child(17),.minimal-home .video-list .cards.show-rank .video-card:nth-child(9){margin-top:48px}.minimal-home .video-list .cards.show-rank .video-card:nth-child(1)::before,.minimal-home .video-list .cards.show-rank .video-card:nth-child(17)::before,.minimal-home .video-list .cards.show-rank .video-card:nth-child(9)::before{position:absolute;top:-42px;left:0;font-size:14pt;font-weight:700}.minimal-home .video-list .cards.show-rank .video-card:nth-child(1)::before{content:"今日"}.minimal-home .video-list .cards.show-rank .video-card:nth-child(9)::before{content:"三日"}.minimal-home .video-list .cards.show-rank .video-card:nth-child(17)::before{content:"一周"}`,"video-list-style");return{export:Object.assign({template:a},{components:{VideoCard:()=>e.importAsync("video-card.vue")},props:["showRank"],data(){return{cards:[],loading:true}},methods:{async getRankList(){const{getTrendingVideos:i}=await e.importAsync("trending-videos");const a=async e=>{const a=await i(e);this.cards.push(...a)};await Promise.all([1,3,7].map(a))},async getActivityVideos(){const i=await Ajax.getJsonWithCredentials(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_new?uid=${getUID()}&type_list=8`);if(i.code!==0){throw new Error(i.message)}this.cards=i.data.cards.filter(i=>{return i.desc.orig_dy_id===0}).map(i=>{const e=JSON.parse(i.card);const a=_.get(i,"display.topic_info.topic_details",[]).map(i=>{return{id:i.topic_id,name:i.topic_name}});return{id:i.desc.dynamic_id_str,aid:e.aid,title:e.title,upID:i.desc.user_profile.info.uid,upName:i.desc.user_profile.info.uname,upFaceUrl:i.desc.user_profile.info.face,coverUrl:e.pic,description:e.desc,timestamp:i.timestamp,time:new Date(i.timestamp*1e3),topics:a,dynamic:e.dynamic,like:formatCount(i.desc.like),duration:e.duration,durationText:formatDuration(e.duration,0),playCount:formatCount(e.stat.view),danmakuCount:formatCount(e.stat.danmaku),watchlater:true}})}},async mounted(){try{if(this.showRank){await this.getRankList()}else{await this.getActivityVideos()}}catch(i){Toast.error(i.message,this.showRank?"热门视频":"视频动态",3e3)}finally{this.loading=false}}})}}})();
(()=>{return(i,e)=>{const a=`<div class=video-list><div class=loading v-if=loading><i class="mdi mdi-18px mdi-loading mdi-spin"></i>加载中...</div><div class=cards :class="{'show-rank': showRank}"v-else-if=cards.length><video-card v-for="card of cards":orientation="useVerticalCards ? 'vertical' : 'horizontal'":key=card.id :data=card></video-card></div><div class=empty v-else>空空如也哦 = ̄ω ̄=</div></div>`;e.applyStyleFromText(`.minimal-home .video-list .empty,.minimal-home .video-list .loading{height:48px;display:flex;align-items:center;justify-content:center;font-size:11pt;color:#707070}.minimal-home .video-list .empty .mdi,.minimal-home .video-list .loading .mdi{margin-right:8px}body.dark .minimal-home .video-list .empty,body.dark .minimal-home .video-list .loading{color:#eee}.minimal-home .video-list .cards{display:flex;flex-wrap:wrap;align-items:flex-end}.minimal-home .video-list .cards.show-rank .video-card:nth-child(1),.minimal-home .video-list .cards.show-rank .video-card:nth-child(17),.minimal-home .video-list .cards.show-rank .video-card:nth-child(9){margin-top:48px}.minimal-home .video-list .cards.show-rank .video-card:nth-child(1)::before,.minimal-home .video-list .cards.show-rank .video-card:nth-child(17)::before,.minimal-home .video-list .cards.show-rank .video-card:nth-child(9)::before{position:absolute;top:-42px;left:0;font-size:14pt;font-weight:700}.minimal-home .video-list .cards.show-rank .video-card:nth-child(1)::before{content:"今日"}.minimal-home .video-list .cards.show-rank .video-card:nth-child(9)::before{content:"三日"}.minimal-home .video-list .cards.show-rank .video-card:nth-child(17)::before{content:"一周"}`,"video-list-style");return{export:Object.assign({template:a},{components:{VideoCard:()=>e.importAsync("video-card.vue")},props:["showRank"],data(){return{cards:[],useVerticalCards:false,loading:true}},methods:{async getRankList(){const{getTrendingVideos:i}=await e.importAsync("trending-videos");const a=async e=>{const a=await i(e);this.cards.push(...a)};await Promise.all([1,3,7].map(a))},async getActivityVideos(){const i=await Ajax.getJsonWithCredentials(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_new?uid=${getUID()}&type_list=8`);if(i.code!==0){throw new Error(i.message)}this.cards=i.data.cards.filter(i=>{return i.desc.orig_dy_id===0}).map(i=>{const e=JSON.parse(i.card);const a=_.get(i,"display.topic_info.topic_details",[]).map(i=>{return{id:i.topic_id,name:i.topic_name}});return{id:i.desc.dynamic_id_str,aid:e.aid,title:e.title,upID:i.desc.user_profile.info.uid,upName:i.desc.user_profile.info.uname,upFaceUrl:i.desc.user_profile.info.face,coverUrl:e.pic,description:e.desc,timestamp:i.timestamp,time:new Date(i.timestamp*1e3),topics:a,dynamic:e.dynamic,like:formatCount(i.desc.like),duration:e.duration,durationText:formatDuration(e.duration,0),playCount:formatCount(e.stat.view),danmakuCount:formatCount(e.stat.danmaku),watchlater:true}})}},async mounted(){try{const i=matchMedia("(max-width: 680px)");this.useVerticalCards=i.matches;i.addListener(i=>{this.useVerticalCards=i.matches});if(this.showRank){await this.getRankList()}else{await this.getActivityVideos()}}catch(i){Toast.error(i.message,this.showRank?"热门视频":"视频动态",3e3)}finally{this.loading=false}}})}}})();

View File

@ -218,6 +218,18 @@ export default {
--card-column-count: 1;
}
}
@media screen and (max-width: 680px) {
.minimal-home {
--card-column-count: 2;
--card-width: 210px;
--card-height: 240px;
}
}
@media screen and (max-width: 470px) {
.minimal-home {
--card-column-count: 1;
}
}
@media screen and (min-width: 2000px) {
.minimal-home {
--card-column-count: 3;

View File

@ -4,7 +4,12 @@
<i class="mdi mdi-18px mdi-loading mdi-spin"></i>加载中...
</div>
<div class="cards" :class="{'show-rank': showRank}" v-else-if="cards.length">
<video-card v-for="card of cards" :key="card.id" :data="card"></video-card>
<video-card
v-for="card of cards"
:orientation="useVerticalCards ? 'vertical' : 'horizontal'"
:key="card.id"
:data="card"
></video-card>
</div>
<div class="empty" v-else>空空如也哦 =ω=</div>
</div>
@ -20,6 +25,7 @@ export default {
data() {
return {
cards: [] as VideoCardInfo[],
useVerticalCards: false,
loading: true
}
},
@ -96,6 +102,11 @@ export default {
},
async mounted() {
try {
const media = matchMedia('(max-width: 680px)')
this.useVerticalCards = media.matches
media.addListener(e => {
this.useVerticalCards = e.matches
})
if (this.showRank) {
await this.getRankList()
} else {

View File

@ -246,6 +246,7 @@ export default {
// --card-height: 300px;
.rank {
// --rank-width: 420px;
display: none;
justify-self: center;
}
}

View File

@ -147,12 +147,15 @@ export default {
--card-width: 200px;
--card-height: 250px;
--card-count: 3;
--card-count: 2;
width: calc((var(--card-width) + 16px) * var(--card-count));
padding-bottom: 16px;
scroll-snap-type: x mandatory;
scrollbar-width: none !important;
min-height: calc(var(--card-height) + 16px);
@media screen and (max-width: 900px) {
--card-count: 3;
}
@media screen and (min-width: 1100px) {
--card-count: 3;
}
@ -162,9 +165,6 @@ export default {
@media screen and (min-width: 1550px) {
--card-count: 5;
}
// @media screen and (min-width: 1850px) {
// --card-count: 7;
// }
&::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
@ -182,56 +182,5 @@ export default {
font-size: 16px;
}
}
// .video-feeds,
// .bangumi-feeds {
// display: flex;
// flex-direction: column;
// --card-width: 200px;
// --card-height: 250px;
// --card-count: 1;
// .contents {
// width: calc((var(--card-width) + 16px) * var(--card-count));
// padding-bottom: 16px;
// margin-top: 16px;
// display: flex;
// overflow: auto;
// scroll-snap-type: x mandatory;
// scrollbar-width: none !important;
// &::-webkit-scrollbar {
// width: 0 !important;
// height: 0 !important;
// }
// .card-wrapper {
// padding: 0 8px;
// scroll-snap-align: start;
// flex-shrink: 0;
// }
// }
// }
// .video-feeds {
// grid-area: video;
// @media screen and (min-width: 800px) {
// --card-count: 2;
// }
// @media screen and (min-width: 1180px) {
// --card-count: 3;
// }
// @media screen and (min-width: 1700px) {
// --card-count: 4;
// }
// }
// .bangumi-feeds {
// grid-area: bangumi;
// justify-self: end;
// @media screen and (min-width: 950px) {
// --card-count: 2;
// }
// @media screen and (min-width: 1450px) {
// --card-count: 3;
// }
// @media screen and (min-width: 1900px) {
// --card-count: 4;
// }
// }
}
</style>