uniapp登录页面代码

以下是一个简单的 Uniapp 登录页面代码示例：

<template>
  <view class="container">
    <image class="logo" src="/static/logo.png"></image>
    <form class="form" @submit.prevent="login">
      <input type="text" v-model="username" placeholder="用户名">
      <input type="password" v-model="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 在此编写登录逻辑
      // 可以使用 uni.request 或 uni.login 接口
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}
.logo {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}
.form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 80%;
}
input {
  margin-bottom: 20px;
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  font-size: 16px;
}
button {
  padding: 10px;
  border: none;
  background-color: #007aff;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
}
</style>

此代码使用了 Uniapp 的模板语法和基本组件，包括 `view`、`image`、`form`、`input` 和 `button` 等。在 `data` 中定义了 `username` 和 `password` 两个变量，用于双向绑定表单数据。在 `methods` 中定义了 `login` 方法，用于处理登录逻辑，可以使用 Uniapp 提供的网络请求接口 `uni.request` 或使用微信小程序提供的登录接口 `uni.login` 来实现。页面样式使用了简单的 Flexbox 布局和 CSS 样式。