202226701011/FitMind-app/src/app/ai-chat-component/ai-chat-component.component.scss

ion-toolbar {
    height: 70px; /* 设置你想要的高度 */
    --min-height: 60px; /* 设置最小高度 */
    padding: 0; /* 去掉内边距 */
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中对齐 */
    --background: transparent; /* 去除背景色 */
  }
  //头部样式
  ion-header{
    background-color: #99d75c ;
    --background: transparent; /* 去除背景色 */
  }
  //头部标题
  ion-title {
    margin: 0; /* 去掉默认的外边距 */
    flex: 1; /* 让标题占据剩余空间 */
    text-align: center; /* 让标题文本居中 */
    font-size: 24px;
  }

/* 文本输入框样式 */
.input-box {
  background-color: white; /* 设置输入框背景为白色 */
  border-radius: 8px; /* 圆角 */
 
  height: 40px; /* 高度 */
  flex: 1; /* 让输入框占据剩余空间 */
}

/* 底部内容容器 */
.footer-content {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  width: 100%; /* 宽度100% */
}
//底部按钮样式
ion-buttons {
  margin: 0 5px; /* 按钮之间的间距 */
}
//底部发送按钮圆圈样式
.circle{
width: 35px;
height: 35px;
border-radius: 50%;
border:2px white solid;
display: flex; /* 使用Flexbox布局 */
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
}

//聊天内容容器样式
.chat-container {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}
//聊天内容样式
.message-container {
  display: flex; /* 使用Flexbox布局 */
  justify-content: flex-end; /* 用户消息在右边，AI消息在左边 */
  margin: 10px 0; /* 消息之间的间距 */
}
//消息内容样式
.message-content {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
}
//用户消息和头像样式
.user-message-content {
  justify-content: flex-end; /* 用户消息和头像在右边 */
}
//AI消息和头像样式
.ai-message-content {
  justify-content: flex-start; /* AI消息和头像在左边 */
}
//气泡样式
.message-bubble {
  background-color: #99d75c; /* 绿色气泡的背景色 */
  color: white; /* 字体颜色 */
  border-radius: 15px; /* 圆角 */
  padding: 10px 15px; /* 内边距 */
  max-width: 60%; /* 最大宽度 */
}
//用户消息样式
.user-message {
  background-color: #99d75c; /* 用户消息的颜色 */
  margin-left: 10px; /* 与头像之间的间距 */
}
//AI消息样式
.ai-message {
  background-color: white; /* AI消息的气泡颜色 */
  color: black; /* 字体颜色 */
  border: 1px solid black; /* 添加黑色边框 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  margin-right: 10px; /* 与头像之间的间距 */
}
//用户头像样式
.user-avatar {
  width: 40px; /* 头像宽度 */
  height: 40px; /* 头像高度 */
  border-radius: 50%; /* 圆形 */
  overflow: hidden; /* 超出部分隐藏 */
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  background-color: #f0f0f0; /* 背景色 */
  border: 2px solid #99d75c; /* 边框颜色 */
  margin-left: 5px; /* 与消息之间的间距 */
}
//AI头像样式
.ai-avatar {
  width: 40px; /* 头像宽度 */
  height: 40px; /* 头像高度 */
  border-radius: 50%; /* 圆形 */
  overflow: hidden; /* 超出部分隐藏 */
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  background-color: #f0f0f0; /* 背景色 */
  border: 2px solid #99d75c; /* 边框颜色 */
  margin-right: 5px; /* 与消息之间的间距 */
}
//用户头像图片样式
.user-avatar img {
  width: 100%; /* 使图片适应头像框 */
  height: 100%; /* 使图片适应头像框 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}
//AI头像图片样式
.ai-avatar img {
  width: 100%; /* 使图片适应头像框 */
  height: 100%; /* 使图片适应头像框 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}
//语音框
.yuyinframe{
  --background: transparent; 
  background-color: #99d75c; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center;
}
.modal-content {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  width: 100%; /* 宽度100% */
  height: 25%;
}
//语音框中间内容框
.timer-container {
  height: 100%;
  flex-direction: column; /* 垂直排列 */
  
  justify-content: center; /* 水平居中对齐 */

}
//计时器样式
#timer{
  width: 100%;
  margin-top: 30px; /* 可根据需要调整这个值 */
  text-align: center; /* 确保文本居中 */
  margin-bottom: 10px;
}

/*语音取消按钮的样式 */
.cancle-button {
  font-size: 75px;
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  color: white;
  background-color: #99d75c; 
  margin-right: 20px;
}

/*语音发送按钮的样式 */
.send-button {
  height:60px ;
  width: 60px;
  border-radius: 50%;//圆
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  color: white;
  background-color: #99d75c; 
  border: 5px solid white;
  margin-left: 20px;
}


//音律跳动
.light {
  width: 100%;
  height: 90px;
  display: flex;
}

.light span {
  width: 10px;
  border-radius: 18px;
  margin-right: 20px;
}

.light span:nth-child(1) {
  animation: bar1 2s 0.2s infinite linear;
}

.light span:nth-child(2) {
  animation: bar2 2s 0.4s infinite linear;
}

.light span:nth-child(3) {
  animation: bar3 2s 0.6s infinite linear;
}

.light span:nth-child(4) {
  animation: bar4 2s 0.8s infinite linear;
}

.light span:nth-child(5) {
  animation: bar5 2s 1.0s infinite linear;
}

.light span:nth-child(6) {
  animation: bar6 2s 1.2s infinite linear;
}

.light span:nth-child(7) {
  animation: bar7 2s 1.4s infinite linear;
}

.light span:nth-child(8) {
  animation: bar8 2s 1.6s infinite linear;
}

.light span:nth-child(9) {
  animation: bar9 2s 1.8s infinite linear;
}
//第一条音律加载动画
@keyframes bar1 {
  0% {
      background: #f677b0;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #f677b0;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #f677b0;
      height: 10%;
      margin-top: 25%;
  }
}
//第二条音律加载动画
@keyframes bar2 {
  0% {
      background: #df7ff2;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #df7ff2;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #df7ff2;
      height: 10%;
      margin-top: 25%;
  }
}
//第三条音律加载动画
@keyframes bar3 {
  0% {
      background: #8c7ff2;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #8c7ff2;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #8c7ff2;
      height: 10%;
      margin-top: 25%;
  }
}
//第四条音律加载动画
@keyframes bar4 {
  0% {
      background: #024b6a;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #024b6a;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #024b6a;
      height: 10%;
      margin-top: 25%;
  }
}
//第五条音律加载动画
@keyframes bar5 {
  0% {
      background: #7ff2d3;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #7ff2d3;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #7ff2d3;
      height: 10%;
      margin-top: 25%;
  }
}
//三个点的加载动画
.loading-dots {
  display: flex;
  align-items: center;
  margin-left: 10px; /* 气泡与点之间的间距 */
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #99d75c; /* 点的颜色 */
  margin: 0 2px; /* 点之间的间距 */
  animation: loading 1s infinite; /* 加载动画 */
}
//第一个点
.loading-dot:nth-child(1) {
  animation-delay: 0s;
}
//第二个点
.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}
//第三个点
.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}
//加载动画
@keyframes loading {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}




/* 表情选择器样式 */
.emoji-picker {
  --background: transparent; //去除默认样式
  background-color: #99d75c; /* 背景颜色 */
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  padding: 10px;
  justify-content: flex-start; /* 左对齐 */
  overflow-y: scroll; /* 允许纵向滚动 */
  height: 200px;
}
//表情按钮
.emoji-button {
  margin: 9px; /* 每个表情与顶部的间距 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  font-size: 28px; /* 字体大小 */
  height: 40px; /* 按钮高度 */
  width: 40px; /* 按钮宽度 */
  display: flex; /* 使用 flexbox 对齐 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  --background: transparent; /* 背景透明 */
  --box-shadow: none; /* 去掉阴影 */
  --outline: none; /* 去掉轮廓 */
  border: none; /* 去掉边框 */
  float: left;
}