Home Explore Help
Register Sign In
0210079
/
myapp_lifevault
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

register

0210071 4 months ago
parent
3d9790cceb
commit
0d52e9f6ed
10 changed files with 367 additions and 10 deletions
Split View Show Diff Stats
  1. 4 0
      src/app/app-routing.module.ts
  2. 10 8
      src/app/login/login.page.html
  3. 5 1
      src/app/login/login.page.ts
  4. 17 0
      src/app/register/register-routing.module.ts
  5. 20 0
      src/app/register/register.module.ts
  6. 46 0
      src/app/register/register.page.html
  7. 232 0
      src/app/register/register.page.scss
  8. 17 0
      src/app/register/register.page.spec.ts
  9. 15 0
      src/app/register/register.page.ts
  10. 1 1
      src/app/tab3/tab3.page.ts

+ 4 - 0
src/app/app-routing.module.ts
View File 

@@ -12,6 +12,10 @@ const routes: Routes = [
 
   },
  {
 
     path: 'login',
 
     loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
 
+  },
 
+  {
 
+    path: 'register',
 
+    loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
 
   }
 
 
 ];

+ 10 - 8
src/app/login/login.page.html
View File 

@@ -43,16 +43,17 @@
 
                         </label>
 
                     </div>
 
                     <button class="loginBtn" onclick="doLogin()">Log In</button>
 
-                    <div class="link">
 
-                        <p>Don't have a account
 
-                            <a href="#" onclick="goBox('register')">register</a>
 
-                        </p>
 
+                    
+                    <div (click)="goRegister()" style="color: white;">
 
+                      <p>Don't have a account</p>
 
+                      register
 
                     </div>
 
+                    
                 </form>
 
             </div>
 
  
         </div>
 
-        <div class="register-box">
 
+        <!-- <div class="register-box">
 
             <div class="register-form">
 
                 <form action="" id="register-form">
 
                     <h2>Register</h2>
 
@@ -87,6 +88,7 @@
 
                 </form>
 
             </div>
 
         </div>
 
+
 
         <div class="forget-box">
 
             <div class="forget-form">
 
                 <form action="" id="forget-form">
 
@@ -115,10 +117,10 @@
 
                     </div>
 
                 </form>
 
             </div>
 
-        </div>
 
+        </div> -->
 
     </section>
 
  
-    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
 
+    <!-- <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
 
     <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
 
     <script>
 
  
@@ -251,6 +253,6 @@
 
             }
 
         }
 
  
-    </script>
 
+    </script> -->
 
 </body>

+ 5 - 1
src/app/login/login.page.ts
View File 

@@ -1,4 +1,5 @@
 
 import { Component, OnInit } from '@angular/core';
 
+import { Router } from '@angular/router';
 
 
 @Component({
 
   selector: 'app-login',
 
@@ -7,8 +8,11 @@ import { Component, OnInit } from '@angular/core';
 
 })
 
 export class LoginPage implements OnInit {
 
 
-  constructor() { }
 
+  constructor(private router: Router) {}
 
 
+  goRegister(){
 
+    this.router.navigate(['/register']);
 
+  }
 
   ngOnInit() {
 
   }

+ 17 - 0
src/app/register/register-routing.module.ts
View File 

@@ -0,0 +1,17 @@
 
+import { NgModule } from '@angular/core';
 
+import { Routes, RouterModule } from '@angular/router';
 
+
 
+import { RegisterPage } from './register.page';
 
+
 
+const routes: Routes = [
 
+  {
 
+    path: '',
 
+    component: RegisterPage
 
+  }
 
+];
 
+
 
+@NgModule({
 
+  imports: [RouterModule.forChild(routes)],
 
+  exports: [RouterModule],
 
+})
 
+export class RegisterPageRoutingModule {}

+ 20 - 0
src/app/register/register.module.ts
View File 

@@ -0,0 +1,20 @@
 
+import { NgModule } from '@angular/core';
 
+import { CommonModule } from '@angular/common';
 
+import { FormsModule } from '@angular/forms';
 
+
 
+import { IonicModule } from '@ionic/angular';
 
+
 
+import { RegisterPageRoutingModule } from './register-routing.module';
 
+
 
+import { RegisterPage } from './register.page';
 
+
 
+@NgModule({
 
+  imports: [
 
+    CommonModule,
 
+    FormsModule,
 
+    IonicModule,
 
+    RegisterPageRoutingModule
 
+  ],
 
+  declarations: [RegisterPage]
 
+})
 
+export class RegisterPageModule {}

+ 46 - 0
src/app/register/register.page.html
View File 

@@ -0,0 +1,46 @@
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>注册页</title>
 
+  <link rel="stylesheet" href="register.page.scss">
 
+</head>
 
+
 
+<body>
 
+  <section>
 
+    <div class="register-box active">
 
+      <div class="register-form">
 
+          <form action="" id="register-form">
 
+              <h2>Register</h2>
 
+              <div class="inputbox">
 
+                  <ion-icon name="person-outline"></ion-icon>
 
+                  <input type="text" id="register-user" required>
 
+                  <label for="">Username</label>
 
+              </div>
 
+              <div class="inputbox">
 
+                  <ion-icon name="mail-outline"></ion-icon>
 
+                  <input type="email" id="register-email" required>
 
+                  <label for="">Email</label>
 
+              </div>
 
+              <div class="inputbox" style="width: 200px;">
 
+                  <ion-icon name="shield-checkmark-outline"></ion-icon>
 
+                  <input type="text" id="register-code" required>
 
+                  <label for="">Enter Captcha</label>
 
+                  <button onclick="sendCode()">Send Code</button>
 
+              </div>
 
+              <div class="inputbox">
 
+                  <ion-icon name="lock-closed-outline"></ion-icon>
 
+                  <input type="password" id="register-pass" required>
 
+                  <label for="">Password</label>
 
+              </div>
 
+
 
+              <button class="registerBtn" onclick="doRegister()">Register</button>
 
+              <div class="link">
 
+                  <p>Have a account
 
+                      <a href="#" onclick="goBox('login')">login</a>
 
+                  </p>
 
+              </div>
 
+          </form>
 
+      </div>
 
+    </div>
 
+  </section>
 
+</body>

+ 232 - 0
src/app/register/register.page.scss
View File 

@@ -0,0 +1,232 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+ 
+section {
 
+    min-height: 100vh;
 
+    width: 100%;
 
+    background: url(../../assets/img/bg.jpg) no-repeat;
 
+    background-position: center;
 
+    background-size: cover;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    overflow: hidden;
 
+    position: relative;
 
+}
 
+ 
+.login-box,
 
+.register-box,
 
+.forget-box {
 
+    width: 400px;
 
+    height: 400px;
 
+    position: absolute;
 
+    opacity: 0;
 
+    visibility: hidden;
 
+    transform: translateX(50%);
 
+    -webkit-transform: translateX(50%);
 
+    -moz-transform: translateX(50%);
 
+    -ms-transform: translateX(50%);
 
+    -o-transform: translateX(50%);
 
+    transition: all 1s ease-in-out;
 
+    -webkit-transition: all 1s ease-in-out;
 
+    -moz-transition: all 1s ease-in-out;
 
+    -ms-transition: all 1s ease-in-out;
 
+    -o-transition: all 1s ease-in-out;
 
+}
 
+ 
+.register-box {
 
+    height: 550px;
 
+}
 
+ 
+ 
+.active {
 
+    opacity: 1;
 
+    visibility: visible;
 
+    transform: translateX(0);
 
+    -webkit-transform: translateX(0);
 
+    -moz-transform: translateX(0);
 
+    -ms-transform: translateX(0);
 
+    -o-transform: translateX(0);
 
+}
 
+ 
+.login-form,
 
+.register-form,
 
+.forget-form {
 
+    position: relative;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    width: 400px;
 
+    height: 450px;
 
+    background: transparent;
 
+    border: 1px solid rgba(255, 255, 255, 0.5);
 
+    backdrop-filter: blur(15px);
 
+    border-radius: 20px;
 
+    -webkit-border-radius: 20px;
 
+    -moz-border-radius: 20px;
 
+    -ms-border-radius: 20px;
 
+    -o-border-radius: 20px;
 
+}
 
+ 
+.register-form {
 
+    height: 550px;
 
+    padding: 30px 0 0 0;
 
+}
 
+ 
+.forget-form{
 
+    
+    padding: 30px 0 0 0;
 
+}
 
+ 
+ 
+h2 {
 
+    font-size: 2em;
 
+    color: #fff;
 
+    text-align: center;
 
+}
 
+ 
+.inputbox {
 
+    position: relative;
 
+    margin: 30px 0;
 
+    width: 310px;
 
+    border-bottom: 2px solid #fff;
 
+ 
+    button{
 
+        position: absolute;
 
+        right: -110px;
 
+        top: 8px;
 
+        width: 100px;
 
+        height: 40px;
 
+        font-size: 1em;
 
+        border-radius: 5px;
 
+        background:transparent;
 
+        border: 1px solid #fff;
 
+        color: #fff;
 
+        -webkit-border-radius: 5px;
 
+        -moz-border-radius: 5px;
 
+        -ms-border-radius: 5px;
 
+        -o-border-radius: 5px;
 
+ 
+        &:hover{
 
+            transform: translateY(-10%);
 
+            -webkit-transform: translateY(-10%);
 
+            -moz-transform: translateY(-10%);
 
+            -ms-transform: translateY(-10%);
 
+            -o-transform: translateY(-10%);
 
+            transition: all 0.3s ease-in-out;
 
+            -webkit-transition: all 0.3s ease-in-out;
 
+            -moz-transition: all 0.3s ease-in-out;
 
+            -ms-transition: all 0.3s ease-in-out;
 
+            -o-transition: all 0.3s ease-in-out;
 
+            box-shadow: 0px 3px 8px -3px #fff;
 
+            
+}
 
+}
 
+}
 
+ 
+.inputbox label {
 
+    position: absolute;
 
+    top: 50%;
 
+    left: 5px;
 
+    color: #fff;
 
+    font-size: 1em;
 
+    pointer-events: none;
 
+    transform: translateY(-50%);
 
+    -webkit-transform: translateY(-50%);
 
+    -moz-transform: translateY(-50%);
 
+    -ms-transform: translateY(-50%);
 
+    -o-transform: translateY(-50%);
 
+    transition: .5s;
 
+    -webkit-transition: .5s;
 
+    -moz-transition: .5s;
 
+    -ms-transition: .5s;
 
+    -o-transition: .5s;
 
+}
 
+ 
+input:focus~label,
 
+input:valid~label {
 
+    top: -5px;
 
+}
 
+ 
+.inputbox input {
 
+    width: 100%;
 
+    height: 50px;
 
+    background: transparent;
 
+    border: none;
 
+    outline: none;
 
+    font-size: 1em;
 
+    padding: 0 35px 0 5px;
 
+    color: #fff;
 
+}
 
+ 
+.inputbox ion-icon {
 
+    position: absolute;
 
+    right: 8px;
 
+    color: #fff;
 
+    font-size: 1.2em;
 
+    top: 20px;
 
+}
 
+ 
+.forget {
 
+    margin: -15px 0 35px;
 
+    font-size: .9em;
 
+    color: #fff;
 
+ 
+    label {
 
+        input {
 
+            margin-right: 3px;
 
+            color: #fff;
 
+        }
 
+ 
+        a {
 
+            margin-left: 5px;
 
+            font-size: .9em;
 
+            color: #fff;
 
+            text-decoration: none;
 
+            font-weight: 700;
 
+            float: right;
 
+ 
+            &:hover {
 
+                text-decoration: underline;
 
+            }
 
+        }
 
+    }
 
+}
 
+ 
+.loginBtn,
 
+.registerBtn {
 
+    width: 100%;
 
+    height: 40px;
 
+    border-radius: 40px;
 
+    -webkit-border-radius: 40px;
 
+    -moz-border-radius: 40px;
 
+    -ms-border-radius: 40px;
 
+    -o-border-radius: 40px;
 
+    background: #fff;
 
+    border: none;
 
+    outline: none;
 
+    cursor: pointer;
 
+    font-size: 1em;
 
+    font-weight: 700;
 
+}
 
+ 
+.link {
 
+    font-size: .9em;
 
+    color: #fff;
 
+    text-align: center;
 
+    margin: 25px 0 10px;
 
+ 
+    a {
 
+        text-decoration: none;
 
+        color: #fff;
 
+        font-weight: 600;
 
+        font-size: .9em;
 
+        margin-left: 5px;
 
+ 
+        &:hover {
 
+            text-decoration: underline;
 
+        }
 
+    }
 
+}

+ 17 - 0
src/app/register/register.page.spec.ts
View File 

@@ -0,0 +1,17 @@
 
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { RegisterPage } from './register.page';
 
+
 
+describe('RegisterPage', () => {
 
+  let component: RegisterPage;
 
+  let fixture: ComponentFixture<RegisterPage>;
 
+
 
+  beforeEach(() => {
 
+    fixture = TestBed.createComponent(RegisterPage);
 
+    component = fixture.componentInstance;
 
+    fixture.detectChanges();
 
+  });
 
+
 
+  it('should create', () => {
 
+    expect(component).toBeTruthy();
 
+  });
 
+});

+ 15 - 0
src/app/register/register.page.ts
View File 

@@ -0,0 +1,15 @@
 
+import { Component, OnInit } from '@angular/core';
 
+
 
+@Component({
 
+  selector: 'app-register',
 
+  templateUrl: './register.page.html',
 
+  styleUrls: ['./register.page.scss'],
 
+})
 
+export class RegisterPage implements OnInit {
 
+
 
+  constructor() { }
 
+
 
+  ngOnInit() {
 
+  }
 
+
 
+}

+ 1 - 1
src/app/tab3/tab3.page.ts
View File 

@@ -1,7 +1,7 @@
 
 
 import { Router } from '@angular/router';
 
 import { Component } from '@angular/core';
 
-import { NavController } from '@ionic/angular';
 
+
 
 
 @Component({
 
   selector: 'app-tab3',