feat: 对接各个视频数据

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

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { ref } from 'vue'
+import sample from './sample.vue'
+import writing from './writing.vue'
+import { useRouter } from 'vue-router'
+import { getStaticImage } from '@/utils'
+
+const router = useRouter()
+
+const writingtext = ref('撰写格式')
+const hiddenbar = ref(false)
+const formatClick = () => {
+  writingtext.value = '撰写格式'
+}
+const sampleanClick = () => {
+  writingtext.value = '样例展示'
+  // router.push({ name: 'sample' })
+}
+
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+</script>
+<template>
+  <div class="relative w-full h-full">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 侧边栏 -->
+    <div
+      :class="[
+        'absolute h-full left-0 top-0 transition-transform duration-300 z-10',
+        hiddenbar ? 'translate-x-[-400px]' : 'translate-x-[0px]'
+      ]"
+    >
+      <img class="absolute inset-0 -z-10" src="@/assets/images/equipment/侧边导航栏.png" alt="" />
+
+      <!-- 脚本撰写 -->
+      <img class="" :src="getStaticImage(IMAGE_PATHS.VLOG.SCRIPTINGTITLE)" />
+
+      <img
+        class="absolute bottom-4 left-6"
+        src="@/assets/images/vlog/制作变焦镜/左边导航栏/ai分镜工具.png"
+        alt=""
+      />
+
+      <div class="absolute left-0 top-36">
+        <ImgButton
+          :image="
+            writingtext == '撰写格式' ? IMAGE_PATHS.VLOG.FORMATLIANG : IMAGE_PATHS.VLOG.FORMATAN
+          "
+          @click="formatClick"
+        />
+        <ImgButton
+          :image="
+            writingtext == '样例展示' ? IMAGE_PATHS.VLOG.SAMPLELANG : IMAGE_PATHS.VLOG.SAMPLEAN
+          "
+          @click="sampleanClick"
+        />
+      </div>
+    </div>
+
+    <div
+      :class="[
+        'absolute transition-transform duration-200  top-1/2 -translate-y-1/2 z-20',
+        hiddenbar ? ' translate-x-[-38px]' : 'absolute translate-x-[270px]'
+      ]"
+      @click="hiddenbarclick()"
+    >
+      <ImgButton :image="hiddenbar ? 'equipment/按钮-展开' : 'equipment/按钮-收缩'" />
+    </div>
+
+    <div class="absolute w-full h-full left-0 top-0">
+      <writing v-if="writingtext == '撰写格式'"></writing>
+      <sample v-else-if="writingtext == '样例展示'"></sample>
+    </div>
+  </div>
+</template>