feat: 增加了脚本编写和后期剪辑

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

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+import sample from './sample.vue'
+import writing from './writing.vue'
+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
+}
+</script>
+<template>
+  <div class="writing-bar">
+    <img src="@/assets/images/equipment/侧边导航栏.png" alt="" :hidden="hiddenbar" />
+    <div class="writing-item" :hidden="hiddenbar">
+      <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"
+      />
+      <img
+        class="writing-ai"
+        src="@/assets/images/vlog/制作变焦镜/左边导航栏/ai分镜工具.png"
+        alt=""
+      />
+    </div>
+    <!-- 设备准备按钮 -->
+    <div class="writing-bt">
+      <ImgButton :image="IMAGE_PATHS.VLOG.SCRIPTINGTITLE" />
+    </div>
+    <div :class="hiddenbar ? 'writing-unfold1' : 'writing-unfold2'" @click="hiddenbarclick()">
+      <img
+        :src="
+          hiddenbar
+            ? '/src/assets/images/equipment/按钮-展开.png'
+            : '/src/assets/images/equipment/按钮-收缩.png'
+        "
+        alt=""
+      />
+    </div>
+  </div>
+
+  <writing v-if="writingtext == '撰写格式'"></writing>
+  <sample v-else-if="writingtext == '样例展示'"></sample>
+</template>
+<style lang="less">
+.writing-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  .writing-bt {
+    position: absolute;
+    top: 0;
+    left: -34px;
+    width: 476px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .writing-unfold1 {
+    position: absolute;
+    top: 490px;
+    left: -41px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .writing-unfold2 {
+    position: absolute;
+    top: 490px;
+    left: 268px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .writing-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 220px;
+    padding-left: 20px;
+
+    span {
+      display: flex;
+    }
+  }
+
+  .guide-ui {
+    top: 80% !important;
+  }
+
+  .dragon-character {
+    top: 80% !important;
+  }
+
+  .writing-ai {
+    position: absolute;
+    bottom: -600px;
+    left: 10px;
+    // width: 100%;
+  }
+}
+</style>