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