You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<template>
|
|
<div class="video-bottom-controls" v-if="visible">
|
|
<div class="detect-progress">
|
|
<div class="progress-info">
|
|
<span>{{ statusText || '检测中...' }}</span>
|
|
<span class="progress-pct">{{ progress.toFixed(1) }}%</span>
|
|
</div>
|
|
<el-progress :percentage="Math.round(progress)" :stroke-width="8" />
|
|
<div class="progress-actions">
|
|
<el-button size="small" :type="paused ? 'warning' : 'info'" @click="$emit('togglePause')" :disabled="ending">
|
|
<el-icon :size="14"><component :is="paused ? 'VideoPlay' : 'VideoPause'" /></el-icon>
|
|
{{ paused ? '恢复处理' : '暂停处理' }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
visible: Boolean,
|
|
progress: { type: Number, default: 0 },
|
|
statusText: String,
|
|
paused: Boolean,
|
|
ending: Boolean
|
|
})
|
|
|
|
defineEmits(['togglePause'])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.video-bottom-controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
padding: 8px 0;
|
|
|
|
.detect-progress {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
|
|
.progress-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
color: $text-secondary;
|
|
|
|
.progress-pct {
|
|
color: $primary-color;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.progress-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
.el-button {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|