From cecd3a0325397727bbf19b18cbfe2566c9ddb0f0 Mon Sep 17 00:00:00 2001 From: xuziqiang <1344691446@qq.com> Date: Mon, 24 Jun 2024 15:24:21 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Bsider=E6=A0=B7=E5=BC=8F=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hx-ai-intelligent/src/App.vue | 294 +++++++++++++++++----------------- hx-op/src/App.vue | 4 +- lib/saas/theme/global-antd.less | 72 +++++---- lib/saas/theme/variable.less | 1 + lib/saas/view/system/layout/sider.vue | 82 ++++++---- 5 files changed, 242 insertions(+), 211 deletions(-) diff --git a/hx-ai-intelligent/src/App.vue b/hx-ai-intelligent/src/App.vue index e67918b..d10dc1a 100644 --- a/hx-ai-intelligent/src/App.vue +++ b/hx-ai-intelligent/src/App.vue @@ -43,160 +43,160 @@ diff --git a/hx-op/src/App.vue b/hx-op/src/App.vue index 86b9210..eb9da2d 100644 --- a/hx-op/src/App.vue +++ b/hx-op/src/App.vue @@ -23,7 +23,7 @@ }); - + --> diff --git a/lib/saas/theme/global-antd.less b/lib/saas/theme/global-antd.less index 7744923..7a71979 100644 --- a/lib/saas/theme/global-antd.less +++ b/lib/saas/theme/global-antd.less @@ -1,43 +1,63 @@ /** Ant全局组件样式 */ - .ant-menu-submenu-popup{ - .ant-menu-title-content a{ - margin-left: 0!important; +.ant-menu-submenu-popup { + .ant-menu-title-content a { + margin-left: 0 !important; } - .ant-menu-submenu-title .anticon + span{ + .ant-menu-submenu-title .anticon + span { margin-left: 0 !important; } .ant-menu-submenu { - height: 40px ; + height: 40px; margin-top: 4px !important; margin-bottom: 4px !important; // display: flex; // align-items: center; } - .ant-menu-submenu-title .ant-menu-title-content .anticon{ + .ant-menu-submenu-title .ant-menu-title-content .anticon { margin-left: 0 !important; margin-right: 6px; } - li{ + li { display: flex; align-items: center; } +} +//侧边栏收缩单个菜单样式 +.ant-menu-inline-collapsed-tooltip { + .ant-tooltip-inner, + .ant-tooltip-arrow-content { + background-color: @white; + a { + color: @black !important; + } + } } -#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; + +#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-bottom: 0px !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 { min-width: 0 !important; } -.ant-menu-submenu .ant-menu-sub{ +.ant-menu-submenu .ant-menu-sub { min-width: 0 !important; } -.ant-layout-sider-children{ +.ant-layout-sider-children { padding-bottom: 40px; } @@ -84,11 +104,11 @@ width: 100%; height: 100%; position: absolute; - top:0; - left:0; + top: 0; + left: 0; content: ''; // background-color:red; - opacity: .1; + opacity: 0.1; } // // .ant-menu-item:not(.ant-menu-item-selected) a:hover { @@ -114,26 +134,23 @@ // } .ant-menu-submenu-arrow { - color: @layout-sider-arrow-color; + color: @layout-sider-arrow-color; } // // - - // //btn // .ant-btn:hover { // border-color: @border-color-base; // } -// -.ant-btn-primary:hover, .ant-btn-primary:focus { +// +.ant-btn-primary:hover, +.ant-btn-primary:focus { // color: #fff !important; // color: #fff ; } - - //禁用时鼠标光标 .ant-btn[disabled], .ant-btn[disabled]:hover, @@ -154,7 +171,6 @@ box-shadow: none !important; } - .ant-input-affix-wrapper-focused { box-shadow: none !important; } @@ -195,8 +211,6 @@ } } - - //.ant-btn[disabled], //.ant-btn[disabled]:hover { // border: 1px solid transparent; @@ -266,13 +280,15 @@ // 表头加粗 .ant-table-thead > tr > th { font-weight: bold; - } +} //表头不换行 -.ant-table-thead > tr > th{ +.ant-table-thead > tr > th { word-break: keep-all; white-space: nowrap; } -.ant-menu.ant-menu-dark, .ant-menu-dark .ant-menu-sub, .ant-menu.ant-menu-dark .ant-menu-sub{ +.ant-menu.ant-menu-dark, +.ant-menu-dark .ant-menu-sub, +.ant-menu.ant-menu-dark .ant-menu-sub { background-size: cover; } diff --git a/lib/saas/theme/variable.less b/lib/saas/theme/variable.less index 7165bb8..36db100 100644 --- a/lib/saas/theme/variable.less +++ b/lib/saas/theme/variable.less @@ -20,6 +20,7 @@ @layout-header-padding: 0 50px; @layout-sider-width: 220px; //侧边导航宽度 +@layout-sider-collapsed-width: 60px; //侧边导航收缩宽度 @layout-sider-arrow-color: @black; //侧边导航箭头颜色 diff --git a/lib/saas/view/system/layout/sider.vue b/lib/saas/view/system/layout/sider.vue index 9b0c963..b4272a1 100644 --- a/lib/saas/view/system/layout/sider.vue +++ b/lib/saas/view/system/layout/sider.vue @@ -4,7 +4,7 @@
div { // margin-inline: 20px; + // } } - .ant-menu-item a { - // 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; - } + .ant-menu-item-active:not(.ant-menu-item-selected), + .ant-submenu-item-active { + // color: rgba(@primary-color, 0.1) !important; + background-color: rgba(@primary-color, 0.1); + border-radius: 12px; } } } - #iframeApplication .ns-left-menu { - padding-top: 0px; - } - .anticon + span { margin-left: @icon-gap !important; } @@ -301,18 +294,42 @@ height: auto; z-index: 9; box-shadow: @ns-box-shadow; + // background-color: #fff; overflow: hidden; transition: all 0.2s; flex: 0 0 @layout-sider-width; - &.ns-left-menu-space-collapsed { - width: 48px; - flex: 0 0 48px; + // transition: all 0.1s; + // &:not(.ns-left-menu-space-collapsed) :deep(.ant-menu-title-content) { + // padding-left: 8px; + // } + :deep(.ant-menu-item-selected) { + // color: #fff !important; + background: @primary-color; + // border-radius: 12px; + // height: 40px; + // line-height: 40px; + // width: auto; + // margin-inline: @ns-gap; + // padding-left: @ns-gap !important; + position: relative; + a { + color: @white !important; + } } } + .ns-left-menu-space-collapsed { + z-index: 11; + width: @layout-sider-collapsed-width; + flex: 0 0 @layout-sider-collapsed-width; + :deep(.ant-layout-sider-children) { + transition: all 0.1s; + + padding: 0 calc(@ns-gap / 4) !important; + } .ns-left-menu-trigger { - width: 48px !important; + width: @layout-sider-collapsed-width !important; justify-content: center; padding-left: 0px; } @@ -395,12 +412,9 @@ // content: ''; // } - :deep(.ant-menu-title-content) { - padding-left: 8px; - } - :deep(.firstMenuSub .ant-menu-submenu-title) { - padding-left: 8px !important; - } + // :deep(.firstMenuSub .ant-menu-submenu-title) { + // padding-left: 8px !important; + // } :deep(.firstMenuItem-selected) { background: @primary-color!important;