You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.1 KiB
79 lines
2.1 KiB
11 months ago
|
import { Component } from '@angular/core';
|
||
|
import {RouterLink, RouterOutlet} from "@angular/router";
|
||
|
import {NzContentComponent, NzFooterComponent, NzHeaderComponent, NzLayoutComponent} from "ng-zorro-antd/layout";
|
||
|
import {NzBreadCrumbComponent, NzBreadCrumbItemComponent} from "ng-zorro-antd/breadcrumb";
|
||
|
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
|
||
|
import {NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu";
|
||
|
import {menuData} from "../../../data/menu/menu.namespace";
|
||
|
import {NgClass, NgForOf} from "@angular/common";
|
||
|
import {animate, state, style, transition, trigger} from "@angular/animations";
|
||
|
import {NzIconDirective} from "ng-zorro-antd/icon";
|
||
|
import {NzTabComponent, NzTabSetComponent} from "ng-zorro-antd/tabs";
|
||
|
import {TabComponent} from "../tab/tab.component";
|
||
|
|
||
|
|
||
|
@Component({
|
||
|
selector: 'app-index',
|
||
|
standalone: true,
|
||
|
imports: [
|
||
|
RouterOutlet,
|
||
|
NzLayoutComponent,
|
||
|
NzHeaderComponent,
|
||
|
NzBreadCrumbComponent,
|
||
|
NzBreadCrumbItemComponent,
|
||
|
NzContentComponent,
|
||
|
NzFooterComponent,
|
||
|
NzRowDirective,
|
||
|
NzColDirective,
|
||
|
NzMenuItemComponent,
|
||
|
NzMenuDirective,
|
||
|
RouterLink,
|
||
|
NzSubMenuComponent,
|
||
|
NgForOf,
|
||
|
NgClass,
|
||
|
NzIconDirective,
|
||
|
NzTabComponent,
|
||
|
NzTabSetComponent,
|
||
|
TabComponent
|
||
|
],
|
||
|
templateUrl: './index.component.html',
|
||
|
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 {
|
||
|
|
||
|
// 首次导航数据
|
||
|
firstMenuData = menuData;
|
||
|
// 侧边菜单展示开关
|
||
|
isCollapse = false;
|
||
|
tabs = ['首页' , '商户管理'];
|
||
|
constructor(
|
||
|
) {}
|
||
|
|
||
|
// 选择操作
|
||
|
isSelected(item: any) {
|
||
|
this.isCollapse = true;
|
||
|
this.firstMenuData.map(data => {
|
||
|
data.selected = data.title === item.title;
|
||
|
});
|
||
|
}
|
||
|
}
|