Sfoglia il codice sorgente

我的界面完善

0210324 4 mesi fa
parent
commit
f36e8a676d

+ 50 - 2
src/app/me/me.page.html

@@ -5,14 +5,62 @@
         <ion-img src="assets\me\bd787297238e6d83cef49499c39c313c_1.jpg"></ion-img>  
       </ion-avatar>  
       <div class="profile-info">  
-        <h2>用户名</h2>  
-        <p>微信号: wechat_id</p>  
+        <h2>用户名</h2>   
       </div>  
     </div>  
   </ion-card>
   <ion-card class="profile-container">
     <h2>留影</h2>
   </ion-card>
+  <ion-card>
+    <ion-list lines="full">
+    <ion-item>
+      <ion-label slot="start">手机号码</ion-label>
+      <ion-input slot="end" value="13647061623" style="text-align: right;" maxlength="15"></ion-input>
+    </ion-item>
+    </ion-list>
+    <ion-item>
+      <ion-label>修改登录密码</ion-label>
+      <ion-button slot="end" fill="clear">修改</ion-button>
+    </ion-item>
+  </ion-card>
+  <ion-card>
+    <ion-list lines="full">
+      <ion-item>
+      <ion-label>意见反馈</ion-label>
+      <ion-button slot="end" fill="clear">反馈</ion-button>
+    </ion-item>
+    <ion-item>
+      <ion-label>关于我们</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+    </ion-list>
+    <ion-item>
+      <ion-label>联系我们</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+  </ion-card>
+  <ion-card>
+  <ion-list lines="full">
+    <ion-item>
+      <ion-label>接受推送通知</ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>  
+    <ion-item>
+      <ion-label>用户协议</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-label>隐私政策</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>  
+   </ion-list>
+    <ion-item>
+      <ion-label>隐私权限设置</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item> 
+  </ion-card>
+
 </ion-content>
 
 

+ 5 - 1
src/app/me/me.page.scss

@@ -23,4 +23,8 @@
     display: flex;  
     flex-direction: column;  
     align-items: center;  
-  }  
+  } 
+  ion-card {  
+    --border-radius: 16px; // 设置圆角  
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影  
+  }

+ 2 - 4
src/app/tab1/tab1.page.html

@@ -5,10 +5,8 @@
     </ion-title>
     <ion-buttons slot="end">
       <ion-button>
-        <ion-icon name="search" (click)="toggleSearch()"></ion-icon>
+        <ion-icon name="search"></ion-icon>
       </ion-button>
     </ion-buttons>
-    
   </ion-toolbar>
-</ion-header>
-
+</ion-header>

+ 1 - 6
src/app/tab1/tab1.page.ts

@@ -7,11 +7,6 @@ import { Component } from '@angular/core';
 })
 export class Tab1Page {
 
-  isSearchVisible = false;  
-  searchTerm = '';
-  constructor() {}
-  toggleSearch() {  
-    this.isSearchVisible = !this.isSearchVisible;  
-  }  
+  constructor() {}  
 
 }

BIN
src/assets/me/cf0a87a59f51c233973d01bb5b23c188d9abea6f.png@150w_150h_progressive.png