github/CRMEB
1
0
Fork 0
mirror of https://github.com/crmeb/CRMEB.git synced 2026-10-31 23:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: 菜单样式

Browse Source
This commit is contained in:
From-wh 2023-03-02 18:02:29 +08:00
parent f7ab5a681d
commit c162c5e135
7 changed files with 70 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
template/admin/src/components/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="custom-bread-crumb">
<Breadcrumb :style="{ fontSize: `${fontSize}px` }">
<BreadcrumbItem v-for="item in list" :key="`${item.path}`" :to="item.path" v-if="listLast[0].path !== homePath">
<BreadcrumbItem v-for="item in list" :key="`${item.path}`" v-if="listLast[0].path !== homePath">
<common-icon style="margin-right: 4px" :type="item.icon || ''" />
{{ item.title }}
</BreadcrumbItem>

23
template/admin/src/components/main/components/side-menu/collapsed-menu.vue
View File

@ -5,6 +5,7 @@
:class="hideTitle ? '' : 'collased-menu-dropdown'"
:transfer="hideTitle"
:placement="placement"
transfer-class-name="dro-style"
>
<a
class="drop-menu-a"
@ -89,18 +90,32 @@ export default {
<style lang="less" scoped>
@import './side-menu.less';
.collased-menu-dropdown {
/deep/ .collased-menu-dropdown {
width: 100%;
}
.child-menu {
display: flex;
justify-content: space-between;
width: 100%;
}
/deep/ .ivu-dropdown-rel {
width: @side-width !important;
.ivu-dropdown-menu /deep/ .ivu-dropdown-rel {
width: 100% !important;
font-size: 14px;
line-height: 14px;
padding: 14px 10px;
}
.ivu-dropdown-menu /deep/ .ivu-dropdown-item {
width: 130px !important;
padding: 14px 10px;
font-size: 14px !important;
line-height: 14px;
}
.drop-menu-a /deep/ .ivu-dropdown-rel {
width: @side-width !important;
width: 160px !important;
font-size: 14px;
line-height: 14px;
color: #fff;
}
</style>

45
template/admin/src/components/main/components/side-menu/side-menu.vue
View File

@ -44,9 +44,7 @@
:parent-item="item"
></side-menu-item>
<menu-item v-else :name="item.path" :key="`menu${item.path}`"
><span class="title">{{
item.children[0].title
}}</span></menu-item
><span class="title">{{ item.children[0].title }}</span></menu-item
>
</template>
<template v-else>
@ -226,11 +224,10 @@ export default {
/deep/ .ivu-menu-vertical .ivu-menu-submenu-title-icon {
right: 8px;
}
</style>
<style lang="less">
@import './side-menu.less';
.ivu-layout-sider{
.ivu-layout-sider {
overflow: unset !important;
}
.ivu-menu {
@ -373,24 +370,24 @@ export default {
line-height: 14px;
}
}
// .ivu-menu-submenu {
// .ivu-menu-item {
// padding-left: 23px !important;
// }
// .ivu-menu-submenu {
// .ivu-menu-submenu-title {
// padding-left: 23px !important;
// }
// .ivu-menu-item {
// padding-left: 35px !important;
// }
// }
// }
// .ivu-menu-vertical .ivu-menu-submenu-title {
// font-size: 14px;
// padding: 12px 10px;
// line-height: 16px;
// }
.ivu-menu-submenu {
.ivu-menu-item {
padding-left: 35px !important;
}
.ivu-menu-submenu {
.ivu-menu-submenu-title {
padding-left: 35px !important;
}
.ivu-menu-item {
padding-left: 48px !important;
}
}
}
.ivu-menu-vertical .ivu-menu-submenu-title {
font-size: 14px;
padding: 16px 20px;
line-height: 16px;
}
.cat-name {
width: 100%;
font-size: 14px;
@ -456,7 +453,7 @@ export default {
flex-wrap: nowrap;
.ivu-icon {
font-size: 14px;
margin-right: 8px;
margin-right: 6px;
}
.title {
font-size: 14px;

23
template/admin/src/components/main/components/tags-nav/tags-nav.less
View File

@ -10,6 +10,18 @@
width: 100%;
height: 100%;
}
.tag-nav-wrapper {
// height: 10px;
background: unset;
width: 100%;
margin: 0 15px 0 0px;
overflow: hidden;
padding: 0;
height: 42px;
margin-bottom: 14px;
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}
.tags-nav {
position: relative;
margin-top: 4px;
@ -31,7 +43,6 @@
position: absolute;
top: 0px;
height: 100%;
background: #f5f7f9;
padding-top: 3px;
z-index: 10;
button {
@ -40,10 +51,10 @@
text-align: center;
}
&.left-btn {
left: -16px;
left: 1px;
}
&.right-btn {
right: -16px;
right: 16px;
// border-right: 1px solid #f0f0f0;
}
}
@ -57,7 +68,7 @@
.scroll-body {
height: ~'calc(100% - 1px)';
display: inline-block;
padding: 1px 4px 0;
padding: 1px 20px 0 20px;
position: absolute;
overflow: visible;
white-space: nowrap;
@ -65,6 +76,10 @@
.ivu-tag-dot-inner {
transition: background 0.2s ease;
}
.ivu-tag-dot{
border: none !important;
border-right: 1px solid #f2f2f2 !important;
}
}
}
.contextmenu {

1
template/admin/src/components/main/components/tags-nav/tags-nav.vue
View File

@ -41,6 +41,7 @@
@contextmenu.prevent.native="contextMenu(item, $event)"
>{{ showTitleInside(item) }}</Tag
>
<!-- <div class="tag" v-for="(item, index) in list" :key="`tag-nav-${index}`">{{ showTitleInside(item) }}</div> -->
</transition-group>
</div>
</div>

19
template/admin/src/components/main/main.less
View File

@ -14,6 +14,7 @@
background: #fff;
padding: 0 20px;
width: 100%;
border-bottom: 1px solid #f2f2f2;
}
.ivu-layout-header {
height: @bar-height;
@ -27,12 +28,6 @@
height: ~'calc(100vh - 60px)';
overflow: hidden;
}
.tag-nav-wrapper {
padding: 0;
height: 42px;
background: #f0f0f0;
margin-bottom: 14px;
}
.content-wrapper {
padding: 0 16px;
height: ~'calc(100% - 80px)';
@ -47,16 +42,16 @@
}
}
.ivu-menu-item > i {
margin-right: 8px !important;
margin-right: 6px !important;
}
.ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
margin-right: 8px !important;
margin-right: 6px !important;
}
.collased-menu-dropdown {
width: 100%;
margin: 0;
line-height: normal;
padding: 7px 0 6px 16px;
// padding: 7px 0 6px 16px;
clear: both;
font-size: 12px !important;
white-space: nowrap;
@ -78,5 +73,9 @@
}
.ivu-select-dropdown.ivu-dropdown-transfer {
max-height: 400px;
max-height: 800px;
}
.dro-style {
// padding: 0 !important;
}

5
template/admin/src/components/main/main.vue
View File

@ -287,11 +287,6 @@ export default {
height: 50px;
transition: all 1s;
}
.main .tag-nav-wrapper {
// height: 10px;
background: unset;
padding: 0 15px 0 17px;
}
.open-image {
display: flex;
align-items: center;