|
@@ -1,91 +1,61 @@
|
|
<template>
|
|
<template>
|
|
<view class="camera-container">
|
|
<view class="camera-container">
|
|
- <!-- 顶部标题栏 -->
|
|
|
|
- <!-- <view class="header">
|
|
|
|
- <view class="back-button" @click="back">
|
|
|
|
- <text class="iconfont icon-back"></text>
|
|
|
|
|
|
+ <!-- 顶部相机区域 - 固定位置 -->
|
|
|
|
+ <view class="fixed-camera-container">
|
|
|
|
+ <view class="user-avatar">
|
|
|
|
+ <camera v-if="!digitalHumanUrl" device-position="front" flash="auto" class="camera"
|
|
|
|
+ :mode="mode" @error="handleCameraError"></camera>
|
|
|
|
+ <web-view v-else-if="digitalHumanUrl" :src="digitalHumanUrl" class="digital-human-webview"></web-view>
|
|
|
|
+ <image v-else src="/static/avatar.png" mode="aspectFill" class="avatar-image"></image>
|
|
</view>
|
|
</view>
|
|
- <view class="title">中国传统文化测试</view>
|
|
|
|
- <view class="controls">
|
|
|
|
- <text class="iconfont icon-mic"></text>
|
|
|
|
- <text class="iconfont icon-settings" @click="toggleSettings"></text>
|
|
|
|
- </view>
|
|
|
|
- </view> -->
|
|
|
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 主要内容区域 - 添加可滚动区域 -->
|
|
|
|
- <scroll-view class="content-scroll" scroll-y="true">
|
|
|
|
|
|
+ <!-- 主要内容区域 - 修改为流式布局 -->
|
|
|
|
+ <scroll-view class="content-scroll" scroll-y="true" :scroll-into-view="currentScrollId" :scroll-with-animation="true">
|
|
<view class="content">
|
|
<view class="content">
|
|
- <!-- 数字人头像 -->
|
|
|
|
- <view class="digital-avatar">
|
|
|
|
- <!-- <view class="message-box">
|
|
|
|
- <text class="message-text">面试官会根据您的自我介绍内容对您提出以下问题,请您回答相关问题,请知悉答题即可</text>
|
|
|
|
- </view> -->
|
|
|
|
- <view class="user-avatar">
|
|
|
|
- <camera v-if="!digitalHumanUrl" device-position="front" flash="auto" class="camera"
|
|
|
|
- :mode="mode" @error="handleCameraError"></camera>
|
|
|
|
- <web-view v-else-if="digitalHumanUrl" :src="digitalHumanUrl" class="digital-human-webview"></web-view>
|
|
|
|
- <image v-else src="/static/avatar.png" mode="aspectFill" class="avatar-image"></image>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <!-- 进度指示器 -->
|
|
|
|
- <!-- <view class="progress-container">
|
|
|
|
- <view class="progress-step" v-for="(step, index) in 3" :key="index">
|
|
|
|
- <view class="step-circle" :class="{'active': currentStep >= index+1}">{{index+1}}</view>
|
|
|
|
- <view class="step-text">{{stepTexts[index]}}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="progress-bar">
|
|
|
|
- <view class="progress-fill" :style="{width: progressWidth + '%'}"></view>
|
|
|
|
- </view>
|
|
|
|
- </view> -->
|
|
|
|
-
|
|
|
|
- <!-- 测试内容区域 -->
|
|
|
|
- <view class="interview-content">
|
|
|
|
|
|
+ <!-- 测试内容区域 - 修改为流式布局,每个问题都显示 -->
|
|
|
|
+ <view v-for="(question, qIndex) in questions" :key="question.id" :id="'question-'+qIndex" class="interview-content">
|
|
<!-- 问题编号和进度 -->
|
|
<!-- 问题编号和进度 -->
|
|
<view class="question-number">
|
|
<view class="question-number">
|
|
- <text>{{currentQuestionIndex + 1}}/{{questions.length}}</text>
|
|
|
|
|
|
+ <text>{{qIndex + 1}}/{{questions.length}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 问题和选项区域 -->
|
|
<!-- 问题和选项区域 -->
|
|
<view class="question-area">
|
|
<view class="question-area">
|
|
<view class="question-importance">
|
|
<view class="question-importance">
|
|
<!-- <text v-if="currentQuestion.isImportant">重点题</text> -->
|
|
<!-- <text v-if="currentQuestion.isImportant">重点题</text> -->
|
|
- <text class="question-type">{{currentQuestion.questionTypeName}}</text>
|
|
|
|
- {{currentQuestion.text}}
|
|
|
|
|
|
+ <text class="question-type">{{question.questionTypeName}}</text>
|
|
|
|
+ {{question.text}}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 添加图片显示区域,仅在 question_form 为 3 时显示 -->
|
|
<!-- 添加图片显示区域,仅在 question_form 为 3 时显示 -->
|
|
- <view class="question-image-container" v-if="currentQuestion.questionType === 3 && currentQuestion.imageUrl">
|
|
|
|
- <image :src="currentQuestion.imageUrl" mode="widthFix" class="question-image"></image>
|
|
|
|
|
|
+ <view class="question-image-container" v-if="question.questionType === 3 && question.imageUrl">
|
|
|
|
+ <image :src="question.imageUrl" mode="widthFix" class="question-image"></image>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="options">
|
|
<view class="options">
|
|
- <!-- 渲染非开放问题 (questionType: 1, 2 或 3) 'option-correct': showResult && (
|
|
|
|
- currentQuestion.questionType === 1 || currentQuestion.questionType === 3 ? index === currentQuestion.correctAnswer : currentQuestion.correctAnswers.includes(index)
|
|
|
|
- ),-->
|
|
|
|
|
|
+ <!-- 渲染非开放问题 (questionType: 1, 2 或 3) -->
|
|
<view
|
|
<view
|
|
- v-if="currentQuestion.questionType !== 0"
|
|
|
|
- v-for="(option, index) in currentQuestion.options"
|
|
|
|
|
|
+ v-if="question.questionType !== 0"
|
|
|
|
+ v-for="(option, index) in question.options"
|
|
:key="index"
|
|
:key="index"
|
|
class="option-item"
|
|
class="option-item"
|
|
:class="{
|
|
:class="{
|
|
- 'option-selected': currentQuestion.questionType === 1 || currentQuestion.questionType === 3 ? selectedOption === index : selectedOptions.includes(index),
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ 'option-selected': isOptionSelected(question, qIndex, index),
|
|
|
|
+ 'option-disabled': qIndex !== currentQuestionIndex
|
|
}"
|
|
}"
|
|
- @click="selectOption(index)">
|
|
|
|
- <!-- 使用字母标识 A、B、C、D、E 等 -->
|
|
|
|
- <!-- <text class="option-prefix">{{ String.fromCharCode(65 + index) }}.</text> -->
|
|
|
|
|
|
+ @click="qIndex === currentQuestionIndex && selectOption(index)">
|
|
<text class="option-text">{{ option.option_text || (typeof option === 'string' ? option : JSON.stringify(option)) }}</text>
|
|
<text class="option-text">{{ option.option_text || (typeof option === 'string' ? option : JSON.stringify(option)) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
- <!-- 添加计时器显示 -->
|
|
|
|
- <!-- <view class="timer-container">
|
|
|
|
- <text class="timer-text">本题剩余({{remainingTime}})</text>
|
|
|
|
- </view> -->
|
|
|
|
-
|
|
|
|
- <!-- 移除底部按钮容器,将在滚动区域外显示 -->
|
|
|
|
|
|
+ <!-- 添加当前题目的按钮 - 只在多选题时显示 -->
|
|
|
|
+ <view class="question-button-container" v-if="qIndex === currentQuestionIndex && question.questionType === 2">
|
|
|
|
+ <button class="next-button" @click="nextQuestion()"
|
|
|
|
+ :disabled="selectedOptions.length === 0">
|
|
|
|
+ {{"提交答案"}}
|
|
|
|
+ </button>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
@@ -94,26 +64,6 @@
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
|
|
|
- <!-- 将底部按钮移到滚动区域外 -->
|
|
|
|
- <view class="bottom-button-container">
|
|
|
|
- <view class="bottom-button-wrapper">
|
|
|
|
- <button class="next-button" @click="nextQuestion(option)"
|
|
|
|
- :disabled="
|
|
|
|
- (currentQuestion.questionType === 0 && openQuestionAnswer.trim() === '') ||
|
|
|
|
- (currentQuestion.questionType === 1 && selectedOption === null) ||
|
|
|
|
- (currentQuestion.questionType === 2 && selectedOptions.length === 0)
|
|
|
|
- ">
|
|
|
|
- 本题剩余{{remainingTime}} {{"进入下一题"}}
|
|
|
|
- </button>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <!-- 底部控制栏 -->
|
|
|
|
- <!-- <view class="footer">
|
|
|
|
- <view class="timer">本题剩余 {{remainingTime}}</view>
|
|
|
|
- <view class="next-step">进入下一题</view>
|
|
|
|
- </view> -->
|
|
|
|
-
|
|
|
|
<!-- 面试结束弹窗 -->
|
|
<!-- 面试结束弹窗 -->
|
|
<view class="interview-end-modal" v-if="showEndModal">
|
|
<view class="interview-end-modal" v-if="showEndModal">
|
|
<view class="modal-content">
|
|
<view class="modal-content">
|
|
@@ -193,6 +143,7 @@
|
|
currentAnswer: null, // 存储当前答案以便提交
|
|
currentAnswer: null, // 存储当前答案以便提交
|
|
questionStartTime: null, // 存储问题开始时间
|
|
questionStartTime: null, // 存储问题开始时间
|
|
mode: 'normal', // 相机模式
|
|
mode: 'normal', // 相机模式
|
|
|
|
+ currentScrollId: 'question-0', // 当前滚动到的问题ID
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -273,10 +224,10 @@
|
|
// 设置总题目数
|
|
// 设置总题目数
|
|
this.totalQuestions = this.questions.length;
|
|
this.totalQuestions = this.questions.length;
|
|
|
|
|
|
- // 启动倒计时
|
|
|
|
|
|
+ /* // 启动倒计时
|
|
if (this.questions.length > 0) {
|
|
if (this.questions.length > 0) {
|
|
this.startTimer();
|
|
this.startTimer();
|
|
- }
|
|
|
|
|
|
+ } */
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error('获取面试详情失败:', error);
|
|
console.error('获取面试详情失败:', error);
|
|
this.handleLoadError('获取面试详情失败');
|
|
this.handleLoadError('获取面试详情失败');
|
|
@@ -314,8 +265,8 @@
|
|
// 设置总题目数
|
|
// 设置总题目数
|
|
this.totalQuestions = this.questions.length;
|
|
this.totalQuestions = this.questions.length;
|
|
|
|
|
|
- // 启动倒计时
|
|
|
|
- this.startTimer();
|
|
|
|
|
|
+ /* // 启动倒计时
|
|
|
|
+ this.startTimer(); */
|
|
} else {
|
|
} else {
|
|
this.handleLoadError('没有可用的选择题');
|
|
this.handleLoadError('没有可用的选择题');
|
|
}
|
|
}
|
|
@@ -365,7 +316,7 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- // 格式化显示时间
|
|
|
|
|
|
+ // 格式化显示时间 (不再显示,但仍然计算用于内部逻辑)
|
|
const min = Math.floor(seconds / 60).toString().padStart(2, '0');
|
|
const min = Math.floor(seconds / 60).toString().padStart(2, '0');
|
|
const sec = (seconds % 60).toString().padStart(2, '0');
|
|
const sec = (seconds % 60).toString().padStart(2, '0');
|
|
this.remainingTime = `${min}:${sec}`;
|
|
this.remainingTime = `${min}:${sec}`;
|
|
@@ -374,7 +325,7 @@
|
|
|
|
|
|
resetTimer() {
|
|
resetTimer() {
|
|
clearInterval(this.timerInterval);
|
|
clearInterval(this.timerInterval);
|
|
- this.startTimer();
|
|
|
|
|
|
+ /* this.startTimer(); */
|
|
},
|
|
},
|
|
|
|
|
|
selectOption(index) {
|
|
selectOption(index) {
|
|
@@ -390,11 +341,47 @@
|
|
// 否则添加到已选中数组
|
|
// 否则添加到已选中数组
|
|
this.selectedOptions.push(index);
|
|
this.selectedOptions.push(index);
|
|
}
|
|
}
|
|
|
|
+ // 多选题不自动提交,需要用户手动点击"进入下一题"按钮
|
|
} else if (this.currentQuestion.questionType === 1 || this.currentQuestion.questionType === 3) { // 单选题或看图答题
|
|
} else if (this.currentQuestion.questionType === 1 || this.currentQuestion.questionType === 3) { // 单选题或看图答题
|
|
this.selectedOption = index;
|
|
this.selectedOption = index;
|
|
|
|
+
|
|
|
|
+ // 单选题自动提交答案并进入下一题
|
|
|
|
+ this.playAiSpeaking();
|
|
|
|
+
|
|
|
|
+ // 短暂延迟后提交答案,让用户看到选中效果
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.checkAnswer();
|
|
|
|
+ this.saveAnswer();
|
|
|
|
+
|
|
|
|
+ // 提交答案
|
|
|
|
+ this.submitCurrentAnswer().then(() => {
|
|
|
|
+ // 提交成功后,短暂延迟后自动进入下一题
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ // 如果是最后一题,跳转到面试页面
|
|
|
|
+ if (this.currentQuestionIndex >= this.questions.length - 1) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/pages/interview-question/interview-question'
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ // 否则进入下一题
|
|
|
|
+ this.goToNextQuestion();
|
|
|
|
+ }
|
|
|
|
+ }, 800); // 0.8秒后自动进入下一题
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ console.error('提交答案失败:', error);
|
|
|
|
+ // 即使提交失败也继续下一题
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ if (this.currentQuestionIndex >= this.questions.length - 1) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/pages/interview-question/interview-question'
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.goToNextQuestion();
|
|
|
|
+ }
|
|
|
|
+ }, 1000);
|
|
|
|
+ });
|
|
|
|
+ }, 500); // 0.5秒后提交答案
|
|
}
|
|
}
|
|
-
|
|
|
|
- this.playAiSpeaking();
|
|
|
|
},
|
|
},
|
|
|
|
|
|
checkAnswer() {
|
|
checkAnswer() {
|
|
@@ -433,55 +420,44 @@
|
|
this.saveAnswer();
|
|
this.saveAnswer();
|
|
},
|
|
},
|
|
|
|
|
|
- nextQuestion(data) {
|
|
|
|
- // 如果还没有显示结果,先检查答案并提交
|
|
|
|
- if (!this.showResult) {
|
|
|
|
- this.checkAnswer();
|
|
|
|
-
|
|
|
|
- // 保存当前题目的答案
|
|
|
|
- this.saveAnswer();
|
|
|
|
-
|
|
|
|
- // 提交答案
|
|
|
|
- this.submitCurrentAnswer().then(() => {
|
|
|
|
- // 提交成功后,短暂延迟后自动进入下一题
|
|
|
|
- setTimeout(() => {
|
|
|
|
- // 如果是最后一题,跳转到面试页面
|
|
|
|
- if (this.currentQuestionIndex >= this.questions.length - 1) {
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: '/pages/interview-question/interview-question'
|
|
|
|
- });
|
|
|
|
- } else {
|
|
|
|
- // 否则进入下一题
|
|
|
|
- this.goToNextQuestion();
|
|
|
|
- }
|
|
|
|
- }, 500); // 0.5秒后自动进入下一题
|
|
|
|
- }).catch(error => {
|
|
|
|
- console.error('提交答案失败:', error);
|
|
|
|
- // 即使提交失败也继续下一题
|
|
|
|
- setTimeout(() => {
|
|
|
|
- if (this.currentQuestionIndex >= this.questions.length - 1) {
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: '/pages/interview-question/interview-question'
|
|
|
|
- });
|
|
|
|
- } else {
|
|
|
|
- this.goToNextQuestion();
|
|
|
|
- }
|
|
|
|
- }, 1000);
|
|
|
|
- });
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
|
|
+ // 修改 nextQuestion 方法,只处理多选题
|
|
|
|
+ nextQuestion() {
|
|
|
|
+ // 确保当前是多选题
|
|
|
|
+ if (this.currentQuestion.questionType !== 2) return;
|
|
|
|
|
|
- // 如果已经显示结果,点击"下一题"按钮时直接执行
|
|
|
|
- // 如果是最后一题,直接跳转到手部照片采集页面
|
|
|
|
- if (this.currentQuestionIndex >= this.questions.length - 1) {
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: '/pages/interview-question/interview-question'
|
|
|
|
- });
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
|
|
+ // 检查答案并提交
|
|
|
|
+ this.checkAnswer();
|
|
|
|
|
|
- // 前往下一题
|
|
|
|
- this.goToNextQuestion();
|
|
|
|
|
|
+ // 保存当前题目的答案
|
|
|
|
+ this.saveAnswer();
|
|
|
|
+
|
|
|
|
+ // 提交答案
|
|
|
|
+ this.submitCurrentAnswer().then(() => {
|
|
|
|
+ // 提交成功后,短暂延迟后自动进入下一题
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ // 如果是最后一题,跳转到面试页面
|
|
|
|
+ if (this.currentQuestionIndex >= this.questions.length - 1) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/pages/interview-question/interview-question'
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ // 否则进入下一题
|
|
|
|
+ this.goToNextQuestion();
|
|
|
|
+ }
|
|
|
|
+ }, 500); // 0.5秒后自动进入下一题
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ console.error('提交答案失败:', error);
|
|
|
|
+ // 即使提交失败也继续下一题
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ if (this.currentQuestionIndex >= this.questions.length - 1) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/pages/interview-question/interview-question'
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.goToNextQuestion();
|
|
|
|
+ }
|
|
|
|
+ }, 1000);
|
|
|
|
+ });
|
|
},
|
|
},
|
|
|
|
|
|
// 保存当前题目的答案
|
|
// 保存当前题目的答案
|
|
@@ -609,10 +585,11 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- // 修改 goToNextQuestion 方法,添加 async 关键字
|
|
|
|
|
|
+ // 修改 goToNextQuestion 方法,在切换到下一题时重置当前选项状态
|
|
async goToNextQuestion() {
|
|
async goToNextQuestion() {
|
|
// 重置状态
|
|
// 重置状态
|
|
this.showResult = false;
|
|
this.showResult = false;
|
|
|
|
+ // 重置当前选择状态,但不影响已保存的答案
|
|
this.selectedOption = null;
|
|
this.selectedOption = null;
|
|
this.selectedOptions = [];
|
|
this.selectedOptions = [];
|
|
this.openQuestionAnswer = ''; // 重置开放问题答案
|
|
this.openQuestionAnswer = ''; // 重置开放问题答案
|
|
@@ -620,12 +597,15 @@
|
|
// 前往下一题
|
|
// 前往下一题
|
|
this.currentQuestionIndex++;
|
|
this.currentQuestionIndex++;
|
|
|
|
|
|
|
|
+ // 更新滚动ID,滚动到下一题
|
|
|
|
+ this.currentScrollId = 'question-' + this.currentQuestionIndex;
|
|
|
|
+
|
|
// 如果已经有下一题的详情,直接使用
|
|
// 如果已经有下一题的详情,直接使用
|
|
if (this.questions[this.currentQuestionIndex]) {
|
|
if (this.questions[this.currentQuestionIndex]) {
|
|
// 更新进度
|
|
// 更新进度
|
|
this.progressWidth = (this.currentQuestionIndex + 1) / this.questions.length * 100;
|
|
this.progressWidth = (this.currentQuestionIndex + 1) / this.questions.length * 100;
|
|
|
|
|
|
- // 重置计时器
|
|
|
|
|
|
+ // 重置计时器但不显示
|
|
this.resetTimer();
|
|
this.resetTimer();
|
|
|
|
|
|
// 播放AI介绍下一题
|
|
// 播放AI介绍下一题
|
|
@@ -842,6 +822,31 @@
|
|
icon: 'none'
|
|
icon: 'none'
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+ // 修改 isOptionSelected 方法,更精确地判断选项是否被选中
|
|
|
|
+ isOptionSelected(question, qIndex, optionIndex) {
|
|
|
|
+ // 获取该题的答案
|
|
|
|
+ const answer = this.answers.find(a => a.questionId === question.id);
|
|
|
|
+
|
|
|
|
+ // 如果是当前正在回答的题目
|
|
|
|
+ if (qIndex === this.currentQuestionIndex) {
|
|
|
|
+ if (question.questionType === 1 || question.questionType === 3) { // 单选题
|
|
|
|
+ return this.selectedOption === optionIndex;
|
|
|
|
+ } else if (question.questionType === 2) { // 多选题
|
|
|
|
+ return this.selectedOptions.includes(optionIndex);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 如果是已回答过的题目,使用保存的答案
|
|
|
|
+ else if (answer) {
|
|
|
|
+ if (question.questionType === 1 || question.questionType === 3) { // 单选题
|
|
|
|
+ return answer.answer === optionIndex;
|
|
|
|
+ } else if (question.questionType === 2 && Array.isArray(answer.answer)) { // 多选题
|
|
|
|
+ return answer.answer.includes(optionIndex);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return false;
|
|
|
|
+ },
|
|
},
|
|
},
|
|
// 添加生命周期钩子,确保在组件销毁时清除计时器
|
|
// 添加生命周期钩子,确保在组件销毁时清除计时器
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
@@ -957,6 +962,9 @@
|
|
flex: 1;
|
|
flex: 1;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
+ margin-bottom: 40rpx;
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
}
|
|
}
|
|
|
|
|
|
.video-area {
|
|
.video-area {
|
|
@@ -1048,12 +1056,29 @@
|
|
border: 1px solid #e0e0e0;
|
|
border: 1px solid #e0e0e0;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+ cursor: pointer; /* 添加指针样式 */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .option-item:active {
|
|
|
|
+ transform: scale(0.98); /* 点击时轻微缩小效果 */
|
|
|
|
+ opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
|
|
.option-selected {
|
|
.option-selected {
|
|
background-color: #e6f7ff;
|
|
background-color: #e6f7ff;
|
|
border: 1px solid #1890ff;
|
|
border: 1px solid #1890ff;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ /* 添加选中后的动画效果 */
|
|
|
|
+ @keyframes selectedPulse {
|
|
|
|
+ 0% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.4); }
|
|
|
|
+ 70% { box-shadow: 0 0 0 10px rgba(24, 144, 255, 0); }
|
|
|
|
+ 100% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0); }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .option-selected {
|
|
|
|
+ animation: selectedPulse 1.5s ease-out;
|
|
|
|
+ }
|
|
|
|
|
|
.option-correct {
|
|
.option-correct {
|
|
background-color: #d4f7d4;
|
|
background-color: #d4f7d4;
|
|
@@ -1415,12 +1440,54 @@
|
|
/* 添加滚动视图样式 */
|
|
/* 添加滚动视图样式 */
|
|
.content-scroll {
|
|
.content-scroll {
|
|
flex: 1;
|
|
flex: 1;
|
|
- height: calc(100vh - 130px); /* 减去底部按钮的高度 */
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
|
+ height: calc(100vh - 200px); /* 只减去顶部相机的高度 */
|
|
|
|
+ margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
/* 添加底部空白区域,防止内容被固定按钮遮挡 */
|
|
/* 添加底部空白区域,防止内容被固定按钮遮挡 */
|
|
.bottom-space {
|
|
.bottom-space {
|
|
- height: 130px; /* 与底部按钮高度一致 */
|
|
|
|
|
|
+ height: 50rpx; /* 减小底部空白区域 */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 添加流式布局相关样式 */
|
|
|
|
+ .interview-content {
|
|
|
|
+ margin-bottom: 40rpx;
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .option-disabled {
|
|
|
|
+ opacity: 0.7;
|
|
|
|
+ pointer-events: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .question-button-container {
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom-timer-container {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 添加固定相机容器样式 */
|
|
|
|
+ .fixed-camera-container {
|
|
|
|
+ position: sticky;
|
|
|
|
+ top: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ z-index: 10;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .user-avatar {
|
|
|
|
+ width: 110px;
|
|
|
|
+ height: 160px;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ overflow: hidden;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|