hurui
/
hai-oil-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交代码

Browse Source
master
胡锐 7 months ago
parent 1fc454dae9 5b828d1192
commit 6686a0f171
5 changed files with 192 additions and 111 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 65
      src/app/pages/body/index/index.component.html
  2. 56
      src/app/pages/body/index/index.component.less
  3. 37
      src/app/pages/body/index/index.component.ts
  4. 61
      src/app/pages/body/index/index1.component.html
  5. 84
      src/app/pages/body/index/index1.component.less

65
src/app/pages/body/index/index.component.html
Unescape View File

@ -1,4 +1,5 @@
<nz-layout> <nz-layout>
<!-- start 头部 start-->
<nz-header> <nz-header>
<div nz-row> <div nz-row>
<!-- logo --> <!-- logo -->
@ -7,55 +8,45 @@
</div> </div>
<!-- logo --> <!-- logo -->
<!-- start 顶部菜单 start-->
<div class="menu" nz-col nzSpan="16"> <div class="menu" nz-col nzSpan="16">
<ul> <ul>
<li *ngFor="let item of menuData" [ngClass]="{'li-selected' : item.selected}" (click)="isSelected(item)">{{item.menuName}}</li> <li *ngFor="let item of menuData" [ngClass]="{'li-selected' : item.selected}" (click)="isSelected(item)">{{item.menuName}}</li>
</ul> </ul>
</div> </div>
<!-- end 顶部菜单 end -->
</div> </div>
</nz-header> </nz-header>
<!-- end 头部 end -->
<nz-layout> <nz-layout>
<nz-sider> <!-- start 侧边 start-->
<!-- start 左侧导航栏 start --> <nz-sider nzCollapsible [(nzCollapsed)]="isCollapse" [nzTrigger]="null" [nzCollapsedWidth]="0" >
<div [@openClose]="isCollapse ? 'open' : 'closed'" class="side_menu"> <div class="side_menu">
<div class="side_menu_top" (click)="isCollapse = false"> <span
<div class="side_menu_top_icon"> class="trigger"
<span nz-icon nzType="menu-fold" nzTheme="outline"></span> nz-icon
</div> [nzType]="isCollapse ? 'menu-unfold' : 'menu-fold'"
<span style="font-size: 14px;">收起</span> (click)="isCollapse = !isCollapse"
</div> ></span>
</div>
<!-- start 菜单内容 end--> <!-- start 菜单内容 end-->
<div class="side_menu_content"> <div>
<ul nz-menu nzMode="inline"> <ul nz-menu nzMode="inline">
<li nz-submenu nzOpen *ngFor="let item of leftMenuData" nzTitle="{{item.menuName}}" nzIcon="{{item.menuUrlImg}}" > <li nz-submenu *ngFor="let item of leftMenuData" nzTitle="{{item.menuName}}" nzIcon="{{item.menuUrlImg}}" >
<ul> <ul>
<li nz-menu-group> <li nz-menu-item *ngFor="let childMenu of item['childMenuList']">
<ul> <a [routerLink]="[item['menuUrl'], childMenu['menuUrl']]" [queryParams]="{title: item['menuName']}">{{childMenu['menuName']}}</a>
<li nz-menu-item nzMatchRouter *ngFor="let childMenu of item['childMenuList']"> </li>
<a [routerLink]="[item['menuUrl'], childMenu['menuUrl']]" [queryParams]="{title: item['menuName']}" (click)="clickMenu(childMenu)">{{childMenu['menuName']}}</a> </ul>
</li> </li>
</ul> </ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- start 菜单内容 end -->
</div> </div>
<!-- end 左侧导航栏 end --> <!-- start 菜单内容 end -->
</nz-sider> </nz-sider>
<nz-content class="inner-content"> <!-- end 侧边 end -->
<!-- 主体内容--> <!-- start 主体 start-->
<div class="content" [ngClass]="{'content-width' : isCollapse}"> <nz-content>
<app-tab></app-tab> <app-tab></app-tab>
</div>
</nz-content> </nz-content>
<!-- end 主体 end -->
</nz-layout> </nz-layout>
</nz-layout> </nz-layout>

56
src/app/pages/body/index/index.component.less
Unescape View File

@ -34,51 +34,23 @@ nz-header {
} }
} }
nz-breadcrumb { nz-sider {
margin: 16px 0; background: #fff;
} box-shadow: 2px 0 8px rgba(0,0,0,.15);
height: calc(100vh - 64px);;
nz-footer {
text-align: center;
}
.inner-content { .trigger {
div { font-size: 18px;
float: left; line-height: 50px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
} }
.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%;
}
.trigger:hover {
color: #1890ff;
} }
height: calc(100vh - 64px);
}
.content {
width:100vw;
} }
.content-width { nz-content {
width: calc(100vw - 280px); padding: 0 0 0 4px;
} }

37
src/app/pages/body/index/index.component.ts
Unescape View File

@ -9,7 +9,7 @@ import {
} from "ng-zorro-antd/layout"; } from "ng-zorro-antd/layout";
import {NzBreadCrumbComponent, NzBreadCrumbItemComponent} from "ng-zorro-antd/breadcrumb"; import {NzBreadCrumbComponent, NzBreadCrumbItemComponent} from "ng-zorro-antd/breadcrumb";
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid"; import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu"; import {NzMenuDirective, NzMenuGroupComponent, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu";
import {menuData} from "../../../data/menu/menu.namespace"; import {menuData} from "../../../data/menu/menu.namespace";
import {NgClass, NgForOf} from "@angular/common"; import {NgClass, NgForOf} from "@angular/common";
import {animate, state, style, transition, trigger} from "@angular/animations"; import {animate, state, style, transition, trigger} from "@angular/animations";
@ -42,29 +42,11 @@ import {DATA} from "../../../data/login/localStorage.namespace";
NzTabComponent, NzTabComponent,
NzTabSetComponent, NzTabSetComponent,
TabComponent, TabComponent,
NzSiderComponent NzSiderComponent,
NzMenuGroupComponent
], ],
templateUrl: './index.component.html', templateUrl: './index.component.html',
styleUrl: './index.component.less', styleUrl: './index.component.less',
animations: [
// animation triggers go here
trigger('openClose', [
state('open', style({
width: '280px',
backgroundColor: 'white'
})),
state('closed', style({
overflow: 'hidden',
width: '0',
})),
transition('open => closed', [
animate('0.1s')
]),
transition('closed => open', [
animate('0.1s')
]),
]),
]
}) })
export class IndexComponent { export class IndexComponent {
// 菜单数据 // 菜单数据
@ -77,27 +59,18 @@ export class IndexComponent {
leftMenuData: any = []; leftMenuData: any = [];
// 侧边菜单展示开关 // 侧边菜单展示开关
isCollapse = false; isCollapse = true;
constructor(private storage: BrowserStorageService) { constructor(private storage: BrowserStorageService) {
this.menuData = this.menuData.concat(this.storage.get(DATA)['menuTree']); this.menuData = this.menuData.concat(this.storage.get(DATA)['menuTree']);
} }
clickMenu(menu: object) {
}
// 选择操作 // 选择操作
isSelected(item: any) { isSelected(item: any) {
this.menuData.map((data: any) => { this.menuData.map((data: any) => {
data.selected = data.menuName === item.menuName; data.selected = data.menuName === item.menuName;
}); });
this.leftMenuData = item['childMenuList']; this.leftMenuData = item['childMenuList'];
if (item['menuName'] === '首页') { this.isCollapse = item['menuName'] === '首页';
this.isCollapse = false;
} else {
this.isCollapse = true;
}
} }
} }

61
src/app/pages/body/index/index1.component.html
Unescape View File

@ -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>

84
src/app/pages/body/index/index1.component.less
Unescape View File

@ -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);
}
Write Preview
Loading…
Cancel
Save