Change layout of ranklist

This commit is contained in:
the1812 2020-01-05 17:29:17 +08:00
parent 384a7e0e96
commit b314ff30a7
14 changed files with 68 additions and 66 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

@ -149,8 +149,8 @@
"show-dead-video-title.min.js": "8D591930421EBA43A1BDF50DC8B645C1BD1A17E109FB1CFBCD6B78E6C74E1D68",
"simple-home.vue.min.js": "BB936D1E635E21B72A81F448F86AE2E6773ADABC204BFE4BF78A02BB604E16C0",
"simple-home-categories.vue.min.js": "577A1364C279FE87AB9F647264F18A42D33772B9F3C92FB7624D1E1926EAF6C1",
"simple-home-feeds.vue.min.js": "665E038C3BE0A5D597DEDA163F96C1A1462AEA85E24EE405D33A05FF4C0A04D3",
"simple-home-normal-category.vue.min.js": "5F01DA34A137FE1E7494719925DD1F476EFA6B60FB63CD7EF37637B61A5B2BA8",
"simple-home-feeds.vue.min.js": "A3E9FA6B6DA8C4D71B609761991DB28C874B81D57B3D88E6E8B29165CCB889AD",
"simple-home-normal-category.vue.min.js": "EEC13AF9CFE43F3E1A7370C5D91655F2BA072BFD9A6A806562F655A4BE84A2CF",
"simplify-home.min.css": "50F0FA046D61ECE5183409CF97C8DBECB4CF64918DF813CD2B39BF9FBD314B42",
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
"simplify-home.vue.min.js": "62F246FD5C9172676A077DD1DFB1F5ACE0E018952D13E1AAD89B3EA2FD00F961",
@ -158,7 +158,7 @@
"simplify-liveroom.min.js": "EF4E04DC4EE637EADE98FE756C81008EDEDF318352F9AEF7E44CA8C53250F409",
"skip-charge-list.min.css": "D3C988CE131CEBFAC8A60360529C83EC4AE1B9EA122F9A6924F19963E25A4FE9",
"skip-charge-list.min.js": "D057258F8EE77D949147174585B1A8C640DDB74E0C0B711A50AEAC8D6792F49F",
"slideshow-cards.vue.min.js": "8F60BDB8B5573FD402D8F30F60EDA754D7D61D181B27A6BCF5877B90C9C19580",
"slideshow-cards.vue.min.js": "4C7122C26BDCDCE30F0C8A1239561EBA273E99AA3A7B6AAE2DDC1D78FADE9D7D",
"slip.min.js": "320D17408D0509AA0E098D0A78BF87CD264518C04255CFE6AEBA796F9F68F8C3",
"style.min.css": "27223BD1ABBB5D8E529B13C009B5099F53F75B26AA713E4C660C205C1121495B",
"superchat-translate.min.css": "F4874FE716A750AE0D21DA44393F286E5AABFFA949476E2FA06CDBE2748CF095",
@ -173,7 +173,7 @@
"touch-player.min.css": "4E729A1477B488BB0449EEE5AB9BADF9EED3DF1AF8EE8207CB04A8D1D9842E4C",
"touch-player.min.js": "0307516FD221386DA37F9C48223BA0E242BF52EF48F46D18A033042351968E94",
"trending-videos.min.js": "1ED73F10D5A7C409CCBF91A97FBB0DE2AA16426F2216DF75F904E8A6389A46E9",
"trending-videos.vue.min.js": "B58FA3AE73BA8CCB7AE3256A6AEAE6A71D25D3D0B58370067CD1D79A329FA8AE",
"trending-videos.vue.min.js": "D3794273DCD2CCC2F58DE78AEA6DE28E3E5B604E7DF486D32EBC27042E02E886",
"tweets.min.css": "9015C1F165C91B9205ABBE4E8A3B5FA83DB1EB4B5CF2442846AF61E44FF178A8",
"url-params-clean.min.js": "E7AF082E6413087279654A43FA78A1855B359817256685417DF0B06C0A1789E3",
"v-checkbox.vue.min.js": "A23C35D5627009A29FD396A024442A19E37DEE70674BF3CE0FA377D781ED2231",

Binary file not shown.

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></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:var(--card-height)}@media screen and (min-width:1100px){.simple-home .feeds .contents{--card-count:4}}@media screen and (min-width:1300px){.simple-home .feeds .contents{--card-count:5}}@media screen and (min-width:1550px){.simple-home .feeds .contents{--card-count:6}}@media screen and (min-width:1850px){.simple-home .feeds .contents{--card-count:7}}.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-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></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:var(--card-height)}@media screen and (min-width:1100px){.simple-home .feeds .contents{--card-count:4}}@media screen and (min-width:1300px){.simple-home .feeds .contents{--card-count:5}}@media screen and (min-width:1550px){.simple-home .feeds .contents{--card-count:6}}.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-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}}})}}})();

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
(()=>{return(a,n)=>{const t=`<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=changeTab(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>`;n.applyStyleFromText(`.simple-home .trendings{display:flex;flex-direction:column}.simple-home .trendings .header{padding:0 8px}.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: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:1}}@media screen and (min-width:1550px){.simple-home .trendings .contents{--card-count:4}}@media screen and (min-width:1850px){.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 e=[{name:"今日",day:1,url:"https://www.bilibili.com/ranking/all/0/0/1"},{name:"三日",day:3,url:"https://www.bilibili.com/ranking"},{name:"一周",day:7,url:"https://www.bilibili.com/ranking/all/0/0/7"}];return{export:Object.assign({template:t},{components:{VideoCard:()=>n.importAsync("video-card.vue")},data(){return{tabs:e,currentTab:e[0],trendingCards:[]}},watch:{currentTab(a){this.updateTrendingTab(a)}},methods:{async updateTrendingTab(a){const{getTrendingVideos:t}=await n.importAsync("trending-videos");this.trendingCards=await t(a.day)},changeTab(a){if(this.currentTab===a){open(a.url,"_blank")}else{this.currentTab=a}}},mounted(){this.updateTrendingTab(this.currentTab)}})}}})();
(()=>{return(a,t)=>{const n=`<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=changeTab(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{padding:0 8px}.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: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:1}}@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");const i=[{name:"今日",day:1,url:"https://www.bilibili.com/ranking/all/0/0/1"},{name:"三日",day:3,url:"https://www.bilibili.com/ranking"},{name:"一周",day:7,url:"https://www.bilibili.com/ranking/all/0/0/7"}];return{export:Object.assign({template:n},{components:{VideoCard:()=>t.importAsync("video-card.vue")},data(){return{tabs:i,currentTab:i[0],trendingCards:[]}},watch:{currentTab(a){this.updateTrendingTab(a)}},methods:{async updateTrendingTab(a){const{getTrendingVideos:n}=await t.importAsync("trending-videos");this.trendingCards=await n(a.day)},changeTab(a){if(this.currentTab===a){open(a.url,"_blank")}else{this.currentTab=a}}},mounted(){this.updateTrendingTab(this.currentTab)}})}}})();

View File

@ -124,7 +124,7 @@ export default {
}
},
computed: {
...Vuex.mapState(['watchlaterList']),
...Vuex.mapState(['watchlaterList'])
},
methods: {
async loadCards(
@ -224,7 +224,7 @@ export default {
this.loadNewActivity()
this.loadNewPost()
this.loadRank()
},
}
},
watch: {
rid(value: number) {
@ -253,32 +253,26 @@ export default {
.category-view {
--loading-from: #d4d4d4;
--loading-to: #ddd;
--rank-width: 420px;
--rank-height: 250px;
--slideshow-ratio: 1.2;
--rank-width: 370px;
--rank-height: calc(var(--rank-width) / 16 * 9);
--slideshow-ratio: 0.6;
--card-height: 300px;
--card-width: calc(var(--card-height) * (42 / 25));
display: grid;
grid-template:
'new-activity rank' 1fr
'new-post rank' 1fr / 1fr var(--rank-width);
grid-gap: 24px;
gap: 24px;
'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;
@for $width from 18 through 7 {
@media screen and (max-width: #{$width * 100}px) {
$rank-width: 0;
@if $width > 11 {
$rank-width: 420 - (19 - $width) * 30;
--slideshow-ratio: #{1.2 * ($width / 18)};
} @else {
$rank-width: 420 - (17 - $width) * 30;
--slideshow-ratio: #{1.2 * (($width + 2) / 18)};
}
--rank-width: #{$rank-width}px;
--rank-height: #{$rank-width * 25 / 42}px;
--card-height: #{300 - 12 * (19 - $width)}px;
--rank-width: #{370 - 20 * (19 - $width)}px;
}
}
--card-height: calc((8 * 34px + 20px + 1.5 * var(--rank-height)) / 2 - 32px);
--card-width: calc(var(--card-height) * (42 / 25));
&,
& *,
::after,
@ -327,14 +321,20 @@ export default {
}
.rank {
display: grid;
width: var(--rank-width);
width: calc(1.5 * var(--rank-width) + 10px);
justify-self: right;
// grid-template:
// 'header header' auto
// 'first first' calc(10px + var(--rank-height))
// 'second third' calc(var(--rank-height) / 2 + 10px) / calc(
// var(--rank-width) / 2
// )
// calc(var(--rank-width) / 2);
grid-template:
'header header' auto
'first first' calc(10px + var(--rank-height))
'second third' calc(var(--rank-height) / 2 + 10px) / calc(
var(--rank-width) / 2
) calc(var(--rank-width) / 2);
'first second' calc(var(--rank-height) / 2 + 10px)
'first third' calc(var(--rank-height) / 2 + 10px)
/ calc(var(--rank-width)) calc(10px + var(--rank-width) / 2);
.rank-item {
grid-column: 1 / 3;
box-shadow: 0 4px 8px 0 #0001;
@ -586,13 +586,15 @@ export default {
}
&:nth-child(2) {
grid-area: second;
margin-right: 5px;
// margin-right: 5px;
margin-bottom: 10px;
margin-left: 10px;
}
&:nth-child(3) {
grid-area: third;
margin-left: 5px;
// margin-left: 5px;
margin-bottom: 10px;
margin-left: 10px;
}
}
}
@ -620,14 +622,15 @@ export default {
}
}
}
@media screen and (max-width: 1100px) {
@media screen and (max-width: 1300px) {
grid-template:
'new-activity' 1fr
'new-post' 1fr
'rank' auto / 1fr;
--card-height: 300px;
.rank {
--rank-width: 420px;
--rank-height: 250px;
justify-self: center;
}
}
}

View File

@ -161,9 +161,9 @@ export default {
@media screen and (min-width: 1550px) {
--card-count: 6;
}
@media screen and (min-width: 1850px) {
--card-count: 7;
}
// @media screen and (min-width: 1850px) {
// --card-count: 7;
// }
&::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;

View File

@ -181,9 +181,7 @@ export default {
// --card-width: 500px;
grid-template:
'header header header header' auto
'cards . operations info' var(--card-height) / var(--card-width) 44px 1fr calc(var(
--slideshow-ratio
) * var(--card-width));
'cards . operations info' var(--card-height) / var(--card-width) 48px auto calc(var(--card-width) * var(--slideshow-ratio));
.error {
grid-column: 1 / 4;
grid-row: 2 / 3;
@ -198,6 +196,7 @@ export default {
justify-self: start;
& > * {
@include round-button();
margin-right: 16px;
.be-icon {
font-size: 22px;
}

View File

@ -114,11 +114,11 @@ export default {
--card-count: 4;
}
}
@media screen and (min-width: 1850px) {
& {
--card-count: 5;
}
}
// @media screen and (min-width: 1850px) {
// & {
// --card-count: 5;
// }
// }
&::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;