Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
0210079
/
myapp_lifevault
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

login

0210071 4 hónapja
szülő
7436e16bd6
commit
3d9790cceb
9 módosított fájl, 586 hozzáadás és 52 törlés
Egyesített Nézet Diff Statisztika Mutatása
  1. 23 19
      src/app/app-routing.module.ts
  2. 17 0
      src/app/login/login-routing.module.ts
  3. 20 0
      src/app/login/login.module.ts
  4. 256 0
      src/app/login/login.page.html
  5. 232 0
      src/app/login/login.page.scss
  6. 17 0
      src/app/login/login.page.spec.ts
  7. 15 0
      src/app/login/login.page.ts
  8. 6 33
      src/app/tab3/tab3.page.ts
  9. BIN
      src/assets/img/bg.jpg

+ 23 - 19
src/app/app-routing.module.ts
Fájl Megtekintése 

@@ -1,20 +1,24 @@
 
-import { NgModule } from '@angular/core';
 
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
-
 
-const routes: Routes = [
 
-  {
 
-    path: '',
 
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
 
-  },
 
-  {
 
-    path: 'new-page',
 
-    loadChildren: () => import('./new-page/new-page.module').then( m => m.NewPagePageModule)
 
+import { NgModule } from '@angular/core';

+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

+

+const routes: Routes = [

+  {

+    path: '',

+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)

+  },

+  {

+    path: 'new-page',

+    loadChildren: () => import('./new-page/new-page.module').then( m => m.NewPagePageModule)

+  },
  {
 
+    path: 'login',
 
+    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
 
   }
 
   }
 
-];
 
-@NgModule({
 
-  imports: [
 
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
 
-  ],
 
-  exports: [RouterModule]
 
-})
 
-export class AppRoutingModule {}
 
+
 
+];

+@NgModule({

+  imports: [

+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

+  ],

+  exports: [RouterModule]

+})

+export class AppRoutingModule {}

+ 17 - 0
src/app/login/login-routing.module.ts
Fájl Megtekintése 

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

+ 20 - 0
src/app/login/login.module.ts
Fájl Megtekintése 

@@ -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 { LoginPageRoutingModule } from './login-routing.module';
 
+
 
+import { LoginPage } from './login.page';
 
+
 
+@NgModule({
 
+  imports: [
 
+    CommonModule,
 
+    FormsModule,
 
+    IonicModule,
 
+    LoginPageRoutingModule
 
+  ],
 
+  declarations: [LoginPage]
 
+})
 
+export class LoginPageModule {}

+ 256 - 0
src/app/login/login.page.html
Fájl Megtekintése 

@@ -0,0 +1,256 @@
 
+<ion-header [translucent]="true">
 
+  <ion-toolbar>
 
+    <ion-title>login</ion-title>
 
+  </ion-toolbar>
 
+</ion-header>
 
+
 
+<!-- <ion-content [fullscreen]="true">
 
+  <ion-header collapse="condense">
 
+    <ion-toolbar>
 
+      <ion-title size="large">login</ion-title>
 
+    </ion-toolbar>
 
+  </ion-header>
 
+</ion-content> -->
 
+
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>登录页</title>
 
+    <link rel="stylesheet" href="login.page.scss">
 
+</head>
 
+ 
+<body>
 
+    <section>
 
+        <div class=" login-box active">
 
+            <div class="login-form">
 
+                <form action="">
 
+                    <h2>Login</h2>
 
+                    <div class="inputbox">
 
+                        <ion-icon name="person-outline"></ion-icon>
 
+                        <input type="text" id="login-user" required>
 
+                        <label for="">Username</label>
 
+                    </div>
 
+                    <div class="inputbox">
 
+                        <ion-icon name="lock-closed-outline"></ion-icon>
 
+                        <input type="password" id="login-pass" required>
 
+                        <label for="">Password</label>
 
+                    </div>
 
+                    <div class="forget">
 
+                        <label for="remember-me">
 
+                            <input type="checkbox" id="remember-me">Remember Me
 
+                            <a href="#" onclick="goBox('forget')">Forget Password</a>
 
+                        </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>
 
+                </form>
 
+            </div>
 
+ 
+        </div>
 
+        <div class="register-box">
 
+            <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>
 
+        <div class="forget-box">
 
+            <div class="forget-form">
 
+                <form action="" id="forget-form">
 
+                    <h2>Find Password</h2>
 
+                    <div class="inputbox">
 
+                        <ion-icon name="mail-outline"></ion-icon>
 
+                        <input type="email" id="forget-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="forget-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="forget-pass" required>
 
+                        <label for="">New Password</label>
 
+                    </div>
 
+                    <button class="registerBtn" onclick="doUpdate()">Update</button>
 
+                    <div class="link">
 
+                        <p>Have a account
 
+                            <a href="#" onclick="goBox('login')">login</a>
 
+                        </p>
 
+                    </div>
 
+                </form>
 
+            </div>
 
+        </div>
 
+    </section>
 
+ 
+    <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>
 
+ 
+        document.addEventListener('DOMContentLoaded', function () {
 
+            // 检查本地存储中的“Remember Me”状态，更新复选框
 
+            let rememberMeCheckbox = document.getElementById('remember-me');
 
+ 
+            if (localStorage.getItem('rememberMe') === 'true') {
 
+                rememberMeCheckbox.checked = true;
 
+ 
+                let user = JSON.parse(localStorage.getItem('user'))
 
+ 
+                document.getElementById('login-user').value=user.username
 
+                document.getElementById('login-pass').value=user.password
 
+            }
 
+        });
 
+ 
+        // 登录事件
 
+        function doLogin() {
 
+            const username = document.getElementById('login-user').value
 
+            const password = document.getElementById('login-pass').value
 
+            console.log('登录表单：',
 
+                {
 
+                    username: username,
 
+                    password: password
 
+                });
 
+            if (username === 'sa' && password === '123') {
 
+                
+                alert('Login Success!!!')
 
+ 
+                const rememberMeCheckBox = document.getElementById('remember-me')
 
+                if (rememberMeCheckBox.checked) {
 
+                    localStorage.setItem('rememberMe', 'true')
 
+ 
+                    const userObj = { username: username, password: password };
 
+                    const userStr = JSON.stringify(userObj);
 
+                    localStorage.setItem('user', userStr);
 
+                } else {
 
+                    localStorage.removeItem('rememberMe')
 
+                    localStorage.removeItem('user')
 
+                }
 
+ 
+ 
+            } else {
 
+                alert('Login Fail!!!')
 
+            }
 
+        }
 
+ 
+        // 注册事件
 
+        function doRegister() {
 
+            const username = document.getElementById('register-user').value
 
+            const email = document.getElementById('register-email').value
 
+            const code = document.getElementById('register-code').value
 
+            const password = document.getElementById('register-pass').value
 
+ 
+ 
+            console.log('注册表单：',
 
+                {
 
+                    username: username,
 
+                    email: email,
 
+                    code: code,
 
+                    password: password
 
+                });
 
+ 
+            if (username && email && code && password) {
 
+                alert('Register Success!!!');
 
+ 
+ 
+                // 清空表单内容
 
+                document.getElementById('register-user').value = '';
 
+                document.getElementById('register-email').value = '';
 
+                document.getElementById('register-code').value = '';
 
+                document.getElementById('register-pass').value = '';
 
+ 
+                // 切换到登录表单
 
+                goBox();
 
+            } else {
 
+                alert('Register Fail!!!');
 
+            }
 
+        }
 
+ 
+        // 找回密码事件
 
+       function doUpdate() {
 
+            const email = document.getElementById('forget-email').value
 
+            const code = document.getElementById('forget-code').value
 
+            const password = document.getElementById('forget-pass').value
 
+ 
+ 
+            console.log('更新密码表单',
 
+                {
 
+                    email: email,
 
+                    code: code,
 
+                    password: password
 
+                });
 
+ 
+            if (email && code && password) {
 
+                alert('UUpdate Success!!!');
 
+ 
+ 
+                // 清空表单内容
 
+                document.getElementById('forget-email').value = '';
 
+                document.getElementById('forget-code').value = '';
 
+                document.getElementById('forget-pass').value = '';
 
+ 
+                // 切换到登录表单
 
+                goBox();
 
+            } else {
 
+                alert('Update Fail!!!');
 
+            }
 
+        }
 
+ 
+        // 切换登录注册表单
 
+        function goBox(type) {
 
+            let loginForm = document.querySelector('.login-box');
 
+            let registerForm = document.querySelector('.register-box');
 
+            let forgetPasswordForm = document.querySelector('.forget-box');
 
+ 
+            // 首先隐藏所有表单
 
+            loginForm.classList.remove('active');
 
+            registerForm.classList.remove('active');
 
+            forgetPasswordForm.classList.remove('active');
 
+ 
+            // 根据目标显示对应的表单
 
+            if (type === 'register') {
 
+                registerForm.classList.add('active');
 
+            } else if (type === 'forget') {
 
+                forgetPasswordForm.classList.add('active');
 
+            } else {
 
+                loginForm.classList.add('active');
 
+            }
 
+        }
 
+ 
+    </script>
 
+</body>
 
+

+ 232 - 0
src/app/login/login.page.scss
Fájl Megtekintése 

@@ -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/login/login.page.spec.ts
Fájl Megtekintése 

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

+ 15 - 0
src/app/login/login.page.ts
Fájl Megtekintése 

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

+ 6 - 33
src/app/tab3/tab3.page.ts
Fájl Megtekintése 

@@ -1,36 +1,7 @@
 
-// import { Component } from '@angular/core';
 
 
 
-// @Component({
 
-//   selector: 'app-tab3',
 
-//   templateUrl: 'tab3.page.html',
 
-//   styleUrls: ['tab3.page.scss']
 
-// })
 
-// export class Tab3Page {
 
-
 
-//   constructor() {}
 
-
 
-//   editProfile() {
 
-//     this.navCtrl.navigateForward('/edit-profile');
 
-//   }
 
-
 
-//   viewInheritance() {
 
-//     // 查看数字遗产信息的逻辑
 
-//   }
 
-
 
-//   manageSecurity() {
 
-//     // 管理安全与隐私设置的逻辑
 
-//   }
 
-
 
-//   getHelp() {
 
-//     // 获取帮助与支持的逻辑
 
-//   }
 
-
 
-//   customizeSettings() {
 
-//     // 定制个性化设置的逻辑
 
-//   }
 
-// }
 
 import { Router } from '@angular/router';
 
 import { Router } from '@angular/router';
 
 import { Component } from '@angular/core';
 
 import { Component } from '@angular/core';
 
+import { NavController } from '@ionic/angular';
 
 
 
 @Component({
 
 @Component({
 
   selector: 'app-tab3',
 
   selector: 'app-tab3',
 
@@ -44,6 +15,10 @@ export class Tab3Page {
 
   editProfile() {
 
   editProfile() {
 
     this.router.navigate(['/new-page']);
 
     this.router.navigate(['/new-page']);
 
   }
 
   }
 
+  openDigitalEstateAccount() {
 
+    // 开通数字遗产账户的逻辑
 
+    this.router.navigate(['/login']);
 
+  }
 
 
 
   viewInheritance() {
 
   viewInheritance() {
 
         // 查看数字遗产信息的逻辑
 
         // 查看数字遗产信息的逻辑
 
@@ -65,9 +40,7 @@ export class Tab3Page {
 
         // 成为黄金会员的逻辑
 
         // 成为黄金会员的逻辑
 
       }
 
       }
 
     
     
-      openDigitalEstateAccount() {
 
-        // 开通数字遗产账户的逻辑
 
-      }
 
+
 
 
 
   
   
 }
 
 }

BIN
src/assets/img/bg.jpg
Fájl Megtekintése