forked from zhongyidian/super_video
zhongyidianandClaude Opus 4.7
6f289959be
完善新手导航和三大创作模块的视频完成缓存、未完成提示与学习进度计算，确保进度按实际学习资源完成情况更新。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
125 lines
4.1 KiB
Vue
125 lines
4.1 KiB
Vue
<script lang="ts" setup>
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||
import { ImgButton } from '@/components/Button'
|
||
import { getBackgroundImage, getPublicPath } from '@/utils'
|
||
import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
|
||
import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
|
||
import KnowledgeCard from '@/components/KnowledgeCard/KnowledgeCard.vue'
|
||
import CompositionGuide from '@/components/CompositionGuide.vue'
|
||
import { useVlogStore } from '@/stores/modules/vlog'
|
||
|
||
const router = useRouter()
|
||
const vlogStore = useVlogStore()
|
||
const guideKey = 'vlog-shooting-intro'
|
||
const showIntroGuide = ref(!vlogStore.guideShown[guideKey])
|
||
|
||
if (showIntroGuide.value) {
|
||
vlogStore.markGuideShown(guideKey)
|
||
}
|
||
|
||
const showModal = ref(false)
|
||
|
||
const btnList = ref([
|
||
{
|
||
key: '1',
|
||
name: '居中构图',
|
||
btnImage: 'shooting/居中构图底板',
|
||
desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用。',
|
||
images: ['shooting/居中构图1', 'shooting/居中构图2'],
|
||
},
|
||
{
|
||
key: '2',
|
||
name: '三分法构图',
|
||
btnImage: 'shooting/三分法构图底板',
|
||
desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调。',
|
||
images: ['shooting/图片待定1', 'shooting/图片待定2'],
|
||
},
|
||
{
|
||
key: '3',
|
||
name: '对角线构图',
|
||
btnImage: 'shooting/对角线构图底板',
|
||
desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
|
||
images: ['shooting/对角线构图1', 'shooting/对角线构图2'],
|
||
},
|
||
])
|
||
|
||
const handleClickA = () => {
|
||
router.push({ name: 'VlogFilmingLocationA' })
|
||
}
|
||
const handleClickB = () => {
|
||
router.push({ name: 'VlogFilmingLocationB' })
|
||
}
|
||
const back = () => {
|
||
router.back()
|
||
}
|
||
</script>
|
||
<template>
|
||
<div class="shooting-index">
|
||
<!-- 背景图片 -->
|
||
<div
|
||
class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
|
||
:style="{
|
||
backgroundImage: getBackgroundImage('vlog/shooting/实地取景底图'),
|
||
}"
|
||
>
|
||
<div class="absolute top-0 left-0">
|
||
<img
|
||
:src="shootingtitle"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div class="absolute top-0 right-0">
|
||
<ImgButton
|
||
image="shooting/返回.png"
|
||
@click="back"
|
||
/>
|
||
</div>
|
||
|
||
<div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
|
||
<ImgButton
|
||
image="vlog/shooting/热带植物馆-入口.png"
|
||
@click="handleClickA"
|
||
/>
|
||
</div>
|
||
<div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
|
||
<ImgButton
|
||
image="vlog/shooting/沉水栈道-入口.png"
|
||
@click="handleClickB"
|
||
/>
|
||
</div>
|
||
<div class="absolute bottom-4 left-4 btn-1">
|
||
<ImgButton
|
||
image="shooting/构图指南.png"
|
||
@click="showModal = true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引导步骤 -->
|
||
<GuideSteps
|
||
v-if="showIntroGuide"
|
||
:highlight-selector="'.shooting-composition-btn'"
|
||
:highlight-padding="12"
|
||
:highlight-radius="20"
|
||
position-offset-y="60%"
|
||
>
|
||
<GuideStepsItem :audio-src="getPublicPath('audio/py_2_014.MP3')">
|
||
在走进拍摄场景之前，我们先来回顾一下三种常见的构图方法。
|
||
</GuideStepsItem>
|
||
</GuideSteps>
|
||
|
||
<!-- 构图指南弹窗 -->
|
||
<CompositionGuide
|
||
:visible="showModal"
|
||
bg-image="shooting/构图指南底图"
|
||
:btn-list="btnList"
|
||
:knowledge-card-component="KnowledgeCard"
|
||
:video-src="videoSrc"
|
||
@close="showModal = false"
|
||
/>
|
||
</div>
|
||
</template>
|