feat: 对接各个视频数据

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="writing-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat writing-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.SCRIPTING) }"
+    >
+      <div class="geshi-title">
+        <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+        <img
+          src="@/assets/images/vlog/制作变焦镜/文字标题/脚本的概念和基本要素.png"
+          alt=""
+          class="titletext"
+        />
+      </div>
+      <video :src="fourth" controls></video>
+      <!-- <div class="shooting-return">
+        <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+      </div> -->
+      <!-- 引导步骤 -->
+      <!-- <GuideSteps :steps="steps" :highlight-selector="currentHighlight" :highlight-padding="12"
+                :highlight-radius="20" @step-change="handleStepChange" position-offset-y="85%" hidden:false>
+                <GuideStepsItem>
+                    <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
+                </GuideStepsItem>
+            </GuideSteps> -->
+    </div>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
+</script>
+<style lang="less" scoped>
+.writing-index {
+  width: 100%;
+  height: 100%;
+}
+
+.geshi-title {
+  .titledibu {
+    position: absolute;
+    top: 17px;
+    left: 30%;
+  }
+
+  .titletext {
+    position: absolute;
+    top: 30px;
+    left: 45%;
+  }
+}
+
+.shooting-return {
+  position: absolute;
+  right: -90%;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>