feat: 中期拍摄-实地取景
This commit is contained in:
songjianyang committed
1 parent
273bed54ff
commit
bc19e929af
31 files changed
+553
-19
No files matched your search
@@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const handleClicka2 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'a-2' })
|
||||
}
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/images/shooting/取景地a合图1.png" alt="" @click="handleClicka2" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const handleClicka3 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'a-3' })
|
||||
}
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/images/shooting/取景地a合图2.png" alt="" @click="handleClicka3" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const handleClicka2 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'a-2' })
|
||||
}
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/images/shooting/取景地a合图3.png" alt="" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script lang="ts" setup>
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleClicka1 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'a-1' })
|
||||
}
|
||||
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.FILMINGLOCATIONA.BG) }"
|
||||
>
|
||||
<div class="start">
|
||||
<img src="@/assets/images/shooting/开始取景.png" alt="" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<img src="@/assets/images/shooting/按钮-开始取景.png" alt="" @click="handleClicka1" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
.shooting-index {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.start {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -29%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
bottom: -56%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const handleClickb2 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'b-2' })
|
||||
}
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/images/shooting/取景地b合图1.png" alt="" @click="handleClickb2" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const handleClickb3 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'b-3' })
|
||||
}
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/images/shooting/取景地b合图2.png" alt="" @click="handleClickb3" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const handleClickb2 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'b-2' })
|
||||
}
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/images/shooting/取景地b合图3.png" alt="" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script lang="ts" setup>
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const handleClickb1 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'b-1' })
|
||||
}
|
||||
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.FILMINGLOCATIONA.BG) }"
|
||||
>
|
||||
<div class="start">
|
||||
<img src="@/assets/images/shooting/开始取景.png" alt="" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<img src="@/assets/images/shooting/按钮-开始取景.png" alt="" @click="handleClickb1" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
.shooting-index {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.start {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -29%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
bottom: -56%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script lang="ts" setup>
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
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 src="@/assets/images/shooting/构图指南.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
.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>
|
||||
Reference in new issue
Block a user