nzdrtrt
/
Luck-Draw
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[优化]navigation

master
chenjingyu 5 years ago
parent
baec70c3f9
commit
4ec19d1dd4
6 changed files with 2 additions and 260 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/app/app.module.ts
  2. 15
      src/app/navigation/navigation.component.html
  3. 60
      src/app/navigation/navigation.component.scss
  4. 25
      src/app/navigation/navigation.component.spec.ts
  5. 44
      src/app/navigation/navigation.component.ts
  6. 114
      src/app/navigation/navigation.module.ts

4
src/app/app.module.ts
Unescape View File

@ -7,7 +7,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav'; import { MatSidenavModule } from '@angular/material/sidenav';
import { NavigationModule } from './navigation/navigation.module'; //import { NavigationModule } from './navigation/navigation.module';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { TabbarComponent } from './tabbar/tabbar.component'; import { TabbarComponent } from './tabbar/tabbar.component';
import { PagesModule } from './pages/pages.module'; import { PagesModule } from './pages/pages.module';
@ -34,7 +34,7 @@ import { GISManagementModule } from './gis-management/gis-management.module';
MatButtonModule, MatButtonModule,
MatCheckboxModule, MatCheckboxModule,
MatSidenavModule, MatSidenavModule,
NavigationModule, //NavigationModule,
MatIconModule, MatIconModule,
PagesModule, PagesModule,
FormsModule, FormsModule,

15
src/app/navigation/navigation.component.html
Unescape View File

@ -1,15 +0,0 @@
<div id="content">
<header>
<div class="title">着火单位: 贵港油库</div>
<div class="router">
<div class="routerText" *ngFor="let item of routers" routerLink= {{item.url}} routerLinkActive="routerLinkActive">{{item.name}}</div>
</div>
</header>
<div class="center">
<router-outlet></router-outlet>
</div>
</div>

60
src/app/navigation/navigation.component.scss
Unescape View File

@ -1,60 +0,0 @@
#content {
width: 100%;
height: 100%;
background: url('../../assets/images/home.png');
-moz-background-size:100% 100%;
background-size:100% 100%;
box-sizing: border-box;
padding: 10px 38px 28px;
overflow: hidden;
display: flex;
flex-direction: column;
}
//头部
header {
width: 100%;
height: 80px;
border-bottom: 1px solid #30bbec;
overflow: hidden;
.title {
width: 100%;
height: 25px;
text-align: center;
font-size: 20px;
font-weight: 550;
color: red;
}
.router{
width: 100%;
height: 55px;
}
}
//路由DIV
.routerText {
display: inline-block;
margin: 7px 15px;
width: 150px;
height: 37px;
line-height: 37px;
font-size: 20px;
text-align: center;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
cursor:pointer;
outline: none;
border: 2px solid #fff;
color: #fff;
}
//路由选中样式
.routerLinkActive {
border: 2px solid rgb(248, 161, 62);
background-color: rgba(240,136,14,0.65);
}
//中间区域
.center {
flex: 1;
overflow: hidden;
}

25
src/app/navigation/navigation.component.spec.ts
Unescape View File

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavigationComponent } from './navigation.component';
describe('NavigationComponent', () => {
let component: NavigationComponent;
let fixture: ComponentFixture<NavigationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavigationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavigationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

44
src/app/navigation/navigation.component.ts
Unescape View File

@ -1,44 +0,0 @@
import { Component, OnInit,Inject } from '@angular/core';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {FormControl} from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { TreeService } from '../http-interceptors/tree.service'
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import {CacheTokenService} from '../http-interceptors/cache-token.service'//引入服务
import { Router,ActivatedRoute } from '@angular/router'
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit {
constructor(public navmenus:CacheTokenService,private http: HttpClient,public dialog: MatDialog,private tree:TreeService,public snackBar: MatSnackBar,
private router:Router,private route:ActivatedRoute) { }
//路由配置
routers:any = [
{name:'平面图', url: '/ui/plan'},
{name:'处置要点', url: '/ui/disposalNode'},
{name:'危化品', url: '/ui/dangerous'},
{name:'类似预案', url: '/ui/similarPlans'},
{name:'真实战例', url: '/ui/realCases'},
{name:'预案赋能', url: '/ui/planAssistance'}
]
ngOnInit () {
}
ngOnDestroy () {
}
}

114
src/app/navigation/navigation.module.ts
Unescape View File

@ -1,114 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavigationComponent } from './navigation.component';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { TabbarComponent } from '../tabbar/tabbar.component';
import { UiModule } from '../ui/ui.module';
import {A11yModule} from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatBadgeModule} from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCardModule} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatChipsModule} from '@angular/material/chips';
import {MatStepperModule} from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatInputModule} from '@angular/material/input';
import {MatListModule} from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu';
import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTreeModule} from '@angular/material/tree';
@NgModule({
declarations: [
NavigationComponent,
TabbarComponent
],
imports: [
CommonModule,
MatSidenavModule,
RouterModule,
MatIconModule,
FormsModule,
UiModule,
A11yModule,
CdkStepperModule,
CdkTableModule,
CdkTreeModule,
DragDropModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
PortalModule,
ScrollingModule,
],
exports: [
NavigationComponent
]
})
export class NavigationModule { }
Write Preview
Loading…
Cancel
Save