<div class="signin-container" fxLayout="row">
  <div class="signin-cover" fxFlex="100" fxFlex.gt-xs="50">
    <div fxLayout="column" fxLayoutAlign="center center" style="height: 100%;">
      <img src="assets/images/signup.svg" alt="">
    </div>
  </div>
  <div class="signin-content mat-elevation-z12" fxFlex="100" fxFlex.gt-xs="50">
    <mat-card-title>注册账号
      <a class="redirect" [routerLink]="['/sigin']">用户登录</a>
    </mat-card-title>

    <form [formGroup]="userForm" (ngSubmit)="register()">
      <mat-form-field class="display-block">
        <input type="email" placeholder="请输入您的邮箱" formControlName="email" required matInput>
        <mat-error *ngIf="formErrors.email">{{formErrors.email}}</mat-error>
      </mat-form-field>

      <mat-form-field class="display-block">
        <input type="password" placeholder="请输入您的密码" formControlName="password" required matInput>
        <mat-error *ngIf="formErrors.password">{{formErrors.password}}</mat-error>
      </mat-form-field>

      <mat-form-field class="display-block">
        <input type="password" placeholder="请重复输入您的密码" formControlName="passwordConfirm" required matInput>
        <mat-error *ngIf="formErrors.passwordConfirm">{{formErrors.passwordConfirm}}</mat-error>
      </mat-form-field>

      <mat-checkbox class="display-block form-check">我同意<a href="javascript:;">注册协议</a></mat-checkbox>
      
      <button color="primary" mat-raised-button [disabled]="!userForm.valid">创建账户</button>
      <mat-error *ngIf="formErrors.signUpFailure">{{formErrors.signUpFailure}}</mat-error>
    </form>

    <div class="other-sign">
      我要登陆
    </div>

    <button class="mat-raised-button capsule-button google-button m-b-15" (click)="signInWithGoogle()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/google-plus.svg">
        </div>
        <span class="capsule-button-text">Google 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button github-button m-b-15" (click)="signInWithGithub()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/github-logo.svg">
        </div>
        <span class="capsule-button-text">Github 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button facebook-button m-b-15">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/facebook.svg">
        </div>
        <span class="capsule-button-text">Facebook 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button any-button" (click)="signInAnonymously()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/firebase.svg">
        </div>
        <span class="capsule-button-text">游客 账号登录</span>
      </span>
    </button>

  </div>
</div>

./signup.component.scss

.signin {
  &-container {
    height: 100vh;
  }

  &-cover {
    height: 100%;
  }

  &-content {
    height: 100%;
    padding: 70px 60px;
    border-left: 1px solid #d9ddf6;
    background: #f3fcff;
  }
}

.redirect {
  font-size: 14px;
  margin-left: 10px;
  color: #00aaaa;
}

.form-check {
  display: block;
  margin: 16px 0 32px;
}

.display-block {
  display: block;
}

.other-sign {
  color: #a1a6a8;
  padding: 50px 0 60px;
}

.m-b-15 {
  margin-bottom: 15px;
}

.capsule-button {
  width: 100%;
  color: #fff;
  padding: 0;
  border-radius: 3px;
  min-height: 48px;

  &-wrapper {
    justify-content: flex-start;
    display: flex;
    width: 100%;
  }

  &-icon {
    height: 48px;
    border-radius: 3px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    > img {
      width: 25px;
      height: auto;
    }
  }

  &-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  &-ripple {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    justify-content: flex-start;
    display: flex;
    width: 100%;
  }
}

.facebook-button {
  background-color: #4267b2;

  &:hover {
    background-color: #385490;
  }

  .capsule-button-icon {
    background: #3b5a99;
  }
}

.google-button {
  background-color: #dd4b39;

  &:hover {
    background-color: #dd4b39;
  }

  .capsule-button-icon {
    background: #c9481f;
  }
}

.github-button {
  background-color: #eb5424;

  &:hover {
    background-color: #eb5424;
  }

  .capsule-button-icon {
    background: #ca3f12;
  }
}

.any-button {
  background-color: #ffca28;

  &:hover {
    background-color: #ffca28;
  }

  .capsule-button-icon {
    background: #e89d1e;
  }
}