aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局修改 部分bug修复

Browse Source
This commit is contained in:
X1627315083
2025-08-22 10:27:48 +08:00
parent 141821a843
commit 594bf5ce0a
275 changed files with 5675 additions and 13049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/component/modules/generalDrag.vue
View File

@@ -1,41 +1,44 @@
<template>
<div class="generalDrag" ref="generalDragDom">
<div class="item" v-show="showMark" :style="likeStyle">
<a-spin size="large" class="content_img_flex"></a-spin>
</div>
<div v-for="item in list" :key="item.id" class="item"
:style="likeStyle"
@mousedown.stop="designMousedown(getMousePosition($event,false),item.id,'disLike')"
@touchstart.passive="designMousedown(getMousePosition($event,true),item.id,'disLike')"
>
<img v-if="item.url"
:class="[isVideo?'video':'']"
@mouseenter.stop="gifPlay($event,item)"
@mouseleave.stop="gifPause($event,item)"
:src="item.url"
alt=""
>
<a-spin v-else size="large" class="content_img_flex"></a-spin>
<div class="btn">
<div class="like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
<i :class="['fi',isLike?'fi-sr-heart srLike':'fi-rr-heart']"></i>
</div>
<div class="down" v-if="isVideo && item.url" @click.stop="down(item)">
<i class="fi fi-ss-down-to-line"></i>
</div>
<div class="zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<i class="fi fi-bs-expand-arrows-alt"></i>
</div>
<div class="copy" v-if="item.url && (type == 'Relight') && isCopy" @click.stop="()=>$emit('setBtn',item.id,'copy')">
<i class="fi fi-br-refresh"></i>
</div>
<div class="delete" v-if="item.url && isDelete" @click.stop="()=>$emit('setBtn',item.id,'delete')">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
<div class="generalDrag">
<div class="generalDragBox" ref="generalDragDom" :style="{'height': parentHeight}">
<div class="item" v-show="showMark" :style="likeStyle">
<a-spin size="large" class="content_img_flex"></a-spin>
</div>
<div v-for="item in list" :key="item.id" class="item"
:style="likeStyle"
@mousedown.stop="designMousedown(getMousePosition($event,false),item.id,'disLike')"
@touchstart.passive="designMousedown(getMousePosition($event,true),item.id,'disLike')"
>
<img v-if="item.url"
:class="[isVideo?'video':'']"
@mouseenter.stop="gifPlay($event,item)"
@mouseleave.stop="gifPause($event,item)"
:src="item.url"
alt=""
>
<a-spin v-else size="large" class="content_img_flex"></a-spin>
<div class="btn">
<div class="like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
<i :class="['fi',isLike?'fi-sr-heart srLike':'fi-rr-heart']"></i>
</div>
<div class="down" v-if="isVideo && item.url" @click.stop="down(item)">
<i class="fi fi-ss-down-to-line"></i>
</div>
<div class="zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<i class="fi fi-bs-expand-arrows-alt"></i>
</div>
<div class="copy" v-if="item.url && (type == 'Relight') && isCopy" @click.stop="()=>$emit('setBtn',item.id,'copy')">
<i class="fi fi-br-refresh"></i>
</div>
<div class="delete" v-if="item.url && isDelete" @click.stop="()=>$emit('setBtn',item.id,'delete')">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
@@ -74,6 +77,7 @@ export default defineComponent({
collValue:18,
num:2,
padding:40,
parentHeight:'',
likeStyle:{
width:'0px',
// width:'240px',
@@ -207,6 +211,7 @@ export default defineComponent({
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.539
collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
collItemSize.parentHeight = collItemSize.itemStyle.height * Math.ceil(props.list.length / collItemSize.num) + 'px'
collItemSize.elList = []
let arr:any = props.list
for(let i = 0;i < arr.length;i++){
@@ -253,7 +258,7 @@ export default defineComponent({
// moveItem()
// })
const gifPlay = (e:any,item:any)=>{
if(!props.isVideo)return
if(!props.isVideo || collItemSize.isMove)return
e.target.src = item.gifUrl//使用gif图片
// e.target.src = ''//使用gif图片
}
@@ -329,65 +334,72 @@ export default defineComponent({
width: 100%;
height: 100%;
position: relative;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
> .item{
// border-radius: 2rem;
// border: 2px solid;
position: absolute;
transition: all .3s;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
// background: #fff;
> img{
width: 100%;
height: 100%;
object-fit: contain;
&.video{
object-fit: contain;
}
}
> .btn{
> .generalDragBox{
min-height: 100%;
> .item{
// border-radius: 2rem;
// border: 2px solid;
position: absolute;
top: 1rem;
cursor: pointer;
right: 2rem;
display: none;
flex-direction: column;
transition: all .3s;
overflow: hidden;
display: flex;
align-items: center;
background: rgba(255,255,255,.5);
> div{
padding: .8rem;
&:hover{
background: rgba(255,255,255,.7);
justify-content: center;
// background: #fff;
> img{
width: 100%;
height: 100%;
object-fit: contain;
&.video{
object-fit: contain;
}
}
.like{
}
.zoom{
i{
font-size: 2.5rem;
}
}
.down{
}
.delete{
}
i{
display: flex;
font-size: 3rem;
&.srLike{
color: red;
}
}
}
&:hover{
}
> .btn{
display: flex;
position: absolute;
top: 1rem;
cursor: pointer;
right: 2rem;
display: none;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,.5);
> div{
padding: .8rem;
&:hover{
background: rgba(255,255,255,.7);
}
}
.like{
}
.zoom{
i{
font-size: 2.5rem;
}
}
.down{
}
.delete{
}
i{
display: flex;
font-size: 3rem;
&.srLike{
color: red;
}
}
}
&:hover{
> .btn{
display: flex;
}
}
}
}
}
</style>