89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
<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>
|