coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

登录页面样式小调整

Browse Source
This commit is contained in:
小墨
2022-11-05 16:46:48 +08:00
parent 5cf1ed3a49
commit 989ed748dd
2 changed files with 104 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
miniprogram/pages/login/login.wxml
View File

@@ -1,32 +1,27 @@
<!--pages/login/login.wxml--> <!--pages/login/login.wxml-->
<view class="container"> <view class="container">
<view class="login-icon"> <view class="login-icon">
<image class="login-img" src="../../icon/logo.webp"></image> <image class="login-img" src="../../icon/login-background.svg"></image>
</view> </view>
<view class="login-from"> <view class="login-from">
<!--账号-->
<!--账号--> <view class="inputView">
<view class="inputView"> <image class="nameImage" src="../../icon/username.png"></image>
<image class="nameImage" src="../../icon/username.png"></image> <input class="inputText" placeholder="账号" bindinput="usernameInput" />
<label class="loginLab">账号</label> </view>
<input class="inputText" placeholder="请输入账号" bindinput="usernameInput" /> <view class="line"></view>
</view> <!--密码-->
<view class="line"></view> <view class="inputView" style="margin-top:30px;">
<image class="keyImage" src="../../icon/password.png"></image>
<!--密码--> <input class="inputText" password="true" placeholder="密码" bindinput="passwordInput" />
<view class="inputView" style="margin-top:30px;"> </view>
<image class="keyImage" src="../../icon/password.png"></image> <view class="line"></view>
<label class="loginLab">密码</label> <!--按钮-->
<input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> <view class="loginBtnView" style="margin-top: 30px;">
</view> <button class="loginBtn" type="primary" bindtap="login">登录</button>
<view class="line"></view> </view>
<view class="loginBtnView">
<!--按钮--> <button class="loginBtn" type="primary" bindtap="visitor">访客申请</button>
<view class="loginBtnView" style="margin-top: 30px;"> </view>
<button class="loginBtn" type="primary" bindtap="login">登录</button> </view>
</view> </view>
<view class="loginBtnView">
<button class="loginBtn" type="primary" bindtap="visitor">访客申请</button>
</view>
</view>
</view>

151
miniprogram/pages/login/login.wxss
View File

@@ -1,74 +1,79 @@
page{ page {
height: 100%; height: 100%;
} }
.container { .container {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
/*登录图片*/ /*登录图片*/
.login-icon{ .login-icon {
flex: none; flex: none;
} }
.login-img{
margin-top: 50px; .login-img {
width: 450rpx; margin-top: 50px;
} width: 450rpx;
}
/*表单内容*/
.login-from { /*表单内容*/
margin-top: 20px; .login-from {
flex: auto; margin-top: 20px;
height:100%; flex: auto;
} height: 100%;
}
.inputView {
background-color: #fff; .inputView {
line-height: 44px; background-color: #fff;
} line-height: 44px;
/*输入框*/ }
.nameImage, .keyImage {
margin-left: 22px; /*输入框*/
width: 14px; .nameImage,
height: 14px .keyImage {
} margin-left: 22px;
margin-right: 8px;
.loginLab { width: 14px;
margin: 15px 15px 15px 10px; height: 14px;
color: #545454; vertical-align: middle;
}
.loginLab {
margin: 15px 15px 15px 10px;
color: #545454;
font-size: 14px font-size: 14px
} }
.inputText {
flex: block; .inputText {
float: right; flex: block;
text-align: right; float: right;
margin-right: 22px; margin-right: 22px;
margin-top: 11px; margin-top: 11px;
color: #cccccc; color: #cccccc;
font-size: 14px font-size: 14px;
} }
.line { .line {
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: #cccccc; background-color: #cccccc;
margin-top: 1px; margin-top: 1px;
} }
/*按钮*/
.loginBtnView { /*按钮*/
width: 100%; .loginBtnView {
height: auto; width: 100%;
margin-top: 0px; height: auto;
margin-bottom: 0px; margin-top: 0px;
padding-bottom: 0px; margin-bottom: 0px;
} padding-bottom: 0px;
}
.loginBtn {
width: 80%; .loginBtn {
margin-top: 10px; width: 80%;
} margin-top: 10px;
}