🎨
This commit is contained in:
parent
251629ab61
commit
aa5528d11e
3 changed files with 28 additions and 19 deletions
|
@ -38,7 +38,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main" :class="{ withBg: $store.state.i.wallpaperUrl != null }">
|
<div class="main">
|
||||||
<template v-if="customize">
|
<template v-if="customize">
|
||||||
<x-draggable v-for="place in ['left', 'right']"
|
<x-draggable v-for="place in ['left', 'right']"
|
||||||
:list="widgets[place]"
|
:list="widgets[place]"
|
||||||
|
@ -342,9 +342,6 @@ root(isDark)
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
max-width 1240px
|
max-width 1240px
|
||||||
|
|
||||||
&.withBg
|
|
||||||
background rgba(isDark ? #000 : #fff, 0.5)
|
|
||||||
|
|
||||||
> *
|
> *
|
||||||
.customize-container
|
.customize-container
|
||||||
cursor move
|
cursor move
|
||||||
|
|
|
@ -55,7 +55,7 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.commit('setUiHeaderHeight', 48);
|
this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
|
||||||
|
|
||||||
if (this.$store.getters.isSignedIn) {
|
if (this.$store.getters.isSignedIn) {
|
||||||
const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
|
const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
|
||||||
|
@ -120,8 +120,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
root(isDark)
|
||||||
position -webkit-sticky
|
position fixed
|
||||||
position sticky
|
|
||||||
top 0
|
top 0
|
||||||
z-index 1000
|
z-index 1000
|
||||||
width 100%
|
width 100%
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-ui" :style="style" v-hotkey.global="keymap">
|
<div class="mk-ui" v-hotkey.global="keymap">
|
||||||
|
<div class="bg" v-if="$store.getters.isSignedIn && $store.state.i.wallpaperUrl" :style="style"></div>
|
||||||
<x-header class="header" v-show="!zenMode"/>
|
<x-header class="header" v-show="!zenMode"/>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
@ -41,6 +42,16 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
'$store.state.uiHeaderHeight'() {
|
||||||
|
this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
post() {
|
post() {
|
||||||
(this as any).apis.post();
|
(this as any).apis.post();
|
||||||
|
@ -55,20 +66,22 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mk-ui
|
.mk-ui
|
||||||
display flex
|
min-height 100vh
|
||||||
flex-direction column
|
padding-top 48px
|
||||||
flex 1
|
|
||||||
background-size cover
|
> .bg
|
||||||
background-position center
|
position fixed
|
||||||
background-attachment fixed
|
top 0
|
||||||
|
left 0
|
||||||
|
width 100%
|
||||||
|
height 100vh
|
||||||
|
background-size cover
|
||||||
|
background-position center
|
||||||
|
background-attachment fixed
|
||||||
|
opacity 0.3
|
||||||
|
|
||||||
> .header
|
> .header
|
||||||
@media (max-width 1000px)
|
@media (max-width 1000px)
|
||||||
display none
|
display none
|
||||||
|
|
||||||
> .content
|
|
||||||
display flex
|
|
||||||
flex-direction column
|
|
||||||
flex 1
|
|
||||||
overflow hidden
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue