使用uniapp编写一款简洁实用的注册页面

<template>  <view class="container">    <view class="title">注册</view>    <form class="form-box" @submit.prevent="onSubmit">      <view class="input-box">        <input class="input" type="text" placeholder="请输入邮箱/手机号" v-model="account" />      </view>      <view class="input-box">        <input class="input" type="password" placeholder="请输入密码" v-model="password1" />      </view>      <view class="input-box">        <input class="input" type="password" placeholder="请再次输入密码" v-model="password2" />      </view>           <button class="button" type="submit">注册</button>    </form>  </view></template><script>export default {  data() {    return {      account: "",      password1: "",      password2: "",    };  },  methods: {    onSubmit() {      const { account, password1, password2 } = this;      if (!account) {        return uni.showToast({          title: "请输入邮箱/手机号",          icon: "none",        });      }      if (!password1) {        return uni.showToast({          title: "请输入密码",          icon: "none",        });      }      if (!password2) {        return uni.showToast({          title: "请再次输入密码",          icon: "none",        });      }      if (password1 !== password2) {        return uni.showToast({          title: "两次输入的密码不一致",          icon: "none",        });      }      // 注册成功后跳转到首页      uni.reDirectTo({        url: "/pages/home/index",      });    },  },};</script><style>.container {  display: flex;  flex-direction: column;  align-items: center;  margin-top: 100rpx;  padding: 50rpx;}.form-box {  width: 80%;  border: 1px solid #ccc;  border-radius: 5rpx;  padding: 30rpx;  margin-top: 20rpx;}.title {  font-size: 36rpx;  margin-bottom: 30rpx;}.input-box {  margin-bottom: 20rpx;}.input {  width: 100%;  padding: 20rpx;  font-size: 28rpx;  border: 1px solid #ccc;  border-radius: 5rpx;}.button {  width: 100%;  padding: 20rpx;  font-size: 28rpx;  background-color: #00aeef;  border: none;  border-radius: 5rpx;  color: white;  cursor: pointer;}</style>