xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 样式调整

Browse Source
This commit is contained in:
xuziqiang
2024-06-21 18:15:32 +08:00
parent d4f17c4c02
commit 0c291263cd
10 changed files with 158 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
hx-ai-intelligent/src/App.vue
View File

@@ -51,28 +51,32 @@
height: 100%; height: 100%;
} }
:deep(.ns-left-menu .firstMenuItem-selected .ant-menu-title-content) { :deep(.ant-menu-title-content) {
background: unset !important; background: unset !important;
z-index: 9 !important;
} }
:deep(.ns-left-menu) { :deep(.ns-left-menu) {
.ant-menu-item-active, .ant-menu-item-selected {
.ant-submenu-item-active {
background: #ecf3ff !important;
}
.ant-menu-item-selected .ant-menu-title-content {
// color: #fff !important; // color: #fff !important;
background: @primary-color; background: @primary-color;
border-radius: 12px; border-radius: 12px;
height: 40px; // height: 40px;
line-height: 40px; // line-height: 40px;
padding: 5px @ns-gap;
position: relative;
a { a {
color: @white !important; color: @white !important;
} }
} }
.ant-menu-item-active,
.ant-submenu-item-active {
// color: rgba(@primary-color, 0.1) !important;
}
} }
:deep(.ant-menu-light.ant-menu-horizontal > .ant-menu-item:hover) { :deep(.ant-menu-light.ant-menu-horizontal > .ant-menu-item:hover) {
background: @primary-color; // background: @primary-color;
} }
// :deep(.ant-menu-inline .ant-menu-submenu-title) { // :deep(.ant-menu-inline .ant-menu-submenu-title) {
// color: rgba(255, 255, 255, 0.9) !important; // color: rgba(255, 255, 255, 0.9) !important;

4
hx-ai-intelligent/src/icon/shebeiguanli.svg
View File

@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.4384765625" height="14.517333984375" viewBox="0 0 15.4384765625 14.517333984375" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.4384765625" height="14.517333984375" viewBox="0 0 15.4384765625 14.517333984375" fill="currentColor">
<path d="M6.32606 8.89293L1.26484 8.89293C0.569183 8.89293 0 8.31818 0 7.61136L0 1.28157C0 0.574753 0.569183 0 1.26484 0L6.32606 0C7.02172 0 7.5909 0.574753 7.5909 1.28157L7.5909 7.61136C7.5909 8.31631 7.02358 8.89293 6.32606 8.89293ZM14.4415 2.05164L11.2533 2.05164C10.7046 2.05164 10.2564 1.59779 10.2564 1.04163L10.2564 1.01001C10.2564 0.453857 10.7046 0 11.2533 0L14.4415 0C14.9902 0 15.4385 0.453857 15.4385 1.01001L15.4385 1.04163C15.4366 1.59779 14.9865 2.05164 14.4415 2.05164ZM14.4415 5.44624L11.2533 5.44624C10.7046 5.44624 10.2564 4.99239 10.2564 4.43623L10.2564 4.40462C10.2564 3.84846 10.7046 3.39459 11.2533 3.39459L14.4415 3.39459C14.9902 3.39459 15.4385 3.84846 15.4385 4.40462L15.4385 4.43623C15.4366 4.99239 14.9865 5.44624 14.4415 5.44624ZM14.4415 8.84457L11.2533 8.84457C10.7046 8.84457 10.2564 8.39072 10.2564 7.83456L10.2564 7.80295C10.2564 7.24678 10.7046 6.79292 11.2533 6.79292L14.4415 6.79292C14.9902 6.79292 15.4385 7.24678 15.4385 7.80295L15.4385 7.83456C15.4366 8.39072 14.9865 8.84457 14.4415 8.84457ZM14.1718 14.5174L1.26484 14.5174C0.569183 14.5174 0 13.9426 0 13.2358L0 11.4018C0 10.6949 0.569183 10.1202 1.26484 10.1202L14.1718 10.1202C14.8674 10.1202 15.4366 10.6949 15.4366 11.4018L15.4366 13.2358C15.4366 13.9426 14.8674 14.5174 14.1718 14.5174Z" fill="#8D96A3" > <path d="M6.32606 8.89293L1.26484 8.89293C0.569183 8.89293 0 8.31818 0 7.61136L0 1.28157C0 0.574753 0.569183 0 1.26484 0L6.32606 0C7.02172 0 7.5909 0.574753 7.5909 1.28157L7.5909 7.61136C7.5909 8.31631 7.02358 8.89293 6.32606 8.89293ZM14.4415 2.05164L11.2533 2.05164C10.7046 2.05164 10.2564 1.59779 10.2564 1.04163L10.2564 1.01001C10.2564 0.453857 10.7046 0 11.2533 0L14.4415 0C14.9902 0 15.4385 0.453857 15.4385 1.01001L15.4385 1.04163C15.4366 1.59779 14.9865 2.05164 14.4415 2.05164ZM14.4415 5.44624L11.2533 5.44624C10.7046 5.44624 10.2564 4.99239 10.2564 4.43623L10.2564 4.40462C10.2564 3.84846 10.7046 3.39459 11.2533 3.39459L14.4415 3.39459C14.9902 3.39459 15.4385 3.84846 15.4385 4.40462L15.4385 4.43623C15.4366 4.99239 14.9865 5.44624 14.4415 5.44624ZM14.4415 8.84457L11.2533 8.84457C10.7046 8.84457 10.2564 8.39072 10.2564 7.83456L10.2564 7.80295C10.2564 7.24678 10.7046 6.79292 11.2533 6.79292L14.4415 6.79292C14.9902 6.79292 15.4385 7.24678 15.4385 7.80295L15.4385 7.83456C15.4366 8.39072 14.9865 8.84457 14.4415 8.84457ZM14.1718 14.5174L1.26484 14.5174C0.569183 14.5174 0 13.9426 0 13.2358L0 11.4018C0 10.6949 0.569183 10.1202 1.26484 10.1202L14.1718 10.1202C14.8674 10.1202 15.4366 10.6949 15.4366 11.4018L15.4366 13.2358C15.4366 13.9426 14.8674 14.5174 14.1718 14.5174Z" fill="currentColor" >
</path> </path>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

2
hx-ai-intelligent/src/icon/shebeiqunkong.svg
View File

@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13.654296875" height="14.517303466796875" viewBox="0 0 13.654296875 14.517303466796875" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13.654296875" height="14.517303466796875" viewBox="0 0 13.654296875 14.517303466796875" fill="none">
<path d="M7.7187 0.222214L12.8503 2.95256C13.345 3.21599 13.6542 3.73064 13.6546 4.29111L13.6546 10.2367C13.6546 10.8 13.3449 11.3159 12.8474 11.5781L7.71483 14.2969C7.15997 14.5908 6.49557 14.5908 5.94072 14.2969L0.80719 11.5791C0.31076 11.3161 0.000213623 10.8004 0 10.2386L0 4.29208C0 3.73071 0.309738 3.21582 0.803329 2.95158L5.93687 0.222214C6.49385 -0.0740738 7.1617 -0.0740738 7.7187 0.222214ZM9.69315 4.92796L6.83699 6.57527L6.81763 6.57527L3.96243 4.92796C3.63583 4.73979 3.21854 4.85202 3.03038 5.17863C2.84222 5.50523 2.95445 5.92252 3.28105 6.11067L6.14592 7.76573L6.14592 10.6712C6.14592 11.0169 6.40453 11.308 6.74785 11.3487L6.82828 11.3536C7.20512 11.3536 7.5106 11.0481 7.5106 10.6712L7.5106 7.76378L10.3755 6.11067C10.7021 5.92197 10.8139 5.50426 10.6252 5.17766C10.4365 4.85106 10.0188 4.73926 9.69217 4.92795L9.69315 4.92796Z" fill="#8D96A3" > <path d="M7.7187 0.222214L12.8503 2.95256C13.345 3.21599 13.6542 3.73064 13.6546 4.29111L13.6546 10.2367C13.6546 10.8 13.3449 11.3159 12.8474 11.5781L7.71483 14.2969C7.15997 14.5908 6.49557 14.5908 5.94072 14.2969L0.80719 11.5791C0.31076 11.3161 0.000213623 10.8004 0 10.2386L0 4.29208C0 3.73071 0.309738 3.21582 0.803329 2.95158L5.93687 0.222214C6.49385 -0.0740738 7.1617 -0.0740738 7.7187 0.222214ZM9.69315 4.92796L6.83699 6.57527L6.81763 6.57527L3.96243 4.92796C3.63583 4.73979 3.21854 4.85202 3.03038 5.17863C2.84222 5.50523 2.95445 5.92252 3.28105 6.11067L6.14592 7.76573L6.14592 10.6712C6.14592 11.0169 6.40453 11.308 6.74785 11.3487L6.82828 11.3536C7.20512 11.3536 7.5106 11.0481 7.5106 10.6712L7.5106 7.76378L10.3755 6.11067C10.7021 5.92197 10.8139 5.50426 10.6252 5.17766C10.4365 4.85106 10.0188 4.73926 9.69217 4.92795L9.69315 4.92796Z" fill="currentColor" >
</path> </path>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
hx-ai-intelligent/src/icon/zuzhiguanli.svg
View File

@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.21484375" height="13.50872802734375" viewBox="0 0 16.21484375 13.50872802734375" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.21484375" height="13.50872802734375" viewBox="0 0 16.21484375 13.50872802734375" fill="none">
<path d="M8.10415 0C9.84551 0.0632347 11.2034 1.39415 11.1426 2.97804C11.1467 3.44998 11.0312 3.91644 10.805 4.34118L13.2695 6.18327C13.5772 5.96724 13.9542 5.84864 14.343 5.84555C15.4184 5.88545 16.2552 6.70962 16.2133 7.68764C16.2353 8.15778 16.0502 8.61648 15.6992 8.9622C15.3482 9.30793 14.8601 9.51217 14.343 9.52972C13.8259 9.51217 13.3379 9.30793 12.9868 8.9622C12.6358 8.61648 12.4508 8.15778 12.4727 7.68764C12.4714 7.46591 12.5125 7.24566 12.5942 7.03676L10.1298 5.19468C9.72493 5.55505 9.21346 5.80042 8.65782 5.90082L8.65782 8.75605C9.81002 9.04805 10.5971 10.0142 10.5686 11.1016C10.618 12.3849 9.51517 13.462 8.10415 13.5087C6.69582 13.4587 5.59701 12.3826 5.64643 11.1017C5.61473 10.0153 6.39954 9.04848 7.55049 8.75606L7.55049 5.90083C6.99538 5.79909 6.48431 5.55392 6.07856 5.1947L3.62083 7.03678C3.70258 7.24568 3.74371 7.46592 3.74236 7.68765C3.76428 8.15779 3.57925 8.61649 3.22823 8.96222C2.87721 9.30794 2.38914 9.51219 1.87206 9.52974C1.35497 9.51219 0.866907 9.30794 0.515883 8.96222C0.164859 8.61649 -0.020171 8.15779 0.00174713 7.68765C-0.0401125 6.70964 0.796688 5.88547 1.87206 5.84557C2.26084 5.84866 2.63785 5.96725 2.94563 6.18328L5.40335 4.3412C5.1771 3.91646 5.06158 3.44999 5.06575 2.97805C5.0049 1.39416 6.36279 0.0632407 8.10415 0L8.10415 0Z" fill="#8D96A3" > <path d="M8.10415 0C9.84551 0.0632347 11.2034 1.39415 11.1426 2.97804C11.1467 3.44998 11.0312 3.91644 10.805 4.34118L13.2695 6.18327C13.5772 5.96724 13.9542 5.84864 14.343 5.84555C15.4184 5.88545 16.2552 6.70962 16.2133 7.68764C16.2353 8.15778 16.0502 8.61648 15.6992 8.9622C15.3482 9.30793 14.8601 9.51217 14.343 9.52972C13.8259 9.51217 13.3379 9.30793 12.9868 8.9622C12.6358 8.61648 12.4508 8.15778 12.4727 7.68764C12.4714 7.46591 12.5125 7.24566 12.5942 7.03676L10.1298 5.19468C9.72493 5.55505 9.21346 5.80042 8.65782 5.90082L8.65782 8.75605C9.81002 9.04805 10.5971 10.0142 10.5686 11.1016C10.618 12.3849 9.51517 13.462 8.10415 13.5087C6.69582 13.4587 5.59701 12.3826 5.64643 11.1017C5.61473 10.0153 6.39954 9.04848 7.55049 8.75606L7.55049 5.90083C6.99538 5.79909 6.48431 5.55392 6.07856 5.1947L3.62083 7.03678C3.70258 7.24568 3.74371 7.46592 3.74236 7.68765C3.76428 8.15779 3.57925 8.61649 3.22823 8.96222C2.87721 9.30794 2.38914 9.51219 1.87206 9.52974C1.35497 9.51219 0.866907 9.30794 0.515883 8.96222C0.164859 8.61649 -0.020171 8.15779 0.00174713 7.68765C-0.0401125 6.70964 0.796688 5.88547 1.87206 5.84557C2.26084 5.84866 2.63785 5.96725 2.94563 6.18328L5.40335 4.3412C5.1771 3.91646 5.06158 3.44999 5.06575 2.97805C5.0049 1.39416 6.36279 0.0632407 8.10415 0L8.10415 0Z" fill="currentColor" >
</path> </path>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

25
hx-ai-intelligent/src/theme/global.less
View File

@@ -11,10 +11,11 @@
// .ant-menu-dark.ant-menu-horizontal>.ant-menu-item:hover { // .ant-menu-dark.ant-menu-horizontal>.ant-menu-item:hover {
// background-color: #43BB79 !important; // background-color: #43BB79 !important;
// } // }
.ant-menu-inline .ant-menu-item, .ant-menu-inline .ant-menu-item,
.ant-menu-inline .ant-menu-submenu-title { .ant-menu-inline .ant-menu-submenu-title {
width: 100% !important; max-width: 100% !important;
transition: none !important;
} }
.ns-basic-table .ant-btn:hover { .ns-basic-table .ant-btn:hover {
@@ -46,17 +47,17 @@
} }
// header菜单字体样式 // header菜单字体样式
.ant-menu-dark.ant-menu-horizontal>.ant-menu-item, // .ant-menu-dark.ant-menu-horizontal>.ant-menu-item,
.ant-menu-dark.ant-menu-horizontal>.ant-menu-submenu { // .ant-menu-dark.ant-menu-horizontal>.ant-menu-submenu {
color: #fff; // color: #fff;
} // }
.ant-menu-dark .ant-menu-item, // .ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title, // .ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item>a, // .ant-menu-dark .ant-menu-item>a,
.ant-menu-dark .ant-menu-item>span>a { // .ant-menu-dark .ant-menu-item>span>a {
color: #fff; // color: #fff;
} // }
@font-face { @font-face {
/*给字体命名*/ /*给字体命名*/

2
lib/saas/theme/global-antd.less
View File

@@ -28,7 +28,7 @@
#app .ant-layout-has-sider .ant-menu-vertical .ant-menu-item,#app .ant-menu-vertical-left .ant-menu-item, #app.ant-menu-vertical-right .ant-menu-item,#app .ant-menu-inline .ant-menu-item,#app .ant-menu-vertical .ant-menu-submenu-title,#app .ant-menu-vertical-left .ant-menu-submenu-title,#app .ant-menu-vertical-right .ant-menu-submenu-title,#app .ant-menu-inline .ant-menu-submenu-title { #app .ant-layout-has-sider .ant-menu-vertical .ant-menu-item,#app .ant-menu-vertical-left .ant-menu-item, #app.ant-menu-vertical-right .ant-menu-item,#app .ant-menu-inline .ant-menu-item,#app .ant-menu-vertical .ant-menu-submenu-title,#app .ant-menu-vertical-left .ant-menu-submenu-title,#app .ant-menu-vertical-right .ant-menu-submenu-title,#app .ant-menu-inline .ant-menu-submenu-title {
margin-top: 0px !important; margin-top: 0px !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
height: 50px !important; // height: 50px !important;
} }
.ant-menu-vertical.ant-menu-sub, .ant-menu-vertical-left.ant-menu-sub, .ant-menu-vertical-right.ant-menu-sub{ .ant-menu-vertical.ant-menu-sub, .ant-menu-vertical-left.ant-menu-sub, .ant-menu-vertical-right.ant-menu-sub{

49
lib/saas/theme/global.less
View File

@@ -137,6 +137,9 @@ body {
height: 100%; height: 100%;
} }
a {
transition: color 0.08s;
}
.ant-layout-sider-children { .ant-layout-sider-children {
overflow: auto; overflow: auto;
} }
@@ -162,7 +165,7 @@ body {
//状态颜色 //状态颜色
.commonStatus { .commonStatus {
&::before{ &::before {
content: ''; content: '';
width: 8px; width: 8px;
height: 8px; height: 8px;
@@ -174,60 +177,60 @@ body {
} }
.statusWarn { .statusWarn {
&::before{ &::before {
background-color: #fa8214; background-color: #fa8214;
} }
} }
.statusSuccess { .statusSuccess {
&::before{ &::before {
background-color: #0D9E3E; background-color: #0d9e3e;
} }
} }
.statusRunning { .statusRunning {
&::before{ &::before {
background-color: #1C4DDC; background-color: #1c4ddc;
} }
} }
.statusError { .statusError {
&::before{ &::before {
background-color: #D4321C; background-color: #d4321c;
} }
} }
.statusEmpty { .statusEmpty {
&::before{ &::before {
width:0; width: 0;
} }
width:0; width: 0;
} }
.statusNotStart { .statusNotStart {
&::before{ &::before {
background-color: #8B98AB; background-color: #8b98ab;
} }
} }
.statusDone{ .statusDone {
&::before{ &::before {
background-color: #697383; background-color: #697383;
} }
} }
.statusInvalid{ .statusInvalid {
&::before{ &::before {
background-color: #AEAEAE; background-color: #aeaeae;
} }
} }
.statusNull { .statusNull {
&::before{ &::before {
background-color: #8B98AB; background-color: #8b98ab;
} }
// background-color: #8B98AB; // background-color: #8B98AB;
}/* */ } /* */
.statusNull2{ .statusNull2 {
&::before{ &::before {
background-color: #697383; background-color: #697383;
} }
// background-color: #697383; // background-color: #697383;

2
lib/saas/theme/variable.less
View File

@@ -41,7 +41,7 @@
@form-item-margin-bottom: 24px; @form-item-margin-bottom: 24px;
//menu //menu
@menu-item-height: 48px; @menu-item-height: 50px;
@menu-item-active-bg: none; @menu-item-active-bg: none;
@menu-item-boundary-margin: 0px; @menu-item-boundary-margin: 0px;

5
lib/saas/view/service/list-table.vue
View File

@@ -106,7 +106,10 @@
@gap: 16px; @gap: 16px;
@border-gap: @gap solid #e5ebf0; @border-gap: @gap solid #e5ebf0;
:deep(.ns-table-container) { :deep(.ns-table-container) {
border-top: @border-gap; // border-top: @border-gap;
.ns-table-search {
border-radius: @ns-border-radius;
}
} }
:deep(.ns-table) { :deep(.ns-table) {

160
lib/saas/view/system/layout/sider.vue
View File

@@ -13,7 +13,7 @@
{{ $refs.getComputedStyle }} {{ $refs.getComputedStyle }}
<a-menu <a-menu
mode="inline" mode="inline"
:inlineIndent="16" :inlineIndent="20"
:openKeys="collapsed ? [] : initSiderOpenKey" :openKeys="collapsed ? [] : initSiderOpenKey"
:selectedKeys="initSiderKey" :selectedKeys="initSiderKey"
v-for="(item, index) in menuList[0].children" v-for="(item, index) in menuList[0].children"
@@ -23,7 +23,7 @@
:key="item.name"> :key="item.name">
<template #title> <template #title>
<span role="img" class="anticon"> <span role="img" class="anticon">
<ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" /> <ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="15" />
</span> </span>
<span>{{ item.meta.title }}</span> <span>{{ item.meta.title }}</span>
</template> </template>
@@ -47,8 +47,11 @@
<a-menu-item <a-menu-item
v-if="(sitem.children === undefined || sitem.meta.hideChildren) && !sitem.isHide" v-if="(sitem.children === undefined || sitem.meta.hideChildren) && !sitem.isHide"
:key="sitem.name"> :key="sitem.name">
<router-link style="margin-left: 8px" :to="{ name: sitem.name }"> <router-link :to="{ name: sitem.name }">
{{ sitem.meta.title }} <span role="img" class="anticon" v-if="sitem.meta.icon">
<ns-icon :name="sitem.meta.icon ? sitem.meta.icon : ''" size="15" />
</span>
<span>{{ sitem?.meta?.title }}</span>
</router-link> </router-link>
</a-menu-item> </a-menu-item>
<a-sub-menu <a-sub-menu
@@ -56,12 +59,8 @@
v-if="sitem.children !== undefined && !sitem.meta.hideChildren && !sitem.isHide" v-if="sitem.children !== undefined && !sitem.meta.hideChildren && !sitem.isHide"
:key="sitem.name"> :key="sitem.name">
<template #title> <template #title>
<span <span role="img" class="anticon" v-show="sitem.meta.icon">
role="img" <ns-icon :name="sitem.meta.icon" size="15" />
style="margin-left: 8px"
class="anticon"
v-show="sitem.meta.icon">
<ns-icon :name="sitem.meta.icon" size="16" />
</span> </span>
<span>{{ sitem.meta.title }}</span> <span>{{ sitem.meta.title }}</span>
</template> </template>
@@ -71,12 +70,8 @@
v-if="ditem.children !== undefined && !ditem.isHide" v-if="ditem.children !== undefined && !ditem.isHide"
:key="ditem.name"> :key="ditem.name">
<template #title> <template #title>
<span <span role="img" class="anticon" v-show="ditem.meta.icon">
role="img" <ns-icon :name="ditem.meta.icon" size="15" />
style="margin-left: 8px"
class="anticon"
v-show="ditem.meta.icon">
<ns-icon :name="ditem.meta.icon" size="16" />
</span> </span>
<span>{{ ditem.meta.title }}</span> <span>{{ ditem.meta.title }}</span>
</template> </template>
@@ -88,18 +83,21 @@
initSiderKey.includes(fiveFloorItem.name) ? 'ant-menu-item-selected' : '' initSiderKey.includes(fiveFloorItem.name) ? 'ant-menu-item-selected' : ''
" "
v-if="fiveFloorItem.meta?.type !== 'op'"> v-if="fiveFloorItem.meta?.type !== 'op'">
<router-link style="margin-left: 8px" :to="{ name: fiveFloorItem.name }"> <router-link :to="{ name: fiveFloorItem.name }">
{{ fiveFloorItem?.meta?.title ? fiveFloorItem?.meta?.title : '' }} {{ fiveFloorItem?.meta?.title ? fiveFloorItem?.meta?.title : '' }}123
</router-link> </router-link>
</a-menu-item> </a-menu-item>
</div> </div>
</a-sub-menu> </a-sub-menu>
<a-menu-item v-if="ditem.meta?.type !== 'op' && item.children === undefined" <a-menu-item v-if="ditem.meta?.type !== 'op' && item.children === undefined">
><router-link style="margin-left: 8px" :to="{ name: ditem.name }">{{ <router-link :to="{ name: ditem.name }">
ditem?.meta?.title ? ditem?.meta?.title : '' <span role="img" class="anticon" v-if="ditem.meta.icon">
}}</router-link></a-menu-item <ns-icon :name="ditem.meta.icon ? ditem.meta.icon : ''" size="15" />
> </span>
<span>{{ ditem?.meta?.title }}123</span>
</router-link>
</a-menu-item>
</div> </div>
</a-sub-menu> </a-sub-menu>
</div> </div>
@@ -115,9 +113,9 @@
:key="item.name"> :key="item.name">
<router-link :to="{ name: item.name }"> <router-link :to="{ name: item.name }">
<span role="img" class="anticon" v-show="item.meta.icon"> <span role="img" class="anticon" v-show="item.meta.icon">
<ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" /> <ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="15" />
</span> </span>
<span style="margin-left: 8px">{{ item.meta.title }}</span> <span>{{ item.meta.title }}</span>
</router-link> </router-link>
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
@@ -219,6 +217,7 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@icon-gap: 12px;
// :deep(.ant-layout-sider) { // :deep(.ant-layout-sider) {
// width: @layout-sider-width !important; // width: @layout-sider-width !important;
// max-width: @layout-sider-width !important; // max-width: @layout-sider-width !important;
@@ -231,30 +230,62 @@
background-color: @white; background-color: @white;
// background-image: url(/asset/image/side.png); // background-image: url(/asset/image/side.png);
background-size: cover; background-size: cover;
padding-top: calc(@layout-header-height + 12px); padding-top: calc(@layout-header-height + @icon-gap);
.ant-menu-item-selected {
// color: #fff !important;
// background: @primary-color;
border-radius: 12px;
height: 40px;
line-height: 40px;
padding: 5px @ns-gap;
position: relative;
a {
color: @white !important;
}
}
.router-link-active::before {
// background-color: @primary-color;
width: 90%;
}
.ant-menu-item-active,
.ant-submenu-item-active {
// color: rgba(@primary-color, 0.1) !important;
}
:deep(.ant-layout-sider-children) { :deep(.ant-layout-sider-children) {
// background-color: transparent; // background-color: transparent;
.ant-menu-root { .ant-menu-root {
// background-color: transparent; // background-color: transparent;
} }
.ant-menu-submenu-title { .ant-menu-submenu-title,
.ant-menu-item {
height: @menu-item-height;
// color: @black; // color: @black;
.ant-menu-submenu-arrow { .ant-menu-submenu-arrow {
// color: @black; // color: @black;
} }
} }
.ant-menu { .ant-menu {
color: @black; color: rgba(@black, 0.85);
}
.ant-menu-item {
// margin-inline: 20px;
} }
.ant-menu-item a { .ant-menu-item a {
// color: rgba(255, 255, 255, 0.9); // color: rgba(@black, 0.8);
} }
.ant-menu-submenu-expand-icon, .ant-menu-submenu-expand-icon,
.ant-menu-submenu-arrow { .ant-menu-submenu-arrow {
// color: rgba(255, 255, 255, 0.9); // color: rgba(255, 255, 255, 0.9);
} }
.ant-menu-inline {
}
.ant-menu-sub.ant-menu-inline { .ant-menu-sub.ant-menu-inline {
// background-color: #001027; // background-color: #001027;
> div {
// margin-inline: 20px;
}
} }
} }
} }
@@ -262,8 +293,8 @@
padding-top: 0px; padding-top: 0px;
} }
.ant-menu-submenu-title .anticon + span { .anticon + span {
margin-left: 8px !important; margin-left: @icon-gap !important;
} }
.ns-left-menu-space { .ns-left-menu-space {
width: 100%; width: 100%;
@@ -318,12 +349,12 @@
font-size: 18px; font-size: 18px;
line-height: 64px; line-height: 64px;
transform: rotate(0deg); transform: rotate(0deg);
transition: color 0.3s; transition: color 0.2s;
}
.ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-expand-icon,
.ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
color: red !important;
} }
// .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-expand-icon,
// .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
// color: red !important;
// }
.ant-menu-submenu-selected .secendIcon { .ant-menu-submenu-selected .secendIcon {
color: @primary-color !important; color: @primary-color !important;
} }
@@ -339,37 +370,38 @@
border: unset !important; border: unset !important;
content: ''; content: '';
} }
:deep(.ant-menu-sub .ant-menu-item-selected::after) { // :deep(.ant-menu-sub .ant-menu-item-selected::after) {
position: absolute; // position: absolute;
width: 2px; // width: 2px;
height: 14px; // height: 14px;
// background: #fff; // // background: #fff;
border: unset; // border: unset;
top: 14px; // top: 14px;
left: 20px; // left: 20px;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
content: ''; // content: '';
// }
// :deep(.ant-menu-submenu .ant-menu-submenu .ant-menu-sub .ant-menu-item-selected::after) {
// position: absolute;
// width: 2px;
// height: 14px;
// // background: #fff;
// border: unset;
// top: 14px;
// left: 40px;
// right: 0;
// bottom: 0;
// content: '';
// }
:deep(.ant-menu-title-content) {
padding-left: 8px;
} }
:deep(.ant-menu-submenu .ant-menu-submenu .ant-menu-sub .ant-menu-item-selected::after) { :deep(.firstMenuSub .ant-menu-submenu-title) {
position: absolute; padding-left: 8px !important;
width: 2px;
height: 14px;
// background: #fff;
border: unset;
top: 14px;
left: 40px;
right: 0;
bottom: 0;
content: '';
} }
// :deep(.ant-menu-title-content) {
// padding-left: 8px;
// }
// :deep(.firstMenuSub .ant-menu-submenu-title) {
// padding-left: 8px !important;
// }
:deep(.firstMenuItem-selected) { :deep(.firstMenuItem-selected) {
background: @primary-color!important; background: @primary-color!important;
border-radius: 4px; border-radius: 4px;