Prechádzať zdrojové kódy

refactor:login page

s202226701053 6 mesiacov pred
rodič
commit
070ff15ddd

+ 15 - 0
E-Cover-app/deploy.ps1

@@ -0,0 +1,15 @@
+# 打包项目,携带应用前缀(index.html中相对路径将自动修复为/dev/jxnu/<学号>前缀)
+# /dev/ 项目测试版上传路径
+# /dev/jxnu/<学号> nova-crm项目预留路径
+set NODE_OPTIONS=–max_old_space_size=16000
+node ./node_modules/@angular/cli/bin/ng build --base-href=/dev/jxnu/202226701053/
+
+# 清空旧文件目录
+obsutil rm obs://nova-cloud/dev/jxnu/202226701053 -r -f -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com"
+
+# 同步文件目录
+obsutil sync ./www obs://nova-cloud/dev/jxnu/202226701053  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com" -acl=public-read
+
+
+# 授权公开可读
+obsutil chattri obs://nova-cloud/dev/jxnu/202226701053 -r -f -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com" -acl=public-read

BIN
E-Cover-app/src/assets/login/logo.png


+ 1 - 1
E-Cover-app/src/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>Ionic App</title>
+  <title>E-Cover</title>
 
   <base href="/" />
 

+ 3 - 0
E-Cover-app/src/lib/user/modal-user-login-main/modal-user-login-main.component.html

@@ -0,0 +1,3 @@
+<p>
+  modal-user-login-main works!
+</p>

+ 0 - 0
E-Cover-app/src/lib/user/modal-user-login-main/modal-user-login-main.component.scss


+ 22 - 0
E-Cover-app/src/lib/user/modal-user-login-main/modal-user-login-main.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ModalUserLoginMainComponent } from './modal-user-login-main.component';
+
+describe('ModalUserLoginMainComponent', () => {
+  let component: ModalUserLoginMainComponent;
+  let fixture: ComponentFixture<ModalUserLoginMainComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ModalUserLoginMainComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ModalUserLoginMainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

+ 15 - 0
E-Cover-app/src/lib/user/modal-user-login-main/modal-user-login-main.component.ts

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

+ 22 - 3
E-Cover-app/src/lib/user/modal-user-login/modal-user-login.component.html

@@ -1,5 +1,24 @@
-<!-- 用户登录状态 -->
-<ion-card>
+<ion-content>
+  <ion-icon name="arrow-back-outline" size="large" class="back" (click)="goBack()"></ion-icon>
+  <img class="logo" src="assets/login/logo.png" alt="logo">
+  <ion-button id="phone" expand="block" shape="round" (click)="goPhoneLogin()">
+    <ion-icon name="phone-portrait-outline"></ion-icon>
+    手机号登录
+  </ion-button>
+  <ion-checkbox labelPlacement="end">我已阅读并同意<a href="#" (click)="$event.stopPropagation()">《用户协议》</a>和<a href="#"
+      (click)="$event.stopPropagation()">《隐私政策》</a></ion-checkbox>
+  <p>其他登录方式</p>
+  <div id="other">
+    <ion-button class="other" shape="round">
+      <ion-icon slot="icon-only" name="logo-tux"></ion-icon>
+    </ion-button>
+    <ion-button class="other" shape="round">
+      <ion-icon slot="icon-only" name="logo-wechat"></ion-icon>
+    </ion-button>
+  </div>
+</ion-content>
+
+<!-- <ion-card>
   <ion-card-header>
     <ion-card-title>
       <ion-segment [value]="type" (ionChange)="typeChange($event)">
@@ -37,4 +56,4 @@
 
 
   </ion-card-content>
-</ion-card>
+</ion-card> -->

+ 82 - 0
E-Cover-app/src/lib/user/modal-user-login/modal-user-login.component.scss

@@ -0,0 +1,82 @@
+ion-content {
+    --background: #f8f8f8;
+
+    ion-button {
+        color: white;
+
+        ion-icon {
+            margin: 10px;
+        }
+    }
+
+    ion-checkbox {
+        margin: 5% auto;
+        display: block;
+        width: 310px;
+        color: gray;
+        font-size: smaller;
+        --checkbox-background: none;
+        --checkbox-background-checked: black;
+        --checkmark-color: white;
+
+        a {
+            text-decoration: none;
+        }
+    }
+
+    ion-checkbox::part(container) {
+        border-radius: 1000px;
+        border: 1px solid black;
+    }
+
+    p {
+        position: absolute;
+        bottom: 10%;
+        display: block;
+        width: 100%;
+        text-align: center;
+        color: rgb(97, 97, 97);
+    }
+}
+
+.back {
+    position: absolute;
+    color: black;
+    height: 10%;
+}
+
+.logo {
+    margin: 30% auto;
+    width: 70%;
+    display: block;
+}
+
+#other{
+    position:absolute;
+    bottom: 2%;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    width: 100%;
+    height:6%;
+}
+
+#phone {
+    text-align: center;
+    --background: black;
+    height: 6%;
+    margin: 0 5%;
+}
+
+.other {
+    height: 100%;
+    width: 6vh;
+    margin: 2% 7%;
+    --background:none;
+    box-shadow: none;
+
+    ion-icon{
+        color: black;
+    }
+}
+

+ 13 - 3
E-Cover-app/src/lib/user/modal-user-login/modal-user-login.component.ts

@@ -2,7 +2,9 @@ import { Component, Input, OnInit } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
 import { ModalController } from '@ionic/angular/standalone';
 import { CloudUser } from 'src/lib/ncloud';
-
+import { addIcons } from 'ionicons';
+import { arrowBackOutline, logoTux, logoWechat, phonePortraitOutline } from 'ionicons/icons';
+addIcons({ arrowBackOutline,logoWechat,phonePortraitOutline,logoTux });
 @Component({
   selector: 'app-modal-user-login',
   templateUrl: './modal-user-login.component.html',
@@ -64,14 +66,22 @@ export class ModalUserLoginComponent implements OnInit {
     }
 
   }
+
+  goBack() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+
+  goPhoneLogin(){
+    
+  }
 }
 
 export async function openUserLoginModal(modalCtrl: ModalController,type:"login"|"signup"="login"): Promise<CloudUser | null> {
   const modal = await modalCtrl.create({
     component: ModalUserLoginComponent,
     componentProps: { type:type },
-    breakpoints: [0.5, 0.7],
-    initialBreakpoint: 0.5
+    //breakpoints: [0.5, 0.7],
+    //initialBreakpoint: 0.5
   });
   modal.present();