提交 8fbc3df1 编写于 作者: WodahsOrez's avatar WodahsOrez

lxm--添加头部菜单

上级 5d43aa7c
...@@ -61,7 +61,7 @@ import AppOrgSector from './components/app-orgsector/app-orgsector.vue' ...@@ -61,7 +61,7 @@ import AppOrgSector from './components/app-orgsector/app-orgsector.vue'
import AppBuild from './components/app-build/app-build.vue' import AppBuild from './components/app-build/app-build.vue'
import AppStudioAction from './components/app-studioaction/app-studioaction.vue' import AppStudioAction from './components/app-studioaction/app-studioaction.vue'
import AppDebugActions from './components/app-debug-actions/app-debug-actions.vue' import AppDebugActions from './components/app-debug-actions/app-debug-actions.vue'
import AppHeaderMenus from './components/app-header-menus/app-header-menus.vue' import AppTopMenus from './components/app-top-menus/app-top-menus.vue'
import AppColumnLink from './components/app-column-link/app-column-link.vue' import AppColumnLink from './components/app-column-link/app-column-link.vue'
import AppDataUploadView from './components/app-data-upload/app-data-upload.vue' import AppDataUploadView from './components/app-data-upload/app-data-upload.vue'
import DropDownListDynamic from './components/dropdown-list-dynamic/dropdown-list-dynamic.vue' import DropDownListDynamic from './components/dropdown-list-dynamic/dropdown-list-dynamic.vue'
...@@ -147,7 +147,7 @@ export const AppComponents = { ...@@ -147,7 +147,7 @@ export const AppComponents = {
v.component('app-build', AppBuild); v.component('app-build', AppBuild);
v.component('app-studioaction', AppStudioAction); v.component('app-studioaction', AppStudioAction);
v.component('app-debug-actions', AppDebugActions); v.component('app-debug-actions', AppDebugActions);
v.component('app-header-menus', AppHeaderMenus); v.component('app-top-menus', AppTopMenus);
v.component('app-column-link', AppColumnLink); v.component('app-column-link', AppColumnLink);
v.component('app-data-upload', AppDataUploadView); v.component('app-data-upload', AppDataUploadView);
v.component('dropdown-list-dynamic', DropDownListDynamic); v.component('dropdown-list-dynamic', DropDownListDynamic);
......
.app-header-menus { .app-top-menus {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
line-height: 20px; line-height: 20px;
>.app-header-menu-item{ >.app-top-menu-item{
height: 24px; height: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -13,13 +13,13 @@ ...@@ -13,13 +13,13 @@
cursor: pointer; cursor: pointer;
} }
>.app-header-menu-item.icon { >.app-top-menu-item.icon {
>.app-header-menu-item-icon { >.app-top-menu-item-icon {
font-size: 20px; font-size: 20px;
} }
>.app-header-menu-item-img { >.app-top-menu-item-img {
height: 20px; height: 20px;
width: 20px; width: 20px;
...@@ -30,19 +30,19 @@ ...@@ -30,19 +30,19 @@
} }
} }
>.app-header-menu-item.icon:hover{ >.app-top-menu-item.icon:hover{
color: #68758e; color: #68758e;
text-decoration: none; text-decoration: none;
} }
>.app-header-menu-item.text { >.app-top-menu-item.text {
border-radius: 4px; border-radius: 4px;
border: 1px solid #8893a7; border: 1px solid #8893a7;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
padding: 2px 4px; padding: 2px 4px;
>.app-header-menu-item-icon { >.app-top-menu-item-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
margin-top: -3px; margin-top: -3px;
} }
>.app-header-menu-item-img { >.app-top-menu-item-img {
height: 16px; height: 16px;
width: 16px; width: 16px;
margin-right: 3px; margin-right: 3px;
...@@ -63,11 +63,11 @@ ...@@ -63,11 +63,11 @@
} }
} }
>.app-header-menu-item.text:hover { >.app-top-menu-item.text:hover {
color: #107fff; color: #107fff;
border: 1px solid #107fff; border: 1px solid #107fff;
} }
} }
.app-header-menus:hover { .app-top-menus:hover {
background: none !important; background: none !important;
} }
\ No newline at end of file
<template> <template>
<div class="app-header-menus"> <div class="app-top-menus">
<div v-for="(menu,index) in menus" :key="index" class="app-header-menu-item text" @click="openWindow(menu)"> <div v-for="(menu,index) in menus" :key="index" class="app-top-menu-item text" @click="openWindow(menu)">
<div class="app-header-menu-item-icon"> <div class="app-top-menu-item-icon">
<i :class="menu.iconcls" :aria-hidden="true" /> <i :class="menu.iconcls" :aria-hidden="true" />
</div> </div>
<div class="app-header-menu-item-text">{{$t(menu.title)}}</div> <div class="app-top-menu-item-text">{{$t(menu.title)}}</div>
</div> </div>
</div> </div>
...@@ -17,13 +17,13 @@ import { Environment } from '@/environments/environment'; ...@@ -17,13 +17,13 @@ import { Environment } from '@/environments/environment';
@Component({ @Component({
}) })
export default class AppHeaderMenus extends Vue { export default class AppTopMenus extends Vue {
/** /**
* 菜单数据 * 菜单数据
* *
* @type {any} * @type {any}
* @memberof AppHeaderMenus * @memberof AppTopMenus
*/ */
public menus:any = [ public menus:any = [
{ {
...@@ -55,7 +55,7 @@ export default class AppHeaderMenus extends Vue { ...@@ -55,7 +55,7 @@ export default class AppHeaderMenus extends Vue {
/** /**
* 触发界面行为 * 触发界面行为
* *
* @memberof AppHeaderMenus * @memberof AppTopMenus
*/ */
public openWindow(menu:any){ public openWindow(menu:any){
window.open(menu.url, '_blank'); window.open(menu.url, '_blank');
...@@ -66,5 +66,5 @@ export default class AppHeaderMenus extends Vue { ...@@ -66,5 +66,5 @@ export default class AppHeaderMenus extends Vue {
</script> </script>
<style lang='less'> <style lang='less'>
@import "./app-header-menus.less"; @import "./app-top-menus.less";
</style> </style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册