62 lines
1.7 KiB
Vue
62 lines
1.7 KiB
Vue
<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" scoped>
|
|
.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>
|