feat: 对接各个视频数据

src/views/vlog/midterm-shooting/on-site/slow-shutter-night.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+      <div
+        class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
+      >
+        <h1 class="text-4xl font-extrabold tracking-wide">慢门拍摄 · 夜晚</h1>
+        <p class="text-lg leading-8 opacity-90">
+          在夜晚的城市路口、桥上或高处，尝试记录车流灯轨、行人轨迹等富有节奏感的光线运动。
+        </p>
+        <p class="text-base leading-7 opacity-80">
+          建议：寻找安全稳定的拍摄点，将设备固定好，控制好曝光时间与
+          ISO，避免过度抖动，让光轨清晰流畅。
+        </p>
+      </div>
+    </div>
+
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>