发现二级菜单

src/app/app.scss

@@ -329,3 +329,11 @@ a[disabled], button[disabled], [ion-button][disabled],
   width: 100%;
   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/pages/login/login.html

@@ -14,30 +14,30 @@
             <form #loginForm="ngForm" class="login-form">
                 <div class="login-input">
                     <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="手机号"
-					 (ionBlur)="loseFocus()" (ionFocus)="getFocus()" />
+                    <input [(ngModel)]="user.mobile" class="login-input-content" name="mobile" type="text" #mobile
+                           required placeholder="手机号"
+                           (ionBlur)="loseFocus()" (ionFocus)="getFocus()"/>
                 </div>
                 <div class="login-input">
                     <img src="./assets/imgs/icon-password.png" class="login-input-img">
-					<input [(ngModel)]="user.password" class="login-input-content" name="password" type="password" #password required placeholder="密  码"
-					 (ionBlur)="loseFocus()" (ionFocus)="getFocus()" />
+                    <input [(ngModel)]="user.password" class="login-input-content" name="password" type="password"
+                           #password required placeholder="密  码"
+                           (ionBlur)="loseFocus()" (ionFocus)="getFocus()"/>
                 </div>
                 <div class="mui-input-row mui-checkbox mui-left" style="margin-bottom: 15px;">
-					<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">
+                    <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">
                     <label style="padding-left:5px;font-family:'微软雅黑';" class="jizhu-password-label">记住密码</label>
                 </div>
-
-				<button type="button" (click)="forgetPassword()" class="login-btn" style="width: 48%;float: left; color:#e12724;background-color: #ffffff;border-color: #e12724;">忘记密码</button>
-
+                <button type="button" (click)="forgetPassword()" class="login-btn"
+                        style="width: 48%;float: left; color:#e12724;background-color: #ffffff;border-color: #e12724;">
+                    忘记密码
+                </button>
                 <button type="button" (click)="login()" class="login-btn" style="width: 48%;float: right;">登&nbsp;&nbsp;录</button>
-
             </form>
-
             <div class="introduce">
                 登陆手机号为组织部统一配发的手机号，初始密码为000000，使用过程中如有任何问题请联系人事处。
             </div>
-
         </div>
-
-
-	</div></ion-content>
\ No newline at end of file
+    </div>
+</ion-content>
\ No newline at end of file

src/pages/login/login.scss

 page-login {
 
-    .searchToolBar{
+  .searchToolBar {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -8,13 +8,9 @@ page-login {
     box-sizing: border-box;
   }
 
-    .login-box{
-       padding-top: 3rem;
-        background-color: #f0f1f2;
-        height: 100%
-    }
 
-    .login{
+
+  .login {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -22,18 +18,18 @@ page-login {
     box-sizing: border-box;
   }
 
-    .login-logo{
+  .login-logo {
     width: 100px;
     height: 70px;
     margin: 20px 0;
   }
 
-    .login-form{
+  .login-form {
     width: 100%;
     padding: 0 30px;
   }
 
-    .login-input{
+  .login-input {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -45,45 +41,34 @@ page-login {
     margin-bottom: 20px;
     padding: 7px 3px;
     font-size: 16px;
+    border: 1px solid #fee7e7;
+    color: #333333;
+  }
+  input::-webkit-input-placeholder{
+    color: #e9acad;
   }
 
-    .login-input-img{
+  .login-input-img {
     width: 30px;
     height: 30px;
   }
 
-    .login-input-content{
-        // background-color: #feffff;
+  .login-input-content {
     border: 0;
     width: 100%;
   }
 
-    .login-bt{
+  .login-bt {
     background-color: #488afa;
     font-size: 20px;
   }
-
-    // .introduce-box{
-    //     background-color: #f4f5f6;
-    //     width: 100%;
-    //     position: absolute;
-    //     bottom: 0;
-    //     padding: 5px 0;
-    // }
-
-    // .introduce{
-    //     margin: 0 0 0 40px;
-    //     font-size: 16px;
-    //     color: #7e7f80;
-    // }
-    .introduce{
+  .introduce {
     margin: 20px 30px 0 30px;
     font-size: 14px;
-        color: #7e7f80;
-        // text-indent:2em;
+    color: #e9acad;
   }
 
-    .login-btn{
+  .login-btn {
     display: block;
     width: 100%;
     margin-bottom: 10px;
@@ -97,26 +82,21 @@ page-login {
     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{
+  .jizhu-password {
     color: #4a89f9;
     font-family: Muiicons;
     font-size: 28px;
     font-weight: 400;
     line-height: 1;
     text-decoration: none;
-       
     border-radius: 0;
     background: 0 0;
     -webkit-font-smoothing: antialiased;
   }
 
-    .back-btn{
+  .back-btn {
     width: 30px;
     height: 30px;
   }