Add pendant, update dark style

This commit is contained in:
the1812 2019-04-17 14:11:37 +08:00
parent 59eea61a89
commit 03a71970f0
7 changed files with 74 additions and 22 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

@ -126,6 +126,10 @@
/* transform-origin: top; */
/* transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15) .2s; */
}
.custom-navbar.dark .popup
{
box-shadow: rgba(0,0,0,0.3) 0 4px 40px 20px;
}
.custom-navbar .popup.no-padding
{
padding: 0;
@ -251,17 +255,39 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
color: var(--navbar-foreground) !important;
opacity: 0.9;
}
.user-face-container
{
position: relative;
height: calc(var(--navbar-height) - 16px);
width: calc(var(--navbar-height) - 16px);
}
.user-face,
.user-pendant
{
position: absolute;
width: 100%;
height: 100%;
}
.user-face
{
background-color: var(--navbar-background);
background-size: contain;
border-radius: 50%;
height: calc(var(--navbar-height) - 16px);
width: calc(var(--navbar-height) - 16px);
}
.user-pendant
{
background-color: transparent;
background-size: cover;
width: 170%;
height: 170%;
top: -12px;
left: -12px;
opacity: 0;
}
.user-info-panel
{
width: 200px;
width: 240px;
font-size: 12px;
}
.user-info-panel>*
{
@ -282,25 +308,29 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
.user-info-panel .name
{
font-size: 14pt;
margin-top: 40px;
}
.user-info-panel .type
{
padding: 4px;
background: var(--theme-color);
color: var(--foreground-color);
margin-bottom: 8px;
}
.user-info-panel .coins,
.user-info-panel .b-coins,
.user-info-panel .coins-container,
.user-info-panel .verifications
{
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 33.33%;
flex: 1 0 50%;
}
.user-info-panel .coins-container,
.user-info-panel .verifications
{
justify-content: space-around;
justify-content: space-evenly;
}
.user-info-panel .verifications i
{
@ -355,12 +385,16 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
transform-origin: left;
background-color: var(--theme-color);
}
.user-info-panel .row.operations
{
transform: translateX(5%);
}
.user-info-panel .operations a
{
flex: 1 0 50%;
display: flex;
justify-content: center;
justify-content: start;
align-items: center;
flex: 1 0 50%;
}
.user-info-panel .operations a:hover,
.user-info-panel .operations a:hover i
@ -371,4 +405,11 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
{
font-size: 16px;
margin-right: 4px;
}
.custom-navbar li:hover .user-face,
.custom-navbar li:hover .user-pendant
{
transform: scale(2) translateY(10px);
z-index: 100;
opacity: 1;
}

View File

@ -198,28 +198,33 @@ class UserInfo extends NavbarComponent
{
super();
this.html = /*html*/`
<div class="user-face"></div>
<div class="user-face-container">
<div class="user-face"></div>
<div class="user-pendant"></div>
</div>
`;
this.popupHtml = /*html*/`
<div class="user-info-panel">
<div v-if="isLogin" class="logged-in">
<span class="name">{{uname}}</span>
<span class="type">{{userType}}</span>
<div class="row">
<span class="level">LV<strong>{{level_info.current_level}}</strong></span>
<span class="type">{{userType}}</span>
<div class="level-progress">
<div class="level-progress-thumb" v-bind:style="levelProgressStyle"></div>
</div>
<span class="level-progress-label">{{level_info.current_exp}} / {{level_info.next_exp}}</span>
</div>
<div class="row">
<span class="coins">{{money}}</span>
<span class="b-coins">{{wallet.bcoin_balance}}</span>
<div class="coins-container">
<span class="coins">{{money}}</span>
<span class="b-coins">{{wallet.bcoin_balance}}</span>
</div>
<div class="verifications">
<a target="_blank" href="https://passport.bilibili.com/account/security#/bindmail">
<a target="_blank" title="邮箱验证" href="https://passport.bilibili.com/account/security#/bindmail">
<i class="mdi mdi-email" v-bind:class="{verified: email_verified }"></i>
</a>
<a target="_blank" href="https://passport.bilibili.com/account/security#/bindphone">
<a target="_blank" title="手机验证" href="https://passport.bilibili.com/account/security#/bindphone">
<i class="mdi mdi-cellphone-android" v-bind:class="{verified: mobile_verified }"></i>
</a>
</div>
@ -263,6 +268,7 @@ class UserInfo extends NavbarComponent
{
const panel = await SpinQuery.select(".user-info-panel");
const face = await SpinQuery.select(".user-face");
const pendant = await SpinQuery.select(".user-pendant");
const json = await Ajax.getJsonWithCredentials("https://api.bilibili.com/x/web-interface/nav");
// if (json.code !== 0 || json.code !== -101)
// {
@ -271,6 +277,10 @@ class UserInfo extends NavbarComponent
// }
const userInfo = json.data;
face.style.backgroundImage = `url('${userInfo.face}')`;
if (userInfo.pendant.image)
{
pendant.style.backgroundImage = `url('${userInfo.pendant.image}')`;
}
new Vue({
el: panel,
data: {

View File

@ -75,7 +75,8 @@ div#square.container,
.play-options .play-options-more .play-options-content .play-option,
.play-options .share-box,
.gui-settings-flat-button .popup,
.h5share-container .image-area .share-img
.h5share-container .image-area .share-img,
.notice-panel .img-container .notice-img
{
background-color: #222 !important;
}