<template>
  <!-- 筛查地图 -->
  <div class="index-wrap">
    <!-- <x-header :left-options="{ backText: '', showBack: false }">
      登录
    </x-header> -->
    <v-content
      :has-header="false"
      :has-footer="false"
    >
      
      <van-form @submit="onSubmit">
        <div class="title">登录</div>
        <van-field
          v-model="username"
          name="username"
          label=""
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label=""
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="info"
            class="btn"
            native-type="submit"
            @click="$router.push('/peopleList')"
          >提交</van-button>
        </div>
      </van-form>
    </v-content>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values);
    },
  }
};
</script>
<style lang="scss" scoped>
.content {
  position: relative;
  padding: 0 5px;
}
.van-form {
  width: 100%;
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  .title{
    text-align: center;
    font-size: 20px;
    margin: 20px 0;
  }
  .van-field{
    // height: 44px;
  }
  .btn{
    height: 44px;
    border-radius: 22px !important;
  }
}
</style>
