update

AppWeb/src/modules/user/edit-info/edit-info.page.html

@@ -1,47 +1,53 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>资料编辑</ion-title>
-  </ion-toolbar>
-</ion-header>
+<ion-content [fullscreen]="true" class="content-fullscreen">
+  <ion-grid class="edit">
+    <ion-row>
+      <ion-col size="12" class="header-col">
+        <h2>资料编辑</h2>
+      </ion-col>
+    </ion-row>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">资料编辑</ion-title>
-    </ion-toolbar>
-  </ion-header>
+    <ion-row>
+      <ion-col size="12">
+      <ion-card class="card-full-width" >
+        <ion-card-header>
+          <ion-card-title>{{currentUser?.get('username')}} - {{currentUser?.id}}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item>
+              <ion-input label="姓名" type="text" [(ngModel)]="userInfo.name"></ion-input>
+            </ion-item>
+            <ion-item>
+              <ion-input label="手机" type="tel" [(ngModel)]="userInfo.mobile"></ion-input>
+            </ion-item>
+            <ion-item>
+              <ion-select label="性别" [(ngModel)]="userInfo.gender">
+                <ion-select-option value="男">男</ion-select-option>
+                <ion-select-option value="女">女</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-label>生日</ion-label>
+              <ion-datetime-button datetime="birthday"></ion-datetime-button>
+              <ion-modal [keepContentsMounted]="true">
+                <ng-template>
+                  <ion-datetime id="birthday" displayFormat="MM/DD/YYYY" [(ngModel)]="userInfo.birthday"></ion-datetime>
+                </ng-template>
+              </ion-modal>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+      </ion-col>
+    </ion-row>
 
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>{{currentUser?.get('username')}} - {{currentUser?.id}}</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-list>
-        <ion-item>
-          <ion-input label="姓名" type="text" [(ngModel)]="userInfo.name"></ion-input>
-        </ion-item>
-        <ion-item>
-          <ion-input label="手机" type="tel" [(ngModel)]="userInfo.mobile"></ion-input>
-        </ion-item>
-        <ion-item>
-          <ion-select label="性别" [(ngModel)]="userInfo.gender">
-            <ion-select-option value="男">男</ion-select-option>
-            <ion-select-option value="女">女</ion-select-option>
-          </ion-select>
-        </ion-item>
-        <ion-item>
-          <ion-label>生日</ion-label>
-          <ion-datetime-button datetime="birthday"></ion-datetime-button>
-          <ion-modal [keepContentsMounted]="true">
-            <ng-template>
-              <ion-datetime id="birthday" displayFormat="MM/DD/YYYY" [(ngModel)]="userInfo.birthday"></ion-datetime>
-            </ng-template>
-          </ion-modal>
-        </ion-item>
-      </ion-list>
-    </ion-card-content>
-  </ion-card>
-
-  <ion-button expand="block" (click)="save()">保存</ion-button>
-  <ion-button expand="block" (click)="cancel()">取消</ion-button>
+    <ion-row class="button-row">
+      <ion-col size="6" class="button-col">
+        <ion-button expand="block" (click)="save()">保存</ion-button> 
+      </ion-col>
+      <ion-col size="6" class="button-col">
+        <ion-button expand="block" (click)="cancel()">取消</ion-button>  
+      </ion-col>
+    </ion-row>
+  </ion-grid> 
 </ion-content>

AppWeb/src/modules/user/edit-info/edit-info.page.scss

@@ -0,0 +1,35 @@
+.content-fullscreen {  
+    --ion-padding: 0; /* 移除默认的padding */  
+  }  
+    
+  .header-col h2 {  
+    text-align: center; /* 使标题居中 */  
+    padding: 10px 0; /* 添加上下padding */ 
+    margin-bottom: 0px; 
+    font-weight: bold;
+  }  
+    
+  .card-full-width {  
+    margin: 10px 15px; /* 添加卡片上下margin */
+    background-color: #e2eaff;  
+    border-radius: 20px;
+  }
+  ion-list {
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }  
+    
+  .button-row {  
+    --ion-padding-top: 20px; /* 添加顶部padding */  
+    --ion-padding-bottom: 20px; /* 添加底部padding */  
+    justify-content: space-around; /* 使按钮在行中均匀分布 */  
+  }  
+    
+  .button-col {  
+    text-align: center; /* 使按钮在列中居中 */  
+  }  
+    
+  ion-button {  
+    --min-height: 50px; 
+    --ion-margin-horizontal: 0; /* 移除按钮的水平margin */  
+  }

AppWeb/src/modules/user/login/login.page.html

@@ -1,33 +1,31 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>登录/注册</ion-title>
-  </ion-toolbar>
-</ion-header>
 
 <ion-content [fullscreen]="true">
-
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>登录/注册</ion-card-title>
-    </ion-card-header>
-  
-    <ion-card-content>
-
-      <ion-list [inset]="true">
-        <ion-item>
-          <ion-input [(ngModel)]="username" label="账号" placeholder="请输入用户名"></ion-input>
-        </ion-item>
-        <ion-item>
-          <ion-input [(ngModel)]="password" label="密码" type="password" placeholder="请输入密码"></ion-input>
-        </ion-item>
-      </ion-list>
-     
-    </ion-card-content>
-  
-    <ion-button (click)="login()" fill="clear">登录</ion-button>
-    <ion-button (click)="register()" fill="clear">注册</ion-button>
-  </ion-card>
-
-  <!-- 新增路由返回逻辑，执行back函数 -->
-  <ion-button expand="block" (click)="back()">返回</ion-button>
+  <ion-grid>
+    <ion-row class="header-row">
+      <ion-col size="auto">  
+        <ion-icon name="arrow-back-circle" (click)="back()" class="back-icon"></ion-icon>  
+      </ion-col>  
+    </ion-row> 
+    <ion-row>
+      <ion-col>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>登录/注册</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-list [inset]="true">
+              <ion-item>
+                <ion-input [(ngModel)]="username" label="账号" placeholder="请输入用户名"></ion-input>
+              </ion-item>
+              <ion-item>
+                <ion-input [(ngModel)]="password" label="密码" type="password" placeholder="请输入密码"></ion-input>
+              </ion-item>
+            </ion-list>
+          </ion-card-content>
+          <ion-button (click)="login()" fill="clear">登录</ion-button>
+          <ion-button (click)="register()" fill="clear">注册</ion-button>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>

AppWeb/src/modules/user/login/login.page.scss

@@ -0,0 +1,22 @@
+.header-row {  
+    display: flex;  
+    margin-top: 15px;
+    margin-bottom: 10px; 
+  }   
+  .back-icon {
+    margin-left: 15px;  
+    font-size: 35px; /* 根据需要调整图标大小 */  
+    color: #007aff; /* 设置图标颜色 */  
+    cursor: pointer;  
+  }
+
+ion-card {
+    
+    margin-top: 10px;
+    background-color: #e2eaff;
+    border-radius: 20px;
+    ion-card-content {
+        padding-bottom: 0px;
+        margin-top: 10px;
+    }
+}

AppWeb/src/modules/user/mine/mine.page.html

@@ -1,23 +1,44 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>我的</ion-title>
-  </ion-toolbar>
-</ion-header>
 <ion-content [fullscreen]="true">
+  <div class="title">  
+    <ion-grid>  
+      <ion-row class="flex-container">  
+        <ion-col size="3" class="image-col">  
+          <img src="../../../assets/icon/smile.png" alt="User Icon" class="user-icon">  
+        </ion-col>  
+        <ion-col class="text-col">  
+          <h4>{{user?.get("username") || '未登录'}}</h4>  
+        </ion-col>
+        <ion-col size="2" class="icon-col">
+            <ion-icon name="settings" class="seticon"></ion-icon> 
+        </ion-col>  
+      </ion-row>
+      <ion-row>
+        <ion-col size="12">
+          <ion-card class="userList">
+            <ion-card-content>
+              <h3><span>{{user?.get("name")}}</span>个人信息</h3>
+              <ion-item>
+                <h5>性别：<span>{{user?.get("gender")}}</span></h5>
+              </ion-item>
+              <ion-item>
+                <h5>电话：<span>{{user?.get("moblie")}}</span></h5>
+              </ion-item>
+              <ion-item>
+                <h5>生日：<span>{{user?.get("moblie")}}</span></h5>
+              </ion-item>
+              <h4 *ngIf="!user?.id">请您登陆后继续使用</h4>
+              <ion-button *ngIf="!user?.id" fill="clear" routerLink="/user/login"><p>登录</p></ion-button>
+              <ion-button *ngIf="user?.id" fill="clear" routerLink="/user/edit/info"><p>编辑资料</p></ion-button>
+              <ion-button *ngIf="user?.id" fill="clear" (click)="logout()"><p>登出</p></ion-button>
+            </ion-card-content>
+          </ion-card>
 
-  <ion-card>
-    <img alt="" src="https://ionicframework.com/docs/img/demos/card-media.png" />
-    <ion-card-header>
-      <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
-      <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
-      <ion-card-subtitle *ngIf="user?.id">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle>
-    </ion-card-header>
- 
-    <!-- 新增：根据用户状态，显示登录/登出按钮，执行跳转或登出函数 -->
-    <ion-button *ngIf="!user?.id" fill="clear" routerLink="/user/login">登录</ion-button>
-    <ion-button *ngIf="user?.id" fill="clear" routerLink="/user/edit/info">编辑资料</ion-button>
-    <ion-button *ngIf="user?.id" fill="clear" (click)="logout()">登出</ion-button>
-  </ion-card>
-
+        </ion-col>
+      
+      
 
+      </ion-row>  
+    </ion-grid>  
+</div>
+  
 </ion-content>

AppWeb/src/modules/user/mine/mine.page.scss

@@ -0,0 +1,58 @@
+.title {
+    padding-top: 10px;
+}
+.flex-container {  
+    display: flex;  
+    align-items: center; 
+  }  
+    
+  .image-col img.user-icon {    
+    width: 100%;  
+    height: auto;  
+  }  
+    
+  .text-col h4 {  
+    margin: 0; 
+    font-weight: bold;
+    color: black;   
+  }
+  .icon-col {
+    margin-right: 10px;
+    .seticon {
+        padding: 0px;
+        margin: 0px;
+        font-size: 35px;
+        color: #0054e9;
+    }
+  }
+  .userList {
+    border-radius: 20px;
+    margin-top: 0px;
+    background-color: #e2eaff;
+    ion-item {
+      margin-bottom: 10px;
+    }
+    h3 {
+      font-size: 20px;
+      color: black;
+      margin-bottom: 10px;
+      span {
+        font-size: 25px;
+        font-weight: bold;
+        color: black;
+      }
+    }
+    h5 {
+      font-size: 15px;
+      span {
+        font-size: 15px;
+        font-weight: bold;
+        color: black;
+      }
+    }
+    h4 {
+      margin-top: 15px;
+      color: #000;
+    }
+
+  }