mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-10-30 14:31:04 +00:00
style: 菜单样式
This commit is contained in:
From-wh
parent
a937e300ce
commit
6b74aeacaf
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-if="showFullScreenBtn" class="full-screen-btn-con">
|
||||
<Tooltip :content="value ? '退出全屏' : '全屏'" placement="bottom">
|
||||
<Icon @click.native="handleChange" :type="value ? 'ios-contract' : 'ios-qr-scanner'" :size="23"></Icon>
|
||||
<Icon @click.native="handleChange" :type="value ? 'ios-contract' : 'ios-qr-scanner'" :size="22"></Icon>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -4,12 +4,9 @@
|
||||
@size: 40px;
|
||||
.sider-trigger-a {
|
||||
padding: 6px;
|
||||
width: @size;
|
||||
height: @size;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
// color: #fff;
|
||||
margin-top: 5px;
|
||||
cursor: pointer;
|
||||
z-index: 9999;
|
||||
.iconcaidanshouqi {
|
||||
|
||||
@ -33,18 +33,16 @@ export default {
|
||||
max-width: 90px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid #d9dadd;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
color: #515a6e;
|
||||
}
|
||||
@import './sider-trigger.less';
|
||||
.sider-trigger-a {
|
||||
padding: 14px 6px;
|
||||
margin-left: 10px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.iconcaidanshouqi {
|
||||
font-size: 16px;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<Dropdown @on-click="jumpUrl" :transfer="true">
|
||||
<div>
|
||||
<Badge dot :count="needList.length ? needList.length : 0">
|
||||
<Icon type="ios-notifications-outline" size="26"></Icon>
|
||||
<Icon type="ios-notifications-outline" size="24"></Icon>
|
||||
</Badge>
|
||||
</div>
|
||||
<DropdownMenu slot="list">
|
||||
@ -24,7 +24,7 @@
|
||||
font-size: 14px !important;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
color: #515a6e;
|
||||
}
|
||||
.header-notice .ivu-dropdown-item ~ .ivu-dropdown-item {
|
||||
border-top: 1px solid #e8eaec;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="full-screen-btn-con" @click="handleReload">
|
||||
<Icon class="icon" type="md-refresh" color='#fff' />
|
||||
<div class="refresh-btn-con" @click="handleReload">
|
||||
<Icon class="icon" type="ios-refresh" color="rgba(255,255,255,.8)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -18,10 +18,11 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.full-screen-btn-con {
|
||||
.refresh-btn-con {
|
||||
margin-right: 17px !important;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
font-size: 28px;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
.icon:hover{
|
||||
animation: rotate 6s linear infinite;
|
||||
|
||||
@ -66,8 +66,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
handleClick(name) {
|
||||
console.log(name)
|
||||
this.$emit('on-click', name);
|
||||
console.log(name, this.activeMenuPath);
|
||||
this.$emit('on-click', name, this.activeMenuPath);
|
||||
},
|
||||
handleMousemove(event, children) {
|
||||
const { pageY } = event;
|
||||
|
||||
@ -35,9 +35,7 @@
|
||||
color: #495060;
|
||||
}
|
||||
}
|
||||
.ivu-select-dropdown{
|
||||
// left: 95px !important;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
// padding-left: 6px;
|
||||
}
|
||||
|
||||
@ -176,6 +176,10 @@ export default {
|
||||
console.log(newRoute, 'newRoutenewRoute');
|
||||
this.activePath = newRoute.path;
|
||||
// this.activeMenuPath = newRoute.matched[0].path;
|
||||
if (this.collapsed) {
|
||||
sessionStorage.setItem('menuActive', newRoute.matched[0].path);
|
||||
this.activeMenuPath = newRoute.matched[0].path;
|
||||
}
|
||||
this.handleUpdateMenuState();
|
||||
},
|
||||
immediate: true,
|
||||
@ -185,9 +189,9 @@ export default {
|
||||
console.log(this.menuList);
|
||||
this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName());
|
||||
if (sessionStorage.getItem('menuActive')) {
|
||||
this.activeMenuPath = sessionStorage.getItem('menuActive');
|
||||
this.catName = sessionStorage.getItem('menuActiveTitle');
|
||||
this.getChildrenList(sessionStorage.getItem('menuActive'));
|
||||
// this.activeMenuPath = sessionStorage.getItem('menuActive');
|
||||
// this.catName = sessionStorage.getItem('menuActiveTitle');
|
||||
// this.getChildrenList(sessionStorage.getItem('menuActive'));
|
||||
} else {
|
||||
this.handleSelect(this.openedNames[0]);
|
||||
}
|
||||
@ -202,9 +206,9 @@ export default {
|
||||
},
|
||||
handleCollpasedChange(state) {
|
||||
console.log(state);
|
||||
this.collapsed = state;
|
||||
// this.collapsed = state;
|
||||
this.$emit('on-coll-change', state);
|
||||
setCookies('collapsed', state);
|
||||
// setCookies('collapsed', state);
|
||||
},
|
||||
handleSelect(name, type) {
|
||||
this.childOptions = [];
|
||||
@ -252,8 +256,44 @@ export default {
|
||||
this.turnToPage(name);
|
||||
},
|
||||
collHandleSelect(name) {
|
||||
this.activeMenuPath = this.findParentById(this.menuList, name);
|
||||
this.turnToPage(name);
|
||||
},
|
||||
findParentById(arr, path) {
|
||||
var parentId = '没有父元素',
|
||||
hasParentId = (function loop(arr) {
|
||||
return arr.some((item) => {
|
||||
if (item.path === path) {
|
||||
return true;
|
||||
} else if (Array.isArray(item.children)) {
|
||||
parentId = item.path;
|
||||
return loop(item.children);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
})(arr);
|
||||
return hasParentId ? parentId : '未找到对应父元素';
|
||||
},
|
||||
|
||||
// findParentsById(arr, id) {
|
||||
// var parentIds = [],
|
||||
// index = 0,
|
||||
// hasParentId = (function loop(arr, index) {
|
||||
// return arr.some((item) => {
|
||||
// if (item.MENU_ID === id) {
|
||||
// parentIds = parentIds.slice(0, index);
|
||||
// return true;
|
||||
// } else if (Array.isArray(item.MENU_INFO)) {
|
||||
// parentIds[index] = item.MENU_ID;
|
||||
// return loop(item.MENU_INFO, index + 1);
|
||||
// } else {
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
// })(arr, index);
|
||||
// return hasParentId ? parentIds : [];
|
||||
// },
|
||||
turnToPage(route, all) {
|
||||
let { path, name, params, query } = {};
|
||||
if (typeof route === 'string' && !all) path = route;
|
||||
@ -298,6 +338,7 @@ export default {
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import './side-menu.less';
|
||||
|
||||
.ivu-menu {
|
||||
.side-menu-wrapper {
|
||||
position: relative;
|
||||
@ -340,6 +381,7 @@ export default {
|
||||
background-color: #2d8cf0 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.ivu-select-dropdown.ivu-dropdown-transfer
|
||||
.collased-menu-dropdown:hover
|
||||
> .ivu-dropdown-rel
|
||||
@ -393,8 +435,8 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
}
|
||||
}
|
||||
.ivu-menu-vertical .ivu-menu-item:first-child {
|
||||
@ -432,8 +474,8 @@ export default {
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
padding: 18px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
}
|
||||
> .ivu-menu {
|
||||
@ -447,8 +489,22 @@ export default {
|
||||
width: 0px;
|
||||
}
|
||||
}
|
||||
/deep/ .ivu-select-dropdown {
|
||||
left: 95px !important;
|
||||
}
|
||||
.ivu-dropdown-rel {
|
||||
min-width: 75px !important;
|
||||
}
|
||||
.menu-collapsed {
|
||||
padding: 0 8px;
|
||||
.drop-menu-a:hover {
|
||||
color: #1890ff;
|
||||
background-color: rgba(24, 144, 255, 0.1) !important;
|
||||
border-radius: 4px;
|
||||
.ivu-icon {
|
||||
color: #1890ff !important;
|
||||
}
|
||||
}
|
||||
.drop-menu-a.on {
|
||||
background-color: #1890ff !important;
|
||||
color: #fff !important;
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
// background: #fff;
|
||||
background: #f5f7f9;
|
||||
padding-top: 3px;
|
||||
z-index: 10;
|
||||
button {
|
||||
|
||||
@ -9,8 +9,9 @@
|
||||
<user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
|
||||
<language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px" :lang="local" />
|
||||
<header-notice></header-notice>
|
||||
<fullscreen v-model="isFullscreen" style="margin-right: 10px" />
|
||||
<Reload @on-reload="handleReload"></Reload>
|
||||
|
||||
<fullscreen v-model="isFullscreen" style="margin-right: 10px" />
|
||||
<error-store
|
||||
v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader"
|
||||
:has-read="hasReadErrorPage"
|
||||
|
||||
@ -500,7 +500,6 @@ body {
|
||||
.ivu-mb-16 {
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
.ivu-mt,
|
||||
.ivu-mt-16 {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user