12 changed files with 272 additions and 207 deletions
@ -0,0 +1,31 @@ |
|||||||
|
<div class="content"> |
||||||
|
|
||||||
|
<header> |
||||||
|
<label class="oneColor">六熟悉</label> |
||||||
|
<label class="twoColor">训练记录</label> |
||||||
|
<div class="floatRight"> |
||||||
|
欢迎您,广西总队 |
||||||
|
<mat-icon [matMenuTriggerFor]="out">account_circle</mat-icon> |
||||||
|
<mat-menu #out="matMenu"> |
||||||
|
<button mat-menu-item (click)='signOut()'>退出系统</button> |
||||||
|
</mat-menu> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
|
||||||
|
<div class="center"> |
||||||
|
<div class="centerHeader"> |
||||||
|
<div><input type="text" placeholder="请输入熟悉对象"></div> |
||||||
|
<div> |
||||||
|
<input placeholder="请选择时间" matInput [matDatepicker]="dp2" readonly [formControl]="enddate"> |
||||||
|
<mat-datepicker-toggle matSuffix [for]="dp2"></mat-datepicker-toggle> |
||||||
|
<mat-datepicker #dp2 disabled="false"></mat-datepicker> |
||||||
|
</div> |
||||||
|
<div><button style="background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);" (click)='query()'>查询</button></div> |
||||||
|
<div><button style="background: #4582FC;" (click)='add()'>新增</button></div> |
||||||
|
</div> |
||||||
|
<div class="centerTable"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0.009766rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
header { |
||||||
|
width: 100%; |
||||||
|
height: 0.585938rem; |
||||||
|
line-height: 0.585938rem; |
||||||
|
text-align: center; |
||||||
|
position: relative; |
||||||
|
label { font-weight: 550; } |
||||||
|
.floatRight { |
||||||
|
position: absolute; |
||||||
|
top: 0.146484rem; |
||||||
|
right: 0.244141rem; |
||||||
|
height: 0.292969rem; |
||||||
|
line-height: 0.292969rem; |
||||||
|
font-size: 0.136719rem; |
||||||
|
.mat-icon { |
||||||
|
vertical-align: middle; |
||||||
|
cursor: pointer; |
||||||
|
color: #999; |
||||||
|
margin-left: 0.048828rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.center { |
||||||
|
flex: 1; |
||||||
|
background: #F4F5F9; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
padding: 0.097656rem; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//头部 |
||||||
|
.oneColor { |
||||||
|
background-image:-webkit-linear-gradient(right,#f18d6f,#FF4923); |
||||||
|
-webkit-background-clip:text; |
||||||
|
-webkit-text-fill-color:transparent; |
||||||
|
} |
||||||
|
.twoColor { |
||||||
|
background-image:-webkit-linear-gradient(right,rgb(38, 91, 238),skyblue,); |
||||||
|
-webkit-background-clip:text; |
||||||
|
-webkit-text-fill-color:transparent; |
||||||
|
} |
||||||
|
button.mat-menu-item { text-align: center; } |
||||||
|
|
||||||
|
//中间内容区 |
||||||
|
.centerHeader { |
||||||
|
width: 100%; |
||||||
|
height: 0.488281rem; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
div { margin: 0 0.097656rem } |
||||||
|
input { |
||||||
|
height: 0.292969rem; |
||||||
|
line-height: 0.292969rem; |
||||||
|
padding-left: 0.048828rem; |
||||||
|
border-radius: 0.195313rem; |
||||||
|
outline: none; |
||||||
|
border: 0.009766rem solid #999; |
||||||
|
} |
||||||
|
button { |
||||||
|
width: 0.78125rem; |
||||||
|
height: 0.341797rem; |
||||||
|
line-height: 0.341797rem; |
||||||
|
border-radius: 0.195313rem; |
||||||
|
outline: none; |
||||||
|
border: none; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.mat-datepicker-toggle{ vertical-align: middle; } |
||||||
|
.centerTable { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { HomeComponent } from './home.component'; |
||||||
|
|
||||||
|
describe('HomeComponent', () => { |
||||||
|
let component: HomeComponent; |
||||||
|
let fixture: ComponentFixture<HomeComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ HomeComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(HomeComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { FormControl } from '@angular/forms'; |
||||||
|
import { DateAdapter } from '@angular/material/core'; |
||||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
import { CacheTokenService } from 'src/app/http-interceptors/cache-token.service'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-home', |
||||||
|
templateUrl: './home.component.html', |
||||||
|
styleUrls: ['./home.component.scss'] |
||||||
|
}) |
||||||
|
export class HomeComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public token:CacheTokenService,public dialog: MatDialog,private router:Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.adapter.setLocale('CH'); |
||||||
|
this.enddate = new FormControl(new Date()); //日历结束时间显示
|
||||||
|
} |
||||||
|
|
||||||
|
enddate:any; //查询时间
|
||||||
|
|
||||||
|
//退出系统
|
||||||
|
signOut () { |
||||||
|
let out = confirm("您确定要退出吗") |
||||||
|
if(out) { |
||||||
|
this.http.post('/api/Account/SignOut',{}).subscribe(data=> { |
||||||
|
this.token.delete() |
||||||
|
sessionStorage.clear() |
||||||
|
window.localStorage.clear() |
||||||
|
this.router.navigate(['/login']) |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'bottom'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('成功退出','确定',config); |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//查询
|
||||||
|
query () { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//新增
|
||||||
|
add () { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
After Width: | Height: | Size: 746 KiB |
Loading…
Reference in new issue