github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 修改样式

Browse Source
pull/116/head
wangdan 2 years ago committed by wangdan-fit2cloud
parent 7266e2afbd
commit a99ea07086
4 changed files with 163 additions and 115 deletions
Show Stats Download Patch File Download Diff File

7
frontend/src/components/app-layout/menu/components/Collapse.vue
Unescape View File

@ -14,8 +14,6 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '../index.scss';
.collapse { .collapse {
height: 47px; height: 47px;
border-top: 1px solid #e4e7ed; border-top: 1px solid #e4e7ed;
@ -24,10 +22,9 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
.collapse-icon { .collapse-icon {
margin-top: 10px; margin-top: 10px;
margin-left: 25px; margin-left: 25px;
} &:hover {
.collapse-icon:hover {
color: $primary-color; color: $primary-color;
cursor: pointer; cursor: pointer;
} }
}
</style> </style>

14
frontend/src/components/app-layout/menu/components/Logo.vue
Unescape View File

@ -10,5 +10,17 @@ defineProps<{ isCollapse: boolean }>();
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '../index.scss'; .logo {
box-sizing: border-box;
height: 55px;
margin: 5px 0;
img:first-child {
width: 130px;
object-fit: contain;
}
img:nth-child(2) {
height: 45px;
object-fit: contain;
}
}
</style> </style>

208
frontend/src/components/app-layout/menu/index.scss
Unescape View File

@ -1,79 +1,50 @@
.menu {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background-color: $menu-backgroup-color;
transition: all 0.3s ease;
.logo {
box-sizing: border-box;
height: 55px;
img:first-child {
width: 120px;
object-fit: contain;
margin-right: 8px;
margin-top: 10px;
}
img:nth-child(2) {
width: 50px;
object-fit: contain;
margin-top: 10px;
margin-left: 5px;
}
}
.el-scrollbar {
height: calc(100% - 55px);
.el-menu { .el-menu {
flex: 1;
overflow: auto;
overflow-x: hidden;
border-right: none;
}
}
.menu-footer {
height: 30px;
background-color: #c0c0c0;
text-align: center;
}
}
.el-menu,
.el-menu--popup {
padding: 4px;
background: none !important; background: none !important;
width: 100%;
padding: 0 7px;
.el-menu-item { .el-menu-item {
border-radius: 4px !important; border-radius: 4px !important;
background-color: $menu-item-backgroup-color; background-color: $menu-item-backgroup-color;
margin: 10px; margin: 6px 0;
height: 44px !important; height: 46px !important;
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
box-sizing: border-box;
min-width: auto;
padding-left: 22px;
span { // span {
color: rgba(31, 35, 41, 1); // color: rgba(31, 35, 41, 1);
} // }
// .el-icon {
// color: rgba(31, 35, 41, 1);
// }
&:hover {
.el-icon { .el-icon {
color: rgba(31, 35, 41, 1); color: $primary-color;
} }
span {
color: $primary-color;
}
}
&.is-active { &.is-active {
background-color: #ffffff; background-color: #ffffff;
border: 2px solid $primary-color; border: 2px solid $primary-color;
span { // span {
color: $primary-color; // color: $primary-color;
} // }
.el-icon { // .el-icon {
color: $primary-color; // color: $primary-color;
} // }
&::before { &::before {
position: absolute; position: absolute;
border-radius: 4px; border-radius: 4px;
top: 13px; top: 14px;
bottom: 15px; bottom: 15px;
left: 12px; left: 12px;
width: 4px; width: 4px;
@ -83,24 +54,7 @@
} }
} }
} }
.el-sub-menu {
:deep(.el-sub-menu) {
margin: 10px;
span {
color: rgba(31, 35, 41, 1);
}
.el-icon {
color: rgba(31, 35, 41, 1);
}
.el-sub-menu__title {
background-color: $menu-item-backgroup-color !important;
height: 44px;
border-radius: 4px !important;
}
&.is-opened,
&.is-active { &.is-active {
.el-sub-menu__title { .el-sub-menu__title {
span { span {
@ -112,19 +66,12 @@
} }
} }
} }
.el-sub-menu__title {
.el-menu {
background-color: $menu-item-backgroup-color; background-color: $menu-item-backgroup-color;
} box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
.el-menu-item {
border-radius: 4px !important;
margin-left: 0px !important;
min-width: 100% !important;
height: 44px; height: 44px;
} border-radius: 4px !important;
} &:hover {
.el-menu-item:hover {
.el-icon { .el-icon {
color: $primary-color; color: $primary-color;
} }
@ -133,18 +80,89 @@
color: $primary-color; color: $primary-color;
} }
} }
.el-sub-menu:hover {
.sub-icon {
color: $primary-color;
} }
.el-menu {
.sub-span { padding: 0;
color: $primary-color; .el-menu-item {
box-shadow: none;
padding-left: 35px !important;
} }
} }
} }
.el-menu--collapse {
width: 85px;
} }
.menu-popper {
.el-menu {
background-color: $menu-backgroup-color !important;
padding: 4px 8px;
}
}
// .el-menu--popup {
// padding: 4px;
// background: none !important;
// :deep(.el-sub-menu) {
// margin: 10px;
// span {
// color: rgba(31, 35, 41, 1);
// }
// .el-icon {
// color: rgba(31, 35, 41, 1);
// }
// .el-sub-menu__title {
// background-color: $menu-item-backgroup-color !important;
// height: 44px;
// border-radius: 4px !important;
// }
// &.is-opened,
// &.is-active {
// .el-sub-menu__title {
// span {
// color: $primary-color;
// }
// .el-icon {
// color: $primary-color;
// }
// }
// }
// .el-menu {
// background-color: $menu-item-backgroup-color;
// }
// .el-menu-item {
// border-radius: 4px !important;
// margin-left: 0px !important;
// min-width: 100% !important;
// height: 44px;
// }
// }
// .el-menu-item:hover {
// .el-icon {
// color: $primary-color;
// }
// span {
// color: $primary-color;
// }
// }
// .el-sub-menu:hover {
// .sub-icon {
// color: $primary-color;
// }
// .sub-span {
// color: $primary-color;
// }
// }
// }
// .el-menu--collapse {
// width: 85px;
// }

29
frontend/src/components/app-layout/menu/index.vue
Unescape View File

@ -15,9 +15,7 @@
:collapse="isCollapse" :collapse="isCollapse"
:collapse-transition="false" :collapse-transition="false"
:unique-opened="true" :unique-opened="true"
background-color="#191a20" popper-class="menu-popper"
text-color="#bdbdc0"
active-text-color="#fff"
> >
<SubItem :menuList="routerMenus"></SubItem> <SubItem :menuList="routerMenus"></SubItem>
<el-menu-item> <el-menu-item>
@ -97,6 +95,29 @@ onMounted(async () => {
}); });
</script> </script>
<style scoped lang="scss"> <style lang="scss">
@import './index.scss'; @import './index.scss';
.menu {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background-color: $menu-backgroup-color;
transition: all 0.3s ease;
.el-scrollbar {
height: calc(100% - 55px);
.el-menu {
flex: 1;
overflow: auto;
overflow-x: hidden;
border-right: none;
}
}
.menu-footer {
height: 30px;
background-color: #c0c0c0;
text-align: center;
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save