|
@@ -121,9 +121,17 @@
|
|
|
|
|
|
<!-- 添加录制指示器 -->
|
|
<!-- 添加录制指示器 -->
|
|
<div class="recording-indicator" v-if="isRecording">
|
|
<div class="recording-indicator" v-if="isRecording">
|
|
- <div class="recording-dot"></div>
|
|
|
|
- <span class="recording-text">正在录制...</span>
|
|
|
|
- <span class="timer-text">{{ recordingTimeDisplay || '00:00 / 05:00' }}</span>
|
|
|
|
|
|
+ <!-- 替换原有的progress组件为自定义环形进度条 -->
|
|
|
|
+ <div class="circle-progress-container">
|
|
|
|
+ <div class="circle-progress" :style="{
|
|
|
|
+ background: `conic-gradient(${progressColor} ${progressPercent}%, ${progressBgColor} 0%)`
|
|
|
|
+ }">
|
|
|
|
+ <div class="circle-progress-inner">
|
|
|
|
+ <span class="progress-text">{{ recordingTimeDisplay }}</span><!-- -->
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <span class="timer-text">{{ recordingTimeDisplay || '00:00 / 05:00' }}</span> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 添加开始回答按钮 -->
|
|
<!-- 添加开始回答按钮 -->
|
|
@@ -264,6 +272,9 @@ export default {
|
|
lastFollowUpQuestionId: null,
|
|
lastFollowUpQuestionId: null,
|
|
lastUpdateTime: Date.now(), // 添加最后更新时间戳
|
|
lastUpdateTime: Date.now(), // 添加最后更新时间戳
|
|
subtitleMap: {}, // 用于存储字幕和翻译的映射
|
|
subtitleMap: {}, // 用于存储字幕和翻译的映射
|
|
|
|
+ progressPercent: 0, // 录制进度百分比
|
|
|
|
+ progressColor: '#05dc8b', // 进度条颜色
|
|
|
|
+ progressBgColor: 'rgba(0, 0, 0,0.3)', // 进度条背景色
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -1022,8 +1033,11 @@ export default {
|
|
this.remainingTime = Math.max(0, this.maxRecordingTime - this.recordingTimerCount);
|
|
this.remainingTime = Math.max(0, this.maxRecordingTime - this.recordingTimerCount);
|
|
|
|
|
|
// 更新UI显示录制时长和剩余时间
|
|
// 更新UI显示录制时长和剩余时间
|
|
- this.recordingTimeDisplay = this.formatTime(this.recordingTimerCount) +
|
|
|
|
- ' / ' + this.formatTime(this.maxRecordingTime);
|
|
|
|
|
|
+ this.recordingTimeDisplay = this.formatTime(this.recordingTimerCount)/* +
|
|
|
|
+ ' / ' + this.formatTime(this.maxRecordingTime) */;
|
|
|
|
+
|
|
|
|
+ // 更新进度百分比 - 确保值在0-100之间
|
|
|
|
+ this.progressPercent = (this.recordingTimerCount / this.maxRecordingTime) * 100;
|
|
|
|
|
|
// 检查是否达到最大录制时间
|
|
// 检查是否达到最大录制时间
|
|
if (this.recordingTimerCount >= this.maxRecordingTime) {
|
|
if (this.recordingTimerCount >= this.maxRecordingTime) {
|
|
@@ -2943,7 +2957,7 @@ export default {
|
|
|
|
|
|
// 重置录制时间显示
|
|
// 重置录制时间显示
|
|
this.recordingTimerCount = 0;
|
|
this.recordingTimerCount = 0;
|
|
- this.recordingTimeDisplay = '00:00 / 05:00';
|
|
|
|
|
|
+ this.recordingTimeDisplay = '00:00 ';/* / 05:00 */
|
|
this.remainingTime = this.maxRecordingTime;
|
|
this.remainingTime = this.maxRecordingTime;
|
|
|
|
|
|
// 如果是浏览器环境,停止MediaRecorder
|
|
// 如果是浏览器环境,停止MediaRecorder
|
|
@@ -3203,6 +3217,37 @@ export default {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ // 计算进度比例
|
|
|
|
+ progressRatio() {
|
|
|
|
+ return this.recordingTimerCount / this.maxRecordingTime;
|
|
|
|
+ },
|
|
|
|
+ // 右半圆旋转角度
|
|
|
|
+ half1Turn() {
|
|
|
|
+ // 初始状态为0度,小于50%时,右半圆按比例旋转
|
|
|
|
+ if (this.progressRatio <= 0.5) {
|
|
|
|
+ return this.progressRatio * 2 * 180;
|
|
|
|
+ } else {
|
|
|
|
+ // 大于50%时,右半圆固定在180度
|
|
|
|
+ return 180;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 左半圆旋转角度
|
|
|
|
+ half2Turn() {
|
|
|
|
+ // 小于50%时,左半圆固定在0度
|
|
|
|
+ if (this.progressRatio <= 0.5) {
|
|
|
|
+ return 0;
|
|
|
|
+ } else {
|
|
|
|
+ // 大于50%时,左半圆按超出50%的比例旋转
|
|
|
|
+ return (this.progressRatio - 0.5) * 2 * 180;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 修改进度百分比的计算方式
|
|
|
|
+ progressPercent() {
|
|
|
|
+ // 将时间进度转换为百分比(0-100)
|
|
|
|
+ return Math.min(Math.round((this.recordingTimerCount / this.maxRecordingTime) * 100), 100);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -3428,8 +3473,8 @@ video::-webkit-media-controls-fullscreen-button {
|
|
width: 120px;
|
|
width: 120px;
|
|
height: 40px; /* 改为矩形按钮 */
|
|
height: 40px; /* 改为矩形按钮 */
|
|
border-radius: 20px; /* 圆角矩形 */
|
|
border-radius: 20px; /* 圆角矩形 */
|
|
- background-color: #e74c3c; /* 白色背景 */
|
|
|
|
- color: #333; /* 深色文字 */
|
|
|
|
|
|
+ background-color: #002fff; /* 白色背景 */
|
|
|
|
+ color: #fff;/* 深色文字 */
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
border: none;
|
|
border: none;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
@@ -3441,36 +3486,23 @@ video::-webkit-media-controls-fullscreen-button {
|
|
}
|
|
}
|
|
|
|
|
|
.recording-indicator {
|
|
.recording-indicator {
|
|
- position: absolute;
|
|
|
|
- top: 20px;
|
|
|
|
- left: 20px;
|
|
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: 20px;
|
|
|
|
+ left: 17%;
|
|
|
|
+ transform: translateX(-50%);
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ flex-direction: column;
|
|
align-items: center;
|
|
align-items: center;
|
|
- background-color: rgba(255, 255, 255, 0.9); /* 改为白色半透明背景 */
|
|
|
|
- padding: 5px 10px;
|
|
|
|
- border-radius: 15px;
|
|
|
|
- z-index: 20;
|
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.recording-dot {
|
|
|
|
- width: 12px;
|
|
|
|
- height: 12px;
|
|
|
|
- background-color: #ff6b00; /* 改为橙色,与图片中的颜色一致 */
|
|
|
|
- border-radius: 50%;
|
|
|
|
- margin-right: 8px;
|
|
|
|
- animation: blink 1s infinite;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.recording-text {
|
|
|
|
- color: #333; /* 改为深色文字 */
|
|
|
|
- font-size: 14px;
|
|
|
|
|
|
+ /* background-color: rgba(0, 0, 0, 0.6); */
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ z-index: 100;
|
|
}
|
|
}
|
|
|
|
|
|
.timer-text {
|
|
.timer-text {
|
|
- color: #333; /* 改为深色文字 */
|
|
|
|
|
|
+ color: #05dc8b;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
- margin-left: 8px;
|
|
|
|
|
|
+ margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
.start-recording-button-container {
|
|
.start-recording-button-container {
|
|
@@ -3690,4 +3722,40 @@ video::-webkit-media-controls-fullscreen-button {
|
|
/* ... 现有样式 ... */
|
|
/* ... 现有样式 ... */
|
|
z-index: 20; /* 确保录制指示器在蒙层之上 */
|
|
z-index: 20; /* 确保录制指示器在蒙层之上 */
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+/* 环形进度条样式 */
|
|
|
|
+.circle-progress-container {
|
|
|
|
+ width: 60px;
|
|
|
|
+ height: 60px;
|
|
|
|
+ position: relative;
|
|
|
|
+ margin: 0 auto 10px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.circle-progress {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ position: relative;
|
|
|
|
+ transform: rotate(-90deg); /* 从顶部开始进度 */
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.circle-progress-inner {
|
|
|
|
+ width: 80%;
|
|
|
|
+ height: 80%;
|
|
|
|
+ background-color: rgba(255, 255, 255);
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ transform: rotate(90deg); /* 修正文本方向 */
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.progress-text {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #05dc8b;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|