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
2024-05-16 11:44:30 +08:00
parent 9444e386aa
commit 3abb2bf79e
5 changed files with 123 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/Detail/DesignDetailAlter.vue
View File

@@ -190,11 +190,11 @@
</div>
</div> -->
<div class="color_setting_operateSingle">
<!-- <div class="color_setting_operateSingle">
<div class="started_btn" @click="setOperate">
{{ colorList[selectIndex]?.gradient?.gradientList?.length>1? 'Gradual Change':'Single'}}
</div>
</div>
</div> -->
<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
<div class="color_setting_operate_item color_setting_operate_control">
<div class="operate_item_box">

116
src/component/Detail/DesignPrintOperationMobile.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<a-modal
class="designOpenrtion_modal Guide_1_24"
class="designOpenrtionMobile_modal Guide_1_24"
v-model:visible="designOpenrtion"
:class="[driver__.driver?'hideEvents':'']"
:footer="null"
@@ -12,14 +12,14 @@
:keyboard="false"
:mask="true"
>
<div class="designOpenrtion_content">
<div class="designOpenrtionMobile_content">
<div class="modal_title_text">
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="designOpenrtion_open">
<div class="designOpenrtionMobile_open">
<!-- -->
<div class="print_right">
<div class="habit_Overal_Single">
@@ -52,11 +52,11 @@
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
<i class="fi fi-rr-trash" @click="deletePrint"></i>
</div>
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<div class="designOpenrtionMobile_nav">
<div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_overall" v-show="!overallSingle">
<div class="designOpenrtionMobile_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
</div>
</div>
@@ -65,10 +65,10 @@
</div>
</div>
</div>
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
<div class="designOpenrtion_imgMask">
<div class="designOpenrtion_print" v-show="overallSingle">
<div class="designOpenrtionMobile_centent" id="designOpenrtionCentent">
<!-- <div class="designOpenrtionMobile_imgMask" :style="sketch"> -->
<div class="designOpenrtionMobile_imgMask">
<div class="designOpenrtionMobile_print" v-show="overallSingle">
<div
v-for="item,index in designOpenrtionList"
:key="item"
@@ -76,30 +76,30 @@
@touchstart.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false">
</div>
</div>
<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch"> -->
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch_mask">
<div class="designOpenrtion_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtionMobile_sketch"> -->
<img :src="current?.path" alt="" class="designOpenrtionMobile_sketch">
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtionMobile_sketch_mask">
<div class="designOpenrtionMobile_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtionMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtionMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
</ul>
<div v-show="!overallSingle"></div>
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @touchstart.stop="itemMoveMousedown(index,$event)">
<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @touchstart.stop="itemMoveMousedown(index,$event)">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
</ul>
</div>
</div>
</div>
<div class="designOpenrtion_right">
<div class="designOpenrtion_entirety_img">
<div class="designOpenrtionMobile_right">
<div class="designOpenrtionMobile_entirety_img">
<img :src="currentFullBodyView" alt="">
</div>
</div>
@@ -204,7 +204,7 @@ export default defineComponent({
mounted(el,value){
el.addEventListener('touchstart', (e) => {
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let elParent = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let mouse = true;
let angle = 0
let num = 1
@@ -333,9 +333,9 @@ export default defineComponent({
v.designOpenrtionBtn = false
})
if(!this.overallSingle){
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
this.imgDom = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_Mouoverall")[0]
}else{
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
this.imgDom = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
}
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
@@ -356,7 +356,7 @@ export default defineComponent({
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
this.imgDom = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
@@ -365,7 +365,7 @@ export default defineComponent({
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
let li = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
@@ -382,7 +382,7 @@ export default defineComponent({
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
let parentNode = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
@@ -512,7 +512,7 @@ export default defineComponent({
// let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let sketch = document.getElementsByClassName("designOpenrtionMobile_modal")[0]?.getElementsByClassName('designOpenrtionMobile_sketch')[0]
let width
let scale
if(sketch.width<sketch.height){
@@ -554,7 +554,7 @@ export default defineComponent({
//设置图片
setTemplate(item,index) {
this.designOpenrtionList
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let sketch = document.getElementsByClassName("designOpenrtionMobile_modal")[0]?.getElementsByClassName('designOpenrtionMobile_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let scale
scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
@@ -603,7 +603,7 @@ export default defineComponent({
},
computeSize(arr){
// let num = this.sketch/
let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
let sketch = document.getElementsByClassName("designOpenrtionMobile_sketch")[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
@@ -754,7 +754,7 @@ export default defineComponent({
</script>
<style lang="less">
.designOpenrtion_modal {
.designOpenrtionMobile_modal {
// max-width: 1440px;
.mark_loading{
position: absolute;
@@ -772,13 +772,13 @@ export default defineComponent({
overflow: hidden;
}
.designOpenrtion_content {
.designOpenrtionMobile_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem*1.2);
display: flex;
flex-direction: column;
height: 100%;
.designOpenrtion_header {
.designOpenrtionMobile_header {
position: relative;
height: calc(6.6rem*1.2);
width: 100%;
@@ -795,7 +795,7 @@ export default defineComponent({
}
}
.designOpenrtion_right{
.designOpenrtionMobile_right{
height: calc(50rem*1.2);
position: absolute;
right: calc(2rem*1.2);
@@ -804,7 +804,7 @@ export default defineComponent({
transform: translateY(-50%);
max-height: calc(50rem*1.2);
max-width: calc(30rem*1.2);
.designOpenrtion_entirety_img{
.designOpenrtionMobile_entirety_img{
height: 100%;
img{
max-width: 100%;
@@ -817,7 +817,7 @@ export default defineComponent({
}
}
}
.designOpenrtion_open{
.designOpenrtionMobile_open{
position: absolute;
top: 50%;
transform: translateY(-50%);
@@ -912,7 +912,7 @@ export default defineComponent({
align-items: center;
}
}
.designOpenrtion_nav{
.designOpenrtionMobile_nav{
display: flex;
margin-top: calc(2rem*1.2);
flex-wrap: wrap;
@@ -920,7 +920,7 @@ export default defineComponent({
height: calc(12rem*1.2);
overflow-x: hidden;
justify-content: space-evenly;
&.designOpenrtion_nav::-webkit-scrollbar {
&.designOpenrtionMobile_nav::-webkit-scrollbar {
display: none;
}
.active{
@@ -930,7 +930,7 @@ export default defineComponent({
box-sizing: border-box;
}
}
.designOpenrtion_single{
.designOpenrtionMobile_single{
width: 40%;
margin-bottom: calc(2rem*1.2);
}
@@ -938,7 +938,7 @@ export default defineComponent({
width: 100%;
cursor: pointer;
}
.designOpenrtion_overall{
.designOpenrtionMobile_overall{
width: 80%;
}
}
@@ -949,7 +949,7 @@ export default defineComponent({
}
}
}
.designOpenrtion_centent{
.designOpenrtionMobile_centent{
margin: 0 auto;
overflow: hidden;
justify-content: space-between;
@@ -963,7 +963,7 @@ export default defineComponent({
&.active{
flex-direction: row;
}
.designOpenrtion_imgMask{
.designOpenrtionMobile_imgMask{
width: auto;
height: auto;
position: relative;
@@ -979,7 +979,7 @@ export default defineComponent({
width: auto;
max-width: calc(60rem*1.2);
}
.designOpenrtion_sketch_mask{
.designOpenrtionMobile_sketch_mask{
z-index: 3;
position: absolute;
inset: 0;
@@ -992,7 +992,7 @@ export default defineComponent({
top: 0;
}
}
.designOpenrtion_print{
.designOpenrtionMobile_print{
z-index: 3;
.modal_imgItem{
position: absolute;
@@ -1007,7 +1007,7 @@ export default defineComponent({
}
}
}
.designOpenrtion_btn{
.designOpenrtionMobile_btn{
z-index: 3;
>div{
width: 100%;
@@ -1030,7 +1030,7 @@ export default defineComponent({
opacity: 0;
margin: 0;
&.designOpenrtion_Mouoverall{
&.designOpenrtionMobile_Mouoverall{
opacity: 1;
border: none;
width: calc(1.4rem*1.2);
@@ -1076,36 +1076,36 @@ export default defineComponent({
pointer-events: auto;
}
}
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
.designOpenrtionMobile_btn_top,.designOpenrtionMobile_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designOpenrtion_btn_top{
.designOpenrtionMobile_btn_top{
top: 0;
}
.designOpenrtion_btn_bottom{
.designOpenrtionMobile_btn_bottom{
top: 100%;
}
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
.designOpenrtionMobile_btn_left,.designOpenrtionMobile_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designOpenrtion_btn_left{
.designOpenrtionMobile_btn_left{
left: 0;
}
.designOpenrtion_btn_right{
.designOpenrtionMobile_btn_right{
left: 100%;
}
.designOpenrtion_rotote{
.designOpenrtionMobile_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designOpenrtion_rotote::after{
.designOpenrtionMobile_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
@@ -1115,7 +1115,7 @@ export default defineComponent({
bottom: 0;
transform: translateX(-50%);
}
.designOpenrtion_rotote::before{
.designOpenrtionMobile_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;