settings页面的制作

src/app/setting/setting.page.html

@@ -1,13 +1,80 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>setting</ion-title>
+    <ion-title>Settings</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">setting</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
+<ion-content>
+  <ion-list lines="full">
+    <ion-list-header>
+      <ion-label class="ion-text-center">个人设置</ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-label>头像</ion-label>
+      <ion-avatar slot="end">
+        <img src="assets/images/place/place8.jpg">
+      </ion-avatar>
+    </ion-item>
+    <ion-item>
+      <ion-label slot="start">用户名</ion-label>
+      <ion-input slot="end" value="John Doe" style="text-align: right;" maxlength="50"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label slot="start">手机号码</ion-label>
+      <ion-input slot="end" value="123-456-7890" style="text-align: right;" maxlength="15"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label>修改登录密码</ion-label>
+      <ion-button slot="end" fill="clear">修改</ion-button>
+    </ion-item>
+
+    <ion-list-header>
+      <ion-label class="ion-text-center">通用设置</ion-label>
+    </ion-list-header>
+    <ion-item>
+      <ion-label>接受推送通知</ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-label>清除缓存</ion-label>
+      <ion-button slot="end" fill="clear">清除</ion-button>
+    </ion-item>
+    <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-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-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-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> 
+   
+   <div class="button-container">
+    <ion-button expand="full" fill="outline" class="outline-button" (click)="goToBlankPage()">注册账号</ion-button>
+    <ion-button expand="full" fill="solid" class="solid-button" (click)="goToBlankPage()">立即登录</ion-button>
+  </div>
+</ion-content>

src/app/setting/setting.page.scss

@@ -0,0 +1,14 @@
+.button-container {
+    display: flex;
+    flex-direction: column;
+    margin: 20px;
+  }
+  
+.outline-button {
+    font-size: 1rem;
+    padding: 15px;
+  }
+.solide-button {
+    font-size: 1rem;
+    padding: 15px;
+  }

src/app/setting/setting.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-setting',
@@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SettingPage implements OnInit {
 
-  constructor() { }
+  constructor(private navCtrl: NavController) {}
 
-  ngOnInit() {
+  goToBlankPage() {
+    // 导航到空白页面
+    console.log('Navigating to Blank page');
   }
+  ngOnInit() {}
 
 }