diff --git a/demo/frontend/src/views/ImageToVideo.vue b/demo/frontend/src/views/ImageToVideo.vue index 2bb7675..5796685 100644 --- a/demo/frontend/src/views/ImageToVideo.vue +++ b/demo/frontend/src/views/ImageToVideo.vue @@ -63,6 +63,13 @@
{{ work.text }}
+ +
+ + + 做同款 + +
{{ work.title }}
@@ -452,6 +459,34 @@ onMounted(() => { object-fit: cover; } +/* 鼠标悬停时显示的做同款按钮 */ +.hover-create-btn { + position: absolute; + right: 8px; + bottom: 8px; + opacity: 0; + transform: translateY(10px); + transition: all 0.3s ease; + z-index: 10; +} + +.work-thumbnail:hover .hover-create-btn { + opacity: 1; + transform: translateY(0); +} + +.hover-create-btn .el-button { + background: rgba(64, 158, 255, 0.9); + border: none; + backdrop-filter: blur(8px); + box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3); +} + +.hover-create-btn .el-button:hover { + background: rgba(64, 158, 255, 1); + transform: scale(1.05); +} + .work-overlay { position: absolute; bottom: 0; diff --git a/demo/frontend/src/views/MyWorks.vue b/demo/frontend/src/views/MyWorks.vue index 1bdaf6f..f66b38b 100644 --- a/demo/frontend/src/views/MyWorks.vue +++ b/demo/frontend/src/views/MyWorks.vue @@ -73,6 +73,13 @@
+ +
+ + + 做同款 + +
{{ item.title }}
@@ -370,8 +377,20 @@ const handleClose = () => { } // 创建同款 -const createSimilar = () => { - ElMessage.info('跳转到创作页面') +const createSimilar = (item) => { + if (item) { + ElMessage.info(`基于作品"${item.title}"创建同款`) + // 根据作品类型跳转到相应的创建页面 + if (item.type === 'video') { + router.push('/text-to-video/create') + } else if (item.type === 'image') { + router.push('/image-to-video/create') + } else { + router.push('/text-to-video/create') + } + } else { + ElMessage.info('跳转到创作页面') + } } const download = (item) => { @@ -486,6 +505,34 @@ onMounted(() => { .checker { position: absolute; left: 6px; top: 6px; } .actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s ease; } .thumb:hover .actions { opacity: 1; } + +/* 鼠标悬停时显示的做同款按钮 */ +.hover-create-btn { + position: absolute; + right: 6px; + bottom: 6px; + opacity: 0; + transform: translateY(10px); + transition: all 0.3s ease; + z-index: 10; +} + +.thumb:hover .hover-create-btn { + opacity: 1; + transform: translateY(0); +} + +.hover-create-btn .el-button { + background: rgba(64, 158, 255, 0.9); + border: none; + backdrop-filter: blur(8px); + box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3); +} + +.hover-create-btn .el-button:hover { + background: rgba(64, 158, 255, 1); + transform: scale(1.05); +} .work-card.selected .thumb::after { content: ''; position: absolute; diff --git a/demo/frontend/src/views/StoryboardVideo.vue b/demo/frontend/src/views/StoryboardVideo.vue index b7f0b27..18eb6e3 100644 --- a/demo/frontend/src/views/StoryboardVideo.vue +++ b/demo/frontend/src/views/StoryboardVideo.vue @@ -63,6 +63,13 @@
{{ work.text }}
+ +
+ + + 做同款 + +
{{ work.title }}
@@ -452,6 +459,34 @@ onMounted(() => { object-fit: cover; } +/* 鼠标悬停时显示的做同款按钮 */ +.hover-create-btn { + position: absolute; + right: 8px; + bottom: 8px; + opacity: 0; + transform: translateY(10px); + transition: all 0.3s ease; + z-index: 10; +} + +.work-thumbnail:hover .hover-create-btn { + opacity: 1; + transform: translateY(0); +} + +.hover-create-btn .el-button { + background: rgba(64, 158, 255, 0.9); + border: none; + backdrop-filter: blur(8px); + box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3); +} + +.hover-create-btn .el-button:hover { + background: rgba(64, 158, 255, 1); + transform: scale(1.05); +} + .work-overlay { position: absolute; bottom: 0; diff --git a/demo/frontend/src/views/TextToVideo.vue b/demo/frontend/src/views/TextToVideo.vue index 03c1eb8..926cdc9 100644 --- a/demo/frontend/src/views/TextToVideo.vue +++ b/demo/frontend/src/views/TextToVideo.vue @@ -63,6 +63,13 @@
{{ work.text }}
+ +
+ + + 做同款 + +
{{ work.title }}
@@ -453,6 +460,34 @@ onMounted(() => { object-fit: cover; } +/* 鼠标悬停时显示的做同款按钮 */ +.hover-create-btn { + position: absolute; + right: 8px; + bottom: 8px; + opacity: 0; + transform: translateY(10px); + transition: all 0.3s ease; + z-index: 10; +} + +.work-thumbnail:hover .hover-create-btn { + opacity: 1; + transform: translateY(0); +} + +.hover-create-btn .el-button { + background: rgba(64, 158, 255, 0.9); + border: none; + backdrop-filter: blur(8px); + box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3); +} + +.hover-create-btn .el-button:hover { + background: rgba(64, 158, 255, 1); + transform: scale(1.05); +} + .work-overlay { position: absolute; bottom: 0;