<template>
  <div class="login-layout">
    <header>
      <slot name="header">
         <span>邮箱登录</span>
      </slot>
    </header>
    <main>
      <div class="title">
        <slot name="form-title"></slot>
      </div>
      <van-form>
          <slot></slot>
          <div class="btn">
            <slot name="form-buttons"></slot>
          </div>
      </van-form>
    </main>
    <footer>
      <slot name="footer">
        <span>密码登录</span>
      </slot>
    </footer>    
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Inject, Emit } from 'vue-property-decorator';
import { Form, Field, CellGroup, Button } from 'vant';
import { Action } from 'vuex-class';
@Component({
  name: 'LoginLayout',
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
  },
})
export default class LoginLayout extends Vue {}
</script>
<style scoped lang="scss">
  .login-layout{
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    font-size: 16px;
    color: $fontColorBlack;
    header {
      align-self: flex-end;
    }
    main {
      margin-top: 30px;
      .title {
        margin-bottom: 32px;
        font-size: 26px;
        text-align: left;
        font-weight: 500;
      }
      .btn {
        margin-top: 60px;
      }
    }
    footer {
      margin-top: 8px;
      font-size: 14px;
      color: $fontColorBlue;
    }
    ::v-deep {
      .van-field {
        &__control{
          color: $fontColorBlack;
          font-weight: 500;
          &::-webkit-input-placeholder{
            color: $fontColorGray;
          }
        }
      }
      .van-cell {
        background: none;
        padding: 25px 0 10px;
        &::after {
          position: absolute;
          box-sizing: border-box;
          content: ' ';
          pointer-events: none;
          right: 0;
          bottom: 0;
          left: 0;
          border-bottom: 1px solid $borderColorGray;
          -webkit-transform: scaleY(.5);
          transform: scaleY(.5);
        }
      }
    }
  }
</style>