forked from zhongyidian/super_video
128 lines
2.7 KiB
Vue
128 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import { IMAGE_PATHS, getStaticImage } 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()">
|
|
<ImgButton :image="hiddenbar ? 'equipment/按钮-展开' : 'equipment/按钮-收缩'" />
|
|
</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>
|