forked from zhongyidian/super_video
114 lines
4.0 KiB
Vue
114 lines
4.0 KiB
Vue
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router'
|
||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||
import { ImgButton } from '@/components/Button'
|
||
|
||
const router = useRouter()
|
||
|
||
const handleClose = () => {
|
||
router.back()
|
||
}
|
||
|
||
const goTimeLapse = () => {
|
||
router.push({ name: 'FilmOnsiteTimeLapse' })
|
||
}
|
||
|
||
const goSlider = () => {
|
||
router.push({ name: 'FilmOnsiteSlider' })
|
||
}
|
||
|
||
const goSlowShutterDay = () => {
|
||
router.push({ name: 'FilmOnsiteSlowShutterDay' })
|
||
}
|
||
|
||
const goSlowShutterNight = () => {
|
||
router.push({ name: 'FilmOnsiteSlowShutterNight' })
|
||
}
|
||
|
||
const goLowAngle = () => {
|
||
router.push({ name: 'FilmOnsiteLowAngle' })
|
||
}
|
||
|
||
const goRandom = () => {
|
||
router.push({ name: 'FilmOnsiteRandom' })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="relative w-full h-full overflow-hidden">
|
||
<!-- 背景 -->
|
||
<div
|
||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||
></div>
|
||
|
||
<!-- 内容卡片 + 按钮 -->
|
||
<div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
|
||
<div
|
||
class="max-w-screen-2xl w-full bg-black/35 rounded-3xl border border-white/15 p-16 space-y-10 text-white pointer-events-auto"
|
||
>
|
||
<div class="flex items-baseline justify-between gap-6">
|
||
<h1 class="text-5xl font-extrabold tracking-wide">现场拍摄</h1>
|
||
<span class="text-3xl opacity-80">从不同维度练习你的镜头语言</span>
|
||
</div>
|
||
<p class="text-2xl leading-8 opacity-90">
|
||
选择下面任意一个练习模块，进入对应的现场拍摄场景，按提示完成小任务，逐步建立自己的拍摄手感和创作节奏。
|
||
</p>
|
||
|
||
<div class="grid grid-cols-3 gap-10">
|
||
<button type="button" class="onsite-btn" @click="goTimeLapse">
|
||
<span class="onsite-btn-title">延时拍摄</span>
|
||
<span class="onsite-btn-desc">记录时间流动，让平凡场景变得有节奏、有变化。</span>
|
||
</button>
|
||
|
||
<button type="button" class="onsite-btn" @click="goSlider">
|
||
<span class="onsite-btn-title">滑轨拍摄</span>
|
||
<span class="onsite-btn-desc">通过平稳移动镜头，营造空间感和叙事推进感。</span>
|
||
</button>
|
||
|
||
<button type="button" class="onsite-btn" @click="goSlowShutterDay">
|
||
<span class="onsite-btn-title">慢门拍摄 · 白天</span>
|
||
<span class="onsite-btn-desc">在白天环境下练习慢门，营造水流、车流等运动轨迹。</span>
|
||
</button>
|
||
|
||
<button type="button" class="onsite-btn" @click="goSlowShutterNight">
|
||
<span class="onsite-btn-title">慢门拍摄 · 夜晚</span>
|
||
<span class="onsite-btn-desc">利用城市灯光，拍出具有节奏感和氛围感的夜景画面。</span>
|
||
</button>
|
||
|
||
<button type="button" class="onsite-btn" @click="goLowAngle">
|
||
<span class="onsite-btn-title">低角度拍摄</span>
|
||
<span class="onsite-btn-desc">从低视角观察世界，突出主体气势，改变日常视角。</span>
|
||
</button>
|
||
|
||
<button type="button" class="onsite-btn" @click="goRandom">
|
||
<span class="onsite-btn-title">创作随机性</span>
|
||
<span class="onsite-btn-desc">跟随直觉自由取景，捕捉那些意料之外的画面惊喜。</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关闭 -->
|
||
<ImgButton
|
||
class="absolute right-0 top-0 z-20"
|
||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||
@click="handleClose"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.onsite-btn {
|
||
@apply relative flex flex-col items-start backdrop-blur-md rounded-2xl px-10 py-8 text-left bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/30 transition-all duration-200 cursor-pointer;
|
||
}
|
||
|
||
.onsite-btn-title {
|
||
@apply text-4xl font-bold mb-4;
|
||
}
|
||
|
||
.onsite-btn-desc {
|
||
@apply text-2xl leading-9 opacity-80;
|
||
}
|
||
</style>
|