master
parent
e2ad51442a
commit
5b828d1192
@ -0,0 +1,61 @@ |
||||
<nz-layout> |
||||
<nz-header> |
||||
<div nz-row> |
||||
<!-- logo --> |
||||
<div class="logo" nz-col nzSpan="4"> |
||||
<h2>普惠GO管理平台</h2> |
||||
</div> |
||||
<!-- logo --> |
||||
|
||||
<!-- start 顶部菜单 start--> |
||||
<div class="menu" nz-col nzSpan="16"> |
||||
<ul> |
||||
<li *ngFor="let item of menuData" [ngClass]="{'li-selected' : item.selected}" (click)="isSelected(item)">{{item.menuName}}</li> |
||||
</ul> |
||||
</div> |
||||
<!-- end 顶部菜单 end --> |
||||
|
||||
</div> |
||||
</nz-header> |
||||
<nz-layout> |
||||
<nz-sider nzCollapsible [nzCollapsedWidth]="0" > |
||||
<!-- start 左侧导航栏 start --> |
||||
<div [@openClose]="isCollapse ? 'open' : 'closed'" class="side_menu"> |
||||
<div class="side_menu_top" (click)="isCollapse = false"> |
||||
<div class="side_menu_top_icon"> |
||||
<span nz-icon nzType="menu-fold" nzTheme="outline"></span> |
||||
</div> |
||||
<span style="font-size: 14px;">收起</span> |
||||
</div> |
||||
|
||||
<!-- start 菜单内容 end--> |
||||
<div class="side_menu_content"> |
||||
<ul nz-menu nzMode="inline"> |
||||
<li nz-submenu nzOpen *ngFor="let item of leftMenuData" nzTitle="{{item.menuName}}" nzIcon="{{item.menuUrlImg}}" > |
||||
<ul> |
||||
<li nz-menu-group> |
||||
<ul> |
||||
<li nz-menu-item nzMatchRouter *ngFor="let childMenu of item['childMenuList']"> |
||||
<a [routerLink]="[item['menuUrl'], childMenu['menuUrl']]" [queryParams]="{title: item['menuName']}" (click)="clickMenu(childMenu)">{{childMenu['menuName']}}</a> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<!-- start 菜单内容 end --> |
||||
</div> |
||||
<!-- end 左侧导航栏 end --> |
||||
</nz-sider> |
||||
<nz-content class="inner-content"> |
||||
<!-- 主体内容--> |
||||
<div class="content" [ngClass]="{'content-width' : isCollapse}"> |
||||
<app-tab></app-tab> |
||||
</div> |
||||
</nz-content> |
||||
</nz-layout> |
||||
|
||||
|
||||
</nz-layout> |
||||
|
||||
@ -0,0 +1,84 @@ |
||||
nz-header { |
||||
background: #181f47; |
||||
padding: 0 26px; |
||||
.logo { |
||||
h2 { |
||||
color: white; |
||||
} |
||||
} |
||||
.menu { |
||||
width: 52%; |
||||
display: flex; |
||||
justify-content: center; |
||||
ul { |
||||
li { |
||||
height: 56px; |
||||
float: left; |
||||
color: #fff; |
||||
opacity: .65; |
||||
font-size: 14px; |
||||
padding: 0 20px; |
||||
cursor: pointer; |
||||
} |
||||
.li-selected { |
||||
opacity: 1; |
||||
border-bottom: 2px solid #1890ff; |
||||
} |
||||
li:hover { |
||||
opacity: 1; |
||||
border-bottom: 2px solid #1890ff; |
||||
} |
||||
list-style-type: none; /* 移除列表的标记，如果需要的话 */ |
||||
padding: 0; /* 移除padding，如果需要的话 */ |
||||
} |
||||
} |
||||
} |
||||
|
||||
nz-breadcrumb { |
||||
margin: 16px 0; |
||||
} |
||||
|
||||
nz-footer { |
||||
text-align: center; |
||||
} |
||||
|
||||
.inner-content { |
||||
div { |
||||
float: left; |
||||
} |
||||
.side_menu { |
||||
height: 100%; |
||||
color: #595959; |
||||
box-shadow: 2px 0 8px rgba(0,0,0,.15); |
||||
.side_menu_top { |
||||
width: 100%; |
||||
margin-top: 8px; |
||||
font-size: 18px; |
||||
height: 26px; |
||||
line-height: 23px; |
||||
margin-left: 14px; |
||||
.side_menu_top_icon { |
||||
height: 26px; |
||||
line-height: 26px; |
||||
} |
||||
span { |
||||
margin-left: 6px; |
||||
} |
||||
} |
||||
.side_menu_content { |
||||
margin-top: 10px; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
} |
||||
height: calc(100vh - 64px); |
||||
} |
||||
.content { |
||||
width:100vw; |
||||
} |
||||
.content-width { |
||||
width: calc(100vw - 280px); |
||||
} |
||||
|
||||
|
||||
Loading…
Reference in new issue