Skip to content

Y
yaoai-video
Commit 6653de75 authored by 黄同智's avatar 黄同智
Browse files
Options

写内部弹窗，视频查看，内部的交互

parent 5c22d17c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 676 additions and 101 deletions
doc/h5/src/components/Aside.vue
View file @ 6653de75
......@@ -89,7 +89,7 @@ watch(
() => route.path,
(path) => {
indexvalue.value = routeIndexMap[path] ?? 0;
isShow.value = !!routeIndexMap[path]
isShow.value = !!routeIndexMap[path] || path === '/'
},
{ immediate: true }
);
......
doc/h5/src/static/styles/common.scss
View file @ 6653de75
......@@ -660,7 +660,6 @@ $numbers: (
}
.text-over-1 {
width: 200px;
/* 必须设置宽度 */
white-space: nowrap;
/* 强制文本不换行 */
......@@ -691,7 +690,7 @@ $numbers: (
.el-dialog {
position: relative;
border-radius: 14px;
border-radius: 18px;
&::before {
content: '';
......
doc/h5/src/views/project/components/AiEditModal.vue 0 → 100644
View file @ 6653de75
<template>
<el-dialog v-model="visible" width="1200" align-center>
<template #header="{ close, titleId, titleClass }">
<div class="flex-align-center justify-between gap-8 mb-10">
<span class="fs-18">{{ title }}</span>
<el-button type="primary">确认{{ modalType === 1 ? '角色' : modalType === 2 ? '场景' : '道具' }}</el-button>
</div>
</template>
<div class="pb-10">
<div class="mb-10 fs-12">当前主图</div>
<div class="rounded-10 h-400 flex-center" style="background-color: #f9fafb;">
<img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
class="h-b100 img rounded-10" alt="">
</div>
<div class="mt-20 editbox pt-20 h-200">
<RichTextEditor style="width: 768px;" class="mx-auto"/>
</div>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import RichTextEditor from './RichTextEditor.vue'
const props = defineProps({
title: {
type: String,
default: '新增',
},
})
const visible = ref(false)
const imageUrl = ref('')
const modalType = ref(1) // 1:角色 2:场景 3:道具
const open = (val: number) => {
modalType.value = val
visible.value = true
}
const close = () => {
visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.cirir {
border: 1px solid #ccc;
}
.avatar-uploader {
width: 100%;
:deep(.el-upload) {
border: 2px dashed #ddd;
width: 100%;
height: 240px;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s;
&:hover {
border-color: #c5c5c5;
}
}
}
.editbox {
border-top: 1px solid #ddd;
}
</style>
\ No newline at end of file
doc/h5/src/views/project/components/BatchModal.vue 0 → 100644
View file @ 6653de75
<template>
<el-dialog v-model="visible" width="700" align-center>
<template #header="{ close, titleId, titleClass }">
<div class="flex-align-center gap-8 mb-10">
<div class="cirir flex-center w-48 h-48 rounded-8">
<svg t="1779679636879" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="19134" width="24" height="24">
<path
d="M296.533333 712.832a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538666a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 768a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 0 1 0-85.333333h469.333333zM296.533333 414.165333a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538667a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165334a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 469.333333a42.666667 42.666667 0 0 1 0 85.333334H426.666667a42.666667 42.666667 0 0 1 0-85.333334h469.333333zM296.533333 115.498667a42.666667 42.666667 0 0 1 0 60.330666L205.994667 266.368a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333A42.666667 42.666667 0 0 1 175.829333 175.786667l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 170.666667a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 1 1 0-85.333333h469.333333z"
fill="#3f3f51" p-id="19135"></path>
</svg>
</div>
<span class="fs-18">批量生成</span>
</div>
</template>
<template #footer>
<div class="flex-between-center gap-8">
<el-button @click="close">全选</el-button>
<div>
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="close">
<svg t="1779335788481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="9953" width="20" height="20">
<path
d="M408.8832 353.9968c40.7552-87.1424 61.0304-130.7648 92.7744-136.192a61.44 61.44 0 0 1 20.6848 0c31.744 5.4272 52.0192 49.0496 92.7744 136.192 7.8848 16.9984 11.8784 25.6 18.0224 32.3584a61.44 61.44 0 0 0 4.5056 4.5056c6.8608 6.144 15.36 10.1376 32.3584 18.0224 87.1424 40.7552 130.7648 61.0304 136.192 92.7744a61.44 61.44 0 0 1 0 20.6848c-5.4272 31.744-49.0496 52.0192-136.192 92.7744-16.9984 7.8848-25.6 11.8784-32.3584 18.0224a61.44 61.44 0 0 0-4.5056 4.5056c-6.144 6.8608-10.1376 15.36-18.0224 32.3584-40.7552 87.1424-61.0304 130.7648-92.7744 136.192a61.44 61.44 0 0 1-20.6848 0c-31.744-5.4272-52.0192-49.0496-92.7744-136.192-7.8848-16.9984-11.8784-25.6-18.0224-32.3584a61.44 61.44 0 0 0-4.5056-4.5056c-6.8608-6.144-15.36-10.1376-32.3584-18.0224-87.1424-40.7552-130.7648-61.0304-136.192-92.7744a61.44 61.44 0 0 1 0-20.6848c5.4272-31.744 49.0496-52.0192 136.192-92.7744 16.9984-7.8848 25.6-11.8784 32.3584-18.0224a61.44 61.44 0 0 0 4.5056-4.5056c6.144-6.8608 10.1376-15.36 18.0224-32.3584z"
p-id="9954" fill="#ffffff"></path>
</svg>876
</el-button>
</div>
</div>
</template>
<div>
<el-checkbox-group v-model="checkList" class="w-b100 flex flex-wrap gap-10">
<el-checkbox value="Value A" v-for="(item, index) in checkList" :key="index" class="itemrr rounded-8 p-10"
disabled>
<div class="flex opacity">
<img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
class="w-40 h-40 rounded-6" />
<div class="ml-10 flex-1 flex flex-col">
<div class="flex-between-center text-333">
<span>林喜爱</span>
<div class="fs-12 text-over-1 w-140 px-10 py-4 rounded-40 tiptest" title="已完成设定，不支持批量生成">已完成设定，不支持批量生成
</div>
</div>
<div class="mt-10 fs-12 text-over-1 text-888" style="width: 230px">
便利店店员：细心，粗心细心，粗心细心，粗心细心，粗心细心，粗心
</div>
</div>
</div>
</el-checkbox>
</el-checkbox-group>
<div class="h-400 flex-center flex-col" v-if="checkList.length == 0">
<svg t="1779342435411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="25486" width="64" height="64">
<path
d="M625.777778 0l341.333333 307.2v648.931556c0 37.432889-33.792 67.868444-75.320889 67.868444H132.209778C90.680889 1024 56.888889 993.564444 56.888889 956.131556V67.868444C56.888889 30.435556 90.680889 0 132.209778 0H625.777778zM476.728889 747.52h-11.491556a52.337778 52.337778 0 0 0-51.768889 52.906667c0 29.240889 23.153778 52.906667 51.768889 52.906666h11.548445a52.337778 52.337778 0 0 0 51.768889-52.906666 52.337778 52.337778 0 0 0-51.768889-52.906667zM459.377778 341.333333c-30.151111 0-57.287111 4.892444-80.497778 14.620445a147.342222 147.342222 0 0 0-55.694222 39.879111c-45.795556 53.134222-38.684444 122.026667-37.717334 129.706667a47.616 47.616 0 0 0 53.020445 41.927111 48.241778 48.241778 0 0 0 41.073778-54.215111c0-0.284444-2.844444-32.881778 14.791111-53.361778 12.401778-14.392889 34.304-21.617778 65.024-21.617778 34.702222 0 57.059556 8.817778 66.503111 26.225778a44.600889 44.600889 0 0 1-3.982222 47.616l-93.184 125.383111a49.152 49.152 0 0 0 9.102222 67.868444 46.535111 46.535111 0 0 0 66.446222-9.272889l93.184-125.383111a143.246222 143.246222 0 0 0 11.377778-153.144889C590.051556 382.805333 548.807111 341.333333 459.377778 341.333333z"
fill="#e6e6e6" p-id="25487"></path>
<path
d="M941.852444 276.48L628.280889 0v217.941333c0 32.711111 29.354667 58.481778 62.236444 58.481778l251.335111 0.056889z"
fill="#e6e6e6" fill-opacity=".5" p-id="25488"></path>
</svg>
<div class="text-888 mt-10">暂无数据</div>
</div>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(false)
const modalType = ref(1) // 1:角色 2:场景 3:道具
const open = (val: number) => {
modalType.value = val
visible.value = true
}
const close = () => {
visible.value = false
}
const checkList = ref([])
defineExpose({ open })
</script>
<style lang="scss" scoped>
.cirir {
border: 1px solid #ccc;
}
.active {
background: #fff;
border-radius: 8px;
}
.itemrr {
flex: 0 0 calc(50% - 5px);
border: 2px solid #eee;
width: 100%;
.tiptest {
color: #ecb132;
background-color: #fff6e2;
}
}
:deep(.el-checkbox) {
height: auto;
margin-right: 0;
&.is-disabled {
.opacity {
opacity: 0.5;
}
}
}
</style>
\ No newline at end of file
doc/h5/src/views/project/components/RoleModal.vue → doc/h5/src/views/project/components/DepotModal.vue
View file @ 6653de75
......@@ -32,13 +32,6 @@
</div>
</div>
</div>
<!-- <template #footer>
<div class="flex-align-center justify-end gap-8">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="close"></el-button>
</div>
</template> -->
</el-dialog>
</template>
<script setup lang="ts">
......
doc/h5/src/views/project/components/EditModal.vue
View file @ 6653de75
......@@ -10,7 +10,7 @@
</template>
<template #footer>
<div class="flex-align-center justify-end gap-8">
<div class="flex-align-center justify-end">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="close">
<svg t="1779335788481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
......@@ -128,20 +128,20 @@
</el-upload>
</el-form-item>
<el-form-item v-if="xxType === 1" label="提示词" prop="name">
<el-input type="textarea" rows="4" v-model="ruleForm.name" placeholder="提示词" />
<el-input type="textarea" :rows="4" v-model="ruleForm.name" placeholder="提示词" />
</el-form-item>
<el-form-item :label="modalType === 1 ? '角色描述' : modalType === 2 ? '场景描述' : '道具描述'">
<el-input type="textarea" rows="4" v-model="ruleForm.name" placeholder="请输入描述" />
<el-input type="textarea" :rows="4" v-model="ruleForm.name" placeholder="请输入描述" />
</el-form-item>
</el-form>
</section>
</el-dialog>
<RoleModal ref="roleModalRef" :title="depotTitle" />
<DepotModal ref="depotModalRef" :title="depotTitle" />
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import RoleModal from './RoleModal.vue';
import { Plus } from '@element-plus/icons-vue'
import DepotModal from './DepotModal.vue';
import IconType from './IconType.vue';
const props = defineProps({
......@@ -164,7 +164,7 @@ const rules = reactive<any>({
],
})
const visible = ref(true)
const visible = ref(false)
const open = (n: number) => {
modalType.value = n
visible.value = true
......@@ -174,11 +174,11 @@ const close = () => {
}
// 从资产库 中选择
const roleModalRef = ref<any>()
const depotModalRef = ref<any>()
const depotTitle = ref('')
const openRoleModal = () => {
depotTitle.value = modalType.value === 1 ? '角色库' : modalType.value === 2 ? '场景库' : '道具库'
roleModalRef.value.open(modalType.value)
depotModalRef.value.open(modalType.value)
}
......@@ -208,8 +208,6 @@ const togglePlay = () => {
}
</script>
<style lang="scss">
.el-popover.el-popper {
border-radius: 16px;
}
......
doc/h5/src/views/project/components/LocalUploadModal.vue 0 → 100644
View file @ 6653de75
<template>
<el-dialog v-model="visible" width="600">
<template #header="{ close, titleId, titleClass }">
<div class="flex-align-center gap-8 mb-10">
<div class="cirir flex-center w-48 h-48 rounded-8">
<IconType :modalType="modalType" />
</div>
<span class="fs-18">{{ title }}选择</span>
</div>
</template>
<template #footer>
<div class="flex-align-center justify-end">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="close">确定</el-button>
</div>
</template>
<el-upload class="avatar-uploader mt-20" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:show-file-list="false">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<div v-else class="flex-center flex-col line-h24 fs-12">
<el-icon size="20">
<Plus />
</el-icon>
<span class="mt-10 text-333"> 点击或拖拽图片到此处上传 </span>
<span>仅支持 JPG, PNG 格式</span>
<span>最大文件限制在 20MB 内</span>
</div>
</el-upload>
<div class="text-center mt-20 mb-40">支持 JPG、PNG 格式，单个文件不超过 20MB</div>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import IconType from './IconType.vue';
const props = defineProps({
title: {
type: String,
default: '新增',
},
})
const visible = ref(false)
const imageUrl = ref('')
const modalType = ref(1) // 1:角色 2:场景 3:道具
const open = (val: number) => {
modalType.value = val
visible.value = true
}
const close = () => {
visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.cirir {
border: 1px solid #ccc;
}
.avatar-uploader {
width: 100%;
:deep(.el-upload) {
border: 2px dashed #ddd;
width: 100%;
height: 240px;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s;
&:hover {
border-color: #c5c5c5;
}
}
}
</style>
\ No newline at end of file
doc/h5/src/views/project/components/RichTextEditor.vue 0 → 100644
View file @ 6653de75
<template>
<div v-if="true" class="flex h-b100 gap-10">
<div class="flex-3 flex flex-col justify-between rounded-16 p-10 card1">
<div class="flex gap-4">
<div v-if="fileList.length > 0" class="relative w-36 h-36 rounded-4 overflow-hidden imgbox"
v-for="(item, index) in fileList" :key="index">
<img :src="item.url" class="w-b100 h-b100" />
<el-icon class="absolute right-2 top-2 del cursor-pointer" @click="delImg(index)">
<CircleCloseFilled />
</el-icon>
</div>
<el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
list-type="picture-card" class="custom-upload" :show-file-list="false">
<el-icon size="18">
<Plus />
</el-icon>
</el-upload>
</div>
<div class="flex-1 overflow-y-auto my-8 hide-scrollbar" style="max-height: 412px">
<div contenteditable="true" class="bg-f5 p-10 text-333 rounded-8 custom" style="min-height: 74px">
</div>
</div>
<div class="">
<div class="flex-between-center">
<div class="flex gap-6">
<el-select v-model="aiTypeVal" placeholder="Select" style="width: 200px;">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="secondVal" placeholder="Select" style="width: 80px;">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div v-if="isShowtip" class="hint flex-between-center px-10">
<div class="flex-align-center">
<el-icon color="#888">
<Warning />
</el-icon>
<span class="ml-4 text-888 fs-12">提示词内容出现修改，请注意及时保存</span>
</div>
<el-button type="primary" text size="small" class="h-26 rounded-8"
@click="isShowtip = false">保存</el-button>
</div>
</div>
<div class="flex-align-center h-30 px-10 rounded-4 jinbi">
<svg t="1779335788481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="9953" width="20" height="20">
<path
d="M408.8832 353.9968c40.7552-87.1424 61.0304-130.7648 92.7744-136.192a61.44 61.44 0 0 1 20.6848 0c31.744 5.4272 52.0192 49.0496 92.7744 136.192 7.8848 16.9984 11.8784 25.6 18.0224 32.3584a61.44 61.44 0 0 0 4.5056 4.5056c6.8608 6.144 15.36 10.1376 32.3584 18.0224 87.1424 40.7552 130.7648 61.0304 136.192 92.7744a61.44 61.44 0 0 1 0 20.6848c-5.4272 31.744-49.0496 52.0192-136.192 92.7744-16.9984 7.8848-25.6 11.8784-32.3584 18.0224a61.44 61.44 0 0 0-4.5056 4.5056c-6.144 6.8608-10.1376 15.36-18.0224 32.3584-40.7552 87.1424-61.0304 130.7648-92.7744 136.192a61.44 61.44 0 0 1-20.6848 0c-31.744-5.4272-52.0192-49.0496-92.7744-136.192-7.8848-16.9984-11.8784-25.6-18.0224-32.3584a61.44 61.44 0 0 0-4.5056-4.5056c-6.8608-6.144-15.36-10.1376-32.3584-18.0224-87.1424-40.7552-130.7648-61.0304-136.192-92.7744a61.44 61.44 0 0 1 0-20.6848c5.4272-31.744 49.0496-52.0192 136.192-92.7744 16.9984-7.8848 25.6-11.8784 32.3584-18.0224a61.44 61.44 0 0 0 4.5056-4.5056c6.144-6.8608 10.1376-15.36 18.0224-32.3584z"
p-id="9954" fill="#ffffff"></path>
</svg>
<span class="text-fff ml-4">882</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
const isShowtip = ref(true)
const aiTypeVal = ref('1')
const secondVal = ref(5)
const options1 = [
{
value: '1',
label: 'DouBao-hahyha-1.0',
},
{
value: '2',
label: 'DouBao-hahyha-12.0'
},
]
const options2 = [
{
value: 1,
label: '1张',
},
{
value: 2,
label: '2张',
},
{
value: 4,
label: '4张',
},
{
value: 9,
label: '9张',
},
]
const fileList = ref([
{
name: 'food.jpeg',
url: 'https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png',
},
{
name: 'food1.jpeg',
url: 'https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png',
}
])
const delImg = (index: number) => {
fileList.value.splice(index, 1)
}
const videoIndex = ref(0)
const changeVideo = (item: any, index: number) => {
videoIndex.value = index
}
</script>
<style scoped lang="scss">
.card1 {
border: 1px solid #5252ff;
box-shadow: 0px 0px 3px 1px rgba(177, 177, 255, 1.3);
.imgbox {
.del {
display: none;
}
&:hover {
.del {
display: inline-block;
}
}
}
/* 控制上传卡片的大小 */
.custom-upload :deep(.el-upload--picture-card) {
width: 36px;
height: 36px;
--el-upload-picture-card-size: 36px;
/* 修改 Element Plus 变量 */
}
.hint {
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.jinbi {
background-color: #5252ff;
&:hover {
background-color: #4747e7;
}
}
}
.bg-2b303a {
background-color: #2b303a;
}
.custom {
outline: none;
box-shadow: none;
border-color: transparent;
}
.fjitem {
border: 1px solid #ddd;
padding: 1px;
&.active {
border: 1px solid #5252ff;
}
}
:deep(.el-select__wrapper) {
min-height: 30px;
border-radius: 8px;
}
</style>
doc/h5/src/views/project/components/StepThree.vue
View file @ 6653de75
<template>
<section class="flex h-b100">
<section class="aside flex-align-center flex-col">
<span class="py-16">集数</span>
<div class="flex-1 flex-align-center flex-col gap-10 overflow-y-auto hide-scrollbar">
<div v-for="(item, index) in 100" :key="index"
class="cursor-pointer w-36 min-h-36 rounded-4 flex-center text-888 jj"
:class="indexVal === index ? 'active' : ''">
{{ index + 1 }}</div>
<section class="flex flex-col w-b100 box">
<div class="flex-between-center py-20 px-36">
<span class="bg-fff py-6 px-14 rounded-4 boxshadow-1">分镜表</span>
<div class="flex gap-10">
<el-select v-model="aiTypeVal" placeholder="Select" style="width: 200px;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button class="hover">
<svg t="1779679636879" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="19134" width="16" height="16">
<path
d="M296.533333 712.832a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538666a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 768a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 0 1 0-85.333333h469.333333zM296.533333 414.165333a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538667a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165334a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 469.333333a42.666667 42.666667 0 0 1 0 85.333334H426.666667a42.666667 42.666667 0 0 1 0-85.333334h469.333333zM296.533333 115.498667a42.666667 42.666667 0 0 1 0 60.330666L205.994667 266.368a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333A42.666667 42.666667 0 0 1 175.829333 175.786667l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 170.666667a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 1 1 0-85.333333h469.333333z"
fill="#3f3f51" p-id="19135"></path>
</svg><span class="ml-4">批量生视频</span></el-button>
</div>
</section>
<section class="flex flex-col w-b100 box">
<div class="flex-between-center py-20 px-36">
<span class="bg-fff py-6 px-14 rounded-4 boxshadow-1">分镜表</span>
<div class="flex gap-10">
<el-select v-model="aiTypeVal" placeholder="Select" style="width: 200px;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button :icon="DocumentCopy" class="hover">批量生成</el-button>
</div>
</div>
<div class="flex-1 overflow-y-auto px-36 hide-scrollbar">
<div class="fw-bold">第1集 凌晨的咖啡与雨</div>
<div class="fs-12 text-666 mt-4">
林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。
<el-popover placement="bottom" :width="400">
<template #reference>
<el-button text><span class="fs-12">详情</span></el-button>
</template>
<div class="max-h-200 overflow-y-auto">
<p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
<p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
<p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
</div>
</el-popover>
</div>
<div class="flex-1 overflow-y-auto px-36 hide-scrollbar">
<div class="fw-bold">第1集 凌晨的咖啡与雨</div>
<div class="fs-12 text-666 mt-4">
林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。
<el-popover placement="bottom" :width="400">
<template #reference>
<el-button text><span class="fs-12">详情</span></el-button>
</template>
<div class="max-h-200 overflow-y-auto">
<p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
<p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
<p>林夏在雨夜来到便利店，与店员阿哲交谈。她倾诉人际关系的疲惫与困惑，阿哲以温和的话语给予慰藉。</p>
</div>
</el-popover>
</div>
<Episode />
</div>
</section>
<Episode />
</div>
</section>
</template>
<script setup lang="ts">
......@@ -57,7 +52,9 @@ const options = [
},
]
const changeJi = (item: any, index: number) => {
indexVal.value = index
}
......
doc/h5/src/views/project/components/StepThreeFour.vue 0 → 100644
View file @ 6653de75
<template>
<section class="flex h-b100">
<section class="aside flex-align-center flex-col">
<span class="py-16">集数</span>
<div class="flex-1 flex-align-center flex-col gap-10 overflow-y-auto hide-scrollbar">
<div v-for="(item, index) in 100" :key="index"
class="cursor-pointer w-36 min-h-36 rounded-4 flex-center text-888 jj"
:class="indexVal === index ? 'active' : ''" @click="changeJi(item, index)">
{{ index + 1 }}</div>
</div>
</section>
<StepThree v-if="stepVal === 2" />
<StepFour v-if="stepVal === 3" />
</section>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import StepThree from './StepThree.vue';
import StepFour from './StepFour.vue';
const props = defineProps({
stepVal: {
type: Number,
default: 2
}
})
const indexVal = ref(0)
const changeJi = (item: any, index: number) => {
indexVal.value = index
}
</script>
<style lang="scss" scoped>
.aside {
width: 60px;
border-right: 1px solid #eee;
.jj {
border: 1px solid #ddd;
&.active {
border: 1px solid #5252ff;
background: #5252ff;
color: #fff;
}
}
}
</style>
\ No newline at end of file
doc/h5/src/views/project/components/VideoPlayModal.vue 0 → 100644
View file @ 6653de75
<template>
<div class="fixed top-0 left-0 w-b100 h-b100 bg-000" :style="{display: visible ? 'block': 'none'}" @click="close">
<div class="h-36 w-36 rounded-44 bg-000 flex-center cursor-pointer absolute top-30 right-30" @click="close">
<el-icon size="18" color="#fff"><Close /></el-icon>
</div>
<div class="h-b100 flex-center">
<video :src="src" controls class="vw" @click.stop></video>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { Close } from '@element-plus/icons-vue'
const props = defineProps({
src: {
type: String,
default: ''
}
})
const visible = ref(false)
const open = () => {
visible.value = true
}
const close = () => {
visible.value = false
}
defineExpose({
open,
close
})
</script>
<style scoped lang="scss">
.bg-000 {
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
}
.vw {
width: 70%;
}
</style>
\ No newline at end of file
doc/h5/src/views/project/drama.vue
View file @ 6653de75
<template>
<div class="flex flex-col h-b100">
<DramaHeader @change-tab="changeTab" :indexVal="indexVal" />
<DramaHeader @change-tab="changeTab" :indexVal="stepVal" />
<div class="flex-1 overflow-y-auto">
<StepOne v-if="indexVal === 0" @next="next" />
<StepTwo v-if="indexVal === 1" @next="next" />
<StepThree v-if="indexVal === 2" />
<StepFour v-if="indexVal === 3" @next="next" />
<StepOne v-if="stepVal === 0" @next="next" />
<StepTwo v-if="stepVal === 1" @next="next" />
<StepThreeFour v-if="stepVal === 2 || stepVal === 3" :stepVal="stepVal" @next="next"/>
</div>
</div>
</template>
......@@ -14,16 +13,15 @@ import { ref } from 'vue';
import DramaHeader from './components/DramaHeader.vue';
import StepOne from './components/StepOne.vue';
import StepTwo from './components/StepTwo.vue';
import StepThree from './components/StepThree.vue';
import StepFour from './components/StepFour.vue';
import StepThreeFour from './components/StepThreeFour.vue';
const indexVal = ref(1);
const stepVal = ref(1);
const changeTab = (val: number) => {
indexVal.value = val;
stepVal.value = val;
}
const next = (val: number) => {
indexVal.value = val;
stepVal.value = val;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment