Commit 0d952d0e authored by tianhongyang's avatar tianhongyang

🎈 perf(根据ui图 重置导航宽度 样式):

parent e5068e0c
This diff is collapsed.
...@@ -66,9 +66,16 @@ ...@@ -66,9 +66,16 @@
height: 100%; height: 100%;
} }
.el-scrollbar {
.scrollbar-wrapper {
padding-top: 20px;
box-sizing: border-box;
}
}
&.has-logo { &.has-logo {
.el-scrollbar { .el-scrollbar {
height: calc(100% - 50px); height: calc(100% - 56px);
} }
} }
...@@ -82,8 +89,14 @@ ...@@ -82,8 +89,14 @@
overflow: hidden; overflow: hidden;
} }
.sidebar-logo-link {
display: flex;
align-items: center;
overflow: hidden;
}
.svg-icon { .svg-icon {
margin-right: 6px; margin-right: 8px;
} }
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
top: 54%; top: 54%;
...@@ -94,19 +107,21 @@ ...@@ -94,19 +107,21 @@
.el-menu { .el-menu {
border: none; border: none;
height: 100%; height: 100%;
width: calc(100% - 16px) !important; width: 100%;
margin: 0 8px; padding: 0px 12px;
box-sizing: border-box;
&.el-menu--inline {
padding: 0px 8px;
box-sizing: border-box;
} }
.el-menu--inline {
margin: 0;
width: 100% !important;
} }
.el-menu--inline .nest-menu .el-menu-item { .el-menu--inline .nest-menu .el-menu-item {
width: 100% !important; width: 100% !important;
min-width: 128px; min-width: 128px;
font-size: 12px; font-size: 12px;
color: #fff !important; color: #fff !important;
padding-left: 23px !important; padding-left: 24px !important;
} }
.el-menu--inline .nest-menu .el-menu-item .svg-icon { .el-menu--inline .nest-menu .el-menu-item .svg-icon {
display: none; display: none;
...@@ -114,27 +129,37 @@ ...@@ -114,27 +129,37 @@
.el-menu-item, .el-menu-item,
.el-submenu__title { .el-submenu__title {
display: flex;
align-items: center;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
border: 1px solid #141b2f; border: 1px solid #141b2f;
border-radius: 10px;
color: #fff; color: #fff;
margin-bottom: 6px; margin-bottom: 8px;
padding: 0 6px !important; padding: 0 8px !important;
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; white-space: nowrap !important;
} }
.el-menu.el-menu--inline {
margin: 0;
width: 100% !important;
.el-submenu__title {
padding-left: 24px !important;
}
}
// menu hover // menu hover
.el-menu-item.is-active { .el-menu-item.is-active {
// 点击菜单的颜色 // 点击菜单的颜色
background-color: #1e2c4c !important; background-color: #1e2c4c !important;
color: #fff !important; color: #fff !important;
border-radius: 10px;
border: 1px solid #2b3f69; border: 1px solid #2b3f69;
&:hover { &:hover {
background-color: #1e2c4c !important; background-color: #1e2c4c !important;
border-radius: 10px;
color: #fff !important; color: #fff !important;
border: 1px solid #2b3f69; border: 1px solid #2b3f69;
} }
...@@ -146,11 +171,11 @@ ...@@ -146,11 +171,11 @@
// menu hover // menu hover
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-submenu__title { .el-submenu__title {
border-radius: 10px;
color: #fff !important; color: #fff !important;
&:hover { &:hover {
background-color: #1e2c4c !important; background-color: #1e2c4c !important;
color: #fff !important; color: #fff !important;
border-radius: 10px;
border: 1px solid #2b3f69; border: 1px solid #2b3f69;
} }
} }
...@@ -163,32 +188,48 @@ ...@@ -163,32 +188,48 @@
border: 1px solid #2b3f69; border: 1px solid #2b3f69;
} }
.sidebar-container .el-submenu .el-menu-item:before, // .sidebar-container .el-submenu .el-menu-item:before,
.sidebar-container .nest-menu .el-submenu > .el-submenu__title:before { // .sidebar-container .nest-menu .el-submenu > .el-submenu__title:before {
position: absolute; // position: absolute;
width: 2px; // width: 2px;
height: 2px; // height: 2px;
border-radius: 50%; // border-radius: 50%;
background: #344062; // background: #344062;
left: 16px; // left: 16px;
top: 50%; // top: 50%;
content: ""; // content: "";
} // }
.sidebar-container .el-submenu .el-menu-item:hover:before, // .sidebar-container .el-submenu .el-menu-item:hover:before,
.sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover:before { // .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover:before {
position: absolute; // position: absolute;
width: 2px; // width: 2px;
height: 2px; // height: 2px;
border-radius: 50%; // border-radius: 50%;
background: #fff; // background: #fff;
left: 16px; // left: 16px;
top: 50%; // top: 50%;
content: ""; // content: "";
} // }
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 48px !important; width: 48px !important;
.sidebar-logo-container {
padding: 0px;
.sidebar-logo-link {
justify-content: center;
}
}
.el-scrollbar {
.el-menu--collapse {
&.el-menu {
padding: 0px 8px;
}
}
}
} }
.main-container { .main-container {
......
...@@ -50,8 +50,8 @@ $menuHover:#263445; ...@@ -50,8 +50,8 @@ $menuHover:#263445;
$subMenuBg:#1f2d3d; $subMenuBg:#1f2d3d;
$subMenuHover:#001528; $subMenuHover:#001528;
$base-sidebar-width: 144px; $base-sidebar-width: 220px;
$sideBarWidth: 144px; $sideBarWidth: 220px;
//系统默认颜色 //系统默认颜色
$systemColor:#0081FF; $systemColor:#0081FF;
......
...@@ -46,8 +46,8 @@ export default { ...@@ -46,8 +46,8 @@ export default {
<style scoped> <style scoped>
.svg-icon { .svg-icon {
width: 1.29em; width: 16px;
height: 1.29em; height: 16px;
/*vertical-align: -0.22em;*/ /*vertical-align: -0.22em;*/
fill: currentColor; fill: currentColor;
overflow: hidden; overflow: hidden;
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="text-cl1 sidebar-title" :style="{ width: '98px', color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <h1 class="text-cl1 sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link> </router-link>
</transition> </transition>
</el-popover> </el-popover>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</template> </template>
<script> <script>
import logoImg from '@/assets/images/logo/logo.png' import logoImg from '@/assets/images/logo/zjyj-logo.svg'
import variables from '@/assets/styles/variables.scss' import variables from '@/assets/styles/variables.scss'
export default { export default {
...@@ -45,7 +45,7 @@ export default { ...@@ -45,7 +45,7 @@ export default {
}, },
data() { data() {
return { return {
title: '数字化经营履约全生命链路管理系统', title: '中建一局二公司',
logo: logoImg logo: logoImg
} }
} }
...@@ -65,11 +65,13 @@ export default { ...@@ -65,11 +65,13 @@ export default {
.sidebar-logo-container { .sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 55px; height: 56px;
line-height: 55px; line-height: 56px;
background: #141b2f; background: #141b2f;
border-bottom: 1px solid #1a2743; border-bottom: 1px solid #1a2743;
text-align: center; text-align: center;
padding: 0px 18px;
box-sizing: border-box;
/*overflow: hidden;*/ /*overflow: hidden;*/
& .sidebar-logo-link { & .sidebar-logo-link {
...@@ -77,18 +79,17 @@ export default { ...@@ -77,18 +79,17 @@ export default {
width: 100%; width: 100%;
& .sidebar-logo { & .sidebar-logo {
width: 16px; min-width: 22px;
height: 23px; width: 22px;
vertical-align: middle; height: 22px;
margin-right: 3px; margin-right: 8px;
} }
& .sidebar-title { & .sidebar-title {
display: inline-block; margin: 0px;
margin: 0;
color: #fff; color: #fff;
font-weight: 600; font-weight: 700;
line-height: 50px; line-height: 22px;
font-size: 14px; font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle; vertical-align: middle;
......
...@@ -147,7 +147,7 @@ import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/ ...@@ -147,7 +147,7 @@ import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/
import { makeUpJs } from '@/utils/generator/js' import { makeUpJs } from '@/utils/generator/js'
import { makeUpCss } from '@/utils/generator/css' import { makeUpCss } from '@/utils/generator/css'
import drawingDefault from '@/utils/generator/drawingDefault' import drawingDefault from '@/utils/generator/drawingDefault'
import logo from '@/assets/images/logo/logo.png' import logo from '@/assets/images/logo/zjyj-logo.svg'
import CodeTypeDialog from './CodeTypeDialog' import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from './DraggableItem' import DraggableItem from './DraggableItem'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment