feat: 对接各个视频数据

src/views/film/script-writing/index.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS, getPublicPath, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { useRouter } from 'vue-router'
+import { ImagePreview } from '@/components'
+import { useScale } from '@/composables/useScale'
+
+const router = useRouter()
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+
+const { scale, offsetX, offsetY } = useScale()
+const handleOpenImages = () => {
+  ImagePreview({
+    images: [getStaticImage('film/脚本编写-拍摄脚本')],
+    startIndex: 0,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+  })
+}
+</script>
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 背景 -->
+    <img class="absolute inset-0" :src="getStaticImage('film/img/背景.png')" alt="" />
+
+    <!-- 标题 -->
+    <img class="absolute top-5 z-10" :src="getStaticImage('film/img/脚本编写-标题.png')" alt="" />
+
+    <!-- 内容 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none]  -->
+    <div class="relative h-full pt-28 overflow-y-scroll">
+      <img :src="getStaticImage('film/img/脚本编写.png')" alt="" />
+
+      <div class="absolute top-60 left-36 w-[1000px] h-[700px] rounded-2xl overflow-hidden">
+        <Video
+          :src="getPublicPath('video/jiaoben.mp4')"
+          playsinline
+          controls
+          :volume="1"
+          :muted="false"
+        />
+      </div>
+
+      <button
+        class="absolute top-[1480px] left-[calc(50%+55px)] -translate-x-1/2 w-[240px] h-[80px]"
+        @click="handleOpenImages"
+      />
+    </div>
+  </div>
+</template>