mirroring/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2024-11-01 14:10:27 +08:00
Code Issues Projects Releases Wiki Activity

优化菜单代码

Browse Source
This commit is contained in:
神仙 2024-08-01 00:43:04 +08:00
parent fd5286fe0a
commit 851dcc912f
2 changed files with 24 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/modules/base/pages/main/components/bmenu.tsx
View File

@ -1,4 +1,4 @@
import { defineComponent, h, VNode } from "vue"; import { defineComponent, h } from "vue";
import { useBase, Menu } from "/$/base"; import { useBase, Menu } from "/$/base";
import { useCool } from "/@/cool"; import { useCool } from "/@/cool";
@ -28,12 +28,12 @@ export default defineComponent({
.filter((e) => e.isShow) .filter((e) => e.isShow)
.map((e) => { .map((e) => {
const item = (e: Menu.Item) => { const item = (e: Menu.Item) => {
return ( return [
<div class="wrap"> <el-icon>
<cl-svg name={e.icon} /> <cl-svg name={e.icon} />
</el-icon>,
<span v-show={!app.isFold || index != 1}>{e.meta?.label}</span> <span v-show={!app.isFold || index != 1}>{e.meta?.label}</span>
</div> ];
);
}; };
if (e.type == 0) { if (e.type == 0) {
@ -72,7 +72,6 @@ export default defineComponent({
} }
); );
} }
}); });
} }

70
src/modules/base/pages/main/components/slider.vue
View File

@ -6,7 +6,9 @@
</div> </div>
<div class="app-slider__container"> <div class="app-slider__container">
<el-scrollbar>
<b-menu /> <b-menu />
</el-scrollbar>
</div> </div>
</div> </div>
</template> </template>
@ -50,79 +52,41 @@ const { app } = useBase();
&__container { &__container {
height: calc(100% - 80px); height: calc(100% - 80px);
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
} }
&__menu { &__menu {
&.el-popper {
&.is-light {
border: 0;
}
}
.el-menu { .el-menu {
border-right: 0; border-right: 0;
background-color: transparent; background-color: transparent;
&--popup { .el-menu-item,
.cl-svg, .el-menu__title,
span { .el-sub-menu__title {
color: #000;
}
}
.el-sub-menu__title,
&-item {
&.is-active,
&:hover {
background-color: var(--color-primary) !important;
.cl-svg,
span {
color: #fff;
}
}
}
.el-sub-menu__title,
&-item,
&__title {
color: #eee;
letter-spacing: 0.5px;
height: 50px; height: 50px;
line-height: 50px; color: #fff;
.wrap {
width: 100%;
box-sizing: border-box;
padding: 0 4px;
}
.cl-svg { .cl-svg {
font-size: 16px; font-size: 16px;
} }
span { span {
display: inline-block;
font-size: 12px; font-size: 12px;
letter-spacing: 1px;
margin-left: 10px;
user-select: none; user-select: none;
letter-spacing: 1px;
}
&.is-active,
&:hover {
background-color: var(--color-primary);
color: #fff;
} }
} }
&--collapse { &--popup {
.wrap { .el-menu-item,
text-align: center; .el-menu__title,
}
.el-sub-menu__title { .el-sub-menu__title {
padding: 0; color: var(--el-text-color-primary);
} }
} }
} }