mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Change layout of ranklist
This commit is contained in:
parent
384a7e0e96
commit
b314ff30a7
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
@ -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",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/simple-home-feeds.vue.min.js
vendored
2
min/simple-home-feeds.vue.min.js
vendored
@ -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}}})}}})();
|
||||
2
min/simple-home-normal-category.vue.min.js
vendored
2
min/simple-home-normal-category.vue.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/slideshow-cards.vue.min.js
vendored
2
min/slideshow-cards.vue.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/trending-videos.vue.min.js
vendored
2
min/trending-videos.vue.min.js
vendored
@ -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)}})}}})();
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user