update:ai页面布局修改

smarteat-app/src/app/tab2/tab2.page.html

@@ -7,18 +7,21 @@
 </ion-header>
 
 <ion-content>
-  <div class="input-group-container">
-    <h1>饮食群体</h1>
-    <ion-input [value]="qunti" (ionInput)="quntiInput($event)" placeholder="例如减肥群体、某某病患" autoGrow="true"></ion-input>
-  </div>
-  <div class="input-group-container">
-    <h1>饮食忌口</h1>
-    <ion-input [value]="jikou" (ionInput)="jikouInput($event)" placeholder="例如过敏食物" autoGrow="true"></ion-input>
+  <div class="input-group-container-wrapper">
+    <div class="input-group-container">
+      <h1>饮食群体</h1>
+      <ion-input [value]="qunti" (ionInput)="quntiInput($event)" placeholder="例如减肥群体、某某病患" autoGrow="true"></ion-input>
+    </div>
+    <div class="input-group-container">
+      <h1>饮食忌口</h1>
+      <ion-input [value]="jikou" (ionInput)="jikouInput($event)" placeholder="例如过敏食物" autoGrow="true"></ion-input>
+    </div>
   </div>
   <!-- 文本域：生成提示词 -->
-   <h1>需求描述</h1>
-  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="需求描述" autoGrow="true"></ion-textarea>
-
+   <div class="content-style">
+    <h1>需求描述</h1>
+    <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="需求描述" autoGrow="true"></ion-textarea>
+  </div>
   <!-- 按钮：执行消息生成函数 -->
   <ion-button (click)="sendMessage()" expand="block">饮食方案生成</ion-button>
   

smarteat-app/src/app/tab2/tab2.page.scss

@@ -73,6 +73,34 @@ ion-header {
     line-height: 1.6;
   }
 
+
+  /* 为父容器添加 flex 布局 */
+.input-group-container {
+  flex: 1;                           /* 确保每个容器占据相同的空间 */
+  margin-right: 20px;                 /* 容器之间的间距 */
+}
+
+/* 为容器的父元素添加 flex 布局，使得两个 .input-group-container 并排显示 */
+.input-group-container-wrapper {
+  display: flex;                     /* 设置父容器为弹性布局 */
+  justify-content: space-between;     /* 容器之间的间距均等 */
+  gap: 20px;                          /* 控制容器之间的间隙 */
+}
+
+/* 调整每个 input-group-container 内部元素的布局 */
+.input-group-container h1 {
+  margin-bottom: 10px;                /* 减少标题和输入框之间的间距 */
+}
+
+/* 为 ion-input 添加一些宽度设置 */
+ion-input {
+  width: 100%;                        /* 确保输入框宽度填满容器 */
+  box-sizing: border-box;             /* 让宽度计算包括内边距 */
+}
+
+
+
+
   ion-input,
   ion-textarea {
     --background: white;
@@ -82,10 +110,10 @@ ion-header {
   }
   
   div {
-    padding: 20px;
+    padding: 10px;
     background-color: #f8f8f8;
     border-radius: 8px;
-    margin-top: 20px;
+    margin-top: 10px;
     font-size: 1.1em;
     color: #333;
   }