共有 7 个文件被更改，包括 89 次插入 和 0 次删除
合并视图
Diff 选项
-
+2 -0src/app/app.module.ts
-
+24 -0src/app/pages/header/header.component.html
-
+20 -0src/app/pages/header/header.component.sass
-
+25 -0src/app/pages/header/header.component.spec.ts
-
+15 -0src/app/pages/header/header.component.ts
-
+1 -0src/app/pages/veriable-form/veriable-form.component.html
-
+2 -0src/index.html
+ 2
- 0
src/app/app.module.ts
查看文件
| @@ -12,6 +12,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | |||||
| import { ReactiveFormsModule } from '@angular/forms'; | import { ReactiveFormsModule } from '@angular/forms'; | ||||
| import { NumberOnlyDirective } from './_helper/number-only.directive'; | import { NumberOnlyDirective } from './_helper/number-only.directive'; | ||||
| import { VeriableFormComponent } from './pages/veriable-form/veriable-form.component'; | import { VeriableFormComponent } from './pages/veriable-form/veriable-form.component'; | ||||
| import { HeaderComponent } from './pages/header/header.component'; | |||||
| @NgModule({ | @NgModule({ | ||||
| declarations: [ | declarations: [ | ||||
| @@ -20,6 +21,7 @@ import { VeriableFormComponent } from './pages/veriable-form/veriable-form.compo | |||||
| LoginComponent, | LoginComponent, | ||||
| NumberOnlyDirective, | NumberOnlyDirective, | ||||
| VeriableFormComponent, | VeriableFormComponent, | ||||
| HeaderComponent, | |||||
| ], | ], | ||||
| imports: [ | imports: [ | ||||
+ 24
- 0
src/app/pages/header/header.component.html
查看文件
| @@ -0,0 +1,24 @@ | |||||
| <header class=" bg-light"> | |||||
| <div class="container"> | |||||
| <nav class="navbar navbar-expand-lg navbar-light"> | |||||
| <a class="navbar-brand" href="#"> <img src="https://enianalytics.com/images/eni-tech-logo.png" alt="lohi"> </a> | |||||
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |||||
| <span class="navbar-toggler-icon"></span> | |||||
| </button> | |||||
| <div class="collapse navbar-collapse" id="navbarNav"> | |||||
| <ul class="navbar-nav"> | |||||
| <li class="nav-item active"> | |||||
| <a class="nav-link" href="#">form 1 <span class="sr-only">(current)</span></a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#">form 2</a> | |||||
| </li> | |||||
| <li class="nav-item"> | |||||
| <a class="nav-link" href="#">form 3</a> | |||||
| </li> | |||||
| </ul> | |||||
| </div> | |||||
| </nav> | |||||
| </div> | |||||
| </header> | |||||
+ 20
- 0
src/app/pages/header/header.component.sass
查看文件
| @@ -0,0 +1,20 @@ | |||||
| header | |||||
| border-bottom: 1px solid #cccccc3b | |||||
| box-shadow: 0 0 8px #c2c2c252 | |||||
| .bg-light | |||||
| background: #fff!important | |||||
| nav img | |||||
| width: 100px | |||||
| ul li a | |||||
| font-weight: 600 | |||||
| font-family: 'Inter', sans-serif | |||||
| font-size: 14px | |||||
| text-transform: uppercase | |||||
| color: #444444 | |||||
| ul li.active a, ul li:hover a | |||||
| color:#e76b20 | |||||
+ 25
- 0
src/app/pages/header/header.component.spec.ts
查看文件
| @@ -0,0 +1,25 @@ | |||||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | |||||
| import { HeaderComponent } from './header.component'; | |||||
| describe('HeaderComponent', () => { | |||||
| let component: HeaderComponent; | |||||
| let fixture: ComponentFixture<HeaderComponent>; | |||||
| beforeEach(async () => { | |||||
| await TestBed.configureTestingModule({ | |||||
| declarations: [ HeaderComponent ] | |||||
| }) | |||||
| .compileComponents(); | |||||
| }); | |||||
| beforeEach(() => { | |||||
| fixture = TestBed.createComponent(HeaderComponent); | |||||
| component = fixture.componentInstance; | |||||
| fixture.detectChanges(); | |||||
| }); | |||||
| it('should create', () => { | |||||
| expect(component).toBeTruthy(); | |||||
| }); | |||||
| }); | |||||
+ 15
- 0
src/app/pages/header/header.component.ts
查看文件
| @@ -0,0 +1,15 @@ | |||||
| import { Component, OnInit } from '@angular/core'; | |||||
| @Component({ | |||||
| selector: 'app-header', | |||||
| templateUrl: './header.component.html', | |||||
| styleUrls: ['./header.component.sass'] | |||||
| }) | |||||
| export class HeaderComponent implements OnInit { | |||||
| constructor() { } | |||||
| ngOnInit(): void { | |||||
| } | |||||
| } | |||||
+ 1
- 0
src/app/pages/veriable-form/veriable-form.component.html
查看文件
| @@ -1,3 +1,4 @@ | |||||
| <app-header></app-header> | |||||
| <div class="container"> | <div class="container"> | ||||
| <div class="row"> | <div class="row"> | ||||
| <div class="col-md-12"> | <div class="col-md-12"> | ||||
+ 2
- 0
src/index.html
查看文件
| @@ -13,5 +13,7 @@ | |||||
| </head> | </head> | ||||
| <body class="mat-typography"> | <body class="mat-typography"> | ||||
| <app-root></app-root> | <app-root></app-root> | ||||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> | |||||
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> | |||||
| </body> | </body> | ||||
| </html> | </html> | ||||