diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index bbeb7bdf..1ca0a1a6 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -774,6 +774,8 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   transition: all 0.3s;
   box-sizing: content-box;
   border: 1px solid;
+  height: 100%;
+  box-sizing: border-box;
 }
 .generalModel_state .generalModel_state_item .el-cascader .el-cascader__tags,
 .generalModel_state .generalModel_state_item .el-cascader .el-input {
@@ -868,6 +870,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 }
 .ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
   background-color: #f3f3f6;
+  width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 .generalModel {
   -moz-user-select: none;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 0a3b2c37..00c2ac19 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -844,6 +844,8 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 			transition: all .3s;
 			box-sizing: content-box;
 			border: 1px solid;
+			height: 100%;
+			box-sizing: border-box;
 			.el-cascader__tags,.el-input{
 				height: 100%;
 			}
@@ -941,6 +943,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	border-radius: 1rem;
 	.ant-select-item-option-selected:not(.ant-select-item-option-disabled){
 		background-color: #f3f3f6;
+		width: 100%;
+		overflow: hidden;
+		box-sizing: border-box;
 	}
 }
 
@@ -977,6 +982,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 		font-size: 1.4rem;
 		padding: calc(5rem*1.2) calc(6rem*1.2);
 		position: relative;
+
 	}
 	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
 		font-size: 2rem;
diff --git a/src/component/Account/frontPage/cancelRenewal.vue b/src/component/Account/frontPage/cancelRenewal.vue
index f5449753..82a1ab7b 100644
--- a/src/component/Account/frontPage/cancelRenewal.vue
+++ b/src/component/Account/frontPage/cancelRenewal.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="cancelRenewal_page">
-		<div v-if="userDetail.status != 'expired' && userDetail.systemUser != 3">
+		<div v-if="userDetail.status == 'active' && userDetail.systemUser != 3" class="renewal">
 			<div class="cancel_box_item">
 				<div class="modal_title_text">
 					<div>{{ $t('cancelRenewal.cancelling') }}</div>
@@ -29,15 +29,16 @@
 					<i class="fi fi-sr-triangle-warning"></i>
 					<div>{{ $t('cancelRenewal.DonWorry') }}</div>
 				</div> -->
-				<div class="button_box">
-					<div class="gallery_btn white" @click="subscribe">{{ $t('cancelRenewal.Continue') }}</div>
-					<div class="gallery_btn" @click="cancelSubscription">{{ $t('cancelRenewal.cancel') }}</div>
-				</div>
 			</div>
+			
 		</div>
 		<div v-else class="no_renewal">
 			{{ $t('cancelRenewal.subscriptionRenewal') }}
 		</div>
+		<div class="button_box">
+			<div class="gallery_btn white" v-if="userDetail.status != 'active' && userDetail.systemUser != 3" @click="subscribe">{{ $t('cancelRenewal.Continue') }}</div>
+			<div class="gallery_btn" v-else @click="cancelSubscription">{{ $t('cancelRenewal.cancel') }}</div>
+		</div>
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
 		</div>
@@ -135,13 +136,24 @@ export default defineComponent({
 	height: 100%;
 	overflow-y: auto;
 	padding-bottom: 2rem;
-	>div{
+	>.button_box{
+		display: flex;
+		margin-top: 2.5rem;
+		justify-content: flex-end;
+		>div:nth-child(1){
+			margin-right: 1rem;
+			// width: calc((100% - 1rem) / 2);
+		}
+	}
+	>.no_renewal,.renewal{
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+		min-height: 40rem;
 		&.no_renewal{
 			font-size: 2rem;
-			font-weight: 400;
+			font-weight: 600;
+			justify-content: center;
 		}
 	}
 	.cancel_box_item{
@@ -189,16 +201,6 @@ export default defineComponent({
 				border: 1px solid #000;
 			}
 		}
-		
-		>.button_box{
-			display: flex;
-			margin-top: 2.5rem;
-			justify-content: flex-end;
-			>div:nth-child(1){
-				margin-right: 1rem;
-				// width: calc((100% - 1rem) / 2);
-			}
-		}
 	}
 	.cancel_box_item:last-child{
 		margin: 0;
diff --git a/src/component/Account/frontPage/mylnformation.vue b/src/component/Account/frontPage/mylnformation.vue
index 1bec69e8..5d0ac454 100644
--- a/src/component/Account/frontPage/mylnformation.vue
+++ b/src/component/Account/frontPage/mylnformation.vue
@@ -1,6 +1,24 @@
 <template>
     <div class="accountEdit_page">
 		<div class="accountEdit_page_body">
+			<div class="accountEdit_page_body_item">
+				<div class="accountEdit_page_body_item_name">{{$t('account.Name')}}:</div>
+				<div class="accountEdit_page_body_item_inut" style="display: flex;justify-content: space-between;">
+					<a-select
+						class="gallerySelect"
+						v-model:value="selectSex"
+						size="large"
+						optionFilterProp="label"
+						style="width: 30%;"
+						:options="sexList"
+						:placeholder="$t('account.plaseSelectSex')"
+						allowClear
+						show-search
+					></a-select>
+					<input class="login_form_input" style="width: 30%;" :class="{active:!!userDetail.occupation}" type="text" :placeholder="$t('account.plaseFirst')" v-model="surname">
+					<input class="login_form_input" style="width: 30%;" :class="{active:!!userDetail.occupation}" type="text" :placeholder="$t('account.plaseLast')" v-model="givenName">
+				</div>
+			</div>
 			<div class="accountEdit_page_body_item">
 				<div class="accountEdit_page_body_item_name">{{$t('account.Country')}}:</div>
 				<div class="accountEdit_page_body_item_inut">
@@ -52,18 +70,55 @@ export default defineComponent({
 			Country:'',
 			CompanyName:'',
 			loadingShow:false,
-			countryList:country
+			countryList:country,
+			sexList:computed(()=>{
+			  	return[
+				 	{label:t('account.Mr'),value:'Mr'},
+					{label:t('account.Ms'),value:'Ms'},
+					{label:t('account.Miss'),value:'Miss'},
+				]  
+			}),
+			selectSex:null,
+			surname:'',
+			givenName:'',
 		})
 		let setSubmit = ()=>{
 			let data = {
 				country:accountHomeData.Country,
-				occupation:accountHomeData.CompanyName
+				occupation:accountHomeData.CompanyName,
+				title:accountHomeData.selectSex,
+				surname:accountHomeData.surname,
+				givenName:accountHomeData.givenName,
+			}
+			if (!data.occupation) {
+				message.info(t('account.jsContent7'));
+				return;
+			}
+			if (!data.country) {
+				message.info(t('account.jsContent8'));
+				return;
+			}
+			if (!data.title) {
+				message.info(t('account.jsContent9'));
+				return;
+			}
+			if (!data.surname) {
+				message.info(t('account.jsContent10'));
+				return;
+			}
+			if (!data.givenName) {
+				message.info(t('account.jsContent11'));
+				return;
 			}
 			accountHomeData.loadingShow = true
-			Https.axiosGet(Https.httpUrls.updateUserInfo,{params:data}).
+			Https.axiosPost(Https.httpUrls.updateUserInfo,data).
 				then((rv:any)=>{
 					let value = {
-						userName:accountHomeData.editUserName
+						country:accountHomeData.Country,
+						title:accountHomeData.selectSex,
+						userName:accountHomeData.editUserName,
+						surname:accountHomeData.surname,
+						givenName:accountHomeData.givenName,
 					}
 					store.commit('upUserDetail',value)
 					accountHomeData.loadingShow = false
@@ -75,8 +130,14 @@ export default defineComponent({
 		onMounted(()=>{
 			let country = userDetail.value.country
 			let CompanyName = userDetail.value.occupation
+			let title = userDetail.value.title
+			let surname = userDetail.value.surname
+			let givenName = userDetail.value.givenName
 			accountHomeData.Country = country
 			accountHomeData.CompanyName = CompanyName
+			accountHomeData.selectSex = title
+			accountHomeData.surname = surname
+			accountHomeData.givenName = givenName
 		})
         return{
            ...toRefs(accountHomeData),
@@ -107,6 +168,19 @@ export default defineComponent({
 			.gallery_btn{
 				margin-left: auto;
 			}
+			.gallerySelect{
+				box-sizing: border-box;
+				height: 40px;
+				:deep(.ant-select-selector){
+					height: 40px;
+					border: 2px solid #D0D0D0;
+					border-radius: 1.6rem;
+					align-items: center;
+				}
+				:deep(.ant-select-selector):hover{
+					border: 2px solid #000;
+				}
+			}
 			input,textarea{
 				padding-left: 11px;
 				border-radius: 1.6rem;
diff --git a/src/component/Administrator/TestClickData.vue b/src/component/Administrator/TestClickData.vue
index b61ceb42..5abe8492 100644
--- a/src/component/Administrator/TestClickData.vue
+++ b/src/component/Administrator/TestClickData.vue
@@ -287,7 +287,7 @@ export default defineComponent({
                 : '00:00:00';
             let endTime: any = this.rangeTimeValue[1]
                 ? this.rangeTimeValue[1]
-                : '00:00:00';
+                : '23:59:59';
 			let startDate: any = this.rangePickerValue[0]
                 ? this.rangePickerValue[0]+' '+startTime
                 : "";
diff --git a/src/component/Detail/DesignElements.vue b/src/component/Detail/DesignElements.vue
index e52f8bcf..8c41bed3 100644
--- a/src/component/Detail/DesignElements.vue
+++ b/src/component/Detail/DesignElements.vue
@@ -70,7 +70,7 @@
 									<img src="../../assets/images/homePage/cuowu.svg" alt="">
 								</li>
 							</ul>
-							<div></div>
+							<!-- <div></div> -->
 						</div>
 					</div>
 				</div>
@@ -261,7 +261,7 @@ export default defineComponent({
 			if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
 			if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
 			let skecth = new Image
-			skecth.src = this.current.path
+			skecth.src = this.current.undividedLayer || this.current.path
 			skecth.onload=()=>{
 				this.sketch.width = skecth.width/10+'rem'
 				this.sketch.height = skecth.height/10+'rem'
@@ -526,8 +526,10 @@ export default defineComponent({
 						top:top,
 						right:"auto",
 						bottom:"auto",
-						width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
-						height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
+						// width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
+						// height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
+						width:sketch.offsetWidth*item.scale[0]+'px',
+						height:sketch.offsetHeight*item.scale[1]+'px',
 						zIndex:zIndex++
 					},
 					transform:{
@@ -565,7 +567,7 @@ export default defineComponent({
 				let location
 				for (let index = 0; index < arr.length; index++) {
 					await this.setPrintWH(this.exhibitionElementsList[index].path)
-					scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+					scale = [arr[index].style.width.replace(/px/g,'')/sketch.offsetWidth,(arr[index].style.height.replace(/px/g,'')/sketch.offsetHeight)]
 					location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
 					let obj = {
 						angle : arr[index].transform.rotateZ,
diff --git a/src/component/Detail/DesignPrintOperation.vue b/src/component/Detail/DesignPrintOperation.vue
index bbea789f..bee89417 100644
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -108,12 +108,12 @@
 						</div>
 						<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
 						<div class="designOpenrtion_btn">
-							<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
+							<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
 								<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
 								<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
 								<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
 								<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
-								<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
+								<li class="designOpenrtion_rotote" v-rotote.stop="[index,item?.transform]"></li>
 								<li class="designOpenrtion_delete" @click.stop="deletePrint">
 									<img src="../../assets/images/homePage/cuowu.svg" alt="">
 								</li>
@@ -122,7 +122,7 @@
 							<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
 								<i class="fi fi-rr-arrows animtion1"></i>
 								<i class="fi fi-rr-arrows animtion2"></i>
-								<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>
+								<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0]?.transform]"></li>
 
 
 								
@@ -330,7 +330,7 @@ export default defineComponent({
 			},
 	},
     methods: {
-		init(){
+		async init(){
 			this.designOpenrtion = true
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			this.currentFullBodyView = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
@@ -348,12 +348,16 @@ export default defineComponent({
 			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))
 			let skecth = new Image
-			skecth.onload=()=>{
-				this.sketch.width = skecth.width/10+'rem'
-				this.sketch.height = skecth.height/10+'rem'
-				skecth.remove()
-			}
-			skecth.src = this.current.path
+			skecth.src = this.current.undividedLayer || this.current.path
+			await new Promise((resolve, reject) => {
+				skecth.onload=()=>{
+					this.sketch.width = skecth.width/10+'rem'
+					this.sketch.height = skecth.height/10+'rem'
+					skecth.remove()
+					resolve()
+				}
+			})
+			
 			if(this.exhibitionOpenrtionList.overall.length > 0){
 				let str = 'overall'
 				this.exhibitionOpenrtionList[str].forEach((item,index)=>{
@@ -449,7 +453,7 @@ export default defineComponent({
 					location:[0,0],
 					ifSingle:false,
 				}
-				this.systemDesignerPercentage = item.scale?item.scale*100:30
+				this.systemDesignerPercentage = (item.scale?.[0] && !item.ifSingle)?item.scale[0]*100:30
 			}else{
 				this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
 				let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
@@ -460,7 +464,7 @@ export default defineComponent({
 					minIOPath:item.minIOPath,
 					path:item.path,
 					priority:1,
-					scale:1,
+					scale:[1,1],
 					location:[0,0],
 					ifSingle:true,
 				})
@@ -705,39 +709,44 @@ export default defineComponent({
 			let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
 			let sketchImg = new Image()
 			sketchImg.onload = ()=>{
-				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
-				let scale
-				scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
-				let zIndex = 1
-				let left = item.location[0]/sketchNum+'px'
-				let top = item.location[1]/sketchNum+'px'
-				if(sketch.offsetWidth < item.location[0]/sketchNum){
-					left = sketch.offsetWidth +'px'
-				}
-				if(sketch.offsetHeight < item.location[1]/sketchNum){
-					top = sketch.offsetHeight +'px'
-				}
-				if(str == 'overall')this.systemDesignerPercentage = item.scale?item.scale*100:30
-				this.printStyleList[str][index]={
-					centers:{
-						left:0,
-						top:0,
-					},
-					style:{
-						left:left,
-						top:top,
-						right:"auto",
-						bottom:"auto",
-						width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
-						height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
-						zIndex:zIndex++
-					},
-					transform:{
-						// scale:scale<.2?.2:scale,//0.2-3
-						rotateZ:item.angle,
-					},
-					designOpenrtionBtn:false
-				}
+				nextTick(()=>{
+				    let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+					let scale
+					scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+					let zIndex = 1
+					let left = item.location[0]/sketchNum+'px'
+					let top = item.location[1]/sketchNum+'px'
+					if(sketch.offsetWidth < item.location[0]/sketchNum){
+						left = sketch.offsetWidth +'px'
+					}
+					if(sketch.offsetHeight < item.location[1]/sketchNum){
+						top = sketch.offsetHeight +'px'
+					}
+					if(str == 'overall')this.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
+					this.printStyleList[str][index]={
+						centers:{
+							left:0,
+							top:0,
+						},
+						style:{
+							left:left,
+							top:top,
+							right:"auto",
+							bottom:"auto",
+							// width:this.print.width.replace(/px/g,'')/sketchNum*item.scale[0]+'px',
+							// height:this.print.height.replace(/px/g,'')/sketchNum*item.scale[1]+'px',
+							width:sketch.offsetWidth*item.scale[0]+'px',
+							height:sketch.offsetHeight*item.scale[1]+'px',
+							zIndex:zIndex++
+						},
+						transform:{
+							// scale:scale<.2?.2:scale,//0.2-3
+							rotateZ:item.angle,
+						},
+						designOpenrtionBtn:false
+					}
+				})
+				
 				sketchImg.remove()
 			}
 			sketchImg.src = sketch.src
@@ -799,21 +808,22 @@ export default defineComponent({
 				let scale
 				let location
 				for (let index = 0; index < arr.length; index++) {
-					if(!this.overallSingle){
-						scale = this.systemDesignerPercentage/100
+					if(this.stateOverallSingle == 'overall'){
+					// if(!this.overallSingle){
+						scale =[ this.systemDesignerPercentage/100, this.systemDesignerPercentage/100]
 						let overallScale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
 						let x = Number(arr[index].style.left.replace(/px/g,''))
 						let y = Number(arr[index].style.top.replace(/px/g,''))
 						// let x = (Number(arr[index].style.left.replace(/px/g,'')) + Number(arr[index].style.width.replace(/px/g,''))/2)*sketchNum
 						// let y = (Number(arr[index].style.top.replace(/px/g,'')) + Number(arr[index].style.height.replace(/px/g,''))/2)*sketchNum
-						let width = Number(this.print.width.replace(/px/g,''))*scale/5/2
-						let height = Number(this.print.height.replace(/px/g,''))*scale/5/2
+						let width = Number(this.print.width.replace(/px/g,''))*scale[0]/5/2
+						let height = Number(this.print.height.replace(/px/g,''))*scale[0]/5/2
+						location = [(x*sketchNum) ,(y*sketchNum)]
+						// location = [(x*sketchNum) - width/sketchNum/2 ,(y*sketchNum) - height/sketchNum/2]
 						
-						// location = [(x*sketchNum) ,(y*sketchNum)]
-						location = [(x*sketchNum) - width/sketchNum/2 ,(y*sketchNum) - height/sketchNum/2]
 					}else{
 						await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
-						scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+						scale = [arr[index].style.width.replace(/px/g,'')/sketch.offsetWidth,(arr[index].style.height.replace(/px/g,'')/sketch.offsetHeight)]
 						location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
 					}
 					let obj = {
diff --git a/src/component/Detail/setDesignItem.vue b/src/component/Detail/setDesignItem.vue
index 03609a54..ab78c0c5 100644
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -515,6 +515,7 @@ export default defineComponent({
 						for (let index = 0; index < rv.clothes.length; index++) {
 							if(rv.clothes[index].id === item.id && !rv.clothes[index].similarity){
 								item.layersObject = rv.clothes[index].layersObject
+								item.undividedLayer = rv.clothes[index].undividedLayer
 								item.priority = rv.clothes[index].layersObject[0].priority
 								rv.clothes[index].similarity = true
 								break
diff --git a/src/component/DetailCopy/canvas/argument.vue b/src/component/DetailCopy/canvas/argument.vue
new file mode 100644
index 00000000..2677ba87
--- /dev/null
+++ b/src/component/DetailCopy/canvas/argument.vue
@@ -0,0 +1,197 @@
+<template>
+	<div class="canvasArgument">
+		 <div class="label_item wH">
+			 <div class="title">{{ $t('exportModel.Width') }}</div>
+			 <input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
+		 </div>
+		 <div class="label_item wH">
+			 <div class="title">{{ $t('exportModel.Height') }}</div>
+			 <input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
+		 </div>
+		 <div class="label_item" v-show="
+			 canvasGeneral.operation != 'movePosition' && 
+			 canvasGeneral.operation != 'move' && 
+			 canvasGeneral.operation != 'eraser' && 
+			 canvasGeneral.operation != 'texture' && 
+			 canvasGeneral.operation != 'zoomIn'  && 
+			 canvasGeneral.operation != 'zoomOut' && 
+			 canvasGeneral.operation != 'dashedPencil' && 
+			 canvasGeneral.operation != 'dashed'">
+			 <div class="title">{{ $t('exportModel.Color') }}</div>
+			 <input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
+			 <span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
+			 <div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
+				 <div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
+			 </div>
+		 </div>
+		 <div class="label_item" v-show="
+			 canvasGeneral.operation != 'movePosition' && 
+			 canvasGeneral.operation != 'move' && 
+			 canvasGeneral.brushwork.value != 'RibbonBrush' && 
+			 canvasGeneral.brushwork.value != 'LongfurBrush'&& 
+			 canvasGeneral.operation != 'zoomIn'  &&
+			 canvasGeneral.operation != 'zoomOut' && 
+			 canvasGeneral.operation != 'dashedPencil' && 
+			 canvasGeneral.operation != 'dashed'">
+			 <div >{{ $t('exportModel.Size') }}:</div>
+			 <input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
+		 </div>
+		 <div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
+			 <div >{{ $t('exportModel.Brushwork') }}:</div>
+			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
+				 style="width: 12rem "
+				 @change="canvasGeneral.brushworkChange"
+				 >
+				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
+					 <img style="width: 100%;" :src="item.url" alt="">
+				 </a-select-option>
+			 </a-select>
+		 </div>
+		 <div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
+			 <div >{{ $t('exportModel.Texture') }}:</div>
+			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
+				 style="width: 12rem "
+				 @change="canvasGeneral.textureValueChange"
+				 >
+				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
+					 <img :src="item.url" alt="">
+				 </a-select-option>
+			 </a-select>
+		 </div>
+		 <div class="label_item" v-show="
+			 canvasGeneral.operation != 'pencil' && 
+			 canvasGeneral.operation != 'eraser'&&
+			 canvasGeneral.operation != 'movePosition' && 
+			 canvasGeneral.operation != 'move'&&
+			 canvasGeneral.operation != 'text'&&
+			 canvasGeneral.operation != 'texture'&&
+			 canvasGeneral.operation != ''&& 
+			 canvasGeneral.operation != 'zoomIn'  && 
+			 canvasGeneral.operation != 'zoomOut' && 
+			 canvasGeneral.operation != 'dashedPencil' && 
+			 canvasGeneral.operation != 'dashed'">
+			 <div >{{ $t('exportModel.FillBack') }}:</div>
+			 <div class="leftAlign">
+				 <i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
+				 <i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
+			 </div>
+		 </div>
+		 <!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
+			 <div >{{ $t('exportModel.Layer') }}:</div>
+			 <div class="leftAlign">
+				 <i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
+				 <i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
+				 <i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
+				 <i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
+			 </div>
+		 </div> -->
+		 <div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
+			 <div>Font Family</div>
+			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
+				 style="flex: 1;width: 15rem;"
+				 @change="canvasGeneral.setFontFamily"
+				 :style="{'font-family':canvasGeneral.fontFamily}"
+				 >
+				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
+					 {{item.name}}
+				 </a-select-option>
+			 </a-select>
+		 </div>
+	 </div>
+ </template>
+ 
+ <script lang="ts">
+	 import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+	 export default defineComponent({
+		 components:{},
+		 setup(){
+			 let testModal = ref(true)
+			 let canvasGeneral:any = inject('canvasObj')
+			 const data = reactive({
+				 colorHistoryList:[],
+				 operation:'',
+			 })
+			 const setOperation = (str:any)=>{
+				 data.operation = str
+			 }
+			 const setOper = ()=>{
+				 setOperation('')
+			 }
+			 document.addEventListener('click',setOper)
+			 const closeModal = ()=>{
+				 document.removeEventListener('click',setOper)
+			 }
+			 return {
+				 canvasGeneral,
+				 ...toRefs(data),
+				 testModal,
+				 setOperation,
+				 closeModal,
+			 }
+		 }
+	 });
+ </script>
+ 
+ <style lang='less' scoped>
+ .canvasArgument{
+	 display: flex;
+	 flex-wrap: wrap;
+	 height: 100%;
+	 .label_item{
+		 margin-right: 2rem;
+		 position: relative;
+		 display: flex;
+		 align-items: center;
+		 .leftAlign{
+			 display: flex;
+		 }
+		 .labelHover_show{
+			 position: absolute;
+			 width: 100%;
+			 height: 10rem;
+			 top: 100%;
+			 z-index: 2;
+			 display: block;
+			 border-radius: 4px;
+			 border: 1px solid;
+			 padding: .5rem 1rem;
+			 background: #fff;
+			 div{
+				 width: 2rem;
+				 height: 2rem;
+				 margin-right: .5rem;
+				 margin-bottom: .5rem;
+				 display: inline-block;
+				 cursor: pointer;
+			 }
+		 }
+		 input{
+			 height: 100%;
+		 }
+		 &.wH input{
+			 width: 5rem;
+		 }
+		 .title{
+			 margin-right: 1rem;
+		 }
+		 .icon-xiala{
+			 cursor: pointer;
+			 transform: rotate(0deg);
+			 height: 4rem;
+			 width: 4rem;
+			 transition: all .3s;
+			 line-height: 4rem;
+			 text-align: center;
+			 &.active{
+				 transform: rotate(180deg);
+			 }
+		 }
+	 }
+	 .label_item:hover{
+		 // .labelHover_show{
+		 // 	display: flex;
+		 // }
+	 }
+ }
+ 
+ </style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/canvas/canvasContent.vue b/src/component/DetailCopy/canvas/canvasContent.vue
new file mode 100644
index 00000000..28c5690f
--- /dev/null
+++ b/src/component/DetailCopy/canvas/canvasContent.vue
@@ -0,0 +1,184 @@
+<template>
+	<div class="canvasContent_box">
+		<div class="canvasContent" ref="canvasScaleDom">
+			<div v-if="isPresuppose" class="generalCanvas_center presuppose">
+				<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
+				<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
+				<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
+			</div>
+			<div v-else class="generalCanvas_center canvas" ref="canvasDom">
+				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
+	import { Modal,message } from 'ant-design-vue';
+	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+	import { useI18n } from 'vue-i18n'
+	export default defineComponent({
+		component:{},
+		setup(){
+			let {t} = useI18n()
+			let canvasType = inject('canvasType')
+			let canvasGeneral:any = inject('canvasObj')
+			const data:any = reactive({
+				canvasScaleDom:null,
+				canvasDom:null,
+				isPresuppose:false,
+				isShowMark:false,
+				pencilbtnStyle:{},
+				
+			})
+			const createCanvas = (canvasSize:any)=>{
+				data.isPresuppose = false
+				nextTick(()=>{
+					canvasGeneral.canvasInit(data.canvasDom,canvasSize)
+					console.log(canvasGeneral);
+
+				})
+			}
+			const openMode = (data:any)=>{
+				let {yes,no} = data
+				console.log(yes,no);
+				Modal.confirm({
+						title: '是否栅格化',
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							yes()
+						},
+						onCancel(){
+							no()
+						}
+					});
+				yes()
+				
+			}
+			// canvasGeneral.openMode.fun = openMode
+			const setPresuppose = (presuppose:any)=>{
+				let canvasDomSize = {
+					width:data.canvasScaleDom.offsetWidth,
+					height:data.canvasScaleDom.offsetHeight,
+				}
+				let width,height
+				let scale = [0,0]
+				if(presuppose == '16/9'){
+					// scale[0] = 16
+					// scale[1] = 9
+					width = 1600
+					height = 900
+				}else if(presuppose == '1/1'){
+					// scale[0] = 1
+					// scale[1] = 1
+					width = 1000
+					height = 1000
+				}else if(presuppose == '9/16'){
+				    // scale[0] = 9
+					// scale[1] = 16
+					width = 900
+					height = 1600
+				}
+				// let mbHeight = canvasDomSize.width / scale[0] * scale[1]
+				// if(mbHeight < canvasDomSize.height){
+				// 	width = canvasDomSize.width
+				// 	height = mbHeight
+				// }else{
+				// 	width = canvasDomSize.height / scale[1] * scale[0]
+				// 	height = canvasDomSize.height
+				// }
+				let canvasSize = {width,height}
+				createCanvas(canvasSize)
+			}
+			onMounted(()=>{
+				if(canvasType == 'export'){
+					data.isPresuppose = true
+				}else{
+					createCanvas({})
+				}
+				
+			})
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				setPresuppose,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasContent_box{
+	height: 100%;
+	width: 100%;
+	// padding: 2rem;
+	background: #e6e6e6;
+	.canvasContent{
+		height: 100%;
+		width: 100%;
+		position: relative;
+	}
+}
+
+.generalCanvas_center{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow: hidden;
+	&.canvas{
+	}
+	&.presuppose{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		> div{
+			border: 1rem solid #6b6b6b;
+			color: #6b6b6b;
+			display: flex;
+			margin-right: 2rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 3rem;
+			font-weight: 900;
+			cursor: pointer;
+			border-radius: 4px;
+			&:last-child{
+				margin-right: 0;
+			}
+			&.presuppose16-9{
+				height: calc(30rem / 16 * 9);
+				width: 30rem;
+			}
+			&.presuppose1-1{
+				height: 30rem;
+				width: 30rem;
+			}
+			&.presuppose9-16{
+				height: 30rem;
+				width: calc(30rem / 16 * 9);
+			}
+		}
+	}
+	.editFrontBack_pencilbtn{
+		position: absolute;
+		z-index: 1;
+		border-radius: 50%;
+		border: 1px solid #000;
+		pointer-events: none;
+		transform: translate(-50%,-50%);
+	}
+	:deep(.canvas-container){
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+	}
+}
+
+</style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/canvas/index.vue b/src/component/DetailCopy/canvas/index.vue
new file mode 100644
index 00000000..54be64da
--- /dev/null
+++ b/src/component/DetailCopy/canvas/index.vue
@@ -0,0 +1,121 @@
+<template>
+    <div class="canvasBox">
+		<!-- designDetailShow -->
+		<!-- :class="[driver__.driver?'hideEvents':'']" -->
+		 <div class="canvasContent">
+			<div class="argument-box">
+				<argument ref="argument" v-if="canvasObj.canvas"></argument>
+			</div>
+			<div class="canvas">
+				<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
+				<div class="canvas">
+					<canvasContent ref="canvasContent"></canvasContent>
+				</div>
+			</div>
+		 </div>
+		
+		<!-- <div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div> -->
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+
+import canvasGeneral from "@/tool/canvasGeneralCopy";
+import argument from './argument.vue'
+import canvasContent from './canvasContent.vue'
+import tool from "./tool.vue"
+
+export default defineComponent({
+    components:{
+		tool,argument,canvasContent,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+      
+		const detailDom = reactive({
+			model:null
+		})
+		const userDetail = computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
+		const detailData = reactive({
+			canvasObj:canvasGeneral,
+
+
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			designDetailShow:false,
+			loadingShow:false,
+			isEditPattern:{
+				value:false,
+			},// 是否编辑图案
+		})
+ 	
+		onBeforeUnmount(()=>{
+		})
+        return{
+			...toRefs(detailDom),
+			...toRefs(detailData),
+        }
+    },
+	provide() {
+		return {
+		}
+	},
+	mounted(){
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .canvasBox{
+		flex: 1;
+		overflow: hidden;
+		// top: -100%;
+		display: flex;
+		align-items: center;
+		.argument-box,
+		.canvas,
+		.detail-box{
+			:deep(i){
+				font-size: 2.5rem;
+				cursor: pointer;
+				width: 3rem;
+				height: 3rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				transition: all .3s;
+				margin-bottom: .5rem;
+				&.active{
+					border: 1px solid;
+					border-radius: .4rem;
+				}
+				&.icon-xiala{
+					transform: rotate(-90deg);
+				}
+				&.icon-xialaActive{
+					transform: rotate(90deg);
+				}
+			}
+		}
+		.canvasContent{
+			height: 73rem;
+			width: 100%;
+			border: 2px solid #000;
+			border-radius: 3rem;
+			padding: 4rem;
+		}
+		
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/canvas/tool.vue b/src/component/DetailCopy/canvas/tool.vue
new file mode 100644
index 00000000..dd392ef0
--- /dev/null
+++ b/src/component/DetailCopy/canvas/tool.vue
@@ -0,0 +1,168 @@
+<template>
+   <div class="canvasTool">
+		<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+		<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
+		<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
+		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
+		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
+		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
+		<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
+		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
+		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
+		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
+		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
+		<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
+		<div class="label_item uploadImage">
+			<i class="icon fi fi-br-upload" ></i>
+			<input type="file" @change="uploadImage">
+		</div>
+		<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
+		<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
+		<div class="btnModal" v-show="isMove" :style="moveStyle">
+			<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
+			<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
+			<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
+			<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
+			<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
+			<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+import {base64ToFile} from '@/tool/util'
+import { Https } from "@/tool/https";
+	export default defineComponent({
+		component:{},
+		emits:['toolLiquefaction'],
+		setup(props,{emit}){
+			let canvasGeneral:any = inject('canvasObj')
+			let isShowMark:any = inject('isShowMark')
+			const data:any = reactive({
+				isMove:false,
+				moveStyle:{},
+			})
+			const uploadImage = (event:any)=>{
+				isShowMark.value = true
+				const file = event.target.files[0];
+				let input = event.target
+				setOperation('movePosition')
+				if (file) {
+					const reader = new FileReader();
+					reader.onload = (e:any) => {
+						let file = base64ToFile(e.target.result,'upload')
+						let formData = new FormData();
+						formData.append("file", file);
+						let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+						Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
+							rv.imgUrl = rv.minioUrl
+							isShowMark.value = false
+							canvasGeneral.addImage(rv)
+						})
+						input.value = ''
+					};
+					reader.readAsDataURL(file);
+				}
+			}
+			const historyState = (str:any)=>{
+				canvasGeneral.historyState(str)
+			}
+			const setOperation = (str:any)=>{
+				canvasGeneral.setOperation(str)
+			}
+			const openMore = (e:any)=>{
+				data.isMove=!data.isMove
+				if(data.isMove){
+					let domPoint = e.target.getBoundingClientRect()
+					let domParentPoint = e.target.parentElement.getBoundingClientRect()
+					const left = domPoint.left - domParentPoint.left;
+					const top = domPoint.top - domParentPoint.top;
+
+					data.moveStyle.top = top + 'px'
+					data.moveStyle.left = left + domPoint.width + 2 + 'px'
+				}
+			}
+			const setMore = ()=>{
+				data.isMove = false
+			}
+			let setLiquefaction = ()=>{
+				emit('toolLiquefaction')
+			}
+			document.addEventListener('click',setMore)
+			const closeModal = ()=>{
+				document.removeEventListener('click',setMore)
+			}
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				uploadImage,
+				historyState,
+				setOperation,
+				openMore,
+				closeModal,
+				setLiquefaction,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasTool::-webkit-scrollbar{
+	display: none;
+}
+.canvasTool{
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	align-items: center;
+	&.leftAlign{
+		justify-content: flex-start;
+	}
+	&.leftAlign{
+		justify-content: flex-start;
+	}
+	
+	.uploadImage{
+		width: 3rem;
+		height: 3rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		i{
+			zoom:.8;
+		}
+		input{
+			height: 0;
+			width: 0;
+			border: none;
+		}
+	}
+	.uploadImage{
+		position: relative;
+		input{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			opacity: 0;
+			z-index: 2;
+			cursor: pointer;
+		}
+	}
+	.btnModal{
+		position: absolute;
+		z-index: 2;
+		background: #fff;
+		top: 0;
+		border: 1px solid;
+		display: flex;
+		padding: .5rem 1rem;
+		border-radius: 4px;
+	}
+}
+
+</style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/designDetail.vue b/src/component/DetailCopy/designDetail.vue
index fa99cb3d..18062dd6 100644
--- a/src/component/DetailCopy/designDetail.vue
+++ b/src/component/DetailCopy/designDetail.vue
@@ -41,12 +41,13 @@
 						</div>
 					</div>
 				</div>
-				<div class="item detailLeft">
+				<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
 					<detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft>
 				</div>
+
 				<div class="item model">
-					<model ref="model"></model>
-					<div>
+					<model ref="model" @detailEdit="detailEdit"></model>
+					<div class="btn">
 						<div class="gallery_btn" @click="submit">Submit</div>
 						<div class="gallery_btn" @click="previwe">Preview</div>
 					</div>
@@ -54,9 +55,12 @@
 				<div class="item detailRight">
 					<div class="submit">
 					</div>
-					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType">
+					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && !isEditPattern.value">
 						<detailRight></detailRight>
 					</div>
+					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
+						<canvasBox></canvasBox>
+					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
 					</div> -->
@@ -77,6 +81,7 @@ import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,t
 import detailLeft from './detailLeft/index.vue'
 import model from './model/index.vue'
 import detailRight from './detailRight/index.vue'
+import canvasBox from './canvas/index.vue'
 
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -89,7 +94,7 @@ import { useI18n } from 'vue-i18n'
 import addDetails from '@/component/Detail/addDetails.vue'
 export default defineComponent({
     components:{
-		detailLeft,model,detailRight
+		detailLeft,model,detailRight,canvasBox
     },
 	emits:['destroy'],
     setup(props,{emit}) {
@@ -107,14 +112,17 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			designDetailShow:false,
 			loadingShow:false,
+			isEditPattern:{
+				value:false,
+			},// 是否编辑图案
 		})
+		provide('isEditPattern',detailData.isEditPattern)
 		const closeModal = ()=>{
 			detailData.designDetailShow = false
 			emit('destroy')
 		}
 		
 		const showDesignDetailModal = (data:any,str:any)=>{
-			
             let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
             detailData.loadingShow = true
             Https.axiosGet(url).then(
@@ -147,14 +155,6 @@ export default defineComponent({
 					// this.deleteShow = false
 
 					setRevocation(rv,'')
-					// if(rv.singleOverall == 'overall'){
-					// 	this.body = false
-					// }else{
-					// 	this.body = true
-					// }
-					// await this.setImgSize()
-                    // this.generateHighDesignImg = rv.highDesignUrl
-                    // this.designDetailShow = true
                     detailData.loadingShow = false
 					// await this.setImgSize() 
                 }
@@ -268,6 +268,14 @@ export default defineComponent({
 			let data = getSubmitData('preview')
 			store.dispatch('DesignDetailCopy/setSubmit',data)
 		}
+		const detailEdit = (str:any)=>{
+			console.log(str);
+			if(str == 'edit'){
+				detailData.isEditPattern.value = !detailData.isEditPattern.value 
+				console.log(detailData.isEditPattern);
+				
+			}
+		}
 		onBeforeUnmount(()=>{
 			store.commit('DesignDetailCopy/clearDesignDetail')
 		})
@@ -279,6 +287,7 @@ export default defineComponent({
 			setCurrentDetail,
 			previwe,
 			submit,
+			detailEdit,
         }
     },
 	provide() {
@@ -350,9 +359,11 @@ export default defineComponent({
 			width: 100%;
 			> .item{
 				height: 100%;
+				overflow: hidden;
 				&.detailLeft{
 					width: 34rem;
 				}
+				&.isEditPattern{width: 0;}
 				&.model{
 					width: 50rem;
 					margin: 0 10rem;
@@ -380,6 +391,16 @@ export default defineComponent({
 						margin-bottom: 0;
 					}
 				}
+				> .btn{
+					display: flex;
+					justify-content: center;
+					> div{
+						margin-right: 2rem;
+					}
+					> div:last-child{
+						margin-right: 0rem;
+					}
+				}
 			}
 			> .nav{
 				margin-right: 5rem;
diff --git a/src/component/DetailCopy/detailLeft/color/index.vue b/src/component/DetailCopy/detailLeft/colorBox/index.vue
similarity index 100%
rename from src/component/DetailCopy/detailLeft/color/index.vue
rename to src/component/DetailCopy/detailLeft/colorBox/index.vue
diff --git a/src/component/DetailCopy/detailLeft/color/pallet.vue b/src/component/DetailCopy/detailLeft/colorBox/pallet.vue
similarity index 100%
rename from src/component/DetailCopy/detailLeft/color/pallet.vue
rename to src/component/DetailCopy/detailLeft/colorBox/pallet.vue
diff --git a/src/component/DetailCopy/detailLeft/color/upload.vue b/src/component/DetailCopy/detailLeft/colorBox/upload.vue
similarity index 100%
rename from src/component/DetailCopy/detailLeft/color/upload.vue
rename to src/component/DetailCopy/detailLeft/colorBox/upload.vue
diff --git a/src/component/DetailCopy/detailLeft/index.vue b/src/component/DetailCopy/detailLeft/index.vue
index e7e3aad1..b437270b 100644
--- a/src/component/DetailCopy/detailLeft/index.vue
+++ b/src/component/DetailCopy/detailLeft/index.vue
@@ -15,7 +15,7 @@ import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import sketch from './sketch.vue'
 import print from './print.vue'
-import color from './color/index.vue'
+import color from './colorBox/index.vue'
 
 export default defineComponent({
     components:{
diff --git a/src/component/DetailCopy/model/index.vue b/src/component/DetailCopy/model/index.vue
index 48f73d77..3fbbebd9 100644
--- a/src/component/DetailCopy/model/index.vue
+++ b/src/component/DetailCopy/model/index.vue
@@ -6,9 +6,9 @@
 		<div class="modelindex_right">
 			<div class="detail_btn">
 				<!-- 全屏 --> 
-				<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
+				<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i>
 				<!-- 编辑 -->
-				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
+				<i class="fi fi-rr-edit" :class="{active:isEditPattern.value}" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail('edit')"></i>
 				<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
 				<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
 
@@ -35,6 +35,7 @@ export default defineComponent({
     components:{
 		position,modelNav
     },
+	emits:['detailEdit'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -45,6 +46,7 @@ export default defineComponent({
 			pageSize:10,
 			currentPage:1,
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			isEditPattern:inject('isEditPattern') as any
 		})
 		const getDetailListDom = reactive({
 			libraryList:null as any,
@@ -53,8 +55,8 @@ export default defineComponent({
 		const getSubmitData = (value:any)=>{
 			return getDetailListDom.position.getSubmitData(value)
 		}
-		const showDesignImgDetail = ()=>{
-
+		const showDesignImgDetail = (str:any)=>{
+			emit('detailEdit',str)
 		}
 		const deleteNav = ()=>{
 
@@ -98,13 +100,32 @@ export default defineComponent({
 				width: 100%;
 				display: flex;
 				justify-content: space-between;
+				border-radius: 1rem;
+				padding: .7rem ;
 				> i{
 					font-size: 2rem;
+					line-height: 4rem;
+					cursor: pointer;
+					padding: 1.5rem;
+					display: flex;
+					align-items: center;
+					border-radius: .6rem;
+					overflow: hidden;
+					transition: all .3s;
 				}
+				> i:hover{
+					background: #000000;
+					color: #fff;
+				}
+				> .active{
+					background: #000000;
+					color: #fff;
+				}	
 			}
 		}
 		.modelindex_left{
 			justify-content: center;
 		}
+	
 	}
 </style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/model/modelNav.vue b/src/component/DetailCopy/model/modelNav.vue
index def0e3b1..52bc60d3 100644
--- a/src/component/DetailCopy/model/modelNav.vue
+++ b/src/component/DetailCopy/model/modelNav.vue
@@ -9,10 +9,11 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
+import { defineComponent,computed,createVNode,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { ExclamationCircleOutlined, } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import position from './modelPosition.vue';
@@ -22,17 +23,40 @@ export default defineComponent({
     },
     setup(props,{emit}) {
         const store = useStore();
+		const {t} = useI18n()
 		const detailData = reactive({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
 			designvDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 			frontBack:{} as any,
+			isEditPattern:inject('isEditPattern') as any
 		})
 		watch(()=>detailData.frontBack_,(newFollowVue)=>{
 			detailData.frontBack = newFollowVue
 		})
 		const selectDetailItem = (item:any,index:number)=>{
-			store.commit('DesignDetailCopy/setDesignColthes',item.id)
+			new Promise((resolve, reject) => {
+				if(detailData.isEditPattern.value && detailData.selectDetail?.id){
+					Modal.confirm({
+						title: t('collectionModal.jsContent2'),
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							resolve(true)
+						},
+						onCancel(){
+							resolve(false)
+						}
+					});
+				}else{
+					resolve(true)
+				}
+			}).then((rv)=>{
+				if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
+			})
 		}
 		// onBeforeUnmount(()=>{
 		// 	detailData.selectIndex = -1
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index c48c2e14..26856aca 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -923,7 +923,7 @@ export default defineComponent({
             this.searchPictureName = "";
         },
 		onPaste(e:any){
-			if(e.clipboardData.items[0] && !this.isTextarea && this.upload.level1Type !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
+			if(e.clipboardData.files[0] && !this.isTextarea && this.upload.level1Type !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
 				let param = new FormData(); 
 				param.append('inPin','0')
 				param.append('gender',this.upload.gender)
diff --git a/src/component/HomePage/bindEmail.vue b/src/component/HomePage/bindEmail.vue
index 7f0df67c..955b26a1 100644
--- a/src/component/HomePage/bindEmail.vue
+++ b/src/component/HomePage/bindEmail.vue
@@ -1,12 +1,12 @@
 <template>
-	<div ref="register"></div>
+	<div ref="register" class="bindEmail"></div>
 	<a-modal
 		class="register generalModel"
 		:get-container="() => $refs.register"
 		v-model:visible="registerModel"
 		:footer="null"
 		:width="pageWidth"
-		:height="bindType == 'Modify'?'60rem':'70rem'"
+		:height="bindType == 'Modify'?'60rem':'80rem'"
 		:maskClosable="false"
 		:centered="true"
 		:closable="false"
@@ -26,7 +26,7 @@
 		<div class="generalModel_btn back" v-if="bindType != 'Modify'">
 			<div class="generalModel_closeIcon" @click.stop="setBack()">
 				<span>←</span>
-				<span class="back_text">Back</span>
+				<span class="back_text">{{ $t('account.back') }}</span>
 			</div>
 		</div>
 		<div class="login_page">
@@ -41,25 +41,43 @@
 									'login_active',
 								]"
 							>
-								<span v-if="bindType == 'Modify'">Modify Email</span>
-								<span v-else>Bind personal information</span>
+								<span v-if="bindType == 'Modify'">{{ $t('account.ModifyEmail') }}</span>
+								<span v-else>{{ $t('account.information') }}</span>
 							</div>
 						</div>
 						<!-- 账号密码登录 start -->
 						<!-- v-show="login$props.Type == 'username'" -->
 						<div >
 							<div class="login_form_content" :state="emailStap">
-								<div class="login_form_title marign_top30">Email</div>
+								<div class="login_form_title marign_top30">{{ $t('account.Email') }} <span class="must">*</span></div>
 								<input
 									class="login_form_input"
 									:class="{active:(userDetail.email !== '-------------') && bindType != 'Modify'}"
-									placeholder="Enter your email address"
+									:placeholder="$t('account.plaseEmail')"
 									v-model="email"
 									:disabled="(userDetail.email !== '-------------') && bindType != 'Modify'"								
 									@keydown.enter="submitPerLogin()"
 								/>
+								
 								<div v-if="bindType != 'Modify'">
-									<div class="login_form_title marign_top30">{{$t('account.Country')}}:</div>
+									<div class="login_form_title marign_top30">{{ $t('account.Name') }}<span class="must">*</span></div>
+									<div style="display: flex;justify-content: space-between;">
+										<a-select
+											class="gallerySelect"
+											v-model:value="selectSex"
+											:disabled="!!userDetail.title"
+											size="large"
+											optionFilterProp="label"
+											style="width: 30%;"
+											:options="sexList"
+											:placeholder="$t('account.plaseSelectSex')"
+											allowClear
+											show-search
+										></a-select>
+										<input class="login_form_input" style="width: 30%;" :class="{active:!!userDetail.surname}" :disabled="!!userDetail.surname" type="text" :placeholder="$t('account.plaseFirst')" v-model="surname">
+										<input class="login_form_input" style="width: 30%;" :class="{active:!!userDetail.givenName}" :disabled="!!userDetail.givenName" type="text" :placeholder="$t('account.plaseLast')" v-model="givenName">
+									</div>
+									<div class="login_form_title marign_top30">{{$t('account.Country')}}:<span class="must">*</span></div>
 									<div class="login_form_select">
 										<a-select
 											class="gallerySelect"
@@ -69,14 +87,14 @@
 											optionFilterProp="label"
 											style="width: 100%;"
 											:options="countryList"
-											placeholder="Please select"
+											:placeholder="$t('account.plaseCountry')"
 											allowClear
 											show-search
 										></a-select>
 									</div>
 									
-									<div class="login_form_title marign_top30">{{$t('account.CompanyName')}}:</div>
-									<input class="login_form_input" :class="{active:!!userDetail.occupation}" :disabled="!!userDetail.occupation" type="text" placeholder="Please enter occupation" v-model="CompanyName">
+									<div class="login_form_title marign_top30">{{$t('account.CompanyName')}}:<span class="must">*</span></div>
+									<input class="login_form_input" :class="{active:!!userDetail.occupation}" :disabled="!!userDetail.occupation" type="text" :placeholder="$t('account.plaseCompanyName')" v-model="CompanyName">
 								</div>
 						
 							<!-- 邮箱登录 start -->
@@ -157,7 +175,7 @@ export default defineComponent({
 		const bindType = ''
 		const router = useRouter()
         let timer:any =  0;
-		const {locale} = useI18n()
+		const {locale,t} = useI18n()
 		const store = useStore();
 		let userDetail:any= computed(()=>{
 			return store.state.UserHabit.userDetail
@@ -171,6 +189,15 @@ export default defineComponent({
 		let userEmail = computed(()=>{
 			return store.state.UserHabit.userDetail.email
 		})
+		let userSex = computed(()=>{
+			return store.state.UserHabit.userDetail.title
+		})
+		let userSurname = computed(()=>{
+			return store.state.UserHabit.userDetail.surname
+		})
+		let userGivenName = computed(()=>{
+			return store.state.UserHabit.userDetail.givenName
+		})
 		let register = reactive({
 			registerModel:computed(()=>{
 				return store.state.UserHabit.bindEmail.isBindEmail
@@ -180,10 +207,20 @@ export default defineComponent({
 			}),
 			registerModelMask:true,
 			pageWidth:'45%',
-			Country:'',
+			Country:null,
 			CompanyName:'',
 			countryList:country,
 			email:'',
+			sexList:computed(()=> {
+				return [
+					{label:t('account.Mr'),value:'Mr'},
+					{label:t('account.Ms'),value:'Ms'},
+					{label:t('account.Miss'),value:'Miss'},
+				]
+			}),
+			selectSex:null,
+			surname:'',
+			givenName:'',
 		})
 		watch(userCountry,(newValue,oldValue)=>{
 			register.Country = newValue
@@ -194,6 +231,15 @@ export default defineComponent({
 		watch(userEmail,(newValue:any,oldValue)=>{
 			register.email = newValue == '-------------'?'':newValue
 		})
+		watch(userSex,(newValue,oldValue)=>{
+			register.selectSex = newValue
+		})
+		watch(userSurname,(newValue,oldValue)=>{
+			register.surname = newValue
+		})
+		watch(userGivenName,(newValue,oldValue)=>{
+			register.givenName = newValue
+		})
         return{
 			router,
 			store,
@@ -294,6 +340,18 @@ export default defineComponent({
 					message.info("Please select a country");
 					return;
 				}
+				if (!this.selectSex && this.bindType != 'Modify') {
+					message.info("Please select a title");
+					return;
+				}
+				if (!this.surname && this.bindType != 'Modify') {
+					message.info("Please select a surname");
+					return;
+				}
+				if (!this.givenName && this.bindType != 'Modify') {
+					message.info("Please select a givenName");
+					return;
+				}
 				let type = 'BIND_MAILBOX'
 				if(this.email == this.userDetail.email && this.bindType != 'Modify')type = 'UPDATE_USERINFO'
 				let data = {
@@ -301,7 +359,10 @@ export default defineComponent({
 					"ip": "",
 					"operationType": type,
 					occupation:this.CompanyName,
-					country:this.Country
+					country:this.Country,
+					title:this.selectSex,
+					surname:this.surname,
+					givenName:this.givenName,
 				};
 				if(this.loginTime){
 					this.loginTime = false
@@ -402,6 +463,11 @@ export default defineComponent({
 }
 </style>
 <style lang="less" scoped>
+.bindEmail{
+	:deep(.ant-modal-mask){
+		background: #666666db;
+	}
+}
 .generalModel_btn{
 	&.back{
 		.generalModel_closeIcon{
@@ -414,6 +480,7 @@ export default defineComponent({
 			transform: translate(100%, 100%);
 			.back_text{
 				text-decoration: underline;
+				white-space: nowrap;
 			}
 			span{
 				margin-right: .5rem;
@@ -497,6 +564,12 @@ export default defineComponent({
                     display: flex;
                     justify-content: space-between;
                     box-sizing: border-box;
+					> .must{
+						color: red;
+						margin-right: auto;
+						margin-left: 2px;
+						margin-top: -1%;
+					}
 					label{
 						display: flex;
 						span{
@@ -542,6 +615,7 @@ export default defineComponent({
 						height: 5rem;
 						border: 0.1rem solid #dfdfdf;
 						border-radius: 2.5rem;
+						align-items: center;
 					}
 					:deep(.ant-select-selector):hover{
 						border: 0.1rem solid #000;
diff --git a/src/component/HomePage/generalMenu.vue b/src/component/HomePage/generalMenu.vue
index ae311bd1..e894e020 100644
--- a/src/component/HomePage/generalMenu.vue
+++ b/src/component/HomePage/generalMenu.vue
@@ -201,6 +201,7 @@ import { message, Upload, Modal } from "ant-design-vue";
  //衣服类型下拉菜单
  .generalMenu_printModel{
 		margin-right: 2rem;
+		height: 6rem;
 		.icon-xiala{
 			margin-left: auto;
 			transition: all .3s;
@@ -221,6 +222,9 @@ import { message, Upload, Modal } from "ant-design-vue";
 			display: flex;
 			font-size: 1.8rem;
 			justify-content: space-around;
+			height: 100%;
+			box-sizing: border-box;
+			align-items: center;
 			> span{
 				white-space: nowrap; 
 				overflow: hidden;
diff --git a/src/component/HomePage/renew.vue b/src/component/HomePage/renew.vue
index 08916fa7..69f51f25 100644
--- a/src/component/HomePage/renew.vue
+++ b/src/component/HomePage/renew.vue
@@ -31,11 +31,11 @@
 				{{ $t('Renew.title') }}
 			</div>
 			<div class="renew_detail">
-				<div class="name generalModelTitle">{{ current.title }}</div>
+				<div class="name generalModelTitle">{{ current?.title }}</div>
 				<div class="price_box">
 					<div class="price">
 						<sub>$</sub>
-						{{ current.price[current.type] }} <span>{{ current.unit[current.type] }}</span>
+						{{ current?.price[current?.type] }} <span>{{ current?.unit[current?.type] }}</span>
 					</div>
 					<div class="type" v-if="current.typeList.length > 1">
 						<label>
@@ -47,7 +47,13 @@
 							{{ $t('Renew.Yearly') }}
 						</label>
 					</div>
-					<div class="info">{{ current.info }}</div>
+					<div class="autoRenewal">
+						<label>
+							{{ current.autoRenewal.text }} : 
+							<a-switch v-model:checked="current.autoRenewal.value" />
+						</label>
+					</div>
+					<div class="info">{{ current?.info }}</div>
 				</div>
 				<div class="gallery_btn gallery_btn_radius" @click="payment">{{ $t('Renew.SubscribeNow') }}</div>
 			</div>
@@ -73,7 +79,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
+import { defineComponent,computed,reactive,toRefs ,onMounted} from "vue";
 import { message } from "ant-design-vue";
 import payMethod from "@/component/Pay/payMethod.vue";
 import { useStore } from "vuex";
@@ -92,22 +98,47 @@ export default defineComponent({
 			pageWidth:'50%'
 		})
 		let renewData = reactive({
-			personage:{
-				title:t('Renew.PersonalVersion'),
-				price:{
-					monthly:'500',
-					year:'5,000',
-				},
-				unit:{
-					monthly:t('Renew.HKDMonth'),
-					year:t('Renew.HKDYear'),
-				},
-				type:'monthly',
-				typeList:['monthly','year'],
-				info:'Tax, VAT not included.',
-			},
-			firm:{
-				title:'Education Edition',
+			personage:computed(()=>{
+			    return {
+					title:t('Renew.PersonalVersion'),
+					price:{
+						monthly:'500',
+						year:'5,000',
+					},
+					unit:{
+						monthly:t('Renew.HKDMonth'),
+						year:t('Renew.HKDYear'),
+					},
+					type:'monthly',
+					autoRenewal:{
+						text:t('Renew.automatically'),
+						value:true,
+					},
+					typeList:['monthly','year'],
+					info:'Tax, VAT not included.',
+				}
+			}),
+			firm:computed(()=>{
+			    return {
+					title:'Education Edition',
+					price:{
+						year:'500',
+					},
+					unit:{
+						year:'HKD / Year',
+					},
+					type:'year',
+					autoRenewal:{
+						text:t('Renew.automatically'),
+						value:true,
+					},
+					typeList:['year'],
+					info:'Customised plan',
+				}
+			}),
+			education:computed(()=>{
+			    return {
+					title:'Enterprise Edition',
 				price:{
 					year:'500',
 				},
@@ -115,21 +146,14 @@ export default defineComponent({
 					year:'HKD / Year',
 				},
 				type:'year',
+				autoRenewal:{
+					text:t('Renew.automatically'),
+					value:true,
+				},
 				typeList:['year'],
 				info:'Customised plan',
-			},
-			education:{
-				title:'Enterprise Edition',
-				price:{
-					year:'500',
-				},
-				unit:{
-					year:'HKD / Year',
-				},
-				type:'year',
-				typeList:['year'],
-				info:'Customised plan',
-			},
+				}
+			}),
 			current:{
 
 			} as any,	
@@ -149,10 +173,12 @@ export default defineComponent({
 			let subscribeType = 'Year'
 			if(renewData.current.type == 'monthly')subscribeType= 'Month'
 			let data = {
-				autoRenewal:true,//one_time为不自动续费
+				autoRenewal:renewData.current.autoRenewal.value,//one_time为不自动续费
+				// autoRenewal:true,//one_time为不自动续费
 				productName:'Subscription',
 				subscribeType,//yearly为年费，monthly为月费
 			}
+			
 			renewData.payMethod.init(data)
 		}
         return{
diff --git a/src/component/HomePage/scaleImage.vue b/src/component/HomePage/scaleImage.vue
index dd8f9373..1a9050e4 100644
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -9,7 +9,7 @@
             :maskClosable="false"
             :centered="true"
             :closable="false"
-            :mask="scaleImageMask"
+            :mask="true"
 			:keyboard="false"
 			:destroyOnClose="true"
         >
@@ -110,7 +110,7 @@
 			</div>
 			<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
 				<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
-				<generalMiniCanvas v-if="isCanvas" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
+				<generalMiniCanvas v-if="isCanvas" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
 				<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
 				
 				<div class="img_operate_block" v-if="isLike">
@@ -169,8 +169,7 @@ export default defineComponent({
 		},
 		workspace:{
 			type:Object,
-			default:{
-			}
+			default:{}
 		},
 	},
     setup(props:any,{emit}) {
@@ -360,7 +359,7 @@ export default defineComponent({
 			})
 			let data = {
 				"base64": rv,
-				"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue,
+				"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue || scaleImageList.value[scaleImageIndex.value]?.level2Type,
 				"gender": props.workspace.sexEnum.value,
 				"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
 				"isOverride":isOverlay,
diff --git a/src/component/LoginPage/weiXinModel.vue b/src/component/LoginPage/weiXinModel.vue
index 23dfaa00..8469c23a 100644
--- a/src/component/LoginPage/weiXinModel.vue
+++ b/src/component/LoginPage/weiXinModel.vue
@@ -68,7 +68,7 @@ export default defineComponent({
 		}
 		const setWeiXin = ()=>{
 			let http = window.location.href.replace(/^https?:\/\//, '')
-			http = 'https://develop.aida.com.hk'
+			http = 'https://www.aida.com.hk'
 			new WxLogin({
 				self_redirect: false,    //默认为false(保留当前二维码)  true(当前二维码所在的地方通过iframe 内跳转到 redirect_uri)
 				id: "wx_id_signin",  //容器的id
diff --git a/src/component/Pay/payMethod.vue b/src/component/Pay/payMethod.vue
index 2b956daf..3eaeead5 100644
--- a/src/component/Pay/payMethod.vue
+++ b/src/component/Pay/payMethod.vue
@@ -39,7 +39,6 @@
 				<label class="payMethod_item">
 					<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
 					<img src="../../assets/images/homePage/stripe.svg" alt="">
-					<!-- <span>{{ $t('upgradePlan.CreditCard') }}</span> -->
 					 <span>Stripe (Credit Card)</span>
 				</label>
 				<label class="payMethod_item" v-show="$props.type == 'credits'">
diff --git a/src/component/WorksPage/newScaleImage.vue b/src/component/WorksPage/newScaleImage.vue
index c7f17482..50987c84 100644
--- a/src/component/WorksPage/newScaleImage.vue
+++ b/src/component/WorksPage/newScaleImage.vue
@@ -76,7 +76,7 @@
 								{{$t('newScaleImage.Title')}}: 
 								<span class="scaleImage_chunk_title_intro">{{scaleImageData.portfolioName}}</span>
 							</div>
-							<div v-show="scaleImageData.portfolioDes" class="scaleImage_chunk_title">
+							<div v-show="scaleImageData.portfolioDes" style="display: flex;flex-direction: column;" class="scaleImage_chunk_title">
 								<div>{{$t('newScaleImage.Describe')}}: </div>
 								<span class="content">{{scaleImageData.portfolioDes}}</span>
 							</div>
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index be2c9a2f..cd478032 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -597,6 +597,7 @@ export default {
 	},
 	account:{
 		personCentered:'个人中心',
+		back:'返回',
 		frontPage:'我的信息',
 		Home:'首页',
 		Messages:'消息中心',
@@ -617,6 +618,19 @@ export default {
 		email:'邮箱',
 		Submit:'提交',
 		UpdateAvatar:'修改头像',
+		information:'绑定个人信息',
+		ModifyEmail:'修改邮箱',
+		Email:'邮箱',
+		plaseEmail:'请输入邮箱',
+		plaseCountry:'请选择国家',
+		plaseCompanyName:'请输入职业',
+		Name:'名字',
+		plaseSelectSex:'请选择',
+		plaseFirst:'请输入姓',
+		plaseLast:'请输入名',
+		Mr:'先生',
+		Ms:'女士',
+		Miss:'小姐',
 		//消息
 		systemMessages:'系统消息',
 		comment:'评论',
@@ -638,6 +652,12 @@ export default {
 		jsContent4:'操作困难',
 		jsContent5:'教程不充足',
 		jsContent6:'无法生成需要的内容',
+		jsContent7:'请输入职业',
+		jsContent8:'请选择一个国家',
+		jsContent9:'请选择称呼',
+		jsContent10:'请输入姓',
+		jsContent11:'请输入名字',
+		jsContent12:'邮箱格式不正确',
 	},
 	frontPage:{
 		BindWechat:'绑定微信',
@@ -658,6 +678,7 @@ export default {
 		PersonalVersion:'个人版',
 		HKDMonth:'HKD / 月',
 		HKDYear:'HKD / 年',
+		automatically:'是否自动续费',
 	},
 	cancelRenewal:{
 		cancelling:'您取消AiDA的原因是什么？',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 472d1973..f5081246 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -597,6 +597,7 @@ export default {
 	},
 	account:{
 		personCentered:'Account',
+		back:'Back',
 		frontPage:'Front Page',
 		Home:'Home',
 		Messages:'Messages',
@@ -616,6 +617,19 @@ export default {
 		email:'Email',
 		Submit:'Submit',
 		UpdateAvatar:'Update Avatar',
+		information:'Bind personal information',
+		ModifyEmail:'Modify Email',
+		Email:'Email',
+		plaseEmail:'Enter your email address',
+		plaseCountry:'Please select country',
+		plaseCompanyName:'Please enter occupation',
+		Name:'Name',
+		plaseSelectSex:'Please select',
+		plaseFirst:'Please enter First',
+		plaseLast:'Please enter Last',
+		Mr:'Mr',
+		Ms:'Ms',
+		Miss:'Miss',
 		//消息
 		systemMessages:'System Messages',
 		comment:'Comment',
@@ -637,6 +651,12 @@ export default {
 		jsContent4:'Difficult to edit',
 		jsContent5:'Insufficlent Tutorial/Support',
 		jsContent6:'Unable to generate what you need',
+		jsContent7:'Please enter occupation',
+		jsContent8:'Please select a country',
+		jsContent9:'Please select a title',
+		jsContent10:'Please enter surname',
+		jsContent11:'Please enter givenName',
+		jsContent12:'The email format is incorrect',
 	},
 	frontPage:{
 		BindWechat:'Bind Wechat',
@@ -657,6 +677,7 @@ export default {
 		PersonalVersion:'Personal version',
 		HKDMonth:'HKD / Month',
 		HKDYear:'HKD / Year',
+		automatically:'Whether to renew automatically',
 	},
 	cancelRenewal:{
 		cancelling:'What is your reason for cancelling AiDA?',
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index b12fc564..c97a7f3f 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -12,3 +12,5 @@ declare module '*.vue' {
 // 		}
 // 	}
 declare module '@ans1998/vue3-color'
+declare var ColorThief: any;
+declare var EyeDropper: any;
diff --git a/src/store/userHabit/userHabit.ts b/src/store/userHabit/userHabit.ts
index 1f1c41fb..b2a2dbd0 100644
--- a/src/store/userHabit/userHabit.ts
+++ b/src/store/userHabit/userHabit.ts
@@ -82,6 +82,9 @@ const userHabit : Module<UserHabit,RootState> = {
 			usernameModify:0,
 			occupation:'',//职业
 			country:'',//国家
+			title:'',//称呼
+			surname:'',//姓氏
+			givenName:'',//名字
 
 		},
 		bindEmail : {
@@ -187,10 +190,11 @@ const userHabit : Module<UserHabit,RootState> = {
 				usernameModify:0,
 				occupation:'',//职业
 				country:'',//国家
+				title:'',//称呼
+				surname:'',//姓氏
+				givenName:'',//名字
 				
 			}
-			console.log(123);
-			
 			state.bindEmail = {
 				isBindEmail:false,
 				type:''
@@ -213,11 +217,18 @@ const userHabit : Module<UserHabit,RootState> = {
 			state.userDetail.occupation = data.occupation//头像
 			state.userDetail.usernameModify = data.usernameModify//当月剩余修改次数
 			state.userDetail.isBeginner = data.isBeginner == 1 ? true : false;//是否完成新手指引
+			state.userDetail.title = data.title//当月剩余修改次数
+			state.userDetail.surname = data.surname//当月剩余修改次数
+			state.userDetail.givenName = data.givenName//当月剩余修改次数
+			// state.bindEmail.isBindEmail = true
 
 			if(
 				(!data.email && state.userDetail.email == '-------------') || 
 				(!data.country && !state.userDetail.country) || 
-				(!data.occupation && !state.userDetail.occupation)
+				(!data.occupation && !state.userDetail.occupation) ||
+				(!data.title && !state.userDetail.title) ||
+				(!data.surname && !state.userDetail.surname) ||
+				(!data.givenName && !state.userDetail.givenName) 
 			){
 				state.bindEmail.isBindEmail = true
 				state.bindEmail.type = ''
@@ -281,6 +292,7 @@ const userHabit : Module<UserHabit,RootState> = {
 			state.userDetail.expireTime = data.expireTime//有效期
 			state.userDetail.subscriptionType = data.subscriptionType//当前订阅类型
 			state.userDetail.status = data.status//当前订阅类型
+			// state.userDetail.status = data.status || 'active'//当前订阅类型
 			state.userDetail.subscriptionId = data.subscriptionId//最新订阅id
 		}
     },
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index 626e0cfe..188b971a 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -92,7 +92,7 @@
 					<!-- <i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i> -->
 					<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
                 </div>
-				<div v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3" class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">{{$t('Header.SubscribeNow')}}</div>
+				<div v-if="userDetail.systemUser == 0 || userDetail.systemUser != 3" class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">{{$t('Header.SubscribeNow')}}</div>
 				<div v-else style="width: 30rem;"></div>
             </div>
 			<navRouter :routerList="navRouterList"></navRouter>
@@ -134,7 +134,7 @@
 		<div class="mark_loading" v-show="getLangIsShowMark">
 			<a-spin size="large" />
 		</div>
-		<RobotAssist></RobotAssist>
+		<RobotAssist v-if="!getLangIsShowMark"></RobotAssist>
 		<scaleVideo ref="scaleVideo"></scaleVideo>
 		<!-- 进行续订 -->
 		<renew ref="renew"></renew>
diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue
index 15df28ab..9f84736a 100644
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -697,6 +697,11 @@ export default defineComponent({
 			dragIdx:0,
 			designRandom:'',
 			detailDestroy:false,//销毁detail
+			designFailure:{
+				num:0,
+				currentNum:0,
+			},//获取20次都为空的话就停止获取
+			
 		};
 	},
 	watch: {
@@ -749,7 +754,7 @@ export default defineComponent({
 							let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
 							let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
 							let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
-							if(days < 30){
+							if(days < 5){
 								setTimeout(() => {
 									let text = {
 										str:`${this.t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${this.t('HomeView.jsContent8')}</a>`,
@@ -1043,8 +1048,14 @@ export default defineComponent({
 
 					})
 				}else{
+					data.objectSignList = rv.unfinishedList.join()
 					this.getDesignTime = setTimeout(()=>{
-						data.objectSignList = rv.unfinishedList.join()
+						if(this.designFailure.currentNum == rv.unfinishedList.length){
+							this.designFailure.num++
+							if(this.designFailure.num >= 10)data.objectSignList=''
+						}else{
+							this.designFailure.num = 0
+						}
 						this.getDesignResult(data,str)
 					},1000)
 				}
@@ -1124,7 +1135,10 @@ export default defineComponent({
 			};
 			// data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
 			this.setSystemDesigner(0)
-
+			this.designFailure = {
+				num:0,
+				currentNum:0,
+			}
 			let isLoad = false
 			if(designCollectionId == -1){
 				isLoad = true
diff --git a/src/views/HomeView/Works.vue b/src/views/HomeView/Works.vue
index 6553f226..15024014 100644
--- a/src/views/HomeView/Works.vue
+++ b/src/views/HomeView/Works.vue
@@ -7,8 +7,8 @@
 			<div v-show="isScroll" v-for="item in worksType" :key="item" class="gallery_btn white" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
 				{{ item.name }}
 			</div>
-			<div v-show="!isScroll" class="modal_title_text_assistant" :class="{active:'all' == worksSelect}" @click="setWorksSelect({value:'all'})">All</div>
-			<div v-show="!isScroll" class="modal_title_text_assistant" :class="{active:'NewYear_2025' == worksSelect}" @click="setWorksSelect({value:'NewYear_2025'})">NewYear_2025</div>
+			<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'all' == worksSelect}" @click="setWorksSelect({value:'all'})">All</div>
+			<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'NewYear_2025' == worksSelect}" @click="setWorksSelect({value:'NewYear_2025'})">NewYear_2025</div>
 			<!-- <div class="modal_search_menu">
 				<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
 			</div> -->
diff --git a/src/views/HomeView/library.vue b/src/views/HomeView/library.vue
index f90d552b..967062ae 100644
--- a/src/views/HomeView/library.vue
+++ b/src/views/HomeView/library.vue
@@ -192,20 +192,22 @@
                                         <div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
                                             <img v-lazy="img.url" :key="img.url" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']"/>
                                             <div class="img_item_hover" v-show="selectCode != 'DesignElements'">
-                                                <div class="img_operate_content">
-                                                    <div class="img_operate_block" :title="t('LibraryPage.Point')" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
-                                                        <span class="icon iconfont icon-dianwei operate_icon"></span>
-                                                    </div>
-                                                    <div class="img_operate_block" :title="t('LibraryPage.Rename')" @click.stop="showRenameModal(img,'total')">
-                                                        <span class="icon iconfont icon-tianxie operate_icon"></span>
-                                                    </div>
-                                                    <div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteSinglePic(img,index)">
-                                                        <span class="icon iconfont icon-shanchu operate_icon"></span>
-                                                    </div>
+                                                <div class="img_operate_content left">
+													<div class="img_operate_block" :title="t('LibraryPage.Point')" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
+														<span class="icon iconfont icon-dianwei operate_icon"></span>
+													</div>
 													<div class="img_operate_block">
 														<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index,imgList,'library')"></i>
-                                                    </div>
+													</div>
+													<div class="img_operate_block" :title="t('LibraryPage.Rename')" @click.stop="showRenameModal(img,'total')">
+														<span class="icon iconfont icon-tianxie operate_icon"></span>
+													</div>
                                                 </div>
+												<div class="img_operate_content right">
+													<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteSinglePic(img,index)">
+														<span class="icon iconfont icon-shanchu operate_icon"></span>
+													</div>
+												</div>
                                             </div>
                                         </div>
                                         <div class="content_img_name">{{img.name}}</div>
@@ -242,7 +244,7 @@
 											<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
 										</ul>
 									</div> -->
-									<generalMenu v-if="printModelList" class="printModel" v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel" :style_="{padding:'2rem'}"></generalMenu>
+									<generalMenu v-if="printModelList" class="printModel" v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
 									<div class="input_border">
 										<div class="input_box" :class="{active:inputShow}">
 											<div class="input_box_btnBox"  v-if="scene?.value != 'extract'">
@@ -365,7 +367,7 @@
 												v-model="captionGeneration"
 											></textarea>
 											<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
-												<div class="generage_btn started_btn" style="padding: 2rem;">
+												<div class="generage_btn started_btn" style="padding: 1.5rem 2rem;">
 													
 													<div @click.stop="getgenerate">
 														<span v-if="
@@ -409,13 +411,15 @@
 											<img  :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
 											
 											<div class="img_item_hover">
-                                                <div class="img_operate_content">
+                                                <div class="img_operate_content left">
 													<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
                                                         <span class="icon iconfont icon-shanchu operate_icon"></span>
                                                     </div>
 													<div class="img_operate_block">
 														<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index,generateList[selectCode],'generate')"></i>
                                                     </div>
+												</div>
+                                                <div class="img_operate_content right">
 													<div class="img_operate_block">
 														<i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i>
 														<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!img.like" @click.stop="likeFile(img,'noLike')"></i>
@@ -1719,7 +1723,7 @@ export default defineComponent({
 			scaleImage.init(list,index)
 		},
 		onPaste(e:any){
-			if(e.clipboardData.items[0] && !this.isTextarea && this.selectCode !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
+			if(e.clipboardData.files[0] && !this.isTextarea && this.selectCode !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
 				let param = new FormData(); 
 				param.append('inPin','0')
 				param.append('gender',this.sex)
@@ -2096,12 +2100,21 @@ export default defineComponent({
 
                                             .img_operate_content{
                                                 position: absolute;
-												top: 50%;
-												left: 50%;
-												transform: translate(-50%,-50%);
-												max-width: 90%;
+												// top: 50%;
+												// left: 50%;
+												// transform: translate(-50%,-50%);
+												// max-width: 90%;
 												display: flex;
-												flex-wrap: wrap;
+												flex-direction: column;
+												top: 1rem;
+												&.left{
+													left: 1rem;
+													right: auto;
+												}
+												&.right{
+													right: 1rem;
+													left: auto;
+												}
 												>div{
 													margin-bottom: .5rem;
 													margin-right: .5rem;