add:login_style

AIart-app/src/app/tab1/tab1.page.ts

@@ -21,6 +21,7 @@ import { Router } from '@angular/router';
 })
 export class Tab1Page {
   constructor(private router: Router) { }
+
   goToInterestTest() {
     this.router.navigate(['/tabs/interest-test'])
   }

AIart-app/src/app/user-login/user-login.component.html

@@ -21,9 +21,9 @@
   <ion-card style="height: 90%;width: 90%;">
     <!-- 未登录 -->
     @if(!currentUser?.id){
-    <ion-card-header>
-      <ion-card-title>请登录</ion-card-title>
-      <ion-card-subtitle>暂无信息</ion-card-subtitle>
+    <ion-card-header style="display: flex;align-items: center;">
+      <ion-card-title>Register/Login</ion-card-title>
+      <ion-card-subtitle>no user information</ion-card-subtitle>
     </ion-card-header>
     }
     <!-- 已登录 -->
@@ -42,12 +42,21 @@
     }
     <ion-card-content>
       @if(!currentUser?.id){
-      <ion-button expand="block" (click)="signup()" color="success">注册</ion-button>
-      <ion-button expand="block" (click)="login()" color="success">登录</ion-button>
+      <img src="../../assets/img/background.png" alt="登录注册">
+      <ion-button expand="block" (click)="signup()">注册</ion-button>
+      <ion-button expand="block" (click)="login()">登录</ion-button>
+      <div style="display: flex;align-items: center;">
+        <img style="height: 40px;width: 40px;border-radius: 20px;" src="../../assets/img/login_icon.png" alt="">
+        <img style="height: 40px;width: 40px;border-radius: 10px;" src="../../assets/img/login_icon2.png" alt="">
+        <!-- <img style="height: 40px;width: 40px;border-radius: 20px;" src="../../assets/img/login_icon3.png" alt="">
+        <img style="height: 40px;width: 40px;border-radius: 20px;" src="../../assets/img/login_icon4.png" alt=""> -->
+      </div>
+      <span style="margin-left: 70px;">Forgot your password?</span>
+      <!-- <img src="../../assets/img/login_icon.png" alt=""> -->
       }
       @if(currentUser?.id){
-      <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
-      <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
+      <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
+      <ion-button expand="block" (click)="logout()">登出</ion-button>
       }
     </ion-card-content>
   </ion-card>

AIart-app/src/app/user-login/user-login.component.scss

@@ -11,4 +11,25 @@
     color: #000000;
     text-align: center;
     margin: 0;
+
+}
+
+ion-card-content img {
+    border-radius: 100%;
+    width: 150px;
+    height: 150px;
+    margin-left: 75px;
+    margin-bottom: 15px;
+}
+
+ion-card-content ion-button {
+    width: 85%;
+    margin-left: 22px;
+    --background: #bfc7ce;
+    --background-hover: #bfc7ce;
+    --background-activated: #bfc7ce;
+    --background-focused: #bfc7ce;
+    --color: black;
+    font-weight: bold;
+    margin-bottom: 15px;
 }