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

fix

Browse Source
This commit is contained in:
X1627315083
2025-04-09 14:09:19 +08:00
parent b6e5f05f06
commit 37f1b36e54
76 changed files with 1969 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,21 +10,28 @@
>
<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 like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
<i class="fi fi-rr-heart"></i>
</div>
<div class="btn down" v-if="isVideo" @click.stop="down(item)">
<i class="fi fi-rr-heart"></i>
</div>
<div class="btn zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<i class="fi fi-bs-expand-arrows-alt"></i>
<div class="btn">
<div class="like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
<i class="fi 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="delete" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
</div>
</div>
</template>
@@ -53,21 +60,21 @@ export default defineComponent({
generalDragDom:null as any,
})
const collItemSize = reactive({
collValue:15,
minCollValue:2,
maxCollValue:20,
collValue:18,
num:2,
padding:40,
likeStyle:{
width:'100px',
width:'0px',
// width:'240px',
height:'200px',
height:'0px',
// height:'370px',
position:'absolute',
},
itemStyle:{
width:100,
height:154,
width:0,
height:0,
},
scale:[1,1.54],
scale:[1,1.539],
collTime:null as any,
isMove:false,
elList:[] as any,
@@ -138,11 +145,11 @@ export default defineComponent({
// })
}
const reRange = (item:any, x:number, y:number,str:string)=>{
dataDom.generalDragDom
let elList:any = collItemSize.elList
let index = data.selectIndex
let value = collItemSize.maxCollValue - collItemSize.collValue
let width,height,num
num = value
num = collItemSize.num
width = collItemSize.itemStyle.width
height = collItemSize.itemStyle.height
@@ -170,10 +177,10 @@ export default defineComponent({
}
}
const moveItem = ()=>{
let value = collItemSize.maxCollValue - collItemSize.collValue
let value = collItemSize.num
// let num = str == 'like'?value:3
for(let i = 0;i < collItemSize.elList.length;i++){
collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
collItemSize.elList[i].el.style.top = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
}
@@ -181,10 +188,11 @@ export default defineComponent({
const setItemPosition = ()=>{
let parent = dataDom.generalDragDom.offsetWidth
let elArr = dataDom.generalDragDom.children
let value = collItemSize.maxCollValue - collItemSize.collValue
collItemSize.itemStyle.width = (parent - ((value-1)*10)) / value
let value = collItemSize.num
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
collItemSize.itemStyle.width = (parent - collItemSize.padding - ((value-1)*10)) / value
// collItemSize.itemStyle.width = (parent - (value * 10)) / value
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.539
collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
collItemSize.elList = []
@@ -242,22 +250,31 @@ export default defineComponent({
e.target.src = item.url//静态图片
// e.target.src = ''//静态图片
}
const down = (item:any)=>{
const down = async (item:any)=>{
const videoUrl = item.videoUrl; // 视频文件 URL
const fileName = 'video.mp4'; // 下载时保存的文件名
const link = document.createElement('a');
link.href = videoUrl;
link.download = fileName;
// 触发下载
link.click();
const response = await fetch(videoUrl);
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = 'video.mp4';
document.body.appendChild(a);
a.click();
// 清理
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl);
}, 100);
}
onMounted(()=>{
window.addEventListener('resize', setItemPosition)
// nextTick(()=>{
// setItemPosition()
// })
nextTick(()=>{
let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
collItemSize.likeStyle.width = width + 'px'
collItemSize.likeStyle.height = width * 1.54 + 'px'
})
})
onBeforeUnmount(()=>{
window.removeEventListener('resize', setItemPosition)
@@ -288,38 +305,57 @@ export default defineComponent({
overflow-y: auto;
overflow-x: hidden;
> .item{
border-radius: 2rem;
border: 2px solid;
// border-radius: 2rem;
// border: 2px solid;
position: absolute;
transition: all .3s;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
// background: #fff;
> img{
width: 100%;
height: 100%;
object-fit: contain;
object-fit: cover;
&.video{
object-fit: contain;
}
}
> .btn{
position: absolute;
top: 2rem;
top: 1rem;
cursor: pointer;
right: 2rem;
display: none;
&.like{
left: 2rem;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,.5);
> div{
padding: .8rem;
&:hover{
background: rgba(255,255,255,.7);
}
}
&.zoom{
right: 2rem;
.like{
}
>i{
.zoom{
i{
font-size: 2.5rem;
}
}
.down{
}
.delete{
}
i{
display: flex;
font-size: 3rem;
}
}
&:hover{
> .btn{
display: block;
display: flex;
}
}
}

41
src/component/modules/liquefaction.vue
View File

@@ -5,7 +5,8 @@
v-model:visible="liqufeaction"
:footer="null"
:get-container="() => $refs.liquefactionModal"
width="78%"
width="80%"
height="90%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -16,8 +17,8 @@
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
</svg>
</div>
@@ -30,6 +31,10 @@
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div>
</div>
<div class="liquefaction_parameter">
<div class="liquefaction_parameter_item icon">
<i class="icon iconfont icon-chehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('')"></i>
</div>
<div class="liquefaction_parameter_item">
<div class="liquefaction_parameter_item_title">
<span>{{ $t('exportModel.Size') }}</span>
@@ -48,12 +53,9 @@
<input type="range" v-model="density" @change="routesChange('density')">
</div>
</div>
<div class="liquefaction_parameter_item icon">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
</div>
<div class="liquefaction_parameter_item">
<div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div>
<!-- <div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div> -->
<div class="generage_btn started_btn" @click="submit">{{ $t('Cropper.Finish')}}</div>
</div>
</div>
@@ -406,16 +408,29 @@ export default defineComponent({
});
</script>
<style lang="less" scoped>
.liquefactionModal{
:deep(.liquefaction){
.ant-modal-mask{
background: rgba(0,0,0,.2);
}
}
}
.liquefaction {
background: #f9fafb;
.generalModel_btn{
.generalModel_closeIcon{
transform: translate(-100%, 100%);
}
}
.liquefaction_center{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.liquefaction_canvas_box{
background: #fff;
height: 90%;
width: 80%;
width: 55%;
text-align: center;
// overflow-x: auto;
position: relative;
@@ -426,9 +441,11 @@ export default defineComponent({
justify-content: center;
}
.liquefaction_parameter{
padding-top: 5rem;
height: 100%;
flex: 1;
// flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.liquefaction_parameter_item{
display: flex;
flex-direction: column;
@@ -455,7 +472,7 @@ export default defineComponent({
border-radius: .5rem;
font-size: 2rem;
cursor: pointer;
border: 2px solid #000;
// border: 2px solid #000;
margin-right: 1rem;
align-items: center;
justify-content: center;