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

update:更新左侧菜单样式

上级 40caf655
.index-view-layout-left {
.header-right {
.index-view-layout--left {
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;
align-items: center;
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>
<layout class="index_view index-view-layout-left" id="movebox">
<sider class="index_sider" :width="collapseChange ? 64 : 200" hide-trigger id="left_move">
<div class="sider-top">
<layout class="index-view-layout index-view-layout--left" id="movebox">
<sider class="index-view-layout-sider" :width="collapseChange ? 64 : 200" hide-trigger id="left_move">
<div class="sider__top">
<slot name="siderTop" />
</div>
<slot name="siderContent" />
</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">
<header class="index_header">
<div class="header-left">
<header class="index-view-layout-header">
<div class="header__left">
<slot name="headerLeft" />
</div>
<div class="header-center">
<div class="header__center">
<slot name="headerCenter" />
</div>
<div class="header-right">
<div class="header__right">
<slot name="headerRight" />
</div>
</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="navPos" />
</content>
......
......@@ -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 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册