diff --git a/src/assets/images/icon/details_color.png b/src/assets/images/icon/details_color.png
new file mode 100644
index 00000000..6233167d
Binary files /dev/null and b/src/assets/images/icon/details_color.png differ
diff --git a/src/assets/images/icon/details_elements.png b/src/assets/images/icon/details_elements.png
new file mode 100644
index 00000000..c08eabb4
Binary files /dev/null and b/src/assets/images/icon/details_elements.png differ
diff --git a/src/assets/images/icon/details_print.png b/src/assets/images/icon/details_print.png
new file mode 100644
index 00000000..6c5fb08a
Binary files /dev/null and b/src/assets/images/icon/details_print.png differ
diff --git a/src/assets/images/icon/details_sketch.png b/src/assets/images/icon/details_sketch.png
new file mode 100644
index 00000000..328fed1b
Binary files /dev/null and b/src/assets/images/icon/details_sketch.png differ
diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 4036e047..a2af9c91 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -714,7 +714,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .generalModel_state .generalModel_state_item > input {
   height: 2.5rem !important;
   border-radius: 4rem;
-  padding: 2rem !important;
+  padding: calc(2rem - 1px * 2) !important;
   box-sizing: content-box;
   background-color: #f3f3f3;
   background-color: #fff;
@@ -738,7 +738,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .generalModel_state .generalModel_state_item .range_picker {
   height: 2.5rem !important;
   border-radius: 4rem;
-  padding: 2rem !important;
+  padding: calc(2rem - 1px * 2) !important;
   box-sizing: content-box;
   background-color: #f3f3f3;
   background-color: #fff;
@@ -872,6 +872,15 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   box-shadow: none;
   height: calc(65rem*1.2);
 }
+.generalModel.fullScreen {
+  max-width: 100%;
+}
+.generalModel.fullScreen .ant-modal-content {
+  border-radius: 0rem;
+}
+.generalModel.fullScreen .ant-modal-body {
+  padding: 2.5rem 3rem;
+}
 .generalModel .ant-modal-content {
   border-radius: 3rem;
   height: 100%;
@@ -1098,10 +1107,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .sketchboard_upload_modal .switch_type_list.showEvents * {
   pointer-events: auto;
 }
-.ant-modal-wrap {
-  height: 100vh;
-  overflow: auto;
-}
 .ant-btn:hover,
 .ant-btn:focus,
 .ant-btn:active,
@@ -1610,10 +1615,14 @@ textarea:focus {
 .upload_item .upload_file_item .ant-upload-picture-card-wrapper .ant-upload-select-picture-card {
   width: calc(6rem*1.2);
   height: calc(6rem*1.2);
-  border: calc(0.3rem*1.2) solid #ededed;
+  border: calc(0.3rem*1.2) solid #000;
   border-radius: calc(1rem*1.2);
   margin: 0;
 }
+.upload_item .upload_file_item .ant-upload-picture-card-wrapper .ant-upload-select-picture-card .fi-br-upload {
+  font-size: 2rem;
+  color: #000;
+}
 .upload_item .upload_file_item.upload_file_item:last-child {
   margin: 0;
 }
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index cd3e3932..c7589b62 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -781,7 +781,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 		>input{
 			height: 2.5rem !important;
 			border-radius: 4rem;
-			padding: 2rem !important;
+			padding: calc(2rem - 1px * 2) !important;
 			box-sizing: content-box;
 			background-color: #f3f3f3;
 			background-color: #fff;
@@ -805,7 +805,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 		.ant-picker-range,.ant-select-selector,.range_picker{
 			height: 2.5rem !important;
 			border-radius: 4rem;
-			padding: 2rem !important;
+			padding: calc(2rem - 1px * 2) !important;
 			box-sizing: content-box;
 			background-color: #f3f3f3;
 			background-color: #fff;
@@ -946,6 +946,15 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	position: relative;
 	box-shadow: none;
 	height: calc(65rem*1.2);
+	&.fullScreen{
+		max-width: 100%;
+		.ant-modal-content{
+			border-radius: 0rem;
+		}
+		.ant-modal-body{
+			padding: 2.5rem 3rem;
+		}
+	}
 	.ant-modal-content{
 		border-radius: 3rem;
 		height: 100%;
@@ -1192,12 +1201,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	}
 }
 
-.ant-modal-wrap{
-	height: 100vh;
-	// overflow: hidden;
-	overflow: auto;
-	// position: fixed;
-}
+// .ant-modal-wrap{
+// 	height: 100vh;
+// 	overflow: auto;
+// }
 // .driver-overlay-animated{
 // 	z-index: 10002 !important;
 // }
@@ -1742,9 +1749,13 @@ textarea:focus{
 			.ant-upload-select-picture-card {
 				width: calc(6rem*1.2);
 				height: calc(6rem*1.2);
-				border: calc(0.3rem*1.2) solid #ededed;
+				border: calc(0.3rem*1.2) solid #000;
 				border-radius: calc(1rem*1.2);
 				margin: 0;
+				.fi-br-upload{
+					font-size: 2rem;
+					color: #000;
+				}
 			}
 			
 			
diff --git a/src/component/Account/frontPage/cancelRenewal.vue b/src/component/Account/frontPage/cancelRenewal.vue
index f48cd1a0..11288b34 100644
--- a/src/component/Account/frontPage/cancelRenewal.vue
+++ b/src/component/Account/frontPage/cancelRenewal.vue
@@ -98,7 +98,8 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .cancelRenewal_page{
-	
+	height: 100%;
+	overflow-y: auto;
 	>div{
 		display: flex;
 		flex-direction: column;
diff --git a/src/component/Account/frontPage/mylnformation.vue b/src/component/Account/frontPage/mylnformation.vue
index a58d6791..1286eeb6 100644
--- a/src/component/Account/frontPage/mylnformation.vue
+++ b/src/component/Account/frontPage/mylnformation.vue
@@ -44,6 +44,7 @@ export default defineComponent({
     },
     setup() {
         const store = useStore();
+        const {t} = useI18n();
 		let userDetail:any= computed(()=>{
 			return store.state.UserHabit.userDetail
 		})
@@ -61,11 +62,12 @@ export default defineComponent({
 			accountHomeData.loadingShow = true
 			Https.axiosGet(Https.httpUrls.updateUserInfo,{params:data}).
 				then((rv:any)=>{
-					// let value = {
-					// 	userName:accountHomeData.editUserName
-					// }
-					// store.commit('upUserDetail',value)
+					let value = {
+						userName:accountHomeData.editUserName
+					}
+					store.commit('upUserDetail',value)
 					accountHomeData.loadingShow = false
+					message.success(t('exportModel.jsContent7'))
 				}).catch((err:any)=>{
 					accountHomeData.loadingShow = false
 				})
@@ -91,8 +93,11 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .accountEdit_page{
+	height: 100%;
+	overflow-y: auto;
 	.accountEdit_page_body{
-		width: 85rem;
+		width: 100%;
+		// width: 85rem;
 		.accountEdit_page_body_item{
 			display: flex;
 			margin-bottom: 20px;
diff --git a/src/component/DetailCopy/designDetail.vue b/src/component/DetailCopy/designDetail.vue
new file mode 100644
index 00000000..d42e45d6
--- /dev/null
+++ b/src/component/DetailCopy/designDetail.vue
@@ -0,0 +1,206 @@
+<template>
+    <div ref="designDetailModal" class="designDetailModal">
+		<!-- designDetailShow -->
+		<!-- :class="[driver__.driver?'hideEvents':'']" -->
+        <a-modal class="Guide_1_18 generalModel fullScreen" 
+            v-model:visible="designDetailShow" 
+            :footer="null" 
+			:get-container="() => $refs.designDetailModal"
+            width="100%"
+			height="100%"
+            :maskClosable="false"
+			:mask="false"
+            :centered="true"
+			:keyboard="false"
+			:closable="false"
+        >
+			<div class="content">
+				<div class="nav">
+					<div class="back_home">
+						<div class="gallery_btn" @click="closeModal()">
+							<i class="fi fi-rs-house-chimney"></i>
+						</div>
+					</div>
+					<div class="nav_list">
+						<div class="nav_item active">
+							<img src="@/assets/images/icon/details_sketch.png" alt="">
+							<div class="detailText">Apparel</div>
+						</div>
+						<div class="nav_item">
+							<img src="@/assets/images/icon/details_print.png" alt="">
+							<div class="detailText">Print</div>
+						</div>
+						<div class="nav_item">
+							<img src="@/assets/images/icon/details_color.png" alt="">
+							<div class="detailText">Color</div>
+						</div>
+						<div class="nav_item">
+							<img src="@/assets/images/icon/details_elements.png" alt="">
+							<div class="detailText">Elements</div>
+						</div>
+					</div>
+				</div>
+				<div class="item">
+					<sketchLeft></sketchLeft>
+				</div>
+				<div></div>
+				<div></div>
+				<div class="gallery_btn submit">Submit</div>
+			</div>
+			
+        </a-modal>
+         <div class="mark_loading" v-show="loadingShow">
+            <a-spin size="large" />
+        </div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import sketchLeft from './sketchLeft.vue'
+
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-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 { openGuide,driverObj__ } from "@/tool/guide";
+import { useI18n } from 'vue-i18n'
+import addDetails from '@/component/Detail/addDetails.vue'
+export default defineComponent({
+    components:{
+		sketchLeft,
+    },
+    setup() {
+        const store = useStore();
+      
+		let designItemDetail :any = computed(()=>{
+			return store.state.DesignDetailModule.designItemDetail
+		})
+		const userDetail = computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
+		const detailData = reactive({
+			designDetailShow:true,
+			loadingShow:false,
+		})
+		const closeModal = ()=>{
+			detailData.designDetailShow = false
+		}
+        return{
+			...toRefs(detailData),
+            closeModal,
+        }
+    },
+	provide() {
+		return {
+		}
+	},
+	mounted(){
+		let beforeunload =  () => {
+			window.removeEventListener('beforeunload',beforeunload)
+		}
+		window.addEventListener('beforeunload',beforeunload)
+		// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
+        //     this.loadingShow = true
+        //     Https.axiosGet(url).then(
+		// 		async (rv: any) => {
+		// 			rv.clothes.forEach((item:any)=>{
+		// 				let a
+		// 				if(item.layersObject[0].imageCategory.indexOf("back") == -1){
+		// 					a = item.layersObject[0]
+		// 					item.layersObject[0] = item.layersObject[1]
+		// 					item.layersObject[1] = a
+		// 				}
+		// 				if(item.printObject.prints == null){
+		// 					item.printObject.prints = [{}]
+		// 				}
+		// 			})
+        //             this.store.commit('setDesignItemDetail',rv)
+		// 			if(rv.others[0].printObject.path == null){
+		// 				this.body = false
+		// 			}else{
+		// 				this.body = true
+		// 			}
+		// 			this.setImgSize()
+        //             this.generateHighDesignImg = rv.highDesignUrl
+        //             this.designShowPrview = 1
+        //             this.designDetailShow = true
+        //             this.loadingShow = false
+        //         }
+        //     ).catch(rv=>{
+        //         this.loadingShow = false
+        //     })
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	:deep(.detailText){
+		font-size: 1.8rem;
+		font-weight: 600;
+	}
+    .designDetailModal{
+		position: relative;
+		top: -100%;
+		height: 100%;
+		:deep(.ant-modal-wrap){
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+		.content{
+			display: flex;
+			align-items: flex-start;
+			height: 100%;
+			width: 100%;
+			> .item{
+				height: 100%;
+			}
+			> .nav{
+				margin-right: 5rem;
+				> .back_home{
+					width: 9rem;
+					text-align: center;
+					> .gallery_btn{
+						width: 6rem;
+						height: 6rem;
+						border-radius: 50%;
+					}
+				}
+				> .nav_list{
+					margin-top: 2.7rem;
+					height: 38rem;
+					width: 9rem;
+					background: #f4f4f4;
+					border-radius: 1.4rem;
+					padding: 1.4rem 0;
+					> .nav_item{
+						text-align: center;
+						width: 100%;
+						height: calc((38rem - 1.4rem * 2) / 4);
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+						flex-direction: column;
+						justify-content: center;
+						> img{
+							width: 4rem;
+							height: 3.6rem;
+							object-fit: contain;
+						}
+						&.active{
+							background: #bdbdbd;
+						}
+					}
+				}
+			}
+			> .submit{
+				margin-left: auto;
+
+			}
+		}
+		
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/editSketchPosition.vue b/src/component/DetailCopy/editSketchPosition.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/DetailCopy/libraryList.vue b/src/component/DetailCopy/libraryList.vue
new file mode 100644
index 00000000..9b33a1fc
--- /dev/null
+++ b/src/component/DetailCopy/libraryList.vue
@@ -0,0 +1,218 @@
+<template>
+    <div class="libraryList">
+		<div class="generalModel_state">
+			<div class="generalModel_state_item">
+				<a-select
+					v-model:value="designType"
+					:options="designTypeList"
+					@change="handleChange"
+					style="width:100%"
+					size="large"
+					:fieldNames="{ label: 'name', value: 'value' }"
+				>
+					<template #suffixIcon
+						><span
+							class="icon iconfont icon-xiala"
+							style="color: #343579"
+						></span
+					></template>
+				</a-select>
+			</div>
+			<div class="generalModel_state_item">
+				<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
+				<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
+			</div>
+			<!-- clothesPrint -->
+		</div>
+		<div class="libraryList_box">
+			<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
+				<div class="content_img_item_block" :class="{active:file?.checked}">
+					<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
+					<sketchCategory :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
+				</div>
+			</div>
+			<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
+				<img src="@/assets/images/homePage/loading.gif" alt="">
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+export default defineComponent({
+    components:{
+		sketchCategory
+    },
+	props:{
+		catecoryList:{
+		    type:Object,
+			default:()=>[] as any,
+			required:true
+		}
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			isShowLoading:false,//懒加载，加载中
+			libraryList:[],
+			designTypeList:[] as any,
+			designType:'',
+			searchPictureName:'',
+		})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const init = ()=>{
+			detailData.designTypeList = props.catecoryList
+			detailData.designType = detailData.designTypeList[0].value
+			getLibraryList()
+		}
+		const selectImgItem = ()=>{
+
+		}
+		const getLibraryList = ()=>{
+            detailData.isShowLoading = true
+			let level2Type = ''
+			let workspace = store.state.Workspace.workspace
+            let data = {
+                level1Type:'Sketchboard',
+                // level2Type:'Pattern',
+                level2Type:detailData.designType,
+				modelSex:workspace?.sex,
+                page:getDetailListData.currentPage,
+                pictureName:detailData.searchPictureName,
+                size:getDetailListData.pageSize+detailData.libraryList.length,
+            }
+            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
+                (rv) => {
+					rv.content.forEach((vItem:any)=>{
+						props.catecoryList.forEach((item:any) => {
+							if(item.value == vItem.level2Type){
+								vItem.categoryValue = item.value
+								vItem.category = item.name
+							}
+						});
+					})
+					detailData.libraryList = rv.content
+                    detailData.isShowLoading = false
+                    getDetailListData.total = rv.total
+                }
+            ).catch((res)=>{
+                detailData.isShowLoading = false
+            });
+        }
+		const handleChange = ()=>{
+			getDetailListData.currentPage = 1
+			detailData.libraryList = []
+            getLibraryList()
+		}
+		onMounted(()=>{
+			// getLibraryList()
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			init,
+			selectImgItem,
+			getLibraryList,
+			handleChange,
+        }
+    },
+	directives:{
+		observe:{
+			mounted (el,binding) {
+				// console.log(binding.instance);
+				let callback = (entries:any, observer:any)=> {
+					entries.forEach((entry:any) => {
+						if (entry.isIntersecting && !this_.isShowLoading) {
+							this_.getLibraryList()
+						} else {
+						}
+					});
+				}
+				const ob = new IntersectionObserver(callback,{
+					root:null,
+					threshold:[.5]
+				})
+				ob.observe(el)
+				// this.currentPage = +=1
+				// this.pageSize = 12
+				// currentPage
+				let this_:any = binding.instance
+				
+			},
+		},
+	},
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .libraryList{
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .generalModel_state{
+			width: 100%;
+			> .generalModel_state_item{
+				width: 100%;
+				margin: 0;
+				position: relative;
+				> .search_icon_block{
+					position: absolute;
+					right: 5px;
+					width: calc(6rem - 4px);
+					height: calc(6rem - 4px);
+					color: #fff;
+					background: #000;
+					border-radius: 50%;
+					display: flex;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					cursor: pointer;
+				}
+			}
+			> .generalModel_state_item:last-child{
+				margin-top: 2rem;
+			}
+		}
+		> .libraryList_box{
+			width: 100%;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 1rem;
+			justify-content: space-between;
+			align-content: flex-start;
+			&::-webkit-scrollbar{display: none;}
+			> .content_img_item{
+				> .content_img_item_block{
+					width: calc((34rem - 2rem) / 2);
+					height: calc((34rem - 2rem) / 2);
+					position: relative;
+					margin-bottom: 2rem;
+
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .material_content_list_loding{
+				width: 100%;
+				height: calc((34rem - 2rem) / 2);
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/sketchLeft.vue b/src/component/DetailCopy/sketchLeft.vue
new file mode 100644
index 00000000..8f544a71
--- /dev/null
+++ b/src/component/DetailCopy/sketchLeft.vue
@@ -0,0 +1,164 @@
+<template>
+    <div class="sketchLeft">
+		<div class="detailText">Current Print</div>
+		<div class="select_sketch">
+			<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
+		</div>
+		<div class="switch_type_list">
+			<div
+				@click.stop="openUpload()"
+				class="switch_type_item"
+				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
+			</div>
+			<div
+				@click.stop="openLibrary()"
+				class="switch_type_item"
+				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+			</div>
+		</div>
+		<div class="sketch_content_list">
+			<div class="content_item" v-show="selectTitle == 'upload'">
+				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'library'">
+				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
+			</div>
+		</div>
+        <div class="mark_loading" v-show="loadingShow">
+            <a-spin size="large" />
+        </div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import libraryList from './libraryList.vue'
+import uploadList from './uploadList.vue'
+export default defineComponent({
+    components:{
+		libraryList,
+		uploadList,
+		sketchCategory,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectTitle:'upload',
+			loadingShow:false,
+			isShowLoading:false,//懒加载，加载中
+			sketchCatecoryList:computed(()=>{
+				return store.state.Workspace.workspacePosition
+			})
+		})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+		})
+		const openUpload = ()=>{
+			detailData.selectTitle = 'upload'
+		}
+		const openLibrary = ()=>{
+			detailData.selectTitle = 'library'
+			getDetailListDom.libraryList.init()
+		}
+		const selectImgItem = ()=>{
+
+		}
+		
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+
+			openUpload,
+			openLibrary,
+			selectImgItem,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .sketchLeft{
+		width: 34rem;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .detailText{
+			margin-bottom: 1rem;
+		}
+		> .select_sketch{
+			width: 100%;
+			height: 23.5rem;
+			padding: 1rem 0;
+			text-align: center;
+			border-radius: .5rem;
+			// border: 1px dashed #202020;
+			border: 1px dashed transparent;
+        	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
+			margin-bottom: 3rem;
+			> img{
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		}
+		> .switch_type_list{
+			display: flex;
+			margin-bottom: 2.5rem;
+			> .switch_type_item:nth-child(1){
+				margin-right: 6.5rem;
+			}
+			> .switch_type_item{
+				position: relative;
+				cursor: pointer;
+			}
+			> .switch_type_item::before {
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    background: #000;
+                    height: calc(.4rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: -.5rem;
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+			> .select_swtich {
+				color: #000;
+				font-weight: 600;
+				transform: scale(1.15);
+			}
+			> .select_swtich::before {
+				width: 100%;
+			}
+		}
+		> .sketch_content_list{
+			flex: 1;
+			overflow: hidden;
+			> .content_item{
+				height: 100%;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/uploadList.vue b/src/component/DetailCopy/uploadList.vue
new file mode 100644
index 00000000..5cf36973
--- /dev/null
+++ b/src/component/DetailCopy/uploadList.vue
@@ -0,0 +1,209 @@
+
+<template>
+    <div class="uploadList">
+		<div class="uploadList_box">
+
+			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
+				<div class="content_img_item_block" :class="{active:file?.checked}">
+					<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
+					<sketchCategory :disignTypeList="catecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
+					
+				</div>
+			</div>
+			<div class="upload_item">
+				<div class="upload_file_item upload_component">
+					<a-upload
+						:action="uploadUrl + '/api/element/upload'"
+						list-type="picture-card"
+						:capture="null"
+
+						:data="{
+							...upload,
+						}"
+						:headers="{ Authorization: token }"
+						v-model:file-list="uploadList"
+						:before-upload="beforeUpload"
+						:maxCount="8"
+						accept=".jpg,.png,.jpeg,.bmp"
+						@change="(file) => upFileUploadChange(file)"
+					>
+						<div
+							class="upload_tip_block"
+							v-show="uploadList.length != 8"
+						>
+							<i class="fi fi-br-upload"></i>
+							<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+						</div>
+					</a-upload>
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import { getCookie } from "@/tool/cookie";
+import { message,Upload} from 'ant-design-vue';
+import {getUploadUrl} from '@/tool/util'
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+		sketchCategory
+    },
+	props:{
+		catecoryList:{
+		    type:Object,
+			default:()=>[] as any,
+			required:true
+		}
+	},
+    setup(props,{emit}) {
+		const {t} = useI18n();
+        const store = useStore();
+		const detailData = reactive({
+			isShowLoading:false,//懒加载，加载中
+			uploadList:[],
+			upload:{
+                isPin: 0,
+                level1Type: 'Sketchboard',
+				gender:store.state.Workspace.workspace.sex,
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			},
+			token:getCookie("token"),
+			uploadUrl:getUploadUrl(),
+		})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const selectImgItem = ()=>{
+
+		}
+		const upFileUploadChange = (data:any)=>{
+            let file = data.file;
+			let bor = true
+            if (file.status === "done") {
+                let res = JSON.parse(file.xhr.response);
+				if(res.errCode == 0 && props.catecoryList[0]){
+					file.id = res.data.id;
+					file.url = res.data.url;
+					file.resData = res.data;
+					let type 
+					if(res.data.level2Type){
+						props.catecoryList.forEach((item:any) => {
+							if(item.value == res.data.level2Type){
+								file.categoryValue = item?.value;
+								type = item.value
+								file.category = item?.name;
+							}
+						});
+					}else{
+						file.categoryValue = props.catecoryList[0].value;
+						type = props.catecoryList[0].value
+						file.category = props.catecoryList[0].name;
+					}
+					file.designType = res.data.designType
+					file.level2Type = type;
+					file.minIOPath = file.resData.minIOPath
+					let fileList = detailData.uploadList.filter(
+						(v) => v.status === "done"
+					);
+					detailData.uploadList = fileList
+					// this.selectImgItem(detailData.uploadList[detailData.uploadList.length-1])
+				}else{
+					bor = false
+				}
+            } else if (file.status === "error") {
+				bor = false
+            }
+			if(!bor){
+                let res = JSON.parse(file.xhr.response);
+				let index = -1;
+                detailData.uploadList.forEach((ele, index1) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
+                    }
+                });
+                if (index > -1) {
+                    detailData.uploadList.splice(index, 1);
+                }
+                message.warning(res.errMsg);
+			}
+			
+        }
+		const beforeUpload = (file:any)=>{
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(t('DesignDetailAlter.jsContent4'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(t('DesignDetailAlter.jsContent5'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        }
+		onMounted(()=>{
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+
+			selectImgItem,
+			beforeUpload,
+			upFileUploadChange,
+        }
+    },
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .uploadList{
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .uploadList_box{
+			width: 100%;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 1rem;
+			justify-content: space-between;
+			align-content: flex-start;
+			&::-webkit-scrollbar{display: none;}
+			> .content_img_item{
+				> .content_img_item_block{
+					width: calc((34rem - 2rem) / 2);
+					height: calc((34rem - 2rem) / 2);
+					position: relative;
+					margin-bottom: 2rem;
+
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .material_content_list_loding{
+				width: 100%;
+				height: calc((34rem - 2rem) / 2);
+			}
+			> .upload_item{
+				width: calc((34rem - 2rem) / 2);
+				height: calc((34rem - 2rem) / 2);
+				align-items: center;
+				justify-content: center;
+			}
+		}
+		
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index 9b9e21c1..ce8738b3 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -1267,13 +1267,13 @@ export default defineComponent({
 		let oldOperation = ''
 		let canvasKeyDown = (event) => {
 			let keys = ['Enter','Delete','ControlLeft','KeyZ','ShiftLeft','KeyC','KeyV','BracketLeft','BracketRight','KeyI','KeyD','KeyO','Backquote']
-			if(keys.indexOf(event.key) > -1){
+			if(keys.indexOf(event.code) > -1){
 				event.preventDefault(); 
 			}
 			if(keyDown.indexOf(event.code)>-1){
 			}else{
 				keyDown.push(event.code)
-				if(event.key === 'Enter' && operation.value == 'fold'){
+				if(event.code === 'Enter' && operation.value == 'fold'){
 					foldEnd('Enter')
 				}else if(event.key === 'Delete'){
 					deleteObject()
@@ -1288,7 +1288,6 @@ export default defineComponent({
 				}else if(keyDown.indexOf('BracketLeft') > -1){
 					let width = canvasPencilWidth.value[operation.value]
 					canvasPencilWidth.value[operation.value] = (width - 5) < 3?3:(width - 5)
-					console.log(canvasPencilWidth.value[operation.value]);
 					setPencilWidth()
 				}else if(keyDown.indexOf('BracketRight') > -1){
 					let width = canvasPencilWidth.value[operation.value]
diff --git a/src/store/homeStore/homeStore.ts b/src/store/homeStore/homeStore.ts
index bd85806e..154ca1d9 100644
--- a/src/store/homeStore/homeStore.ts
+++ b/src/store/homeStore/homeStore.ts
@@ -37,7 +37,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
         },
 		setDeleteDesignCollectionList(state,data){
             let obj = state.designCollectionList.splice(data,1)
-			state.deleteDesignCollectionList.unshift(...obj)
+			// state.deleteDesignCollectionList.unshift(...obj)
         },
 		cancelDeleteDesignCollectionList(state,data){
             let obj = state.deleteDesignCollectionList.splice(data,1)
diff --git a/src/tool/canvasGeneralCopy.js b/src/tool/canvasGeneralCopy.js
index b5a48c74..73a586a0 100644
--- a/src/tool/canvasGeneralCopy.js
+++ b/src/tool/canvasGeneralCopy.js
@@ -683,6 +683,11 @@ class MyCanvas {
 		}
 		await obj.clone((cloned)=>{
 			let {width,height,left,top} = position
+			cloned.set({
+				custom:{
+					dashed:true
+				}
+			})
 			// cloned.set({left:cloned.strokeWidth/2,top:cloned.strokeWidth/2})
 			let group = new fabric.Group([cloned],{
 				left:left + cloned.strokeWidth/2,
@@ -1471,7 +1476,8 @@ class MyCanvas {
 		
 		if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid'){
 			await new Promise((resolve, reject) => {
-				let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom)[0]
+				console.log(this.clipPath.clipGroup);
+				let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom?.dashed)[0]
 				let clipPathLect = this.clipPath.clipGroup.left
 				let clipPathTop = this.clipPath.clipGroup.top
 
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index 4b072e2c..168a0a33 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -128,7 +128,7 @@
 				</keep-alive>
 				<component :key="$route.name" :is="Component"  v-if="!$route.meta.keepAlive"/>
 			</router-view>  -->
-			<router-view @setTask = "setTask" :getLangIsShowMark="getLangIsShowMark">
+			<router-view @setTask="setTask" :getLangIsShowMark="getLangIsShowMark">
 			</router-view>
 		</div>
 		<RobotAssist></RobotAssist>
diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue
index b8799aa4..b2399397 100644
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -188,9 +188,9 @@
 														)
 														">
 													</div>
-													<!-- <i class="fi fi-rr-trash icon_delete" @click.stop="
-														setDeleteDesign(index)">
-													</i> -->
+													<i class="fi fi-rr-trash icon_delete" @click.stop="
+														setDeleteDesign(design,index)">
+													</i>
 											</div>
 											
 										</div>
@@ -232,9 +232,9 @@
 		</div> -->
 		<!-- design collection的进度蒙层  end-->
 		<affiche ref="affiche"></affiche>
-		<!-- <tesst></tesst> -->
-
 	</div>
+	<!-- <DesignDetailcopy></DesignDetailcopy> -->
+
 </template>
 
 <script lang="ts">
@@ -242,13 +242,13 @@ import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nex
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
-import tesst from "@/component/Canvas/test.vue";
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
 import productImg from "@/component/HomePage/productImg.vue";
 import generalCanvas from "@/component/modules/generalCanvas.vue";
 import affiche from "@/component/HomePage/affiche.vue";
 import DesignDetail from "@/component/Detail/DesignDetail.vue";
+import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
 import html2canvas from "html2canvas";
 import { message,Modal } from "ant-design-vue";
 import { useStore } from "vuex";
@@ -267,20 +267,21 @@ export default defineComponent({
 	name: "homePage",
 	components: {
 		// HeaderComponent,
-		tesst,
 		CollectionModal,
 		NewCollectionReview,
 		DesignDetail,
 		ExportNewCoolection,
 		affiche,
 		productImg,
-		generalCanvas
+		generalCanvas,
+		DesignDetailcopy
 	},
 	props:{
 		getLangIsShowMark:{
 			type:Boolean,
 		}
 	},
+	emits:['setTask'],
 	 activated() {
   },
   deactivated() {
@@ -366,8 +367,10 @@ export default defineComponent({
 		let portfolio:any = ref({})
 		provide('portfolio',portfolio)
 		let showDesignMark = ref(false)
+		let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
+		
 		const collItemSize = reactive({
-			collValue:JSON.parse(sessionStorage.getItem('collValue') as any) || 3,
+			collValue:( sessionStorageCollValue>= 20? 10:sessionStorageCollValue) || 3,
 			minCollValue:4,
 			maxCollValue:20,
 			likeStyle:{
@@ -409,7 +412,6 @@ export default defineComponent({
 				let parentWidth = likeItemDom.value.parentElement.offsetWidth
 				collItemSize.minCollValue = collItemSize.maxCollValue - Math.round(likeItemDom.value.parentElement.offsetWidth/120)
 				collItemSize.collValue = collItemSize.collValue<collItemSize.minCollValue?collItemSize.minCollValue:collItemSize.collValue
-
 				let value = collItemSize.maxCollValue - collItemSize.collValue
 				collItemSize.itemStyle.width = (parentWidth - (value * 10)) / value
 				collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
@@ -447,8 +449,21 @@ export default defineComponent({
 			
 		}
 
-		const setDeleteDesign = (index:any)=>{
+		const setDeleteDesign = (value:any,index:any)=>{
+			console.log(value);
+			
 			store.commit("setDeleteDesignCollectionList",index);
+			let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
+			posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
+			
+			posiitonData.value.generateElList.forEach((item:any)=>{
+				if(item.sort > collItem.sort){
+					item.sort-=1
+				}
+			})
+			console.log(posiitonData.value.likeElList);
+			
+			moveItem('')
 		}
 		const cancelDeleteDesign = (index:any)=>{
 			store.commit("cancelDeleteDesignCollectionList",index);
@@ -608,6 +623,7 @@ export default defineComponent({
 			let width,height
 			width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
 			height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
+			 
 			// let num = str == 'like'?value:3
 			for(let i = 0;i < elLikeList.length;i++){
 				elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
@@ -698,12 +714,15 @@ export default defineComponent({
 	
 	beforeUnmount(){
 		clearTimeout(this.getDesignTime);
-		// alert(1)
 		sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
 		sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
 		sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
+		this.sortDesignCollection()
+		window.removeEventListener('resize', this.setDesignItemPosition)
+
 	},
 	async mounted() {
+		
 		// if(JSON.parse( getCookie('isFirst') as any)){
 		// }
 		let test:any = getCookie('isTest')
@@ -804,10 +823,7 @@ export default defineComponent({
 		// 		type: 'dislike',
 		// 	};
 		// 	designDetail.showDesignDetailModal(data);
-		window.addEventListener('resize', ()=> {
-				this.setSystemDesigner(0)
-				this.setDesignItemStyle()
-		})
+		window.addEventListener('resize', this.setDesignItemPosition)
 		this.setSystemDesigner(0)
 		this.setDesignItemStyle()
 	},
@@ -844,6 +860,10 @@ export default defineComponent({
 		// addTeam (team:any) {
 		// this.likeDesignCollectionList.push(team)
 		// },
+		setDesignItemPosition(){
+			this.setSystemDesigner(0)
+			this.setDesignItemStyle()
+		},
 		affiche(text:any){
 			nextTick(()=>{
 			    let affiche:any = this.$refs.affiche
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index bc6d77e8..a7988843 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -318,8 +318,8 @@ export default defineComponent({
             emailCode: ["", "", "", "", "", ""], //邮箱验证码
             emailNextStep: true,
             username: "",
-            password: "",
-            email: "", //邮箱登录邮箱
+            password: localStorage.getItem("loginPassword") || '',
+            email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
             frogetPasswordStep: 1, //忘记密码的步骤
             forgetPasswordEmail: "",
             forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
@@ -495,6 +495,8 @@ export default defineComponent({
                                 this.time = 60;
                                 this.emailCode = ["", "", "", "", "", ""];
                                 this.createTimer();
+								localStorage.setItem("loginEmail", this.email);
+								localStorage.setItem("loginPassword", this.password);
                             }
                         })
                         .catch((res) => {