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

View File

@@ -10,13 +10,13 @@
</div> -->
<div v-show="isEditFrontBack" class="frontBack">
<div class="label_item" @click.stop="setOperation('print')">
<div class="title">Sharding</div>
<div class="title">Masking :</div>
<a-select
v-model:value="frontBackData"
:options="frontBackDataList"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
style="width:12rem;"
style="width:18rem;"
@change="changeFrontBackData"
>
<template #suffixIcon
@@ -28,7 +28,7 @@
</a-select>
</div>
<div class="label_item">
<div class="titile">{{ $t('exportModel.Size') }}:</div>
<div class="title">{{ $t('exportModel.Size') }} :</div>
<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">
<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
@@ -65,6 +65,17 @@
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
</div>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div class="title">{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
@@ -80,7 +91,7 @@
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
style="width: 12rem "
style="width: 12rem ;height: 6rem;"
@change="canvasGeneral.brushworkChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
@@ -88,17 +99,7 @@
</a-select-option>
</a-select>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div class="title">{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'pencil' &&
canvasGeneral.operation != 'eraser'&&
@@ -162,13 +163,13 @@
frontBackData:'#ff0000',
frontBackDataList:[
{
name:'正面',
name:'Front Piece',
value:'#ff0000'
},{
name:'反面',
name:'Back Piece',
value:'#00ff00'
},{
name:'背景',
name:'Surroundings',
value:'background'
},
]
@@ -190,9 +191,10 @@
const closeModal = ()=>{
document.removeEventListener('click',setOper)
}
const selectImgItem = (data:any)=>{
data.minioUrl = data.url
canvasGeneral.addPartImg(data,'print')
const selectImgItem = (value:any)=>{
value.minioUrl = value.url
canvasGeneral.addPartImg(value,'print')
data.operation = ''
}
const changeFrontBackData = (value:any)=>{
emit('setFrontBackColor',value)
@@ -227,7 +229,7 @@
display: flex;
}
> .current{
border-radius: 3rem;
border-radius: 1rem;
height: 3rem;
width: 7rem;
border: 1px solid #000;
@@ -238,7 +240,7 @@
top: 4rem;
background: #fff;
border: 1px solid #000;
border-radius: 2rem;
border-radius: 1rem;
padding: 2.4rem;
width: 40rem;
height: 50rem;
@@ -264,14 +266,7 @@
cursor: pointer;
}
}
input{
height: 100%;
border-radius: 3rem;
width: 12rem;
background: #fff;
height: 3rem;
border: 1px solid #000;
}
&.wH input{
width: 5rem;
}
@@ -280,23 +275,7 @@
font-weight: 600;
font-size: 1.8rem;
}
:deep(.ant-select){
border-radius: 3rem;
.ant-select-selector{
height: 100%;
border-radius: 3rem;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
.ant-select-selection-item{
display: flex;
font-size: 2rem;
line-height: 3rem;
}
}
}
}
&.sketch{

View File

@@ -21,6 +21,7 @@
const store = useStore();
let {t} = useI18n()
let canvasType = inject('canvasType')
let getCanvasIfEdit:any = inject('getCanvasIfEdit')
let canvasGeneral:any = inject('canvasObj')
const data:any = reactive({
canvasScaleDom:null,
@@ -31,6 +32,9 @@
})
getCanvasIfEdit.fun = ()=>{
return canvasGeneral.getElement()
}
const createCanvas = (canvasSize:any)=>{
nextTick(async ()=>{
let img = data.selectDetail.undividedLayer
@@ -53,8 +57,9 @@
width:WH.height*wScale,
height:WH.height*hScale,
}
// let editGroupImg = data.selectDetail.partialDesign.partialDesignPath || data.selectDetail.partialDesign.partialDesignBase64
let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg)
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg,{dashedIsDetail:true})
}
image.src = img
// canvasGeneral.canvasInit(data.canvasDom,canvasSize)

View File

@@ -87,6 +87,7 @@ export default defineComponent({
})
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
// privewDetail(oldValue)
},{immediate: true})
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
provide('canvasObj',detailData.canvasObj)
@@ -121,9 +122,9 @@ export default defineComponent({
detailData.frontBackCanvasObj.currentOperation = false
}
}
const privewDetail = async ()=>{
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
let data = await detailData.canvasObj.detailSubmit()
detailData.selectDetail.partialDesign.partialDesignBase64 = data
if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
}
const setFrontBackColor = (data:any)=>{
detailDom.editFrontBack.setBackground(data)

View File

@@ -16,7 +16,7 @@
:closable="false"
>
<div class="content">
<div class="nav">
<div class="nav" :class="{isEditPattern:isEditPattern.value}">
<div class="back_home">
<div class="gallery_btn" @click="closeModal()">
<i class="fi fi-rs-house-chimney"></i>
@@ -130,8 +130,12 @@ export default defineComponent({
childKey:0,
singleOveral:{
value:'overall'
}
},
getCanvasIfEdit:{
fun:null,
},
})
provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
provide('singleOveral',detailData.singleOveral)
provide('isEditPattern',detailData.isEditPattern)
const closeModal = ()=>{
@@ -142,6 +146,7 @@ export default defineComponent({
}
const showDesignDetailModal = (data:any,str:any)=>{
// let url = Https.httpUrls.getDesignDetail + `?designItemId=${77770}&designPythonOutfitId=${77423}`
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
detailData.loadingShow = true
Https.axiosGet(url).then(
@@ -154,10 +159,20 @@ export default defineComponent({
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.color.rgba = {
r:item.color.r,
g:item.color.g,
b:item.color.b,
if(item.color){
item.color.rgba = {
r:item.color.r,
g:item.color.g,
b:item.color.b,
}
}else{
item.color = {
rgba:{
r:255,
g:255,
b:255,
}
}
}
if(item.gradient){
item.color.gradient = item.gradient
@@ -170,14 +185,14 @@ export default defineComponent({
});
})
detailData.singleOveral.value = rv.singleOverall
console.log(detailData.singleOveral)
detailData.designDetailShow = true
store.commit('DesignDetailCopy/setDesignDetail',rv)
// this.deleteShow = false
setRevocation()
detailData.loadingShow = false
// await this.setImgSize()
store.commit('DesignDetailCopy/setDesignColthes',rv.clothes[0].id)
}
).catch(rv=>{
@@ -240,6 +255,7 @@ export default defineComponent({
const setClothes = async (list:any)=>{
let clothesList:any = []
for(let i = 0;i<list.length;i++){
detailData.selectDetail
let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
if(detailDom.canvasBox?.privewDetail)await (detailDom.canvasBox as any).privewDetail()
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
@@ -425,13 +441,26 @@ export default defineComponent({
top: 50%;
transform: translate(-50%,-50%);
z-index: 2;
:deep(.ant-modal-wrap){
.ant-modal-body{
padding: 0;
:deep(>div){
> .ant-modal-root{
> .ant-modal-centered{
> .fullScreen{
> .ant-modal-content{
> .ant-modal-body{
padding: 0;
}
}
}
}
}
:deep(.ant-modal-wrap){
.ant-modal-body{
// padding: 0;
}
// position: absolute;
// top: 0;
// left: 0;
}
// position: absolute;
// top: 0;
// left: 0;
}
.content{
display: flex;
@@ -444,7 +473,7 @@ export default defineComponent({
&.detailLeft{
width: 34rem;
}
&.isEditPattern{width: 0;}
&.isEditPattern{width: 0px;}
&.model{
width: 50rem;
margin: 0 10rem;
@@ -486,6 +515,9 @@ export default defineComponent({
}
> .nav{
margin-right: 5rem;
overflow: hidden;
// transition: all .3s;
&.isEditPattern{width: 0px;margin: 0;}
> .back_home{
width: 9rem;
text-align: center;

View File

@@ -1,10 +1,10 @@
<template>
<div class="color">
<div class="detailText">Palette</div>
<div class="detailText">Current color</div>
<div class="pallet">
<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
</div>
<div class="detailText">New color</div>
<div class="detailText">Color pelette</div>
<div class="colorBox">
<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
@@ -13,7 +13,7 @@
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
</div>
</div>
<div class="detailText">Upload Image</div>
<div class="detailText">Choose color from image</div>
<div class="uploadImage">
<upload @selectUplpadColor="selectUplpadColor"></upload>
</div>
@@ -246,18 +246,19 @@ export default defineComponent({
flex-direction: column;
overflow-y: auto;
> .detailText{
margin-bottom: 1rem;
margin-bottom: .5rem;
}
> .pallet{
margin-bottom: 4.5rem;
margin-bottom: 2rem;
}
> .colorBox{
margin-bottom: 3rem;
margin-bottom: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> .colorBoxItem{
margin: 1rem 0;
// margin: 1rem 0;
margin-bottom: 1rem;
width: 32%;
height: 11rem;
border-radius: .5rem;

View File

@@ -272,7 +272,7 @@ export default defineComponent({
nextTick().then(()=>{
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("pallet")?.[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {

View File

@@ -27,7 +27,7 @@
accept=".jpg,.png,.jpeg,.bmp"
>
<div class="upload_tip_block">
<i class="fi fi-rr-picture"></i>
<i class="fi fi-br-upload"></i>
</div>
</a-upload>
</div>

View File

@@ -2,7 +2,7 @@
<div class="detailLeft">
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
<print v-show="currentDetailType == 'print'"></print>
<color v-show="currentDetailType == 'color'"></color>
<color v-if="currentDetailType == 'color'"></color>
<element v-show="currentDetailType == 'element'"></element>
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<div class="libraryList">
<div class="generalModel_state">
<div class="generalModel_state_item">
<div class="generalModel_state" v-if="type != 'element'">
<div class="generalModel_state_item" style="width: 40%;">
<a-select
v-model:value="designType"
:options="designTypeList"
@@ -18,8 +18,10 @@
></template>
</a-select>
</div>
<div class="generalModel_state_item">
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="generalModel_state_item" style="width: 35%;">
<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
</div>
<div class="generalModel_state_item" style="width: auto;">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<!-- clothesPrint -->
@@ -84,6 +86,7 @@ export default defineComponent({
currentPage:1,
})
const init = ()=>{
console.log(123)
detailData.designTypeList = props.catecoryList
detailData.designType = detailData.designTypeList[0].value
getLibraryList()
@@ -207,13 +210,15 @@ export default defineComponent({
flex-direction: column;
> .generalModel_state{
width: 100%;
display: flex;
justify-content: space-between;
> .generalModel_state_item{
width: 100%;
margin: 0;
position: relative;
> .search_icon_block{
position: absolute;
right: 5px;
// position: absolute;
// right: 5px;
width: calc(6rem - 4px);
height: calc(6rem - 4px);
color: #fff;
@@ -227,7 +232,7 @@ export default defineComponent({
}
}
> .generalModel_state_item:last-child{
margin-top: 2rem;
// margin-top: 2rem;
}
}
> .libraryList_box{

View File

@@ -1,8 +1,7 @@
<template>
<div class="selectList">
<div class="switch_type_list">
<div class="switch_type_list" v-if="type != 'element'">
<div
v-if="type != 'element'"
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
@@ -28,7 +27,7 @@
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
@@ -39,7 +38,7 @@
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
import { defineComponent,computed,onMounted,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
@@ -78,7 +77,7 @@ export default defineComponent({
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle: props.type == 'element'?'upload':'current',
selectTitle: props.type == 'element'?'library':'current',
printList:[]
})
const getDetailListDom = reactive({
@@ -97,7 +96,11 @@ export default defineComponent({
const selectImgItem = (data:any)=>{
emit('selectImgItem',data)
}
onMounted(()=>{
if(props.type == 'element'){
openLibrary()
}
})
return{
...toRefs(detailData),
...toRefs(getDetailListDom),

View File

@@ -70,7 +70,9 @@
<a-spin size="large" />
</div>
</div>
<div class="clearOverall" style="text-align: center; height: 6rem;">
<div class="gallery_btn" v-show="!overallSingle && type == 'print'" style="line-height: 5rem;" @click="clearOverall">Clear</div>
</div>
</div>
</template>
@@ -293,7 +295,6 @@ export default defineComponent({
let state = true
editPrintElementData.stateOverallSingle = 'single'
let arr:any = editPrintElementData.selectDetail.printObject.prints
console.log(props.type)
if(props.type == 'element'){
arr = editPrintElementData.selectDetail.printObject.trims
}
@@ -496,8 +497,10 @@ export default defineComponent({
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
}
const clearOverall = ()=>{
editPrintElementData.printStyleList[props.type].overall = []
}
onMounted(()=>{
console.log(123123)
if(props.type == 'element'){
editPrintElementData.stateOverallSingle = 'single'
editPrintElementData.overallSingle = true
@@ -516,13 +519,13 @@ export default defineComponent({
itemSizeMousedown,
deletePrint,
previewDetailPrintData,
clearOverall,
}
},
directives:{
//操作旋转
rotote:{
mounted(el,value:any){
console.log(value)
let mousedown = function(event:any){
let e = getMousePosition(event,false)
mouseDownOperation(e)
@@ -680,6 +683,8 @@ export default defineComponent({
.designOpenrtion_imgMask{
width: auto;
height: auto;
min-width: 60%;
// max-height: 80%;
position: relative;
>img{
z-index: 2;

View File

@@ -1,5 +1,5 @@
<template>
<div class="sketchType">
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
<div class="detailText">New Apparel</div>
<div class="sketchContent">
<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">

View File

@@ -12,12 +12,12 @@
<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i>
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
<!-- -->
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mousedownDesignImg" @touchstart="mousedownDesignImg" @touchend="mousedownDesignImg"></i>
</div>
<position ref="position" @canvasReload="()=>$emit('canvasReload')" :imgDesignImg=imgDesignImg></position>
@@ -31,6 +31,7 @@ import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reacti
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
import position from './modelPosition.vue';
import modelNav from './modelNav.vue';
@@ -40,9 +41,10 @@ export default defineComponent({
},
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
setup(props,{emit}) {
const {t} = useI18n()
const store = useStore();
const detailData = reactive({
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
})
const setRevocation:any = inject('setRevocation')
const getDetailListData = reactive({
@@ -58,7 +60,31 @@ export default defineComponent({
return getDetailListDom.position.getSubmitData(value)
}
const showDesignImgDetail = (str:any)=>{
emit('detailEdit',str)
new Promise((resolve, reject) => {
if(
getDetailListData.isEditPattern.value&&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
){
Modal.confirm({
title: t('collectionModal.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
resolve(true)
emit('detailEdit',str)
},
onCancel(){
resolve(false)
}
});
}else{
resolve(true)
emit('detailEdit',str)
}
})
}
const deleteItem = ()=>{
setRevocation()

View File

@@ -33,14 +33,19 @@ export default defineComponent({
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
frontBack:{} as any,
isEditPattern:inject('isEditPattern') as any,
singleOveral:inject('singleOveral') as any
singleOveral:inject('singleOveral') as any,
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
})
watch(()=>detailData.frontBack_,(newFollowVue)=>{
detailData.frontBack = newFollowVue
})
const selectDetailItem = (item:any,index:number)=>{
new Promise((resolve, reject) => {
if(detailData.isEditPattern.value && detailData.selectDetail?.id){
if(detailData.isEditPattern.value &&
detailData.selectDetail?.id &&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
){
Modal.confirm({
title: t('collectionModal.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
@@ -58,6 +63,7 @@ export default defineComponent({
});
}else{
resolve(true)
emit('canvasReload')
}
}).then((rv)=>{
if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)

View File

@@ -1,14 +1,14 @@
<template>
<div class="molepositon" :class="{active:!imgDesignImg}">
<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
<div class="designOpenrtion_print" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img v-show="singleOveral.value == 'overall'" class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
<div class="detail_modal_item_front" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<div class="designOpenrtion_btn" v-show="singleOveral.value != 'overall'">
<div class="designOpenrtion_btn">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
@@ -18,7 +18,7 @@
</div>
</div>
<div class="designOpenrtion_imgMask" v-else>
<!-- <img src="" alt=""> -->
<img :src="selectDetail.undividedLayer" alt="">
</div>
</div>
<div class="molepositon" :class="{active:imgDesignImg}">
@@ -339,6 +339,7 @@ export default defineComponent({
}
return{
...toRefs(detailData),
...toRefs(selectItem),
...toRefs(getDetailListDom),
itemSizeMousedown,
@@ -407,9 +408,10 @@ export default defineComponent({
>img{
z-index: 2;
position: relative;
// width: 100%;
width: 100%;
height: 100%;
object-fit: contain;
object-fit: contain;
}
>div{
position: absolute;
@@ -426,11 +428,6 @@ export default defineComponent({
user-select:none;
-webkit-user-drag: none;
}
&.active{
> img{
object-fit: contain;
}
}
.modal_imgItem{
position: absolute;
overflow: hidden;