Explorar el Código

feat::我的界面

李佳青 hace 5 meses
padre
commit
bf116d19b4
Se han modificado 1 ficheros con 77 adiciones y 13 borrados
  1. 77 13
      src/app/tab3/tab3.page.html

+ 77 - 13
src/app/tab3/tab3.page.html

@@ -1,17 +1,81 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    <ion-title>我的</ion-title>
+    <!-- 编辑信息按钮 -->
+    <ion-buttons slot="end">
+      <ion-button routerLink="/user/info">
+        <ion-icon slot="start" name="create-outline"></ion-icon>
+      </ion-button>
+      <ion-button id="myMenu">
+        <ion-icon name="menu-outline"></ion-icon>
+      </ion-button>
+      <ion-popover trigger="myMenu" triggerAction="click">
+        <ng-template>
+          <ion-list>
+            <ion-item [button]="true">
+              <ion-icon name="scan-outline" size="small"></ion-icon>
+              <ion-text>扫一扫</ion-text>
+            </ion-item>
+            <ion-item [button]="true">
+              <ion-icon name="share-social-outline" size="small"></ion-icon>
+              <ion-text>分享</ion-text>
+            </ion-item>
+            <ion-item [button]="true">
+              <ion-icon name="pulse-outline" size="small"></ion-icon>
+              <ion-text>客服</ion-text>
+            </ion-item>
+
+            <ion-item [button]="true">
+              <ion-icon name="settings-outline" size="small"></ion-icon>
+              <ion-text>设置</ion-text>
+            </ion-item>
+          </ion-list>
+        </ng-template>
+      </ion-popover>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
+<ion-content color="light">
+  <!-- 基本信息栏 -->
+  <ion-card>
+    <ion-list [inset]="true">
+      <ion-item lines="full">
+        <ion-avatar slot="start">
+          <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ion-avatar>
+        <ion-label>
+          {{'昵称'}}
+        </ion-label>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-note>{{'99'}}</ion-note>
+          </ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-badge slot="start">{{'标签'}}</ion-badge>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label color="medium">
+          {{'介绍一下自己吧'}}
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-card>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+  <!-- 列表 -->
+  <ion-card class="myList">
+    <ion-list [inset]="true">
+      <ion-item button detail="true">
+        <ion-label>
+          <ion-note>关注</ion-note>
+        </ion-label>
+      </ion-item>
+      <ion-item button detail="true">
+        <ion-label>
+          <ion-note>收藏</ion-note>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-card>