|
@@ -18,18 +18,18 @@
|
|
@ended="handleVideoEnded"
|
|
@ended="handleVideoEnded"
|
|
@timeupdate="handleTimeUpdate">
|
|
@timeupdate="handleTimeUpdate">
|
|
</video>
|
|
</video>
|
|
-
|
|
|
|
- <!-- 添加字幕覆盖层 -->
|
|
|
|
- <div class="subtitle-overlay" v-if="currentSubtitle">
|
|
|
|
|
|
+ <div class="answer-button-container" v-if="showAnswerButton">
|
|
|
|
+ <button class="answer-button" @click="handleAnswerButtonClick">
|
|
|
|
+ 开始回答
|
|
|
|
+ </button>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 添加字幕覆盖层 :data-time="formatTime(recordingTimerCount) || '03:30'"-->
|
|
|
|
+ <div class="subtitle-overlay" v-if="currentSubtitle" >
|
|
{{ currentSubtitle }}
|
|
{{ currentSubtitle }}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 添加答题按钮 -->
|
|
<!-- 添加答题按钮 -->
|
|
- <div class="answer-button-container" v-if="showAnswerButton">
|
|
|
|
- <button class="answer-button" @click="handleAnswerButtonClick">
|
|
|
|
- 开始面试
|
|
|
|
- </button>
|
|
|
|
- </div>
|
|
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 用户摄像头视频显示区域 -->
|
|
<!-- 用户摄像头视频显示区域 -->
|
|
@@ -189,14 +189,14 @@ export default {
|
|
thirdVideoSubtitles: [
|
|
thirdVideoSubtitles: [
|
|
{
|
|
{
|
|
startTime: 0,
|
|
startTime: 0,
|
|
- endTime: 3,
|
|
|
|
|
|
+ endTime: 4,
|
|
text: '在工作中,你如何确保个人防护装备的正确使用?'
|
|
text: '在工作中,你如何确保个人防护装备的正确使用?'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
fourthVideoSubtitles: [
|
|
fourthVideoSubtitles: [
|
|
{
|
|
{
|
|
startTime: 0,
|
|
startTime: 0,
|
|
- endTime: 3,
|
|
|
|
|
|
+ endTime: 4,
|
|
text: '描述一次你与团队合作改善生产流程的经历。'
|
|
text: '描述一次你与团队合作改善生产流程的经历。'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
@@ -1799,11 +1799,11 @@ export default {
|
|
this.uploadQueue.shift();
|
|
this.uploadQueue.shift();
|
|
|
|
|
|
// 显示简短的成功提示
|
|
// 显示简短的成功提示
|
|
- uni.showToast({
|
|
|
|
- title: '视频提交成功',
|
|
|
|
- icon: 'success',
|
|
|
|
- duration: 1500
|
|
|
|
- });
|
|
|
|
|
|
+ // uni.showToast({
|
|
|
|
+ // title: '视频提交成功',
|
|
|
|
+ // icon: 'success',
|
|
|
|
+ // duration: 1500
|
|
|
|
+ // });
|
|
|
|
|
|
// 继续处理队列中的下一个任务
|
|
// 继续处理队列中的下一个任务
|
|
this.processUploadQueue();
|
|
this.processUploadQueue();
|
|
@@ -2086,15 +2086,15 @@ export default {
|
|
currentSubtitles = this.subtitles;
|
|
currentSubtitles = this.subtitles;
|
|
} else if (this.currentVideoIndex === 1) {
|
|
} else if (this.currentVideoIndex === 1) {
|
|
currentSubtitles = this.secondVideoSubtitles;
|
|
currentSubtitles = this.secondVideoSubtitles;
|
|
- }else if (this.currentVideoIndex === 2) {
|
|
|
|
|
|
+ } else if (this.currentVideoIndex === 2) {
|
|
currentSubtitles = this.thirdVideoSubtitles;
|
|
currentSubtitles = this.thirdVideoSubtitles;
|
|
- }else if (this.currentVideoIndex === 3) {
|
|
|
|
|
|
+ } else if (this.currentVideoIndex === 3) {
|
|
currentSubtitles = this.fourthVideoSubtitles;
|
|
currentSubtitles = this.fourthVideoSubtitles;
|
|
- }else if (this.currentVideoIndex === 4) {
|
|
|
|
|
|
+ } else if (this.currentVideoIndex === 4) {
|
|
currentSubtitles = this.fifthVideoSubtitles;
|
|
currentSubtitles = this.fifthVideoSubtitles;
|
|
- }else if (this.currentVideoIndex === 5) {
|
|
|
|
|
|
+ } else if (this.currentVideoIndex === 5) {
|
|
currentSubtitles = this.sixthVideoSubtitles;
|
|
currentSubtitles = this.sixthVideoSubtitles;
|
|
- }else {
|
|
|
|
|
|
+ } else {
|
|
// 如果有更多视频,可以继续添加条件
|
|
// 如果有更多视频,可以继续添加条件
|
|
currentSubtitles = [];
|
|
currentSubtitles = [];
|
|
}
|
|
}
|
|
@@ -2453,6 +2453,7 @@ export default {
|
|
|
|
|
|
// 添加格式化时间的辅助方法
|
|
// 添加格式化时间的辅助方法
|
|
formatTime(seconds) {
|
|
formatTime(seconds) {
|
|
|
|
+ if (!seconds && seconds !== 0) return '03:30'; // 默认显示03:30
|
|
const minutes = Math.floor(seconds / 60);
|
|
const minutes = Math.floor(seconds / 60);
|
|
const remainingSeconds = seconds % 60;
|
|
const remainingSeconds = seconds % 60;
|
|
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
|
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
|
@@ -2491,15 +2492,15 @@ export default {
|
|
/* 用户摄像头容器样式 */
|
|
/* 用户摄像头容器样式 */
|
|
.user-camera-container {
|
|
.user-camera-container {
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 20px;
|
|
|
|
- right: 20px;
|
|
|
|
- width: 100px;
|
|
|
|
- height: 150px;
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
|
+ top: 50px;
|
|
|
|
+ right: 5px;
|
|
|
|
+ width: 110px; /* 稍微增加宽度 */
|
|
|
|
+ height: 160px; /* 稍微增加高度 */
|
|
|
|
+ border-radius: 4px; /* 减小圆角 */
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
z-index: 20;
|
|
z-index: 20;
|
|
- border: 1px solid #fff;
|
|
|
|
|
|
+ border: 1px solid #eee;
|
|
}
|
|
}
|
|
|
|
|
|
/* 用户摄像头视频样式 */
|
|
/* 用户摄像头视频样式 */
|
|
@@ -2559,23 +2560,32 @@ video::-webkit-media-controls-fullscreen-button {
|
|
display: none !important;
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+/* 修改字幕覆盖层样式,使其与图片中的样式一致 */
|
|
.subtitle-overlay {
|
|
.subtitle-overlay {
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: 50px;
|
|
|
|
- left: 0;
|
|
|
|
- width: 100%;
|
|
|
|
- padding: 15px;
|
|
|
|
- background-color: rgba(0, 0, 0, 0.7);
|
|
|
|
- color: white;
|
|
|
|
- text-align: center;
|
|
|
|
|
|
+ bottom: 180px; /* 调整位置,使其更靠近底部 */
|
|
|
|
+ left: 5%; /* 从左侧留出5%的空间 */
|
|
|
|
+ width: 80%; /* 宽度设为90%,两侧各留5%实现居中 */
|
|
|
|
+ padding: 15px 20px; /* 增加左右内边距 */
|
|
|
|
+ border-radius: 15px;
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
|
|
|
|
+ color: #333; /* 文字颜色为深色 */
|
|
|
|
+ text-align: left; /* 文字左对齐 */
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
line-height: 1.5;
|
|
z-index: 10;
|
|
z-index: 10;
|
|
- border-radius: 4px;
|
|
|
|
- max-width: 90%;
|
|
|
|
- margin: 0 auto;
|
|
|
|
- left: 5%;
|
|
|
|
- right: 5%;
|
|
|
|
|
|
+ margin: 0 auto; /* 添加自动边距实现居中 */
|
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/* 添加计时器样式,右侧显示橙色圆点和时间 */
|
|
|
|
+.subtitle-overlay::after {
|
|
|
|
+ content: attr(data-time);
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 20px;
|
|
|
|
+ bottom: 15px;
|
|
|
|
+ color: #333;
|
|
|
|
+ font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
.control-panel {
|
|
.control-panel {
|
|
@@ -2625,144 +2635,113 @@ video::-webkit-media-controls-fullscreen-button {
|
|
|
|
|
|
.answer-button-container {
|
|
.answer-button-container {
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 75%;
|
|
|
|
|
|
+ bottom: 50px; /* 将按钮放在底部而不是75%的位置 */
|
|
left: 50%;
|
|
left: 50%;
|
|
- transform: translate(-50%, -50%);
|
|
|
|
|
|
+ transform: translateX(-50%); /* 只在X轴上平移,保持水平居中 */
|
|
z-index: 20;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+/* 修改回答按钮样式 */
|
|
.answer-button {
|
|
.answer-button {
|
|
width: 120px;
|
|
width: 120px;
|
|
- height: 120px;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- background-color: #0039b3; /* 绿色背景,与图片中的颜色类似 */
|
|
|
|
- color: white;
|
|
|
|
- font-size: 18px;
|
|
|
|
|
|
+ height: 40px; /* 改为矩形按钮 */
|
|
|
|
+ border-radius: 20px; /* 圆角矩形 */
|
|
|
|
+ background-color: #ffffff; /* 白色背景 */
|
|
|
|
+ color: #333; /* 深色文字 */
|
|
|
|
+ font-size: 16px;
|
|
border: none;
|
|
border: none;
|
|
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
- animation: pulse 2s infinite;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-@keyframes pulse {
|
|
|
|
- 0% {
|
|
|
|
- transform: scale(1);
|
|
|
|
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
- }
|
|
|
|
- 50% {
|
|
|
|
- transform: scale(1.05);
|
|
|
|
- box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
|
|
|
|
- }
|
|
|
|
- 100% {
|
|
|
|
- transform: scale(1);
|
|
|
|
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
- }
|
|
|
|
|
|
+ animation: none; /* 移除脉动动画 */
|
|
}
|
|
}
|
|
|
|
|
|
.stop-recording-button-container {
|
|
.stop-recording-button-container {
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 75%;
|
|
|
|
|
|
+ bottom: 50px; /* 统一与其他按钮的位置 */
|
|
left: 50%;
|
|
left: 50%;
|
|
- transform: translate(-50%, -50%);
|
|
|
|
|
|
+ transform: translateX(-50%);
|
|
z-index: 20;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
|
|
|
|
.stop-recording-button {
|
|
.stop-recording-button {
|
|
width: 120px;
|
|
width: 120px;
|
|
- height: 120px;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- background-color: #e74c3c; /* 红色背景 */
|
|
|
|
- color: white;
|
|
|
|
- font-size: 18px;
|
|
|
|
|
|
+ height: 40px; /* 改为矩形按钮 */
|
|
|
|
+ border-radius: 20px; /* 圆角矩形 */
|
|
|
|
+ background-color: #e74c3c; /* 白色背景 */
|
|
|
|
+ color: #333; /* 深色文字 */
|
|
|
|
+ font-size: 16px;
|
|
border: none;
|
|
border: none;
|
|
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
- animation: pulse 2s infinite;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-@keyframes pulse {
|
|
|
|
- 0% {
|
|
|
|
- transform: scale(1);
|
|
|
|
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
- }
|
|
|
|
- 50% {
|
|
|
|
- transform: scale(1.05);
|
|
|
|
- box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
|
|
|
|
- }
|
|
|
|
- 100% {
|
|
|
|
- transform: scale(1);
|
|
|
|
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
- }
|
|
|
|
|
|
+ animation: none; /* 移除脉动动画 */
|
|
}
|
|
}
|
|
|
|
|
|
-/* 录制中的指示器 */
|
|
|
|
.recording-indicator {
|
|
.recording-indicator {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 20px;
|
|
top: 20px;
|
|
left: 20px;
|
|
left: 20px;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
|
|
+ background-color: rgba(255, 255, 255, 0.9); /* 改为白色半透明背景 */
|
|
padding: 5px 10px;
|
|
padding: 5px 10px;
|
|
border-radius: 15px;
|
|
border-radius: 15px;
|
|
z-index: 20;
|
|
z-index: 20;
|
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
|
|
.recording-dot {
|
|
.recording-dot {
|
|
width: 12px;
|
|
width: 12px;
|
|
height: 12px;
|
|
height: 12px;
|
|
- background-color: #e74c3c;
|
|
|
|
|
|
+ background-color: #ff6b00; /* 改为橙色,与图片中的颜色一致 */
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
margin-right: 8px;
|
|
animation: blink 1s infinite;
|
|
animation: blink 1s infinite;
|
|
}
|
|
}
|
|
|
|
|
|
.recording-text {
|
|
.recording-text {
|
|
- color: white;
|
|
|
|
|
|
+ color: #333; /* 改为深色文字 */
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
-@keyframes blink {
|
|
|
|
- 0% { opacity: 1; }
|
|
|
|
- 50% { opacity: 0.3; }
|
|
|
|
- 100% { opacity: 1; }
|
|
|
|
|
|
+.timer-text {
|
|
|
|
+ color: #333; /* 改为深色文字 */
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
|
|
.start-recording-button-container {
|
|
.start-recording-button-container {
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 75%;
|
|
|
|
|
|
+ bottom: 50px; /* 统一与其他按钮的位置 */
|
|
left: 50%;
|
|
left: 50%;
|
|
- transform: translate(-50%, -50%);
|
|
|
|
|
|
+ transform: translateX(-50%);
|
|
z-index: 20;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
|
|
|
|
.start-recording-button {
|
|
.start-recording-button {
|
|
width: 120px;
|
|
width: 120px;
|
|
- height: 120px;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- background-color: #0039b3; /* 与开始面试按钮颜色保持一致 */
|
|
|
|
- color: white;
|
|
|
|
- font-size: 18px;
|
|
|
|
|
|
+ height: 40px; /* 改为矩形按钮 */
|
|
|
|
+ border-radius: 20px; /* 圆角矩形 */
|
|
|
|
+ background-color: #ffffff; /* 白色背景 */
|
|
|
|
+ color: #333; /* 深色文字 */
|
|
|
|
+ font-size: 16px;
|
|
border: none;
|
|
border: none;
|
|
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
- animation: pulse 2s infinite; /* 使用相同的动画 */
|
|
|
|
|
|
+ animation: none; /* 移除脉动动画 */
|
|
}
|
|
}
|
|
|
|
|
|
-/* 可以删除pulse-green动画,直接使用与开始面试按钮相同的pulse动画 */
|
|
|
|
-
|
|
|
|
.retry-button-container {
|
|
.retry-button-container {
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: 50px;
|
|
|
|
|
|
+ bottom: 30px; /* 统一与其他按钮的位置 */
|
|
left: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
z-index: 20;
|
|
z-index: 20;
|
|
@@ -2770,12 +2749,12 @@ video::-webkit-media-controls-fullscreen-button {
|
|
|
|
|
|
.retry-button {
|
|
.retry-button {
|
|
padding: 10px 20px;
|
|
padding: 10px 20px;
|
|
- background-color: #3498db; /* 蓝色背景 */
|
|
|
|
- color: white;
|
|
|
|
|
|
+ background-color: #ffffff; /* 白色背景 */
|
|
|
|
+ color: #333; /* 深色文字 */
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
border: none;
|
|
border: none;
|
|
- border-radius: 4px;
|
|
|
|
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
+ border-radius: 20px; /* 圆角矩形 */
|
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -2797,7 +2776,7 @@ video::-webkit-media-controls-fullscreen-button {
|
|
}
|
|
}
|
|
|
|
|
|
.timer-text {
|
|
.timer-text {
|
|
- color: white;
|
|
|
|
|
|
+ color: #000;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
font-family: monospace; /* 使用等宽字体,使时间显示更稳定 */
|
|
font-family: monospace; /* 使用等宽字体,使时间显示更稳定 */
|
|
}
|
|
}
|