Add messages and tweets

This commit is contained in:
the1812 2019-04-07 15:59:16 +08:00
parent a9076b2875
commit 997ea2d179
8 changed files with 28 additions and 12 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
@font-face{font-family:custom-navbar-font;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format('truetype')}.custom-navbar-iconfont{color:inherit;font-family:custom-navbar-font!important;font-size:24px;font-style:normal}.custom-navbar-icon-logo::before{content:"\\E725"}.custom-navbar{--navbar-height:50px;position:absolute;top:0;left:0;height:var(--navbar-height);width:100vw;background:#fff;color:#000;z-index:10001}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar .popup,.custom-navbar.dark:not(.fill){color:#eee;background:#222}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{background-color:var(--theme-color);color:#fffd}.custom-navbar.fill.shadow{box-shadow:var(--theme-color-30) 0 2px 10px 1px}.custom-navbar>ul{display:flex;align-items:center;justify-content:space-between;margin:0 5%;height:100%}.custom-navbar>ul>li{position:relative;height:100%;display:flex;align-items:center}.custom-navbar>ul>li:not(.disabled){cursor:pointer}.custom-navbar>ul>li:not(.disabled):hover{background:rgba(0,0,0,.1)}#custom-navbar-home-popup .category-item .popup a:hover{border-bottom:2px solid var(--theme-color)}.custom-navbar .main-content{font-size:10pt;height:100%;display:flex;align-items:center;padding:0 16px}.custom-navbar .popup{position:absolute;top:100%;left:50%;transform:translateX(-50%) scale(0);padding:16px;box-shadow:#0002 0 4px 8px 8px;pointer-events:none;opacity:0;transform-origin:top;transition:.15s cubic-bezier(.18,.89,.38,1.15)}#custom-navbar-home-popup .category-item:hover .popup,.custom-navbar>ul>li:not(.disabled):hover>.popup{transform:translateX(-50%) scale(1);pointer-events:initial;opacity:1}.custom-navbar a{color:inherit}#custom-navbar-home-popup{max-height:50vh;display:flex;flex-direction:column;flex-wrap:wrap;width:300px}#custom-navbar-home-popup .category-item{font-size:12pt;padding:8px 16px;cursor:pointer;position:relative}#custom-navbar-home-popup .category-item:hover{background-color:#0001}#custom-navbar-home-popup .category-item a{display:flex;justify-content:space-between}#custom-navbar-home-popup .category-item .popup{z-index:10002;width:max-content}#custom-navbar-home-popup .category-item .popup a{padding:8px 16px;display:flex;justify-content:center;border-bottom:2px solid transparent}#custom-navbar-home-popup .category-item span{opacity:.5}
@font-face{font-family:custom-navbar-font;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format('truetype')}.custom-navbar-iconfont{color:inherit;font-family:custom-navbar-font!important;font-size:24px;font-style:normal}.custom-navbar-icon-logo::before{content:"\\E725"}.custom-navbar{--navbar-height:50px;position:absolute;top:0;left:0;height:var(--navbar-height);width:100vw;background:#fff;color:#000;z-index:10001}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar .popup,.custom-navbar.dark:not(.fill){color:#eee;background:#222}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{background-color:var(--theme-color);color:#fffd}.custom-navbar.fill.shadow{box-shadow:var(--theme-color-30) 0 2px 10px 1px}.custom-navbar>ul{display:flex;align-items:center;justify-content:space-between;margin:0 5%;height:100%}.custom-navbar>ul>li{position:relative;height:100%;display:flex;align-items:center}.custom-navbar>ul>li:not(.disabled){cursor:pointer}.custom-navbar>ul>li:not(.disabled):hover{background:rgba(0,0,0,.1)}#custom-navbar-home-popup .category-item .popup a:hover{border-bottom:2px solid var(--theme-color)}.custom-navbar .main-content{font-size:10pt;height:100%;display:flex;align-items:center;padding:0 16px}.custom-navbar .popup{position:absolute;top:100%;left:50%;transform:translateX(-50%) scale(0);padding:16px;box-shadow:#0002 0 4px 8px 8px;pointer-events:none;opacity:0;transform-origin:top;transition:.15s cubic-bezier(.18,.89,.38,1.15)}.custom-navbar .popup.no-padding{padding:0}#custom-navbar-home-popup .category-item:hover .popup,.custom-navbar>ul>li:not(.disabled):hover>.popup{transform:translateX(-50%) scale(1);pointer-events:initial;opacity:1}.custom-navbar a{color:inherit}#custom-navbar-home-popup{max-height:50vh;display:flex;flex-direction:column;flex-wrap:wrap;width:300px}#custom-navbar-home-popup .category-item{font-size:12pt;padding:8px 16px;cursor:pointer;position:relative}#custom-navbar-home-popup .category-item:hover{background-color:#0001}#custom-navbar-home-popup .category-item a{display:flex;justify-content:space-between}#custom-navbar-home-popup .category-item .popup{z-index:10002;width:max-content}#custom-navbar-home-popup .category-item .popup a{padding:8px 16px;display:flex;justify-content:center;border-bottom:2px solid transparent}#custom-navbar-home-popup .category-item span{opacity:.5}

View File

@ -1 +1 @@
<div class=custom-navbar><ul><li v-for="component of components"v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"><a class=main-content v-bind:href=component.href v-html=component.html></a><div class=popup v-if=component.popupHtml v-html=component.popupHtml></div></ul></div>
<div class=custom-navbar><ul><li v-for="component of components"v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"><a class=main-content v-bind:href=component.href v-html=component.html></a><div class=popup v-bind:class="{'no-padding': component.noPadding}"v-if=component.popupHtml v-html=component.popupHtml></div></ul></div>

File diff suppressed because one or more lines are too long

View File

@ -99,6 +99,10 @@
transform-origin: top;
transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15);
}
.custom-navbar .popup.no-padding
{
padding: 0;
}
.custom-navbar>ul>li:not(.disabled):hover>.popup,
#custom-navbar-home-popup .category-item:hover .popup
{

View File

@ -3,7 +3,8 @@
<li v-for="component of components" v-bind:class="{disabled: component.disabled}"
v-bind:style="{flex: component.flex}">
<a class="main-content" v-bind:href="component.href" v-html="component.html"></a>
<div class="popup" v-if="component.popupHtml" v-html="component.popupHtml">
<div class="popup" v-bind:class="{'no-padding': component.noPadding}" v-if="component.popupHtml"
v-html="component.popupHtml">
</div>
</li>
</ul>

View File

@ -177,6 +177,7 @@ class Iframe extends NavbarComponent
this.popupHtml = /*html*/`
<iframe src="${src}" frameborder="0" width="${width}" height="${height}"></iframe>
`;
this.noPadding = true;
}
}
@ -214,6 +215,16 @@ class Iframe extends NavbarComponent
new SimpleLink("会员购", "https://show.bilibili.com/platform/home.html?msource=pc_web"),
new SimpleLink("漫画", "https://manga.bilibili.com"),
new Blank,
new Iframe("消息", "https://message.bilibili.com/pages/nav/index", {
src: `https://message.bilibili.com/pages/nav/index`,
width: `110px`,
height: `210px`,
}),
new Iframe("动态", "", {
src: `https://t.bilibili.com/pages/nav/index`,
width: `380px`,
height: `422px`,
})
];
new Vue({
el: navbar,