|
|
@ -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; |
|
|
|
xuziqiang
3 months ago
