移动端登录注册界面样式，简洁切换

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

在这里插入图片描述

废话不多说，代码如下：

login.vue文件

<template><view class="content"><view class="head"><view class="logo">logo</view><text class="tip">欢迎登录xxxx系统</text></view><view class="form-box"><view class="tab-box"><view class="row-tab" @click="tabClick(0)"><text :class="tabIndex==0?'tab-active':''">账号登录</text><text class="thing" v-show="tabIndex==0?true:false"></text></view><view class="row-tab" @click="tabClick(1)"><text :class="tabIndex==1?'tab-active':''">验证码登录</text><text class="thing" v-show="tabIndex==1?true:false"></text></view></view><view v-show="tabIndex==0"><view class="row-input"><input maxlength="11" placeholder="手机号码" /></view><view class="row-input"><input password maxlength="18" placeholder="密码" /></view></view><view v-show="tabIndex==1"><view class="row-input"><input maxlength="11" placeholder="手机号码" /><view class="code"><text @click="getCode">获取验证码</text></view></view><view class="row-input"><input maxlength="6" placeholder="验证码" /></view></view><view class="login-btn">登录</view><view class="menu-link"><text @click="register">注册</text><text>找回密码</text></view></view></view>
</template><script>export default {data() {return {tabIndex: 0, //tab下标}},methods: {// tab点击tabClick(id) {this.tabIndex = id},// 获取验证码getCode() {uni.showToast({title: "获取验证码"})},// 注册register() {uni.navigateTo({url: '/pages/index/register'})}}}
</script><style lang="scss">page {background-color: #007AFF;}.head {padding-left: 80rpx;height: 30vh;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;.logo {display: flex;justify-content: center;align-items: center;border-radius: 8rpx;width: 110rpx;height: 110rpx;font-size: 40rpx;color: #007AFF;font-weight: bold;background-color: #FFFFFF;}.tip {padding-top: 50rpx;color: #FFFFFF;font-size: 40rpx;letter-spacing: 5rpx;font-weight: bold;}}.form-box {padding: 0rpx 80rpx;height: 70vh;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;background-color: #FFFFFF;.tab-box {padding-top: 40rpx;display: flex;justify-content: space-between;align-items: center;height: 80rpx;color: #929293;font-weight: bold;.row-tab {display: flex;flex-direction: column;justify-content: flex-start;align-items: center;font-weight: bold;font-size: 35rpx;width: 50%;height: 100%;.tab-active {color: #4d88f8;}.thing {margin-top: 20rpx;width: 50rpx;height: 6rpx;background-color: #3884f6;}}}.row-input {display: flex;justify-content: space-between;align-items: center;padding-top: 50rpx;font-size: 30rp;height: 100rpx;border-bottom: 1rpx solid #cfcfd0;input {flex: 1;}.code {display: flex;justify-content: flex-end;font-weight: bold;color: #0b77f7;width: 200rpx;font-size: 26rpx;}}.login-btn {margin-top: 80rpx;display: flex;justify-content: center;align-items: center;height: 100rpx;letter-spacing: 10rpx;background: linear-gradient(to right, #0a7df7, #0f62f3);color: #FFFFFF;border-radius: 10rpx;font-size: 30rpx;}.menu-link {position: fixed;left: 80rpx;right: 80rpx;bottom: 50rpx;display: flex;justify-content: space-between;font-size: 28rpx;font-weight: bold;}}
</style>

register.vue文件

<template><view class="content"><view class="row-input"><text>电话号码</text><view class="input-box"><input placeholder="请输入您的电话号码" maxlength="11" /></view></view><view class="row-input2"><text>验证码</text><view class="input-box2"><input class="input2" placeholder="请输入您的验证码" maxlength="6" /><view class="code"><text>获取验证码</text></view></view></view><view class="row-input"><text>登录密码</text><view class="input-box"><input placeholder="请输入您的登录密码" maxlength="18" /></view></view><view class="row-input"><text>确认密码</text><view class="input-box"><input placeholder="再次输入登录密码" maxlength="18" /></view></view><view class="row-input"><text>邀请码</text><view class="input-box"><input placeholder="请输入您的邀请码" maxlength="10" /></view></view><view class="register-btn">注册</view></view>
</template><script>export default {data() {return {}},}
</script><style lang="scss">.content {padding: 0 40rpx;.row-input {display: flex;flex-direction: column;font-size: 30rpx;text {font-size: 28rpx;line-height: 100rpx;font-weight: bold;}.input-box {display: flex;justify-content: space-between;align-items: center;padding: 0 20rpx;height: 80rpx;border-radius: 8rpx;background-color: #f2f3f4;.code {display: flex;justify-content: center;align-items: center;font-size: 28rpx;letter-spacing: 3rpx;width: 200rpx;height: 80rpx;border-radius: 8rpx;background-color: #0a7ff7;color: #FFFFFF;}}}.row-input2 {display: flex;flex-direction: column;font-size: 30rpx;text {font-size: 28rpx;line-height: 100rpx;font-weight: bold;}.input-box2 {display: flex;justify-content: space-between;align-items: center;.input2{padding: 0 20rpx;width: 400rpx;height: 80rpx;border-radius: 8rpx;background-color: #f2f3f4;}.code {display: flex;justify-content: center;align-items: center;font-size: 28rpx;letter-spacing: 3rpx;width: 200rpx;height: 80rpx;border-radius: 8rpx;background-color: #0a7ff7;color: #a5ceff;}}}.register-btn {margin-top: 60rpx;display: flex;justify-content: center;align-items: center;width: 100%;height: 100rpx;background: linear-gradient(to right, #0a7df7, #0f62f3);color: #FFFFFF;letter-spacing: 10rpx;font-size: 30rpx;border-radius: 10rpx;}}
</style>