提交 895273fd 编写于 作者: Shine-zwj's avatar Shine-zwj

update:更新左侧菜单样式

上级 40caf655
.index-view-layout-left { .index-view-layout--left {
.header-right { position: relative;
.index-view-layout-sider {
flex: none !important;
max-width: none !important;
transition: none 0s ease 0s;
background-color: var(--app-color-white);
.sider__top {
font-size: 21px;
font-weight: 700;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.app-menu {
height: calc(100% - 64px);
overflow-y: auto;
overflow-x: hidden;
}
}
.index-view-layout-split {
position: absolute;
left: 195px;
width: 5px;
height: 100%;
cursor: w-resize;
}
.index-view-layout-header {
height: 64px;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
align-items: center;
background-color: var(--app-color-white);
color: var(--app-color-black);
.header__left {
display: flex;
font-size: 21px;
margin-left: 8px;
align-items: center;
}
.header__right {
display: flex;
align-items: center;
}
} }
.index_sider {
background-color:#FFF; .index-view-layout-content {
height: calc(100% - 64px);
background-color: var(--app-color-gray-400);
>.view-container {
overflow: auto;
background-color: var(--app-color-gray-400);
}
&.index-view-layout-content--tab {
>.view-container {
height: calc(100% - 55px);
}
}
} }
} }
\ No newline at end of file
<template> <template>
<layout class="index_view index-view-layout-left" id="movebox"> <layout class="index-view-layout index-view-layout--left" id="movebox">
<sider class="index_sider" :width="collapseChange ? 64 : 200" hide-trigger id="left_move"> <sider class="index-view-layout-sider" :width="collapseChange ? 64 : 200" hide-trigger id="left_move">
<div class="sider-top"> <div class="sider__top">
<slot name="siderTop" /> <slot name="siderTop" />
</div> </div>
<slot name="siderContent" /> <slot name="siderContent" />
</sider> </sider>
<div v-show="!collapseChange" id="move_axis"></div> <div v-show="!collapseChange" class="index-view-layout-split" id="move_axis"></div>
<layout id="right_move"> <layout id="right_move">
<header class="index_header"> <header class="index-view-layout-header">
<div class="header-left"> <div class="header__left">
<slot name="headerLeft" /> <slot name="headerLeft" />
</div> </div>
<div class="header-center"> <div class="header__center">
<slot name="headerCenter" /> <slot name="headerCenter" />
</div> </div>
<div class="header-right"> <div class="header__right">
<slot name="headerRight" /> <slot name="headerRight" />
</div> </div>
</header> </header>
<content :class="{ 'index_content': true, 'index_tab_content': Object.is(navModel,'tab') ? true : false, 'index_route_content': Object.is(navModel,'route') ? true : false }"> <content :class="{ 'index-view-layout-content': true, 'index-view-layout-content--tab': Object.is(navModel,'tab') ? true : false, 'index-view-layout-content--route': Object.is(navModel,'route') ? true : false }">
<slot name="tabPageExp" /> <slot name="tabPageExp" />
<slot name="navPos" /> <slot name="navPos" />
</content> </content>
......
...@@ -39,4 +39,10 @@ ...@@ -39,4 +39,10 @@
} }
} }
} }
}
.el-menu--vertical {
.el-menu-item, .el-submenu__title {
height: 57px;
}
} }
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册