forked from zhongyidian/super_video
65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<script lang="ts" setup>
|
||
import { IMAGE_PATHS, getPublicPath, getStaticImage } from '@/utils'
|
||
import { ImgButton } from '@/components/Button'
|
||
import { Video } from '@/components'
|
||
import { useRouter } from 'vue-router'
|
||
import { ImagePreview } from '@/components'
|
||
import { useScale } from '@/composables/useScale'
|
||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||
|
||
const router = useRouter()
|
||
|
||
const back = () => {
|
||
// 跳转设备准备
|
||
router.back()
|
||
}
|
||
|
||
const { scale, offsetX, offsetY } = useScale()
|
||
const handleOpenImages = () => {
|
||
ImagePreview({
|
||
images: [getStaticImage('film/脚本编写-拍摄脚本')],
|
||
startIndex: 0,
|
||
maskClosable: true,
|
||
getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
|
||
})
|
||
}
|
||
</script>
|
||
<template>
|
||
<div class="relative w-full h-full overflow-hidden">
|
||
<!-- 返回按钮 -->
|
||
<ImgButton
|
||
class="absolute right-0 top-0 z-20"
|
||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||
@click="back"
|
||
/>
|
||
<!-- 背景 -->
|
||
<img class="absolute inset-0" :src="getStaticImage('film/img/背景.png')" alt="" />
|
||
|
||
<!-- 标题 -->
|
||
<img class="absolute top-5 z-10" :src="getStaticImage('film/img/脚本编写-标题.png')" alt="" />
|
||
|
||
<!-- 内容 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] -->
|
||
<div class="relative h-full pt-28 overflow-y-scroll">
|
||
<img :src="getStaticImage('film/img/脚本编写.png')" alt="" />
|
||
|
||
<div class="absolute top-60 left-36 w-[1000px] h-[700px] rounded-2xl overflow-hidden">
|
||
<Video
|
||
:src="getPublicPath('video/jiaoben.mp4')"
|
||
playsinline
|
||
controls
|
||
:volume="1"
|
||
:muted="false"
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
class="absolute top-[1480px] left-[calc(50%+55px)] -translate-x-1/2 w-[240px] h-[80px]"
|
||
@click="handleOpenImages"
|
||
/>
|
||
</div>
|
||
<GuideSteps :visible="true" position-offset-y="85%">
|
||
<GuideStepsItem>这份长图文干货满满，滚动鼠标查看完整内容吧</GuideStepsItem>
|
||
</GuideSteps>
|
||
</div>
|
||
</template>
|