305 lines
9.5 KiB
Vue
305 lines
9.5 KiB
Vue
<script lang="ts" setup>
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||
import { Overlay } from '@/components/Overlay'
|
||
import { ImgButton } from '@/components/Button'
|
||
import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
|
||
import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
|
||
import videoSrc from '/video/新手导航_九种构图法.mp4'
|
||
|
||
type Btn = {
|
||
key: string
|
||
name: string
|
||
image: string
|
||
desc: string
|
||
}
|
||
|
||
const router = useRouter()
|
||
|
||
const showModal = ref(false)
|
||
|
||
const showModal2 = ref(false)
|
||
const showModal3 = ref(false)
|
||
const currentItem = ref<Btn>({
|
||
key: '',
|
||
name: '',
|
||
image: '',
|
||
desc: ''
|
||
})
|
||
|
||
const showBoxLine = ref(false)
|
||
|
||
const btnList = ref<Btn[]>([
|
||
{
|
||
key: '1',
|
||
name: '居中构图',
|
||
image: 'shooting/居中构图底板',
|
||
desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用'
|
||
},
|
||
{
|
||
key: '2',
|
||
name: '三分法构图',
|
||
image: 'shooting/三分法构图底板',
|
||
desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调'
|
||
},
|
||
{
|
||
key: '3',
|
||
name: '对角线构图',
|
||
image: 'shooting/对角线构图底板',
|
||
desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。'
|
||
}
|
||
])
|
||
|
||
const handleModalClose = () => {
|
||
showModal.value = false
|
||
}
|
||
|
||
const handleClick = (item: any) => {
|
||
currentItem.value = item
|
||
showModal2.value = true
|
||
}
|
||
|
||
const handleClickA = () => {
|
||
// 跳转设备准备
|
||
router.push({ name: 'filmingLocation-a' })
|
||
}
|
||
const handleClickB = () => {
|
||
// 跳转设备准备
|
||
router.push({ name: 'filmingLocation-b' })
|
||
}
|
||
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(IMAGE_PATHS.SHOOTING.BG) }"
|
||
>
|
||
<div class="shooting-title">
|
||
<img :src="shootingtitle" alt="" />
|
||
</div>
|
||
<div class="shooting-return">
|
||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||
</div>
|
||
<div class="shooting-left">
|
||
<img src="@/assets/images/shooting/按钮-取景地A.png" alt="" @click="handleClickA" />
|
||
</div>
|
||
<div class="shooting-right">
|
||
<img src="@/assets/images/shooting/按钮-取景地B.png" alt="" @click="handleClickB" />
|
||
</div>
|
||
<div class="shooting-composition">
|
||
<img
|
||
class="mybutton cursor-pointer"
|
||
src="@/assets/images/shooting/构图指南.png"
|
||
alt=""
|
||
@click="showModal = true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引导步骤 -->
|
||
<GuideSteps
|
||
:highlight-selector="'.mybutton'"
|
||
:highlight-padding="12"
|
||
:highlight-radius="20"
|
||
position-offset-y="70%"
|
||
>
|
||
<GuideStepsItem> 在走进拍摄场景之前，我们先来查看一下构图指南。 </GuideStepsItem>
|
||
</GuideSteps>
|
||
|
||
<!-- 保存图片弹窗 -->
|
||
<Overlay
|
||
:visible="showModal"
|
||
:clickable="false"
|
||
:customStyle="{
|
||
backgroundImage: getBackgroundImage('shooting/构图指南底图')
|
||
}"
|
||
customClass="inset-0 bg-cover bg-center bg-no-repeat"
|
||
contentClass="relative w-full h-full"
|
||
>
|
||
<!-- 返回 -->
|
||
<ImgButton
|
||
class="absolute right-0 top-0 z-10"
|
||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||
@click="handleModalClose"
|
||
/>
|
||
|
||
<!-- 新手导航视频 -->
|
||
<ImgButton
|
||
class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2"
|
||
image="shooting/新手导航-视频回顾"
|
||
@click="showModal3 = true"
|
||
/>
|
||
|
||
<div class="absolute top-[30%] right-10">
|
||
<ImgButton
|
||
v-for="item in btnList"
|
||
:key="item.key"
|
||
:image="item.image"
|
||
@click="handleClick(item)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 知识卡片 -->
|
||
<Overlay :visible="showModal2" :clickable="false">
|
||
<div
|
||
class="relative w-[1752px] h-[932px]"
|
||
:style="{
|
||
backgroundImage: getBackgroundImage('shooting/知识卡片底板')
|
||
}"
|
||
>
|
||
<div
|
||
class="absolute top-4 left-1/2 -translate-x-1/2 text-[45px] text-white font-bold tracking-[2px] drop-shadow-[2px_2px_4px_rgba(0,0,139,0.8)]"
|
||
>
|
||
{{ currentItem.name }}
|
||
</div>
|
||
|
||
<div
|
||
class="absolute w-full h-[38px] top-32 left-1/2 -translate-x-1/2 bg-no-repeat bg-center"
|
||
:style="{
|
||
backgroundImage: getBackgroundImage('shooting/文案1')
|
||
}"
|
||
></div>
|
||
|
||
<div
|
||
class="absolute w-[191px] h-[131px] top-[30px] left-[120px] bg-no-repeat bg-center"
|
||
:style="{
|
||
backgroundImage: getBackgroundImage('shooting/示意图-三分法')
|
||
}"
|
||
></div>
|
||
|
||
<div class="absolute top-[calc(50%-30px)] left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||
<ImgButton
|
||
class="absolute right-6 top-6 z-10"
|
||
:image="showBoxLine ? 'shooting/辅助线开' : 'shooting/辅助线关'"
|
||
@click="showBoxLine = !showBoxLine"
|
||
/>
|
||
<div class="relative">
|
||
<img :src="getStaticImage('shooting/图片待定1')" alt="" />
|
||
|
||
<!-- 构图辅助线 -->
|
||
<div v-if="showBoxLine" class="absolute inset-0 pointer-events-none p-[18px]">
|
||
<div class="relative w-full h-full overflow-hidden">
|
||
<!-- 居中构图 - 十字线 -->
|
||
<div v-if="currentItem.key === '1'" class="absolute inset-0">
|
||
<!-- 垂直中心线 -->
|
||
<div
|
||
class="absolute top-0 left-1/2 w-0.5 h-full bg-white opacity-80 -translate-x-1/2"
|
||
></div>
|
||
<!-- 水平中心线 -->
|
||
<div
|
||
class="absolute left-0 top-1/2 w-full h-0.5 bg-white opacity-80 -translate-y-1/2"
|
||
></div>
|
||
</div>
|
||
|
||
<!-- 三分法构图 - 九宫格线 -->
|
||
<div v-else-if="currentItem.key === '2'" class="absolute inset-0">
|
||
<!-- 垂直三分线 -->
|
||
<div
|
||
class="absolute top-0 left-1/3 w-0.5 h-full bg-white opacity-80 -translate-x-1/2"
|
||
></div>
|
||
<div
|
||
class="absolute top-0 left-2/3 w-0.5 h-full bg-white opacity-80 -translate-x-1/2"
|
||
></div>
|
||
<!-- 水平三分线 -->
|
||
<div
|
||
class="absolute left-0 top-1/3 w-full h-0.5 bg-white opacity-80 -translate-y-1/2"
|
||
></div>
|
||
<div
|
||
class="absolute left-0 top-2/3 w-full h-0.5 bg-white opacity-80 -translate-y-1/2"
|
||
></div>
|
||
</div>
|
||
|
||
<!-- 对角线构图 - 对角线 -->
|
||
<div v-else-if="currentItem.key === '3'" class="absolute inset-0">
|
||
<!-- 对角线：从左上到右下 -->
|
||
<div class="absolute top-0 left-0 w-full h-full">
|
||
<div
|
||
class="absolute top-0 left-0 h-0.5 bg-white opacity-80"
|
||
style="width: 141.42%; transform: rotate(33deg); transform-origin: left top"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="absolute w-full px-20 bottom-32 left-1/2 -translate-x-1/2 text-[#395E66] text-3xl font-bold indent-14 leading-[50px]"
|
||
>
|
||
{{ currentItem.desc }}
|
||
</div>
|
||
|
||
<!-- 返回 -->
|
||
<ImgButton
|
||
class="absolute right-2 top-4 translate-x-1/2 -translate-y-1/2 z-10"
|
||
:image="IMAGE_PATHS.COMPONENTS.CLOSE"
|
||
@click="showModal2 = false"
|
||
/>
|
||
</div>
|
||
</Overlay>
|
||
<!-- 视频 -->
|
||
<Overlay :visible="showModal3" :clickable="false">
|
||
<video :src="videoSrc" controls></video>
|
||
<!-- 返回 -->
|
||
<ImgButton
|
||
class="absolute right-0 top-0 z-10"
|
||
:image="IMAGE_PATHS.COMPONENTS.CLOSE"
|
||
@click="showModal3 = false"
|
||
/>
|
||
</Overlay>
|
||
</Overlay>
|
||
</div>
|
||
</template>
|
||
<style lang="less" scoped>
|
||
.shooting-bg {
|
||
position: absolute;
|
||
|
||
.shooting-title {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.shooting-return {
|
||
position: absolute;
|
||
right: -90%;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.shooting-left {
|
||
position: absolute;
|
||
left: 16%;
|
||
top: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.shooting-right {
|
||
position: absolute;
|
||
right: -55%;
|
||
top: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.shooting-composition {
|
||
position: absolute;
|
||
left: 24px;
|
||
bottom: -90%;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style>
|