系统首页菜单制作

<nz-layout class="contains"> <nz-sider class="contains-left" nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null"> <span>&nbsp;</span> <ul nz-menu [nzTheme]=""dark"" [nzMode]="isCollapsed?"vertical":"inline""> <li nz-menu-item> <a [routerLink]="["home"]"> <i class="anticon anticon-home"></i> <span class="nav-text">首页</span> </a> </li> <ng-template ngFor let-data [ngForOf]="listLeft"> <li *ngIf="data.NodeType=="内容"" nz-menu-item> <a [routerLink]="[data.NodeUrl]"> <span *ngIf="data.NodeIcon!="null"" [innerHtml]="data.NodeIcon"></span> <span class="nav-text">{{data.NodeName}}</span> </a> </li> <li *ngIf="data.NodeType=="外链"" nz-menu-item> <a [href]="data.NodeUrl" target="_blank"> <span *ngIf="data.NodeIcon!="null"" [innerHtml]="data.NodeIcon"></span> <span class="nav-text">{{data.NodeName}}</span> </a> </li> <li *ngIf="data.NodeType=="容器"" nz-submenu> <span title> <span *ngIf="data.NodeIcon!="null"" [innerHtml]="data.NodeIcon"></span> <span class="nav-text">{{data.NodeName}}</span> </span> <ul *ngIf="data.child.length>0"> <li nz-menu-item *ngFor="let child of data.child"> <a *ngIf="child.NodeType=="内容"" [routerLink]="[child.NodeUrl]"> <span *ngIf="child.NodeIcon!=null" [innerHtml]="child.NodeIcon"></span> <span >{{child.NodeName}}</span> </a> <a *ngIf="child.NodeType=="外链"" [href]="child.NodeUrl" target="_blank"> <span *ngIf="child.NodeIcon!=null" [innerHtml]="child.NodeIcon"></span> <span >{{child.NodeName}}</span> </a> </li> </ul> </li> </ng-template> </ul> </nz-sider> <nz-layout class="contains-main"> <nz-header class="contains-header"> <div class="top-info"> <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i> <span class="logo">销售管理系统</span> </div> <div class="top-nav-wrap"> <ul class="top-nav"> <li *ngFor="let item of listTop" class="top-nav-item d-none d-lg-inline-block" (click)="getLeftMenu(item)"> <span style="font-size: 10px;" *ngIf="item.NodeIcon!="null"" [innerHtml]="item.NodeIcon"></span> &nbsp;{{item.NodeName}} </li> <li class="top-nav-item"> <nz-dropdown nzPlacement="bottomCenter"> <div nz-dropdown> <i class="anticon anticon-user"></i> {{curAuthor.UserName}} </div> <ul nz-menu style="width:150px"> <li nz-menu-item *ngFor="let item of listTop" class="d-lg-none" (click)="getLeftMenu(item)"> <span style="font-size: 14px;padding: 5px;" *ngIf="item.NodeIcon!="null"" [innerHtml]="item.NodeIcon"></span> <span style="font-size: 14px;padding: 5px">&nbsp;{{item.NodeName}}</span> </li> <li nz-menu-divider></li> <li nz-menu-item (click)="userinfo()"> <span style="font-size: 14px;padding: 5px;"> <i class="anticon anticon-team"></i> </span> <span style="font-size: 14px;padding: 5px"> &nbsp;个人中心</span> </li> <li nz-menu-divider></li> <li nz-menu-item (click)="logout()"> <span style="font-size: 14px;padding: 5px;"> <i class="anticon anticon-logout"></i> </span> <span style="font-size: 14px;padding: 5px"> &nbsp;退出登录</span> </li> </ul> </nz-dropdown> </li> </ul> </div> </nz-header> <nz-content class="contains-content" style="margin:0 16px;"> <router-outlet></router-outlet> </nz-content> </nz-layout></nz-layout>

:host ::ng-deep .contains{height: 100%; }:host ::ng-deep .contains-header{position: fixed;top: 0;left: 0;padding: 0;width: 100%;background-color: #108ee9;z-index: 10; }.contains-left{margin-top: 64px; }.contains-main{margin-top: 64px; }:host ::ng-deep .trigger {font-size: 18px;line-height: 64px;padding: 023px;cursor: pointer;transition: color .3s;color: #fff; }:host ::ng-deep .trigger:hover {background-color: rgba(255, 255, 255, 0.2) !important; }:host ::ng-deep .top-info{float: left; }:host ::ng-deep .logo {font-size: 18px;line-height: 64px;transition: color .3s;color: #fff; }:host ::ng-deep .top-nav-wrap{float: right; }:host ::ng-deep .top-nav-item{display: inline-block;font-size: 14px;line-height: 64px;padding: 023px;cursor: pointer;transition: color .3s;color: #fff; }:host ::ng-deep .top-nav-item:hover {background-color: rgba(255, 255, 255, 0.2) !important; }:host ::ng-deep .top-nav-item i{font-size: 14px; }:host ::ng-deep .ant-layout-sider-collapsed .nav-text {display: none; }:host ::ng-deep .ant-layout-sider-collapsed .ant-menu-submenu-title:after {display: none; }:host ::ng-deep .ant-layout-sider-collapsed .anticon {font-size: 16px;margin-left: 8px; }:host ::ng-deep .ant-menu-vertical .ant-menu-item, :host ::ng-deep .ant-menu-inline .ant-menu-item, :host ::ng-deep .ant-menu-vertical .ant-menu-submenu-title, :host ::ng-deep .ant-menu-inline .ant-menu-submenu-title{font-size: 14px; }