xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-18 01:06:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(Luma): 加上传前后帧调换功能

Browse Source
This commit is contained in:
胡双明 2024-09-02 17:33:03 +08:00
parent dae75343d0
commit 4a09da3a25
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/assets/css/luma.styl
View File

@ -21,6 +21,7 @@
flex-flow row flex-flow row
padding-bottom 10px padding-bottom 10px
justify-content center justify-content center
align-items center
.item { .item {
position relative position relative
@ -45,8 +46,16 @@
} }
} }
} }
.btn-swap {
margin-right 10px
.icon{
fill #fff
}
}
} }
.prompt-container { .prompt-container {
width: 100%; width: 100%;
.input-container { .input-container {
@ -131,6 +140,7 @@
.video-box { .video-box {
width 100% width 100%
aspect-ratio: 16/9;
border-radius 10px border-radius 10px
video,img { video,img {
width: 100%; width: 100%;

22
web/src/views/Luma.vue
View File

@ -2,15 +2,21 @@
<div class="page-luma"> <div class="page-luma">
<div class="prompt-box"> <div class="prompt-box">
<div class="images"> <div class="images">
<div v-for="img in images" :key="img" class="item"> <template v-for="(img, index) in images" :key="img">
<el-image :src="img" fit="cover"/> <div class="item">
<el-icon @click="remove(img)"><CircleCloseFilled /></el-icon> <el-image :src="img" fit="cover"/>
</div> <el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
</div>
<div class="btn-swap" v-if="images.length == 2 && index == 0">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" @click="switchReverse">
<path d="M96 416h832c0.32 0 0.576-0.192 0.896-0.192a30.656 30.656 0 0 0 30.976-30.976c-0.064-0.256 0.128-0.512 0.128-0.832a31.424 31.424 0 0 0-14.912-26.368l-188.48-188.48a30.72 30.72 0 1 0-43.456 43.456L852.544 352H96a32 32 0 0 0 0 64z m832 192H96c-0.32 0-0.576 0.192-0.896 0.192a30.528 30.528 0 0 0-30.976 30.976c0.064 0.256-0.128 0.512-0.128 0.832 0 11.264 6.144 20.672 14.912 26.368l188.48 188.48a30.72 30.72 0 1 0 43.456-43.456L171.456 672H928a32 32 0 0 0 0-64z"></path>
</svg>
</div>
</template>
</div> </div>
<div class="prompt-container"> <div class="prompt-container">
<div class="input-container"> <div class="input-container">
<div class="upload-icon"> <div class="upload-icon" v-if="images.length < 2">
<el-upload <el-upload
class="avatar-uploader" class="avatar-uploader"
:auto-upload="true" :auto-upload="true"
@ -160,6 +166,10 @@ const remove = (img) => {
images.value = images.value.filter(item => item !== img) images.value = images.value.filter(item => item !== img)
} }
const switchReverse = () => {
images.value = images.value.reverse()
}
</script> </script>