布局修改 部分bug修复
This commit is contained in:
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
@@ -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"/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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"/>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user