From 03a85a364269d1a280579f157e8c05438402f5fb Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Thu, 10 Oct 2024 11:32:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/style.css                    |   2 +-
 src/assets/style/style.less                   |   2 +-
 src/component/Account/account.vue             |   3 +
 src/component/Account/followFans/fans.vue     |   8 +-
 src/component/Account/otherUsers.vue          |   4 +-
 src/component/Detail/DesignDetail.vue         |  14 +-
 src/component/Detail/DesignElements.vue       |  31 ++-
 src/component/Detail/DesignElementsMobile.vue |   2 +-
 src/component/Detail/DesignPrintOperation.vue |  42 ++-
 .../Detail/DesignPrintOperationMobile.vue     |   2 +-
 src/component/Detail/addDetails.vue           |   7 +-
 src/component/Detail/setDesignItem.vue        |   2 +-
 src/component/Detail/setDesignItem2.vue       |   2 +-
 src/component/Detail/setDesignItemMobile.vue  |   2 +-
 src/component/HomePage/createSlogan.vue       |   1 +
 src/component/HomePage/scaleImage.vue         |  22 +-
 src/component/modules/generalMiniCanvas.vue   | 258 ++++++++++++------
 src/component/modules/liquefaction.vue        |   6 +-
 src/lang/en.ts                                |   2 +-
 src/views/HomeMain.vue                        |   3 +-
 20 files changed, 272 insertions(+), 143 deletions(-)

diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 368bfd1a..00042789 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -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,
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index fb67b37c..5bb2c654 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -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{
 		
diff --git a/src/component/Account/account.vue b/src/component/Account/account.vue
index 79766644..c6ec60f7 100644
--- a/src/component/Account/account.vue
+++ b/src/component/Account/account.vue
@@ -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
diff --git a/src/component/Account/followFans/fans.vue b/src/component/Account/followFans/fans.vue
index 6cc607ad..66e832d5 100644
--- a/src/component/Account/followFans/fans.vue
+++ b/src/component/Account/followFans/fans.vue
@@ -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()
diff --git a/src/component/Account/otherUsers.vue b/src/component/Account/otherUsers.vue
index 35ad71dd..057b3dcf 100644
--- a/src/component/Account/otherUsers.vue
+++ b/src/component/Account/otherUsers.vue
@@ -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;
diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue
index a59d3b30..fbfda305 100644
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -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;
diff --git a/src/component/Detail/DesignElements.vue b/src/component/Detail/DesignElements.vue
index c8bfb444..0c799c46 100644
--- a/src/component/Detail/DesignElements.vue
+++ b/src/component/Detail/DesignElements.vue
@@ -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;
diff --git a/src/component/Detail/DesignElementsMobile.vue b/src/component/Detail/DesignElementsMobile.vue
index 251396d8..c90ef2b5 100644
--- a/src/component/Detail/DesignElementsMobile.vue
+++ b/src/component/Detail/DesignElementsMobile.vue
@@ -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;
diff --git a/src/component/Detail/DesignPrintOperation.vue b/src/component/Detail/DesignPrintOperation.vue
index a118521b..f39044d2 100644
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -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;
diff --git a/src/component/Detail/DesignPrintOperationMobile.vue b/src/component/Detail/DesignPrintOperationMobile.vue
index 004f7820..7af42e5b 100644
--- a/src/component/Detail/DesignPrintOperationMobile.vue
+++ b/src/component/Detail/DesignPrintOperationMobile.vue
@@ -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;
diff --git a/src/component/Detail/addDetails.vue b/src/component/Detail/addDetails.vue
index 75238731..eff266d3 100644
--- a/src/component/Detail/addDetails.vue
+++ b/src/component/Detail/addDetails.vue
@@ -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>
\ No newline at end of file
diff --git a/src/component/Detail/setDesignItem.vue b/src/component/Detail/setDesignItem.vue
index 373862b3..a2866634 100644
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -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;
diff --git a/src/component/Detail/setDesignItem2.vue b/src/component/Detail/setDesignItem2.vue
index 55ca8e60..0cdf0043 100644
--- a/src/component/Detail/setDesignItem2.vue
+++ b/src/component/Detail/setDesignItem2.vue
@@ -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;
diff --git a/src/component/Detail/setDesignItemMobile.vue b/src/component/Detail/setDesignItemMobile.vue
index a26f6d41..83eb0504 100644
--- a/src/component/Detail/setDesignItemMobile.vue
+++ b/src/component/Detail/setDesignItemMobile.vue
@@ -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;
diff --git a/src/component/HomePage/createSlogan.vue b/src/component/HomePage/createSlogan.vue
index 033ff5b7..bdf3d564 100644
--- a/src/component/HomePage/createSlogan.vue
+++ b/src/component/HomePage/createSlogan.vue
@@ -9,6 +9,7 @@
         :closable="false"
         wrapClassName="#app"
         :keyboard="false"
+		:destroyOnClose="true"
     >
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
diff --git a/src/component/HomePage/scaleImage.vue b/src/component/HomePage/scaleImage.vue
index 341184b5..c6780bae 100644
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -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%;
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index e0a6b004..b270f6ef 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -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>
\ No newline at end of file
diff --git a/src/component/modules/liquefaction.vue b/src/component/modules/liquefaction.vue
index 854d568c..cf9aade6 100644
--- a/src/component/modules/liquefaction.vue
+++ b/src/component/modules/liquefaction.vue
@@ -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;; 
diff --git a/src/lang/en.ts b/src/lang/en.ts
index cdb2c6cb..47cb64ea 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -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',
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index 88ac9b87..fd00c75c 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -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%;
 					}