forked from zhongyidian/super_video
140 lines
3.7 KiB
Vue
140 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
|
import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
|
|
import { ImgButton } from '@/components/Button'
|
|
import { ModuleSwitcher } from './components/ModuleSwitcher'
|
|
import { computed, ref, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
|
|
// 响应式状态
|
|
const status = ref(false)
|
|
const guideShow = ref(false)
|
|
const selectedModule = ref<'vlog' | 'film' | 'interview'>('vlog')
|
|
const isImageLoading = ref(false)
|
|
|
|
// 预加载图片映射
|
|
const imageMap = {
|
|
vlog: IMAGE_PATHS.ACTION.VIDEO1,
|
|
film: IMAGE_PATHS.ACTION.VIDEO3,
|
|
interview: IMAGE_PATHS.ACTION.VIDEO2
|
|
}
|
|
|
|
// 预加载所有图片
|
|
const preloadImages = () => {
|
|
const imageUrls = Object.values(imageMap).map(path => getBackgroundImage(path))
|
|
imageUrls.forEach(url => {
|
|
const img = new Image()
|
|
img.src = url
|
|
})
|
|
}
|
|
|
|
// 事件处理函数
|
|
const handleOpenGuide = () => {
|
|
guideShow.value = true
|
|
}
|
|
|
|
const handleCloseGuide = () => {
|
|
guideShow.value = false
|
|
status.value = true
|
|
}
|
|
|
|
const handleModuleChange = (module: 'vlog' | 'film' | 'interview') => {
|
|
if (selectedModule.value === module) return
|
|
|
|
isImageLoading.value = true
|
|
selectedModule.value = module
|
|
|
|
// 模拟图片加载完成
|
|
setTimeout(() => {
|
|
isImageLoading.value = false
|
|
}, 100)
|
|
}
|
|
|
|
const handleClick = () => {
|
|
router.push({
|
|
//首字母大写
|
|
name: selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1)
|
|
})
|
|
}
|
|
|
|
// 计算属性
|
|
const selectedImage = computed(() => {
|
|
return getBackgroundImage(imageMap[selectedModule.value])
|
|
})
|
|
|
|
const handleSkill = () => {
|
|
router.push({
|
|
name: 'Skill'
|
|
})
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
preloadImages()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full relative">
|
|
<!-- 背景图片 -->
|
|
<div
|
|
:class="['absolute inset-0 bg-cover bg-center bg-no-repeat']"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION_BG) }"
|
|
></div>
|
|
|
|
<!-- 选择模块 -->
|
|
<div :class="['absolute left-0 top-[-140px] inset-0 z-[8] pointer-events-none']">
|
|
<ModuleSwitcher v-model="selectedModule" @change="handleModuleChange" />
|
|
</div>
|
|
|
|
<!-- 电视机 -->
|
|
<div
|
|
class="absolute w-[765px] h-[768px] right-0 top-0 z-[5] transition-all duration-300 hover:scale-105 hover:brightness-110 cursor-pointer"
|
|
:class="{ 'opacity-50': isImageLoading }"
|
|
:style="{ backgroundImage: selectedImage }"
|
|
@click.stop="handleClick"
|
|
></div>
|
|
|
|
<!-- 技能树 按钮 -->
|
|
<ImgButton
|
|
v-if="status"
|
|
@click="handleSkill"
|
|
:image="IMAGE_PATHS.ACTION.SKILLS_BTN"
|
|
class="absolute bottom-0 right-0 z-30"
|
|
/>
|
|
|
|
<!-- 新手指导遮罩 -->
|
|
<div v-if="!status" class="absolute inset-0 bg-black/50 z-10"></div>
|
|
|
|
<!-- 新手指导 -->
|
|
<div
|
|
class="absolute bottom-0 left-0 w-full h-[497px] bg-cover bg-center bg-no-repeat z-20 pointer-events-none"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BTN) }"
|
|
v-if="!guideShow"
|
|
>
|
|
<div
|
|
class="absolute bottom-20 right-[calc(50%-20px)] translate-x-1/2 w-20 h-20 cursor-pointer pointer-events-auto"
|
|
@click="handleOpenGuide"
|
|
></div>
|
|
</div>
|
|
|
|
<div
|
|
class="cursor-pointer absolute bottom-0 left-0 w-full h-[911px] bg-cover bg-center bg-no-repeat z-40"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BG) }"
|
|
v-else
|
|
>
|
|
<ImgButton
|
|
:image="IMAGE_PATHS.ACTION.DOWN"
|
|
class="absolute top-60 right-1/2 translate-x-1/2"
|
|
@click="handleCloseGuide"
|
|
/>
|
|
<img
|
|
class="absolute bottom-0 left-1/2 -translate-x-1/2"
|
|
:src="getStaticImage('home/新手导航')"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|