vue3 移动端登录页面

你可以参考以下代码实现一个简单的 Vue3 移动端登录页面：

<template>
  <div class="login-container">
    <h1>登录</h1>
    <form>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <button type="submit" @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'Login',
  setup() {
    const state = reactive({
      username: '',
      password: '',
    });

    const login = () => {
      // 处理登录逻辑
    };

    return {
      state,
      login,
    };
  },
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 400px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
}

label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

input {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  padding: 0 10px;
  box-sizing: border-box;
}

button {
  width: 100%;
  height: 40px;
  border: none;
  background-color: #1890ff;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}
</style>

这是一个简单的登录页面，包含了用户名和密码两个输入框和一个登录按钮。在 `setup` 中使用了 Vue3 的 `reactive` 函数来定义响应式数据，使用 `@click.prevent` 监听登录按钮的点击事件，并在 `login` 函数中处理登录逻辑。最后在样式中设置了页面的基本样式和布局。