feat: 样式调整
This commit is contained in:
xuziqiang
9
lib/saas/asset/icon/close.svg
Normal file
9
lib/saas/asset/icon/close.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<!-- <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1625651626016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3205" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M853.333333 921.6c-20.48 0-34.133333-6.826667-47.786666-20.48l-682.666667-682.666667c-27.306667-27.306667-27.306667-68.266667 0-95.573333s68.266667-27.306667 95.573333 0l682.666667 682.666667c27.306667 27.306667 27.306667 68.266667 0 95.573333-13.653333 13.653333-27.306667 20.48-47.786667 20.48z" p-id="3206"></path><path d="M170.666667 921.6c-20.48 0-34.133333-6.826667-47.786667-20.48-27.306667-27.306667-27.306667-68.266667 0-95.573333l682.666667-682.666667c27.306667-27.306667 68.266667-27.306667 95.573333 0s27.306667 68.266667 0 95.573333l-682.666667 682.666667c-13.653333 13.653333-27.306667 20.48-47.786666 20.48z" p-id="3207"></path></svg> -->
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
|
||||
<rect width="14" height="14" />
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path opacity="0.4611" d="M7.61936 7L10.8767 3.74132C11.0411 3.57683 11.0411 3.30564 10.8767 3.14115L10.8589 3.12337C10.6945 2.95888 10.4234 2.95888 10.259 3.12337L7.00167 6.3865L3.74434 3.12337C3.57992 2.95888 3.30885 2.95888 3.14442 3.12337L3.12665 3.14115C2.95778 3.30564 2.95778 3.57683 3.12665 3.74132L6.38397 7L3.12665 10.2587C2.96223 10.4232 2.96223 10.6944 3.12665 10.8588L3.14442 10.8766C3.30885 11.0411 3.57992 11.0411 3.74434 10.8766L7.00167 7.61795L10.259 10.8766C10.4234 11.0411 10.6945 11.0411 10.8589 10.8766L10.8767 10.8588C11.0411 10.6944 11.0411 10.4232 10.8767 10.2587L7.61936 7Z" />
|
||||
</g>
|
||||
</svg>
|
||||
8
lib/saas/asset/icon/fastBackward.svg
Normal file
8
lib/saas/asset/icon/fastBackward.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<!-- <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M793.6 329.6L568 491.2c-9.6 8-9.6 22.4 0 30.4l224 172.8c12.8 9.6 30.4 1.6 30.4-14.4V345.6c0-16-17.6-24-28.8-16zM531.2 329.6L305.6 491.2c-9.6 8-9.6 22.4 0 30.4l224 172.8c12.8 9.6 30.4 1.6 30.4-14.4V345.6c0-16-16-24-28.8-16zM267.2 699.2c17.6 0 32-14.4 32-32V356.8c0-17.6-14.4-32-32-32s-32 14.4-32 32v310.4c0 17.6 14.4 32 32 32z" /></svg> -->
|
||||
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.6001 3.5L9.8001 0V7L5.6001 3.5Z" fill="#909090"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.3999 3.5L5.5999 0V7L1.3999 3.5Z" fill="#909090"/>
|
||||
<rect width="1.4" height="7" fill="#909090"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 972 B |
@@ -1,6 +1,6 @@
|
||||
<svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="20" height="9" viewBox="0 0 20 9" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 6356610" opacity="0.65">
|
||||
<path id="Vector" d="M6.89084 5.13637L9.85448 8.1L8.95448 9L4.45446 4.49997L8.95448 -8.86233e-07L9.85448 0.899993L6.89091 3.86357L19.0918 3.86351L19.0918 5.13631L6.89084 5.13637Z" fill="white" fill-opacity="0.3"/>
|
||||
<path id="Vector_2" d="M1.27246 0.0904379L1.27246 9L-0.000335336 9L-0.000334557 0.0904378L1.27246 0.0904379Z" fill="white" fill-opacity="0.65"/>
|
||||
<path id="Vector" d="M6.89084 5.13637L9.85448 8.1L8.95448 9L4.45446 4.49997L8.95448 -8.86233e-07L9.85448 0.899993L6.89091 3.86357L19.0918 3.86351L19.0918 5.13631L6.89084 5.13637Z" fill="currentColor" fill-opacity="0.3"/>
|
||||
<path id="Vector_2" d="M1.27246 0.0904379L1.27246 9L-0.000335336 9L-0.000334557 0.0904378L1.27246 0.0904379Z" fill="currentColor" fill-opacity="0.65"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 503 B After Width: | Height: | Size: 525 B |
@@ -28,8 +28,9 @@
|
||||
#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: 40px !important;
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
.ant-menu-vertical.ant-menu-sub, .ant-menu-vertical-left.ant-menu-sub, .ant-menu-vertical-right.ant-menu-sub{
|
||||
min-width: 0 !important;
|
||||
}
|
||||
@@ -86,35 +87,35 @@
|
||||
top:0;
|
||||
left:0;
|
||||
content: '';
|
||||
background-color: #37abc4;
|
||||
// background-color:red;
|
||||
opacity: .1;
|
||||
}
|
||||
//
|
||||
//.ant-menu-item:not(.ant-menu-item-selected) a:hover {
|
||||
// .ant-menu-item:not(.ant-menu-item-selected) a:hover {
|
||||
// color: @text-color;
|
||||
//}
|
||||
// }
|
||||
//
|
||||
//.ant-menu-item::after {
|
||||
// .ant-menu-item::after {
|
||||
// z-index: 2;
|
||||
//}
|
||||
// }
|
||||
//
|
||||
//.ant-menu-light .ant-menu-submenu:not(.ant-menu-submenu-selected) .ant-menu-submenu-title:hover {
|
||||
// color: @text-color;
|
||||
//}
|
||||
//
|
||||
//.ant-layout-sider {
|
||||
// .ant-layout-sider {
|
||||
// max-width: @layout-sider-width !important;
|
||||
// min-width: @layout-sider-width !important;
|
||||
// width: @layout-sider-width !important;
|
||||
//}
|
||||
//
|
||||
//.ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
|
||||
// }
|
||||
|
||||
// .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
|
||||
// color: @layout-sider-arrow-color;
|
||||
//}
|
||||
//
|
||||
//.ant-menu-submenu-arrow {
|
||||
// color: @layout-sider-arrow-color;
|
||||
//}
|
||||
// }
|
||||
|
||||
.ant-menu-submenu-arrow {
|
||||
color: @layout-sider-arrow-color;
|
||||
}
|
||||
//
|
||||
//
|
||||
|
||||
@@ -128,7 +129,7 @@
|
||||
//
|
||||
.ant-btn-primary:hover, .ant-btn-primary:focus {
|
||||
// color: #fff !important;
|
||||
color: #fff ;
|
||||
// color: #fff ;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgb(0 0 0 / 5%);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@@ -141,6 +141,10 @@ body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ant-menu.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
|
||||
padding: auto;
|
||||
}
|
||||
|
||||
.ns-view-spinning {
|
||||
position: fixed !important;
|
||||
width: calc(100% - @ns-content-padding * 2 - @layout-sider-width) !important;
|
||||
|
||||
@@ -12,15 +12,16 @@
|
||||
@font-size-base: 14px; // 主字号
|
||||
|
||||
|
||||
@layout-body-background: #f0f2f5; //框架背景色
|
||||
@layout-body-background: #fff; //框架背景色
|
||||
@layout-header-hover:rgba(0, 0, 0, 0.06);//默认退出hover色
|
||||
@layout-header-background: #37abc4; // 头部背景色
|
||||
@layout-header-background: #fff; // 头部背景色
|
||||
@ant-layout-sider-collapsed-background:rgb(255, 255, 255);//导航栏收缩后背景色
|
||||
@layout-header-height: 48px;
|
||||
@layout-header-height: 72px;
|
||||
@layout-header-padding: 0 50px;
|
||||
|
||||
@layout-sider-width: 208px; //侧边导航宽度
|
||||
@layout-sider-arrow-color: #808d96; //侧边导航箭头颜色
|
||||
@layout-sider-width: 220px; //侧边导航宽度
|
||||
@layout-sider-arrow-color: @black; //侧边导航箭头颜色
|
||||
|
||||
|
||||
// Border color
|
||||
@border-color-base: hsv(0, 0, 85%); // base border outline a component
|
||||
@@ -53,4 +54,11 @@
|
||||
|
||||
//list-table
|
||||
@ns-content-padding: 24px;
|
||||
@ns-nav-shutters-height: 31px;
|
||||
@ns-nav-shutters-height: 48px;
|
||||
|
||||
|
||||
// main-content
|
||||
@ns-content-bg: #f1f2f6;
|
||||
@ns-box-shadow: 0px 5px 16px #e4e6e8;
|
||||
@ns-gap: 20px;
|
||||
@ns-border-radius: 12px;
|
||||
@@ -12,13 +12,15 @@
|
||||
:menuList="newMenu"
|
||||
:initSiderKey="selectedSiderKeys"
|
||||
:initSiderOpenKey="selectedSiderOpenKeys" />
|
||||
<a-layout>
|
||||
<a-layout class="ns-application-layout-main">
|
||||
<newNsTags v-if="configStore.useHistoryTag" />
|
||||
<ns-tags v-else />
|
||||
<!-- <NsBreadcrumb v-else :breadcrumbList="breadcrumbList" /> -->
|
||||
<NsBreadcrumb :breadcrumbList="breadcrumbList" />
|
||||
<a-layout-content class="ns-content">
|
||||
<!-- <transition name="fade-slide" mode="out-in"> -->
|
||||
<!-- <div> -->
|
||||
<ns-content />
|
||||
<!-- </div> -->
|
||||
<!-- </transition> -->
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
@@ -322,21 +324,29 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.ns-application-layout-main {
|
||||
padding-top: calc(@layout-header-height + @ns-nav-shutters-height * 2);
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
.ns-content {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
padding-top: 80px;
|
||||
background-color: #e5ebf0;
|
||||
padding: @ns-gap;
|
||||
// padding-top: calc(@layout-header-height + @ns-nav-shutters-height);
|
||||
background-color: @ns-content-bg;
|
||||
> div {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
margin: 0 16px 16px 16px;
|
||||
background-color: @white;
|
||||
border-radius: @ns-border-radius;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
// margin: 0 16px 16px 16px;
|
||||
}
|
||||
.ns-content-main {
|
||||
// margin: @ns-content-padding;
|
||||
// margin: @ns-gap;
|
||||
min-height: calc(100% - 48px);
|
||||
height: calc(100% - 16px);
|
||||
// height: calc(100% - 16px);
|
||||
// background-color: @white;
|
||||
}
|
||||
.ns-view {
|
||||
|
||||
@@ -85,14 +85,14 @@
|
||||
<style lang="less" scoped>
|
||||
.NsBreadcrumb {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
min-height: 42px;
|
||||
padding: 0 @ns-gap;
|
||||
min-height: @ns-nav-shutters-height;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
z-index: 505;
|
||||
top: calc(@layout-header-height + @ns-nav-shutters-height);
|
||||
z-index: 5;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,11 +9,13 @@
|
||||
style="width: 192px; height: 48px; object-fit: contain" />
|
||||
<ns-icon v-else name="headerLogin" class="headerLogin" style="width: auto; height: 48px" />
|
||||
</div>
|
||||
<div>
|
||||
<component v-if="headerSlot" :is="headerSlot.component" v-bind="headerSlot.componentProps" />
|
||||
</div>
|
||||
|
||||
<div class="header-menu">
|
||||
<a-menu style="width: 100%" mode="horizontal" :selectedKeys="initHeaderKey">
|
||||
<a-menu
|
||||
v-if="menuList?.length"
|
||||
style="width: 100%"
|
||||
mode="horizontal"
|
||||
:selectedKeys="initHeaderKey">
|
||||
<a-menu-item v-for="item in menuList" :key="item.name">
|
||||
<div @click="tochildren(item)">
|
||||
<ns-icon :name="item.meta.icon" size="16" /><span>{{ item.meta.title }}</span>
|
||||
@@ -61,17 +63,17 @@
|
||||
</template>
|
||||
</template>
|
||||
</a-menu>
|
||||
<div v-else>
|
||||
<div v-if="configStore.projectName" class="projectTitle">{{ configStore.projectName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nsHeader_action">
|
||||
<div class="projectName action" v-if="showProject">
|
||||
{{ projectName ? projectName : enterpriseName }}
|
||||
<div>
|
||||
<component
|
||||
v-if="headerSlot"
|
||||
:is="headerSlot.component"
|
||||
v-bind="headerSlot.componentProps" />
|
||||
</div>
|
||||
<div
|
||||
class="projectName action"
|
||||
v-if="['服务管理平台', '报表中心'].includes(configStore.resourceInfo?.application?.label)"
|
||||
@click="backDoor"
|
||||
>{{ '返回门户' }}</div
|
||||
>
|
||||
<div v-if="bellInfo.isShow" class="bells action" @click="backMessage">
|
||||
<a-badge :count="messageCount > 99 ? 99 : messageCount">
|
||||
<ns-icon name="bells" size="32" />
|
||||
@@ -80,7 +82,7 @@
|
||||
<a-dropdown :trigger="['hover']">
|
||||
<div class="userName action">
|
||||
<!-- <img src="/asset/image/login/adminIcon.png" /> -->
|
||||
<ns-icon class="headerAdminIcon" name="headerAdminIcon" size="20" />
|
||||
<!-- <ns-icon class="headerAdminIcon" name="headerAdminIcon" size="20" /> -->
|
||||
<span
|
||||
style="
|
||||
display: block;
|
||||
@@ -424,11 +426,22 @@
|
||||
}
|
||||
}
|
||||
:deep(.ant-menu-submenu-title) {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
// color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.header-menu {
|
||||
flex: 1;
|
||||
.projectTitle {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 2.33px;
|
||||
line-height: 40px;
|
||||
color: @primary-color;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
:deep(.header-menu .ant-menu-title-content) {
|
||||
div {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
// color: rgba(255, 255, 255, 0.9);
|
||||
.ns-icon {
|
||||
margin-right: 7px;
|
||||
transform: translateY(2px);
|
||||
@@ -436,7 +449,7 @@
|
||||
}
|
||||
}
|
||||
:deep(.ant-menu-submenu-title .ant-menu-title-content) {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
// color: rgba(255, 255, 255, 0.9);
|
||||
.ns-icon {
|
||||
margin-right: 7px;
|
||||
transform: translateY(2px);
|
||||
@@ -447,10 +460,13 @@
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
background-image: url(/asset/image/header.png);
|
||||
background-size: 100% 100%;
|
||||
// background-image: url(/asset/image/header.png);
|
||||
// background-size: 100% 100%;
|
||||
box-shadow: @ns-box-shadow;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-badge-count) {
|
||||
@@ -504,10 +520,10 @@
|
||||
}
|
||||
|
||||
.nsHeader_action {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: @black;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
width: 208px;
|
||||
// width: 208px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
|
||||
@@ -4,12 +4,13 @@
|
||||
<div class="ns-left-menu-space" :class="{ 'ns-left-menu-space-collapsed': collapsed }">
|
||||
<a-layout-sider
|
||||
class="ns-left-menu"
|
||||
:width="208"
|
||||
:collapsedWidth="48"
|
||||
:width="sideWidth"
|
||||
:collapsed="collapsed"
|
||||
breakpoint="lg"
|
||||
:trigger="null"
|
||||
v-if="menuList && menuList[0] && menuList[0].children">
|
||||
{{ $refs.getComputedStyle }}
|
||||
<a-menu
|
||||
mode="inline"
|
||||
:inlineIndent="16"
|
||||
@@ -21,9 +22,9 @@
|
||||
v-if="item.children !== undefined && !item.meta.hideChildren && !item.isHide"
|
||||
:key="item.name">
|
||||
<template #title>
|
||||
<span role="img" class="anticon"
|
||||
><ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16"
|
||||
/></span>
|
||||
<span role="img" class="anticon">
|
||||
<ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" />
|
||||
</span>
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</template>
|
||||
<!-- 跳转外部链接 -->
|
||||
@@ -37,27 +38,31 @@
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
{{ newOpen.name }}
|
||||
</a></a-menu-item
|
||||
>
|
||||
</a>
|
||||
</a-menu-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="sitem in checkAuthList(item.children)" :key="sitem.name">
|
||||
<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></a-menu-item
|
||||
>
|
||||
:key="sitem.name">
|
||||
<router-link style="margin-left: 8px" :to="{ name: sitem.name }">
|
||||
{{ sitem.meta.title }}
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-sub-menu
|
||||
class="threeSubMenu"
|
||||
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>
|
||||
<span
|
||||
role="img"
|
||||
style="margin-left: 8px"
|
||||
class="anticon"
|
||||
v-show="sitem.meta.icon">
|
||||
<ns-icon :name="sitem.meta.icon" size="16" />
|
||||
</span>
|
||||
<span>{{ sitem.meta.title }}</span>
|
||||
</template>
|
||||
<div v-for="ditem in checkAuthList(sitem.children)" :key="ditem.name">
|
||||
@@ -70,9 +75,9 @@
|
||||
role="img"
|
||||
style="margin-left: 8px"
|
||||
class="anticon"
|
||||
v-show="ditem.meta.icon"
|
||||
><ns-icon :name="ditem.meta.icon" size="16"
|
||||
/></span>
|
||||
v-show="ditem.meta.icon">
|
||||
<ns-icon :name="ditem.meta.icon" size="16" />
|
||||
</span>
|
||||
<span>{{ ditem.meta.title }}</span>
|
||||
</template>
|
||||
<div
|
||||
@@ -82,11 +87,11 @@
|
||||
:class="
|
||||
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></a-menu-item
|
||||
>
|
||||
v-if="fiveFloorItem.meta?.type !== 'op'">
|
||||
<router-link style="margin-left: 8px" :to="{ name: fiveFloorItem.name }">
|
||||
{{ fiveFloorItem?.meta?.title ? fiveFloorItem?.meta?.title : '' }}
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</div>
|
||||
</a-sub-menu>
|
||||
|
||||
@@ -113,7 +118,6 @@
|
||||
<ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" />
|
||||
</span>
|
||||
<span style="margin-left: 8px">{{ item.meta.title }}</span>
|
||||
<!-- </span> -->
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
@@ -128,7 +132,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
|
||||
import { defineComponent, inject, ref, watchEffect } from 'vue';
|
||||
import { computed, defineComponent, inject, onMounted, ref, watchEffect } from 'vue';
|
||||
import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
|
||||
import { authorizationService } from '/nerv-base/store/modules/authorization-service';
|
||||
import { Emitter } from 'mitt';
|
||||
@@ -148,6 +152,10 @@
|
||||
setup: (props) => {
|
||||
const mittEmit = inject('mittEmit') as Emitter<emitEvents>;
|
||||
const router = useRouter();
|
||||
const sideWidth = computed(() => {
|
||||
return getComputedStyle(document.querySelector('.ns-left-menu-trigger')!).width;
|
||||
});
|
||||
|
||||
const dealRouter = (menuList, routerInfo) => {
|
||||
menuList?.forEach((item) => {
|
||||
if (item.name === routerInfo.name) {
|
||||
@@ -204,45 +212,49 @@
|
||||
checkOpAuth,
|
||||
checkAuthList,
|
||||
checkAuth,
|
||||
sideWidth,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// :deep(.ant-layout-sider) {
|
||||
// width: @layout-sider-width !important;
|
||||
// max-width: @layout-sider-width !important;
|
||||
// }
|
||||
.ns-left-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: calc(100% - 40px);
|
||||
// background-color: @white;
|
||||
background-image: url(/asset/image/side.png);
|
||||
background-color: @white;
|
||||
// background-image: url(/asset/image/side.png);
|
||||
background-size: cover;
|
||||
padding-top: 48px;
|
||||
padding-top: calc(@layout-header-height + 12px);
|
||||
:deep(.ant-layout-sider-children) {
|
||||
background-color: transparent;
|
||||
// background-color: transparent;
|
||||
.ant-menu-root {
|
||||
background-color: transparent;
|
||||
// background-color: transparent;
|
||||
}
|
||||
.ant-menu-submenu-title {
|
||||
// color: rgba(255, 255, 255, 0.9);
|
||||
// color: @black;
|
||||
.ant-menu-submenu-arrow {
|
||||
// color:inherit
|
||||
// color: rgba(255, 255, 255, 0.9);
|
||||
// color: @black;
|
||||
}
|
||||
}
|
||||
.ant-menu {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: @black;
|
||||
}
|
||||
.ant-menu-item a {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
// color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ant-menu-submenu-expand-icon,
|
||||
.ant-menu-submenu-arrow {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
// color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ant-menu-sub.ant-menu-inline {
|
||||
background-color: #001027;
|
||||
// background-color: #001027;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -254,12 +266,14 @@
|
||||
margin-left: 8px !important;
|
||||
}
|
||||
.ns-left-menu-space {
|
||||
width: 208px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
z-index: 9;
|
||||
box-shadow: @ns-box-shadow;
|
||||
// background-color: #fff;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
flex: 0 0 208px;
|
||||
flex: 0 0 @layout-sider-width;
|
||||
&.ns-left-menu-space-collapsed {
|
||||
width: 48px;
|
||||
flex: 0 0 48px;
|
||||
@@ -279,14 +293,14 @@
|
||||
}
|
||||
|
||||
.ns-left-menu-trigger {
|
||||
width: 208px;
|
||||
width: @layout-sider-width;
|
||||
height: 40px;
|
||||
transition: all 0.2s;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
background: #163361;
|
||||
// background: #163361;
|
||||
bottom: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -329,7 +343,7 @@
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #fff;
|
||||
// background: #fff;
|
||||
border: unset;
|
||||
top: 14px;
|
||||
left: 20px;
|
||||
@@ -341,7 +355,7 @@
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #fff;
|
||||
// background: #fff;
|
||||
border: unset;
|
||||
top: 14px;
|
||||
left: 40px;
|
||||
@@ -361,6 +375,6 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
:deep(.ns-left-menu .ant-layout-sider-children .ant-menu-submenu-arrow) {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
// color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -266,7 +266,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
top: @layout-header-height;
|
||||
z-index: 505;
|
||||
}
|
||||
#iframeApplication .ns-tabs {
|
||||
@@ -281,7 +281,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
top: @layout-header-height;
|
||||
z-index: 505;
|
||||
}
|
||||
:deep(.ant-tabs-nav) {
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div :class="leftMenuTrigger ? 'nav-shutters-collapsed' : 'nav-shutters'">
|
||||
<div
|
||||
class="nav-shutters-container"
|
||||
:class="leftMenuTrigger ? 'nav-shutters-collapsed' : 'nav-shutters'">
|
||||
<div class="shutters-left">
|
||||
<ns-icon
|
||||
@click.stop="moveTags('right')"
|
||||
@@ -17,11 +19,11 @@
|
||||
:id="selectTags.path === item.path ? 'ischoice' : ''">
|
||||
<span>{{ isdisabledl || isdisabledr ? item.title.substring(0, 4) : item.title }}</span>
|
||||
<ns-icon
|
||||
style="min-width: 12px; min-height: 12px; color: rgba(0, 0, 0, 0.45)"
|
||||
v-if="item.path !== baseHeader.redirect"
|
||||
name="close"
|
||||
@click="delTags($event, item)" /> </li
|
||||
></div>
|
||||
@click="delTags($event, item)" />
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="shutters-right">
|
||||
@@ -173,8 +175,8 @@
|
||||
if (str !== '') {
|
||||
offset = str.match(/\d+/)[0];
|
||||
}
|
||||
this.left = offsetLeft + menuMinWidth * (i - 1) - 50 - offset;
|
||||
this.top = offsetTop;
|
||||
this.left = offsetLeft + menuMinWidth * (i - 1) - 30 - offset;
|
||||
this.top = offsetTop - 20;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
@@ -276,29 +278,33 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
.nav-shutters {
|
||||
width: calc(100% - 208px);
|
||||
width: calc(100% - @layout-sider-width);
|
||||
// padding: 0 12px;
|
||||
min-height: 32px;
|
||||
height: 32px;
|
||||
min-height: @ns-nav-shutters-height;
|
||||
height: @ns-nav-shutters-height;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
top: @layout-header-height;
|
||||
z-index: 2;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.nav-shutters-collapsed {
|
||||
width: calc(100% - 40px);
|
||||
// padding: 0 12px;
|
||||
min-height: 32px;
|
||||
height: 32px;
|
||||
min-height: @ns-nav-shutters-height;
|
||||
height: @ns-nav-shutters-height;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
z-index: 505;
|
||||
top: @layout-header-height;
|
||||
z-index: 10;
|
||||
}
|
||||
.nav-shutters-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.shutters-left {
|
||||
height: @ns-nav-shutters-height;
|
||||
@@ -312,8 +318,8 @@
|
||||
.icon_kj {
|
||||
mix-blend-mode: normal;
|
||||
cursor: pointer;
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
// width: 12px !important;
|
||||
// height: 12px !important;
|
||||
}
|
||||
}
|
||||
.shutters-right {
|
||||
@@ -327,8 +333,8 @@
|
||||
justify-content: center;
|
||||
.icon_kt {
|
||||
cursor: pointer;
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
// width: 12px !important;
|
||||
// height: 12px !important;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
@@ -339,8 +345,9 @@
|
||||
}
|
||||
|
||||
.fatherTags {
|
||||
width: calc(100% - 64px);
|
||||
height: 31px;
|
||||
flex: 1;
|
||||
// width: calc(100% - 64px);
|
||||
height: @ns-nav-shutters-height;
|
||||
min-width: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -395,10 +402,21 @@
|
||||
}
|
||||
}
|
||||
#ischoice {
|
||||
background-color: #f5f9fb;
|
||||
// background-color: #f5f9fb;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: 0;
|
||||
width: 30%;
|
||||
height: 3px;
|
||||
background-color: @primary-color;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
#ischoice span {
|
||||
color: @text-color !important;
|
||||
color: @primary-color !important;
|
||||
}
|
||||
.checkBox {
|
||||
height: 200px;
|
||||
@@ -419,7 +437,7 @@
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 2px;
|
||||
border-radius: @border-radius-base;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
|
||||
Reference in New Issue
Block a user