mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add styles
This commit is contained in:
parent
ef7ff8a97f
commit
480f45b80c
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
@ -147,7 +147,7 @@
|
||||
"simple-home.vue.min.js": "7D7EF25D3628EEB09810D8A6F14C81483E2450AF2F61A442684552F6638D11E0",
|
||||
"simple-home-categories.vue.min.js": "5CCB4D5D5EFFCFE2C498487FDF1B168980C3425523F8B4238D501BA3BA79EE3B",
|
||||
"simple-home-feeds.vue.min.js": "EE124BFD22D450DA63E7B9DF8BB612DB5D62089F6CB912ACB87D0DF1BCBB099E",
|
||||
"simple-home-normal-category.vue.min.js": "656BF1B07EB40166938FE6E0BB561BEFCA4E27AE06B8FFB2CCDE2107C741B533",
|
||||
"simple-home-normal-category.vue.min.js": "C2035DB3E81EDD1202E5BB3F3FD9F32CEE2776B52662F25183E150366EBC8425",
|
||||
"simplify-home.min.css": "50F0FA046D61ECE5183409CF97C8DBECB4CF64918DF813CD2B39BF9FBD314B42",
|
||||
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
|
||||
"simplify-home.vue.min.js": "62F246FD5C9172676A077DD1DFB1F5ACE0E018952D13E1AAD89B3EA2FD00F961",
|
||||
@ -155,7 +155,7 @@
|
||||
"simplify-liveroom.min.js": "EF4E04DC4EE637EADE98FE756C81008EDEDF318352F9AEF7E44CA8C53250F409",
|
||||
"skip-charge-list.min.css": "D3C988CE131CEBFAC8A60360529C83EC4AE1B9EA122F9A6924F19963E25A4FE9",
|
||||
"skip-charge-list.min.js": "D057258F8EE77D949147174585B1A8C640DDB74E0C0B711A50AEAC8D6792F49F",
|
||||
"slideshow-cards.vue.min.js": "E56382EF5B5B64B2A83048FD7BEE715D73883560EF0091FDAF8F8FFF29E21397",
|
||||
"slideshow-cards.vue.min.js": "5C26BEEB15430D2C069A5A4DC8EF92B69BEDEBBB660F65B8998AE73741D4F31F",
|
||||
"slip.min.js": "0905C7F3B0BFA6535D48CA9A4D2DDCE0EDD83E66AA3D19AA3C1A6A53ECDD15FE",
|
||||
"style.min.css": "27223BD1ABBB5D8E529B13C009B5099F53F75B26AA713E4C660C205C1121495B",
|
||||
"superchat-translate.min.css": "F4874FE716A750AE0D21DA44393F286E5AABFFA949476E2FA06CDBE2748CF095",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
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
@ -27,35 +27,41 @@
|
||||
target="_blank"
|
||||
:href="'https://www.bilibili.com/av' + c.aid"
|
||||
>
|
||||
<div class="cover">
|
||||
<div v-if="index < 3" class="cover">
|
||||
<dpi-img :src="c.coverUrl" :size="{ width: 200, height: 120 }"></dpi-img>
|
||||
</div>
|
||||
<div class="rank-number">{{index + 1}}</div>
|
||||
<div class="grow"></div>
|
||||
<div class="title">{{c.title}}</div>
|
||||
<div class="up">
|
||||
<div class="points">
|
||||
<Icon icon="fire" type="mdi"></Icon>
|
||||
{{c.points | bigNumber}}
|
||||
</div>
|
||||
<div class="up-info">
|
||||
<Icon icon="up" type="extended"></Icon>
|
||||
<div class="up-name">{{c.upName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<icon type="extended" icon="play"></icon>
|
||||
<div class="number">{{c.playCount | bigNumber}}</div>
|
||||
<icon type="extended" icon="coin"></icon>
|
||||
<div class="number">{{c.coins | bigNumber}}</div>
|
||||
<icon type="extended" icon="favorites"></icon>
|
||||
<div class="number">{{c.favorites | bigNumber}}</div>
|
||||
</div>
|
||||
<div v-if="index === 0 || index > 2" class="title">{{c.title}}</div>
|
||||
<!-- <div class="watchlater" v-if="c.watchlater !== null" :title="watchlater ? '已添加' : '稍后再看'">
|
||||
<icon v-if="c.watchlater" type="mdi" icon="clock-outline"></icon>
|
||||
<icon v-else type="mdi" icon="check-cricle"></icon>
|
||||
</div>-->
|
||||
<div class="details">
|
||||
<div v-if="index > 0" class="title">{{c.title}}</div>
|
||||
<div v-if="index > 0" class="cover">
|
||||
<dpi-img :src="c.coverUrl" :size="{ width: 200, height: 120 }"></dpi-img>
|
||||
</div>
|
||||
<div class="up">
|
||||
<div class="points">
|
||||
<Icon icon="fire" type="mdi"></Icon>
|
||||
{{c.points | bigNumber}}
|
||||
</div>
|
||||
<div class="up-info">
|
||||
<Icon icon="up" type="extended"></Icon>
|
||||
<div class="up-name">{{c.upName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<icon type="extended" icon="play"></icon>
|
||||
<div class="number">{{c.playCount | bigNumber}}</div>
|
||||
<icon type="extended" icon="coin"></icon>
|
||||
<div class="number">{{c.coins | bigNumber}}</div>
|
||||
<icon type="extended" icon="favorites"></icon>
|
||||
<div class="number">{{c.favorites | bigNumber}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="area-header">排行榜</div>
|
||||
</div>
|
||||
|
||||
<div class="new-activity loading"></div>
|
||||
@ -222,14 +228,23 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.category-view {
|
||||
--loading-from: #d4d4d4;
|
||||
--loading-to: #ddd;
|
||||
--rank-width: 420px;
|
||||
--rank-height: 250px;
|
||||
display: grid;
|
||||
grid-template:
|
||||
'new-activity rank' 1fr
|
||||
'new-post rank' 1fr / 3fr 1fr;
|
||||
'new-post rank' 1fr / 1fr var(--rank-width);
|
||||
grid-gap: 24px;
|
||||
gap: 24px;
|
||||
--loading-from: #d4d4d4;
|
||||
--loading-to: #ddd;
|
||||
position: relative;
|
||||
@media screen and (max-width: 1400px) {
|
||||
& {
|
||||
--rank-width: 290px;
|
||||
--rank-height: 170px;
|
||||
}
|
||||
}
|
||||
&,
|
||||
& *,
|
||||
::after,
|
||||
@ -258,20 +273,40 @@ export default {
|
||||
// height: 30vh;
|
||||
// }
|
||||
}
|
||||
.area-header {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-weight: bold;
|
||||
font-size: 11pt;
|
||||
margin-bottom: 12px;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-flex;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.rank {
|
||||
display: grid;
|
||||
width: 290px;
|
||||
width: var(--rank-width);
|
||||
grid-template:
|
||||
'first first' 170px
|
||||
'second third' 85px/1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
gap: 10px;
|
||||
'header header' auto
|
||||
'first first' calc(10px + var(--rank-height))
|
||||
'second third' calc(var(--rank-height) / 2 + 10px) / 1fr 1fr;
|
||||
.rank-item {
|
||||
border-radius: 16px;
|
||||
grid-column: 1 / 3;
|
||||
box-shadow: 0 4px 8px 0 #0001;
|
||||
background-color: #fff;
|
||||
color: inherit !important;
|
||||
position: relative;
|
||||
body.dark & {
|
||||
background-color: #282828;
|
||||
}
|
||||
.cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -301,33 +336,119 @@ export default {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
background-color: #ddd;
|
||||
body.dark & {
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
& > :not(.cover):not(.rank-number) {
|
||||
z-index: 10;
|
||||
z-index: 9;
|
||||
background-color: #8884;
|
||||
}
|
||||
.be-icon {
|
||||
font-size: 16px;
|
||||
&.mdi-fire {
|
||||
transform: scale(calc(18 / 16));
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
& > .title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 34px;
|
||||
padding: 0 8px 0 34px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--theme-color-30);
|
||||
& > .title {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.details {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc(100% + 10px);
|
||||
transform: translateY(-50%);
|
||||
width: var(--rank-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
.cover {
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
img {
|
||||
filter: blur(16px) brightness(0.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
.up,
|
||||
.stats {
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
.be-icon:not(.mdi-fire) {
|
||||
margin: 0 4px 0 8px;
|
||||
}
|
||||
}
|
||||
.up {
|
||||
justify-content: space-between;
|
||||
margin: 0 10px 0 6px;
|
||||
& > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.stats {
|
||||
margin: 8px;
|
||||
.be-icon:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .details {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child,
|
||||
&:nth-child(2),
|
||||
&:nth-child(3) {
|
||||
border-radius: 16px;
|
||||
.rank-number {
|
||||
background-color: var(--theme-color);
|
||||
color: var(--foreground-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
&:nth-last-child(2) {
|
||||
border-radius: 0 0 16px 16px;
|
||||
}
|
||||
&:first-child {
|
||||
grid-area: first;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
&::after {
|
||||
margin-bottom: 10px;
|
||||
.details {
|
||||
align-self: stretch;
|
||||
}
|
||||
.cover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -336,10 +457,7 @@ export default {
|
||||
height: 100%;
|
||||
border-radius: 16px;
|
||||
background-image: linear-gradient(to top, #000a 0%, transparent 61%);
|
||||
z-index: 9;
|
||||
}
|
||||
.grow {
|
||||
flex: 1 0 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
@ -347,6 +465,7 @@ export default {
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
padding: 0 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
.up {
|
||||
display: flex;
|
||||
@ -357,14 +476,11 @@ export default {
|
||||
color: #fff;
|
||||
padding: 0 12px 0 6px;
|
||||
margin: 4px 0 8px 0;
|
||||
z-index: 10;
|
||||
& > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.mdi-fire {
|
||||
transform: scale(calc(18 / 16));
|
||||
margin-right: 2px;
|
||||
}
|
||||
.be-iconfont-up {
|
||||
margin-right: 4px;
|
||||
}
|
||||
@ -392,6 +508,7 @@ export default {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
.be-icon {
|
||||
margin: 0 2px 0 8px;
|
||||
&:first-child {
|
||||
@ -410,12 +527,22 @@ export default {
|
||||
}
|
||||
&:nth-child(2) {
|
||||
grid-area: second;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
grid-area: third;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.new-activity {
|
||||
align-self: start;
|
||||
}
|
||||
.new-post {
|
||||
align-self: end;
|
||||
}
|
||||
@each $name in ('new-activity', 'new-post', 'rank') {
|
||||
.#{$name} {
|
||||
grid-area: unquote($name);
|
||||
@ -425,6 +552,8 @@ export default {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.#{$name}:not(.loading) {
|
||||
opacity: 0;
|
||||
|
||||
@ -189,27 +189,9 @@ export default {
|
||||
--card-height: 300px;
|
||||
--card-width: 500px;
|
||||
grid-template:
|
||||
'header header header' auto
|
||||
'cards operations info' var(--card-height) / var(--card-width) 1fr calc(1.2 *
|
||||
'header header header header' auto
|
||||
'cards . operations info' var(--card-height) / var(--card-width) 40px 1fr calc(1.2 *
|
||||
var(--card-width));
|
||||
.area-header {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-weight: bold;
|
||||
font-size: 11pt;
|
||||
margin-bottom: 12px;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-flex;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.error {
|
||||
grid-column: 1 / 4;
|
||||
grid-row: 2 / 3;
|
||||
@ -393,7 +375,7 @@ export default {
|
||||
& {
|
||||
--card-height: 200px;
|
||||
--card-width: 330px;
|
||||
grid-template-columns: var(--card-width) 1fr calc(1.4 * var(--card-width));
|
||||
grid-template-columns: var(--card-width) 40px 1fr calc(1.4 * var(--card-width));
|
||||
}
|
||||
.info {
|
||||
.title {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user