gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 16:29:17 +08:00
Code

feat: 修改样式

Browse Source
This commit is contained in:
wangdan 2023-02-06 12:56:11 +08:00 committed by wangdan-fit2cloud
parent 7266e2afbd
commit a99ea07086
4 changed files with 165 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -10,5 +10,17 @@ defineProps<{ isCollapse: boolean }>();
</script>
<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>

228
frontend/src/components/app-layout/menu/index.scss
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 {
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;
.el-menu {
background: none !important;
width: 100%;
padding: 0 7px;
.el-menu-item {
border-radius: 4px !important;
background-color: $menu-item-backgroup-color;
margin: 10px;
height: 44px !important;
margin: 6px 0;
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 {
color: rgba(31, 35, 41, 1);
// span {
// color: rgba(31, 35, 41, 1);
// }
// .el-icon {
// color: rgba(31, 35, 41, 1);
// }
&:hover {
.el-icon {
color: $primary-color;
}
span {
color: $primary-color;
}
}
.el-icon {
color: rgba(31, 35, 41, 1);
}
&.is-active {
background-color: #ffffff;
border: 2px solid $primary-color;
span {
color: $primary-color;
}
// span {
// color: $primary-color;
// }
.el-icon {
color: $primary-color;
}
// .el-icon {
// color: $primary-color;
// }
&::before {
position: absolute;
border-radius: 4px;
top: 13px;
top: 14px;
bottom: 15px;
left: 12px;
width: 4px;
@ -83,24 +54,7 @@
}
}
}
: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,
.el-sub-menu {
&.is-active {
.el-sub-menu__title {
span {
@ -112,39 +66,103 @@
}
}
}
.el-menu {
.el-sub-menu__title {
background-color: $menu-item-backgroup-color;
}
.el-menu-item {
border-radius: 4px !important;
margin-left: 0px !important;
min-width: 100% !important;
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
height: 44px;
}
}
border-radius: 4px !important;
&:hover {
.el-icon {
color: $primary-color;
}
.el-menu-item:hover {
.el-icon {
color: $primary-color;
span {
color: $primary-color;
}
}
}
span {
color: $primary-color;
}
}
.el-sub-menu:hover {
.sub-icon {
color: $primary-color;
}
.sub-span {
color: $primary-color;
.el-menu {
padding: 0;
.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
View File

@ -15,9 +15,7 @@
:collapse="isCollapse"
:collapse-transition="false"
:unique-opened="true"
background-color="#191a20"
text-color="#bdbdc0"
active-text-color="#fff"
popper-class="menu-popper"
>
<SubItem :menuList="routerMenus"></SubItem>
<el-menu-item>
@ -97,6 +95,29 @@ onMounted(async () => {
});
</script>
<style scoped lang="scss">
<style lang="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>