Add styles

This commit is contained in:
the1812 2019-12-03 17:08:51 +08:00
parent ef7ff8a97f
commit 480f45b80c
10 changed files with 192 additions and 81 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

@ -147,7 +147,7 @@
"simple-home.vue.min.js": "7D7EF25D3628EEB09810D8A6F14C81483E2450AF2F61A442684552F6638D11E0", "simple-home.vue.min.js": "7D7EF25D3628EEB09810D8A6F14C81483E2450AF2F61A442684552F6638D11E0",
"simple-home-categories.vue.min.js": "5CCB4D5D5EFFCFE2C498487FDF1B168980C3425523F8B4238D501BA3BA79EE3B", "simple-home-categories.vue.min.js": "5CCB4D5D5EFFCFE2C498487FDF1B168980C3425523F8B4238D501BA3BA79EE3B",
"simple-home-feeds.vue.min.js": "EE124BFD22D450DA63E7B9DF8BB612DB5D62089F6CB912ACB87D0DF1BCBB099E", "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.css": "50F0FA046D61ECE5183409CF97C8DBECB4CF64918DF813CD2B39BF9FBD314B42",
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94", "simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
"simplify-home.vue.min.js": "62F246FD5C9172676A077DD1DFB1F5ACE0E018952D13E1AAD89B3EA2FD00F961", "simplify-home.vue.min.js": "62F246FD5C9172676A077DD1DFB1F5ACE0E018952D13E1AAD89B3EA2FD00F961",
@ -155,7 +155,7 @@
"simplify-liveroom.min.js": "EF4E04DC4EE637EADE98FE756C81008EDEDF318352F9AEF7E44CA8C53250F409", "simplify-liveroom.min.js": "EF4E04DC4EE637EADE98FE756C81008EDEDF318352F9AEF7E44CA8C53250F409",
"skip-charge-list.min.css": "D3C988CE131CEBFAC8A60360529C83EC4AE1B9EA122F9A6924F19963E25A4FE9", "skip-charge-list.min.css": "D3C988CE131CEBFAC8A60360529C83EC4AE1B9EA122F9A6924F19963E25A4FE9",
"skip-charge-list.min.js": "D057258F8EE77D949147174585B1A8C640DDB74E0C0B711A50AEAC8D6792F49F", "skip-charge-list.min.js": "D057258F8EE77D949147174585B1A8C640DDB74E0C0B711A50AEAC8D6792F49F",
"slideshow-cards.vue.min.js": "E56382EF5B5B64B2A83048FD7BEE715D73883560EF0091FDAF8F8FFF29E21397", "slideshow-cards.vue.min.js": "5C26BEEB15430D2C069A5A4DC8EF92B69BEDEBBB660F65B8998AE73741D4F31F",
"slip.min.js": "0905C7F3B0BFA6535D48CA9A4D2DDCE0EDD83E66AA3D19AA3C1A6A53ECDD15FE", "slip.min.js": "0905C7F3B0BFA6535D48CA9A4D2DDCE0EDD83E66AA3D19AA3C1A6A53ECDD15FE",
"style.min.css": "27223BD1ABBB5D8E529B13C009B5099F53F75B26AA713E4C660C205C1121495B", "style.min.css": "27223BD1ABBB5D8E529B13C009B5099F53F75B26AA713E4C660C205C1121495B",
"superchat-translate.min.css": "F4874FE716A750AE0D21DA44393F286E5AABFFA949476E2FA06CDBE2748CF095", "superchat-translate.min.css": "F4874FE716A750AE0D21DA44393F286E5AABFFA949476E2FA06CDBE2748CF095",

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -27,12 +27,20 @@
target="_blank" target="_blank"
:href="'https://www.bilibili.com/av' + c.aid" :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> <dpi-img :src="c.coverUrl" :size="{ width: 200, height: 120 }"></dpi-img>
</div> </div>
<div class="rank-number">{{index + 1}}</div> <div class="rank-number">{{index + 1}}</div>
<div class="grow"></div> <div v-if="index === 0 || index > 2" class="title">{{c.title}}</div>
<div 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="up">
<div class="points"> <div class="points">
<Icon icon="fire" type="mdi"></Icon> <Icon icon="fire" type="mdi"></Icon>
@ -51,11 +59,9 @@
<icon type="extended" icon="favorites"></icon> <icon type="extended" icon="favorites"></icon>
<div class="number">{{c.favorites | bigNumber}}</div> <div class="number">{{c.favorites | bigNumber}}</div>
</div> </div>
<!-- <div class="watchlater" v-if="c.watchlater !== null" :title="watchlater ? '已添加' : '稍后再看'"> </div>
<icon v-if="c.watchlater" type="mdi" icon="clock-outline"></icon>
<icon v-else type="mdi" icon="check-cricle"></icon>
</div>-->
</a> </a>
<div class="area-header">排行榜</div>
</div> </div>
<div class="new-activity loading"></div> <div class="new-activity loading"></div>
@ -222,14 +228,23 @@ export default {
<style lang="scss"> <style lang="scss">
.category-view { .category-view {
--loading-from: #d4d4d4;
--loading-to: #ddd;
--rank-width: 420px;
--rank-height: 250px;
display: grid; display: grid;
grid-template: grid-template:
'new-activity rank' 1fr 'new-activity rank' 1fr
'new-post rank' 1fr / 3fr 1fr; 'new-post rank' 1fr / 1fr var(--rank-width);
grid-gap: 24px; grid-gap: 24px;
gap: 24px; gap: 24px;
--loading-from: #d4d4d4; position: relative;
--loading-to: #ddd; @media screen and (max-width: 1400px) {
& {
--rank-width: 290px;
--rank-height: 170px;
}
}
&, &,
& *, & *,
::after, ::after,
@ -258,20 +273,40 @@ export default {
// height: 30vh; // 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 { .rank {
display: grid; display: grid;
width: 290px; width: var(--rank-width);
grid-template: grid-template:
'first first' 170px 'header header' auto
'second third' 85px/1fr 1fr; 'first first' calc(10px + var(--rank-height))
grid-gap: 10px; 'second third' calc(var(--rank-height) / 2 + 10px) / 1fr 1fr;
gap: 10px;
.rank-item { .rank-item {
border-radius: 16px;
grid-column: 1 / 3; grid-column: 1 / 3;
box-shadow: 0 4px 8px 0 #0001; box-shadow: 0 4px 8px 0 #0001;
background-color: #fff;
color: inherit !important; color: inherit !important;
position: relative; position: relative;
body.dark & {
background-color: #282828;
}
.cover { .cover {
position: absolute; position: absolute;
top: 0; top: 0;
@ -301,33 +336,119 @@ export default {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
background-color: #ddd; z-index: 9;
body.dark & { background-color: #8884;
background-color: #333;
}
}
& > :not(.cover):not(.rank-number) {
z-index: 10;
} }
.be-icon { .be-icon {
font-size: 16px; 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, &:first-child,
&:nth-child(2), &:nth-child(2),
&:nth-child(3) { &:nth-child(3) {
border-radius: 16px;
.rank-number { .rank-number {
background-color: var(--theme-color); background-color: var(--theme-color);
color: var(--foreground-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 { &:first-child {
grid-area: first; grid-area: first;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
&::after { margin-bottom: 10px;
.details {
align-self: stretch;
}
.cover::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -336,10 +457,7 @@ export default {
height: 100%; height: 100%;
border-radius: 16px; border-radius: 16px;
background-image: linear-gradient(to top, #000a 0%, transparent 61%); background-image: linear-gradient(to top, #000a 0%, transparent 61%);
z-index: 9; z-index: 0;
}
.grow {
flex: 1 0 0;
} }
.title { .title {
font-weight: bold; font-weight: bold;
@ -347,6 +465,7 @@ export default {
line-height: 1.5; line-height: 1.5;
color: #fff; color: #fff;
padding: 0 8px; padding: 0 8px;
z-index: 10;
} }
.up { .up {
display: flex; display: flex;
@ -357,14 +476,11 @@ export default {
color: #fff; color: #fff;
padding: 0 12px 0 6px; padding: 0 12px 0 6px;
margin: 4px 0 8px 0; margin: 4px 0 8px 0;
z-index: 10;
& > * { & > * {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.mdi-fire {
transform: scale(calc(18 / 16));
margin-right: 2px;
}
.be-iconfont-up { .be-iconfont-up {
margin-right: 4px; margin-right: 4px;
} }
@ -392,6 +508,7 @@ export default {
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
left: 0; left: 0;
z-index: 10;
.be-icon { .be-icon {
margin: 0 2px 0 8px; margin: 0 2px 0 8px;
&:first-child { &:first-child {
@ -410,12 +527,22 @@ export default {
} }
&:nth-child(2) { &:nth-child(2) {
grid-area: second; grid-area: second;
margin-right: 5px;
margin-bottom: 10px;
} }
&:nth-child(3) { &:nth-child(3) {
grid-area: third; 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') { @each $name in ('new-activity', 'new-post', 'rank') {
.#{$name} { .#{$name} {
grid-area: unquote($name); grid-area: unquote($name);
@ -425,6 +552,8 @@ export default {
position: static; position: static;
opacity: 1; opacity: 1;
pointer-events: initial; pointer-events: initial;
width: 100%;
height: 100%;
} }
.#{$name}:not(.loading) { .#{$name}:not(.loading) {
opacity: 0; opacity: 0;

View File

@ -189,27 +189,9 @@ export default {
--card-height: 300px; --card-height: 300px;
--card-width: 500px; --card-width: 500px;
grid-template: grid-template:
'header header header' auto 'header header header header' auto
'cards operations info' var(--card-height) / var(--card-width) 1fr calc(1.2 * 'cards . operations info' var(--card-height) / var(--card-width) 40px 1fr calc(1.2 *
var(--card-width)); 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 { .error {
grid-column: 1 / 4; grid-column: 1 / 4;
grid-row: 2 / 3; grid-row: 2 / 3;
@ -393,7 +375,7 @@ export default {
& { & {
--card-height: 200px; --card-height: 200px;
--card-width: 330px; --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 { .info {
.title { .title {