feat: 对接各个视频数据
This commit is contained in:
zhongyidian committed
1 parent
6103453e32
commit
6ab98c4764
339 files changed
+17316
-1531
No files matched your search
Whitespace-only changes.
@@ -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>
|
||||
@@ -0,0 +1,178 @@
|
||||
<script lang="tsx" setup>
|
||||
import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ImagePreview } from '@/components'
|
||||
import { useScale } from '@/composables/useScale'
|
||||
import { useVlogStore } from '@/stores'
|
||||
const router = useRouter()
|
||||
const showDoubao = ref(false)
|
||||
const vlog = useVlogStore()
|
||||
const steps = [
|
||||
{ id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
|
||||
{ id: 'step2', content: '这是主要内容区域的边框' }
|
||||
]
|
||||
|
||||
const stepIndex = ref(1)
|
||||
const back = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
vlog.setVlogUnlockProgress(2)
|
||||
router.push({
|
||||
name: 'Vlog'
|
||||
})
|
||||
}
|
||||
|
||||
const { scale, offsetX, offsetY } = useScale()
|
||||
onMounted(() => {
|
||||
ImagePreview({
|
||||
images: [getStaticImage('vlog/脚本切图/我的志愿者手记拍摄脚本.png')],
|
||||
startIndex: 0,
|
||||
maskClosable: true,
|
||||
getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value }),
|
||||
onClose: () => {
|
||||
showDoubao.value = true
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<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>
|
||||
<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
|
||||
v-if="showDoubao"
|
||||
: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>
|
||||
<style lang="less" scoped>
|
||||
.writing-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.doubao .doubao-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.biaoge-x {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 0px;
|
||||
width: 70px;
|
||||
cursor: pointer;
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
.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,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">
|
||||
.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