167 lines
3.3 KiB
Plaintext
167 lines
3.3 KiB
Plaintext
/* 最大的父元素 */
|
|
.login{
|
|
display: block;
|
|
position:absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
background:#778899;
|
|
/* 换图片 */
|
|
|
|
}
|
|
/* 白色区域 */
|
|
.login .login-card{
|
|
position: relative;
|
|
margin-top: 150rpx;
|
|
left: 100rpx;
|
|
width: 545rpx;
|
|
height: 750rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 50rpx;
|
|
}
|
|
/* 白色区域内的登录文本 */
|
|
.login .login-card .login-text{
|
|
margin-top: 50rpx;
|
|
position: absolute;
|
|
margin-left:80rpx;
|
|
width: 150rpx;
|
|
height: 100rpx;
|
|
font-size: 60rpx;
|
|
font-family: Helvetica;
|
|
color: #000000;
|
|
line-height: 100rpx;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
/* 手机图片+输入框+下划线的父容器view */
|
|
.login .login-card .phone{
|
|
margin-top: 200rpx;
|
|
margin-left: 35rpx;
|
|
position: absolute;
|
|
display: flex;
|
|
width:450rpx ;
|
|
height: 80rpx ;
|
|
border-bottom: 3rpx solid rgb(58, 57, 57);
|
|
}
|
|
/* 手机图标 */
|
|
.login .login-card .phone .phone-icon{
|
|
margin-top: 5rpx;
|
|
margin-left: 30rpx;
|
|
width: 55rpx;
|
|
height: 55rpx;
|
|
}
|
|
/* 手机号输入框 */
|
|
.login .login-card .phone input{
|
|
width: 200rpx;
|
|
font-size: 25rpx ;
|
|
margin-top: 15rpx;
|
|
margin-left: 30rpx;
|
|
}
|
|
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
|
|
.login .login-card .password{
|
|
margin-top: 400rpx;
|
|
margin-left: 35rpx;
|
|
position: absolute;
|
|
display: flex;
|
|
width:450rpx ;
|
|
height: 80rpx ;
|
|
border-bottom: 3rpx solid rgb(58, 57, 57);
|
|
}
|
|
/* 密码图标 */
|
|
.login .login-card .password .password-icon{
|
|
margin-top: 5rpx;
|
|
margin-left: 30rpx;
|
|
width: 55rpx;
|
|
height: 55rpx;
|
|
}
|
|
/* 眼睛 图标*/
|
|
.login .login-card .password .eye-icon{
|
|
margin-top: 5rpx;
|
|
margin-left: 65rpx;
|
|
width: 55rpx;
|
|
height: 55rpx;
|
|
}
|
|
/* 密码输入框 */
|
|
.login .login-card .password input{
|
|
width: 200rpx;
|
|
font-size: 25rpx ;
|
|
margin-top: 15rpx;
|
|
margin-left: 30rpx;
|
|
}
|
|
/* 注册+忘记密码父容器 */
|
|
.login .login-card .forget-password{
|
|
font-size: 25rpx;
|
|
margin-left: 85rpx;
|
|
width: 370rpx;
|
|
margin-top: 540rpx;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
/* 登录按钮容器view */
|
|
.login .login-card .login-btn{
|
|
width: 350rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
margin-top: 600rpx;
|
|
margin-left: 85rpx;
|
|
|
|
}
|
|
/* 登录按钮 */
|
|
.login .login-card .login-btn button{
|
|
padding: 0rpx;
|
|
line-height: 50rpx;
|
|
font-size: 25rpx;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 30rpx;
|
|
}
|
|
/* 复选框+协议文字容器view */
|
|
.login .login-card .agreement-area{
|
|
margin-left: 10rpx;
|
|
margin-top: 680rpx;
|
|
width: 400rpx;
|
|
display: flex;
|
|
position: absolute;
|
|
}
|
|
/* 复选框 */
|
|
.login .login-card .agreement-area .agreement{
|
|
margin-left: 85rpx;
|
|
/* 修改复选框的大小 */
|
|
transform:scale(.6);
|
|
}
|
|
/* 协议文本 */
|
|
.login .login-card .agreement-area .agreement-text{
|
|
margin-left: 10rpx;
|
|
margin-top: 10rpx;
|
|
color: #000000;
|
|
font-size:20rpx;
|
|
}
|
|
/* 提示文本 */
|
|
.prompt-box{
|
|
padding-left: 100rpx;
|
|
display: flex;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 60rpx;
|
|
padding-top: 50rpx;
|
|
}
|
|
.prompt-box .line{
|
|
margin-left: 5rpx;
|
|
margin-top: 18rpx;
|
|
width: 120rpx;
|
|
height: 3rpx;
|
|
background-color:#FFFFFF;
|
|
}
|
|
.prompt-box .lText{
|
|
color: #FFFFFF;
|
|
font-size: 25rpx;
|
|
}
|
|
.other-login {
|
|
display: flex; /* 启用flex布局 */
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
}
|
|
.other-login image{
|
|
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
} |