仿照微信写的uni-app项目

最新推荐文章于 2024-04-29 17:32:24 发布

May_OneDay

最新推荐文章于 2024-04-29 17:32:24 发布

阅读量214

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/May_OneDay/article/details/116505115

版权

登录布局

路由搭建

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"app-plus":{
					"titleNView":false
				}
			}
		},
		{
			"path": "pages/index/login",
			"style": {
				"navigationBarTitleText": "uni-app",
				"app-plus":{
					"titleNView":false
				}
			}
		}

第一个页面代码

<template>
	<view class="login">
		<image src="../../static/logo.png" mode="" class="logo"></image>
		<view class="username">
			<text class="icon text-50 margin-right-20">{{$store.icon.my}} </text>
			<input type="text" maxlength="15" value="123456" class="account" />
		</view>
		<view class="username">
			<text class="icon text-50 margin-right-20">{{$store.icon.mobilefill}} </text>
			<input type="password" maxlength="15" class="account" placeholder="请输入手机号"/>
		</view>
		<view class="username">
			<text class="icon text-50 margin-right-20">{{$store.icon.noticefill}} </text>
			<input type="password" maxlength="15" class="account" placeholder="请输入验证码"/>
			<button type="primary" style="border-radius: 50rpx;">获取验证码</button>
		</view>
		<button type="primary" class="logobtn">登录</button>
		<view class="qiehuan">
			<text class="ziti" @tap="changelogin">切换登录方式</text>
			<text class="ziti">注册新账户</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {
		// 点击切换登录方式
		changelogin() {
			uni.showActionSheet({
				itemList: ['用户登录', '邮箱登录'],
				success({
					tapIndex
				}) {
					uni.navigateTo({
						url:'./index'
					})
				}
			});
		}
		},
	}
</script>

<style scoped lang="scss">
	.login {
		justify-content: center;
		align-items: center;
		width: 700rpx;

		.logo {
			width: 150rpx;
			height: 150rpx;
			margin-top: 200rpx;
			margin-bottom: 100rpx;
		}

		.username {
			flex-direction: row;
			width: 550rpx;
			background-color: #FFFFFF;
			margin-left: 100rpx;
			padding: 20rpx;
			border-color: #C0C0C0;
			border-width: 1rpx;
			border-style: solid;
			border-radius: 5rpx;
			.account {
				flex: 1;
			}
		}
		.logobtn{
			width: 550rpx;
			margin-left: 100rpx;
			margin-top: 50rpx;
			text-align: center;
			background-color: green;
		}
		.qiehuan {
			margin-left: 100rpx;
			width: 550rpx;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 10px;
		
			.ziti {
				font-size: 25rpx;
				color: #999999;
			}
		}
	}
</style>

第二个页面代码

<template>
	<view class="login">
		<image src="../../static/logo.png" mode="" class="logo"></image>
		<view class="username">
			<text class="icon text-50 margin-right-20">{{$store.icon.my}} </text>
			<input type="text" maxlength="15" class="account" placeholder="请输入用户名" />
		</view>
		<view class="username">
			<text class="icon text-50 margin-right-20">{{$store.icon.lock}} </text>
			<input type="password" maxlength="15" class="account" placeholder="请输入密码" />
		</view>
		<button type="primary" class="logobtn">登录</button>
		<view class="qiehuan">
			<text class="ziti" @tap="changelogin">切换登录方式</text>
			<text class="ziti">注册新账户</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {
			// 点击切换登录方式
			changelogin() {
				uni.showActionSheet({
					itemList: ['手机登录', '邮箱登录'],
					success({
						tapIndex
					}) {
						uni.navigateTo({
							url:'./login'
						})
					}
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.login {
		justify-content: center;
		align-items: center;
		width: 700rpx;

		.logo {
			width: 150rpx;
			height: 150rpx;
			margin-top: 200rpx;
			margin-bottom: 100rpx;
		}

		.username {
			flex-direction: row;
			width: 550rpx;
			background-color: #FFFFFF;
			margin-left: 100rpx;
			padding: 20rpx;
			border-color: #C0C0C0;
			border-width: 1rpx;
			border-style: solid;
			border-radius: 5rpx;

			.account {
				flex: 1;
			}
		}

		.logobtn {
			width: 550rpx;
			margin-left: 100rpx;
			margin-top: 50rpx;
			text-align: center;
			background-color: green;
		}

		.qiehuan {
			margin-left: 100rpx;
			width: 550rpx;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 10px;

			.ziti {
				font-size: 25rpx;
				color: #999999;
			}
		}
	}
</style>