uniapp 简单的登录页布局

向右看齐 2023-01-03 14:30 343阅读 0赞

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbmdrb25ndGlhbnl1emhhbw_size_16_color_FFFFFF_t_70]

<template> <view class="login"> <view class="content-wrapper"> <view class="title"> <h1>欢迎使用考试系统</h1> </view> <view class="login-form"> <view class="login-form-items"> <view class="login-form-items-title">手机号</view> <input type="text" class="login-input" placeholder="手机号" /> </view> <view class="login-form-items"> <view class="login-form-items-title">登录密码</view> <input type="password" class="login-input" placeholder="请输入登录密码" /> </view> <view class="login-form-items"> <view class="login-form-items-title">验证码</view> <input type="text" class="login-input" placeholder="请输入验证码" /> <view class="captcha-wrapper"> <img src="../../static/captcha.jpg"></img> </view> </view> </view> </view> <div class="submit-wrapper"> <button type="primary" class="login-btn">登录</button> </div> </view> </template> <script> export default { 
    		data() { 
    			return { 
    
    			};
    		}
    	}
    </script> <style lang="scss"> page { 
    		background: #F4F5F6;
    	}
    
    	.login { 
    		.content-wrapper { 
    			width: 100%; .title { 
    				margin-top: 35rpx;
    				width: 100%;
    				margin-bottom: 10px; h1 { 
    					border: 0px;
    					width: 50%;
    					margin: 0 auto;
    					text-align: center;
    					border-bottom: 1px solid #E3E3E3;
    					height: 50px;
    					line-height: 50px;
    					font-size: 17px;
    					overflow: hidden;
    					font-weight: 400;
    				}
    			}
    
    			.login-form { 
    				margin: 20px 10px 20px 15px;
    				background: #FFFFFF; .login-form-items { 
    					padding: 15px 10px;
    					border-bottom: 1px solid #F3F4F5;
    					position: relative;
    					display: -webkit-flex;
    					display: flex; .login-form-items-title { 
    						width: 30%;
    						line-height: 22px;
    						height: 22px;
    						flex-shrink: 0;
    					}
    
    					.login-input { 
    						width: 100%
    					}
    
    					img { 
    						width: auto;
    						height: auto;
    						max-width: 100%;
    						max-height: 100%;
    					}
    				}
    			}
    		}
    
    		.submit-wrapper { 
    			padding: 10px;
    			padding-top: 10px;
    		}
    
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbmdrb25ndGlhbnl1emhhbw_size_16_color_FFFFFF_t_70]: /images/20221119/e53be1b8c3824882922af1f6066a85db.png