@ -1,11 +1,15 @@
< template >
< el -container class = "layout-cont" >
< el -container : class = "[isSider?'openside':'hideside',isMobile ? 'mobile': '']" >
< el -row :class ="[isShadowBg?'shadowBg': '']"@click ="changeShadow()" / >
< el -container : class = "[isSider ? 'openside' : 'hideside', isMobile ? 'mobile' : '']" >
< el -row : class = "[isShadowBg ? 'shadowBg' : '']"@click ="changeShadow()" / >
< el -aside class = "main-cont main-left" >
< div class = "tilte" : style = "{background: backgroundColor}" >
< div class = "tilte" : style = "{ background: backgroundColor }" >
< img alt class = "logoimg" :src ="$GIN_VUE_ADMIN.appLogo" >
< h2 v-if ="isSider" class="tit-text" :style="{color:textColor}" > {{ $ GIN_VUE_ADMIN.appName }} < / h2 >
< h2
v - if = "isSider"
class = "tit-text"
: style = "{ color: textColor }"
> { { $GIN_VUE_ADMIN . appName } } < / h2 >
< / div >
< Aside class = "aside" / >
< / e l - a s i d e >
@ -13,11 +17,10 @@
< el -main class = "main-cont main-right" >
< transition : duration = "{ enter: 800, leave: 100 }" mode = "out-in" name = "el-fade-in-linear" >
< div
: style = "{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
: style = "{ width: `calc(100% - ${isMobile ? '0px' : isCollapse ? '54px' : '220px'})` }"
class = "topfix"
>
< el -row >
<!-- : xs = "8" : sm = "6" : md = "4" : lg = "3" : xl = "1" -- >
< el -col >
< el -header class = "header-cont" >
< el -row class = "pd-0" >
@ -30,7 +33,7 @@
< el -col :xs ="10" :lg ="14" :md ="14" :sm ="9" :xl ="14" :pull ="1" >
< el -breadcrumb class = "breadcrumb" >
< el -breadcrumb -item
v - for = "item in matched.slice(1,matched.length)"
v - for = "item in matched.slice(1, matched.length)"
: key = "item.path"
> { { item . meta . title } } < / e l - b r e a d c r u m b - i t e m >
< / e l - b r e a d c r u m b >
@ -38,9 +41,11 @@
< el -col :xs ="12" :lg ="9" :md ="9" :sm ="14" :xl ="9" >
< div class = "right-box" >
< Search / >
< Screenfull class = "screenfull" :style ="{cursor:'pointer' }"/ >
< Screenfull class = "screenfull" : style = "{ cursor: 'pointer' }"/ >
< el -dropdown >
< div class = "dp-flex justify-content-center align-items height-full width-full" >
< div
class = "dp-flex justify-content-center align-items height-full width-full"
>
< span class = "header-avatar" style = "cursor: pointer" >
< CustomPic / >
< span style = "margin-left: 5px" > { { userInfo . nickName } } < / span >
@ -50,15 +55,17 @@
< template # dropdown >
< el -dropdown -menu class = "dropdown-group" >
< el -dropdown -item >
< span style = "font-weight: 600;" >
当前角色 ： { { userInfo . authority . authorityName } }
< / span >
< span
style = "font-weight: 600;"
> 当前角色 ： { { userInfo . authority . authorityName } } < / span >
< / e l - d r o p d o w n - i t e m >
< template v-if ="userInfo.authorities" >
< el -dropdown -item v-for ="item in userInfo.authorities.filter(i=>i.authorityId!==userInfo.authorityId)" :key="item.authorityId" @click="changeUserAuth(item.authorityId)" >
< span >
切换为 ： { { item . authorityName } }
< / span >
< el -dropdown -item
v - for = "item in userInfo.authorities.filter(i => i.authorityId !== userInfo.authorityId)"
: key = "item.authorityId"
@ click = "changeUserAuth(item.authorityId)"
>
< span > 切换为 ： { { item . authorityName } } < / span >
< / e l - d r o p d o w n - i t e m >
< / template >
< el -dropdown -item icon = "el-icon-s-custom" @click ="toPerson" > 个人信息 < / el -dropdown -item >
@ -73,20 +80,30 @@
< / e l - c o l >
< / e l - r o w >
<!-- 当前面包屑用路由自动生成可根据需求修改 -- >
<!--
: to = "{ path: item.path }" 暂时注释不用 -- >
< HistoryComponent ref = "layoutHistoryComponent" / >
< / div >
< / transition >
< router -view v-if ="$route.meta.keepAlive && reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" >
< transition mode = "out-in" name = "el-fade-in-linear" >
< router -view
v - if = "$route.meta.keepAlive && reloadFlag"
v - slot = "{ Component }"
v - loading = "loadingFlag"
element - loading - text = "正在加载中"
class = "admin-box"
>
< transition mode = "out-in" name = "zoom-fade" >
< keep -alive >
< component :is ="Component" / >
< / k e e p - a l i v e >
< / transition >
< / r o u t e r - v i e w >
< router -view v-if ="!$route.meta.keepAlive && reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" >
< transition mode = "out-in" name = "el-fade-in-linear" >
< router -view
v - if = "!$route.meta.keepAlive && reloadFlag"
v - slot = "{ Component }"
v - loading = "loadingFlag"
element - loading - text = "正在加载中"
class = "admin-box"
>
< transition mode = "out-in" name = "zoom-fade" >
< component :is ="Component" / >
< / transition >
< / r o u t e r - v i e w >
@ -95,7 +112,6 @@
< setting / >
< / e l - m a i n >
< / e l - c o n t a i n e r >
< / e l - c o n t a i n e r >
< / template >
@ -242,14 +258,14 @@ export default {
}
< / script >
< style lang = "scss" >
@ import '@/style/mobile.scss' ;
< style lang = "scss" scoped >
@ import "@/style/mobile.scss" ;
. dark {
. dark {
background - color : # 191 a23 ! important ;
color : # fff ! important ;
}
. light {
. light {
background - color : # fff ! important ;
color : # 000 ! important ;
}
奇淼（piexlmax
3 years ago
GitHub