Skip to content

P
party-build-cloud
Commit cf225349 authored by wangqinghua's avatar wangqinghua
Browse files
Options

发现二级菜单

parent 5c38ee91
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 149 deletions
src/app/app.scss
View file @ cf225349
...@@ -328,4 +328,12 @@ a[disabled], button[disabled], [ion-button][disabled], ...@@ -328,4 +328,12 @@ a[disabled], button[disabled], [ion-button][disabled],
min-height: 100px; min-height: 100px;
width: 100%; width: 100%;
border: 1px solid #ddd; border: 1px solid #ddd;
}
.login-box {
padding-top: 4rem;
height: 100%;
background-image: url('../assets/imgs/login-bg.png');
background-repeat: repeat;
background-size: cover;
} }
\ No newline at end of file
src/assets/imgs/icon-password.png
View replaced file @ 5c38ee91 View file @ cf225349
src/assets/imgs/icon-password.png

3.72 KB | W: | H:

src/assets/imgs/icon-password.png

1.38 KB | W: | H:

src/assets/imgs/icon-password.png
src/assets/imgs/icon-password.png
src/assets/imgs/icon-password.png
src/assets/imgs/icon-password.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/imgs/icon-phone.png
View replaced file @ 5c38ee91 View file @ cf225349
src/assets/imgs/icon-phone.png

1.39 KB | W: | H:

src/assets/imgs/icon-phone.png

1.12 KB | W: | H:

src/assets/imgs/icon-phone.png
src/assets/imgs/icon-phone.png
src/assets/imgs/icon-phone.png
src/assets/imgs/icon-phone.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/login/login.html
View file @ cf225349
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<div class="searchToolBar"> <div class="searchToolBar">
<ion-title text-center> <ion-title text-center>
用户登录 用户登录
</ion-title> </ion-title>
</div> </div>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div class="login-box"> <div class="login-box">
<div class="login"> <div class="login">
<img src="./assets/imgs/logo_login.png" class="login-logo"> <img src="./assets/imgs/logo_login.png" class="login-logo">
<form #loginForm="ngForm" class="login-form"> <form #loginForm="ngForm" class="login-form">
<div class="login-input"> <div class="login-input">
<img src="./assets/imgs/icon-phone.png" class="login-input-img"> <img src="./assets/imgs/icon-phone.png" class="login-input-img">
<input [(ngModel)]="user.mobile" class="login-input-content" name="mobile" type="text" #mobile required placeholder="手机号" <input [(ngModel)]="user.mobile" class="login-input-content" name="mobile" type="text" #mobile
(ionBlur)="loseFocus()" (ionFocus)="getFocus()" /> required placeholder="手机号"
</div> (ionBlur)="loseFocus()" (ionFocus)="getFocus()"/>
<div class="login-input"> </div>
<img src="./assets/imgs/icon-password.png" class="login-input-img"> <div class="login-input">
<input [(ngModel)]="user.password" class="login-input-content" name="password" type="password" #password required placeholder="密 码" <img src="./assets/imgs/icon-password.png" class="login-input-img">
(ionBlur)="loseFocus()" (ionFocus)="getFocus()" /> <input [(ngModel)]="user.password" class="login-input-content" name="password" type="password"
</div> #password required placeholder="密 码"
<div class="mui-input-row mui-checkbox mui-left" style="margin-bottom: 15px;"> (ionBlur)="loseFocus()" (ionFocus)="getFocus()"/>
<input [(ngModel)]="user.remember" name="checkbox" class="jizhu-password" value="1" type="checkbox" checked="true" style="margin-left:10px;width:17px;height:17px;vertical-align:middle"> </div>
<label style="padding-left:5px;font-family:'微软雅黑';" class="jizhu-password-label">记住密码</label> <div class="mui-input-row mui-checkbox mui-left" style="margin-bottom: 15px;">
</div> <input [(ngModel)]="user.remember" name="checkbox" class="jizhu-password" value="1" type="checkbox"
checked="true" style="margin-left:10px;width:17px;height:17px;vertical-align:middle">
<button type="button" (click)="forgetPassword()" class="login-btn" style="width: 48%;float: left; color:#e12724;background-color: #ffffff;border-color: #e12724;">忘记密码</button> <label style="padding-left:5px;font-family:'微软雅黑';" class="jizhu-password-label">记住密码</label>
</div>
<button type="button" (click)="login()" class="login-btn" style="width: 48%;float: right;">登&nbsp;&nbsp;录</button> <button type="button" (click)="forgetPassword()" class="login-btn"
style="width: 48%;float: left; color:#e12724;background-color: #ffffff;border-color: #e12724;">
</form> 忘记密码
</button>
<div class="introduce"> <button type="button" (click)="login()" class="login-btn" style="width: 48%;float: right;">登&nbsp;&nbsp;录</button>
登陆手机号为组织部统一配发的手机号，初始密码为000000，使用过程中如有任何问题请联系人事处。 </form>
</div> <div class="introduce">
登陆手机号为组织部统一配发的手机号，初始密码为000000，使用过程中如有任何问题请联系人事处。
</div> </div>
</div>
</div>
</div></ion-content> </ion-content>
\ No newline at end of file \ No newline at end of file
src/pages/login/login.scss
View file @ cf225349
page-login { page-login {
.searchToolBar{ .searchToolBar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: left; justify-content: left;
box-sizing: border-box; box-sizing: border-box;
} }
.login-box{
padding-top: 3rem;
background-color: #f0f1f2;
height: 100%
}
.login{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.login-logo{ .login {
width: 100px; display: flex;
height: 70px; flex-direction: column;
margin: 20px 0; align-items: center;
} justify-content: center;
box-sizing: border-box;
}
.login-form{ .login-logo {
width: 100%; width: 100px;
padding: 0 30px; height: 70px;
} margin: 20px 0;
}
.login-input{ .login-form {
display: flex; width: 100%;
flex-direction: row; padding: 0 30px;
align-items: center; }
justify-content: left;
box-sizing: border-box;
background-color: #feffff;
width: 100%;
border-radius: 5px;
margin-bottom: 20px;
padding: 7px 3px;
font-size: 16px;
}
.login-input-img{ .login-input {
width: 30px; display: flex;
height: 30px; flex-direction: row;
} align-items: center;
justify-content: left;
box-sizing: border-box;
background-color: #feffff;
width: 100%;
border-radius: 5px;
margin-bottom: 20px;
padding: 7px 3px;
font-size: 16px;
border: 1px solid #fee7e7;
color: #333333;
}
input::-webkit-input-placeholder{
color: #e9acad;
}
.login-input-content{ .login-input-img {
// background-color: #feffff; width: 30px;
border: 0; height: 30px;
width: 100%; }
}
.login-bt{ .login-input-content {
background-color: #488afa; border: 0;
font-size: 20px; width: 100%;
} }
// .introduce-box{ .login-bt {
// background-color: #f4f5f6; background-color: #488afa;
// width: 100%; font-size: 20px;
// position: absolute; }
// bottom: 0; .introduce {
// padding: 5px 0; margin: 20px 30px 0 30px;
// } font-size: 14px;
color: #e9acad;
}
// .introduce{ .login-btn {
// margin: 0 0 0 40px; display: block;
// font-size: 16px; width: 100%;
// color: #7e7f80; margin-bottom: 10px;
// } padding: 11px 0;
.introduce{ color: #fff;
margin: 20px 30px 0 30px; border: 1px solid #e12724;
font-size: 14px; background-color: #e12724;
color: #7e7f80; font-size: 18px;
// text-indent:2em; font-weight: 600;
} position: relative;
text-align: center;
white-space: nowrap;
border-radius: 3px;
}
.login-btn{ .jizhu-password {
display: block; color: #4a89f9;
width: 100%; font-family: Muiicons;
margin-bottom: 10px; font-size: 28px;
padding: 11px 0; font-weight: 400;
color: #fff; line-height: 1;
border: 1px solid #e12724; text-decoration: none;
background-color: #e12724; border-radius: 0;
font-size: 18px; background: 0 0;
font-weight: 600; -webkit-font-smoothing: antialiased;
position: relative; }
text-align: center;
white-space: nowrap;
border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.jizhu-password{ .back-btn {
color: #4a89f9; width: 30px;
font-family: Muiicons; height: 30px;
font-size: 28px; }
font-weight: 400;
line-height: 1;
text-decoration: none;
border-radius: 0;
background: 0 0;
-webkit-font-smoothing: antialiased;
}
.back-btn{
width: 30px;
height: 30px;
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment