|
@@ -0,0 +1,39 @@
|
|
|
+<template>
|
|
|
+ <div class="login">
|
|
|
+ <a-form :model="formState" @submit="handleSubmit">
|
|
|
+ <a-form-item label="Username" field="username">
|
|
|
+ <a-input v-model="formState.username" placeholder="Enter your username" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="Password" field="password">
|
|
|
+ <a-input-password v-model="formState.password" placeholder="Enter your password" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-button type="primary" html-type="submit">Submit</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { reactive } from 'vue';
|
|
|
+
|
|
|
+const formState = reactive({
|
|
|
+ username: '',
|
|
|
+ password: ''
|
|
|
+});
|
|
|
+
|
|
|
+function handleSubmit(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ console.log(formState);
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.login {
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|