From f6b1ef16c37ac054384bd11fed54af708ad7f8db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=88=E7=A9=B6=E6=98=AF=E5=AF=82=E5=AF=9E?=
<2247217335@qq.com>
Date: Tue, 3 Mar 2026 00:27:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E5=AE=B6=E5=BC=80=E5=8F=91=E4=BA=86bt?=
=?UTF-8?q?n=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.env.development | 4 +-
src/components/touch-btn/style/popup.scss | 193 ++++++++++++++-
src/components/touch-btn/touch-btn.images.ts | 10 +-
src/components/touch-btn/touch-btn.types.ts | 1 +
src/components/touch-btn/touch-btn.vue | 236 ++++++++-----------
5 files changed, 293 insertions(+), 151 deletions(-)
diff --git a/.env.development b/.env.development
index 6e7704c3..1af6108b 100644
--- a/.env.development
+++ b/.env.development
@@ -4,10 +4,10 @@ ENV = 'development'
-#VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
+VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
-VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
+#VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
# VITE_APP_BASE_API_Url = 'http://192.168.247.200'
diff --git a/src/components/touch-btn/style/popup.scss b/src/components/touch-btn/style/popup.scss
index 370812d2..2a47c82c 100644
--- a/src/components/touch-btn/style/popup.scss
+++ b/src/components/touch-btn/style/popup.scss
@@ -4,6 +4,7 @@
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
+ position: relative;
}
/* 1. 定义通用的向右移出动画（核心：添加时长，解决秒没） */
@keyframes moveRightOut {
@@ -24,29 +25,44 @@
left: -400rpx; /* 目标位置：向左移出400rpx */
}
}
-
+/* 2. 定义通用的向左移出动画（适配 btn-box-1） */
+@keyframes moveBottomOut {
+ 0% {
+ transform: translateY(0%);
+ }
+ 100% {
+ transform: translateY(100%);
+ }
+}
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
.page-1 {
- background-color: red;
- &.init {
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+ &.voice_to_text{
.btn-box-1 {
- position: absolute; /* 定位是动画生效的前提 */
- left: 0; /* 初始位置 */
- /* 核心动画配置：时长+曲线+保留最终状态 */
- animation: moveLeftOut 0.5s ease-out forwards;
+ animation: moveLeftOut 0.3s ease-out forwards;
/* 清除冲突样式 */
transform: none !important;
transition: none !important;
}
.btn-box-2 {
- position: absolute; /* 定位是动画生效的前提 */
- right: 0; /* 初始位置 */
- /* 核心动画配置：时长+曲线+保留最终状态 */
- animation: moveRightOut 0.5s ease-out forwards;
+ animation: moveRightOut 0.3s ease-out forwards;
/* 清除冲突样式 */
transform: none !important;
transition: none !important;
}
+ .circle-bg-box{
+ animation: moveBottomOut 0.3s ease-out forwards;
+ }
}
// 两侧按钮
.btns-box {
@@ -93,4 +109,159 @@
line-height: 46px;
}
}
+}
+.page-2{
+ width: 100%;
+ overflow: hidden;
+ font-size: 28rpx;
+ text-align: center;
+ display: none;
+ z-index: 12000;
+ justify-content: space-around;
+ margin-bottom:234rpx;;
+ position: absolute;
+ bottom: 0;
+ opacity: 0;
+ visibility: hidden; // 初始不可见且不占交互位置
+ &.voice_to_text {
+ display: flex !important;
+ visibility: visible; // 激活后可见
+ animation: fadeIn 0.4s ease-out 0.1s forwards;
+ }
+ .transVoiceIng {
+ width: 154rpx;
+ height: 154rpx;
+ overflow: hidden;
+ position: relative;
+ z-index: 12010;
+
+ &.cancel-btn {
+ background: url(@/static/images/course/cancel-btn.png) no-repeat;
+ background-size: cover;
+ }
+
+ &.trans-btn {
+ background: url(@/static/images/course/trans-btn.png) no-repeat;
+ background-size: cover;
+ }
+ }
+ .send-btn {
+ position: relative;
+ width: 262rpx;
+ height: 154rpx;
+ line-height: 154rpx;
+ overflow: hidden;
+ background-color: #d8d8d8;
+ border-radius: 77rpx;
+ font-size: 33rpx;
+ z-index: 12010;
+ }
+}
+.talk-dialog-box{
+ position: absolute;
+ bottom: 520rpx ;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+.talk-dialog-div {
+ width: 506rpx;
+ min-height: 234rpx;
+ background-color: #06f;
+ border-radius: 32rpx;
+ transition: width 0.3s ease;
+ // 滑动到离开变红
+ &.is-out {
+ background-color: #ff3e49;
+
+ &::after {
+ background-color: #ff3e49;
+ }
+ }
+ // 滑动到转文字变宽
+ &.is-translate {
+ width: 706rpx;
+ .gif-box {
+ display: none;
+ }
+ }
+ &::after {
+ content: '';
+ width: 44rpx;
+ height: 44rpx;
+ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+ background-color: #06f;
+ overflow: hidden;
+ position: absolute;
+ bottom: -22rpx;
+ left: 50%;
+ margin-left: -22rpx;
+ transition: left 0.3s ease-out; // 时长0.3秒，ease-out缓动（结束时变慢，更自然）
+ }
+ // 控制下边箭头指向发送
+ &.init::after {
+ left: 78% !important;
+ }
+ &.failed {
+ width: 506rpx;
+ height: 114rpx;
+ min-height: 114rpx;
+ background-color: #ff3e49;
+ &::after {
+ background-color: #ff3e49;
+ }
+ // 激活错误提示框
+ .error-tip-div{
+ display: flex !important;
+ visibility: visible; // 激活后可见
+ // animation: fadeIn 0.4s ease-out 0.1s forwards;
+ }
+ }
+}
+.talk-dialog {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+ .text-div {
+ overflow-y: scroll;
+ max-height: 434rpx;
+ padding: 20rpx;
+ font-size: 32rpx;
+ color: #fff;
+ line-height: 40rpx;
+ }
+ .gif-box {
+ position: absolute;
+ width: 200rpx;
+ height: 80rpx;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+ .error-tip-div{
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ position: absolute;
+ display: none;
+ visibility: hidden; // 初始不可见且不占交互位置
+
+ display: flex;
+ align-items: center;
+ color: #ffffff;
+ font-size: 24rpx;
+ font-weight: 400;
+ .img{
+ margin-right: 10rpx;
+ width: 26rpx;
+ height: 26rpx;
+ }
+ }
+
+
+
+
+
+
}
diff --git a/src/components/touch-btn/touch-btn.images.ts b/src/components/touch-btn/touch-btn.images.ts
index 582490e8..83c8e11e 100644
--- a/src/components/touch-btn/touch-btn.images.ts
+++ b/src/components/touch-btn/touch-btn.images.ts
@@ -11,15 +11,21 @@ export const icKeyboardSvg = () : string => {
`;
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgXml)}`;
};
-export const icMicSvg = () : string => {
+export const iconMicSvg = () : string => {
const svgXml = `
`;
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgXml)}`;
};
-export const icSendSvg = () : string => {
+export const iconSendSvg = () : string => {
const svgXml = `
`;
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgXml)}`;
};
+export const iconRecognizeErrorSvg = () : string => {
+ const svgXml = `
+
+ `;
+ return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgXml)}`;
+};
diff --git a/src/components/touch-btn/touch-btn.types.ts b/src/components/touch-btn/touch-btn.types.ts
index 1df7c659..ae6be108 100644
--- a/src/components/touch-btn/touch-btn.types.ts
+++ b/src/components/touch-btn/touch-btn.types.ts
@@ -12,6 +12,7 @@ export type StatusType = 'default' | 'voice_recording' | 'text_input' | 'voice_t
* 语音转文字的子状态（仅当主状态为 voice_to_text 时生效）
*/
export type VoiceToTextSubStatus =
+ | '' // 纯空
| 'init' // 初始化（刚进入语音转文字页面）
| 'loading' // 转换中（正在处理语音→文字）
| 'success' // 转换完成（成功得到文字结果）
diff --git a/src/components/touch-btn/touch-btn.vue b/src/components/touch-btn/touch-btn.vue
index e256e8e7..62f84a05 100644
--- a/src/components/touch-btn/touch-btn.vue
+++ b/src/components/touch-btn/touch-btn.vue
@@ -2,8 +2,8 @@
-
+
@@ -59,8 +70,8 @@