zhongyidianandClaude Opus 4.7
6f289959be
完善新手导航和三大创作模块的视频完成缓存、未完成提示与学习进度计算，确保进度按实际学习资源完成情况更新。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
124 lines
4.2 KiB
Vue
124 lines
4.2 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/InterviewKnowledgeCard.vue'
|
||
import CompositionGuide from '@/components/CompositionGuide.vue'
|
||
import { useInterviewStore } from '@/stores/modules/interview'
|
||
|
||
const router = useRouter()
|
||
const interviewStore = useInterviewStore()
|
||
const guideKey = 'interview-shooting-intro'
|
||
const showIntroGuide = ref(!interviewStore.guideShown[guideKey])
|
||
|
||
if (showIntroGuide.value) {
|
||
interviewStore.markGuideShown(guideKey)
|
||
}
|
||
|
||
const showModal = ref(false)
|
||
|
||
const btnList = ref([
|
||
{
|
||
key: '1',
|
||
name: '前景构图',
|
||
btnImage: 'interview/composition/前景构图',
|
||
desc: '前景构图就是在拍摄前选择一个物体作为前景，通常会将前景虚化，通过前景和主体的虚实对比突出主体，前景构图可以增加画面的层次感和信息量。',
|
||
images: ['interview/composition/前景1', 'interview/composition/前景2'],
|
||
},
|
||
{
|
||
key: '2',
|
||
name: '留白构图',
|
||
btnImage: 'interview/composition/留白构图',
|
||
desc: '留白构图法也可以称为大构图，借用了中国书法、绘画的留白概念，简单来说就是给画面做减法，减少主体在画面中的占比，会让画面更加的干净并且能更加突出主体，会让照片更有故事感。',
|
||
images: ['interview/composition/留白1', 'interview/composition/留白2'],
|
||
},
|
||
{
|
||
key: '3',
|
||
name: '三角构图',
|
||
btnImage: 'interview/composition/三角构图',
|
||
desc: '分为正三角形、倒三角和斜三角形，这种构图具有一种极强的稳定感和向上的冲击力，也是人像摄影中一种典型的构图形式，拍摄时可利用人物主体的肢体或动作姿态来组合构成三角形。',
|
||
images: ['interview/composition/三角1', 'interview/composition/三角2'],
|
||
},
|
||
])
|
||
|
||
const handleClickA = () => {
|
||
router.push({ name: 'InterviewFilmingLocationA' })
|
||
}
|
||
const handleClickB = () => {
|
||
router.push({ name: 'InterviewFilmingLocationB' })
|
||
}
|
||
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('interview/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="interview/shooting/操场-入口.png"
|
||
@click="handleClickA"
|
||
/>
|
||
</div>
|
||
<div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
|
||
<ImgButton
|
||
image="interview/shooting/教学楼-入口.png"
|
||
@click="handleClickB"
|
||
/>
|
||
</div>
|
||
<div class="absolute bottom-4 left-4 btn-1">
|
||
<ImgButton
|
||
class="mybutton"
|
||
image="shooting/构图指南.png"
|
||
@click="showModal = true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引导步骤 -->
|
||
<GuideSteps
|
||
v-if="showIntroGuide"
|
||
:highlight-selector="'.mybutton'"
|
||
:highlight-padding="12"
|
||
:highlight-radius="20"
|
||
position-offset-y="30%"
|
||
>
|
||
<GuideStepsItem :audio-src="getPublicPath('audio/py_3_009.MP3')">
|
||
同一个地点，站位不同、构图不同，画面质感就完全不同。
|
||
</GuideStepsItem>
|
||
</GuideSteps>
|
||
|
||
<!-- 构图指南弹窗 -->
|
||
<CompositionGuide
|
||
:visible="showModal"
|
||
bg-image="interview/shooting/访谈-构图指南底图"
|
||
:btn-list="btnList"
|
||
:knowledge-card-component="KnowledgeCard"
|
||
:video-src="videoSrc"
|
||
@close="showModal = false"
|
||
/>
|
||
</div>
|
||
</template>
|