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-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",

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,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;

View File

@ -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 {