forked from zhongyidian/super_video
zhongyidianandClaude Opus 4.7
1f8723aabd
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
110 lines
2.7 KiB
Vue
110 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import { nextTick, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import ImgButton from '@/components/Button/ImgButton.vue'
|
|
import StepNavigation from '@/components/Guide/StepNavigation.vue'
|
|
import { IMAGE_PATHS } from '@/utils'
|
|
import { Video } from '@/components'
|
|
|
|
const router = useRouter()
|
|
|
|
import videoBasic from '/video/vlog_zhizuobianjiaojing_jichujianji.mp4'
|
|
import videoSoundeffect from '/video/vlog_renwuqujing_yingxiaochuli.mp4'
|
|
import videoPackaging from '/video/vlog_renwuqujing_baozhuang.mp4'
|
|
import videoCopyright from '/video/vlog_renwuqujing_banquanguifan.mp4'
|
|
const videoList = [videoBasic, videoSoundeffect, videoPackaging, videoCopyright]
|
|
|
|
const navigationSteps = [
|
|
{
|
|
id: 'step1',
|
|
label: '后期制作',
|
|
content: '声画剪辑流程',
|
|
type: 'post' as const,
|
|
},
|
|
{
|
|
id: 'step2',
|
|
label: '后期制作',
|
|
content: 'J-cut/L-cut运用',
|
|
type: 'post' as const,
|
|
},
|
|
{
|
|
id: 'step3',
|
|
label: '后期制作',
|
|
content: '【Q3】节奏剪辑技巧',
|
|
type: 'post' as const,
|
|
},
|
|
]
|
|
|
|
const currentVideoIndex = ref(0)
|
|
const playing = ref(false)
|
|
const showStepNavigation = ref(false)
|
|
|
|
const playNextVideo = () => {
|
|
if (currentVideoIndex.value >= videoList.length - 1) {
|
|
playing.value = false
|
|
return
|
|
}
|
|
|
|
currentVideoIndex.value++
|
|
nextTick(() => {
|
|
playing.value = true
|
|
})
|
|
}
|
|
|
|
const handleStepClick = (index: number) => {
|
|
currentVideoIndex.value = index
|
|
// showStepNavigation.value = false
|
|
nextTick(() => {
|
|
playing.value = true
|
|
})
|
|
}
|
|
|
|
const handleClose = () => {
|
|
router.back()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative w-full h-full overflow-hidden bg-black">
|
|
<Video
|
|
:src="videoList[currentVideoIndex]"
|
|
v-model="playing"
|
|
:muted="false"
|
|
:volume="1"
|
|
@ended="playNextVideo"
|
|
/>
|
|
<ImgButton
|
|
class="absolute right-0 top-0 z-10"
|
|
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
|
@click="handleClose"
|
|
/>
|
|
<button
|
|
class="absolute right-4 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500"
|
|
title="步骤导航"
|
|
@click="showStepNavigation = true"
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M3 4H17M3 8H17M3 12H17M3 16H17"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<StepNavigation
|
|
:visible="showStepNavigation"
|
|
:background-image="''"
|
|
:steps="navigationSteps"
|
|
:current-step-index="currentVideoIndex"
|
|
@step-click="handleStepClick"
|
|
@close="showStepNavigation = false"
|
|
/>
|
|
</div>
|
|
</template>
|