forked from zhongyidian/super_video
141 lines
4.1 KiB
Vue
141 lines
4.1 KiB
Vue
<script lang="tsx" setup>
|
|
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
|
import { ImgButton } from '@/components/Button'
|
|
|
|
import { ref, computed } from 'vue'
|
|
import { ProgressBar } from '@/components'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
import { GuideSteps } from '@/components/Guide'
|
|
const steps = [
|
|
{
|
|
id: 'step1',
|
|
content:
|
|
'引导词：前期准备要做好四件事，【资源筹备】【创意构想】【脚本撰写】【分镜制作】，画面中高亮的按钮是我们可以展开学习的内容。点击进入学习吧！'
|
|
},
|
|
{ id: 'step2', content: '这是主要内容区域的边框' }
|
|
]
|
|
// const selected = ref<WorkTab>('vlog')
|
|
const stepIndex = ref(0)
|
|
const currentHighlight = computed(() =>
|
|
stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
|
|
)
|
|
|
|
const router = useRouter()
|
|
|
|
const currentStep = ref(1)
|
|
|
|
const handleComplete = () => {
|
|
console.log('完成前置条件')
|
|
// 处理完成逻辑
|
|
}
|
|
|
|
const handleStepChange = (step: number) => {
|
|
console.log('步骤变化:', step)
|
|
// 处理步骤变化逻辑
|
|
}
|
|
|
|
const handleWorkClick = () => {
|
|
console.log('任务取景按钮点击')
|
|
// 处理任务取景按钮点击逻辑
|
|
router.push({ name: 'Work' })
|
|
}
|
|
interface SimpleStep {
|
|
id: string
|
|
content: string
|
|
}
|
|
const handleStepChangeGui = (_step: SimpleStep | null, index: number) => {
|
|
stepIndex.value = index
|
|
}
|
|
const highlightShow = ref(true)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full relative">
|
|
<!-- 背景图片-center -->
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
|
|
></div>
|
|
|
|
<!-- 背景图片 -->
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
|
|
></div>
|
|
|
|
<!-- 标题 -->
|
|
<div class="absolute top-2 left-1/2 -translate-x-1/2">
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
|
|
</div>
|
|
|
|
<!-- 任务取景按钮 -->
|
|
<div
|
|
class="absolute left-24 top-24"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
|
|
>
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
|
|
</div>
|
|
<!-- 前期准备底板 -->
|
|
<div v-if="highlightShow" class="absolute right-90 ml-[135px]">
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.PREPARE" />
|
|
</div>
|
|
<!-- 脚本撰写按钮 -->
|
|
<div v-if="highlightShow" class="absolute left-[13%] top-1/3">
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.Scripting" />
|
|
</div>
|
|
<!-- 选中箭头 -->
|
|
<div v-if="highlightShow" class="absolute left-[13%] top-[37%] -translate-x-1/2">
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.SelectArrow" />
|
|
</div>
|
|
<!-- 进度百分比 -->
|
|
<div v-if="highlightShow" class="absolute left-1/2 top-[12%] -translate-x-1/2">
|
|
<div class="flex">
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.Progress" />
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.Four" />
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.Zero" />
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.Percentage" />
|
|
</div>
|
|
</div>
|
|
<!-- 引导任务 -->
|
|
<!-- <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" /> -->
|
|
|
|
<div class="absolute bottom-0 w-full">
|
|
<ProgressBar
|
|
v-if="highlightShow"
|
|
:current-step="currentStep"
|
|
@complete="handleComplete"
|
|
@step-change="handleStepChange"
|
|
/>
|
|
</div>
|
|
<GuideSteps
|
|
:steps="steps"
|
|
:highlight-selector="currentHighlight"
|
|
:highlight-padding="12"
|
|
:highlight-radius="20"
|
|
@step-change="handleStepChangeGui"
|
|
>
|
|
<GuideStepsItem>
|
|
<img src="@/assets/images/midterm/前期准备引导1.png" alt="" />
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
</div>
|
|
<div
|
|
v-if="highlightShow"
|
|
class="absolute right-0 top-0"
|
|
style="z-index: 998; cursor: pointer"
|
|
@click="highlightShow = false"
|
|
>
|
|
<img src="@/assets/images/midterm/叉.png" alt="" />
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.guide-ui {
|
|
top: 80% !important;
|
|
}
|
|
|
|
.dragon-character {
|
|
top: 80% !important;
|
|
}
|
|
</style>
|