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

ion-header {
    color: #333; /* 中文字的颜色 */
    font-weight: bold; /* 按钮字体加粗 */
    box-shadow: none;
  }
  
  ion-toolbar {
    --background: #00ffcc; /* 设置工具栏背景色 */
  }
  
  ion-title {
    // font-size: 1.8em;
    font-weight: bold;
    color: white; /* 设置标题文字颜色 */
  }
  

  ion-content {
    --background: #f4f4f4; /* 设置页面背景色 */
    padding: 20px;
    font-family: 'Arial', sans-serif;
  }
  
  h1 {
    font-size: 1.6em;
    margin-bottom: 15px;
    color: #333;
  }
  
  ion-input,
  ion-textarea {
    width: 100%; /* 确保宽度相同 */
    --padding-start: 10px; /* 设置统一的左内边距 */
    --padding-end: 10px;   /* 设置统一的右内边距 */
    --border-radius: 8px;  /* 设置圆角 */
    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    font-size: 1em; /* 设置相同的字体大小 */
    padding: 12px; /* 统一内边距 */
    margin-bottom: 20px; /* 统一下边距 */
  }
  
  ion-input {
    --background: white;
  }
  
  ion-textarea {
    --background: white;
  }
  
  
  // ion-button {
  //   --background: #33ffcc; /* 设置按钮背景色 */
  //   --color: white; /* 设置按钮文字颜色 */
  //   --border-radius: 8px; /* 设置按钮圆角 */
  //   padding: 12px;
  //   font-size: 1.1em;
  //   margin-top: 20px;
  //   transition: transform 0.2s ease-in-out;
  // }
  
  ion-button:hover {
    transform: scale(1.05); /* 按钮悬停效果 */
  }
  
  .content-style {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加卡片阴影效果 */
    margin-top: 20px;
    font-size: 1.2em;
    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;
    --box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 添加输入框阴影 */
    padding: 12px;
    font-size: 1em;
  }
  
  div {
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 1.1em;
    color: #333;
  }
  
  @media (max-width: 767px) {
    ion-title {
      font-size: 1.4em;
    }
  
    h1 {
      font-size: 1.4em;
    }
  
    ion-input,
    ion-textarea {
      font-size: 1em;
      padding: 10px;
    }
  
    ion-button {
      font-size: 1em;
      padding: 10px;
    }
  }
  

  .response-container {
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    border-radius: 12px; /* 圆角边框 */
    padding: 16px; /* 内边距，确保内容不会贴边 */
    margin-top: 16px; /* 顶部间距 */
    margin-bottom: 16px; /* 底部间距 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
    overflow: hidden; /* 防止内容溢出圆角边界 */
  }
  
  /* 可选：如果需要让Markdown内容更好地展示 */
  .content-style {
    font-size: 16px; /* 设置字体大小 */
    line-height: 1.6; /* 行间距 */
    color: #333; /* 字体颜色 */
  }