feat:修改了反馈界面的样式

travel-app/src/app/feedback/feedback.component.html

@@ -1,17 +1,13 @@
 <ion-header>
-  <ion-toolbar color="primary">
-    <ion-button slot="start">
-      <ion-back-button defaultHref="/home"></ion-back-button>
-    </ion-button>
+  <ion-toolbar>
     <ion-title>意见反馈</ion-title>
-    <ion-button slot="end">
-      <ion-menu-toggle auto-hide="false"></ion-menu-toggle>
-    </ion-button>
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="feedback-page">
+<ion-content>
+
   <form #feedbackForm="ngForm" novalidate>
+    <ion-card>
     <ion-list lines="none">
       <ion-item>
         <ion-label stacked>所属分类(必填)</ion-label>
@@ -24,6 +20,7 @@
         <ion-textarea placeholder="请详细描述您的问题" [(ngModel)]="feedbackText" name="FeedbackText" maxlength="400" required></ion-textarea>
       </ion-item>
 
+
       <div padding-horizontal>
         <span>{{ feedbackText.length }}/400</span>
       </div>
@@ -33,10 +30,12 @@
         <input type="file" (change)="onFileChange($event)" multiple accept="image/*">
       </ion-item>
     </ion-list>
-
-    <div padding>
-      <ion-button expand="block" color="secondary" type="submit" [disabled]="!feedbackForm.valid">提交反馈</ion-button>
-    </div>
+  </ion-card>
+ 
+      <ion-button expand="block" class="custom-button">
+        提交反馈
+      </ion-button>
   </form>
+
 </ion-content>
 

travel-app/src/app/feedback/feedback.component.scss

@@ -0,0 +1,21 @@
+ion-toolbar{
+    --background: #D6CCC2; // 设置页眉背景颜色为紫色
+    --color: white; // 设置页眉文字颜色为白色
+}
+ion-title{
+    font-size: 1.5rem; // 可以根据需要调整字体大小
+}
+ion-textarea {
+    min-height: 150px; // 设置最小高度
+    font-size: 16px; // 设置字体大小
+  }
+.padding-horizontal{
+    float: right; // 右对齐
+    margin-top: 8px; // 提供一些顶部间距
+}
+.custom-button {
+    --background: #d0a87d; // 替换#your-color-code为你想要的颜色
+  }
+ion-content {
+    --background:#F5EBE0;
+  }

travel-app/src/app/feedback/feedback.component.ts

@@ -1,6 +1,6 @@
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Component, OnInit } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonButton, IonBackButton, IonMenuToggle, IonSelect, IonSelectOption, IonLabel, IonTextarea, IonIcon, } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonButton, IonBackButton, IonMenuToggle, IonSelect, IonSelectOption, IonLabel, IonTextarea, IonIcon, IonInput,IonCard,} from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { FormBuilder } from '@angular/forms';
 import { CommonModule } from '@angular/common';
@@ -12,7 +12,7 @@ import { CommonModule } from '@angular/common';
   imports: [
     IonHeader, IonContent, IonToolbar, IonTitle, ExploreContainerComponent,
     IonButton, IonBackButton, IonMenuToggle, IonSelect, IonSelectOption, IonLabel,
-    IonTextarea, IonIcon,
+    IonTextarea, IonIcon,IonInput,IonCard,
     IonList, IonItem,
     FormsModule,
     ReactiveFormsModule,CommonModule