perf: 优化移动端模式下菜单样式

This commit is contained in:
“huailei000”
2023-03-02 11:03:40 +08:00
committed by huailei
parent fb4a940d2d
commit fadc3f8cb0
3 changed files with 20 additions and 19 deletions

View File

@@ -1,6 +1,6 @@
<template>
<div style="padding: 0 20px;" @click="toggleClick">
<svg-icon icon-class="direction-left" class="hamburger" :class="{'is-active':isActive}" />
<svg-icon icon-class="arrow-to-left" class="hamburger" style="color: #ffffff;" :class="{'is-active':isActive}" />
</div>
</template>
@@ -30,6 +30,6 @@ export default {
color: $menuText;
}
.hamburger.is-active {
transform: rotate(-180deg);
transform: rotate(180deg);
}
</style>

View File

@@ -198,6 +198,7 @@ export default {
line-height: 30px;
border-radius: 4px;
border-color: $--color-primary;
background-color: white;
color: #fff;
cursor: pointer;
transition: .2s;

View File

@@ -248,39 +248,39 @@ export default {
display: none;
& > > > .organization {
height: 48px;
line-height: 48px;
padding-left: 8px;
background: transparent;
color: #fff;
border-bottom: 1px solid rgba(31, 35, 41, .15);
.el-input--prefix .el-input__inner {
height: 48px!important;
line-height: 48px!important;
}
.svg-icon {
color: #FFF!important;
margin-right:0px!important;
}
}
& > > > .title-label {
color: white !important;
}
.mobile-view-switch > > > .el-menu-item.is-active {
color: #ffffff;
.mobile-view-switch {
&>>> .el-menu-item.is-active {
color: var(--menu-text-active)!important;
.svg-icon {
color: var(--menu-text-active)!important;
}
}
}
}
@media screen and (max-width: 992px) {
.active-mobile {
display: block;
.organization {
&>>> .svg-icon {
color: #FFF!important;
margin-right:0px!important;
}
}
.mobile-view-switch {
background: #fff!important;
&>>> .el-menu-item.is-active {
color: var(--menu-text-active)!important;
.svg-icon {
color: var(--menu-text-active)!important;
}
}
}
}
.active-switch-view {
display: none!important;