This commit is contained in:
parent
c304351335
commit
1623d9e70c
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-admin">
|
<div class="mk-admin">
|
||||||
<nav>
|
<nav>
|
||||||
|
<div class="me">
|
||||||
|
<img class="avatar" :src="$store.state.i.avatarUrl" alt="avatar"/>
|
||||||
|
<p class="name">{{ $store.state.i | userName }}</p>
|
||||||
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:home .fw%%i18n:@dashboard%</li>
|
<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:home .fw%%i18n:@dashboard%</li>
|
||||||
<li @click="nav('instance')" :class="{ active: page == 'instance' }">%fa:cog .fw%%i18n:@instance%</li>
|
<li @click="nav('instance')" :class="{ active: page == 'instance' }">%fa:cog .fw%%i18n:@instance%</li>
|
||||||
|
@ -69,15 +73,36 @@ export default Vue.extend({
|
||||||
left 0
|
left 0
|
||||||
width 250px
|
width 250px
|
||||||
height 100vh
|
height 100vh
|
||||||
padding 16px 0 0 0
|
|
||||||
overflow auto
|
overflow auto
|
||||||
background #333
|
background #333
|
||||||
color #fff
|
color #fff
|
||||||
|
|
||||||
|
> .me
|
||||||
|
display flex
|
||||||
|
margin 16px
|
||||||
|
padding-bottom 16px
|
||||||
|
align-items center
|
||||||
|
border-bottom solid 1px #555
|
||||||
|
|
||||||
|
> .avatar
|
||||||
|
height 48px
|
||||||
|
border-radius 100%
|
||||||
|
vertical-align middle
|
||||||
|
|
||||||
|
> .name
|
||||||
|
margin 0 16px
|
||||||
|
padding 0
|
||||||
|
color #fff
|
||||||
|
overflow hidden
|
||||||
|
text-overflow ellipsis
|
||||||
|
white-space nowrap
|
||||||
|
font-size 15px
|
||||||
|
|
||||||
> ul
|
> ul
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
list-style none
|
list-style none
|
||||||
|
font-size 15px
|
||||||
|
|
||||||
> li
|
> li
|
||||||
display block
|
display block
|
||||||
|
@ -94,8 +119,23 @@ export default Vue.extend({
|
||||||
margin-left 8px
|
margin-left 8px
|
||||||
color var(--primary) !important
|
color var(--primary) !important
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content ""
|
||||||
|
display block
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
right 0
|
||||||
|
bottom 0
|
||||||
|
margin auto 0
|
||||||
|
height 0
|
||||||
|
border-top solid 16px transparent
|
||||||
|
border-right solid 16px #EBEBEB
|
||||||
|
border-bottom solid 16px transparent
|
||||||
|
border-left solid 16px transparent
|
||||||
|
|
||||||
> main
|
> main
|
||||||
width 100%
|
width 100%
|
||||||
padding 32px 32px 32px calc(32px + 250px)
|
padding 32px 32px 32px calc(32px + 250px)
|
||||||
|
max-width 1300px
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue