feat: 增加了脚本编写和后期剪辑
This commit is contained in:
songjianyang committed
1 parent
2c1e534db4
commit
a480498cb3
21 files changed
+858
-10
No files matched your search
@@ -0,0 +1,98 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import ImgButton from '@/components/Button/ImgButton.vue'
|
||||
// import { GuideSteps } from '@/components/Guide'
|
||||
import { IMAGE_PATHS } from '@/utils'
|
||||
const router = useRouter()
|
||||
|
||||
// 导入视频文件
|
||||
import videoadjustmentColor from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_调色.mp4'
|
||||
const videoList = [videoadjustmentColor]
|
||||
|
||||
const videoRef = ref<HTMLVideoElement>()
|
||||
const currentVideoIndex = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
// 确保视频元素加载并自动播放
|
||||
if (videoRef.value) {
|
||||
videoRef.value.src = videoList[currentVideoIndex.value]
|
||||
videoRef.value.load()
|
||||
|
||||
// 尝试自动播放
|
||||
const playPromise = videoRef.value.play()
|
||||
|
||||
if (playPromise !== undefined) {
|
||||
playPromise.catch(error => {
|
||||
// 自动播放失败，可能是浏览器策略阻止，需要用户交互
|
||||
console.log('自动播放被阻止:', error)
|
||||
})
|
||||
}
|
||||
|
||||
// 监听视频结束事件
|
||||
videoRef.value.addEventListener('ended', playNextVideo)
|
||||
}
|
||||
})
|
||||
|
||||
// 播放下一个视频
|
||||
const playNextVideo = () => {
|
||||
if (currentVideoIndex.value < videoList.length - 1) {
|
||||
currentVideoIndex.value++
|
||||
if (videoRef.value) {
|
||||
videoRef.value.src = videoList[currentVideoIndex.value]
|
||||
videoRef.value.load()
|
||||
|
||||
// 自动播放下一个视频
|
||||
const playPromise = videoRef.value.play()
|
||||
|
||||
if (playPromise !== undefined) {
|
||||
playPromise.catch(error => {
|
||||
console.log('自动播放被阻止:', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听当前视频索引变化
|
||||
watch(currentVideoIndex, newIndex => {
|
||||
if (videoRef.value) {
|
||||
videoRef.value.src = videoList[newIndex]
|
||||
videoRef.value.load()
|
||||
}
|
||||
})
|
||||
|
||||
const handleClose = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!--使用动态绑定和ref-->
|
||||
<video
|
||||
ref="videoRef"
|
||||
:src="videoList[currentVideoIndex]"
|
||||
type="video/mp4"
|
||||
controls
|
||||
preload="auto"
|
||||
class="video-player"
|
||||
autoplay
|
||||
>
|
||||
<p>你的浏览器不支持video标签.</p>
|
||||
</video>
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-10"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleClose"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import ImgButton from '@/components/Button/ImgButton.vue'
|
||||
// import { GuideSteps } from '@/components/Guide'
|
||||
import { IMAGE_PATHS } from '@/utils'
|
||||
const router = useRouter()
|
||||
|
||||
// 导入视频文件
|
||||
import videoBasic from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_基础剪辑操作.mp4'
|
||||
import videoSoundeffect from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_音效处理.mp4'
|
||||
import videoPackaging from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_包装（AI+字幕生成与样式调整）.mp4'
|
||||
import videoCopyright from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_版权伦理规范.mp4'
|
||||
const videoList = [videoBasic, videoSoundeffect, videoPackaging, videoCopyright]
|
||||
|
||||
const videoRef = ref<HTMLVideoElement>()
|
||||
const currentVideoIndex = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
// 确保视频元素加载并自动播放
|
||||
if (videoRef.value) {
|
||||
videoRef.value.src = videoList[currentVideoIndex.value]
|
||||
videoRef.value.load()
|
||||
|
||||
// 尝试自动播放
|
||||
const playPromise = videoRef.value.play()
|
||||
|
||||
if (playPromise !== undefined) {
|
||||
playPromise.catch(error => {
|
||||
// 自动播放失败，可能是浏览器策略阻止，需要用户交互
|
||||
console.log('自动播放被阻止:', error)
|
||||
})
|
||||
}
|
||||
|
||||
// 监听视频结束事件
|
||||
videoRef.value.addEventListener('ended', playNextVideo)
|
||||
}
|
||||
})
|
||||
|
||||
// 播放下一个视频
|
||||
const playNextVideo = () => {
|
||||
if (currentVideoIndex.value < videoList.length - 1) {
|
||||
currentVideoIndex.value++
|
||||
if (videoRef.value) {
|
||||
videoRef.value.src = videoList[currentVideoIndex.value]
|
||||
videoRef.value.load()
|
||||
|
||||
// 自动播放下一个视频
|
||||
const playPromise = videoRef.value.play()
|
||||
|
||||
if (playPromise !== undefined) {
|
||||
playPromise.catch(error => {
|
||||
console.log('自动播放被阻止:', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听当前视频索引变化
|
||||
watch(currentVideoIndex, newIndex => {
|
||||
if (videoRef.value) {
|
||||
videoRef.value.src = videoList[newIndex]
|
||||
videoRef.value.load()
|
||||
}
|
||||
})
|
||||
|
||||
const handleClose = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!--使用动态绑定和ref-->
|
||||
<video
|
||||
ref="videoRef"
|
||||
:src="videoList[currentVideoIndex]"
|
||||
type="video/mp4"
|
||||
controls
|
||||
preload="auto"
|
||||
class="video-player"
|
||||
autoplay
|
||||
></video>
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-10"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleClose"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<script lang="tsx" setup>
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { ref } from 'vue'
|
||||
import { ProgressBar } from '@/components'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const currentStep = ref(1)
|
||||
const highlightShow = ref(true)
|
||||
|
||||
const handleComplete = () => {
|
||||
console.log('完成前置条件')
|
||||
}
|
||||
|
||||
const handleStepChange = (step: number) => {
|
||||
console.log('步骤变化:', step)
|
||||
}
|
||||
|
||||
const handleWorkClick = () => {
|
||||
console.log('任务取景按钮点击')
|
||||
router.push({ name: 'Work' })
|
||||
}
|
||||
|
||||
const navigateTo = (routeName: string) => {
|
||||
console.log('任务取景按钮点击')
|
||||
router.push({ name: routeName })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full relative">
|
||||
<!-- 背景图片-center -->
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
|
||||
></div>
|
||||
|
||||
<!-- 背景图片 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
|
||||
></div>
|
||||
|
||||
<!-- 标题 -->
|
||||
<div class="absolute top-2 left-1/2 -translate-x-1/2">
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
|
||||
</div>
|
||||
|
||||
<!-- 任务取景按钮 -->
|
||||
<div
|
||||
class="absolute left-24 top-24"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
|
||||
>
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
|
||||
</div>
|
||||
|
||||
<!-- 中期拍摄底板 -->
|
||||
<div v-if="highlightShow" class="absolute right-90 ml-[135px]" style="z-index: 998">
|
||||
<ImgButton :image="IMAGE_PATHS.AFTEREDITING.MIDTERM" />
|
||||
</div>
|
||||
|
||||
<!-- 进度百分比 -->
|
||||
<div
|
||||
v-if="highlightShow"
|
||||
class="absolute left-1/2 top-[12%] -translate-x-1/2 pointer-events-none"
|
||||
>
|
||||
<div class="flex">
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Progress" />
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Four" />
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Zero" />
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Percentage" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 后期准备按钮文字 -->
|
||||
<div
|
||||
v-if="highlightShow"
|
||||
class="absolute left-[21%] top-[9%] -translate-x-1/2"
|
||||
style="z-index: 998; margin-top: 120px"
|
||||
>
|
||||
<ImgButton
|
||||
:image="IMAGE_PATHS.AFTEREDITING.EDITING"
|
||||
@click="navigateTo('editing')"
|
||||
class="ml-[60px]"
|
||||
/>
|
||||
<ImgButton
|
||||
:image="IMAGE_PATHS.AFTEREDITING.ADJUSTMENTCOLOR"
|
||||
@click="navigateTo('adjustmentColor')"
|
||||
class="ml-[40px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div class="Shadow" v-if="highlightShow">
|
||||
<div>
|
||||
<img src="" alt="" />
|
||||
</div>
|
||||
<img src="@/assets/images/midterm/引导遮罩.png" alt="" />
|
||||
</div>
|
||||
|
||||
<!-- 叉 -->
|
||||
<div
|
||||
v-if="highlightShow"
|
||||
class="absolute right-0 top-0"
|
||||
style="z-index: 998; cursor: pointer"
|
||||
@click="highlightShow = false"
|
||||
>
|
||||
<img src="@/assets/images/midterm/叉.png" alt="" />
|
||||
</div>
|
||||
|
||||
<div v-if="highlightShow" class="absolute bottom-0 w-full bright">
|
||||
<ProgressBar
|
||||
:current-step="currentStep"
|
||||
@complete="handleComplete"
|
||||
@step-change="handleStepChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.Shadow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 997 !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.bright {
|
||||
z-index: 999 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -12,7 +12,9 @@
|
||||
<img src="@/assets/images/equipment/选中按钮.png" alt="" />
|
||||
<img src="@/assets/images/equipment/手机-亮.png" alt="" />
|
||||
</span>
|
||||
<span>手机支架</span>
|
||||
<div>
|
||||
<img src="@/assets/images/equipment/设备列表合图.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备准备按钮 -->
|
||||
<div class="equipment-bt">
|
||||
@@ -67,6 +69,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
|
||||
<!-- 引导步骤 -->
|
||||
<GuideSteps
|
||||
@@ -88,6 +93,14 @@
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
const steps = [
|
||||
{ id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
|
||||
{ id: 'step2', content: '这是主要内容区域的边框' }
|
||||
@@ -206,6 +219,7 @@ const currentHighlight = computed(() =>
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-top: 220px;
|
||||
padding-left: 20px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
|
||||
@@ -2,14 +2,15 @@
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const handleClickb2 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'b-2' })
|
||||
}
|
||||
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
const handleClickb2 = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'b-2' })
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
|
||||
@@ -10,10 +10,14 @@ const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
|
||||
const tiaohouqi = () => {
|
||||
router.push('afterditing')
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/images/shooting/取景地b合图3.png" alt="" />
|
||||
<img src="@/assets/images/shooting/取景地b合图3.png" alt="" @click="tiaohouqi" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
|
||||
@@ -48,6 +48,18 @@ const handleStepChangeGui = (_step: SimpleStep | null, index: number) => {
|
||||
stepIndex.value = index
|
||||
}
|
||||
const highlightShow = ref(true)
|
||||
// const StoryboardButton = ref()
|
||||
const SelectArrowtext = ref('脚本撰写')
|
||||
const ScriptingClick = (routeName: string) => {
|
||||
SelectArrowtext.value = '脚本撰写'
|
||||
router.push({ name: routeName })
|
||||
}
|
||||
const StoryboardClick = (routeName: string) => {
|
||||
SelectArrowtext.value = '分镜制作'
|
||||
router.push({ name: routeName })
|
||||
// IMAGE_PATHS.VLOG.Storyboard
|
||||
// IMAGE_PATHS.VLOG.SelectedStoryboard
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -82,12 +94,37 @@ const highlightShow = ref(true)
|
||||
</div>
|
||||
<!-- 脚本撰写按钮 -->
|
||||
<div v-if="highlightShow" class="absolute left-[13%] top-1/3">
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Scripting" />
|
||||
<ImgButton
|
||||
:image="
|
||||
SelectArrowtext == '脚本撰写'
|
||||
? IMAGE_PATHS.VLOG.SelectedScripting
|
||||
: IMAGE_PATHS.VLOG.Scripting
|
||||
"
|
||||
@click="ScriptingClick('script-writing')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 选中箭头 -->
|
||||
<div v-if="highlightShow" class="absolute left-[13%] top-[37%] -translate-x-1/2">
|
||||
<div
|
||||
v-if="highlightShow"
|
||||
class="absolute left-[13%] top-[37%] -translate-x-1/2"
|
||||
:class="SelectArrowtext == '脚本撰写' ? 'SelectArrow-Scripting' : 'SelectArrow-Storyboard'"
|
||||
>
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.SelectArrow" />
|
||||
</div>
|
||||
|
||||
<!-- 分镜制作 -->
|
||||
<div v-if="highlightShow" class="absolute left-[20%] top-[47%] -translate-x-1/2">
|
||||
<ImgButton
|
||||
:image="
|
||||
SelectArrowtext == '分镜制作'
|
||||
? IMAGE_PATHS.VLOG.SelectedStoryboard
|
||||
: IMAGE_PATHS.VLOG.Storyboard
|
||||
"
|
||||
@click="StoryboardClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 进度百分比 -->
|
||||
<div v-if="highlightShow" class="absolute left-1/2 top-[12%] -translate-x-1/2">
|
||||
<div class="flex">
|
||||
@@ -137,4 +174,16 @@ const highlightShow = ref(true)
|
||||
.dragon-character {
|
||||
top: 80% !important;
|
||||
}
|
||||
|
||||
.SelectArrow-Scripting {
|
||||
position: absolute;
|
||||
left: 13%;
|
||||
top: 37%;
|
||||
}
|
||||
|
||||
.SelectArrow-Storyboard {
|
||||
position: absolute;
|
||||
left: 11%;
|
||||
top: 51%;
|
||||
}
|
||||
</style>
|
||||
Whitespace-only changes.
@@ -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>
|
||||
@@ -0,0 +1,159 @@
|
||||
<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.BIAOGEBG) }"
|
||||
>
|
||||
<div v-if="showDoubao">
|
||||
<div class="writing-title">
|
||||
<img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
|
||||
<img
|
||||
src="@/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png"
|
||||
alt=""
|
||||
class="titletext"
|
||||
/>
|
||||
</div>
|
||||
<div class="doubao" @click="clickdoubao">
|
||||
<img
|
||||
src="@/assets/images/vlog/制作变焦镜/ai脚本视频占位图.png"
|
||||
alt=""
|
||||
class="doubao-img"
|
||||
/>
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="writing-title">
|
||||
<img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
|
||||
<img
|
||||
src="@/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png"
|
||||
alt=""
|
||||
class="titletext"
|
||||
/>
|
||||
</div>
|
||||
<div class="biaogehome" @click="deletebiaoge()">
|
||||
<img
|
||||
src="@/assets/images/vlog/脚本切图/我的志愿者手记拍摄脚本.png"
|
||||
alt=""
|
||||
class="biaoge-img"
|
||||
/>
|
||||
<img src="@/assets/images/midterm/叉.png" alt="" class="biaoge-x" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
||||
</div>
|
||||
</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/components/引导/ai脚本工具引导.png" alt="" />
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="tsx" setup>
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const showDoubao = ref(false)
|
||||
const steps = [
|
||||
{ id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
|
||||
{ id: 'step2', content: '这是主要内容区域的边框' }
|
||||
]
|
||||
|
||||
const stepIndex = ref(1)
|
||||
const back = () => {
|
||||
router.back()
|
||||
}
|
||||
const deletebiaoge = () => {
|
||||
showDoubao.value = true
|
||||
}
|
||||
|
||||
interface SimpleStep {
|
||||
id: string
|
||||
content: string
|
||||
}
|
||||
|
||||
const handleStepChange = (_step: SimpleStep | null, index: number) => {
|
||||
stepIndex.value = index
|
||||
}
|
||||
|
||||
const currentHighlight = computed(() =>
|
||||
stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
|
||||
)
|
||||
|
||||
const clickdoubao = () => {
|
||||
router.push('midterm')
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.writing-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.doubao .doubao-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.biaoge-x {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: 5px;
|
||||
width: 70px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.writing-title {
|
||||
.titledibu {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 30%;
|
||||
}
|
||||
|
||||
.titletext {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.biaogehome {
|
||||
position: absolute;
|
||||
top: 165px;
|
||||
left: 5%;
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
.biaogehome .biaoge-img {
|
||||
height: 896px !important;
|
||||
width: 1800px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<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>
|
||||
<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 { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
import { ref, computed } from 'vue'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
const steps = [
|
||||
{ id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
|
||||
{ id: 'step2', content: '这是主要内容区域的边框' }
|
||||
]
|
||||
|
||||
const stepIndex = ref(0)
|
||||
const hiddenbar = ref(false)
|
||||
const writingtext = ref('撰写格式')
|
||||
const formatClick = () => {
|
||||
writingtext.value = '撰写格式'
|
||||
}
|
||||
const sampleanClick = () => {
|
||||
writingtext.value = '样例展示'
|
||||
router.push({ name: 'sample' })
|
||||
}
|
||||
|
||||
const hiddenbarclick = () => {
|
||||
hiddenbar.value = !hiddenbar.value
|
||||
}
|
||||
|
||||
interface SimpleStep {
|
||||
id: string
|
||||
content: string
|
||||
}
|
||||
|
||||
const handleStepChange = (_step: SimpleStep | null, index: number) => {
|
||||
stepIndex.value = index
|
||||
}
|
||||
|
||||
const currentHighlight = computed(() =>
|
||||
stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
|
||||
)
|
||||
</script>
|
||||
<style lang="less">
|
||||
.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>
|
||||
Reference in new issue
Block a user