Skip to content

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

实现拖拽功能

parent c03e0d22
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 712 deletions
doc/h5/src/static/imgs/progress.svg deleted 100644 → 0
View file @ c03e0d22
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="208" fill="none" viewBox="0 0 12 208"><path fill="#000" d="M1 0h10v10.951a2 2 0 0 1-.731 1.547l-3 2.461a2 2 0 0 1-2.538 0l-3-2.461A2 2 0 0 1 1 10.95z"/><path stroke="#000" d="M6 13v204"/></svg>
\ No newline at end of file
doc/h5/src/views/project/components/Episode.vue
View file @ ac99d10f
<template> <template>
<section class="box rounded-16 p-10 my-10" style="min-width: 1110px;"> <draggable v-model="list" item-key="id" class="list-group" @end="onDragEnd" handle=".tuoz">
<div class="flex-align-center justify-between"> <template #item="{ element, index }">
<div class="flex-align-center gap-4"> <section class="box rounded-16 p-10 my-10" style="min-width: 1110px;">
<div class="tuoz flex-align-center" id="anzhu"> <div class="flex-align-center justify-between">
<img src="@/static/imgs/tuoz.png" alt="" class="h-16"> <div class="flex-align-center gap-4">
</div> <div class="relative">
<span class="fs-12">分镜1</span> <div class="tuoz flex-align-center" id="anzhu" @mousedown="isHidden = true" @mouseup="isHidden = false"
<span class="fs-10 py-2 px-4 rounded-4 bg-e3e9ff">ID</span> @mouseleave="isHidden = false">
<div class="flex-align-center ml-10 bg-f4f6ff py-6 px-14 rounded-8 btnsborder gap-4"> <img src="@/static/imgs/tuoz.png" alt="" class="h-16">
<el-icon color="#5252ff" size="14">
<HelpFilled />
</el-icon>
<span class="fs-12">全能参考生视频</span>
</div>
</div>
<div class="">
<el-button text :icon="Plus" circle />
<el-button text :icon="CopyDocument" circle />
<el-button text :icon="Delete" circle />
</div>
</div>
<div class="flex gap-10 h-b100 content">
<section class="w-400 p-14 bg-fff rounded-16 mt-10">
<div>分镜信息</div>
<div class="h-548 hide-scrollbar">
<div class="mt-10 text-666 mb-6">分镜描述</div>
<el-input v-model="fenjDesc" placeholder="请输入分镜描述" type="textarea" clearable />
<div class="mt-20">
<div class="flex-between-center">
<span>出镜角色</span>
<el-button text :icon="Plus" circle />
</div>
<div class="mt-6">
<div v-for="(item, index) in 2" :key="index" class="flex-align-center gap-4 mt-10">
<img class="h-40 w-40 rounded-8"
src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
<el-select v-model="aiTypeVal" placeholder="未配置角色" style="width: 160px;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="aiTypeVal" placeholder="未配置音色" style="width: 120px;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
</div> </div>
<Empty v-if="1 == 2" text="暂未选择出镜角色" />
</div>
</div>
<div class="mt-20">
<div class="flex-between-center">
<span>分镜场景</span>
<el-button text :icon="Plus" circle />
</div> </div>
<div class="flex gap-10 flex-wrap mt-10"> <span class="fs-12">分镜{{ index+1 }}</span>
<div v-for="(item, index) in 4" :key="index" class="child mb-6"> <span class="fs-10 py-2 px-4 rounded-4 bg-e3e9ff">ID</span>
<img class="rounded-8 w-b100 h-100" <div class="flex-align-center ml-10 bg-f4f6ff py-6 px-14 rounded-8 btnsborder gap-4">
src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt=""> <el-icon color="#5252ff" size="14">
<div class="flex-align-center gap-4 mt-4"> <HelpFilled />
<el-select v-model="aiTypeVal" placeholder="未配置角色"> </el-icon>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> <span class="fs-12">全能参考生视频</span>
</el-select>
<el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
</div>
</div>
<Empty v-if="1 == 2" text="暂未选择分镜场景" />
</div> </div>
</div> </div>
<div class="mt-20"> <div class="">
<div class="flex-between-center"> <el-button text :icon="Plus" circle />
<span>场景道具</span> <el-button text :icon="CopyDocument" circle />
<el-button text :icon="Plus" circle /> <el-button text :icon="Delete" circle />
</div>
<div class="mt-6">
<div v-for="(item, index) in 2" :key="index" class="flex-align-center gap-4 mt-10">
<img class="h-40 w-40 rounded-8"
src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
<el-select v-model="aiTypeVal" placeholder="未配置角色">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
</div>
<Empty v-if="1 == 2" text="暂未选择场景道具" />
</div>
</div> </div>
</div> </div>
</section> <div class="flex gap-10 h-b100" :style="{ display: isHidden ? 'none' : 'flex' }">
<section class="flex-1 flex flex-col bg-fff rounded-16 p-10 mt-10 right"> <section class="w-400 p-14 bg-fff rounded-16 mt-10">
<div class="flex-between-center"> <div>分镜信息</div>
<span>分镜视频生成</span> <div class="h-548 hide-scrollbar">
<el-icon color="#888" size="12"> <div class="mt-10 text-666 mb-6">分镜描述</div>
<DocumentCopy /> <el-input v-model="fenjDesc" placeholder="请输入分镜描述" type="textarea" clearable />
</el-icon> <div class="mt-20">
</div> <div class="flex-between-center">
<div class="flex h-b100 mt-10 gap-10"> <span>出镜角色</span>
<div class="flex-3 flex flex-col justify-between rounded-16 p-10 card1"> <el-button text :icon="Plus" circle />
<div class="flex gap-4"> </div>
<div v-if="fileList.length > 0" class="relative w-40 h-40 rounded-4 overflow-hidden imgbox" <div class="mt-6">
v-for="(item, index) in fileList" :key="index"> <div v-for="(item, index) in 2" :key="index" class="flex-align-center gap-4 mt-10">
<img :src="item.url" class="w-b100 h-b100" /> <img class="h-40 w-40 rounded-8"
<el-icon class="absolute right-2 top-2 del cursor-pointer" @click="delImg(index)"> src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
<CircleCloseFilled /> <el-select v-model="aiTypeVal" placeholder="未配置角色" style="width: 160px;">
</el-icon> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="aiTypeVal" placeholder="未配置音色" style="width: 120px;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
</div>
<Empty v-if="1 == 2" text="暂未选择出镜角色" />
</div>
</div> </div>
<el-upload v-model:file-list="fileList" <div class="mt-20">
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card" <div class="flex-between-center">
class="custom-upload" :show-file-list="false"> <span>分镜场景</span>
<el-icon size="18"> <el-button text :icon="Plus" circle />
<Plus /> </div>
</el-icon> <div class="flex gap-10 flex-wrap mt-10">
</el-upload> <div v-for="(item, index) in 4" :key="index" class="child mb-6">
</div> <img class="rounded-8 w-b100 h-100"
<div class="flex-1 overflow-y-auto my-8 hide-scrollbar" style="max-height: 412px"> src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
<div contenteditable="true" class="bg-f5 p-10 text-333 rounded-8 custom" style="min-height: 412px"></div> <div class="flex-align-center gap-4 mt-4">
</div> <el-select v-model="aiTypeVal" placeholder="未配置角色">
<div class=""> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
<div v-if="isShowtip" class="hint flex-between-center px-10"> </el-select>
<div class="flex-align-center"> <el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
<el-icon color="#888"> </div>
<Warning /> </div>
</el-icon> <Empty v-if="1 == 2" text="暂未选择分镜场景" />
<span class="ml-4 text-888 fs-12">提示词内容出现修改，请注意及时保存</span>
</div> </div>
<el-button type="primary" text size="small" class="h-32 rounded-8"
@click="isShowtip = false">保存</el-button>
</div> </div>
<div class="flex-between-center mt-6"> <div class="mt-20">
<div class="flex gap-6"> <div class="flex-between-center">
<el-select v-model="aiTypeVal" placeholder="Select" style="width: 200px;"> <span>场景道具</span>
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" /> <el-button text :icon="Plus" circle />
</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>
<el-button size="small" class="h-32 rounded-8"
@click="isShowtip = false">@</el-button>
</div> </div>
<div class="flex-align-center h-32 px-10 rounded-4 jinbi"> <div class="mt-6">
<svg t="1779335788481" class="icon" viewBox="0 0 1024 1024" version="1.1" <div v-for="(item, index) in 2" :key="index" class="flex-align-center gap-4 mt-10">
xmlns="http://www.w3.org/2000/svg" p-id="9953" width="20" height="20"> <img class="h-40 w-40 rounded-8"
<path src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
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" <el-select v-model="aiTypeVal" placeholder="未配置角色">
p-id="9954" fill="#ffffff"></path> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</svg> </el-select>
<span class="text-fff ml-4">882</span> <el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
</div>
<Empty v-if="1 == 2" text="暂未选择场景道具" />
</div> </div>
</div> </div>
</div> </div>
</div> </section>
<div class="flex-2 flex flex-col rounded-12 card2 overflow-hidden" style="background: #fafbfd"> <section class="flex-1 flex flex-col bg-fff rounded-16 p-10 mt-10 right">
<video src="@/static/imgs/mp4.mp4" class="w-b100 bg-2b303a flex-1" controls></video> <div class="flex-between-center">
<div class="flex-center gap-4 px-20 mt-10"> <span>分镜视频生成</span>
<div v-for="(item, index) in 2" :key="index" class="fjitem flex rounded-8 cursor-pointer" <el-icon color="#888" size="12">
@click="changeVideo(item, index)" :class="videoIndex === index ? 'active' : ''"> <DocumentCopy />
<img class="h-36 w-50 rounded-6" </el-icon>
src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt=""> </div>
<div class="flex h-b100 mt-10 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-40 h-40 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: 412px">
</div>
</div>
<div class="">
<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-32 rounded-8"
@click="isShowtip = false">保存</el-button>
</div>
<div class="flex-between-center mt-6">
<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>
<el-button size="small" class="h-32 rounded-8" @click="isShowtip = false">@</el-button>
</div>
<div class="flex-align-center h-32 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 class="flex-2 flex flex-col rounded-12 card2 overflow-hidden" style="background: #fafbfd">
<video src="@/static/imgs/mp4.mp4" class="w-b100 bg-2b303a flex-1" controls></video>
<div class="flex-center gap-4 px-20 mt-10">
<div v-for="(item, index) in 2" :key="index" class="fjitem flex rounded-8 cursor-pointer"
@click="changeVideo(item, index)" :class="videoIndex === index ? 'active' : ''">
<img class="h-36 w-50 rounded-6"
src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
</div>
</div>
</div> </div>
</div> </div>
</div> </section>
</div> </div>
</section> </section>
</div> </template>
</section> </draggable>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { Plus, DocumentCopy, CopyDocument, CircleCloseFilled, MoreFilled, Delete, HelpFilled, Warning } from '@element-plus/icons-vue' import { Plus, DocumentCopy, CopyDocument, CircleCloseFilled, MoreFilled, Delete, HelpFilled, Warning } from '@element-plus/icons-vue'
import Empty from './Empty.vue'; import Empty from './Empty.vue';
import draggable from 'vuedraggable'
const fenjDesc = ref('') const fenjDesc = ref('')
const aiTypeVal = ref('1') const aiTypeVal = ref('1')
const isShowtip = ref(true) const isShowtip = ref(true)
const secondVal = ref(5) const secondVal = ref(5)
const isHidden = ref(false)
const options = [ const options = [
{ {
...@@ -257,6 +266,17 @@ const videoIndex = ref(0) ...@@ -257,6 +266,17 @@ const videoIndex = ref(0)
const changeVideo = (item: any, index: number) => { const changeVideo = (item: any, index: number) => {
videoIndex.value = index videoIndex.value = index
} }
const list = ref([
{ id: 1, name: '第1集 凌晨的咖啡与雨', time: '00:00:00' },
{ id: 2, name: '第2集 早餐的阳光与微笑', time: '00:00:00' },
{ id: 3, name: '第3集 午餐的温暖与关怀', time: '00:00:00' },
])
const onDragEnd = (evt: any) => {
console.log('拖拽结束', list.value)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
...@@ -340,20 +360,22 @@ const changeVideo = (item: any, index: number) => { ...@@ -340,20 +360,22 @@ const changeVideo = (item: any, index: number) => {
background-color: #4747e7; background-color: #4747e7;
} }
} }
.custom { .custom {
outline: none; outline: none;
box-shadow: none; box-shadow: none;
border-color: transparent; border-color: transparent;
} }
.tuoz { .tuoz {
cursor: all-scroll; cursor: all-scroll;
} }
.content { // .content1 {
display: block; // // display: inline-block;
} // }
#anzhu:active ~ .content { // section.box:has(#anzhu:active) .content1 {
display: none; // display: none !important;
} // }
</style> </style>
\ No newline at end of file
doc/h5/src/views/project/components/StepFour copy 2.vue deleted 100644 → 0
View file @ c03e0d22
<template>
<div class="video-wrapper" @mouseenter="showControls = true" @mouseleave="showControls = false">
<!-- 1. 视频本体 (隐藏自带控件) -->
<video
ref="videoRef"
src="https://www.w3schools.com/html/mov_bbb.mp4"
@timeupdate="handleTimeUpdate"
@loadedmetadata="handleLoadedMetadata"
@ended="handleEnded"
></video>
<!-- 2. 自定义控制层 (只在悬停时显示) -->
<div class="custom-controls" :class="{ 'visible': showControls || isPlaying }">
<!-- 底部区域：包含时间和进度条 -->
<div class="control-bottom">
<!-- 时间显示 (左) -->
<div class="time-display">
{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
</div>
<!-- 进度条轨道 (中) -->
<div
class="progress-track"
ref="progressTrack"
@click="seekVideo"
@mousemove="handleHoverMove"
@mouseleave="hoverTime = null"
>
<!-- 进度填充条 -->
<div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
<!-- 拖动滑块 (圆点) -->
<div class="progress-thumb" :style="{ left: progressPercentage + '%' }"></div>
<!-- 悬停预览气泡 (Tooltip) -->
<div
class="hover-tooltip"
v-if="hoverTime !== null"
:style="{ left: hoverPercent + '%' }"
>
{{ formatTime(hoverTime) }}
</div>
</div>
<!-- 播放/暂停按钮 (右) -->
<button class="play-btn" @click="togglePlay">
{{ isPlaying ? '⏸' : '▶' }}
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
// ----- 状态 -----
const videoRef = ref(null)
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const showControls = ref(false)
// 悬停状态
const hoverTime = ref(null) // 悬停时的秒数
const hoverPercent = ref(0) // 悬停时的百分比
// ----- 计算属性 -----
const progressPercentage = computed(() => {
if (duration.value === 0) return 0
return (currentTime.value / duration.value) * 100
})
// ----- 核心逻辑 -----
// 1. 格式化时间 (00:00)
const formatTime = (seconds) => {
if (!seconds && seconds !== 0) return '00:00'
const m = Math.floor(seconds / 60)
const s = Math.floor(seconds % 60)
return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
}
// 2. 视频加载完成，获取总时长
const handleLoadedMetadata = () => {
if (videoRef.value) duration.value = videoRef.value.duration
}
// 3. 播放过程中更新进度
const handleTimeUpdate = () => {
if (videoRef.value) currentTime.value = videoRef.value.currentTime
}
// 4. 播放结束重置
const handleEnded = () => {
isPlaying.value = false
}
// 5. 切换播放/暂停
const togglePlay = () => {
if (!videoRef.value) return
if (videoRef.value.paused) {
videoRef.value.play()
isPlaying.value = true
} else {
videoRef.value.pause()
isPlaying.value = false
}
}
// 6. 点击进度条跳转
const seekVideo = (event) => {
const track = event.currentTarget
const rect = track.getBoundingClientRect()
const x = event.clientX - rect.left
const percent = Math.min(100, Math.max(0, (x / rect.width) * 100))
if (duration.value > 0) {
const newTime = (percent / 100) * duration.value
videoRef.value.currentTime = newTime
currentTime.value = newTime
}
}
// 7. 鼠标悬停计算位置和时间
const handleHoverMove = (event) => {
const track = event.currentTarget
const rect = track.getBoundingClientRect()
const x = event.clientX - rect.left
const percent = Math.min(100, Math.max(0, (x / rect.width) * 100))
hoverPercent.value = percent
if (duration.value > 0) {
hoverTime.value = (percent / 100) * duration.value
}
}
</script>
<style scoped>
/* 容器 */
.video-wrapper {
position: relative;
width: 100%;
max-width: 800px;
background: #000;
aspect-ratio: 16/9;
/* overflow: hidden; */
border-radius: 8px;
}
video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* 控制层 (初始透明，悬停显示) */
.custom-controls {
/* position: absolute;
bottom: 0;
left: 0;
right: 0; */
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
/* opacity: 0; */
transition: opacity 0.3s ease;
pointer-events: none; /* 鼠标穿透 */
}
.custom-controls.visible {
opacity: 1;
pointer-events: auto;
}
/* 底部布局 */
.control-bottom {
display: flex;
align-items: center;
gap: 15px;
}
/* 时间文本 */
.time-display {
color: rgba(255,255,255,0.9);
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
min-width: 70px;
}
/* 进度条轨道 */
.progress-track {
flex-grow: 1;
height: 6px; /* 更细的轨道 */
background: rgba(1, 255, 56, 0.3); /* 半透明灰 */
border-radius: 4px;
position: relative;
cursor: pointer;
height: 100px;
}
/* 填充条 */
.progress-fill {
height: 100%;
background: #ff0000; /* 纯白填充 */
border-radius: 4px;
width: 0%;
transition: width 0.1s linear;
}
/* 滑块 (圆点) - 核心视觉 */
.progress-thumb {
position: absolute;
top: 50%;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 6px rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 0.2s;
}
/* 悬停或播放时显示圆点 */
.progress-track:hover .progress-thumb,
.custom-controls.visible .progress-thumb {
opacity: 1;
}
/* 悬停气泡 (Tooltip) */
.hover-tooltip {
position: absolute;
bottom: 25px;
transform: translateX(-50%);
background: rgba(0,0,0,0.75);
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-family: sans-serif;
pointer-events: none;
}
/* 播放按钮 */
.play-btn {
background: none;
border: none;
color: #fff;
font-size: 20px;
cursor: pointer;
padding: 5px;
transition: transform 0.2s;
}
.play-btn:hover {
transform: scale(1.1);
}
</style>
\ No newline at end of file
doc/h5/src/views/project/components/StepFour copy.vue deleted 100644 → 0
View file @ c03e0d22
<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>
</div>
</section>
<section class="flex flex-col h-b100 flex-1 px-20 pt-20">
<div class="flex-1 flex flex-col h-b100 overflow-hidden">
<div class="bg-000 rounded-16 flex-center flex-1 h-b100 overflow-hidden">
<div class="h-b100 w-b100 flex-center">
<div class="h-b100 w-b100 flex-between-center bg-000 rounded-16 relative">
<div class="h-b100 w-b100 flex-center relative">
<div class="h-b100 w-b100 flex-center" style="aspect-ratio: 16 / 9;">
<video ref="videoRef" class="h-b100 bg-000" autoplay :playsinline="true" :x5-playsinline="true"
:webkit-playsinline="true" mediatype="video" :data-index="-1"
data-xgplayerid="652d97a3-98b8-485d-8e83-5768aafe0f07" src="@/static/imgs/mp4.mp4"
@timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetadata" @ended="handleEnded"></video>
</div>
</div>
<el-button class="absolute right-20 top-20">编辑</el-button>
</div>
</div>
</div>
<div class="bg-f5 h-64 flex-center pr-100 py-12">
<div>
<span class="current-time">{{ formatTime(currentTime) }}</span> /
<span class="duration-time" style="color: #3f3f51;">{{ formatTime(duration) }}</span>
</div>
<div class="flex-center ml-20 gap-10">
<svg t="1779505622021" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="16499" width="20" height="20">
<path
d="M356.77 605.22L701.8 849.53c69.8 49.42 166.29-0.49 166.29-86.01V261.25c0-85.52-96.49-135.43-166.29-86.01L356.77 419.55c-64.02 45.34-64.02 140.34 0 185.67zM210.42 154.36c30.38 0 55 24.62 55 55v606.07c0 30.38-24.62 55-55 55s-55-24.62-55-55V209.36c0-30.38 24.62-55 55-55z"
p-id="16500" fill="#3f3f51"></path>
</svg>
<button class="ctrl-btn w-40 h-40 flex-center rounded-100 cursor-pointer" @click="togglePlay"
:title="isPlaying ? '暂停' : '播放'">
<svg v-if="isPlaying" t="1779505259978" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4322" width="20" height="20">
<path
d="M288 768V213.333333a53.333333 53.333333 0 0 1 106.666667 0v554.666667a53.333333 53.333333 0 1 1-106.666667 0zM629.333333 768V213.333333a53.333333 53.333333 0 1 1 106.666667 0v554.666667a53.333333 53.333333 0 1 1-106.666667 0z"
fill="#ffffff" p-id="4323"></path>
</svg>
<svg v-else t="1779505357927" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="14047" width="20" height="20">
<path
d="M512-292.39808158C69.5810551-292.39808158-292.39808158 69.5810551-292.39808158 512s361.97913673 804.39808158 804.39808158 804.39808158 804.39808158-361.97913673 804.39808158-804.39808158S954.4189449-292.39808158 512-292.39808158z m0 1541.76298917C106.44930106 1249.36490759-225.36490759 917.55069894-225.36490759 512S106.44930106-225.36490759 512-225.36490759s737.36490759 331.81420868 737.36490759 737.36490759-331.81420868 737.36490759-737.36490759 737.36490759z"
p-id="14048" fill="#ffffff"></path>
<path
d="M763.37440051 401.39526378l-268.13269438-177.63791024c-90.49478419-60.32985613-167.58293419-20.10995202-167.58293265 90.49478423v402.19904074c0 110.60473622 73.73649031 150.82464031 167.58293265 90.49478421l268.13269438-177.63790864c90.49478419-67.03317396 90.49478419-167.58293419 0-227.9127903z"
p-id="14049" fill="#ffffff"></path>
</svg>
</button>
<svg t="1779505654665" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="17600" width="20" height="20">
<path
d="M665.47 417.65l-345.03-244.3c-69.8-49.42-166.29 0.49-166.29 86.01v502.27c0 85.52 96.49 135.43 166.29 86.01l345.03-244.31c64.02-45.34 64.02-140.34 0-185.68zM811.82 868.52c-30.38 0-55-24.62-55-55V207.46c0-30.38 24.62-55 55-55s55 24.62 55 55v606.07c0 30.37-24.62 54.99-55 54.99z"
p-id="17601" fill="#3f3f51"></path>
</svg>
</div>
</div>
</div>
<div class="min-h-170 mt-20 flex rounded-16 bg-fff progress p-10">
<div class="w-30 mr-10"></div>
<div class="progress-track" ref="progressTrack" @click="seekVideo" @mousemove="handleHoverMove"
@mouseleave="hoverTime = null">
<!-- 进度填充条 -->
<!-- <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div> -->
<!-- 时间刻度 -->
<div class="flex">
<div class="mr-10">00:00</div>
<div class="flex-1 flex-between-center" v-for="n in 6" :key="n">
<div class="w-2 h-6 bg-888 rounded-4" v-for="k in 8" :key="k"></div>
<span class="pr-10">00:00</span>
</div>
</div>
<!-- 拖动滑块 (圆点) -->
<!-- 拖动滑块 (圆点) -->
<div class="progress-thumb" :style="{ left: progressPercentage + '%' }"></div>
<div class="flex mt-20 gap-4 pr-20">
<div v-for="n in 6" class="fjvideo rounded-8 p-10" :style="{width: 100/6 +'%'}">
<div class="fs-12" style="color: #6e718c;">分镜 {{ n }} · 00:10 <span class="tag fs-10 py-4 px-4 ml-10 rounded-4">视频</span></div>
<div class="bg-img w-b100 h-60 mt-10 rounded-8"></div>
</div>
</div>
</div>
</div>
<div class="py-10 text-888 text-center">平台内容均由人工智能模型生成，不代表平台立场</div>
</section>
</section>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const indexVal = ref(0)
const isPlaying = ref(false)
const videoRef: any = ref(null);
const currentTime = ref(0);
const duration = ref(0);
const progressPercent = ref(0);
const hoverPercent = ref(0) // 悬停时的百分比
const hoverTime: any = ref(null) // 悬停时的时间
// ----- 计算属性 -----
const progressPercentage = computed(() => {
if (duration.value === 0) return 0
return (currentTime.value / duration.value) * 100
})
const togglePlay = () => {
if (!videoRef.value) return;
if (videoRef.value.paused) {
videoRef.value.play();
isPlaying.value = true;
} else {
videoRef.value.pause();
isPlaying.value = false;
}
};
const formatTime = (seconds: number) => {
if (isNaN(seconds)) return '00:00';
const hrs = Math.floor(seconds / 3600);
const mins = Math.floor((seconds % 3600) / 60);
const secs = Math.floor(seconds % 60);
if (hrs > 0) {
return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
// 更新进度百分比
const updateProgress = () => {
if (duration.value > 0) {
const percent = (currentTime.value / duration.value) * 100;
progressPercent.value = percent;
} else {
progressPercent.value = 0;
}
};
// 总时间
const onLoadedMetadata = () => {
if (videoRef.value) {
duration.value = videoRef.value.duration;
updateProgress();
}
};
// 当前时间
const onTimeUpdate = () => {
if (videoRef.value) {
currentTime.value = videoRef.value.currentTime;
updateProgress();
}
};
// 4. 播放结束重置
const handleEnded = () => {
isPlaying.value = false
currentTime.value = 0 // 或者保持结束位置
}
// 6. 点击进度条跳转
const seekVideo = (event: any) => {
const track = event.currentTarget
const rect = track.getBoundingClientRect()
const x = event.clientX - rect.left
const percent = Math.min(100, Math.max(0, (x / rect.width) * 100))
if (duration.value > 0) {
const newTime = (percent / 100) * duration.value
videoRef.value.currentTime = newTime
currentTime.value = newTime
}
}
// 7. 鼠标悬停计算位置和时间
const handleHoverMove = (event: any) => {
const track = event.currentTarget
const rect = track.getBoundingClientRect()
const x = event.clientX - rect.left
const percent = Math.min(100, Math.max(0, (x / rect.width) * 100))
hoverPercent.value = percent
if (duration.value > 0) {
hoverTime.value = (percent / 100) * duration.value
}
}
</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;
}
}
}
.ctrl-btn {
background: #3f3f51;
border: none;
}
/* 进度条轨道 */
.progress-track {
flex-grow: 1;
height: 6px;
/* 更细的轨道 */
// background: rgba(1, 255, 56, 0.3);
/* 半透明灰 */
border-radius: 4px;
position: relative;
cursor: pointer;
height: 100px;
}
/* 填充条 */
.progress-fill {
height: 100%;
background: #ff0000;
/* 纯白填充 */
border-radius: 4px;
width: 0%;
transition: width 0.1s linear;
}
/* 滑块 (圆点) - 核心视觉 */
.progress-thumb {
position: absolute;
top: 4px;
width: 7px;
height: 140px;
background: #ff0000;
background: url('@/static/imgs/zhen.png') no-repeat center;
background-size: 100% 100%;
// transform: translate(-50%, -50%);
transition: opacity 0.2s;
}
/* 悬停或播放时显示圆点 */
.progress-track:hover .progress-thumb,
.custom-controls.visible .progress-thumb {
opacity: 1;
}
.progress {
border: 1px solid #eee;
}
.fjvideo {
border: 1px solid #f0f2fa;
height: 106px;
background-color: #fafbfd;
.bg-img {
background: url('@/static/imgs/bg1.png');
background-size: auto;
}
.tag {
background-color: #ebedff;
color: #5252ff;
}
}
</style>
\ No newline at end of file
doc/h5/src/views/project/components/StepThree.vue
View file @ ac99d10f
...@@ -34,14 +34,7 @@ ...@@ -34,14 +34,7 @@
</div> </div>
</el-popover> </el-popover>
</div> </div>
<div v-for="(item, index) in 1" :key="index" class="pb-20"> <Episode />
<Episode />
</div>
<!-- <draggable v-model="list" item-key="id" class="list-group" @end="onDragEnd" handle=".tuoz">
<template #item="{ element, index }">
<Episode />
</template>
</draggable> -->
</div> </div>
</section> </section>
</section> </section>
...@@ -50,7 +43,6 @@ ...@@ -50,7 +43,6 @@
import { ref } from 'vue'; import { ref } from 'vue';
import { DocumentCopy } from '@element-plus/icons-vue' import { DocumentCopy } from '@element-plus/icons-vue'
import Episode from './Episode.vue'; import Episode from './Episode.vue';
import draggable from 'vuedraggable'
const indexVal = ref(0) const indexVal = ref(0)
const aiTypeVal = ref('') const aiTypeVal = ref('')
...@@ -66,15 +58,6 @@ const options = [ ...@@ -66,15 +58,6 @@ const options = [
] ]
const list = ref([
{ id: 1, name: '第1集 凌晨的咖啡与雨', time: '00:00:00' },
{ id: 2, name: '第2集 早餐的阳光与微笑', time: '00:00:00' },
{ id: 3, name: '第3集 午餐的温暖与关怀', time: '00:00:00' },
])
const onDragEnd = (evt:any) => {
console.log('拖拽结束', list.value)
}
......
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