feat:beautify

myapp/src/lib/user/modal-user-register/modal-user-register.component.html

@@ -1,21 +1,52 @@
-<ion-content class="ion-padding">
-  <h2>注册新用户</h2>
+<ion-content class="ion-padding register-modal">
+  <div class="modal-header">
+    <ion-icon name="person-add-outline" class="header-icon"></ion-icon>
+    <h2 class="modal-title">注册新账号</h2>
+    <p class="modal-subtitle">加入明律通，开启智能法律服务</p>
+  </div>
 
-  <ion-input
-    label="用户名"
-    labelPlacement="stacked"
-    [(ngModel)]="username"
-    placeholder="请输入用户名">
-  </ion-input>
+  <form class="register-form">
+    <ion-item lines="none" class="form-item">
+      <ion-label position="stacked" class="input-label">用户名</ion-label>
+      <ion-input
+        [(ngModel)]="username"
+        name="username"
+        placeholder="请输入4-16位用户名"
+        class="custom-input"
+        clearInput>
+      </ion-input>
+    </ion-item>
 
-  <ion-input
-    label="密码"
-    labelPlacement="stacked"
-    [(ngModel)]="password"
-    placeholder="请输入密码"
-    type="password">
-  </ion-input>
+    <ion-item lines="none" class="form-item">
+      <ion-label position="stacked" class="input-label">密码</ion-label>
+      <ion-input
+        [(ngModel)]="password"
+        name="password"
+        type="password"
+        placeholder="请输入6-20位密码"
+        class="custom-input"
+        clearInput>
+      </ion-input>
+    </ion-item>
 
-  <ion-button expand="block" (click)="register()">注册</ion-button>
-  <ion-button expand="block" color="medium" (click)="close()">取消</ion-button>
-</ion-content>
+    <div class="form-actions">
+      <ion-button 
+        expand="block" 
+        shape="round" 
+        class="register-btn"
+        (click)="register()">
+        <ion-icon name="checkmark-circle-outline" slot="start"></ion-icon>
+        立即注册
+      </ion-button>
+      
+      <ion-button 
+        expand="block" 
+        fill="clear" 
+        color="medium" 
+        class="cancel-btn"
+        (click)="close()">
+        已有账号？去登录
+      </ion-button>
+    </div>
+  </form>
+</ion-content>

myapp/src/lib/user/modal-user-register/modal-user-register.component.scss

@@ -0,0 +1,86 @@
+.register-modal {
+  --background: #f8fafc;
+  text-align: center;
+  
+  .modal-header {
+    margin-bottom: 2rem;
+    padding: 0 1rem;
+    
+    .header-icon {
+      font-size: 2.5rem;
+      color: var(--ion-color-primary);
+      margin-bottom: 0.5rem;
+    }
+    
+    .modal-title {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #2d3748;
+      margin: 0.5rem 0 0;
+    }
+    
+    .modal-subtitle {
+      font-size: 0.9rem;
+      color: #64748b;
+      margin: 0.25rem 0 0;
+    }
+  }
+  
+  .register-form {
+    max-width: 400px;
+    margin: 0 auto;
+    
+    .form-item {
+      --background: transparent;
+      --padding-start: 0;
+      --inner-padding-end: 0;
+      margin-bottom: 1.5rem;
+      
+      .input-label {
+        font-size: 0.9rem;
+        font-weight: 500;
+        color: #475569;
+        margin-bottom: 0.5rem;
+      }
+      
+      .custom-input {
+        --background: white;
+        --padding-start: 1rem;
+        --padding-end: 1rem;
+        --padding-top: 0.75rem;
+        --padding-bottom: 0.75rem;
+        border-radius: 12px;
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+        transition: all 0.2s ease;
+        
+        &:focus-within {
+          border-color: var(--ion-color-primary);
+          box-shadow: 0 0 0 3px rgba(58, 95, 229, 0.1);
+        }
+      }
+    }
+  }
+  
+  .form-actions {
+    margin-top: 2rem;
+    
+    .register-btn {
+      --box-shadow: none;
+      height: 48px;
+      font-weight: 500;
+      margin-bottom: 1rem;
+      transition: transform 0.2s ease;
+      
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+    
+    .cancel-btn {
+      --background-hover: rgba(0, 0, 0, 0.04);
+      height: 44px;
+      font-size: 0.9rem;
+    }
+  }
+}

myapp/src/lib/user/page-mine/page-mine.component.html

@@ -148,7 +148,7 @@
     }
     
     <div class="footer">
-      <ion-text>© 2023 明律通 - AI法律顾问平台</ion-text>
+      <ion-text>© 2025 明律通 - AI法律顾问平台</ion-text>
     </div>
   </div>
 </ion-content>