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

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

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