登录界面的完成

src/app/app.module.ts

@@ -13,7 +13,6 @@ import {TabDiscoverPage} from "../pages/learn-tab-page/tab-discover-page/tab-dis
 import {TabBroadcastPage} from "../pages/learn-tab-page/tab-broadcast-page/tab-broadcast-page";
 import {TabMessagesPage} from "../pages/learn-tab-page/tab-messages-page/tab-messages-page";
 import {TabMorePagePage} from "../pages/learn-tab-page/tab-more-page-page/tab-more-page-page";
-import {Splash} from "../pages/splash/splash";
 import {GoodListsPage} from "../pages/learn-tab-page/good-lists-page/good-lists-page";
 import {GoodsService} from "../providers/goods-service";
 import {HttpModule} from "@angular/http";
@@ -29,7 +28,6 @@ import {GoodDetailPage} from "../pages/learn-tab-page/good-detail-page/good-deta
     TabMessagesPage,
     TabMorePagePage,
     GoodListsPage,
-    Splash,
     GoodDetailPage,
   ],
   imports: [
@@ -52,7 +50,6 @@ import {GoodDetailPage} from "../pages/learn-tab-page/good-detail-page/good-deta
     TabMessagesPage,
     TabMorePagePage,
     GoodListsPage,
-    Splash,
     GoodDetailPage
 
   ],

src/app/app.scss

@@ -1,6 +1,8 @@
 // http://ionicframework.com/docs/v2/theming/
 
-
+::-webkit-scrollbar {
+  display: none !important;
+}
 // App Global Sass
 // --------------------------------------------------
 // Put style rules here that you want to apply globally. These

src/pages/learn-tab-page/tab-more-page-page/tab-more-page-page.html

@@ -1,18 +1,61 @@
-<!--
-  Generated template for the TabMorePagePage page.
+<ion-header id="header">
+  <div class="header-left" (click)="goBack();">
+    <img src="assets/img/common/back.png"/>
+  </div>
+  <div class="header-center">
+    <span>登录</span>
+  </div>
+  <div class="header-right">
+    <span></span>
+  </div>
 
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>TabMorePagePage</ion-title>
-  </ion-navbar>
 
 </ion-header>
 
 
-<ion-content padding>
+<ion-content class="content">
+
+  <ion-input id="user_name" placeholder="用户名/邮箱/已验证手机"></ion-input>
+  <div class="div_password_conetnt">
+    <ion-input id="user_password" placeholder="请输入密码" clearInput type="password"></ion-input>
+    <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
+  </div>
+  <div class="div_password_conetnt">
+    <ion-input id="user_password" placeholder="请输入验证码"></ion-input>
+    <p>|</p>
+    <img width="20%" height="43px" src="assets/img/common/verify_code.jpg">
+  </div>
+
+  <div id="btn_login">
+    <div style="color:gray">登录</div>
+  </div>
+  <div id="onetep_btn_login">
+    <div style="color: red">注册</div>
+  </div>
+  <div class="div_login_check">
+    <ion-checkbox id="checkbox_login" [(ngModel)]="mushrooms" color="red"></ion-checkbox>
+    <div style=" margin-left:5px;color: black "> 一个月内免登陆</div>
+  </div>
+  <div class="div_bttom_function">
+    <div style="display: flex;align-items:center">
+      <img src="assets/img/common/return_password.png" width="24px" height="24px"/>
+      <p>找回密码</p>
+    </div>
+
+    <div style="display: flex; align-items:center">
+      <img src="assets/img/common/register.png" width="24px" height="24px"/>
+      <p>快速注册</p>
+    </div>
+  </div>
+  <div style="display: flex;align-items:center; margin-left: 5%;
+    margin-right: 5%; width: 90%" >
+  <p style="width:30%;height:1px;background-color: #5d5d5d;margin-right: 5% " ></p>
+    <p style="color: #5d5d5d " >其他登录方式</p>
+    <p style="width:30%;height:1px;background-color: #5d5d5d;margin-left: 5% " ></p>
+  </div>
+  <div style="display: flex;flex-direction: column;align-items: center">
+    <img src="assets/img/common/qq.png"  width="24px" height="24px"/>
+    <p>QQ</p>
+  </div>
 
 </ion-content>

src/pages/learn-tab-page/tab-more-page-page/tab-more-page-page.scss

@@ -1,3 +1,126 @@
 page-tab-more-page-page {
+  #header {
+    display: block;
+    background-color: #f9f9f9;
+    background-size: 100% 44px;
+    width: 100%;
+    height: 44px;
+    overflow: hidden;
+  }
+  .header-left {
+    width: 40px;
+    height: 44px;
+    position: absolute;
+  }
+  .header-left img {
+    //src:url('../');
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+  }
+  .header-center {
+    display: flex;
+    height: 44px;
+    position: absolute;
+    left: 40px;
+    right: 40px;
+    align-items: center;
+    justify-content: center;
+  }
+  .header-center span {
+    font-size: 17px;
+    color: #616161;
+  }
+  .header-right {
+    width: 40px;
+    height: 44px;
+    position: absolute;
+    right: 0;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex-flow: wrap;
+    background-color: #F3F5F7;
 
+  }
+  //.content #user_name{
+  //  width: 90%;
+  //  margin-top: 25px;
+  //  margin-left: 5%;
+  //  margin-right: 5%;
+  //  border-radius:5px;
+  //  border: 1px solid #EEEEEE;
+  //  background-color: white;
+  //}
+  .content #user_name {
+    width: 90%;
+    margin-left: 5%;
+    margin-right: 5%;
+    margin-top: 15px;
+    border-radius: 5px;
+    border: 1px solid #EEEEEE;
+    background-color: white;
+  }
+  .div_password_conetnt {
+    display: flex;
+    flex-direction: row;
+    border: 1px solid #EEEEEE;
+    background-color: white;
+    width: 90%;
+    margin-left: 5%;
+    margin-right: 5%;
+    margin-top: 15px;
+    border-radius: 5px;
+    border: 1px solid #EEEEEE;
+  }
+  .content #user_password {
+    type: "password"
+  }
+  #btn_login {
+    width: 90%;
+    height: 45px;
+    margin-left: 5%;
+    margin-right: 5%;
+    border-radius: 5px;
+    border: 1px solid #EEEEEE;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 35px;
+    background-color: #EEEEEE;
+  }
+  #onetep_btn_login {
+    width: 90%;
+    height: 45px;
+    margin-left: 5%;
+    margin-right: 5%;
+    border-radius: 5px;
+    border: 1px solid red;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 25px;
+    background-color: white;
+  }
+  .div_login_check{
+    width: 90%;
+    margin-left: 5%;
+    margin-right: 5%;
+    display: flex;
+    //align-items:flex-start;
+    //justify-content: center;
+    margin-top: 15px;
+  }
+  #checkbox_login{
+
+  }
+  .div_bttom_function{
+    width: 90%;
+    margin-top: 10px;
+    margin-left: 5%;
+    margin-right: 5%;
+    display: flex;
+    justify-content: space-between;
+  }
 }