feat: 中期拍摄-实地取景

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>