简洁的移动端登录注册界面

非常简洁的登录、注册界面模板，使用uni-app编写，直接复制粘贴即可，无任何引用，全部公开。

在这里插入图片描述

废话不多说，代码如下：

login.vue文件

<template><view class="content"><view class="row-input"><image mode="aspectFit" src="../../static/account.png"></image><input placeholder="账号或邮箱" maxlength="18" /></view><view class="row-input"><image mode="aspectFit" src="../../static/password.png"></image><input placeholder="请输入您的密码" maxlength="18" /></view><view class="login-btn">确认登录</view><view class="function-link"><text @click="register">新用户注册</text><text @click="forget">忘记密码</text></view></view>
</template><script>export default {data() {return {}},methods: {// 注册register() {uni.navigateTo({url: '/pages/index/register'})},// 忘记密码forget() {uni.navigateTo({url: '/pages/index/forget'})}}}
</script><style lang="scss">.content {padding: 100rpx 60rpx;display: flex;flex-direction: column;}.row-input {display: flex;justify-content: flex-start;align-items: center;padding-top: 30rpx;height: 100rpx;border-bottom: 1rpx solid #818181;image {width: 45rpx;height: 45rpx;}input {font-size: 30rpx;padding-left: 30rpx;width: 500rpx;}}.login-btn {display: flex;justify-content: center;align-items: center;border-radius: 10rpx;margin-top: 80rpx;height: 80rpx;font-size: 30rpx;background-color: #fd661f;color: #FFFFFF;}.function-link {margin: 0 20rpx;height: 70rpx;display: flex;justify-content: space-between;align-items: center;font-size: 26rpx;color: #fd661f;}
</style>

forget.vue文件

<template><view class="content"><view class="row-input"><image mode="aspectFit" src="../../static/password.png"></image><input placeholder="旧密码" maxlength="18" /></view><view class="row-input"><image mode="aspectFit" src="../../static/password.png"></image><input placeholder="新密码" maxlength="18" /></view><view class="row-input"><image mode="aspectFit" src="../../static/password.png"></image><input placeholder="再次新密码" maxlength="18" /></view><view class="login-btn">立即修改</view></view>
</template><script>export default {data() {return {}},methods: {}}
</script><style lang="scss">.content {padding: 100rpx 60rpx;display: flex;flex-direction: column;}.row-input {display: flex;justify-content: flex-start;align-items: center;padding-top: 30rpx;height: 100rpx;border-bottom: 1rpx solid #818181;image {width: 45rpx;height: 45rpx;}input {font-size: 30rpx;padding-left: 30rpx;width: 500rpx;}}.login-btn {display: flex;justify-content: center;align-items: center;border-radius: 10rpx;margin-top: 80rpx;height: 80rpx;font-size: 30rpx;background-color: #fd661f;color: #FFFFFF;}
</style>

register.vue文件

<template><view class="content"><view class="row-input"><image mode="aspectFit" src="../../static/email.png"></image><input placeholder="注册邮箱" maxlength="18" /></view><view class="row-input"><image mode="aspectFit" src="../../static/account.png"></image><input placeholder="用户名" maxlength="18" /></view><view class="row-input"><image mode="aspectFit" src="../../static/password.png"></image><input placeholder="设置密码" maxlength="18" /></view><view class="login-btn">立即注册</view></view>
</template><script>export default {data() {return {}},methods: {}}
</script><style lang="scss">.content {padding: 100rpx 60rpx;display: flex;flex-direction: column;}.row-input {display: flex;justify-content: flex-start;align-items: center;padding-top: 30rpx;height: 100rpx;border-bottom: 1rpx solid #818181;image {width: 45rpx;height: 45rpx;}input {font-size: 30rpx;padding-left: 30rpx;width: 500rpx;}}.login-btn {display: flex;justify-content: center;align-items: center;border-radius: 10rpx;margin-top: 80rpx;height: 80rpx;font-size: 30rpx;background-color: #fd661f;color: #FFFFFF;}
</style>