💄 调整部分layout
- 默认布局菜单增加logo - 菜单缩进操作按钮位置更改为菜单底部 - 通栏、经典、功能坞头部不再跟随主题颜色 - 面包屑导航增加显示路由图标
This commit is contained in:
sc
sakuya
parent
1eab0f2ad1
commit
5bbe891149
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -1,13 +1,10 @@
|
|||
<template>
|
||||
<div class="adminui-topbar">
|
||||
<div class="left-panel">
|
||||
<div class="menu-collapse hidden-sm-and-down" @click="$store.commit('TOGGLE_menuIsCollapse')">
|
||||
<el-icon><el-icon-fold /></el-icon>
|
||||
</div>
|
||||
<el-breadcrumb separator-icon="el-icon-arrow-right" class="hidden-sm-and-down">
|
||||
<transition-group name="breadcrumb" mode="out-in">
|
||||
<template v-for="item in breadList" :key="item.title" >
|
||||
<el-breadcrumb-item v-if="item.path!='/' && !item.meta.hiddenBreadcrumb" :key="item.meta.title">{{item.meta.title}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-if="item.path!='/' && !item.meta.hiddenBreadcrumb" :key="item.meta.title"><el-icon class="icon" v-if="item.meta.icon"><component :is="item.meta.icon" /></el-icon>{{item.meta.title}}</el-breadcrumb-item>
|
||||
</template>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
|
|
@ -44,6 +41,8 @@
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-breadcrumb {margin-left: 15px;}
|
||||
.el-breadcrumb .el-breadcrumb__inner .icon {font-size: 14px;margin-right: 5px;float: left;}
|
||||
.breadcrumb-enter-active,.breadcrumb-leave-active {transition: all 0.3s;}
|
||||
.breadcrumb-enter-from,.breadcrumb-leave-active {opacity: 0;transform: translateX(20px);}
|
||||
.breadcrumb-leave-active {position: absolute;}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,9 @@
|
|||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
|
||||
<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<Side-m v-if="ismobile"></Side-m>
|
||||
<div class="aminui-body el-container">
|
||||
|
|
@ -69,6 +72,9 @@
|
|||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
|
||||
<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<Side-m v-if="ismobile"></Side-m>
|
||||
<div class="aminui-body el-container">
|
||||
|
|
@ -123,6 +129,11 @@
|
|||
<template v-else>
|
||||
<section class="aminui-wrapper">
|
||||
<div v-if="!ismobile" class="aminui-side-split">
|
||||
<div class="aminui-side-split-top">
|
||||
<router-link :to="$CONFIG.DASHBOARD_URL">
|
||||
<img class="logo" :title="$CONFIG.APP_NAME" src="img/logo-r.png">
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="adminui-side-split-scroll">
|
||||
<el-scrollbar>
|
||||
<ul>
|
||||
|
|
@ -146,6 +157,9 @@
|
|||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
|
||||
<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<Side-m v-if="ismobile"></Side-m>
|
||||
<div class="aminui-body el-container">
|
||||
|
|
|
|||
|
|
@ -47,8 +47,11 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
|
|||
.adminui-header-menu .el-menu .el-menu-item.is-active {color: #fff!important;background: var(--el-color-primary-light-2);border-bottom-color:transparent;}
|
||||
|
||||
/* 左侧菜单 */
|
||||
.aminui-side-split {width:65px;flex-shrink:0;background: #222b45;}
|
||||
.adminui-side-split-scroll {overflow: auto;overflow-x:hidden;height: 100%;}
|
||||
.aminui-side-split {width:65px;flex-shrink:0;background: #222b45;display: flex;flex-flow: column;}
|
||||
.aminui-side-split-top {height: 49px;}
|
||||
.aminui-side-split-top a {display: inline-block;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
|
||||
.aminui-side-split-top .logo {height:30px;vertical-align: bottom;}
|
||||
.adminui-side-split-scroll {overflow: auto;overflow-x:hidden;height: 100%;flex: 1;}
|
||||
.aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
|
||||
.aminui-side-split li i {font-size: 18px;}
|
||||
.aminui-side-split li p {margin-top:5px;}
|
||||
|
|
@ -64,6 +67,9 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
|
|||
.adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
|
||||
.adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
|
||||
.adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
|
||||
.adminui-side-bottom {border-top: 1px solid #ebeef5;height:35px;cursor: pointer;display: flex;align-items: center;justify-content: center;}
|
||||
.adminui-side-bottom i {font-size: 16px;}
|
||||
.adminui-side-bottom:hover {color: var(--el-color-primary);}
|
||||
.aminui-side.isCollapse {width: 64px;}
|
||||
|
||||
/* 右侧内容 */
|
||||
|
|
@ -76,10 +82,6 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
|
|||
.right-panel-search {display: flex;align-items: center;}
|
||||
.right-panel-search > * + * {margin-left:10px;}
|
||||
|
||||
.adminui-topbar .menu-collapse {height: 50px;width: 60px;padding: 0 20px;display: flex;align-items: center;cursor: pointer;}
|
||||
.adminui-topbar .menu-collapse i {font-size: 16px;}
|
||||
.adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, #d9ecff, transparent);}
|
||||
|
||||
.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;}
|
||||
.adminui-tags ul {display: flex;overflow: hidden;}
|
||||
.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;position: relative;flex-shrink: 0;}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
.el-button--text:focus, .el-button--text:hover {color: var(--el-color-primary-light-2);border-color: transparent;background-color: transparent;}
|
||||
.aminui-side .el-menu-item.is-active {background: var(--el-color-primary-light-9);color: var(--el-color-primary)!important;}
|
||||
|
||||
.adminui-header {background-color: var(--el-color-primary);}
|
||||
|
||||
.aminui-side-split li.active {background-color: var(--el-color-primary);}
|
||||
.adminui-tags li:hover {background-color: var(--el-color-primary-light-9);}
|
||||
.adminui-tags li.active {background-color: var(--el-color-primary)!important;}
|
||||
|
|
|
|||
|
|
@ -116,6 +116,7 @@
|
|||
.aminui-side {background: $--card-background;border-color: $--border-color;}
|
||||
.adminui-side-top {border-color: $--border-color;}
|
||||
.adminui-side-top h2 {color: $--text-color;}
|
||||
.adminui-side-bottom {border-color: $--border-color;}
|
||||
.adminui-main {background: $--background;}
|
||||
.adminui-topbar {background: $--card-background;border-color: $--border-color;color: $--text-color;}
|
||||
.adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, $--background, transparent);}
|
||||
|
|
|
|||
Loading…
Reference in New Issue