feat: 中期拍摄-实地取景

src/router/index.ts

@@ -76,6 +76,78 @@ const routes: RouteRecordRaw[] = [
     meta: {
       title: '脚本准备'
     }
+  },
+  {
+    path: '/shooting',
+    name: 'shooting',
+    component: () => import('@/views/midterm-shooting/shooting/index.vue'),
+    meta: {
+      title: '设备准备'
+    }
+  },
+  {
+    path: '/filmingLocation-a',
+    name: 'filmingLocation-a',
+    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-a/index.vue'),
+    meta: {
+      title: '设备准备'
+    }
+  },
+  {
+    path: '/filmingLocation-b',
+    name: 'filmingLocation-b',
+    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-b/index.vue'),
+    meta: {
+      title: ''
+    }
+  },
+  {
+    path: '/a-1',
+    name: 'a-1',
+    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-a/a-1.vue'),
+    meta: {
+      title: ''
+    }
+  },
+  {
+    path: '/a-2',
+    name: 'a-2',
+    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-a/a-2.vue'),
+    meta: {
+      title: ''
+    }
+  },
+  {
+    path: '/a-3',
+    name: 'a-3',
+    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-a/a-3.vue'),
+    meta: {
+      title: ''
+    }
+  },
+  {
+    path: '/b-1',
+    name: 'b-1',
+    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-b/b-1.vue'),
+    meta: {
+      title: ''
+    }
+  },
+  {
+    path: '/b-2',
+    name: 'b-2',
+    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-b/b-2.vue'),
+    meta: {
+      title: ''
+    }
+  },
+  {
+    path: '/b-3',
+    name: 'b-3',
+    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-b/b-3.vue'),
+    meta: {
+      title: ''
+    }
   }
 ]
 

src/utils/index.ts

@@ -187,5 +187,11 @@ export const IMAGE_PATHS = {
     BG: 'equipment/设备准备-背景',
     SELECT_THE_BUTTON: 'equipment/按钮选中-设备准备',
     NAVIGATION_SIDEBAR: 'equipment/侧边导航栏'
+  },
+  SHOOTING: {
+    BG: 'shooting/实地取景入口背景'
+  },
+  FILMINGLOCATIONA: {
+    BG: 'shooting/取景地模糊背景'
   }
 } as const

src/views/midterm-shooting/equipment/index.vue

@@ -56,13 +56,14 @@
           <div class="plate">
             <img src="@/assets/images/equipment/浮空屏.png" alt="" />
           </div>
+
           <div class="title">
-            <img src="@/assets/images/equipment/标题-安卓小米.png" alt="" />
-            <!-- <img src="@/assets/images/equipment/标题-苹果.png" alt=""> -->
+            <img :src="platetitleList[currentIndex].title" alt="" />
           </div>
+          <div class="plate-content">
             <div class="text">
-            <img src="@/assets/images/equipment/内容-安卓小米.png" alt="" />
-            <!-- <img src="@/assets/images/equipment/内容-苹果.png" alt=""> -->
+              <img :src="platetextList[currentIndex].text" alt="" />
+            </div>
           </div>
         </div>
       </div>
@@ -74,6 +75,7 @@
         :highlight-padding="12"
         :highlight-radius="20"
         @step-change="handleStepChange"
+        position-offset-y="85%"
       >
         <GuideStepsItem>
           <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
@@ -85,9 +87,7 @@
 <script lang="tsx" setup>
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
-
 import { ref, computed } from 'vue'
-
 const steps = [
   { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
   { id: 'step2', content: '这是主要内容区域的边框' }
@@ -101,6 +101,15 @@ const phoneList = ref([
   { phoneImg: '/src/assets/images/equipment/设备-手机2.png' }
 ])
 
+const platetitleList = ref([
+  { title: '/src/assets/images/equipment/标题-苹果.png' },
+  { title: '/src/assets/images/equipment/标题-安卓小米.png' }
+])
+
+const platetextList = ref([
+  { text: '/src/assets/images/equipment/内容-苹果.png' },
+  { text: '/src/assets/images/equipment/内容-安卓小米.png' }
+])
 const hiddenbarclick = () => {
   hiddenbar.value = !hiddenbar.value
 }
@@ -267,23 +276,66 @@ const currentHighlight = computed(() =>
   justify-content: center;
   align-items: center;
 
-  .title {
+  .plate {
     position: absolute;
-    top: 0;
+    top: 30px;
     left: 1200px;
+    width: 600px;
+    /* 调整为你需要的宽度 */
+    height: 1000px;
+    /* 调整为你需要的高度 */
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .plate-content {
+    position: absolute;
+    bottom: 144px;
+    left: 1235px;
+    width: 600px;
+    height: 797px;
+    overflow: hidden;
+    /* 隐藏超出部分 */
+    object-fit: contain;
+
+    // display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    /* 允许垂直滚动 */
+    scrollbar-width: none;
+    /* Firefox隐藏滚动条 */
+    -ms-overflow-style: none;
+    /* IE和Edge隐藏滚动条 */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Chrome, Safari隐藏滚动条 */
+    }
+  }
+
+  .title {
+    // margin-top: 47px;
+    width: 400px;
+    z-index: 2;
+    position: absolute;
+    top: 36px;
+    left: 1304px;
   }
 
   .text {
     position: absolute;
-    top: 74px;
-    left: 1292px;
-    width: 364px;
-  }
+    top: -9px;
+    left: 8px;
+    z-index: 2;
 
-  .plate {
-    position: absolute;
-    top: 0;
-    left: 1200px;
+    img {
+      width: 100%;
+      height: auto;
+    }
   }
 }
 </style>

src/views/midterm-shooting/midterm/index.vue

@@ -27,9 +27,14 @@ const handleWorkClick = () => {
 }
 
 const handleClick = () => {
-  // 处理任务取景按钮点击逻辑
+  // 跳转设备准备
   router.push({ name: 'equipment' })
 }
+const shooting = () => {
+  // 跳转实地取景
+  router.push({ name: 'shooting' })
+}
+
 const highlightShow = ref(true)
 </script>
 
@@ -86,7 +91,7 @@ const highlightShow = ref(true)
         @click="handleClick"
         class="ml-[60px]"
       />
-      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermFraming" class="ml-[40px]" />
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermFraming" @click="shooting" class="ml-[40px]" />
       <ImgButton :image="IMAGE_PATHS.VLOG.MidtermShoot" class="ml-[20px]" />
     </div>
     <!-- 遮罩层 -->

src/views/midterm-shooting/shooting/filmingLocation-a/a-1.vue

@@ -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>

src/views/midterm-shooting/shooting/filmingLocation-a/a-2.vue

@@ -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>

src/views/midterm-shooting/shooting/filmingLocation-a/a-3.vue

@@ -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>

src/views/midterm-shooting/shooting/filmingLocation-a/index.vue

@@ -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>

src/views/midterm-shooting/shooting/filmingLocation-b/b-1.vue

@@ -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>

src/views/midterm-shooting/shooting/filmingLocation-b/b-2.vue

@@ -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>

src/views/midterm-shooting/shooting/filmingLocation-b/b-3.vue

@@ -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>

src/views/midterm-shooting/shooting/filmingLocation-b/index.vue

@@ -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>

src/views/midterm-shooting/shooting/index.vue

@@ -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>