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

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

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

4
src/component/HomePage/ColorboardUpload.vue
View File

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

114
src/component/HomePage/layoutMobile.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<a-modal <a-modal
class="layout_modal" class="layoutMobile_modal"
v-model:visible="layout" v-model:visible="layout"
:footer="null" :footer="null"
width="78%" width="78%"
@@ -12,35 +12,35 @@
:keyboard="false" :keyboard="false"
:destroyOnClose="true" :destroyOnClose="true"
> >
<div class="layout_content"> <div class="layoutMobile_content">
<div class="collection_title"> <div class="collection_title">
<div class="collection_title_text"> <div class="collection_title_text">
<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div> <div class="layoutMobile_title">{{ $t('layout.MoodBoardDesign') }}</div>
</div> </div>
</div> </div>
<div class="collection_closeIcon" @touchstart.stop="cancelDsign()"> <div class="collection_closeIcon" @touchstart.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i> <i class="fi fi-rr-cross-small"></i>
</div> </div>
<div class="layout_nav"> <div class="layoutMobile_nav">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.stop="setpitch(item,index)"> <div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.stop="setpitch(item,index)">
<img :src="item.imgUrl"> <img :src="item.imgUrl">
</div> </div>
</div> </div>
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent"> <div class="layoutMobile_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @touchstart="setpitch(item,index)" ref="content" > <div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @touchstart="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" v-modelImg> <img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" v-modelImg>
<ul v-show="item.setPitch" class="layout_btn" > <ul v-show="item.setPitch" class="layoutMobile_btn" >
<li class="layout_btn_top" v-compile.stop="'top'"></li> <li class="layoutMobile_btn_top" v-compile.stop="'top'"></li>
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li> <li class="layoutMobile_btn_bottom" v-compile.stop="'bottom'"></li>
<li class="layout_btn_left" v-compile.stop="'left'"></li> <li class="layoutMobile_btn_left" v-compile.stop="'left'"></li>
<li class="layout_btn_right" v-compile.stop="'right'"></li> <li class="layoutMobile_btn_right" v-compile.stop="'right'"></li>
<li class="layout_rotote" v-rotote.stop></li> <li class="layoutMobile_rotote" v-rotote.stop></li>
<li class="layout_translate" v-translate.stop></li> <li class="layoutMobile_translate" v-translate.stop></li>
<!-- <li class="layout_translate" v-translate.stop></li> --> <!-- <li class="layoutMobile_translate" v-translate.stop></li> -->
<li class="layout_angle_tr" v-angle.stop = "'top'"></li> <li class="layoutMobile_angle_tr" v-angle.stop = "'top'"></li>
<li class="layout_angle_tl" v-angle.stop = "'right'"></li> <li class="layoutMobile_angle_tl" v-angle.stop = "'right'"></li>
<li class="layout_angle_br" v-angle.stop = "'bottom'"></li> <li class="layoutMobile_angle_br" v-angle.stop = "'bottom'"></li>
<li class="layout_angle_bl" v-angle.stop = "'left'"></li> <li class="layoutMobile_angle_bl" v-angle.stop = "'left'"></li>
</ul> </ul>
</div> </div>
<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> --> <!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
@@ -59,17 +59,17 @@
</draggable> --> </draggable> -->
</div> </div>
<div class="layout_left"> <div class="layoutMobile_left">
<div class="layout_left_text"> <div class="layoutMobile_left_text">
{{ $t('layout.LayerOptions') }} {{ $t('layout.LayerOptions') }}
</div> </div>
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)"> <div v-for="item,index in moodbList" class="layoutMobile_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item"> <div v-for="clasitem,clasindex in item" :class="clasitem" class="layoutMobile_left_item">
</div> </div>
</div> </div>
</div> </div>
<div class="layout_right"> <div class="layoutMobile_right">
<div class="layout_right_text"> <div class="layoutMobile_right_text">
{{ $t('DesignPrintOperation.Scale') }} {{ $t('DesignPrintOperation.Scale') }}
</div> </div>
<a-slider <a-slider
@@ -78,9 +78,9 @@
> >
</a-slider> </a-slider>
</div> </div>
<!-- <div class="layout_right"> <!-- <div class="layoutMobile_right">
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)"> <div v-for="item,index in moodbList" class="layoutMobile_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item"> <div v-for="clasitem,clasindex in item" :class="clasitem" class="layoutMobile_left_item">
</div> </div>
</div> </div>
</div> --> </div> -->
@@ -671,7 +671,7 @@ export default defineComponent({
</script> </script>
<style lang="less"> <style lang="less">
.layout_modal { .layoutMobile_modal {
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@@ -691,7 +691,7 @@ export default defineComponent({
border-radius: calc(1rem*1.2); border-radius: calc(1rem*1.2);
} }
.layout_content { .layoutMobile_content {
// background: #f2f3fb; // background: #f2f3fb;
// padding-bottom: 2.9rem*1.2); // padding-bottom: 2.9rem*1.2);
height: 100%; height: 100%;
@@ -735,7 +735,7 @@ export default defineComponent({
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
} }
} }
.layout_nav{ .layoutMobile_nav{
display: flex; display: flex;
margin-top: calc(2rem*1.2); margin-top: calc(2rem*1.2);
justify-content: center; justify-content: center;
@@ -761,7 +761,7 @@ export default defineComponent({
} }
} }
.layout_centent{ .layoutMobile_centent{
display: flex; display: flex;
// height: 55%; // height: 55%;
height: calc(35rem*1.2); height: calc(35rem*1.2);
@@ -779,7 +779,7 @@ export default defineComponent({
&.active{ &.active{
flex-direction: row; flex-direction: row;
} }
.layout_btn{ .layoutMobile_btn{
list-style: none; list-style: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -800,36 +800,36 @@ export default defineComponent({
position: absolute; position: absolute;
z-index: 1049; z-index: 1049;
} }
.layout_btn_top,.layout_btn_bottom{ .layoutMobile_btn_top,.layoutMobile_btn_bottom{
left: 50%; left: 50%;
transform: translate(-50%,-50%) ; transform: translate(-50%,-50%) ;
cursor: n-resize; cursor: n-resize;
} }
.layout_btn_top{ .layoutMobile_btn_top{
top: 0; top: 0;
} }
.layout_btn_bottom{ .layoutMobile_btn_bottom{
top: 100%; top: 100%;
} }
.layout_btn_left,.layout_btn_right{ .layoutMobile_btn_left,.layoutMobile_btn_right{
top: 50%; top: 50%;
transform: translate(-50%,-50%) ; transform: translate(-50%,-50%) ;
cursor: e-resize; cursor: e-resize;
} }
.layout_btn_left{ .layoutMobile_btn_left{
left: 0; left: 0;
} }
.layout_btn_right{ .layoutMobile_btn_right{
left: 100%; left: 100%;
} }
.layout_rotote{ .layoutMobile_rotote{
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
width: 0; width: 0;
height: 0; height: 0;
} }
.layout_rotote::after{ .layoutMobile_rotote::after{
position: absolute; position: absolute;
content: ""; content: "";
background-color: #14bcff; background-color: #14bcff;
@@ -839,7 +839,7 @@ export default defineComponent({
bottom: 0; bottom: 0;
transform: translateX(-50%); transform: translateX(-50%);
} }
.layout_rotote::before{ .layoutMobile_rotote::before{
position: absolute; position: absolute;
content: ""; content: "";
background-color: #14bcff; background-color: #14bcff;
@@ -850,31 +850,31 @@ export default defineComponent({
height: calc(2rem*1.2); height: calc(2rem*1.2);
border-radius: 50%; border-radius: 50%;
} }
.layout_translate{ .layoutMobile_translate{
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%) ; transform: translate(-50%,-50%) ;
cursor: crosshair; cursor: crosshair;
cursor: move; cursor: move;
} }
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{ .layoutMobile_angle_tr,.layoutMobile_angle_tl,.layoutMobile_angle_br,.layoutMobile_angle_bl{
// opacity: 0; // opacity: 0;
width: calc(2rem*1.2); width: calc(2rem*1.2);
height: calc(2rem*1.2); height: calc(2rem*1.2);
} }
.layout_angle_tr{ .layoutMobile_angle_tr{
right: 0%; right: 0%;
top: 0; top: 0;
} }
.layout_angle_tl{ .layoutMobile_angle_tl{
left: 0%; left: 0%;
top: 0; top: 0;
} }
.layout_angle_br{ .layoutMobile_angle_br{
right: 0%; right: 0%;
bottom: 0%; bottom: 0%;
} }
.layout_angle_bl{ .layoutMobile_angle_bl{
left: 0%; left: 0%;
bottom: 0%; bottom: 0%;
} }
@@ -882,7 +882,7 @@ export default defineComponent({
pointer-events: none; pointer-events: none;
} }
} }
.layout_centent_bor{ .layoutMobile_centent_bor{
} }
.modal_imgItem{ .modal_imgItem{
@@ -939,7 +939,7 @@ export default defineComponent({
width: 48.5%; width: 48.5%;
height: 48%; height: 48%;
} }
.layout_left{ .layoutMobile_left{
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@@ -948,15 +948,15 @@ export default defineComponent({
// background-color: #000; // background-color: #000;
width: 10%; width: 10%;
height: 50%; height: 50%;
&.layout_left::-webkit-scrollbar { &.layoutMobile_left::-webkit-scrollbar {
display: none; display: none;
} }
.layout_left_text{ .layoutMobile_left_text{
font-size: var(--aida-fsize1-6); font-size: var(--aida-fsize1-6);
margin-bottom: calc(1rem*1.2); margin-bottom: calc(1rem*1.2);
color: #000; color: #000;
} }
.layout_left_items{ .layoutMobile_left_items{
width: 100%; width: 100%;
height: calc(6rem*1.2); height: calc(6rem*1.2);
display: flex; display: flex;
@@ -966,13 +966,13 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
margin-bottom: calc(2rem*1.2); margin-bottom: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
.layout_left_item{ .layoutMobile_left_item{
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #000; border: 1px solid #000;
} }
} }
} }
.layout_right{ .layoutMobile_right{
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@@ -980,15 +980,15 @@ export default defineComponent({
// background-color: #000; // background-color: #000;
width: 8%; width: 8%;
height: 50%; height: 50%;
&.layout_left::-webkit-scrollbar { &.layoutMobile_left::-webkit-scrollbar {
display: none; display: none;
} }
.layout_left_text{ .layoutMobile_left_text{
font-size: var(--aida-fsize1-6); font-size: var(--aida-fsize1-6);
margin-bottom: calc(1rem*1.2); margin-bottom: calc(1rem*1.2);
color: #000; color: #000;
} }
.layout_left_items{ .layoutMobile_left_items{
width: 100%; width: 100%;
height: calc(6rem*1.2); height: calc(6rem*1.2);
display: flex; display: flex;
@@ -998,7 +998,7 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
margin-bottom: calc(2rem*1.2); margin-bottom: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
.layout_left_item{ .layoutMobile_left_item{
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #000; border: 1px solid #000;
} }

8
src/views/HomeView/history.vue
View File

@@ -69,8 +69,8 @@
<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div> <div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
<div class="operate_item" @click="renameCollection(record,index)">{{ $t('LibraryPage.Rename') }}</div> <div class="operate_item" @click="renameCollection(record,index)">{{ $t('LibraryPage.Rename') }}</div>
<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div> <div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
<div class="operate_item" @click="setPublish(record)">Publish</div> <!-- <div class="operate_item" @click="setPublish(record)">Publish</div>
<div class="operate_item" @click="updatePublish(record)">Update Publish</div> <div class="operate_item" @click="updatePublish(record)">Update Publish</div> -->
<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div> <div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
</div> </div>
</template> </template>
@@ -125,13 +125,13 @@ export default defineComponent({
let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss') let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
return time return time
}}, }},
{ title: useI18n().t('HistoryPage.SketchCounts'), align:'center', ellipsis: true, width: 80, dataIndex: 'sketchCount', key: 'sketchCounts' }, { title: useI18n().t('HistoryPage.SketchCounts'), align:'center', ellipsis: true, width: 150, dataIndex: 'sketchCount', key: 'sketchCounts' },
{ {
title: useI18n().t('HistoryPage.Operations'), title: useI18n().t('HistoryPage.Operations'),
key: 'operation', key: 'operation',
align:'center', align:'center',
fixed: 'right', fixed: 'right',
width: 180, width: 150,
// slots:{customRender:'action'} // slots:{customRender:'action'}
Operations:true, Operations:true,
}, },