<template>
  <el-container>
    <el-header>
      <lang/>
    </el-header>
    <el-main>
      <el-row type="flex" justify="center">
        <div class="container">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane :label="$t('account.login')" name="login">
              <login/>
            </el-tab-pane>
            <el-tab-pane :label="$t('account.register')" name="register">
              <register/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-row>
    </el-main>
  </el-container>
</template>

<script lang="ts">
  import Login from '~/components/account/login.vue'
  import Register from '~/components/account/register.vue'
  import Lang from '~/components/lang.vue'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: { Lang, Register, Login },
    data() {
      return {
        activeName: 'login'
      }
    }
  })
</script>
<style>
  .container {
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
</style>
