布局修改 部分bug修复

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

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>

View File

@@ -7,8 +7,8 @@
ref="editCanvas"></editCanvas>
</div>
<div class="btn">
<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin-top: auto;">Save</div>
<div class="gallery_btn" @click="exportElement">Export</div>
<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin-top: auto;">{{ $t('exportModel.Save') }}</div>
<div class="gallery_btn" @click="exportElement">{{ $t('exportModel.Export') }}</div>
</div>
<div class="mark_loading" v-show="isShowMark">

View File

@@ -16,7 +16,7 @@
>
<div class="generalModel_btn">
<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">
<svg width="100%" height="100%" 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="#000"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>

View File

@@ -14,7 +14,7 @@
>
<div class="generalModel_btn">
<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">
<svg width="100%" height="100%" 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"/>
@@ -39,7 +39,7 @@
{{ $t('Habit.Clear') }}
</div>
<div class="started_btn" @click="setOk()">
OK
{{ $t('Habit.ok') }}
</div>
</div>

View File

@@ -15,7 +15,7 @@
>
<div class="generalModel_btn">
<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">
<svg width="100%" height="100%" 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="#000"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>

View File

@@ -14,7 +14,7 @@
>
<div class="generalModel_btn">
<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">
<svg width="100%" height="100%" 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"/>
@@ -24,10 +24,11 @@
</div>
<div class="setBrandDNA_content">
<div class="modal_title_text">
<div>Brand</div>
<div>{{ $t('Habit.Brand') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="setBrandDNA_content_bottom">
<div class="setBrandDNA_content_bottom" :class="{'active':isNoData && isNull}">
<div class="content_bottom_item" v-for="item in styleList">
<div class="content_bottom_item_border" :class="{active:item.id == selectStyle.id}" @click="setItemSelect(item)">
{{ item.brandName}}
@@ -46,7 +47,7 @@
{{ $t('Habit.Clear') }}
</div>
<div class="started_btn" @click="setOk()">
OK
{{ $t('Habit.ok') }}
</div>
</div>
@@ -220,6 +221,10 @@ methods: {
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
&.active{
align-content: center;
justify-content: center;
}
> .material_content_list_loding{
text-align: center;
height: 50px;
@@ -278,13 +283,18 @@ methods: {
}
}
.setBrandDNA_ok{
width: 60%;
width: 100%;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-around;
justify-content: flex-end;
>div{
width: 40%;
width: 12rem;
line-height: 6rem;
text-align: center;
border-radius: 3rem;
height: auto;
margin-left: 2rem;
}
}
}