用vue3写一个登陆界面

好的，以下是一个简单的登陆界面的代码示例：

<template>
  <div class="login-wrapper">
    <h1>Login</h1>
    <form>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit" @click.prevent="login">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    login() {
      // 登录逻辑
      console.log('Username:', this.username)
      console.log('Password:', this.password)
    }
  }
}
</script>

<style>
.login-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

label {
  font-weight: bold;
}

input[type="text"],
input[type="password"] {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

button[type="submit"] {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #0074d9;
  color: #fff;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0063aa;
}
</style>

这个登陆界面使用了 Vue 3 的 `v-model` 指令来实现数据与界面的双向绑定，使用了 `@click.prevent` 来阻止表单的默认提交行为，并在方法中处理登陆逻辑。样式方面，使用了 Flex 布局来对齐和排列元素。