用uniapp写一个登陆界面

在UniApp中创建一个登录界面，你可以按照以下步骤操作：

1. 打开uni-app项目：首先，你需要打开已经配置好的uni-app项目，这是基于Vue.js的框架。

2. 新建页面：在`pages`文件夹下，新建一个用于登录的页面，例如名为`login.vue`。在这个文件里，你会编写相关的HTML、CSS和JavaScript代码。

<template>
  <view class="login-page">
    <view class="header">登录</view>
    <form @submit.prevent="handleSubmit">
      <input v-model="username" placeholder="用户名" type="text" />
      <input v-model="password" placeholder="密码" type="password" />
      <button type="submit">登录</button>
      <!-- 可选：注册/忘记密码链接 -->
      <a href="#/register">注册</a> | <a href="#/reset-password">忘记密码</a>
    </form>
    <div v-if="error" class="error-message">{{ error }}</div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    };
  },
  methods: {
    handleSubmit(e) {
      // 模拟登录逻辑，实际应用中应发送API请求
      if (this.username === 'example' && this.password === 'password') {
        this.error = '';
      } else {
        this.error = '用户名或密码错误';
      }
    }
  }
};
</script>

<style scoped>
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}
.header {
  text-align: center;
  margin-bottom: 20px;
}
.error-message {
  color: red;
}
</style>

3. 页面样式：这里我们简单地设置了基本的样式，如输入框的位置、颜色和提示信息。

4. 后端验证：上述代码中的模拟逻辑只是最基本的形式，实际应用中需要与服务器交互，验证用户凭据并处理登录状态。