[完善] 首页布局完善

src/app/pages/login/login.component.scss

@@ -49,7 +49,7 @@
   text-align: center;
   margin-bottom: 0.488281rem;
   background-image:-webkit-linear-gradient(right,#f18d6f,#FF4923);
-  font-weight: 800;
+  font-weight: 900;
   font-family: KaiTi;
   -webkit-background-clip:text;
   font-size: 0.273438rem; 

src/app/ui/home/home.component.html

@@ -1,3 +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>

src/app/ui/home/home.component.scss

@@ -3,5 +3,82 @@
   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;
 }

src/app/ui/home/home.component.ts

@@ -1,4 +1,11 @@
+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',
@@ -7,9 +14,42 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  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 () {
+
+  }
+
+
+
 }