92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
Vue
<template>
|
|
<!-- 转视频 -->
|
|
<div class="to-video">
|
|
<p class="label">Frames</p>
|
|
<div class="frames">
|
|
<upload-file v-model="data.first_file" tip="First Frame" />
|
|
<upload-file v-model="data.last_file" tip="Last Frame" />
|
|
</div>
|
|
<p class="label">Size</p>
|
|
<pixel-ratio-selection v-model="data.pixelRatio" />
|
|
<div class="label">
|
|
<span>Aspect Ratio</span>
|
|
<span>Time</span>
|
|
</div>
|
|
<div class="select">
|
|
<el-select v-model="data.aspectRatio">
|
|
<el-option v-for="v in aspectRatioList" :key="v" :label="v" :value="v" />
|
|
</el-select>
|
|
<el-select v-model="data.time">
|
|
<el-option v-for="v in timeList" :key="v" :label="v" :value="v" />
|
|
</el-select>
|
|
</div>
|
|
<p class="label">Prompt</p>
|
|
<my-textarea v-model="data.prompt" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import myTextarea from '../tools/my-textarea.vue'
|
|
import uploadFile from '../tools/upload-file.vue'
|
|
import pixelRatioSelection from '../tools/pixel-ratio-selection.vue'
|
|
const aspectRatioList = ref(['720p', '1080p', '1440p', '2160p', '1k', '2k'])
|
|
const timeList = ref(['5s', '10s', '15s', '20s', '30s', '60s'])
|
|
const data = reactive({
|
|
first_file: null,
|
|
last_file: null,
|
|
pixelRatio: '1:1',
|
|
aspectRatio: '720p',
|
|
time: '5s',
|
|
prompt: ''
|
|
})
|
|
|
|
defineExpose({ data })
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.to-video {
|
|
> .frames {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
> .select,
|
|
> div.label {
|
|
display: flex;
|
|
gap: 1.3rem;
|
|
> * {
|
|
flex: 1;
|
|
}
|
|
}
|
|
> .select {
|
|
&:deep(.el-select) {
|
|
--el-select-input-font-size: 1.2rem;
|
|
.el-select__wrapper {
|
|
font-size: 1.2rem;
|
|
min-height: 0;
|
|
height: 2.8rem;
|
|
padding: 0 0.8rem;
|
|
}
|
|
.el-select__selected-item,
|
|
.el-select__input-wrapper,
|
|
.el-select__placeholder {
|
|
line-height: normal;
|
|
}
|
|
.el-select__input {
|
|
height: 2.4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.el-popper{
|
|
.el-select-dropdown{
|
|
li{
|
|
padding-left: 0.8rem;
|
|
height: 3rem;
|
|
line-height: 3rem;;
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|