aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 画布布局

Browse Source
This commit is contained in:
X1627315083
2024-10-10 11:32:49 +08:00
parent 982bbee122
commit 03a85a3642
20 changed files with 272 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/style/style.css
View File

@@ -687,7 +687,7 @@ li {
.generalModel .ant-modal-body {
padding: 0;
height: calc(65rem*1.2);
padding: calc(4rem*1.2) calc(5rem*1.2);
padding: calc(5rem*1.2) calc(6rem*1.2);
}
.generalModel .fi-rr-down-to-line,
.generalModel .fi-rr-arrow-small-right,

2
src/assets/style/style.less
View File

@@ -766,7 +766,7 @@ input:focus{
// height: calc(65vh - 6.4rem);
height: calc(65rem*1.2);
// background-color: #181818;
padding: calc(4rem*1.2) calc(5rem*1.2);
padding: calc(5rem*1.2) calc(6rem*1.2);
}
.ant-modal-btn{

3
src/component/Account/account.vue
View File

@@ -165,6 +165,9 @@ export default defineComponent({
background: #fff;
margin-right: 5rem;
margin-left: 5rem;
&.modal_title_text{
z-index: 2;
}
.account_generalMessage_title_setting{
cursor: pointer;
margin-left: auto

8
src/component/Account/followFans/fans.vue
View File

@@ -20,9 +20,9 @@
</div>
</div>
<div class="account_generalMessage_item_left">
<div @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
<!-- <div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div> -->
<!-- <div @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div> -->
<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
</div>
</div>
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
@@ -89,7 +89,7 @@ export default defineComponent({
}
let setFollow = (item:any) =>{
let url = Https.httpUrls.porfolioFollow
// if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
Https.axiosGet(url, {params:{followeeId:item.senderId}})
.then((rv) => {
searchFollowFansList()

4
src/component/Account/otherUsers.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="otherUsers">
<div class="otherUsers_page_titleImg">
<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
<!-- <img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt=""> -->
</div>
<div class="otherUsers_userDetail">
<div class="otherUsers_userDetail_img">
@@ -119,6 +119,8 @@ export default defineComponent({
flex-direction: column;
overflow-y: auto;
.otherUsers_page_titleImg{
flex-shrink: 0;
height: 10rem;
img{
width: 100%;
height: 30rem;

14
src/component/Detail/DesignDetail.vue
View File

@@ -741,8 +741,8 @@ export default defineComponent({
changed:item.changed?item.changed:false,
designType:item.designType?item.designType:"Library",
offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
maskMinioUrl:item.layersObject[1].maskMinioUrl,
maskUrl:item.layersObject[1].maskUrl,
maskMinioUrl:item.layersObject[1]?.maskMinioUrl?item.layersObject[1].maskMinioUrl:'',
maskUrl:item.layersObject?.[1]?.maskUrl?item.layersObject[1].maskUrl:'',
scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:[1,1],
printObject:{
// path:item.printObject.path?item.printObject.path :'',
@@ -1030,6 +1030,13 @@ export default defineComponent({
undividedLayer:'',
sketchString:'',
"layersObject": [
{
maskMinioUrl:'',
maskUrl:'',
},{
maskMinioUrl:'',
maskUrl:'',
},
]
}
// this.designOrder = true
@@ -1059,7 +1066,6 @@ export default defineComponent({
},
//元素替换
clothesDetail(clothes:any, index:number){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.designOrder = true
@@ -1174,7 +1180,7 @@ export default defineComponent({
border-bottom: none;
}
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;

31
src/component/Detail/DesignElements.vue
View File

@@ -657,19 +657,22 @@ export default defineComponent({
this.exhibitionElementsList = []
},
closeModal(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let _this = this
Modal.confirm({
title: this.t('DesignPrintOperation.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.designElements=false
}
});
if(this.designItemDetailTS.rv){
let _this = this
Modal.confirm({
title: this.t('DesignPrintOperation.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.designElements=false
}
});
}else{
this.designElements=false
}
},
},
});
@@ -686,7 +689,7 @@ export default defineComponent({
position: absolute;
}
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;

2
src/component/Detail/DesignElementsMobile.vue
View File

@@ -624,7 +624,7 @@ export default defineComponent({
position: absolute;
}
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;

42
src/component/Detail/DesignPrintOperation.vue
View File

@@ -334,11 +334,6 @@ export default defineComponent({
this.ifListOver()
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
// if(this.overallSingle == false && this.designOpenrtionList.length > 0){
// this.designOpenrtionList[0].checked = true
// }else if(this.overallSingle == false && this.designOpenrtionList.length == 0){
// this.setpitch(this.designList[0],0)
// }
let skecth = new Image
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
@@ -355,17 +350,13 @@ export default defineComponent({
})
})
}
// else if(!this.overallSingle){
// let str = 'overall'
// this.setOverallPosition(0,str)
// }
if(this.exhibitionOpenrtionList.single.length > 0){
let str = 'single'
this.exhibitionOpenrtionList[str].forEach((item,index)=>{
this.setTemplate(item,index,str)
})
}
if(this.exhibitionOpenrtionList.overall.length == 0 && this.exhibitionOpenrtionList.single.length == 0)this.setpitch(this.designList[0],0)
},
setprintList(arr){
arr.forEach(item=>{
@@ -917,19 +908,22 @@ export default defineComponent({
}
},
closeModal(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let _this = this
Modal.confirm({
title: this.t('DesignPrintOperation.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.designOpenrtion=false
}
});
if(this.designItemDetailTS.rv){
let _this = this
Modal.confirm({
title: this.t('DesignPrintOperation.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.designOpenrtion=false
}
});
}else{
this.designOpenrtion=false
}
},
},
});
@@ -946,7 +940,7 @@ export default defineComponent({
position: absolute;
}
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;

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

@@ -890,7 +890,7 @@ export default defineComponent({
position: absolute;
}
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;

7
src/component/Detail/addDetails.vue
View File

@@ -3,10 +3,11 @@
class="addDetails_modal generalModel"
v-model:visible="addDetails"
:footer="null"
width="50%"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
:destroyOnClose="true"
wrapClassName="#app"
:keyboard="false"
>
@@ -81,8 +82,8 @@ export default defineComponent({
margin: 0 auto;
}
.exportCanvasBox_submit{
margin-top: 2.4rem;
text-align: center;
// margin-top: 2.4rem;
// text-align: center;
}
}
</style>

2
src/component/Detail/setDesignItem.vue
View File

@@ -554,7 +554,7 @@ export default defineComponent({
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;

2
src/component/Detail/setDesignItem2.vue
View File

@@ -418,7 +418,7 @@ export default defineComponent({
.designOpenrtion_modal {
// max-width: 1440px;
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;

2
src/component/Detail/setDesignItemMobile.vue
View File

@@ -473,7 +473,7 @@ export default defineComponent({
-khtml-user-select: none;
user-select: none;
.ant-modal-body{
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.calc(4rem*1.2));
height: calc(65rem*1.2);
display: flex;

1
src/component/HomePage/createSlogan.vue
View File

@@ -9,6 +9,7 @@
:closable="false"
wrapClassName="#app"
:keyboard="false"
:destroyOnClose="true"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">

22
src/component/HomePage/scaleImage.vue
View File

@@ -439,8 +439,12 @@ export default defineComponent({
},
});
</script>
<style lang="less">
<style>
.scaleImage_modal{
overflow: initial !important;
}
</style>
<style lang="less" scoped>
.scaleImage_modal {
.ant-modal-body {
display: flex;
@@ -449,8 +453,9 @@ export default defineComponent({
.scaleImage_content{
display: flex;
justify-content: center;
margin-top: calc(5rem*1.2);
height: 75%;
// margin-top: calc(5rem*1.2);
// height: 75%;
height: 100%;
position: relative;
.productImg_modal{
position: absolute;
@@ -467,11 +472,15 @@ export default defineComponent({
}
.scaleImage_content_imgBox{
position: relative;
max-width: 70rem;
// max-width: 70rem;
width: 100%;
text-align: center;
justify-content: center;
img{
width: auto;
height: 100%;
max-width: 40rem;
object-fit: contain;
}
&.active{
display: flex;
@@ -527,6 +536,9 @@ export default defineComponent({
justify-content: center;
align-items: center;
width: 100%;
top: 105%;
left: 0;
position: absolute;
.nav_left,.nav_right{
cursor: pointer;
top: 50%;

258
src/component/modules/generalMiniCanvas.vue
View File

@@ -10,18 +10,40 @@
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> -->
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
</div>
<div class="exportCanvasBox_center_box">
<div class="exportCanvasBox_center">
<!-- <div class="editFrontBack_bgImg" v-show="loadingShow">
<img :src="imgData?.undividedLayer" alt="">
</div> -->
<div class="exportCanvasBox_center_data">
<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}">
<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation')">
<span>{{ $t('exportModel.Size') }}</span>
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
</div>
<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
<span>{{ $t('exportModel.Size') }}</span>{{ canvasPencilWidth.routes }}
<input type="range" @change="routesChange('routes')" min="1" max="100" v-model="canvasPencilWidth.routes">
</div>
<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
<span>{{ $t('exportModel.density') }}</span>
<input type="range" @change="routesChange('density')" min="1" max="100" v-model="canvasPencilWidth.density">
</div>
<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation')">
<span>{{ $t('exportModel.Color') }}</span>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</div>
</div>
<div class="exportCanvasBox_center_box">
<div class="exportCanvasBox_center">
</div>
<!-- <div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div> -->
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
</div>
<div class="exportCanvasBox_submit" @click="setSubmit">
<div class="started_btn">
@@ -88,10 +110,26 @@ export default defineComponent({
canvasPencilWidth:{
pencil:20,
eraser:20,
routes:30,
density:30,
},
canvasPencilColor:'#000000',
spreadState:false,
})
let canvasWH = ref(0);
let arrows = ref({
show:false,
domStyle:{
left:0,
top:0,
width:0,
height:0,
},
jiantouStyle:{
height:'1px',
transform:`translateY(-100%) rotate(${90}deg)`,
}
})
watch(
() => props.imgUrl,
(newValue, oldValue) => {
@@ -139,7 +177,7 @@ export default defineComponent({
height:canvasWH.value * hScale,
})
scale = img.height/canvas.height
pencilbtnStyle.value.background = rgba
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
@@ -219,7 +257,6 @@ export default defineComponent({
document.removeEventListener("keydown", canvasKeyDown);
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = 'rgba(0, 0, 0, 1)'
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setCanvasMove(e)
@@ -250,6 +287,8 @@ export default defineComponent({
}else if(str == 'eraser'){
setEraser()
pencilbtnStyle.value.display = `block`
}else if(str == 'liquidation'){
canvas.isDrawingMode = false
}
}
let setMove = ()=>{
@@ -260,8 +299,8 @@ export default defineComponent({
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
canvas.freeDrawingBrush.color = rgba
pencilbtnStyle.value.background = rgba
canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
canvas.freeDrawingBrush.isEraser = false
setPencilWidth()
}
@@ -290,15 +329,44 @@ export default defineComponent({
canvas.FX_DURATION = 300
})
}
let setTimeOutWidth
let setTimeOut = {
pencilWidth:null,
color:null,
}
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOutWidth)
setTimeOutWidth = setTimeout(()=>{
clearTimeout(setTimeOut.pencilWidth)
setTimeOut.pencilWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
},300)
}
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.color)
// clearTimeout(setTimeOut.colorHistory)
setTimeOut.color = setTimeout(()=>{
pencilColor()
},200)
// setTimeOut.colorHistory = setTimeout(()=>{
// colorHistoryList.value.push(canvasPencilColor.value)
// },1000)
}
let pencilColor = ()=>{
if(canvas.freeDrawingBrush.isEraser){
canvas.freeDrawingBrush.color = '#FFFFFF';
}else{
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor;
}
}
let routesChange = (str)=>{
canvasBtn.canvasPencilWidth[str] = Math.round(canvasBtn.canvasPencilWidth[str]/10)*10;
if (canvasBtn.canvasPencilWidth[str] < 10) {
canvasBtn.canvasPencilWidth[str] = 10; // 设置为最小值
} else if (canvasBtn.canvasPencilWidth[str] > 100) {
canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
}
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
}
@@ -321,51 +389,59 @@ export default defineComponent({
}
canvas.loadFromJSON(canvasState.value, () => {});
}
let setSubmit = ()=>{
var allObjects = canvas.getObjects('path');
// if(allObjects.length == 0){
// return message.info(t('addDetails.jsContent1'))
// }
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255, 255, 255,1)",
width: exportWH * ratio[0],
height: exportWH * ratio[1],
isDrawingMode: false, // 开启绘图模式
});
canvas.backgroundImage.clone((back)=>{
back.set({
scaleX:1,
scaleY:1,
left:back.left*scale,
top:back.top*scale ,
})
exportCanvas.backgroundImage = back
allObjects.forEach((item,index)=>{
// let obj = fabric.util.object.clone(item);
if(item.type == 'circle')return
let obj
item.clone((cloned)=>{
obj = cloned
})
obj.set(
{
scaleX:(item.scaleX?item.scaleX:1)*scale,
scaleY:(item.scaleY?item.scaleY:1)*scale,
left:item.left*scale,
top:item.top*scale,
}
)
exportCanvas.add(obj)
})
let data = canvas.toDataURL({
format: 'png',
quality: 1 // 质量参数，范围 0.0 - 1.0
let setSubmit = (liquefation)=>{
return new Promise((resolve,reject)=>{
var allObjects = canvas.getObjects('path');
// if(allObjects.length == 0){
// return message.info(t('addDetails.jsContent1'))
// }
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
backgroundColor: "#FFFFFF",
width: exportWH * ratio[0],
height: exportWH * ratio[1],
isDrawingMode: false, // 开启绘图模式
});
cancelDsign()
clearCanvas()
emit('submitBase64Data',data)
canvas.backgroundImage.clone((back)=>{
back.set({
scaleX:1,
scaleY:1,
left:back.left*scale,
top:back.top*scale ,
})
exportCanvas.backgroundImage = back
allObjects.forEach((item,index)=>{
// let obj = fabric.util.object.clone(item);
if(item.type == 'circle')return
let obj
item.clone((cloned)=>{
obj = cloned
})
obj.set(
{
scaleX:(item.scaleX?item.scaleX:1)*scale,
scaleY:(item.scaleY?item.scaleY:1)*scale,
left:item.left*scale,
top:item.top*scale,
}
)
exportCanvas.add(obj)
})
let data = canvas.toDataURL({
format: 'png',
quality: 1 // 质量参数，范围 0.0 - 1.0
});
if(liquefation){
return resolve(data)
}
cancelDsign()
clearCanvas()
emit('submitBase64Data',data)
resolve('')
})
})
}
let cancelDsign = ()=>{
document.removeEventListener('keydown',canvasKeyDown);
@@ -401,12 +477,12 @@ export default defineComponent({
canvas.renderAll();
});
}
let setLiquefaction = ()=>{
const activeObjects = canvas.backgroundImage // 获取选中的对象
let setLiquefaction =async ()=>{
// const activeObjects = canvas.backgroundImage // 获取选中的对象
// console.log(setSubmit(true));
let activeObjects = await setSubmit(true)
if (activeObjects) {
liquefactionData.value = activeObjects
console.log(liquefactionData.value);
liquefaction.value.init(activeObjects)
} else {
// message.info(useI18.t('exportModel.jsContent6'))
@@ -420,17 +496,20 @@ export default defineComponent({
t,
pencilbtnStyle,
...toRefs(canvasBtn),
arrows,
liquefactionData,
liquefaction,
init,
setOperation,
setPencilWidth,
setPencilColor,
historyState,
setSubmit,
cancelDsign,
submitLiquefaction,
setLiquefaction,
routesChange,
};
},
data() {
@@ -446,20 +525,21 @@ export default defineComponent({
<style lang="less">
.generalMiniCanvas{
position: relative;
// width: calc(512px / 2);
// width: 256px;
height: 100%;
display: flex;
flex-direction: column;
// height: calc(512px / 2);
width: 100%;
// flex-direction: column;
margin: 0 auto;
flex-direction: row;
flex: 1;
overflow: hidden;
.generalMiniCanvas_item{
// position: relative;
background: #fff;
position: absolute;
display: flex;
border: 0.2rem solid #c4c4c4;
// border: 0.2rem solid #c4c4c4;
width: 25rem;
border-radius: 4px; /* 设置圆角半径 */
flex-wrap: wrap;
@@ -469,19 +549,34 @@ export default defineComponent({
padding: 1rem 0;
}
}
.generalMiniCanvas_input,.generalMiniCanvas_btn{
z-index: 2;
padding: 1rem 1.5rem;
position: relative;
width: auto;
flex-wrap: nowrap;
flex-direction: column;
}
.generalMiniCanvas_input{
flex-direction: row;
align-items: center;
.generalMiniCanvas_input_item{
display: flex;
margin-right: 3rem;
align-items: center;
span{
margin-right: 1rem;
}
}
.generalMiniCanvas_input_item:last-child{
margin-right: 0;
}
}
.generalMiniCanvas_btn{
z-index: 2;
// left: 50%;
min-width: 45rem;
// transform: translate(-50%,-135%);
// transition: all .3s;
padding: 1rem 1.5rem;
// transform: translate(-50%,0);
position: relative;
width: 100%;
flex-direction: row;
input{
// width: 100%;
width: 30rem;
// margin-top: 1rem;
flex: 1;
}
@@ -524,10 +619,16 @@ export default defineComponent({
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
// flex-direction: column;
flex-direction: row;
position: relative;
margin: 0 auto;
}
.exportCanvasBox_center_data{
flex: 1;
display: flex;
flex-direction: column;
}
.exportCanvasBox_center_box{
padding: 3rem;
height: 100%;
@@ -579,7 +680,8 @@ export default defineComponent({
}
}
.exportCanvasBox_submit{
margin-top: 1rem;
margin-top: auto;
margin-left: 1rem;
text-align: center;
}
</style>

6
src/component/modules/liquefaction.vue
View File

@@ -186,7 +186,11 @@ export default defineComponent({
canvasBox.addEventListener('mousedown', mousedown);
canvasBox.addEventListener('touchstart', touchdown);
}
img.src = data._element.src
if(data._element){
img.src = data._element.src
}else{
img.src = data
}
}
let distanceSqr = (x1, y1, x2, y2) => sqr(x1 - x2) + sqr(y1 - y2);
let sqr = (x) => x * x;;

2
src/lang/en.ts
View File

@@ -505,7 +505,7 @@ export default {
inputContent:'Please input',
preview:'Preview',
isOverall:'Pattern images cannot be used in Single mode',
jsContent1:'The above changes are not saved.Are you sure you want to continue? ',
jsContent1:'The above changes are not saved. Are you sure you want to continue? ',
},
uploadFile:{
jsContent1:'You can select up to {maxImg} images',

3
src/views/HomeMain.vue
View File

@@ -855,7 +855,8 @@ export default defineComponent({
.credits_item{
transition: .3s all;
// height: 4rem;
height: 3.2rem;
height: 35px;
// height: 3.2rem;
div{
height: 100%;
}