修改 画布布局

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,

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{
 		

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

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 @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div> -->
-					<!-- <div v-if="item?.isFollow == 0" @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 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()

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;

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,
+					maskMinioUrl:item.layersObject[1]?.maskMinioUrl?item.layersObject[1].maskMinioUrl:'',
-					maskUrl:item.layersObject[1].maskUrl,
+					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;

src/component/Detail/DesignElements.vue

@@ -657,7 +657,7 @@ export default defineComponent({
 			this.exhibitionElementsList = []
 		},
 		closeModal(){
-            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			if(this.designItemDetailTS.rv){
 				let _this = this
 				Modal.confirm({
 					title: this.t('DesignPrintOperation.jsContent1'),
@@ -670,6 +670,9 @@ export default defineComponent({
 						_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;

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;

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,7 +908,7 @@ export default defineComponent({
 			}
 		},
 		closeModal(){
-            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			if(this.designItemDetailTS.rv){
 				let _this = this
 				Modal.confirm({
 					title: this.t('DesignPrintOperation.jsContent1'),
@@ -930,6 +921,9 @@ export default defineComponent({
 						_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;

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;

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;
+		// margin-top: 2.4rem;
-		text-align: center;
+		// text-align: center;
 	}
 }
 </style>

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;

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;

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;

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()">

src/component/HomePage/scaleImage.vue

@@ -439,8 +439,12 @@ export default defineComponent({
     },
 });
 </script>
-
+<style>
-<style lang="less">
+.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);
+		// margin-top: calc(5rem*1.2);
-		height: 75%;
+		// 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%;

src/component/modules/generalMiniCanvas.vue

@@ -10,19 +10,41 @@
 				<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_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 class="editFrontBack_bgImg" v-show="loadingShow">
+						
-						<img :src="imgData?.undividedLayer" alt="">
-					</div> -->
 					</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>
+			
+		</div>
 		<div class="exportCanvasBox_submit" @click="setSubmit">
 			<div class="started_btn">
 				{{ $t('addDetails.submit') }}
@@ -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
+			canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
-			pencilbtnStyle.value.background = rgba
+			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)
+			clearTimeout(setTimeOut.pencilWidth)
-			setTimeOutWidth = setTimeout(()=>{
+			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,14 +389,15 @@ export default defineComponent({
 			}
 			canvas.loadFromJSON(canvasState.value, () => {});
 		}
-		let setSubmit = ()=>{
+		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: "rgba(255, 255, 255,1)",
+					backgroundColor: "#FFFFFF",
 					width: exportWH * ratio[0],
 					height: exportWH * ratio[1],
 					isDrawingMode: false, // 开启绘图模式
@@ -358,14 +427,21 @@ export default defineComponent({
 						)
 						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 = ()=>{
+		let setLiquefaction =async ()=>{
-			const activeObjects = canvas.backgroundImage // 获取选中的对象
+			// 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;
+	width: 100%;
-	// height: calc(512px / 2);
+	// 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_btn{
+	.generalMiniCanvas_input,.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%;
+		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{
+		
 			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>

src/component/modules/liquefaction.vue

@@ -186,7 +186,11 @@ export default defineComponent({
 				canvasBox.addEventListener('mousedown', mousedown);
 				canvasBox.addEventListener('touchstart', touchdown);
 			}
+			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;; 

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%;
 					}