91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<template>
|
|
<div class="app">
|
|
<div class="left-panel">
|
|
<VideoLeft ref="videoLeftRef" @task-created="handleTaskCreated" />
|
|
</div>
|
|
<div class="right-panel">
|
|
<RightResult ref="rightResultRef" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang='ts'>
|
|
import { ref } from 'vue';
|
|
import VideoLeft from '@/components/video/VideoLeft.vue';
|
|
import RightResult from '@/components/RightResult/RightResult.vue';
|
|
|
|
const videoLeftRef = ref<InstanceType<typeof VideoLeft> | null>(null);
|
|
const rightResultRef = ref<InstanceType<typeof RightResult> | null>(null);
|
|
|
|
// 处理任务创建事件，刷新任务列表
|
|
const handleTaskCreated = (taskid: string) => {
|
|
console.log('=== 任务创建事件被触发 ===');
|
|
console.log('taskid:', taskid);
|
|
console.log('rightResultRef.value:', rightResultRef.value);
|
|
console.log('refreshTaskList 方法:', rightResultRef.value?.refreshTaskList);
|
|
|
|
if (rightResultRef.value && typeof rightResultRef.value.refreshTaskList === 'function') {
|
|
console.log('开始刷新任务列表...');
|
|
rightResultRef.value.refreshTaskList();
|
|
console.log('任务列表刷新完成');
|
|
} else {
|
|
console.error('refreshTaskList 方法不存在或不可用');
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
:deep(.el-card__body){
|
|
padding: 0 !important;
|
|
}
|
|
/* 禁止页面滚动，并占满全屏 */
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app {
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
gap: 12px;
|
|
}
|
|
|
|
.left-panel {
|
|
width: 35%; /* 与 leftBox 宽度一致 */
|
|
height: 100%;
|
|
overflow-y: auto; /* 让左侧区域独立滚动 */
|
|
&::-webkit-scrollbar {
|
|
// 滚动条宽度（垂直滚动条）/ 高度（水平滚动条）
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
// 轨道背景色
|
|
background: #0F0F19;
|
|
// 轨道圆角
|
|
border-radius: 3px;
|
|
}
|
|
|
|
// ========== 滚动条滑块样式 ==========
|
|
&::-webkit-scrollbar-thumb {
|
|
// 滑块背景色
|
|
background: #0F0F19;
|
|
// 滑块圆角
|
|
border-radius: 3px;
|
|
// 鼠标悬浮时的样式
|
|
&:hover {
|
|
background: #0F0F19;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-panel {
|
|
flex: 1;
|
|
height: 100%;
|
|
/* 如果右边不需要滚动，就不加 overflow */
|
|
}
|
|
</style>
|
|
|