14 changed files with 270 additions and 163 deletions
@ -0,0 +1,12 @@
|
||||
import { Injectable } from '@angular/core'; |
||||
|
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
}) |
||||
export class IsLoginService { |
||||
|
||||
constructor() { } |
||||
|
||||
isLogin:boolean = false; //登录状态
|
||||
|
||||
} |
||||
@ -1,63 +1,30 @@
|
||||
<mat-toolbar [color]="theme?'primary':'accent'"> |
||||
<!-- <mat-toolbar> --> |
||||
<h1>用户信息采集平台</h1> |
||||
|
||||
<!-- 全屏 --> |
||||
<!-- <button mat-button (click)="!isfullscreen?fullscreenToggle():closefullscreen()" class="fullscreen"> |
||||
<ng-container *ngIf="!isfullscreen; else elseTemplate"> |
||||
<mat-icon *ngIf="!isfullscreen">fullscreen</mat-icon> |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
<mat-icon else>fullscreen_exit</mat-icon> |
||||
</ng-template> |
||||
</button> --> |
||||
<!-- 黑夜模式开关 --> |
||||
<!-- <mat-slide-toggle (change)='onChange($event.checked)' class="darktheme"></mat-slide-toggle> --> |
||||
<mat-toolbar style="background-color: #3b8cff;"> |
||||
|
||||
<!-- 锁屏按钮 --> |
||||
<!-- <button mat-button class="lockscreen" [routerLink]="['/lockscreen']" routerLinkActive="router-link-active" > |
||||
<mat-icon>screen_lock_landscape</mat-icon> |
||||
</button> --> |
||||
<!-- <mat-toolbar> --> |
||||
<p style="color: white;border-bottom: 3px solid #fff;border-radius: 3px; font-size: 16px;">学习演练平台</p> |
||||
|
||||
<!-- 登录信息按钮 --> |
||||
<!-- <button mat-icon-button [matMenuTriggerFor]="appMenu" class="login"> |
||||
<mat-icon>account_circle</mat-icon> |
||||
</button> |
||||
<mat-menu #appMenu="matMenu"> |
||||
<button mat-menu-item [routerLink]="['/ui/userdata']" > |
||||
<mat-icon>perm_identity</mat-icon> |
||||
<span>修改资料</span> |
||||
</button> |
||||
<button mat-menu-item (click)='changpsw()'> |
||||
<mat-icon>verified_user</mat-icon> |
||||
<span>修改密码</span> |
||||
</button> |
||||
<button mat-menu-item (click)='signOut()'> |
||||
<mat-icon>power_settings_new</mat-icon> |
||||
<span>退出系统</span> |
||||
</button> |
||||
</mat-menu> --> |
||||
<!-- 未登录状态 --> |
||||
<button mat-icon-button class="login" *ngIf="!isLogin.isLogin" (click)='login()'> |
||||
<mat-icon>account_circle</mat-icon> |
||||
</button> |
||||
|
||||
<!-- 设置按钮 --> |
||||
<!-- <button mat-icon-button [matMenuTriggerFor]="appSet" class="setting"> |
||||
<mat-icon>settings</mat-icon> |
||||
<!-- 已登录状态 --> |
||||
<button mat-icon-button [matMenuTriggerFor]="appMenu" class="login" *ngIf="isLogin.isLogin"> |
||||
<mat-icon>account_circle</mat-icon> |
||||
</button> |
||||
<mat-menu #appMenu="matMenu"> |
||||
<button mat-menu-item (click)='changeUserData()'> |
||||
<mat-icon>perm_identity</mat-icon> |
||||
<span>修改资料</span> |
||||
</button> |
||||
<button mat-menu-item (click)='changPassword()'> |
||||
<mat-icon>verified_user</mat-icon> |
||||
<span>修改密码</span> |
||||
</button> |
||||
<mat-menu #appSet="matMenu" yPosition="below" xPosition="after"> |
||||
<button mat-menu-item (click)="defaulttheme.next()"> |
||||
<mat-icon>palette</mat-icon> |
||||
<span>默认主题</span> |
||||
</button> |
||||
<button mat-menu-item (click)="redtheme.next()"> |
||||
<mat-icon>whatshot</mat-icon> |
||||
<span>亮色主题</span> |
||||
</button> |
||||
<button mat-menu-item (click)="standard()"> |
||||
<mat-icon>settings_overscan</mat-icon> |
||||
<span>标准模式</span> |
||||
</button> |
||||
<button mat-menu-item (click)="boxed('boxed')"> |
||||
<mat-icon>laptop</mat-icon> |
||||
<span>盒子模式</span> |
||||
</button> |
||||
</mat-menu> --> |
||||
<button mat-menu-item (click)='signOut()'> |
||||
<mat-icon>power_settings_new</mat-icon> |
||||
<span>退出系统</span> |
||||
</button> |
||||
</mat-menu> |
||||
|
||||
</mat-toolbar> |
||||
@ -1,41 +1,12 @@
|
||||
mat-toolbar{ |
||||
position: relative; |
||||
padding-left: 65px; |
||||
} |
||||
.logo{ |
||||
height: 64px; |
||||
widows: 64px; |
||||
position: relative; |
||||
padding-left: 65px; |
||||
} |
||||
|
||||
h1{ |
||||
line-height: 64px; |
||||
color: white; |
||||
} |
||||
mat-icon{ |
||||
color: white; |
||||
color: white; |
||||
} |
||||
.login{ |
||||
position: absolute; |
||||
right:30px; |
||||
} |
||||
.fullscreen{ |
||||
position: absolute; |
||||
right:60px; |
||||
} |
||||
.setting{ |
||||
position: absolute; |
||||
right:120px; |
||||
} |
||||
.lockscreen{ |
||||
position: absolute; |
||||
right:160px; |
||||
} |
||||
.darktheme{ |
||||
position: absolute; |
||||
right:140px; |
||||
display: none; |
||||
} |
||||
|
||||
.boxed{ |
||||
width: 1200px; |
||||
position: absolute; |
||||
right:60px; |
||||
} |
||||
@ -0,0 +1,20 @@
|
||||
<div mat-dialog-title> |
||||
修改资料 |
||||
</div> |
||||
<div mat-dialog-content> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="password" name="password" |
||||
required type="password" |
||||
ngModel #password="ngModel" placeholder="请输入原密码"> |
||||
</mat-form-field> |
||||
|
||||
<div mat-dialog-actions class="btnbox"> |
||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button> |
||||
<button mat-raised-button color="primary" mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ChangeuserdataComponent } from './changeuserdata.component'; |
||||
|
||||
describe('ChangeuserdataComponent', () => { |
||||
let component: ChangeuserdataComponent; |
||||
let fixture: ComponentFixture<ChangeuserdataComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ChangeuserdataComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ChangeuserdataComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,22 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
|
||||
@Component({ |
||||
selector: 'app-changeuserdata', |
||||
templateUrl: './changeuserdata.component.html', |
||||
styleUrls: ['./changeuserdata.component.scss'] |
||||
}) |
||||
export class ChangeuserdataComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,) { } |
||||
|
||||
ngOnInit(): void { |
||||
|
||||
} |
||||
|
||||
//修改资料
|
||||
onSubmit (e) { |
||||
console.log(e) |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,29 @@
|
||||
<div> |
||||
<div class="header"><img src="../../../assets/images/login.gif"></div> |
||||
|
||||
<div class="content"> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<div class="input"> |
||||
<mat-icon class="icon">account_box</mat-icon> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" required ngModel placeholder="请输入账号"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="input"> |
||||
<mat-icon class="icon2">lock</mat-icon> |
||||
<mat-form-field> |
||||
<input matInput id="password" name="password" type='password' required ngModel placeholder="请输入密码"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div *ngIf="errmsg" class="alert-danger"> |
||||
{{errmsg}} |
||||
</div> |
||||
|
||||
<button type="submit" [disabled]="!form.form.valid" class="loginBtn" mat-raised-button color="primary">登录</button> |
||||
</form> |
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,45 @@
|
||||
.header { |
||||
margin: 0 auto; |
||||
width: 50px; |
||||
height: 50px; |
||||
border-radius: 50%; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
margin: 20px 0; |
||||
text-align: center; |
||||
.alert-danger { |
||||
text-align: left; |
||||
font-size: 14px; |
||||
color: red; |
||||
} |
||||
.loginBtn { |
||||
width: 90%; |
||||
border-radius: 5px; |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
.input { |
||||
margin-left: 22px; |
||||
position: relative; |
||||
} |
||||
.icon { |
||||
width: 24px; |
||||
color: #666; |
||||
font-size: 24px; |
||||
position: absolute; |
||||
top: 17px; |
||||
left: -24px; |
||||
} |
||||
.icon2 { |
||||
width: 24px; |
||||
color: #666; |
||||
font-size: 24px; |
||||
position: absolute; |
||||
top: 17px; |
||||
left: -24px; |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { LoginComponent } from './login.component'; |
||||
|
||||
describe('LoginComponent', () => { |
||||
let component: LoginComponent; |
||||
let fixture: ComponentFixture<LoginComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ LoginComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(LoginComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,24 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
|
||||
@Component({ |
||||
selector: 'app-login', |
||||
templateUrl: './login.component.html', |
||||
styleUrls: ['./login.component.scss'] |
||||
}) |
||||
export class LoginComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,) { } |
||||
|
||||
ngOnInit(): void { |
||||
|
||||
} |
||||
|
||||
errmsg:any; //err信息
|
||||
|
||||
//登录
|
||||
onSubmit (e) { |
||||
console.log(e) |
||||
} |
||||
|
||||
} |
||||
Loading…
Reference in new issue