@ -1,15 +1,11 @@
< template > < template >
< el -container class = "layout-cont" > < 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" > < 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" > < 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 > < / div >
< Aside class = "aside" / > < Aside class = "aside" / >
< / e l - a s i d e > < / e l - a s i d e >
@ -17,10 +13,11 @@
< el -main class = "main-cont main-right" > < el -main class = "main-cont main-right" >
< transition : duration = "{ enter: 800, leave: 100 }" mode = "out-in" name = "el-fade-in-linear" > < transition : duration = "{ enter: 800, leave: 100 }" mode = "out-in" name = "el-fade-in-linear" >
< div < div
: style = "{ width: `calc(100% - ${isMobile ? '0px' : isCollapse ? '54px' : '220px'})` }"
: style = "{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
class = "topfix" class = "topfix"
> >
< el -row > < el -row >
<!-- : xs = "8" : sm = "6" : md = "4" : lg = "3" : xl = "1" -- >
< el -col > < el -col >
< el -header class = "header-cont" > < el -header class = "header-cont" >
< el -row class = "pd-0" > < el -row class = "pd-0" >
@ -33,7 +30,7 @@
< el -col :xs ="10" :lg ="14" :md ="14" :sm ="9" :xl ="14" :pull ="1" > < el -col :xs ="10" :lg ="14" :md ="14" :sm ="9" :xl ="14" :pull ="1" >
< el -breadcrumb class = "breadcrumb" > < el -breadcrumb class = "breadcrumb" >
< el -breadcrumb -item < el -breadcrumb -item
v - for = "item in matched.slice(1, matched.length)"
v - for = "item in matched.slice(1,matched.length)"
: key = "item.path" : key = "item.path"
> { { item . meta . title } } < / e l - b r e a d c r u m b - i t e m > > { { 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 > < / e l - b r e a d c r u m b >
@ -41,11 +38,9 @@
< el -col :xs ="12" :lg ="9" :md ="9" :sm ="14" :xl ="9" > < el -col :xs ="12" :lg ="9" :md ="9" :sm ="14" :xl ="9" >
< div class = "right-box" > < div class = "right-box" >
< Search / > < Search / >
< Screenfull class = "screenfull" : style = "{ cursor: 'pointer' }"/ >
< Screenfull class = "screenfull" :style ="{cursor:'pointer' }"/ >
< el -dropdown > < 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" > < span class = "header-avatar" style = "cursor: pointer" >
< CustomPic / > < CustomPic / >
< span style = "margin-left: 5px" > { { userInfo . nickName } } < / span > < span style = "margin-left: 5px" > { { userInfo . nickName } } < / span >
@ -55,17 +50,15 @@
< template # dropdown > < template # dropdown >
< el -dropdown -menu class = "dropdown-group" > < el -dropdown -menu class = "dropdown-group" >
< el -dropdown -item > < 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 > < / e l - d r o p d o w n - i t e m >
< template v-if ="userInfo.authorities" > < 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 > < / e l - d r o p d o w n - i t e m >
< / template > < / template >
< el -dropdown -item icon = "el-icon-s-custom" @click ="toPerson" > 个人信息 < / el -dropdown -item > < el -dropdown -item icon = "el-icon-s-custom" @click ="toPerson" > 个人信息 < / el -dropdown -item >
@ -80,30 +73,20 @@
< / e l - c o l > < / e l - c o l >
< / e l - r o w > < / e l - r o w >
<!-- 当前面包屑用路由自动生成可根据需求修改 -- > <!-- 当前面包屑用路由自动生成可根据需求修改 -- >
<!--
: to = "{ path: item.path }" 暂时注释不用 -- >
< HistoryComponent ref = "layoutHistoryComponent" / > < HistoryComponent ref = "layoutHistoryComponent" / >
< / div > < / div >
< / transition > < / 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 = "zoom-fade" >
< 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" >
< keep -alive > < keep -alive >
< component :is ="Component" / > < component :is ="Component" / >
< / k e e p - a l i v e > < / k e e p - a l i v e >
< / transition > < / transition >
< / r o u t e r - v i e w > < / 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 = "zoom-fade" >
< 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" >
< component :is ="Component" / > < component :is ="Component" / >
< / transition > < / transition >
< / r o u t e r - v i e w > < / r o u t e r - v i e w >
@ -112,6 +95,7 @@
< setting / > < setting / >
< / e l - m a i n > < / 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 >
< / e l - c o n t a i n e r > < / e l - c o n t a i n e r >
< / template > < / template >
@ -258,14 +242,14 @@ export default {
} }
< / script > < / script >
< style lang = "scss" scoped >
@ import "@/style/mobile.scss" ;
< style lang = "scss" >
@ import '@/style/mobile.scss' ;
. dark {
. dark {
background - color : # 191 a23 ! important ; background - color : # 191 a23 ! important ;
color : # fff ! important ; color : # fff ! important ;
} }
. light {
. light {
background - color : # fff ! important ; background - color : # fff ! important ;
color : # 000 ! important ; color : # 000 ! important ;
} }
奇淼（piexlmax
3 years ago
GitHub