KH/kh-device-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] 框架调整

Browse Source
This commit is contained in:
danshihao
2024-04-03 13:42:17 +08:00
parent 86b8709481
commit de2f5e877a
40 changed files with 630 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/page/GlobalLayout.vue
+102 -69
View File
@@ -1,59 +1,6 @@
<template>
<a-layout class="layout" :class="[device]">
<template v-if="layoutMode === 'sidemenu'">
<a-drawer
v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + navTheme"
placement="left"
@close="() => this.collapsed = false"
:closable="false"
:visible="collapsed"
width="200px"
>
<side-menu
mode="inline"
v-if="device === 'mobile'"
:menus="menus"
@menuSelect="menuSelect"
@updateMenuTitle="handleUpdateMenuTitle"
:theme="navTheme"
:collapsed="false"
:collapsible="true"></side-menu>
</a-drawer>
<side-menu
v-show="device === 'desktop'"
mode="inline"
:menus="menus"
@menuSelect="myMenuSelect"
@updateMenuTitle="handleUpdateMenuTitle"
:theme="navTheme"
:collapsed="collapsed"
:collapsible="true"></side-menu>
</template>
<!-- 下次优化这些代码 -->
<template v-else>
<a-drawer
v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + navTheme"
placement="left"
@close="() => this.collapsed = false"
:closable="false"
:visible="collapsed"
width="200px"
>
<side-menu
mode="inline"
:menus="menus"
@menuSelect="menuSelect"
@updateMenuTitle="handleUpdateMenuTitle"
:theme="navTheme"
:collapsed="false"
:collapsible="true"></side-menu>
</a-drawer>
</template>
<a-layout
:class="[layoutMode, `content-width-${contentWidth}`]"
:style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
@@ -66,17 +13,32 @@
:device="device"
@toggle="toggle"
@updateMenuTitle="handleUpdateMenuTitle"
@selectFirstLevelMenu="selectFirstLevelMenu"
/>
<!-- 内容布局 -->
<a-layout :style="{backgroundColor: '#001125', padding: '24px 24px 0'}">
<!-- 左侧二级菜单 -->
<a-layout-sider class="layout-sider" v-if="menuChildren" width="174">
<s-menu
:collapsed="collapsed"
:menu="menuChildren"
:theme="navTheme"
@select="menuSelect"
@updateMenuTitle="handleUpdateMenuTitle"
mode="inline">
</s-menu>
</a-layout-sider>
<!-- layout content -->
<a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
<slot></slot>
</a-layout-content>
<!-- layout content -->
<a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
<slot></slot>
</a-layout-content>
</a-layout>
<!-- layout footer -->
<a-layout-footer style="padding: 0">
<global-footer/>
</a-layout-footer>
<!-- layout footer -->
<!-- <a-layout-footer style="padding: 0">-->
<!-- <global-footer/>-->
<!-- </a-layout-footer>-->
</a-layout>
<!-- update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ---- -->
@@ -86,12 +48,13 @@
</template>
<script>
import SideMenu from '@/components/menu/SideMenu'
import SMenu from '@/components/menu/index'
import GlobalHeader from '@/components/page/GlobalHeader'
import GlobalFooter from '@/components/page/GlobalFooter'
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapActions, mapState } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import FirstLevelMenu from '@comp/menu/FirstLevelMenu'
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
// import SettingDrawer from '@/components/setting/SettingDrawer'
// 注释这个因为在个人设置模块已经加载了SettingDrawer页面
@@ -100,7 +63,8 @@ import { mixin, mixinDevice } from '@/utils/mixin.js'
export default {
name: 'GlobalLayout',
components: {
SideMenu,
FirstLevelMenu,
SMenu,
GlobalHeader,
GlobalFooter
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
@@ -114,7 +78,8 @@ export default {
return {
collapsed: false,
activeMenu: {},
menus: []
menus: [],
menuChildren: []
}
},
computed: {
@@ -158,6 +123,11 @@ export default {
this.collapsed = false
}
},
// 选择一级标题
selectFirstLevelMenu (menu) {
this.activeFirstMenu = menu
this.menuChildren = menu.children || []
},
// update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
myMenuSelect (value) {
// 此处触发动态路由被点击事件
@@ -317,9 +287,9 @@ export default {
.header {
height: 64px;
padding: 0 12px 0 0;
padding: 0 12px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
//box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
position: relative;
}
@@ -334,7 +304,7 @@ export default {
display: inline-block;
transition: all .3s;
height: 70%;
//height: 70%;
line-height: 46px;
&.action-full {
@@ -367,7 +337,7 @@ export default {
display: inline-block;
transition: all .3s;
height: 70%;
//height: 70%;
line-height: 46px;
&.action-full {
@@ -565,7 +535,8 @@ export default {
.layout-content {
margin: 24px 24px 0;
height: 64px;
padding: 0 12px 0 0;
padding: 0 12px;
background-color: #001125 !important;
}
}
@@ -743,4 +714,66 @@ export default {
padding: 9px 16px !important;
overflow-wrap: break-word;
}
// 左侧菜单
.layout-sider {
background-color: transparent !important;
.ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
display: none;
}
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
border-right: none;
}
.ant-menu-item {
margin-bottom: 24px !important;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: transparent;
background-image: url("~@assets/images/menu/menu.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center right;
& > a, &:hover > a {
font-style: italic;
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
font-weight: bold;
font-size: 16px;
color: rgba(255,255,255,0.96);
line-height: 24px;
text-shadow: 0 0 2px rgba(0,0,0,0.6);
text-align: left;
text-transform: none;
color: #fff;
letter-spacing: 1px;
}
&:active {
background-color: transparent;
background-image: url("~@assets/images/menu/menu.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center right;
}
&.ant-menu-item-selected {
background-image: url("~@assets/images/menu/menu-act.png");
}
}
.ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
display: none;
}
.ant-menu-vertical > .ant-menu-item, .ant-menu-vertical-left > .ant-menu-item, .ant-menu-vertical-right > .ant-menu-item, .ant-menu-inline > .ant-menu-item, .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
height: 46px;
line-height: 46px;
}
// 背景色设置透明
.ant-menu, .ant-menu-submenu > .ant-menu {
background-color: transparent;
color: #fff;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: transparent;
}
}
</style>