diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 45135af2..be758b5c 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -18,13 +18,14 @@ input {
 .button_first {
   width: 9.85rem;
   text-align: center;
-  background: #E0E0F6;
   height: 4rem;
   line-height: 4rem;
-  font-size: 1.3rem;
+  font-size: 1.4rem;
   font-weight: 400;
-  color: #343579;
+  color: #000;
   cursor: pointer;
+  border-radius: 1.5rem;
+  border: 2px solid;
 }
 .button_second {
   width: 9.85rem;
@@ -109,6 +110,70 @@ input {
 .modal_component .ant-modal-content .ant-modal-body {
   padding: 0;
 }
+.operate_file_block {
+  width: 100%;
+  height: 3rem;
+  font-size: 1.6rem;
+  color: #FFFFFF;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.operate_file_block .select_img_type {
+  height: 100%;
+  line-height: 3rem;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.6);
+  position: relative;
+}
+.operate_file_block .select_img_type .select_category {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.operate_file_block .select_img_type .select_category .icon-xiala {
+  margin-left: 0.8rem;
+}
+.operate_file_block .select_img_type .icon_rotate {
+  -moz-transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+  animation-direction: 0.5s;
+}
+.operate_file_block .select_img_type .category_list {
+  width: 100%;
+  cursor: pointer;
+  position: absolute;
+  margin-top: 0.2rem;
+  left: 0;
+  background-color: #b1b1b1;
+  border: 1px solid #343579;
+  border-radius: 0.8rem;
+  z-index: 3;
+  height: 9rem;
+  overflow-x: hidden;
+}
+.operate_file_block .select_img_type .category_list.category_list::-webkit-scrollbar {
+  display: none;
+}
+.operate_file_block .select_img_type .category_list .category_item {
+  text-align: left;
+  font-size: 1.4rem;
+  padding: 1rem 1.5rem;
+  line-height: 1.6rem;
+  font-weight: 600;
+  color: #595959;
+}
+.operate_file_block .select_img_type .category_list .category_item.select_category_item {
+  background: linear-gradient(-137deg, #eeefdb, #e7dbed);
+}
+.operate_file_block .select_img_type .category_list .category_item:hover {
+  background: linear-gradient(-137deg, #eeefdb, #e7dbed);
+}
+.pin_block {
+  text-align: center;
+  margin-top: 0.5rem;
+}
 .collection_modal .ant-modal-body {
   height: calc(80vh - 6.4rem);
   overflow-y: hidden;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 479bf5d5..3a292c63 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -15,15 +15,17 @@ input{
     margin: 0 auto;
 }
 .button_first{
-    width: 9.85rem;
+	width: 9.85rem;
     text-align: center;
-    background: #E0E0F6;
+    // background: #343579;
     height: 4rem;
     line-height: 4rem;
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     font-weight: 400;
-    color: #343579;
+    color: #000;
     cursor: pointer;
+	border-radius: 1.5rem;
+	border: 2px solid;
 }
 .button_second{
     width: 9.85rem;
@@ -125,7 +127,81 @@ input{
     }
   }
 }
+//衣服类型下拉菜单
+.operate_file_block{
+	width: 100%;
+	height: 3rem;
+	font-size: 1.6rem;
+	color: #FFFFFF;
+	position: absolute;
+	left: 0;
+	bottom: 0;
 
+	.select_img_type{
+		height: 100%;
+		line-height: 3rem;
+		text-align: center;
+		background: rgba(0,0,0,0.6);
+		position: relative;
+
+		.select_category{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.icon-xiala{
+				margin-left: 0.8rem;
+			}
+		}
+
+		.icon_rotate{
+			-moz-transform:rotate(180deg);
+			-webkit-transform:rotate(180deg);
+			transform: rotate(180deg);
+			animation-direction: 0.5s;
+		}
+
+		.category_list{
+			position: absolute;
+			width: 100%;
+			cursor: pointer;
+			position: absolute;
+			// top: 3.1rem;
+			margin-top: .2rem;
+			left: 0;
+			// background: rgba(0,0,0,0.4);
+			background-color: rgb(177 177 177);
+			border: 1px solid #343579;
+			border-radius: 0.8rem;
+			// overflow: hidden;
+			z-index: 3;
+			height: 9rem;
+			overflow-x: hidden;
+			&.category_list::-webkit-scrollbar{display: none;}
+
+			.category_item{
+				text-align: left;
+				font-size: 1.4rem;
+				padding: 1rem 1.5rem;
+				line-height: 1.6rem;
+				font-weight: 600;
+				color: #595959;
+
+				&.select_category_item{
+					background: linear-gradient(-137deg, #eeefdb, #e7dbed);
+				}
+
+				&:hover{
+					background: linear-gradient(-137deg, #eeefdb, #e7dbed);
+				}
+			}
+		}
+	}
+}
+.pin_block{
+	text-align: center;
+	margin-top:.5rem;
+}
 //collection 弹窗
 .collection_modal{
 
diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue
index 7bbde12b..58dc3a6d 100644
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+		<!-- designDetailShow -->
         <a-modal class="design_detail_modal_component" 
             v-model:visible="designDetailShow" 
             :footer="null" 
@@ -7,49 +8,85 @@
             width="80%"
             :maskClosable="false"
             :centered="true"
+			:closable="false"
+
         >
-            <template #closeIcon>
+            <!-- <template #closeIcon>
                 <div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
-            </template>
+            </template> -->
+			<div class="design_title_text">
+				<div>Details</div>
+				<div class="design_title_text_intro">edit the details of your design</div>
+			</div>
+			<div class="design_closeIcon" @click.stop="closeModal()">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
             <div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
             <div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
+			<!-- <div class="design_centent">
+
+
+			</div> -->
             
             <div class="design_detail_modal_body" v-show="designShowPrview == 1">
-                <div class="detail_modal_body_left" @click="showDesignImgDetail()">
+				
+                <div class="detail_modal_body_img" @click="showDesignImgDetail()">
+                    <!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
                     <img class="detial_img" :src="designItemDetail.designItemUrl">
+					<div>
+						<!-- 全屏 --> 
+						<i class="fi fi-bs-expand-arrows-alt"></i>
+						<!-- 编辑 -->
+						<i class="fi fi-rr-edit"></i>
+						<!-- 层 -->
+						<i class="fi fi-rr-copy"></i>
+					</div>
                 </div>
-                <div class="detail_modal_body_right">
+                <div class="detail_modal_body_category">
                     <div class="detail_modal_right_top scroll_style">
-                        <div class="clothes_detail_item">
-                            <div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Apparel</div>
-                            <div class="clothes_item_content">
-                                <Draggable  :list="designItemDetail.clothes" item-key="id" :animation="100">
-                                    <template #item="{ element,index }">
-                                        <div class="clothes_item_img_block"  @click="clothesDetail(element,index)">
-                                            <img class="clothes_item_img" :src="element.path">
-                                        </div>
-                                    </template>
-                                </Draggable>
-                                
-                            </div>
+                        <div class="clothes_detail_item clothes_detail_item_apparel">
+                            <div class="clothes_item_header">
+								<i class="fi fi-rs-comments"></i>
+								<div>Current Apparel</div>
+								<i class="fi fi-rr-edit"></i>
+							</div>
+							<img src="" alt="" class="centent" @click="openCurrent(1)">
+                        </div>
+						<div class="clothes_detail_item clothes_detail_item_print">
+                            <div class="clothes_item_header">
+								<i class="fi fi-rs-comments"></i>
+								<div>Current Print</div>
+								<i class="fi fi-rr-edit"></i>
+							</div>
+							<i class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
+                        </div>
+						<div class="clothes_detail_item clothes_detail_item_color">
+                            <div class="clothes_item_header">
+								<i class="fi fi-rs-comments"></i>
+								<div>Current Print</div>
+								<i class="fi fi-rr-edit"></i>
+							</div>
+							<div class="img_block_item centent" @click="openCurrent(3)">
+								<div class="color_item">
+									<div class="color_content" :style="{background:`#6c6cac`}"></div>
+									<div class="color_content_body">
+										<div class="color_des">222</div>
+										<div class="color_des">111</div>
+									</div>
+								</div>
+							</div>
                         </div>
 
-                        <div class="clothes_detail_item" v-show="designItemDetail.others && designItemDetail.others.length">
-                            <div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Others</div>
-                            <div class="clothes_item_content others_clothes_item_content">
-                                <div class="clothes_item_img_block" v-for="(element,index) in designItemDetail.others" :key="element.path" @click="othersDetail(element,index)">
-                                    <img class="clothes_item_img" :src="element.path">
-                                </div>
-                            </div>
-                        </div>
+						
                     </div>
                     <div class="detail_modal_right_bottom">
                         <div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
                         <div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
                     </div>
                 </div>
-            </div>
+				<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
 
+            </div>
             <div class="design_detail_perview" v-show="designShowPrview == 2">
                 <div class="design_detail_perview_content" >
                     <img class="perview_img"   v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
@@ -83,6 +120,7 @@
 <script lang="ts">
 import { defineComponent,computed,ref } from 'vue'
 import ElementReplace from '@/component/Detail/ElementReplace.vue'
+import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
 import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
 import Draggable from 'vuedraggable'
 import { Https } from "@/tool/https";
@@ -92,6 +130,7 @@ export default defineComponent({
         ElementReplace,
         AccessoryReplace,
         Draggable,
+		DesignDetailAlter
     },
     setup() {
         const store = useStore();
@@ -101,23 +140,50 @@ export default defineComponent({
             index:0,
             collectionList:[],
             type:'',
+
         })//父组件传过来的数据
         return{
             designItemDetail,
             store,
-            parentData
+            parentData,
         }
     },
     data(){
         return{
             loadingShow:false,
-            designDetailShow:false,
+            designDetailShow:true,
             designShowPrview:1, //展示图片预览步骤
             generateHighDesignImg:'',//点击generate按钮生成的高级设计图
+			imgListr:[
+			{
+                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
+                id: 1,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
+                id: 2,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
+                id: 3,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
+                id: 4,
+            },
+			],
             
         }
     },
     methods:{
+		openCurrent(num: Number) {
+			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
+			DesignDetailAlter.init(num)
+			
+			if(num ==2 ){
+			}
+        },
+	
         closeModal(){
             if(this.designShowPrview == 1){
                 this.designDetailShow = false
@@ -127,7 +193,7 @@ export default defineComponent({
                 this.designShowPrview = 1
             }
         },
-
+		
         showDesignDetailModal(data:any){
             let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
             this.parentData = data
@@ -273,7 +339,35 @@ export default defineComponent({
 <style lang="less">
 .design_detail_modal_component{
     color: #000;
-
+	max-width: 1150px ;
+	.design_title_text{
+		font-size: 1.8rem;
+		font-weight: 900;
+		color: rgba(0,0,0,.65);
+		align-items: center;
+		margin-bottom: 2rem;
+		.design_title_text_intro{
+			font-size: 1.2rem;
+			font-weight: 400;
+			color: rgba(0,0,0,.45);
+		}
+	}
+		
+	.ant-modal-content{
+		border-radius: 10px;
+		overflow: hidden;
+		.ant-modal-header{
+			background-color: #fff;
+			border-bottom: none;
+		}
+		.ant-modal-body{
+			padding: 4rem 5rem 0rem!important;
+			// height: calc(65vh - 6.4rem);
+			height: 65rem;
+			display: flex;
+			flex-direction: column;
+		}
+	}
     .ant-modal-close{
         width: 3.6rem;
         height: 3.6rem;
@@ -286,26 +380,29 @@ export default defineComponent({
         display: none;
     }
 
-    .ant-modal-body{
-        background: #F2F3FB;
-        height: 80vh;
-        overflow-y: hidden;
-        padding: 0;
-    }
 
-    .close_icon{
-        width: 3.6rem;
-        height: 3.6rem;
-        background: #000000;
-        border-radius: 50%;
-        line-height: 3.6rem;
-        text-align: center;
-
-        .icon-guanbi{
-            font-size: 2rem;
-            color: #ffffff;
-        }
-    }
+    .design_closeIcon{
+		top: 2rem;
+		right: 2rem;
+        cursor: pointer;
+		width: 4rem;
+		height: 4rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		.fi-rr-cross-small::before{
+			padding: .2rem;
+			border-radius: 5px;
+			border: solid 2px rgba(0, 0, 0, 0.25);
+			transition: 1s all;
+			color: rgba(0, 0, 0, 0.55);
+		}
+		&.collection_closeIcon:hover .fi-rr-cross-small::before{
+			border: solid 2px rgba(0, 0, 0, 0.55);
+			color: rgba(0, 0, 0, 1);
+		}
+	}
 
     .turn_button{
         width: 3.6rem;
@@ -335,78 +432,111 @@ export default defineComponent({
     
 
     .design_detail_modal_body{
+		flex: 1;
         display: flex;
         justify-content: space-between;
         width: 100%;
-        height: 100%;
-        padding: 1.5rem 1rem 2.5rem;
+        // padding: 1.5rem 1rem 2.5rem;
         box-sizing: border-box;
-
-        .detail_modal_body_left{
-            width: 43.3rem;
+        .detail_modal_body_img{
+            // width: 43.3rem;
+			width: 23%;
             height: 100%;
             background: #FFFFFF;
             display: flex;
             justify-content: center;
             align-items: center;
-
+			position: relative;
             .detial_img{
                 max-width: 100%;
                 max-height: 100%;
             }
+			div{
+				i{
+					position: absolute;
+					&.fi-bs-expand-arrows-alt{
+						top: 0;
+						left: 0;
+					}
+					&.fi-rr-edit{
+						left: 0;
+						top: 20px;
+					}
+					&.fi-rr-copy{
+						top: 0;
+						right: 0;
+					}
+				}
+			}
         }
 
-        .detail_modal_body_right{
-            width: calc(100% - 44rem);
+        .detail_modal_body_category{
+			width: 17%;
             height: 100%;
 
             .detail_modal_right_top{
                 width: 100%;
-                height: calc(100% - 3.9rem);
+                height: calc(100% - 3.9rem); 
                 background: #fff;
                 overflow-y: auto;
 
                 .clothes_detail_item{
-                    padding-left: 1.5rem;
+					.centent{
+						cursor: pointer;
 
+						left: 50%;
+						transform: translateX(-50%);
+						position: relative;
+						display: inline-block;
+					}
                     .clothes_item_header{
-                        height: 6.4rem;
-                        display: flex;
-                        align-items: center;
-                        font-size: 18px;
+                        // height: 6.4rem;
+						margin-bottom: 1rem;
+						display: flex;
+                        font-size: 1.8rem;
                         color: #000000;
-
+						justify-content: space-between;
                         .icon-dangqianweizhi{
                             font-size: 1.8rem;
                             color: #000000;
                             margin-right: 1rem;
                         }
+						i{
+							font-size: 1.8rem;
+							display: block;
+						}
                     }
-
-                    .clothes_item_content{
-                        padding:0 0.5rem 2.3rem;
-                        border-bottom: 0.1rem solid #F2F3FB;
-
-                        &.others_clothes_item_content{
-                            border-bottom:none
-                        }
-
-                        .clothes_item_img_block{
-                            width: 20.5rem;
-                            height: 20.5rem;
-                            border: 0.1rem solid #F5F5F5;
-                            display: inline-block;
-                            text-align: center;
-                            line-height: 21.3rem;
-                            margin-right: 1rem;
-                            margin-bottom: 1rem;
-
-                            .clothes_item_img{
-                                max-width: 100%;
-                                max-height: 100%;
-                            }
-                        }
-                    }
+					img{
+						width: 10rem;
+						height: 10rem;
+					}
+					.color_item{
+						display: inline-block;
+						vertical-align: top;
+						border: 1px solid #ebe9e9;
+						.color_content{
+							width: 6rem;
+							height: 4rem;
+						}
+						.color_content_body{
+							.color_des{
+								font-size: 1.2rem;
+								font-weight: 600;
+							}
+						}
+						&:nth-child(4n){
+							margin-right: 0;
+						}
+					}
+					&.clothes_detail_item_print{
+						.fi-rr-picture{
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							zoom: 3;
+							margin: 1rem 0;
+						}
+					}
                 }
             }
 
@@ -439,6 +569,60 @@ export default defineComponent({
                 }
             }
         }
+		.detail_modal_body_select{
+			width:  20%;
+			.switch_type_list {
+            display: flex;
+            align-items: center;
+            position: relative;
+			justify-content: space-around;
+
+            .switch_type_item {
+                display: flex;
+                align-items: center;
+                // padding: 0 2rem;
+                height: 4rem;
+                background: #fff;
+                border-radius: 0.8rem;
+                line-height: 4rem;
+                font-size: 1.6rem;
+                // margin-right: 2.2rem;
+                color: #000;
+                cursor: pointer;
+                position: relative;
+                text-align: center;
+                transform-origin: left;
+                transform: scale(1);
+                transition: 0.3s all;
+                &.switch_type_item::before {
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    background: #000;
+                    height: 3px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: 6px;
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+                &.select_swtich {
+                    color: #000;
+                    font-weight: 600;
+                    transform: scale(1.15);
+                }
+                &.select_swtich::before {
+                    width: 100%;
+                }
+
+                .switch_icon {
+                    font-size: 1.8rem;
+                    margin-right: 0.8rem;
+                }
+            }
+        }
+		}
+		
     }
 
     .design_detail_perview{
@@ -526,4 +710,4 @@ export default defineComponent({
    
     
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/component/Detail/DesignDetailAlter.vue b/src/component/Detail/DesignDetailAlter.vue
new file mode 100644
index 00000000..565a08d0
--- /dev/null
+++ b/src/component/Detail/DesignDetailAlter.vue
@@ -0,0 +1,952 @@
+<template>
+	<div class="detail_modal_body_select">
+		<div v-show="type_ == 1 && select == true">
+			<div class="detail_uploadLibrary">
+				<div class="switch_type_list">
+				<div
+					@click.stop="open(1)"
+					class="switch_type_item"
+					:class="[openClick == 1 ? 'select_swtich' : '']"
+				>
+					<span>Upload</span>
+				</div>
+				<div
+					@click.stop="open(2)"
+					class="switch_type_item"
+					:class="[openClick == 2 ? 'select_swtich' : '']"
+				>
+					<span>Library</span>
+				</div>
+			</div>
+			<!-- <div v-show="openClick == 1">
+					<div v-show="openClick == 1" class="moodboard_body">
+						<div class="upload_img_body scroll_style">
+							<div class="upload_item">
+								<div
+									class="upload_file_item"
+									v-for="(file, index) in fileList"
+									:key="file"
+								>
+									<div
+										class="upload_file_item_content"
+										v-show="file?.status === 'uploading'"
+									>
+										<a-spin
+											:indicator="indicator"
+											tip="Uploading..."
+										/>
+									</div>
+									<div
+										class="upload_file_item_content"
+										v-show="file?.status === 'done'"
+									>
+										<img :src="file?.imgUrl" class="upload_img" />
+										<div
+											class="delete_file_block"
+											@click="deleteFile(file)"
+										>
+											Delete
+										</div>
+									</div>
+								</div>
+								<div
+									class="upload_file_item upload_component"
+									v-show="moodboarList.length != 8"
+								>
+									<a-upload
+										:action="uploadUrl + '/api/element/upload'"
+										list-type="picture-card"
+										:data="{
+											...upload,
+										}"
+										:headers="{ Authorization: token }"
+										v-model:file-list="fileList"
+										:before-upload="beforeUpload"
+										multiple
+										:maxCount="8 - moodboarList.length+fileList.length"
+										accept=".jpg,.png,.jpeg,.bmp"
+										@change="(file) => fileUploadChange(file)"
+									>
+										<div
+											class="upload_tip_block"
+											v-show=" moodboarList.length != 8"
+										>
+											<i class="fi fi-br-upload"></i>
+										</div>
+									</a-upload>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div> -->
+				<div v-show="openClick == 2">
+					
+				</div>
+			</div>
+			
+		</div>
+		<div v-show="type_ == 2 && select == true">
+			1111111111111111111111111
+		</div>
+		<div v-show="type_ == 3 && select == true">
+			<div class="detail_color">
+                <div class="right_content_line">
+                    <div class="upload_right_header">
+						<i class="color_edit fi fi-bs-comments" ></i>
+                        <span>Palette</span>
+                    </div>
+                    <div class="color_setting_block">
+						<Sketch class="sketch_color" v-model="selectColor"  :show.sync="colorPickerVisible"/>
+                        <!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
+                        <!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
+						<div class="color_block">
+							<div class="color_left" @click="colorBlockHex = !colorBlockHex">
+								<div v-show="colorBlockHex">
+									HEX
+								</div>
+								<div v-show="!colorBlockHex">
+									RGBA
+								</div>
+							</div>
+							<div class="color_right">
+								<div class="color_HEX_block" v-show="colorBlockHex">
+									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
+									<div>
+										{{getSelectRGB(selectColor).hex}}
+									</div>
+								</div>
+								<div class="color_rgb_block" v-show="!colorBlockHex">
+									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
+									<div class="rgb_item">{{getSelectRGB(selectColor).r}},</div>
+									<div class="rgb_item">{{getSelectRGB(selectColor).g}},</div>
+									<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
+								</div>
+							</div>
+							
+						</div>
+                    </div>
+                </div>
+
+                <div class="right_content_line right_content_line_upload">
+                    <div class="upload_right_header">
+						<i class="color_edit fi fi-bs-comments" ></i>
+                        <span>Auto Recognize</span>
+                    </div>
+					<div class="upload_centetn">
+						<div class="upload_item">
+							<div class="upload_file_item" v-for="(file) in colorFileList" :key="file">
+								<div class="upload_file_item_content" v-show="file.status !== 'done'">
+									<a-spin  :indicator="indicator" tip="Uploading..."/>
+								</div>
+								<div class="upload_file_item_content"  v-show="file.status === 'done'">
+									<img  :src="file?.imgUrl" class="upload_img" ref="colorImage">
+									<div class="delete_file_block" @click="colorDeleteFile(index)">Delete</div>
+								</div>
+							</div>
+							<a-upload
+								v-show="colorFileList.length < 1"
+								list-type="picture-card"
+								:customRequest="function(){}"
+								@change="fileUploadChange"
+								:before-upload="beforeUpload"
+								accept=".jpg,.png,.jpeg,.bmp"
+								>
+								<div  class="upload_tip_block">
+									<i class="fi fi-rr-picture"></i>
+								</div>
+							</a-upload>
+						</div>
+						<div class="upload_color">
+							<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item">
+								<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
+								</div>
+								<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
+								<img src="#" :title="pantongNameList[index]">
+							</div>
+						</div>
+					</div>
+                    
+                   
+                </div>
+				<div class="right_content_line">
+					<div class="upload_right_header">
+						<i class="color_edit fi fi-bs-comments" ></i>
+                        <span>Color Code</span>
+                    </div>
+                    <div class="get_color_block">
+                        <input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
+                        <div class="get_color_button" @click="getTcxColor()">
+                            <span class="icon iconfont icon-huoquduixiang"></span>
+                            <span class="get_color_des"></span>
+                        </div>
+						<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
+							<img src="#" :title="pantongName">
+						</div>
+                    </div>
+				</div>
+            </div>
+		</div>
+	</div>
+		<!-- <div class="detail_modal_body_result"></div> -->
+	<DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd>
+</template>
+<script>
+import { defineComponent,computed,ref, h ,nextTick } from 'vue'
+import Draggable from 'vuedraggable'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import { message,Upload} from 'ant-design-vue';
+import { Sketch} from '@ans1998/vue3-color'
+import {getUploadUrl,rgbToHsv} from '@/tool/util'
+import DesignDetailEnd from './DesignDetailEnd.vue';
+
+export default defineComponent({
+    props: ["msg"],
+    components:{
+        Draggable,Sketch,DesignDetailEnd
+    },
+    setup(prop) {
+        const store = useStore();
+		let type_ = ref(1);
+		let select = ref(false);
+        let parentData = ref({
+        })//父组件传过来的数据
+		let openClick = ref(1);
+
+
+		//颜色
+		let selectColor = ref({
+			rgba:{},
+		}) //顔色选择器默认颜色
+		let selectColorList = ref({
+		})
+        return{
+            store,
+            parentData,
+			openClick,
+			type_,
+			select,
+			selectColor,
+			selectColorList,
+        }
+    },
+	watch:{
+        selectColor(newVal,oldVal){
+			let DesignDetailEnd = this.$refs.DesignDetailEnd
+            DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
+			// console.log(DesignDetailEnd.selectIndex);
+            let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
+            this.setColorboardList(colorList)
+        }
+    },
+	computed:{
+        getSelectRGB(selectColor){
+			
+            return (selectColor)=>{
+                let rgba = selectColor.rgba
+                let data = {
+                    r:rgba?.r || rgba?.r===0 ? rgba?.r  : 255,
+                    g:rgba?.g || rgba?.g===0 ? rgba?.g  : 255,
+                    b:rgba?.b || rgba?.b===0 ? rgba?.b  : 255,
+                    a:rgba?.a || rgba?.a===1 ? rgba?.a  : 1,
+					hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
+                }
+                return data
+            }
+        },
+    },
+    data(){
+        return{
+            designShowPrview:1, //展示图片预览步骤
+            generateHighDesignImg:'',//点击generate按钮生成的高级设计图
+
+			//颜色
+            reviewColor:{}, //预览的颜色
+			colorPickerVisible: true,
+			colorBlockHex:true,
+			getColorBg:false,
+			pantongName:'',//潘通值
+			pantongNameList:[],
+            tcxColor:'',
+			selectColorList: [],
+			colorFileList: [],
+			selectIndex:0,
+			indicator : h(LoadingOutlined, {
+                style: {
+                    fontSize: '2.4rem',
+                },
+                spin: true,
+            }),
+
+        }
+    },
+    methods:{
+		//点击判断
+		init(num){
+			this.type_ = num
+			this.select = true
+			this.selectColor = {
+				rgba:{
+					r:108, 
+				g:108, 
+				b:172,
+				a:1
+				},
+				hex:'#6c6cac'
+			}
+			let DesignDetailEnd = this.$refs.DesignDetailEnd
+			DesignDetailEnd.init(num)
+		},
+		//衣服
+		open(num) {
+            this.openClick = num;
+			if(num ==2 ){
+			}
+        },
+
+		//印花
+
+
+
+		//颜色
+		beforeUpload(file){
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.error('You can only upload Image file!');
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.error('Image must smaller than 5MB!');
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        },
+		 //清除当前的颜色
+		 clearCurrentColor(){
+            this.selectColor = {
+				rgba:{}
+			}
+            this.colorFileList = []
+            this.pantongName = ''
+            this.pantongNameList = []
+            this.tcxColor = ''
+        },
+		colorDeleteFile(index){
+            this.colorFileList.splice(index, 1)
+			this.selectColorList = []
+        },
+		setUplpadColor(color){
+			this.selectColor  = color
+		},
+		rgbaToHex(rgba) { // rgba转16进制
+            let hex = '#';
+            for (const i of rgba) {
+                hex += Number(i).toString(16).padStart(2, '0');
+            }
+            return hex;
+        },
+        //通过HSV获取颜色
+		getHsvColor(color){
+            // let hsv = rgbToHsv(color)
+            this.pantongName = ''
+			// {params:{id:3}}
+			// console.log(color);
+			let colorList = []
+			color.forEach((item,index)=>{
+				let arr = [item.rgba.r,item.rgba.g,item.rgba.b,item.rgba.a]
+				colorList.push(arr)
+			})
+			
+			let hsvList = []
+			colorList.forEach((item)=>{
+				let hsv = rgbToHsv(item)
+				if(hsvList.length == 0){
+				}else{
+					if(hsvList[0].h+5){
+					}
+				}
+				
+				let obj = {
+					h:Number(hsv[0]),
+					s:Number(hsv[1]),
+					v:Number(hsv[2]),
+				}
+				hsvList.push(obj)
+			})
+			// let data = []
+            // Https.axiosGet(Https.httpUrls.getRgbByHsv,{params:hsvList}).then((rv) =>{
+           	// // Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
+            //     if(rv){
+            //         this.pantongName = rv.name
+			// 		console.log(rv);
+            //     }
+            // })
+			Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
+                (rv) => {
+					if(rv){
+						rv.forEach(element => {
+							this.pantongNameList.push(element.name) 
+						});
+						console.log(rv);
+					}
+                }
+            ).catch(res=>{
+            });
+        },
+   //通过tcx获取颜色
+		getTcxColor(){
+            if(!this.tcxColor){
+                return
+            }
+            Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
+                if(rv && rv.name){
+					// let hex = this.rgbaToHex([color.r,color.g,color.b])
+					let hex = this.rgbaToHex([rv.r,rv.g,rv.b])
+					this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
+					this.selectColor  = this.reviewColor
+                    this.colorList[this.selectIndex] =  {r:rv.r, g:rv.g, b:rv.b}
+                    this.pantongName = rv.name
+                    let colorList =this.colorList.filter((v) => Object.keys(v).length)
+                    this.setColorboardList(colorList)
+					this.getColorBg = true
+                }else{
+                    message.error("Can't find the TCX color")
+                }
+            })
+        },
+		setColorboardList(colorList){
+            let  newColorList = colorList.map((v)=>{
+                let data = {
+                    id:'',
+                    name:'',
+                    rgbValue:v
+                }
+                return data
+            })
+            // this.store.commit('setColorboardList',newColorList)
+
+        },
+        fileUploadChange(data){
+            let file = data.file
+            let fileData = file.originFileObj
+            var reader = new FileReader();
+            reader.onload = (e) => {
+                let data_new;
+                if (typeof e.target.result === 'object') {
+                // 把Array Buffer转化为blob 如果是base64不需要
+                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
+                } else {
+                    data_new = e.target.result;
+                }
+                file.imgUrl = data_new
+                file.status = 'done'
+                this.colorFileList.push(file)
+
+                setTimeout(()=>{
+                    const colorThief = new ColorThief();
+                    let colorImage = this.$refs.colorImage
+                    let domImg = colorImage[0];
+                    let color = colorThief.getColor(domImg)
+					let colorHex = this.rgbaToHex(color)
+					let selectColorList = [];
+					let selectColor = colorThief.getPalette(domImg,7)
+					selectColor = selectColor.join('&')
+					selectColor = selectColor.split("&")
+					let colorLi = []
+					new Set(selectColor).forEach((item)=>{
+						colorLi.push(item.split(","))
+					})
+					colorLi.forEach(element => {
+						let colorLiHex = this.rgbaToHex(element)
+						selectColorList.push(
+							{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
+						)
+					});
+					this.selectColorList = selectColorList
+                    this.getHsvColor(selectColorList)
+                    this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
+                },100)
+            };
+            // 转化为base64S
+            reader.readAsDataURL(fileData)
+        },
+    }
+})
+</script>
+<style lang="less">
+
+.detail_modal_body_select{
+	width:  20%;
+	>div{
+		height: 100%;
+	}
+	i{
+		font-size: 1.8rem;
+		display: block;
+	}
+	.detail_uploadLibrary{
+		.switch_type_list {
+		display: flex;
+		align-items: center;
+		position: relative;
+		justify-content: space-around;
+
+		.switch_type_item {
+			display: flex;
+			align-items: center;
+			// padding: 0 2rem;
+			height: 4rem;
+			background: #fff;
+			border-radius: 0.8rem;
+			line-height: 4rem;
+			font-size: 1.6rem;
+			// margin-right: 2.2rem;
+			color: #000;
+			cursor: pointer;
+			position: relative;
+			text-align: center;
+			transform-origin: left;
+			transform: scale(1);
+			transition: 0.3s all;
+			&.switch_type_item::before {
+				position: absolute;
+				content: "";
+				display: block;
+				background: #000;
+				height: 3px;
+				left: 50%;
+				transform: translateX(-50%);
+				bottom: 6px;
+				width: 0px;
+				transition: 0.3s all;
+			}
+			&.select_swtich {
+				color: #000;
+				font-weight: 600;
+				transform: scale(1.15);
+			}
+			&.select_swtich::before {
+				width: 100%;
+			}
+
+			.switch_icon {
+				font-size: 1.8rem;
+				margin-right: 0.8rem;
+			}
+		}
+	}
+	
+	
+}
+	.detail_color{
+		// height: calc(100% - 5.4rem);
+		height: 100%;
+		overflow-y: auto;
+		overflow-x: hidden;
+		display: flex;
+		flex-direction: column;
+		.right_content_line{
+			position: relative;
+			margin-bottom: 1rem;
+			.upload_right_header{
+				display: flex;
+				margin-bottom: 1rem;
+				margin-top: 1rem;
+				&.upload_right_header:nth-child(1){
+					margin-top: 0;
+				}
+				span{
+					margin-left: 1rem;
+					font-size: 1.8rem;
+					color: #000000;
+				}
+			}
+			.upload_centetn{
+				// overflow-x: hidden;
+			}
+			.upload_centetn::-webkit-scrollbar {
+				display: none;
+			}
+			.color_review_block{
+				margin-right: 4rem;
+
+				.color_review_content{
+					width: 16.5rem;
+					height: 16.5rem;
+					background: #FFFFFF;
+					border: 0.1rem solid #DCDCEC;
+				}
+
+				.pantong_name{
+					margin-top: 1rem;
+					font-size: 1.6rem;
+					font-weight: 400;
+					color: #030303;
+					text-align: left;
+					font-weight: bold;
+				}
+
+				.clear_button{
+					padding:  0 2.8rem;
+					height: 3.2rem;
+					line-height: 3.2rem;
+					background: #EFEEFF;
+					font-size: 1.2rem;
+					font-family: Roboto;
+					color: #343579;
+					display: inline-block;
+					margin-top: 1rem;
+					cursor: pointer;
+				}
+			}
+
+			.upload_file_item{
+				// margin: 0 2rem 2rem 0;
+				margin: 0;
+				display: inline-block;
+				// width: 16.5rem;
+				// height: 16.5rem;
+				width: 6rem;
+				height: 6rem;
+				border: 1px solid #F5F5F5;
+				vertical-align: top;
+
+					.upload_file_item_content{
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 100%;
+					width: 100%;
+					position: relative;
+					cursor: pointer;
+
+					&:hover .delete_file_block{
+						display: block;
+					}
+
+					.upload_img{
+						display: block;
+						max-height: 100%;
+						max-width: 100%;
+						object-fit: cover;
+					}
+
+					.delete_file_block{
+						display: none;
+						width: 100%;
+						height: 4rem;
+						background: rgba(0,0,0,0.2);
+						font-size: 1.6rem;
+						color: #FFFFFF;
+						line-height: 4rem;
+						text-align: center;
+						position: absolute;
+						left: 0;
+						bottom: 0;
+					}
+				}
+			}
+
+			.upload_img_icon{
+				width: 4.6rem;
+			}
+			.upload_color{
+				display: flex;
+				width: 100%;
+				justify-content: flex-start;
+				flex-direction: row;
+				flex-wrap: nowrap;
+				height: 2rem;
+				.upload_color_item{
+					width: 2rem;
+					height: 2rem;
+					position: relative;
+					cursor: pointer;
+					margin-right: 1rem;
+					.upload_color_item_bg{
+						width: 2rem;
+						height: 2rem;
+					}
+					img{
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						opacity: 0;
+						top: 0;
+					}
+					// .upload_color_item_text{
+					// 	font-size: 12px;
+					// 	line-height: 1;
+					// 	text-align: center;
+					// }
+					div{
+					}
+				}
+			}
+			.color_setting_block{
+				// width: 16.5rem;
+				width: 18rem;
+				margin: auto;
+				background: #f0eaee;
+
+				border-radius: 10px;
+				overflow: hidden;
+				// box-shadow: 2px 2px 8px #000;
+				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
+				background: linear-gradient(70deg, #eee4f3, #f3f4e6);
+				.sketch_color{
+					box-shadow: none;
+					width: 18rem;
+					background: rgba(0,0,0,0);
+					padding-top: 1rem !important;
+					max-width: 170px;
+					padding: 0;
+					.vc-sketch{
+					}
+					.vc-sketch-saturation-wrap{
+						width: 16rem;
+						height: 16rem;
+						max-height: 170px;
+						max-width: 170px;
+						margin: auto;
+						padding-bottom: 0;
+					}
+					.vc-sketch-presets{
+						display: none;
+					}
+					.vc-botton-container{
+						display: none;
+					}
+					.vc-chrome-body{
+						display: none;
+					}
+					.vc-sketch-field{
+						display: none;
+						.vc-input__input{
+							text-align: center;
+							padding: .4rem 0;
+							border-radius: 5px;
+						}
+					}
+					.vc-sketch-color-wrap{
+						border-radius: 5px;
+						box-shadow: inset 0 0 0 1px #ccc;
+						.vc-sketch-active-color{
+						}
+						.vc-sketch-active-color{
+							display: none;
+						}
+						.vc-checkerboard{
+							display: none;
+						}
+					}
+					
+					.vc-sketch-color-wrap{
+						background-image: url(@../../../../assets/images/homePage/dropper.png);
+						background-size: 15px;
+						background-repeat: no-repeat;
+						background-position: 50%;
+						cursor: pointer;
+
+					}
+					// .vc-sketch-color-wrap{
+					// 	display: none;
+					// }
+					.vc-sketch-controls{
+						width: 90%;
+						margin: .5rem auto;
+						.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
+							.vc-hue{
+								border-radius: 15px;
+							}
+							.vc-alpha{
+								border-radius: 15px;
+								overflow: hidden;
+							}
+						}
+						.vc-sketch-alpha-wrap{
+							margin-top: .5rem;
+						}
+					}
+				}
+				.chrome_color{
+					width: 16.5rem;
+					height: 16.5rem;
+					overflow: hidden;
+
+					.vc-chrome-saturation-wrap{
+						height: 100%;
+					}
+					.vc-chrome-saturation-wrap .vc-saturation-circle{
+						width: 1rem;
+						height: 1rem;
+					}
+				}
+
+				.sileder_color{
+					margin-top:1.3rem;
+
+					.vc-slider-swatches{
+						display:none
+					}
+					.vc-slider-hue-warp {
+						width: 16.5rem;
+						height: 2.4rem;
+						border-radius: 1.2rem;
+						overflow: hidden;
+
+						.vc-hue-picker{
+							width: 1.4rem;
+							height: 1.4rem;
+							border-radius: 50%;
+							transform: translate(-0.7rem, -0.2rem);
+						}
+					}
+					.vc-hue-pointer{
+						top: 0.5rem !important;
+					}
+					
+				}
+
+				.color_block{
+					// margin-top: 1rem;
+					// display: flex;
+					// justify-content: space-between;
+					// font-size: 1.6rem;
+					width: 100%;
+					padding: 0 5%;
+					padding-bottom: 5%;
+					margin: 0.5rem auto;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					.color_right{
+						width: 11rem;
+						font-size: 12px;
+						color: #666666;
+						.color_rgb_block{
+							display: flex;
+							.rgb_item{
+								margin-left: .2rem;
+							}
+						}
+					}
+					.color_left{
+						cursor: pointer;
+						color: rgb(153, 153, 153);
+					}
+					.color_right,.color_left{
+						>div{
+							display: flex;
+							align-items: center;
+						}
+						.color_HEX_block,.color_rgb_block{
+							padding: .2rem .5rem;
+							box-shadow: inset 0 0 0 1px #ccc;
+							border-radius: .4rem;
+							justify-content: space-around;
+							text-transform:uppercase;
+							.color_block_bg{
+								width: 1.5rem;
+								height: 1.5rem;
+								// margin-right: .5rem;
+								display: flex;
+								justify-content: space-between;
+							}
+						}
+						.color_block_bg{
+						}
+					}
+					
+				}
+			}
+
+			.get_color_block{
+				display: flex;
+				flex-direction: row;
+				.get_color_input{
+					width: 15rem;
+					height: 2.8rem;
+					background: #FFFFFF;
+					border: 0.1rem solid #DCDCEC;
+					padding: 1rem 1.3rem;
+					box-sizing: border-box;
+					font-size: 1.4rem;
+					text-align: left;
+
+					&::placeholder {
+						color: #B7B7B7;
+					}
+				}
+				
+				.get_color_button{
+					padding: 0 .2rem;
+					height: 2.8rem;
+					background: #EFEEFF;
+					display: inline-block;
+					line-height: 3rem;
+					font-size: 1.2rem;
+					color: #343579;
+					vertical-align: middle;
+					cursor: pointer;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					flex: 1;
+					.icon-huoquduixiang{
+						margin-right: 0.5rem;
+						font-size: 2rem;
+						color:#343579;
+						vertical-align: middle;
+					}
+
+					.get_color_des{
+						vertical-align: middle;
+					}
+				}
+				.get_color_bg{
+					width: 18rem;
+					height: 18rem;
+					position: relative;
+					left: 50%;
+					transform: translateX(-50%);
+					margin-top: 1.5rem;
+					img{
+						opacity: 0;
+						position: absolute;
+						top: 0;
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		.upload_item{
+			margin-bottom: .5rem;
+			display: flex;
+			justify-content: center;
+			.ant-upload-picture-card-wrapper{
+				.ant-upload-list{
+					display: flex;
+					justify-content: center;
+					.ant-upload-select-picture-card{
+						// margin: 0 2rem 2rem 0;
+						margin: 0;
+						display: inline-block;
+						width: 6rem;
+						height: 6rem;
+						border: 1px solid #F5F5F5;
+						vertical-align: top;
+						i{
+							zoom: 1.2;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+   
+</style>
\ No newline at end of file
diff --git a/src/component/Detail/DesignDetailEnd.vue b/src/component/Detail/DesignDetailEnd.vue
new file mode 100644
index 00000000..1735d85b
--- /dev/null
+++ b/src/component/Detail/DesignDetailEnd.vue
@@ -0,0 +1,301 @@
+<template>
+	<div class="detail_modal_body_result">
+
+
+		<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
+			<div class="upload_title result_apparel" v-show="type_ == 1">
+				<i class="color_edit fi fi-bs-comments"></i>
+				<span>New Apparel</span>
+			</div>
+			<div v-show="type_ == 2" class="result_print">
+				<div>
+					<div class="upload_title">
+						<i class="color_edit fi fi-bs-comments"></i>
+						<span>New Print</span>
+					</div>
+					<div class="print_left">
+						<img src="" alt="">
+					</div>
+				</div>
+				<div>
+					<div class="upload_title">
+						<i class="color_edit fi fi-bs-comments"></i>
+						<span>Placement</span>
+					</div>
+					<div class="print_right">
+						<div class="habit_Overal_Single">
+							<div
+								class="habit_Overal_Single_text"
+								:class="{ active: !overalSingle }"
+							>
+								Overal
+							</div>
+							<a-switch v-model:checked="overalSingle" />
+							<div
+								class="habit_Overal_Single_text"
+								:class="{ active: overalSingle }"
+							>
+								Single
+							</div>
+						</div>
+						<div class="habit_System_Designer">
+							<a-slider id="system_silder"
+								v-model:value="systemDesignerPercentage"
+								@afterChange="systemDesigner"
+								:tip-formatter="formatter"
+							>
+							</a-slider>
+						</div>
+						
+					</div>
+				</div>
+			</div>
+			<div class="result_apparel_print_img">
+				<img v-show="type_==1" class="result_appare_img" src="" alt="">
+				<img v-show="type_==2" class="result_print_img" src="" alt="">
+			</div>
+		</div>
+			
+		<div v-show="type_ == 2"></div>
+		<div v-show="type_ == 3">
+			<div class="result_color upload_title">
+				<i class="color_edit fi fi-bs-comments"></i>
+				<span>New Color</span>
+			</div>
+			<div class="modal_img">
+				<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
+					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
+						<!-- <div class="color_content" :style="{background:`#6c6cac`}"></div> -->
+						<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
+						</div>
+						<div class="color_content_body">
+							<div class="color_des">22</div>
+							<div class="color_des">111</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+	</div>
+</template>
+<script>
+import { defineComponent,computed,ref, h } from 'vue'
+import Draggable from 'vuedraggable'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import { message,Upload} from 'ant-design-vue';
+import { Sketch} from '@ans1998/vue3-color'
+import {getUploadUrl,rgbToHsv} from '@/tool/util'
+
+export default defineComponent({
+    props: ["msg"],
+    components:{
+        Draggable,Sketch,
+    },
+    setup(prop) {
+        const store = useStore();
+		let type_ = ref(0);
+
+
+
+		//印花
+		let overalSingle = ref()
+		let systemDesignerPercentage = ref(30)
+		
+		//颜色
+		let colorList = ref([{},{},{},{},{},{},{},{}])
+        return{
+			overalSingle,
+			systemDesignerPercentage,
+			type_,
+			colorList,
+        }
+    },
+    data(){
+        return{
+
+			//颜色
+            selectIndex:0,//选中的文件索引
+			getRGBA:{},
+			selectColor:{},
+        }
+    },
+    methods:{
+		//点击判断
+		init(num){
+			this.type_ = num
+			this.colorList[this.selectIndex] = this.$parent.selectColor
+		},
+
+		//印花
+		systemDesigner(num) {
+            console.log(num);
+        },
+		formatter(value) {
+			return `${value}%`;
+		},
+		//颜色
+		selectColorItem(index,color){
+			let hex
+			let parent = this.$parent
+			if(color.rgba?.r){
+				hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
+			}else{
+				hex = '#FFFFFF'
+			}
+			this.selectIndex = index
+            this.$parent.selectIndex = index
+            this.$parent.selectColor = color?.rgba + ''? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {rgba:{},hex:''}
+            this.$parent.tcxColor = ''
+			this.$parent.pantongName = ''
+        },
+    }
+})
+</script>
+<style lang="less" scoped>
+.detail_modal_body_result{
+	width: 26%;
+	i{
+		font-size: 1.8rem;
+		display: block;
+	}
+	.upload_title{
+		display: flex;
+		margin-bottom: 1rem;
+		margin-top: 1rem;
+		&.upload_title:nth-child(1){
+			margin-top: 0;
+		}
+		span{
+			margin-left: 1rem;
+			font-size: 1.8rem;
+			color: #000000;
+		}
+	}
+	//模型和印花
+	.result_apparel_print{
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		.result_apparel_print_img{
+			flex: 1;
+			img{
+				width: 100%;
+				height: 100%;
+				max-height: 35rem;
+				margin-top: 2rem;
+			}
+			.result_print_img{
+				transform: scale(.7);
+				transform-origin: right top;
+			}
+		}
+	}
+	//印花
+	.result_print{
+		display: flex;	
+		justify-content: space-between;
+		.print_left{
+			 img{
+				width: 8rem;
+				height: 8rem;
+				margin: auto;
+			 }
+		}
+		.print_right{
+			.habit_Overal_Single {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				// margin: 2rem 0;
+				transform: scale(.8);
+
+				// margin: 3rem 0;
+				.habit_Overal_Single_text {
+					font-weight: 600;
+					color: rgba(0, 0, 0, 0.5);
+					&.active {
+						color: rgba(0, 0, 0, 0.7);
+						// font-weight: 900;
+						transform: scale(1.2);
+					}
+				}
+				:deep(.ant-switch) {
+					margin: 0 1rem;
+					background-color: #efefef;
+				}
+				:deep(.ant-switch-checked) {
+							background-color: #000;
+						}
+			}
+			.habit_System_Designer {
+				margin-top: 4rem;
+				transform: scale(.8);
+
+				:deep(.ant-slider-track),
+				:deep(.ant-slider-rail) {
+					height: .6rem;
+					background-color: #e1e1e1;
+					border-radius: 0.5rem;
+				}
+				:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
+				:deep(.ant-slider-handle) {
+					background-color: #2d2e76 !important;
+					border: none !important;
+				}
+				:deep(.ant-slider-handle:hover) {
+					box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
+				}
+			
+				// .habit_System_Designer_text_max {
+				// 	display: flex;
+				// 	justify-content: space-between;
+				// 	.habit_System_Designer_text {
+				// 	}
+				// }
+			}
+		}
+	}
+	//颜色
+	.modal_img{
+		width: 100%;
+		overflow-x: hidden;
+		display: flex;
+		flex-wrap: wrap;
+		padding-left: 2rem;
+		&.modal_img::-webkit-scrollbar {
+			display: none;
+		}
+		.modal_img_item{
+			margin: 0 1rem 1rem 0;
+			position: relative;
+			cursor: pointer;
+			border: 0.1rem solid #DCDCEC;
+			.color_content{
+				width: 7rem;
+				height: 4rem;
+			}
+			.color_content_body{
+				.color_des{
+					font-size: 1.2rem;
+					font-weight: 600;
+				}
+			}
+			.select_upload_color{
+				border: 0.1rem solid #343579;
+			}
+			.upload_color{
+				width: 100%;
+				height: 100%;
+			}
+			
+		}
+
+
+	}
+}
+
+   
+</style>
\ No newline at end of file
diff --git a/src/component/Detail/DesignDetailOld.vue b/src/component/Detail/DesignDetailOld.vue
new file mode 100644
index 00000000..c3fb8248
--- /dev/null
+++ b/src/component/Detail/DesignDetailOld.vue
@@ -0,0 +1,530 @@
+<template>
+    <div>
+        <a-modal class="design_detail_modal_component" 
+            v-model:visible="designDetailShow" 
+            :footer="null" 
+            title="Mailbox binding"
+            width="80%"
+            :maskClosable="false"
+            :centered="true"
+        >
+            <template #closeIcon>
+                <div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
+            </template>
+            <div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
+            <div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
+            
+            <div class="design_detail_modal_body" v-show="designShowPrview == 1">
+                <div class="detail_modal_body_left" @click="showDesignImgDetail()">
+                    <img class="detial_img" :src="designItemDetail.designItemUrl">
+                </div>
+                <div class="detail_modal_body_right">
+                    <div class="detail_modal_right_top scroll_style">
+                        <div class="clothes_detail_item">
+                            <div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Apparel</div>
+                            <div class="clothes_item_content">
+								<!-- 拖拽功能 -->
+                                <Draggable  :list="designItemDetail.clothes" item-key="id" :animation="100">
+                                    <template #item="{ element,index }">
+                                        <div class="clothes_item_img_block"  @click="clothesDetail(element,index)">
+                                            <img class="clothes_item_img" :src="element.path">
+                                        </div>
+                                    </template>
+                                </Draggable>
+                                
+                            </div>
+                        </div>
+
+                        <div class="clothes_detail_item" v-show="designItemDetail.others && designItemDetail.others.length">
+                            <div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Others</div>
+                            <div class="clothes_item_content others_clothes_item_content">
+                                <div class="clothes_item_img_block" v-for="(element,index) in designItemDetail.others" :key="element.path" @click="othersDetail(element,index)">
+                                    <img class="clothes_item_img" :src="element.path">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="detail_modal_right_bottom">
+                        <div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
+                        <div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="design_detail_perview" v-show="designShowPrview == 2">
+                <div class="design_detail_perview_content" >
+                    <img class="perview_img"   v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
+                    <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
+                </div>
+            </div>
+
+            <div class="design_detail_perview design_detail_perview_second" v-show="designShowPrview == 3">
+                <div class="design_detail_perview_content" >
+                    <img class="perview_img"  v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
+                </div>
+                <div class="design_detail_perview_content" >
+                    <img class="perview_img" v-lazy="generateHighDesignImg || ''" :key="generateHighDesignImg">
+                    <div class="img_item_hover">
+                        <div class="img_operate_block delete_img_block" @click.stop="deleteGeneratePic()">
+                            <span class="icon iconfont icon-shanchu operate_icon"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </a-modal>
+        <ElementReplace ref="ElementReplace"></ElementReplace>
+        <AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
+
+         <div class="mark_loading" v-show="loadingShow">
+            <a-spin size="large" />
+        </div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref } from 'vue'
+import ElementReplace from '@/component/Detail/ElementReplace.vue'
+import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
+import Draggable from 'vuedraggable'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+export default defineComponent({
+    components:{
+        ElementReplace,
+        AccessoryReplace,
+        Draggable,
+    },
+    setup() {
+        const store = useStore();
+        let designItemDetail :any = computed(()=>{return store.state.DesignDetailModule.designItemDetail})
+        let parentData:any = ref({
+            design:{},
+            index:0,
+            collectionList:[],
+            type:'',
+        })//父组件传过来的数据
+        return{
+            designItemDetail,
+            store,
+            parentData
+        }
+    },
+    data(){
+        return{
+            loadingShow:false,
+            designDetailShow:false,
+            designShowPrview:1, //展示图片预览步骤
+            generateHighDesignImg:'',//点击generate按钮生成的高级设计图
+            
+        }
+    },
+    methods:{
+        closeModal(){
+            if(this.designShowPrview == 1){
+                this.designDetailShow = false
+            }else if(this.designShowPrview == 2){
+                this.designShowPrview = this.designShowPrview - 1
+            }else if(this.designShowPrview == 3){
+                this.designShowPrview = 1
+            }
+        },
+
+        showDesignDetailModal(data:any){
+            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
+            this.parentData = data
+            this.loadingShow = true
+            Https.axiosGet(url).then(
+                (rv: any) => {
+                    this.store.commit('setDesignItemDetail',rv)
+                    this.generateHighDesignImg = rv.highDesignUrl
+                    this.designShowPrview = 1
+                    this.designDetailShow = true
+                    this.loadingShow = false
+                }
+            ).catch(rv=>{
+                this.loadingShow = false
+            })
+        },
+
+        //切换上一张或下一张图的详情
+        changeDesignItem(type:string){
+            let {design,index,collectionList} = this.parentData
+            let newDesign = {}
+            let newIndex = 0
+            if(type === 'last'){
+                if(index>0){
+                    newIndex = this.parentData.index - 1
+                }else{
+                    newIndex = this.parentData.collectionList.length - 1
+                }
+            }else{
+                if(index <  this.parentData.collectionList.length - 1){
+                    newIndex = this.parentData.index + 1
+                }else{
+                    newIndex = 0
+                }
+            }
+            newDesign = collectionList[newIndex]
+            let data = {
+                design:newDesign,
+                index:newIndex,
+                collectionList:collectionList
+            }
+            this.showDesignDetailModal(data)
+        },
+
+        //显示图片详情
+        showDesignImgDetail(){
+            if(this.generateHighDesignImg){
+                this.designShowPrview = 3
+            }else{
+                this.designShowPrview = 2
+            }
+        },
+
+        //生成高级图片
+        generateHighDesign(){
+            let design:any = this.parentData.design
+            let data = {
+                designItemId: design.designItemId,
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            }
+            this.loadingShow = true
+             Https.axiosPost(Https.httpUrls.generateHighDesign,data).then(
+                (rv: any) => {
+                    this.generateHighDesignImg = rv
+                    this.loadingShow = false
+                    this.designShowPrview = 3
+                }
+            ).catch(rv=>{
+                this.loadingShow = false
+            })
+        },
+
+        //删除生成的真人图
+        deleteGeneratePic(){
+            let design:any = this.parentData.design
+            let data = {
+                designItemId: design.designItemId,
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            }
+            this.loadingShow = true
+            Https.axiosPost(Https.httpUrls.deleteHighDesign,data).then(
+                (rv: any) => {
+                    this.loadingShow = false
+                    this.generateHighDesignImg = ''
+                    this.designShowPrview = 2
+                }
+            ).catch(rv=>{
+                this.loadingShow = false
+            })
+        },
+
+        //元素替换
+        clothesDetail(clothes:any, index:number){
+            let elementReplace:any = this.$refs.ElementReplace
+            let data ={
+                clothes:clothes,
+                index:index,
+            }
+            elementReplace.showelementReplaceModal(data)
+        },
+
+        othersDetail(others:any, index:number){
+            let accessoryReplace:any = this.$refs.AccessoryReplace
+            let data ={
+                others:others,
+                index:index,
+            }
+            accessoryReplace.showAccessoryReplaceModal(data)
+        },
+
+        //重新设计
+        redesignItem(){
+            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+            delete designItemDetail.designItemUrl
+            let priority = designItemDetail.clothes.map((v:any)=>{
+                return v.type
+            })
+            let data = {
+                ...designItemDetail,
+                priority:priority,
+                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            }
+            this.loadingShow = true
+            Https.axiosPost(Https.httpUrls.designSingle, data).then(
+                (rv: any) => {
+                    this.parentData.design.designItemUrl = rv.designItemUrl
+                    this.$emit('finishRedesign',this.parentData)
+                    this.closeModal()
+                    this.loadingShow = false
+                    this.closeModal()
+                }
+            ).catch(res=>{
+                this.loadingShow = false
+            });
+        }
+
+
+
+        
+    }
+})
+</script>
+<style lang="less">
+.design_detail_modal_component{
+    color: #000;
+
+    .ant-modal-close{
+        width: 3.6rem;
+        height: 3.6rem;
+        position: absolute;
+        top: -1.8rem;
+        right: -1.8rem;
+    }
+
+    .ant-modal-header{
+        display: none;
+    }
+
+    .ant-modal-body{
+        background: #F2F3FB;
+        height: 80vh;
+        overflow-y: hidden;
+        padding: 0;
+    }
+
+    .close_icon{
+        width: 3.6rem;
+        height: 3.6rem;
+        background: #000000;
+        border-radius: 50%;
+        line-height: 3.6rem;
+        text-align: center;
+
+        .icon-guanbi{
+            font-size: 2rem;
+            color: #ffffff;
+        }
+    }
+
+    .turn_button{
+        width: 3.6rem;
+        height: 3.6rem;
+        background: #000000;
+        border-radius: 50%;
+        position: absolute;
+        top: calc(50% - 1.8rem);
+        cursor: pointer;
+        line-height: 3.6rem;
+        text-align: center;
+
+        &.turn_left_button{
+            left: -8rem;
+        }
+
+        &.turn_right_button{
+            right: -8rem;
+        }
+
+        .icon_turn{
+            font-size: 2.4rem;
+            color: #ffffff;
+        }
+    }
+
+    
+
+    .design_detail_modal_body{
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
+        padding: 1.5rem 1rem 2.5rem;
+        box-sizing: border-box;
+
+        .detail_modal_body_left{
+            width: 43.3rem;
+            height: 100%;
+            background: #FFFFFF;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .detial_img{
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+
+        .detail_modal_body_right{
+            width: calc(100% - 44rem);
+            height: 100%;
+
+            .detail_modal_right_top{
+                width: 100%;
+                height: calc(100% - 3.9rem);
+                background: #fff;
+                overflow-y: auto;
+
+                .clothes_detail_item{
+                    padding-left: 1.5rem;
+
+                    .clothes_item_header{
+                        height: 6.4rem;
+                        display: flex;
+                        align-items: center;
+                        font-size: 18px;
+                        color: #000000;
+
+                        .icon-dangqianweizhi{
+                            font-size: 1.8rem;
+                            color: #000000;
+                            margin-right: 1rem;
+                        }
+                    }
+
+                    .clothes_item_content{
+                        padding:0 0.5rem 2.3rem;
+                        border-bottom: 0.1rem solid #F2F3FB;
+
+                        &.others_clothes_item_content{
+                            border-bottom:none
+                        }
+
+                        .clothes_item_img_block{
+                            width: 20.5rem;
+                            height: 20.5rem;
+                            border: 0.1rem solid #F5F5F5;
+                            display: inline-block;
+                            text-align: center;
+                            line-height: 21.3rem;
+                            margin-right: 1rem;
+                            margin-bottom: 1rem;
+
+                            .clothes_item_img{
+                                max-width: 100%;
+                                max-height: 100%;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .detail_modal_right_bottom{
+                position: relative;
+
+                .detail_page_num{
+                    position: absolute;
+                    top: 2rem;
+                    left: 12.4rem;
+                    font-size: 1.8rem;
+                    font-family: Roboto;
+                    font-weight: 400;
+                    color: #000000;
+                }
+
+                .detail_redesign_button{
+                    position: absolute;
+                    top: 1.4rem;
+                    right: 0;
+                    padding: 0 1.8rem;
+                    text-align: center;
+                    height: 3.6rem;
+                    line-height: 3.6rem;
+                    background: #343579;
+                    font-size: 14px;
+                    font-family: Roboto;
+                    color: #FFFFFF;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .design_detail_perview{
+        width: 100%;
+        height: 100%;
+        padding: 0.7rem 0 0.6rem;
+
+        &.design_detail_perview_second{
+            width: 100%;
+            height: 100%;
+            padding: 0.7rem 9.1rem 0.6rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .design_detail_perview_content{
+            width: 46.2rem;
+            height: 100%;
+            background: #fff;
+            position: relative;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .perview_img{
+                max-width: 100%;
+                max-height: 100%;
+            }
+            .generate_button{
+                position: absolute;
+                top: 0;
+                right: -20.2rem;
+                padding: 0 1.5rem;
+                text-align: center;
+                height: 3.6rem;
+                line-height: 3.6rem;
+                background: #343579;
+                font-size: 14px;
+                font-family: Roboto;
+                color: #FFFFFF;
+                cursor: pointer;
+            }
+
+             &:hover .img_item_hover{
+                display: block;
+            }
+
+            .img_item_hover{
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top:0;
+                background: rgba(0,0,0,0.4);
+                display: none;
+
+                .img_operate_block{
+                    width: 3.6rem;
+                    height: 3.6rem;
+                    background: rgba(0,0,0,0.6);
+                    border-radius: 50%;
+                    position: absolute;
+                    right: 2.2rem;
+                    text-align: center;
+                    line-height: 3.6rem;
+                    cursor: pointer;
+
+                    &.delete_img_block{
+                        top: 2rem;
+                    }
+
+                    .operate_icon{
+                        font-size: 1.8rem;
+                        color: #fff;
+                    }
+                }
+            }
+        }
+
+        
+    }
+
+   
+    
+}
+</style>
diff --git a/src/component/Detail/habit.vue b/src/component/Detail/habit.vue
index 30f22b44..a5f82a3c 100644
--- a/src/component/Detail/habit.vue
+++ b/src/component/Detail/habit.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="habit">
-        <div class="habit_button" @click="habitBtn" ref="stringg">
+        <div class="habit_button" @click="habitBtn" >
             Workspace
             <i class="fi fi-bs-angle-down"></i>
         </div>
@@ -12,7 +12,12 @@
             </div>
             <div class="habit_type" trigger="['click']">
                 <a-dropdown placement="bottomRight">
-                   
+					<template #overlay>
+                        <a-menu @click="handleMenuClick">
+                            <a-menu-item key="1"> 上衣 </a-menu-item>
+                            <a-menu-item key="2"> 裤子 </a-menu-item>
+                        </a-menu>
+                    </template>
                     <a-button>
                         <UserOutlined />
                         {{habitType.habitTypeone}}
@@ -60,14 +65,14 @@
                     </template>
                     <a-button>
                         <UserOutlined />
-                        上衣
+                        {{ workspace.position }}
                         <DownOutlined />
                     </a-button>
                 </a-dropdown>
             </div>
 			<div class="habit_System_Designer">
                 <a-slider id="system_silder"
-                    v-model:value="value"
+                    v-model:value="workspace.systemDesignerPercentage"
                     @afterChange="systemDesigner"
 					:tip-formatter="formatter"
 				>
@@ -138,6 +143,13 @@ export default defineComponent({
         UserOutlined,
     },
 	setup(){
+		let workspace = ref({
+			sex:'male',
+			systemDesignerPercentage:30,
+			position:'top'
+
+
+		})
 		let checked:any= ref(true);
 		let value = ref<number>(30);
 		let tooltip = ref(true);
@@ -202,6 +214,7 @@ export default defineComponent({
 			habitType,
 			obj,
 			obj2,
+			workspace
 		}
     },
     data() {
@@ -214,7 +227,6 @@ export default defineComponent({
 	directives:{
 		fade:{
 			updated (el,model){
-				
 				if(model.value){
 					el.style.display="block"
 					setTimeout(() => {
@@ -243,7 +255,7 @@ export default defineComponent({
             console.log("click left button", e);
         },
         handleMenuClick(e: Event) {
-            console.log("click", e);
+            // console.log("click", e);
 		this.getworkspace()
 
         },
@@ -254,13 +266,10 @@ export default defineComponent({
 			return `${value}%`;
 		},
 		habitBtn(){
-			const aa = this.$refs.stringg
-			// const aa = this.$refs.stringg;
-			// aa.style
-			
 			this.habit = !this.habit
 			if(!this.habit){
 				this.model = false
+				console.log(this.habit);
 			}
 		},
 		modelBtn(){
diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue
index f02ff455..385c4ac1 100644
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -410,7 +410,6 @@ export default defineComponent({
                 return data
             })
             this.store.commit('setColorboardList',newColorList)
-
         },
 
         recollection(){
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index 9b4ba07e..4eb505c9 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -290,8 +290,6 @@ export default defineComponent({
         // this.store.commit("addGenerateFils", this.fileList);
         this.token = getCookie("token") || "";
         this.uploadUrl = getUploadUrl();
-		console.log(getUploadUrl());
-		
     },
     computed: {
         getSketchLabel(value: any) {
@@ -334,14 +332,14 @@ export default defineComponent({
 			
 			nextTick().then(()=>{
 				this.checkbox[num].type = true
+				this.$emit('generateCheckbox',this.checkbox[0].type)
+				this.checkboxImage = this.checkbox[1].type
+				if(this.checkboxImage){
+					this.sketchboardList.forEach((v:any)=>{
+						v.checked = false
+					})
+				}
 			})
-			this.$emit('generateCheckbox',this.checkbox[0].type)
-			this.checkboxImage = this.checkbox[1].type
-			if(this.checkboxImage){
-				this.sketchboardList.forEach((v:any)=>{
-					v.checked = false
-				})
-			}
         },
         getLibraryList() {
             // let data = {
@@ -363,8 +361,6 @@ export default defineComponent({
             //     });
         },
         fileUploadChange(data: any) {
-			console.log(data);
-			
             let file = data.file;
             if (file.status === "done") {
                 let res = JSON.parse(file.xhr.response);
@@ -458,7 +454,7 @@ export default defineComponent({
             this.selectImgListIds = [];
             this.imgList = [];
             this.currentPage = 1;
-            this.pageSize = 10;
+            // this.pageSize = 10;
             this.total = 0;
         },
     },
diff --git a/src/component/HomePage/Material.vue b/src/component/HomePage/Material.vue
index 19b54f05..568aa8e0 100644
--- a/src/component/HomePage/Material.vue
+++ b/src/component/HomePage/Material.vue
@@ -11,7 +11,7 @@
                 <div class="my_material_header_right">
                     <div class="content_search_block">
                         <input class="search_input" placeholder="Please input" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
-                        <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
+                        <div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
                     </div>
                 </div>
             </div>
@@ -44,10 +44,58 @@
                     </div>
                 </div> -->
                 <div class="material_content_body scroll_style">
-                    <div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
-                        <div class="content_img_item_block" :class="{active:img?.checked}">
-                            <img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url" :alt="img.name"/>
+                    <div class="content_img_item" v-for="(file) in imgList" :key="file.id"  :class="{active:type_.type2 !== 'Moodboard'}">
+                        <div class="content_img_item_block" :class="{active:file?.checked}">
+                            <img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
+							<div class="operate_file_block" v-if="type_.type2 == 'Sketchboard'">
+                                    <div class="select_img_type">
+                                        <div
+                                            class="select_category"
+                                            @click.stop="showFileCategory(file)"
+                                        >
+                                            {{ getSketchLabel(file.category) }}
+                                            <div
+                                                :class="[
+                                                    'icon',
+                                                    'iconfont',
+                                                    'icon-xiala',
+                                                    file.categoryShow
+                                                        ? 'icon_rotate'
+                                                        : '',
+                                                ]"
+                                            ></div>
+                                        </div>
+                                        <div
+                                            class="category_list"
+                                            v-show="file.categoryShow"
+                                        >
+                                            <div
+                                                :class="[
+                                                    'category_item',
+                                                    file.category == cate.value
+                                                        ? 'select_category_item'
+                                                        : '',
+                                                ]"
+                                                v-for="(
+                                                    cate, index
+                                                ) in disignTypeList"
+                                                :key="index"
+                                                @click.stop="
+                                                    selectFileCategory(
+                                                        file,
+                                                        cate
+                                                    )
+                                                "
+                                            >
+                                                {{ cate.label }}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                         </div>
+						<div class="pin_block">
+							<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
+						</div>
                         <!-- <div class="content_img_name">{{img.name}}</div> -->
                     </div>
 				
@@ -134,6 +182,21 @@ export default defineComponent({
 			}
 		}
 	},
+	computed: {
+        getSketchLabel(value:any) {
+            return (value: any) => {
+                let lable = "";
+                for (let item of this.disignTypeList) {
+                    if (item.value === value) {
+                        lable = item.label;
+                        break;
+                    }
+                }
+                return lable;
+            };
+        },
+		
+    },
     methods:{
 
         init(code:any){
@@ -187,6 +250,10 @@ export default defineComponent({
 					let aa:any = []
 					this.imgList = rv.content					
 					rv.content.forEach((item:any) => {
+						if(this.type_.type2 == 'Sketchboard'){
+							item.category = "Outwear";
+							item.categoryShow = false;
+						}
 						if(!item.id_){
 							item.id_ = GO.id++
 							aa.push(item)
@@ -212,7 +279,23 @@ export default defineComponent({
             this.currentPage = 1
             this.pageSize = 10
             this.total = 0
-        }
+        },
+		showFileCategory(file: any) {
+            file.categoryShow = true;
+            document.addEventListener("click", this.hiddenFileCategory);
+        },
+		 selectFileCategory(file: any, cate: any) {
+            file.category = cate.value;
+			 for (let item of (this.imgList as any)) {
+                item.categoryShow = false;
+            }
+        },
+		hiddenFileCategory() {
+            for (let item of (this.imgList as any)) {
+                item.categoryShow = false;
+            }
+            document.removeEventListener("click", this.hiddenFileCategory);
+        },
     }
 })
 </script>
@@ -383,6 +466,16 @@ export default defineComponent({
                 // margin-bottom: 2.8rem;
 				margin: 0 2rem 2rem 0;
 				padding: 0;
+				&.active{
+					height: 10rem;
+					margin: 0 2rem 4rem 0;
+					.pin_block{
+						display: block;
+					}
+				}
+				.pin_block{
+					display: none;
+				}
                 .content_img_item_block{
                     // border: 0.1rem solid transparent;
 					width: 10rem;
diff --git a/src/component/HomePage/MoodboardUpload.vue b/src/component/HomePage/MoodboardUpload.vue
index af24090d..2b907a97 100644
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -161,6 +161,7 @@ export default defineComponent({
 		let moodb_className:any = ref([]);
 		let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
 		let layoutList:any = []//选中后随机生成的list
+		let layoutOpen = ref(false)
         return {
             fileList,
             lessenList,
@@ -170,6 +171,7 @@ export default defineComponent({
 			moodb_className,
 			flex_direction,
 			layoutList,
+			layoutOpen
         };
     },
     data() {
@@ -225,7 +227,10 @@ export default defineComponent({
                 let res = JSON.parse(file.xhr.response);
                 file.imgUrl = res.data.url;
                 file.resData = res.data;
-				file.type_ = 'upload';
+				file.type_ = {
+					type1:'upload',
+					type2:'Moodboard'
+				};
 				file.id_ = GO.id++
                 let fileList = this.fileList.filter(
                     (v: any) => v.status === "done"
@@ -298,33 +303,51 @@ export default defineComponent({
 						
 					}
 				})
-				console.log(this.fileList);
-				
 				this.fileList.splice(moodboard,1)
-				console.log(this.fileList);
-
 				this.store.commit("setMoodboardFile", this.fileList);
 			}
             this.store.commit("clearMoodTemplateId");
         },
 		
         recollection() {
-            this.fileList = JSON.parse(
+            let arr = JSON.parse(
                 JSON.stringify(
                     this.store.state.UploadFilesModule.allBoardData
                         .moodboardFiles
                 )
             );
+			let setboard = {
+				generate:[] as any,
+				material:[] as any,
+				moodboard:[] as any,
+			}
+			arr.forEach((v:any)=>{
+				if(v.type_.type1 == 'generate'){
+					setboard.generate.push(v)
+				}else if(v.type_.type1 == 'material'){
+					setboard.material.push(v)
+				}else{
+					setboard.moodboard.push(v)
+				}
+			})
+			this.store.commit("setMoodboardGenerateFiles", setboard.generate);
+			this.store.commit("setMoodboardMaterialFiles", setboard.material);
+			this.store.commit("setMoodboardFile", setboard.moodboard);
+			this.fileList = setboard.moodboard
             let moodTemplateId =
                 this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
-            this.store.commit("setMoodboardFile", this.fileList);
             this.store.commit("setMoodTemplateId", moodTemplateId);
         },
 
         changeTemplateModal() {
-			let layout:any = this.$refs.layout
+			if(this.layoutOpen){
+				let layout:any = this.$refs.layout
 				// layout.init('moodboard')
 				layout.init()
+			}else{
+				message.error('Please click Layout to sort randomlys')
+			}
+			
         },
 		layout(){
 			let arr = this.store.state.UploadFilesModule.moodboard
@@ -337,6 +360,7 @@ export default defineComponent({
 				this.flex_direction = false
 			}
 			this.moodb_className = this.moodb_[arr.length-1][random]
+			this.layoutOpen = true
 		},
 		setmoodbClass(val:any){
 			this.moodb_className = val
diff --git a/src/component/HomePage/NewCollectionReview.vue b/src/component/HomePage/NewCollectionReview.vue
index 41e3cb74..4077a287 100644
--- a/src/component/HomePage/NewCollectionReview.vue
+++ b/src/component/HomePage/NewCollectionReview.vue
@@ -28,7 +28,7 @@
 
         <div class="img_block_item">
             <div class="color_item"  v-for="(color) in allBoardData.colorBoards" :key="color">
-                <div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
+                <div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
                 <div class="color_content_body">
                     <div class="color_des">{{color.tcx}}</div>
                     <div class="color_des">{{color.name}}</div>
@@ -37,7 +37,7 @@
         </div>
 
         <div class="img_block_item">
-            <div class="lager_img_item"  v-for="(skecth) in allBoardData.skecthboardFiles" :key="skecth">
+            <div class="lager_img_item"  v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
                 <div class="all_img_item_block">
                     <img class="all_img_content" :src="skecth.imgUrl"> 
                 </div>
@@ -66,7 +66,9 @@ export default defineComponent({
         return {
             allBoardData,
         }
-    }
+    },
+	mounted () {
+	}
 })
 </script>
 <style lang="less" scoped>
diff --git a/src/component/HomePage/PrintboardUpload.vue b/src/component/HomePage/PrintboardUpload.vue
index 659ed49d..ab97a8df 100644
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -37,9 +37,13 @@
                                 <div class="upload_file_item_content" v-show="file?.status === 'uploading'">
                                     <a-spin  :indicator="indicator" tip="Uploading..."/>
                                 </div>
-                                <div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
+                                <div class="upload_file_item_content"  v-show="file?.status === 'done'">
                                     <img  v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
-                                    <div class="delete_file_block" @click.stop="deleteFile(file)">Delete</div>
+                                    <div class="delete_file_block" @click.stop="deleteFile(file)">
+										<span
+											class="icon iconfont icon-shanchu"
+										></span>
+									</div>
                                 </div>
                             </div>
                             <div class="pin_block" v-show="file?.status === 'done'">
@@ -86,7 +90,7 @@
 					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
 				</div>
 				<div class="modal_img">
-					<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click="deleteFile(item)">
+					<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
 						<img v-lazy="item.imgUrl">
 						<div class="checked" >
 							<i class="fi fi-rr-trash"></i>
@@ -97,16 +101,19 @@
 			<div v-show="openClick == 3" class="modal_accomplish">
 				<div class="input_box">
 					<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
-					<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
+					<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
 				</div>
 				<div class="modal_img">
-					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
-						<img :src="item.imgUrl">
+					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
+						<img :src="item.imgUrl" @click.stop="generageAdd(item)">
+						<div class="pin_block">
+							<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-        <!-- <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper> -->
+        <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
     </div>
 </template>
 <script lang="ts">
@@ -120,6 +127,8 @@ import { message,Upload} from 'ant-design-vue';
 import Cropper from '@/component/HomePage/Cropper.vue'
 import Material from '@/component/HomePage/Material.vue'
 import Generate from "@/component/HomePage/Generate.vue";
+import GO from "@/tool/GO";
+
 export default defineComponent({
     components:{
         Cropper,
@@ -214,6 +223,12 @@ export default defineComponent({
         },
         fileUploadChange(data:any){
             let file = data.file
+			file.id_ = GO.id++
+			file.type_ = {
+				type1:'upload',
+				type2:'Moodboard'
+			};
+			file.pin = false;
             let Cropper:any = this.$refs.Cropper
             if(this.currentFileNum === 1){
                 var reader = new FileReader();
@@ -487,10 +502,29 @@ export default defineComponent({
         },
 
         recollection(){
-            this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
-            this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
+            let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
+			let setboard = {
+				generate:[] as any,
+				material:[] as any,
+				moodboard:[] as any,
+			}
+			arr.forEach((v:any)=>{
+				if(v.type_.type1 == 'generate'){
+					setboard.generate.push(v)
+				}else if(v.type_.type1 == 'material'){
+					setboard.material.push(v)
+				}else{
+					setboard.moodboard.push(v)
+				}
+			})
+			this.store.commit("setPrintboardGenerateFiles", setboard.generate);
+			this.store.commit("setPrintboardMaterialFiles", setboard.material);
+			this.store.commit("setPrintboardFile", setboard.moodboard);
+			this.fileList = setboard.moodboard
+            // this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
             this.store.commit('setPrintboardFile',this.fileList)
-            this.store.commit('setGeneratePrintFile',this.printImgList)
+            // this.store.commit('setGeneratePrintFile',this.printImgList)
+
         },
 
         confirmSelect(event:any){
@@ -655,7 +689,7 @@ export default defineComponent({
             }
 		
             .upload_file_item{
-                margin: 0 2rem 4rem 0;
+                margin: 0 2rem 5rem 0;
 				// margin: 0 2rem 2rem 0;
 				display: inline-block;
 				width: 10rem;
@@ -668,10 +702,7 @@ export default defineComponent({
 					height: 100%;
 				}
 
-                .pin_block{
-                    text-align: center;
-                    margin-top:1.6rem;
-                }
+              
 
                 &.upload_component{
                     border: none;
@@ -816,6 +847,8 @@ export default defineComponent({
 	.modal_right{
 		flex: 1;
 		margin-left: 3rem;
+		display: flex;
+		flex-direction: column;
 		.modal_layout,.modal_accomplish{
 			.modal_text{
 				font-size: 1.2rem;
@@ -869,14 +902,18 @@ export default defineComponent({
 			height: 30rem;
 			display: flex;
 			flex-direction: column;
+			flex: 1;
+            overflow-x: hidden;
+			&.modal_accomplish::-webkit-scrollbar {
+                display: none;
+            }
 			.modal_text{
 				padding-top: 2rem;
 				padding-block: 2rem;
 			}
 			.input_box{
 				input{
-					&.forbidden{
-						cursor:not-allowed;
+					&.forbidden{ 
 					}
 				}
 			}
@@ -886,7 +923,7 @@ export default defineComponent({
 				flex-wrap: wrap;
 				justify-content: flex-start;
 				.modal_imgItem{
-					margin: 0 2rem 2rem 0;
+					margin: 0 2rem 5rem 0;
 					display: inline-block;
 					width: 10rem;
 					height: 10rem;
diff --git a/src/component/HomePage/SketchboardUpload.vue b/src/component/HomePage/SketchboardUpload.vue
index 213295a8..a733ca4c 100644
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -173,8 +173,56 @@
 					<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
 				</div>
 				<div class="modal_img">
-					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
-						<img :src="item.imgUrl">
+					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
+						<img :src="item.imgUrl" @click="generageAdd(item)">
+						<div class="operate_file_block">
+							<div class="select_img_type">
+								<div
+									class="select_category"
+									@click.stop="showFileCategory(item)"
+								>
+									{{ getSketchLabel(item.category) }}
+									<div
+										:class="[
+											'icon',
+											'iconfont',
+											'icon-xiala',
+											item.categoryShow
+												? 'icon_rotate'
+												: '',
+										]"
+									></div>
+								</div>
+								<div
+									class="category_list"
+									v-show="item.categoryShow"
+								>
+									<div
+										:class="[
+											'category_item',
+											item.category == cate.value
+												? 'select_category_item'
+												: '',
+										]"
+										v-for="(
+											cate, index
+										) in sketchCatecoryList"
+										:key="index"
+										@click.stop="
+											selectFileCategory(
+												item,
+												cate
+											)
+										"
+									>
+										{{ cate.label }}
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="pin_block">
+							<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -314,7 +362,10 @@ export default defineComponent({
                 file.category = "Outwear";
                 file.categoryShow = false;
 				file.id_ = GO.id++
-				file.type_ = 'upload';
+				file.type_ = {
+					type1:'upload',
+					type2:'Moodboard'
+				};
                 let fileList = this.fileList.filter(
                     (v: any) => v.status === "done"
                 );
@@ -355,13 +406,32 @@ export default defineComponent({
         },
 
         selectFileCategory(file: any, cate: any) {
-            file.category = cate.value;
-            this.store.commit("setSketchboardFile", this.fileList);
+			
+			if(this.openClick == 3){
+				for (let item of this.generateList) {
+					item.categoryShow = false;
+				}
+				file.category = cate.value;
+				// this.store.commit("sketchGenerateFiles", this.fileList);
+			}else{
+				for (let item of this.fileList) {
+					item.categoryShow = false;
+				}
+				file.category = cate.value;
+				this.store.commit("setSketchboardFile", this.fileList);
+			}
         },
         hiddenFileCategory() {
-            for (let item of this.fileList) {
-                item.categoryShow = false;
-            }
+			if(this.openClick == 3){
+				for (let item of this.generateList) {
+					item.categoryShow = false;
+				}
+			}else{
+				for (let item of this.fileList) {
+					item.categoryShow = false;
+				}
+			}
+           
             document.removeEventListener("click", this.hiddenFileCategory);
         },
 
@@ -383,13 +453,30 @@ export default defineComponent({
         },
 
         recollection() {
-            this.fileList = JSON.parse(
+            let arr = JSON.parse(
                 JSON.stringify(
                     this.store.state.UploadFilesModule.allBoardData
-                        .skecthboardFiles
+                        .sketchboardFiles
                 )
             );
-            this.store.commit("setSketchboardFile", this.fileList);
+			let setboard = {
+				generate:[] as any,
+				material:[] as any,
+				moodboard:[] as any,
+			}
+			arr.forEach((v:any)=>{
+				if(v.type_.type1 == 'generate'){
+					setboard.generate.push(v)
+				}else if(v.type_.type1 == 'material'){
+					setboard.material.push(v)
+				}else{
+					setboard.moodboard.push(v)
+				}
+			})
+			this.store.commit("setSketchboardGenerateFiles", setboard.generate);
+			this.store.commit("setSketchboardMaterialFiles", setboard.material);
+			this.store.commit("setSketchboardFile", setboard.moodboard);
+			this.fileList = setboard.moodboard
         },
         confirmSelect(event: any) {
             for (let item of event) {
@@ -623,77 +710,9 @@ export default defineComponent({
                     display: block;
                 }
 
-                .operate_file_block{
-                    width: 100%;
-                    height: 3rem;
-                    font-size: 1.6rem;
-                    color: #FFFFFF;
-                    position: absolute;
-                    left: 0;
-                    bottom: 0;
-
-                    .select_img_type{
-                        height: 100%;
-                        line-height: 3rem;
-                        text-align: center;
-                        background: rgba(0,0,0,0.6);
-                        position: relative;
-
-                        .select_category{
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-
-                            .icon-xiala{
-                                margin-left: 0.8rem;
-                            }
-                        }
-
-                        .icon_rotate{
-                            -moz-transform:rotate(180deg);
-                            -webkit-transform:rotate(180deg);
-                            transform: rotate(180deg);
-                            animation-direction: 0.5s;
-                        }
-
-                        .category_list{
-							position: absolute;
-                            width: 100%;
-                            cursor: pointer;
-                            position: absolute;
-                            // top: 3.1rem;
-							margin-top: .2rem;
-                            left: 0;
-                            background: rgba(0,0,0,0.4);
-                            border: 1px solid #343579;
-                            border-radius: 0.8rem;
-                            // overflow: hidden;
-                            z-index: 2;
-							height: 9rem;
-							overflow-x: hidden;
-							&.category_list::-webkit-scrollbar{display: none;}
-
-                            .category_item{
-                                text-align: left;
-                                font-size: 1.4rem;
-                                padding: 1rem 1.9rem;
-                                line-height: 1.6rem;
-
-                                &.select_category_item{
-                                    background: linear-gradient(160deg, #AC2A3B, #292161);
-                                }
-
-                                &:hover{
-                                    background: linear-gradient(160deg, #AC2A3B, #292161);
-                                }
-                            }
-                        }
-                    }
-                }
+               
             }
-			.pin_block{
-				
-			}
+			
 		}
        
     }
@@ -702,6 +721,8 @@ export default defineComponent({
 	.modal_right{
 		flex: 1;
 		margin-left: 3rem;
+		display: flex;
+		flex-direction: column;
 		.modal_layout,.modal_accomplish{
 			.modal_text{
 				font-size: 1.2rem;
@@ -755,11 +776,17 @@ export default defineComponent({
 			height: 30rem;
 			display: flex;
 			flex-direction: column;
+			flex: 1;
+            overflow-x: hidden;
+			&.modal_accomplish::-webkit-scrollbar {
+                display: none;
+            }
 			.modal_text{
 				padding-top: 2rem;
 				padding-block: 2rem;
 			}
 			.input_box{
+				z-index: 1;
 				input{
 					&.forbidden{
 						cursor:not-allowed;
@@ -772,7 +799,7 @@ export default defineComponent({
 				flex-wrap: wrap;
 				justify-content: flex-start;
 				.modal_imgItem{
-					margin: 0 2rem 2rem 0;
+					margin: 0 2rem 4rem 0;
 					display: inline-block;
 					width: 10rem;
 					height: 10rem;
@@ -792,6 +819,7 @@ export default defineComponent({
 							transform: scale(0.9);
 						}
 					}
+					
 				}
 			}
 		}
diff --git a/src/component/HomePage/collectionModal.vue b/src/component/HomePage/collectionModal.vue
index fca8dda9..f0249b40 100644
--- a/src/component/HomePage/collectionModal.vue
+++ b/src/component/HomePage/collectionModal.vue
@@ -14,7 +14,7 @@
 					<div v-show="collectionStep === 2">Printboard</div>
 					<div v-show="collectionStep === 3">Colorboard</div>
 					<div v-show="collectionStep === 4">Sketchboard</div>
-					<div v-show="collectionStep === 5">Markets Sketch</div>
+					<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
 					<div class="collection_title_text_intro">select moodboard for your collection</div>
 				</div>
 				<div>
@@ -32,8 +32,9 @@
 				<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
 				<!-- <div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> -->
 				<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
-				<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
-				<i v-else  class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i>
+				<i v-if="collectionStep < 4" class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
+				<!-- <i v-else  class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i> -->
+				<i v-else class="fi fi-rr-check" @click.stop="finishCollection()"></i>
 				<!-- <span  class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->
 
 			</div>
@@ -42,7 +43,7 @@
                 <PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
                 <ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
                 <SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
-                <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload>
+                <!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
             </div>
         </a-modal>
     </div>
@@ -90,7 +91,8 @@ export default defineComponent({
 
         recollection(){
             setTimeout(()=>{
-                let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload','MarketingSketchUpload']
+                let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload']
+                // let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload','MarketingSketchUpload']
                 for(let child of childredCom){
                     let childRef:any = this.$refs[child]
                     childRef.recollection()
@@ -254,7 +256,7 @@ export default defineComponent({
 		.ant-modal-body{
 			padding: 8rem 5rem !important;
 			// height: calc(65vh - 6.4rem);
-			height: 60rem;
+			height: 65rem;
 		}
 	}
 }
diff --git a/src/component/HomePage/layout.vue b/src/component/HomePage/layout.vue
index 04a03398..01a52e88 100644
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -20,12 +20,12 @@
                     ></div>
                 </div>
 				<div class="layout_nav">
-					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item)">
+					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item,index)">
 						<img :src="item.imgUrl">
 					</div>
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
-					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item)" ref="content" >
+					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item,index)" ref="content" >
 						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false"> 
 						<ul v-show="item.setPitch" class="layout_btn" >
 							<li class="layout_btn_top" v-compile.stop="'top'"></li>
@@ -109,7 +109,7 @@ export default defineComponent({
             openClick,
 			drag,
 			layoutList,
-			content
+			content,
         };
     },
     data() {
@@ -491,11 +491,15 @@ export default defineComponent({
 			this.moodbList = this.moodb[layoutList.length-1]
 			this.moodbClassName = this.moodb_className
 		},
-		setpitch(item:any){
+		setpitch(item:any,index:any){
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
 			item.setPitch = true
+			if(this.content){
+				(this.content as any)[index].style.zIndex = GO.zIndex++
+				
+			}
 		},
 		setmoodb(item:any){
 			this.moodbClassName = item
@@ -593,7 +597,6 @@ export default defineComponent({
 				v.setPitch = false
 			})
 			let layoutCentent = document.getElementById('layoutCentent')
-			console.log(layoutCentent);
 			setTimeout(() => {
 			console.log(domTurnImg(layoutCentent));
 			this.layout = false
@@ -752,6 +755,11 @@ export default defineComponent({
 					cursor: crosshair;
 					cursor: move;
 				}
+				.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
+					// opacity: 0;
+					width: .8rem;
+					height: .8rem;
+				}
 				.layout_angle_tr{
 					right: 0%;
 					top: 0;
diff --git a/src/store/uploadFile/moodboard.ts b/src/store/uploadFile/moodboard.ts
deleted file mode 100644
index 4d451544..00000000
--- a/src/store/uploadFile/moodboard.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import {Module} from 'vuex'
-import {RootState} from '../index'
-import { message } from "ant-design-vue";
-import UploadFile  from './uploadFile'
-
-interface UploadList{
-    moodboardList:any,
-	generateList:any,
-	MaterialList:any,
-}
-
-const Moodboard : Module<UploadList,RootState> = {
-    state:{
-        moodboardList:[],
-		generateList:[],
-		MaterialList:[],
-    },
-    mutations:{
-        setMoodboardFile(state,files){
-			state.moodboardList = files;
-			// (UploadFile.mutations as any).setMoodboard();
-        },
-    
-		addGenerateMaterialFils(state,data){
-			let file
-			let arr = [...state.generateList,...state.MaterialList,...state.moodboardList]
-			if(data.type_ == 'generate'){
-				file = state.generateList
-			}else{
-				file = state.MaterialList
-			}
-			if(file.length == 0){
-				if(arr.length >= 8){
-					message.error('You can select up to 8 images')
-				}else{
-					data.checked = true
-					file.push(data)
-				}
-			}else{
-				let str = true
-				for (let index = 0; index < file.length; index++) {
-					if(file[index].id_ == data.id_){
-						// data.id_ = GO.id++
-						str = false
-					}
-				}
-				if(str){
-					if(arr.length >= 8){
-						message.error('You can select up to 8 images')
-					}else{
-						data.checked = true
-						file.push(data)
-					}
-				}else{
-					data.checked = false
-					file = file.filter((v:any)=> v.id_ != data.id_)
-				}
-			}
-			if(data.type_ == 'generate'){
-				state.generateList = file
-			}else{
-				state.MaterialList = file
-			}
-			// (UploadFile.mutations as any).setMoodboard();
-        },
-		setGenerateFils(state,files){
-            state.generateList = files
-			// (UploadFile.mutations as any).setMoodboard();
-        },
-    },
-    actions:{
-
-    }
-}
-
-export default Moodboard
\ No newline at end of file
diff --git a/src/store/uploadFile/uploadFile.ts b/src/store/uploadFile/uploadFile.ts
index ba55dbbd..a23bb3ae 100644
--- a/src/store/uploadFile/uploadFile.ts
+++ b/src/store/uploadFile/uploadFile.ts
@@ -46,6 +46,14 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         setMoodboardFile(state,files){
 			state.moodboardFiles = files
 			state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]	
+        },
+		setMoodboardGenerateFiles(state,files){
+			state.moodboardGenerateFiles = files
+			state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]	
+        },
+		setMoodboardMaterialFiles(state,files){
+			state.moodboardMaterialFiles = files
+			state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]	
         },
 		addGenerateMaterialFils(state,data){
 			let file
@@ -119,13 +127,27 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 		setSketchboardFile(state,files){
             state.sketchboardFiles = files
 			state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]	
-
+        },
+		setSketchboardGenerateFiles(state,files){
+			state.sketchGenerateFiles = files
+			state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]	
+        },
+		setSketchboardMaterialFiles(state,files){
+			state.sketchMaterialFiles = files
+			state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]	
         },
 		setPrintboardFile(state,files){
             state.printboardFiles = files
 			state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]	
         },
-
+		setPrintboardGenerateFiles(state,files){
+			state.printGenerateFiles = files
+			state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]	
+        },
+		setPrintboardMaterialFiles(state,files){
+			state.printMaterialFiles = files
+			state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]	
+        },
 
 		
         setColorboardList(state,colorBoards){
@@ -137,7 +159,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         setAllBoardData(state){
             state.allBoardData = {
                 moodboardFiles:state.moodboard,
-                printboardFiles:state.printboardFiles,
+                printboardFiles:state.printboard,
                 colorBoards:state.colorBoards,
                 sketchboardFiles:state.sketchboard,
                 marketingSketchFiles:state.marketingSketchFiles,
diff --git a/src/tool/domTurnImg.js b/src/tool/domTurnImg.js
index cb042028..f1ae9254 100644
--- a/src/tool/domTurnImg.js
+++ b/src/tool/domTurnImg.js
@@ -4,7 +4,7 @@ const getJpeg = dom =>{
 		html2canvas(dom,{useCORS: true,}).then(canvas =>{
 			const jpeg = canvas.toDataURL('image/jpeg',1.0);
 			resolve(base64ToFile(jpeg))
-			console.log(jpeg);
+			console.log(jpeg,'=========');
 		})
 	})
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 15d1972b..f46e8584 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -394,6 +394,8 @@ export default defineComponent({
 		designNewCollection() {
 			let { colorBoards } =
 				this.store.state.UploadFilesModule.allBoardData;
+				// console.log(colorBoards);
+				
 			if (!colorBoards || colorBoards?.length < 1) {
 				message.error(
 					"You must choose one or more colors for further process."
@@ -460,20 +462,21 @@ export default defineComponent({
 			let {
 				moodboardFiles,
 				printboardFiles,
-				generatePrintFiles,
+				// generatePrintFiles,
 				colorBoards,
-				skecthboardFiles,
+				sketchboardFiles,
 				marketingSketchFiles,
 				moodTemplateId,
 			} = this.store.state.UploadFilesModule.allBoardData;
-			let new_printboardFiles =
-				printboardFiles.concat(generatePrintFiles);
+			// let new_printboardFiles =
+			// 	printboardFiles.concat(generatePrintFiles);
 			let data: any = {
 				colorBoards: this.getColorBoard(colorBoards),
 				marketingSketchs: this.getBoardId(marketingSketchFiles),
 				moodBoards: this.getBoardId(moodboardFiles),
-				printBoards: this.getPrintId(new_printboardFiles),
-				sketchBoards: this.getSkecthBoard(skecthboardFiles),
+				printBoards: this.getPrintId(printboardFiles),
+				// printBoards: this.getPrintId(new_printboardFiles),
+				sketchBoards: this.getSkecthBoard(sketchboardFiles),
 				switchCategory: !this.switch_open ? this.designType : "",
 				singleOverall: !this.switch_open ? "single" : "overall",
 				systemScale: this.system_scale_value / 100,