uni-app 23登录注册页

Posted 2021-10-13 2019ab

直接看效果图

如下是主页面代码

login.nvue

<template>
	<view class="">
		<view v-if="show" class="position-fixed top-0 bottom-0 left-0  right-0 bg-light flex align-center justify-center">
			<text class="text-muted font">正在加载...</text>
		</view>
		<view class="" v-else>
			<view class="flex align-center justify-center pt-5" style="height: 350rpx;">
				<text style="font-size: 50rpx;">LOGO</text>
			</view>
			<view class="px-3">
				<input type="text" class="bg-light px-3 mb-3 font" style="height: 100rpx;" value="" placeholder="请输入用户名" />
				<input type="text" class="bg-light px-3 mb-3 font" style="height: 100rpx;" value="" placeholder="请输入密码" />
					<input v-if="type==='reg'" type="text" class="bg-light px-3 mb-3 font" style="height: 100rpx;" value="" placeholder="请输入确认密码" />
			</view>
			<view class="p-3 flex align-center justify-center">
				<view class="flex-1 main-bg-color rounded p-3 flex align-center justify-center" hover-class="main-bg-hover-color">
					<text class="text-white font-md">{{type==='login' ? '登 录' : '注 册'}}</text>
				</view>
			</view>
			
			<view class="flex align-center justify-center">
				<text class='text-light-muted font  p-2' @click="changeType">{{type==='login' ? '注册账号' : '登录账号'}}</text>
				<text class='text-light-muted font'>|</text>
				<text class='text-light-muted font  p-2'>忘记密码</text>
			</view>
		</view>
	  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'login',
				show:false
			}
		},
		created() {
			// uni.switchTab({
			// 	url:'../../tabbar/index/index'
			// })
			// setTimeout(()=>{
			// 	// 用户登录
			// 	this.show = true;
			// 	用户登录
			// 	uni.switchTab({
			// 		url:'../../tabbar/index/index',
			// 	})
			// },800);
		},
		methods: {
			changeType(){
				this.type = this.type==='login' ? 'reg' : 'login';
			}
		}
	}
</script>

<style>
.page-loading{
	background-color: #C8C7CC;
	/* #ifdef APP-PLUS-NVUE */
	min-height: 100%;
	height: auto;
	/* #endif */
	/* #ifdef APP-PLUS-NVUE */
	flex:1;
	/* #endif */
}
</style>

感谢大家观看，我们下期见