950 lines
30 KiB
Vue
950 lines
30 KiB
Vue
<template>
|
||
<view class="voice-evaluation-container">
|
||
<!-- 顶部导航栏 -->
|
||
<custom-navbar title="语音评测"></custom-navbar>
|
||
|
||
<!-- 评测内容显示 -->
|
||
<view class="content-section">
|
||
<view class="section-header">
|
||
<text class="section-title">📝 评测内容</text>
|
||
<text class="edit-btn" v-if="content" @click="editContent">编辑</text>
|
||
</view>
|
||
<view class="content-text" v-if="content">
|
||
<text>{{ content }}</text>
|
||
</view>
|
||
<view class="content-input" v-else>
|
||
<textarea
|
||
v-model="inputContent"
|
||
placeholder="请输入要评测的课文或文字内容（建议50-200字）"
|
||
maxlength="500"
|
||
class="textarea"
|
||
:auto-height="true"
|
||
></textarea>
|
||
<view class="char-count">{{ inputContent.length }}/500</view>
|
||
<button @click="setContent" class="btn-primary" :disabled="!inputContent.trim()">确定</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 录音控制 -->
|
||
<view class="record-section">
|
||
<view class="section-header">
|
||
<text class="section-title">🎤 语音录制</text>
|
||
</view>
|
||
<view class="record-controls">
|
||
<!-- 录音波形动画 -->
|
||
<view class="wave-container" v-if="isRecording">
|
||
<view class="wave-item" v-for="(item, index) in waveData" :key="index"
|
||
:style="{ height: item + 'rpx' }"></view>
|
||
</view>
|
||
<view class="record-time" v-if="isRecording">
|
||
<text class="time-text">录制中：{{ formatTime(recordTime) }}</text>
|
||
</view>
|
||
<view class="record-buttons">
|
||
<button
|
||
v-if="!isRecording && !recordPath"
|
||
@click="startRecord"
|
||
class="btn-record"
|
||
:disabled="!content"
|
||
>
|
||
<text class="btn-icon">🎤</text>
|
||
<text>开始录音</text>
|
||
</button>
|
||
<button
|
||
v-if="isRecording"
|
||
@click="stopRecord"
|
||
class="btn-stop"
|
||
>
|
||
<text class="btn-icon">⏹</text>
|
||
<text>停止录音</text>
|
||
</button>
|
||
<button
|
||
v-if="recordPath && !isRecording"
|
||
@click="playRecord"
|
||
class="btn-play"
|
||
:disabled="isPlaying"
|
||
>
|
||
<text class="btn-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
|
||
<text>{{ isPlaying ? '播放中' : '播放录音' }}</text>
|
||
</button>
|
||
<button
|
||
v-if="recordPath && !isRecording"
|
||
@click="reRecord"
|
||
class="btn-rerecord"
|
||
>
|
||
<text class="btn-icon">🔄</text>
|
||
<text>重新录制</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 评测结果 -->
|
||
<view class="result-section" v-if="evaluationResult">
|
||
<view class="section-header">
|
||
<text class="section-title">📊 评测结果</text>
|
||
<view class="header-actions">
|
||
<text class="view-detail-btn" @click="viewCurrentDetail">查看详情</text>
|
||
<text class="submit-status" v-if="isSubmitted">✓ 已提交</text>
|
||
</view>
|
||
</view>
|
||
<view class="result-main-score">
|
||
<text class="main-score-value">{{ evaluationResult.score || 0 }}</text>
|
||
<text class="main-score-label">总分</text>
|
||
</view>
|
||
<view class="result-scores">
|
||
<view class="score-item">
|
||
<view class="score-progress">
|
||
<view class="score-progress-bar" :style="{ width: (evaluationResult.accuracy || 0) + '%' }"></view>
|
||
</view>
|
||
<text class="score-label">准确度</text>
|
||
<text class="score-value">{{ evaluationResult.accuracy || 0 }}分</text>
|
||
</view>
|
||
<view class="score-item">
|
||
<view class="score-progress">
|
||
<view class="score-progress-bar" :style="{ width: (evaluationResult.fluency || 0) + '%' }"></view>
|
||
</view>
|
||
<text class="score-label">流畅度</text>
|
||
<text class="score-value">{{ evaluationResult.fluency || 0 }}分</text>
|
||
</view>
|
||
<view class="score-item">
|
||
<view class="score-progress">
|
||
<view class="score-progress-bar" :style="{ width: (evaluationResult.completeness || 0) + '%' }"></view>
|
||
</view>
|
||
<text class="score-label">完整度</text>
|
||
<text class="score-value">{{ evaluationResult.completeness || 0 }}分</text>
|
||
</view>
|
||
<view class="score-item">
|
||
<view class="score-progress">
|
||
<view class="score-progress-bar" :style="{ width: (evaluationResult.pronunciation || 0) + '%' }"></view>
|
||
</view>
|
||
<text class="score-label">发音</text>
|
||
<text class="score-value">{{ evaluationResult.pronunciation || 0 }}分</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-section" v-if="currentEvaluationId && evaluationResult && !isSubmitted">
|
||
<button
|
||
@click="submitEvaluation"
|
||
class="btn-submit"
|
||
:loading="isSubmitting"
|
||
>
|
||
{{ isSubmitting ? '提交中...' : '提交评测' }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 评测按钮 -->
|
||
<view class="evaluate-section" v-if="recordPath && !evaluationResult">
|
||
<button
|
||
@click="evaluate"
|
||
class="btn-evaluate"
|
||
:loading="isEvaluating"
|
||
>
|
||
{{ isEvaluating ? '评测中...' : '开始评测' }}
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 历史记录 -->
|
||
<view class="history-section">
|
||
<view class="section-header">
|
||
<text class="section-title">📋 历史记录</text>
|
||
<text class="refresh-btn" @click="loadHistory">刷新</text>
|
||
</view>
|
||
<view class="history-list" v-if="historyList.length > 0">
|
||
<view
|
||
v-for="(item, index) in historyList"
|
||
:key="item.id || index"
|
||
class="history-item"
|
||
@click="viewDetail(item)"
|
||
>
|
||
<view class="history-left">
|
||
<view class="history-content">{{ item.content ? (item.content.length > 30 ? item.content.substring(0, 30) + '...' : item.content) : '无内容' }}</view>
|
||
<view class="history-time">{{ formatDateTime(item.evaluationTime) }}</view>
|
||
</view>
|
||
<view class="history-right">
|
||
<view class="history-score">{{ item.score || 0 }}分</view>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="empty-tip">
|
||
<text class="empty-icon">📭</text>
|
||
<text>暂无历史记录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { uploadAndEvaluate, getMyVoiceRecords, submitVoiceEvaluation } from '@/api/study/voiceEvaluation.js'
|
||
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'
|
||
|
||
export default {
|
||
components: {
|
||
CustomNavbar
|
||
},
|
||
data() {
|
||
return {
|
||
courseId: null,
|
||
courseName: '',
|
||
content: '',
|
||
inputContent: '',
|
||
isRecording: false,
|
||
recordTime: 0,
|
||
recordTimer: null,
|
||
recordPath: '',
|
||
recorderManager: null,
|
||
audioContext: null,
|
||
isPlaying: false,
|
||
isEvaluating: false,
|
||
evaluationResult: null,
|
||
currentEvaluationId: null,
|
||
isSubmitted: false, // 是否已提交
|
||
isSubmitting: false, // 是否正在提交
|
||
currentEvaluationAudioPath: null, // 当前评测记录的音频路径
|
||
historyList: [],
|
||
waveData: [20, 30, 25, 35, 28, 32, 26, 30], // 波形数据
|
||
waveTimer: null
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.courseId) {
|
||
this.courseId = parseInt(options.courseId)
|
||
}
|
||
if (options.courseName) {
|
||
this.courseName = decodeURIComponent(options.courseName)
|
||
}
|
||
if (options.content) {
|
||
this.content = decodeURIComponent(options.content)
|
||
}
|
||
this.initRecorder()
|
||
this.loadHistory()
|
||
},
|
||
onUnload() {
|
||
if (this.recordTimer) {
|
||
clearInterval(this.recordTimer)
|
||
}
|
||
if (this.waveTimer) {
|
||
clearInterval(this.waveTimer)
|
||
}
|
||
if (this.recorderManager) {
|
||
this.recorderManager.stop()
|
||
}
|
||
if (this.audioContext) {
|
||
this.audioContext.destroy()
|
||
}
|
||
},
|
||
methods: {
|
||
// 初始化录音管理器
|
||
initRecorder() {
|
||
this.recorderManager = uni.getRecorderManager()
|
||
this.recorderManager.onStart(() => {
|
||
console.log('录音开始')
|
||
this.isRecording = true
|
||
this.recordTime = 0
|
||
this.recordTimer = setInterval(() => {
|
||
this.recordTime++
|
||
}, 1000)
|
||
// 启动波形动画
|
||
this.startWaveAnimation()
|
||
})
|
||
this.recorderManager.onStop((res) => {
|
||
console.log('录音结束', res)
|
||
this.isRecording = false
|
||
if (this.recordTimer) {
|
||
clearInterval(this.recordTimer)
|
||
}
|
||
this.stopWaveAnimation()
|
||
if (res.tempFilePath) {
|
||
this.recordPath = res.tempFilePath
|
||
uni.showToast({
|
||
title: '录音完成',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
}
|
||
})
|
||
this.recorderManager.onError((err) => {
|
||
console.error('录音错误', err)
|
||
uni.showToast({
|
||
title: '录音失败：' + err.errMsg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
this.isRecording = false
|
||
if (this.recordTimer) {
|
||
clearInterval(this.recordTimer)
|
||
}
|
||
this.stopWaveAnimation()
|
||
})
|
||
},
|
||
// 启动波形动画
|
||
startWaveAnimation() {
|
||
this.waveTimer = setInterval(() => {
|
||
this.waveData = this.waveData.map(() => Math.random() * 30 + 20)
|
||
}, 200)
|
||
},
|
||
// 停止波形动画
|
||
stopWaveAnimation() {
|
||
if (this.waveTimer) {
|
||
clearInterval(this.waveTimer)
|
||
this.waveTimer = null
|
||
}
|
||
this.waveData = [20, 30, 25, 35, 28, 32, 26, 30]
|
||
},
|
||
// 设置评测内容
|
||
setContent() {
|
||
if (!this.inputContent.trim()) {
|
||
uni.showToast({
|
||
title: '请输入评测内容',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.content = this.inputContent.trim()
|
||
this.inputContent = ''
|
||
// 重置录音和评测结果
|
||
this.recordPath = ''
|
||
this.evaluationResult = null
|
||
},
|
||
// 编辑内容
|
||
editContent() {
|
||
this.inputContent = this.content
|
||
this.content = ''
|
||
},
|
||
// 开始录音
|
||
startRecord() {
|
||
if (!this.content) {
|
||
uni.showToast({
|
||
title: '请先设置评测内容',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.recorderManager.start({
|
||
duration: 60000, // 最长60秒
|
||
sampleRate: 16000,
|
||
numberOfChannels: 1,
|
||
encodeBitRate: 96000,
|
||
format: 'mp3'
|
||
})
|
||
},
|
||
// 停止录音
|
||
stopRecord() {
|
||
this.recorderManager.stop()
|
||
},
|
||
// 播放录音
|
||
playRecord() {
|
||
if (this.audioContext) {
|
||
this.audioContext.destroy()
|
||
}
|
||
this.audioContext = uni.createInnerAudioContext()
|
||
this.audioContext.src = this.recordPath
|
||
this.isPlaying = true
|
||
this.audioContext.play()
|
||
this.audioContext.onEnded(() => {
|
||
this.isPlaying = false
|
||
this.audioContext.destroy()
|
||
this.audioContext = null
|
||
})
|
||
this.audioContext.onError((err) => {
|
||
console.error('播放失败', err)
|
||
this.isPlaying = false
|
||
uni.showToast({
|
||
title: '播放失败',
|
||
icon: 'none'
|
||
})
|
||
if (this.audioContext) {
|
||
this.audioContext.destroy()
|
||
this.audioContext = null
|
||
}
|
||
})
|
||
},
|
||
// 重新录制
|
||
reRecord() {
|
||
this.recordPath = ''
|
||
this.evaluationResult = null
|
||
this.currentEvaluationId = null
|
||
this.isSubmitted = false
|
||
},
|
||
// 开始评测
|
||
async evaluate() {
|
||
if (!this.recordPath) {
|
||
uni.showToast({
|
||
title: '请先录制语音',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if (!this.content) {
|
||
uni.showToast({
|
||
title: '请先设置评测内容',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
|
||
// 检查登录状态
|
||
const token = uni.getStorageSync('token')
|
||
if (!token) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先登录',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
return
|
||
}
|
||
|
||
this.isEvaluating = true
|
||
try {
|
||
const result = await uploadAndEvaluate(
|
||
this.recordPath,
|
||
this.content,
|
||
this.courseId,
|
||
'zh-CN'
|
||
)
|
||
|
||
if (result.code === 200 && result.data && result.data.evaluation) {
|
||
this.evaluationResult = {
|
||
score: result.data.evaluation.score,
|
||
accuracy: result.data.evaluation.accuracy,
|
||
fluency: result.data.evaluation.fluency,
|
||
completeness: result.data.evaluation.completeness,
|
||
pronunciation: result.data.evaluation.pronunciation
|
||
}
|
||
this.currentEvaluationId = result.data.evaluation.id
|
||
this.currentEvaluationAudioPath = result.data.evaluation.audioPath || null
|
||
// 检查是否已提交（处理null、0、1、true等情况）
|
||
const submitted = result.data.evaluation.isSubmitted
|
||
this.isSubmitted = submitted === 1 || submitted === true || submitted === '1'
|
||
console.log('评测完成，评测ID:', this.currentEvaluationId, '提交状态:', this.isSubmitted, '音频路径:', this.currentEvaluationAudioPath)
|
||
uni.showToast({
|
||
title: '评测完成',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
// 刷新历史记录
|
||
this.loadHistory()
|
||
// 滚动到结果区域
|
||
this.$nextTick(() => {
|
||
uni.pageScrollTo({
|
||
selector: '.result-section',
|
||
duration: 300
|
||
})
|
||
})
|
||
} else {
|
||
throw new Error(result.msg || '评测失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('评测失败', error)
|
||
let errorMsg = error.message || '评测失败'
|
||
// 如果是登录相关错误，跳转到登录页
|
||
if (errorMsg.includes('登录') || errorMsg.includes('401')) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: errorMsg,
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: errorMsg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
} finally {
|
||
this.isEvaluating = false
|
||
}
|
||
},
|
||
// 加载历史记录
|
||
async loadHistory() {
|
||
try {
|
||
const result = await getMyVoiceRecords(this.courseId)
|
||
if (result.code === 200 && result.data) {
|
||
this.historyList = result.data || []
|
||
// 如果当前评测ID在历史记录中，更新提交状态和音频路径
|
||
if (this.currentEvaluationId) {
|
||
const currentRecord = this.historyList.find(item => item.id === this.currentEvaluationId)
|
||
if (currentRecord) {
|
||
const submitted = currentRecord.isSubmitted
|
||
this.isSubmitted = submitted === 1 || submitted === true || submitted === '1'
|
||
this.currentEvaluationAudioPath = currentRecord.audioPath || null
|
||
}
|
||
}
|
||
} else {
|
||
console.warn('加载历史记录失败', result.msg)
|
||
}
|
||
} catch (error) {
|
||
console.error('加载历史记录失败', error)
|
||
// 如果是401错误，不显示错误提示（可能是未登录）
|
||
if (!error.message || !error.message.includes('401')) {
|
||
// 静默失败，不打扰用户
|
||
}
|
||
}
|
||
},
|
||
// 查看详情
|
||
viewDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/voice/detail?id=${item.id}`
|
||
})
|
||
},
|
||
// 查看当前评测详情
|
||
viewCurrentDetail() {
|
||
if (this.currentEvaluationId) {
|
||
uni.navigateTo({
|
||
url: `/pages/voice/detail?id=${this.currentEvaluationId}`
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '暂无评测详情',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
// 提交评测
|
||
async submitEvaluation() {
|
||
if (!this.currentEvaluationId) {
|
||
uni.showToast({
|
||
title: '请先完成评测',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (this.isSubmitted) {
|
||
uni.showToast({
|
||
title: '该评测已提交',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 确认提交
|
||
const hasAudio = this.recordPath || this.currentEvaluationAudioPath
|
||
uni.showModal({
|
||
title: '确认提交',
|
||
content: hasAudio ?
|
||
'提交后，管理员将看到您的评测结果和音频文件，是否确认提交？' :
|
||
'提交后，管理员将看到您的评测结果，是否确认提交？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
this.isSubmitting = true
|
||
try {
|
||
// 如果有录音文件，自动上传音频；否则使用已有的音频路径或不上传
|
||
const audioFilePath = this.recordPath || null
|
||
const result = await submitVoiceEvaluation(this.currentEvaluationId, audioFilePath)
|
||
if (result.code === 200) {
|
||
this.isSubmitted = true
|
||
uni.showToast({
|
||
title: audioFilePath ? '提交成功（已上传音频）' : '提交成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
// 刷新历史记录
|
||
this.loadHistory()
|
||
} else {
|
||
throw new Error(result.msg || '提交失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('提交失败', error)
|
||
uni.showToast({
|
||
title: error.message || '提交失败',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
} finally {
|
||
this.isSubmitting = false
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 格式化时间
|
||
formatTime(seconds) {
|
||
const min = Math.floor(seconds / 60)
|
||
const sec = seconds % 60
|
||
return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
|
||
},
|
||
// 格式化日期时间
|
||
formatDateTime(dateTime) {
|
||
if (!dateTime) return ''
|
||
const date = new Date(dateTime)
|
||
const year = date.getFullYear()
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = date.getDate().toString().padStart(2, '0')
|
||
const hour = date.getHours().toString().padStart(2, '0')
|
||
const minute = date.getMinutes().toString().padStart(2, '0')
|
||
return `${year}-${month}-${day} ${hour}:${minute}`
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.voice-evaluation-container {
|
||
padding: 20rpx;
|
||
padding-top: calc(20rpx + 88rpx + env(safe-area-inset-top));
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
padding: 40rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 0 0 20rpx 20rpx;
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
display: block;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.edit-btn, .refresh-btn, .view-detail-btn {
|
||
font-size: 24rpx;
|
||
color: #409eff;
|
||
padding: 8rpx 16rpx;
|
||
border: 1px solid #409eff;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.content-section, .record-section, .result-section, .evaluate-section, .history-section {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.content-text {
|
||
font-size: 30rpx;
|
||
line-height: 1.8;
|
||
color: #333;
|
||
padding: 30rpx;
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
border-radius: 12rpx;
|
||
min-height: 200rpx;
|
||
border-left: 4rpx solid #409eff;
|
||
}
|
||
|
||
.char-count {
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.content-input {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.textarea {
|
||
width: 100%;
|
||
min-height: 200rpx;
|
||
padding: 20rpx;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
border: none;
|
||
padding: 20rpx 40rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.wave-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 120rpx;
|
||
margin: 30rpx 0;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.wave-item {
|
||
width: 8rpx;
|
||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 4rpx;
|
||
transition: height 0.2s;
|
||
}
|
||
|
||
.record-time {
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.time-text {
|
||
font-size: 32rpx;
|
||
color: #f56c6c;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.record-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn-record, .btn-stop, .btn-play, .btn-rerecord {
|
||
padding: 24rpx 40rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 28rpx;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.btn-icon {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.btn-record {
|
||
background-color: #67c23a;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-stop {
|
||
background-color: #f56c6c;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-play {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-rerecord {
|
||
background-color: #909399;
|
||
color: #fff;
|
||
}
|
||
|
||
.result-main-score {
|
||
text-align: center;
|
||
padding: 40rpx 0;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 12rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.main-score-value {
|
||
display: block;
|
||
font-size: 80rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
line-height: 1;
|
||
}
|
||
|
||
.main-score-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.result-scores {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.score-item {
|
||
padding: 24rpx;
|
||
background-color: #f9f9f9;
|
||
border-radius: 12rpx;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.score-progress {
|
||
width: 100%;
|
||
height: 8rpx;
|
||
background-color: #e4e7ed;
|
||
border-radius: 4rpx;
|
||
margin-bottom: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.score-progress-bar {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #67c23a 0%, #85ce61 100%);
|
||
border-radius: 4rpx;
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
.score-label {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.score-value {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #409eff;
|
||
}
|
||
|
||
.btn-evaluate {
|
||
width: 100%;
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
border: none;
|
||
padding: 30rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.history-list {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.history-item {
|
||
padding: 24rpx;
|
||
border-bottom: 1px solid #eee;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.history-left {
|
||
flex: 1;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.history-content {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.history-time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.history-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.history-score {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #409eff;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 40rpx;
|
||
color: #ccc;
|
||
}
|
||
|
||
.empty-tip {
|
||
text-align: center;
|
||
padding: 80rpx 40rpx;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 80rpx;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.submit-status {
|
||
font-size: 24rpx;
|
||
color: #67c23a;
|
||
padding: 8rpx 16rpx;
|
||
background: rgba(103, 194, 58, 0.1);
|
||
border-radius: 20rpx;
|
||
border: 1px solid #67c23a;
|
||
}
|
||
|
||
.submit-section {
|
||
margin-top: 30rpx;
|
||
padding-top: 30rpx;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.btn-submit {
|
||
width: 100%;
|
||
background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
|
||
color: #fff;
|
||
border: none;
|
||
padding: 30rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
box-shadow: 0 4rpx 12rpx rgba(103, 194, 58, 0.3);
|
||
}
|
||
</style>
|
||
|