<template>
    <div class='login'>

        <div class='logo'>
            <div class='gap'></div>
            <img src="../assets/logo.png" alt="">
        </div>
        <van-row>
            <van-col span='20' offset='2'>
                <van-cell-group>
                    <van-field v-model="username" required clearable label="用户名" icon="question" placeholder="请输入用户名" @click-icon="$toast('question')" />

                    <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
                    <van-button size="large" type="primary" @click="logIn">登入</van-button>
                </van-cell-group>

            </van-col>
        </van-row>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data: function() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    logIn: function() {
      this.$router.push({name:'工序' });
    }
  }
});
</script>
<style lang="scss" scoped>
.logo {
  .gap {
    height: 50px;
  }
  height: 300px;
  img {
    display: block;
    margin: auto;
  }
}
</style>

