|
@@ -1,43 +1,43 @@
|
|
|
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;
|
|
|
- }
|
|
|
+ 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; /* 让输入框占据剩余空间 */
|
|
|
+background-color: white; /* 设置输入框背景为白色 */
|
|
|
+border-radius: 8px; /* 圆角 */
|
|
|
+
|
|
|
+height: 40px; /* 高度 */
|
|
|
+flex: 1; /* 让输入框占据剩余空间 */
|
|
|
}
|
|
|
|
|
|
/* 底部内容容器 */
|
|
|
.footer-content {
|
|
|
- display: flex; /* 使用Flexbox布局 */
|
|
|
- align-items: center; /* 垂直居中对齐 */
|
|
|
- justify-content: center; /* 水平居中对齐 */
|
|
|
- width: 100%; /* 宽度100% */
|
|
|
+display: flex; /* 使用Flexbox布局 */
|
|
|
+align-items: center; /* 垂直居中对齐 */
|
|
|
+justify-content: center; /* 水平居中对齐 */
|
|
|
+width: 100%; /* 宽度100% */
|
|
|
}
|
|
|
//底部按钮样式
|
|
|
ion-buttons {
|
|
|
- margin: 0 5px; /* 按钮之间的间距 */
|
|
|
+margin: 0 5px; /* 按钮之间的间距 */
|
|
|
}
|
|
|
//底部发送按钮圆圈样式
|
|
|
.circle{
|
|
@@ -52,358 +52,97 @@ justify-content: center; /* 水平居中对齐 */
|
|
|
|
|
|
//聊天内容容器样式
|
|
|
.chat-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-top: 10px;
|
|
|
+display: flex;
|
|
|
+flex-direction: column;
|
|
|
+padding-top: 10px;
|
|
|
}
|
|
|
//聊天内容样式
|
|
|
.message-container {
|
|
|
- display: flex; /* 使用Flexbox布局 */
|
|
|
- justify-content: flex-end; /* 用户消息在右边,AI消息在左边 */
|
|
|
- margin: 10px 0; /* 消息之间的间距 */
|
|
|
+display: flex; /* 使用Flexbox布局 */
|
|
|
+justify-content: flex-end; /* 用户消息在右边,AI消息在左边 */
|
|
|
+margin: 10px 0; /* 消息之间的间距 */
|
|
|
}
|
|
|
//消息内容样式
|
|
|
.message-content {
|
|
|
- display: flex; /* 使用Flexbox布局 */
|
|
|
- align-items: center; /* 垂直居中对齐 */
|
|
|
+display: flex; /* 使用Flexbox布局 */
|
|
|
+align-items: center; /* 垂直居中对齐 */
|
|
|
}
|
|
|
//用户消息和头像样式
|
|
|
.user-message-content {
|
|
|
- justify-content: flex-end; /* 用户消息和头像在右边 */
|
|
|
+justify-content: flex-end; /* 用户消息和头像在右边 */
|
|
|
}
|
|
|
//AI消息和头像样式
|
|
|
.ai-message-content {
|
|
|
- justify-content: flex-start; /* AI消息和头像在左边 */
|
|
|
+justify-content: flex-start; /* AI消息和头像在左边 */
|
|
|
}
|
|
|
//气泡样式
|
|
|
.message-bubble {
|
|
|
- background-color: #99d75c; /* 绿色气泡的背景色 */
|
|
|
- color: white; /* 字体颜色 */
|
|
|
- border-radius: 15px; /* 圆角 */
|
|
|
- padding: 10px 15px; /* 内边距 */
|
|
|
- max-width: 60%; /* 最大宽度 */
|
|
|
+background-color: #99d75c; /* 绿色气泡的背景色 */
|
|
|
+color: white; /* 字体颜色 */
|
|
|
+border-radius: 15px; /* 圆角 */
|
|
|
+padding: 10px 15px; /* 内边距 */
|
|
|
+max-width: 60%; /* 最大宽度 */
|
|
|
}
|
|
|
//用户消息样式
|
|
|
.user-message {
|
|
|
- background-color: #99d75c; /* 用户消息的颜色 */
|
|
|
- margin-left: 10px; /* 与头像之间的间距 */
|
|
|
+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; /* 与头像之间的间距 */
|
|
|
+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; /* 与消息之间的间距 */
|
|
|
+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; /* 与消息之间的间距 */
|
|
|
+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; /* 保持图片比例,裁剪多余部分 */
|
|
|
+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;
|
|
|
+width: 100%; /* 使图片适应头像框 */
|
|
|
+height: 100%; /* 使图片适应头像框 */
|
|
|
+object-fit: cover; /* 保持图片比例,裁剪多余部分 */
|
|
|
}
|
|
|
-.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;
|
|
|
+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;
|
|
|
-}
|