diff --git a/public/js/version.json b/public/js/version.json
new file mode 100644
index 00000000..e69de29b
diff --git a/src/assets/images/homePage/homeNavBg.png b/src/assets/images/homePage/homeNavBg.png
new file mode 100644
index 00000000..1e9fdacf
Binary files /dev/null and b/src/assets/images/homePage/homeNavBg.png differ
diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 4980fc27..c9a8e2b1 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -660,8 +660,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   right: 3rem;
   width: auto;
   height: auto;
-  top: 60%;
+  top: 50%;
+  transform: translateY(-50%);
   font-size: 1.2rem;
+  margin-top: 0;
 }
 .generalModel_page {
   width: 100%;
@@ -1179,27 +1181,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .ant-spin {
   color: #000;
 }
-.pin_block {
-  text-align: center;
-  margin-top: 0.5rem;
-}
-.pin_block .ant-checkbox-wrapper {
-  height: 2.2rem;
-  align-items: center;
-}
-.pin_block .ant-checkbox-wrapper > span {
-  height: 100%;
-}
-.pin_block .ant-checkbox-wrapper > span {
-  font-size: 1.4rem;
-  line-height: 2.3rem;
-}
-.pin_block .ant-checkbox-wrapper > span .ant-checkbox-input::after {
-  height: auto;
-}
-.pin_block .ant-checkbox-wrapper > span.ant-checkbox-checked::after {
-  border: 1px solid rgba(0, 0, 0, 0);
-}
 .ant-checkbox-inner {
   width: 1.6rem;
   height: 1.6rem;
@@ -1590,10 +1571,10 @@ textarea:focus {
   flex-wrap: wrap;
 }
 .upload_item .upload_file_item {
-  margin: 0 calc(2rem) calc(2rem) 0;
+  margin: 1rem;
   display: inline-block;
-  width: calc(10rem);
-  height: calc(10rem);
+  width: calc(25% - 2rem);
+  aspect-ratio: 1 / 1;
   border: 1px solid #f5f5f5;
   vertical-align: top;
   position: relative;
@@ -1697,12 +1678,12 @@ textarea:focus {
 .library_page .input_border,
 .productImg_modal .input_border,
 .accountEdit_page .input_border,
-.generalMenu_printModel_upload .input_border {
+.generalMenu_printModel_upload .input_border,
+.generate .input_border {
   z-index: 2;
   display: flex;
   align-items: center;
   padding-bottom: calc(2rem*1.2);
-  background: #fff;
   top: 0;
   flex-wrap: wrap;
   --width: 65%;
@@ -1712,7 +1693,8 @@ textarea:focus {
 .library_page .input_border .input_box,
 .productImg_modal .input_border .input_box,
 .accountEdit_page .input_border .input_box,
-.generalMenu_printModel_upload .input_border .input_box {
+.generalMenu_printModel_upload .input_border .input_box,
+.generate .input_border .input_box {
   position: relative;
   z-index: 2;
   flex: 1;
@@ -1725,7 +1707,8 @@ textarea:focus {
 .library_page .input_border .input_box .inputShowText,
 .productImg_modal .input_border .input_box .inputShowText,
 .accountEdit_page .input_border .input_box .inputShowText,
-.generalMenu_printModel_upload .input_border .input_box .inputShowText {
+.generalMenu_printModel_upload .input_border .input_box .inputShowText,
+.generate .input_border .input_box .inputShowText {
   width: 100%;
   display: none;
 }
@@ -1735,12 +1718,14 @@ textarea:focus {
 .productImg_modal .input_border .input_box.active .input_box_btnBox,
 .accountEdit_page .input_border .input_box.active .input_box_btnBox,
 .generalMenu_printModel_upload .input_border .input_box.active .input_box_btnBox,
+.generate .input_border .input_box.active .input_box_btnBox,
 .collection_modal_body .input_border .input_box.active textarea,
 .design_detail_modal_component .input_border .input_box.active textarea,
 .library_page .input_border .input_box.active textarea,
 .productImg_modal .input_border .input_box.active textarea,
 .accountEdit_page .input_border .input_box.active textarea,
-.generalMenu_printModel_upload .input_border .input_box.active textarea {
+.generalMenu_printModel_upload .input_border .input_box.active textarea,
+.generate .input_border .input_box.active textarea {
   border: 1px solid #ff0001;
   box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
 }
@@ -1749,7 +1734,8 @@ textarea:focus {
 .library_page .input_border .input_box.active span,
 .productImg_modal .input_border .input_box.active span,
 .accountEdit_page .input_border .input_box.active span,
-.generalMenu_printModel_upload .input_border .input_box.active span {
+.generalMenu_printModel_upload .input_border .input_box.active span,
+.generate .input_border .input_box.active span {
   opacity: 1;
   display: block;
   color: rgba(255, 0, 0.7);
@@ -1759,7 +1745,8 @@ textarea:focus {
 .library_page .input_border .search_keyword,
 .productImg_modal .input_border .search_keyword,
 .accountEdit_page .input_border .search_keyword,
-.generalMenu_printModel_upload .input_border .search_keyword {
+.generalMenu_printModel_upload .input_border .search_keyword,
+.generate .input_border .search_keyword {
   height: 0;
   flex-basis: 100%;
 }
@@ -1768,7 +1755,8 @@ textarea:focus {
 .library_page .input_border .search_keyword .search_keyword_center,
 .productImg_modal .input_border .search_keyword .search_keyword_center,
 .accountEdit_page .input_border .search_keyword .search_keyword_center,
-.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center {
+.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center,
+.generate .input_border .search_keyword .search_keyword_center {
   margin-top: 1rem;
   justify-content: space-between;
   display: flex;
@@ -1786,7 +1774,8 @@ textarea:focus {
 .library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
 .productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
 .accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
-.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
+.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
+.generate .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
   display: flex;
   overflow: hidden;
   flex: 1;
@@ -1797,7 +1786,8 @@ textarea:focus {
 .library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
-.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
+.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
+.generate .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
   border-radius: 0.4rem;
   background-color: #000000;
   margin-right: 1rem;
@@ -1813,7 +1803,8 @@ textarea:focus {
 .library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
 .productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
 .accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
-.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
+.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
+.generate .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
   margin-right: 0;
 }
 .collection_modal_body .input_border .input_box_btnBox,
@@ -1821,7 +1812,8 @@ textarea:focus {
 .library_page .input_border .input_box_btnBox,
 .productImg_modal .input_border .input_box_btnBox,
 .accountEdit_page .input_border .input_box_btnBox,
-.generalMenu_printModel_upload .input_border .input_box_btnBox {
+.generalMenu_printModel_upload .input_border .input_box_btnBox,
+.generate .input_border .input_box_btnBox {
   border: 1px solid #000;
   border-radius: 4rem;
   width: var(--width);
@@ -1830,13 +1822,15 @@ textarea:focus {
   align-items: center;
   padding: 1.5rem 2rem;
   padding-right: 0;
+  background-color: #fff;
 }
 .collection_modal_body .input_border .input_box_btnBox.sketch,
 .design_detail_modal_component .input_border .input_box_btnBox.sketch,
 .library_page .input_border .input_box_btnBox.sketch,
 .productImg_modal .input_border .input_box_btnBox.sketch,
 .accountEdit_page .input_border .input_box_btnBox.sketch,
-.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch {
+.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch,
+.generate .input_border .input_box_btnBox.sketch {
   padding: 0;
 }
 .collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
@@ -1844,7 +1838,8 @@ textarea:focus {
 .library_page .input_border .input_box_btnBox .ant-spin-text,
 .productImg_modal .input_border .input_box_btnBox .ant-spin-text,
 .accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
-.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text {
+.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text,
+.generate .input_border .input_box_btnBox .ant-spin-text {
   font-size: 1.2rem;
 }
 .collection_modal_body .input_border .input_box_btnBox .search_seed,
@@ -1852,7 +1847,8 @@ textarea:focus {
 .library_page .input_border .input_box_btnBox .search_seed,
 .productImg_modal .input_border .input_box_btnBox .search_seed,
 .accountEdit_page .input_border .input_box_btnBox .search_seed,
-.generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed {
+.generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed,
+.generate .input_border .input_box_btnBox .search_seed {
   padding: 0;
   width: 4rem;
   text-align: center;
@@ -1864,7 +1860,8 @@ textarea:focus {
 .library_page .input_border .input_box_btnBox .upload_item,
 .productImg_modal .input_border .input_box_btnBox .upload_item,
 .accountEdit_page .input_border .input_box_btnBox .upload_item,
-.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item {
+.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item,
+.generate .input_border .input_box_btnBox .upload_item {
   width: 5.7rem;
 }
 .collection_modal_body .input_border .input_box_btnBox .upload_item .upload_file_item,
@@ -1872,7 +1869,8 @@ textarea:focus {
 .library_page .input_border .input_box_btnBox .upload_item .upload_file_item,
 .productImg_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
 .accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
-.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item {
+.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item,
+.generate .input_border .input_box_btnBox .upload_item .upload_file_item {
   position: absolute;
   left: 0;
   top: 50%;
@@ -1887,7 +1885,8 @@ textarea:focus {
 .library_page .input_border input,
 .productImg_modal .input_border input,
 .accountEdit_page .input_border input,
-.generalMenu_printModel_upload .input_border input {
+.generalMenu_printModel_upload .input_border input,
+.generate .input_border input {
   width: 100%;
   border-radius: calc(0.5rem*1.2);
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -1903,7 +1902,8 @@ textarea:focus {
 .library_page .input_border inputinput:-moz-placeholder,
 .productImg_modal .input_border inputinput:-moz-placeholder,
 .accountEdit_page .input_border inputinput:-moz-placeholder,
-.generalMenu_printModel_upload .input_border inputinput:-moz-placeholder {
+.generalMenu_printModel_upload .input_border inputinput:-moz-placeholder,
+.generate .input_border inputinput:-moz-placeholder {
   color: rgba(0, 0, 0, 0.15);
 }
 .collection_modal_body .input_border inputinput:-ms-input-placeholder,
@@ -1911,7 +1911,8 @@ textarea:focus {
 .library_page .input_border inputinput:-ms-input-placeholder,
 .productImg_modal .input_border inputinput:-ms-input-placeholder,
 .accountEdit_page .input_border inputinput:-ms-input-placeholder,
-.generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder {
+.generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder,
+.generate .input_border inputinput:-ms-input-placeholder {
   color: rgba(0, 0, 0, 0.15);
 }
 .collection_modal_body .input_border inputinput::-webkit-input-placeholder,
@@ -1919,7 +1920,8 @@ textarea:focus {
 .library_page .input_border inputinput::-webkit-input-placeholder,
 .productImg_modal .input_border inputinput::-webkit-input-placeholder,
 .accountEdit_page .input_border inputinput::-webkit-input-placeholder,
-.generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder {
+.generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder,
+.generate .input_border inputinput::-webkit-input-placeholder {
   color: rgba(0, 0, 0, 0.15);
 }
 .collection_modal_body .input_border input.forbidden,
@@ -1927,7 +1929,8 @@ textarea:focus {
 .library_page .input_border input.forbidden,
 .productImg_modal .input_border input.forbidden,
 .accountEdit_page .input_border input.forbidden,
-.generalMenu_printModel_upload .input_border input.forbidden {
+.generalMenu_printModel_upload .input_border input.forbidden,
+.generate .input_border input.forbidden {
   cursor: no-drop;
 }
 .collection_modal_body .input_border .input_box_btnBox_upImg,
@@ -1935,7 +1938,8 @@ textarea:focus {
 .library_page .input_border .input_box_btnBox_upImg,
 .productImg_modal .input_border .input_box_btnBox_upImg,
 .accountEdit_page .input_border .input_box_btnBox_upImg,
-.generalMenu_printModel_upload .input_border .input_box_btnBox_upImg {
+.generalMenu_printModel_upload .input_border .input_box_btnBox_upImg,
+.generate .input_border .input_box_btnBox_upImg {
   height: 100%;
 }
 .collection_modal_body .input_border .fi,
@@ -1943,7 +1947,8 @@ textarea:focus {
 .library_page .input_border .fi,
 .productImg_modal .input_border .fi,
 .accountEdit_page .input_border .fi,
-.generalMenu_printModel_upload .input_border .fi {
+.generalMenu_printModel_upload .input_border .fi,
+.generate .input_border .fi {
   margin-right: 1rem;
   display: flex;
   cursor: pointer;
@@ -1960,7 +1965,8 @@ textarea:focus {
 .library_page .input_border .fi.fi-br-loading,
 .productImg_modal .input_border .fi.fi-br-loading,
 .accountEdit_page .input_border .fi.fi-br-loading,
-.generalMenu_printModel_upload .input_border .fi.fi-br-loading {
+.generalMenu_printModel_upload .input_border .fi.fi-br-loading,
+.generate .input_border .fi.fi-br-loading {
   height: 100%;
   background-color: rgba(0, 0, 0, 0);
 }
@@ -1969,7 +1975,8 @@ textarea:focus {
 .library_page .input_border .fi.active,
 .productImg_modal .input_border .fi.active,
 .accountEdit_page .input_border .fi.active,
-.generalMenu_printModel_upload .input_border .fi.active {
+.generalMenu_printModel_upload .input_border .fi.active,
+.generate .input_border .fi.active {
   transform: rotate(180deg);
 }
 .collection_modal_body .input_border .fi.forbidden,
@@ -1977,7 +1984,8 @@ textarea:focus {
 .library_page .input_border .fi.forbidden,
 .productImg_modal .input_border .fi.forbidden,
 .accountEdit_page .input_border .fi.forbidden,
-.generalMenu_printModel_upload .input_border .fi.forbidden {
+.generalMenu_printModel_upload .input_border .fi.forbidden,
+.generate .input_border .fi.forbidden {
   cursor: no-drop;
 }
 .collection_modal_body .input_border .search_upImg,
@@ -1985,7 +1993,8 @@ textarea:focus {
 .library_page .input_border .search_upImg,
 .productImg_modal .input_border .search_upImg,
 .accountEdit_page .input_border .search_upImg,
-.generalMenu_printModel_upload .input_border .search_upImg {
+.generalMenu_printModel_upload .input_border .search_upImg,
+.generate .input_border .search_upImg {
   width: 4rem;
   height: 100%;
   position: absolute;
@@ -1997,7 +2006,8 @@ textarea:focus {
 .library_page .input_border .search_upImg span,
 .productImg_modal .input_border .search_upImg span,
 .accountEdit_page .input_border .search_upImg span,
-.generalMenu_printModel_upload .input_border .search_upImg span {
+.generalMenu_printModel_upload .input_border .search_upImg span,
+.generate .input_border .search_upImg span {
   position: absolute;
   width: 100%;
 }
@@ -2006,7 +2016,8 @@ textarea:focus {
 .library_page .input_border .search_upImg .ant-upload-select-picture-card,
 .productImg_modal .input_border .search_upImg .ant-upload-select-picture-card,
 .accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card,
-.generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card {
+.generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card,
+.generate .input_border .search_upImg .ant-upload-select-picture-card {
   width: 100%;
   height: 100%;
   display: block !important;
@@ -2016,7 +2027,8 @@ textarea:focus {
 .library_page .input_border .search_textarea,
 .productImg_modal .input_border .search_textarea,
 .accountEdit_page .input_border .search_textarea,
-.generalMenu_printModel_upload .input_border .search_textarea {
+.generalMenu_printModel_upload .input_border .search_textarea,
+.generate .input_border .search_textarea {
   z-index: 3;
   height: auto;
   position: absolute;
@@ -2033,7 +2045,8 @@ textarea:focus {
 .library_page .input_border .generage_btn_box,
 .productImg_modal .input_border .generage_btn_box,
 .accountEdit_page .input_border .generage_btn_box,
-.generalMenu_printModel_upload .input_border .generage_btn_box {
+.generalMenu_printModel_upload .input_border .generage_btn_box,
+.generate .input_border .generage_btn_box {
   position: relative;
   display: flex;
   align-items: center;
@@ -2043,7 +2056,8 @@ textarea:focus {
 .library_page .input_border .generage_btn_box .icon-xiala,
 .productImg_modal .input_border .generage_btn_box .icon-xiala,
 .accountEdit_page .input_border .generage_btn_box .icon-xiala,
-.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala {
+.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala,
+.generate .input_border .generage_btn_box .icon-xiala {
   margin-left: 1rem;
   transition: all 0.3s;
   cursor: pointer;
@@ -2053,7 +2067,8 @@ textarea:focus {
 .library_page .input_border .generage_btn_box .icon-xiala.active,
 .productImg_modal .input_border .generage_btn_box .icon-xiala.active,
 .accountEdit_page .input_border .generage_btn_box .icon-xiala.active,
-.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala.active {
+.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala.active,
+.generate .input_border .generage_btn_box .icon-xiala.active {
   transform: rotate(180deg);
 }
 .collection_modal_body .input_border .generage_btn_box .content,
@@ -2061,7 +2076,8 @@ textarea:focus {
 .library_page .input_border .generage_btn_box .content,
 .productImg_modal .input_border .generage_btn_box .content,
 .accountEdit_page .input_border .generage_btn_box .content,
-.generalMenu_printModel_upload .input_border .generage_btn_box .content {
+.generalMenu_printModel_upload .input_border .generage_btn_box .content,
+.generate .input_border .generage_btn_box .content {
   position: absolute;
   top: 100%;
   width: calc(100% - 2rem);
@@ -2077,7 +2093,8 @@ textarea:focus {
 .library_page .input_border .generage_btn_box .content > div,
 .productImg_modal .input_border .generage_btn_box .content > div,
 .accountEdit_page .input_border .generage_btn_box .content > div,
-.generalMenu_printModel_upload .input_border .generage_btn_box .content > div {
+.generalMenu_printModel_upload .input_border .generage_btn_box .content > div,
+.generate .input_border .generage_btn_box .content > div {
   background: #cccccc;
   line-height: 2;
   font-size: 1.8rem;
@@ -2091,7 +2108,8 @@ textarea:focus {
 .library_page .input_border .generage_btn_box .content > div:hover,
 .productImg_modal .input_border .generage_btn_box .content > div:hover,
 .accountEdit_page .input_border .generage_btn_box .content > div:hover,
-.generalMenu_printModel_upload .input_border .generage_btn_box .content > div:hover {
+.generalMenu_printModel_upload .input_border .generage_btn_box .content > div:hover,
+.generate .input_border .generage_btn_box .content > div:hover {
   background: #999999;
 }
 .collection_modal_body .input_border .generage_btn,
@@ -2099,7 +2117,8 @@ textarea:focus {
 .library_page .input_border .generage_btn,
 .productImg_modal .input_border .generage_btn,
 .accountEdit_page .input_border .generage_btn,
-.generalMenu_printModel_upload .input_border .generage_btn {
+.generalMenu_printModel_upload .input_border .generage_btn,
+.generate .input_border .generage_btn {
   margin-left: 2rem;
   display: flex;
   font-size: 1.8rem;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 591daf20..a135cd2b 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -726,9 +726,11 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
     // height: 1.2rem;
 	width: auto;
 	height: auto;
-	top: 60%;
+	top: 50%;
+	transform: translateY(-50%);
     // margin-top: -.6rem;
     font-size: 1.2rem;
+	margin-top: 0;
 	// top: 50%;
     // transform: translateY(-45%);
 }
@@ -1295,28 +1297,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .ant-spin{
 	color: #000;
 }
-.pin_block{
-	text-align: center;
-	margin-top:.5rem;
-	.ant-checkbox-wrapper{
-		height: 2.2rem;
-		align-items: center;
-		>span{
-			height: 100%;
-		}
-		>span{
-			font-size: 1.4rem;
-			line-height: 2.3rem;
-			.ant-checkbox-input::after{
-				height: auto;
-			}
-			&.ant-checkbox-checked::after{
-				border: 1px solid rgba(0,0,0,0);
-			}
-		}
-		
-	}
-}
 .ant-checkbox-inner{
 	width: 1.6rem;
 	height: 1.6rem;
@@ -1725,12 +1705,15 @@ textarea:focus{
 	display: flex;
 	flex-wrap: wrap;
 	.upload_file_item {
-		margin: 0 calc(2rem) calc(2rem) 0;
+		// margin: 0 calc(2rem) calc(2rem) 0;
+		margin: 1rem;
 		display: inline-block;
 		// width: calc(16.5rem);
 		// height: calc(16.5rem);
-		width: calc(10rem);
-		height: calc(10rem);
+		// width: calc(10rem);
+		// height: calc(10rem);
+		width: calc(25% - 2rem);
+		aspect-ratio: 1 / 1;
 		border: 1px solid #f5f5f5;
 		vertical-align: top;
 		position: relative;
@@ -1840,13 +1823,12 @@ textarea:focus{
 	
 }
 //设计input和上传按钮样式
-.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal,.accountEdit_page,.generalMenu_printModel_upload{
+.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
 	.input_border{
 		z-index: 2;
 		display: flex;
 		align-items: center;
 		padding-bottom: calc(2rem*1.2);
-		background: #fff;
 		top: 0;
 		flex-wrap: wrap;
 		--width:65%;
@@ -1925,6 +1907,7 @@ textarea:focus{
 			align-items: center;
 			padding: 1.5rem 2rem;
 			padding-right: 0;
+			background-color: #fff;
 			// border
 			&.sketch{
 				padding: 0;
diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue
index 7959e2f4..caee8d5a 100644
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -838,7 +838,6 @@ export default defineComponent({
 	position: relative;
     display: flex;
     justify-content: space-between;
-	padding-top: calc(7rem*1.2);
 	.modal_layout{
 		position: absolute;
 		top: 0;
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index 26856aca..f91f3631 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -263,7 +263,8 @@ export default defineComponent({
 		let generateProceedList:any = ref([])
 		let remGenerate:any = ref(false)
 		let remGenerateTime:any = ref()
-		let styleRecommend:any = inject('styleRecommend')
+		let styleRecommend:any = []
+		// let styleRecommend:any = inject('styleRecommend')
 		let generateLevel2Type = ''
 		let isSloganHint:any = ref(' ')
 		let loadingShow =ref(false)
@@ -959,7 +960,6 @@ export default defineComponent({
 	overflow-x: hidden;
 	display: flex;
     flex-direction: column;
-    border-right: 1px solid #e5e5e5;
 	position: relative;
 	// padding-top: calc(2.5rem*1.2);
 	.input_border{
@@ -978,7 +978,6 @@ export default defineComponent({
         align-items: center;
         position: sticky;
         top: 0;
-        background: #fff;
         padding-top: calc(2rem*1.2);
         z-index: 3;
     }
@@ -998,7 +997,9 @@ export default defineComponent({
     }
         .generage_img_item {
             cursor: pointer;
-            margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
+            margin: 1rem;
+			width: calc(25% - 2rem);
+			aspect-ratio: 1 / 1;
 			position: relative;
             &.active {
 				opacity: 0.5;
diff --git a/src/component/HomePage/Material.vue b/src/component/HomePage/Material.vue
index cfb50669..3214af79 100644
--- a/src/component/HomePage/Material.vue
+++ b/src/component/HomePage/Material.vue
@@ -10,7 +10,8 @@
             <div class="my_material_header">
 				<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
 					<div class="select_block">
-						<a-select
+						<generalMenu :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
+						<!-- <a-select
 							ref="select"
 							v-model:value="disignType"
 							:options="disignTypeList"
@@ -23,7 +24,7 @@
 									style="color: #343579"
 								></span
 							></template>
-						</a-select>
+						</a-select> -->
 					</div>
 					
 				</div>
@@ -46,9 +47,15 @@
 							<a-checkbox v-model:collectionChecked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
 						</div> -->
 					</div>
-					<div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
-						<img src="@/assets/images/homePage/loading.gif" alt="">
+					<div v-show="!load.isNoData" class="material_content_list_loding">
+						<span class="page_loading" v-show="!isShowLoading" v-observe></span>
+						<span v-show="isShowLoading">
+							<img src="@/assets/images/homePage/loading.gif" alt="">
+						</span>
 					</div>
+					<!-- <div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
+						<img src="@/assets/images/homePage/loading.gif" alt="">
+					</div> -->
                 </div>
                 <!-- <div class="no_data_block loading_block" v-show="isShowLoading">
                     <a-spin size="large"></a-spin>
@@ -69,9 +76,10 @@ import { useI18n } from 'vue-i18n';
 import { openGuide,driverObj__ } from "@/tool/guide";
 import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 import printCategory from "@/component/HomePage/printCategory.vue";
+import generalMenu from "@/component/HomePage/generalMenu.vue";
 
 export default defineComponent({
-    components: { sketchCategory,printCategory },
+    components: { sketchCategory,printCategory,generalMenu },
 
     props: ["msg",'disignTypeList'],
     setup(prop) {
@@ -100,6 +108,10 @@ export default defineComponent({
 			name:'',
 			value:''
 		})
+		let load = ref({
+			isShowMark:false,
+			isNoData:false,
+		})
         return{
             myMaterialModalShow,
             imgList,
@@ -117,6 +129,7 @@ export default defineComponent({
 			driver__,
 			usGenerateList,
 			disignType,
+			load,
         }
     },
 	data (prop) {
@@ -132,22 +145,36 @@ export default defineComponent({
 		observe:{
 			mounted (el,binding) {
 				// console.log(binding.instance);
-				const ob = new IntersectionObserver(callback,{
-					root:null,
-					threshold:[0.1]
-				})
-				ob.observe(el)
-				// this.currentPage = 1
-				// this.pageSize = 12
 				let this_:any = binding.instance
-				function callback(entries:any, observer:any) {
-					entries.forEach((entry:any) => {
-						if (entry.isIntersecting) {
-							this_.getLibraryList('di')
-						} else {
-						}
-					});
-				}
+				this_.load.isShowMark = false
+				this_.load.isNoData = false
+				let parentDom = el.parentNode
+				new IntersectionObserver(
+				(entries, observer) => {
+						// 如果不是相交，则直接返回
+						// console.log(entries[0]);
+						if (!entries[0].intersectionRatio) return;
+						this_.currentPage += 1
+						this_.getLibraryList('di')
+					},
+					// { root:worksPage }
+				).observe(el);
+				// const ob = new IntersectionObserver(callback,{
+				// 	// root:null,
+				// 	// threshold:[0.1]
+				// })
+				// ob.observe(el)
+				// console.log(el)
+				// // this.currentPage = 1
+				// // this.pageSize = 12
+				// let this_:any = binding.instance
+				// function callback(entries:any, observer:any) {
+				// 	entries.forEach((entry:any) => {
+				// 		if (!entries[0].intersectionRatio) return;
+				// 			console.log(123);
+				// 		// this_.getLibraryList('di')
+				// 	});
+				// }
 			},
 		},
 	},
@@ -253,9 +280,13 @@ export default defineComponent({
 			this.pageSize = 12
 			this.imgList = []
 			if(code != 'Moodboard'){
-				this.disignType = this.disignTypeList[0].value
+				this.disignType = this.disignTypeList[0]
 			}
-			this.getLibraryList('')
+			this.load = {
+				isShowMark:false,
+				isNoData:false,
+			}
+			this.handleChange()
 			
         },
 		setUseGenerate(arr:any){
@@ -317,9 +348,17 @@ export default defineComponent({
 			}
 			
         },
+		menuChange(data:any){
+			this.disignType = data
+			this.handleChange()
+		},
 		handleChange(){
 			this.currentPage = 1
 			this.imgList = []
+			this.load = {
+				isShowMark:false,
+				isNoData:false,
+			}
             this.getLibraryList('')
 		},
 		upTypeSucced(){
@@ -327,6 +366,7 @@ export default defineComponent({
 		},
         //选择所有的图片
         async getLibraryList(str:any){
+			if(this.load.isShowMark && !this.load.isNoData)return
 			let workspace = JSON.parse(JSON.stringify(this.store.state.Workspace.workspace))
 			if(this.searchPictureName != this.isOldSearchPictureName || this.workspace?.sexEnum?.value != workspace.sexEnum.value){
 				this.imgList = []
@@ -334,12 +374,12 @@ export default defineComponent({
 			}else{
 			}
 			
-			if(str == 'di'){
-				this.currentPage = this.imgList?.[0]?.id != undefined?this.imgList?.length / this.pageSize+1:1
-			}
+			// if(str == 'di'){
+			// 	this.currentPage = this.imgList?.[0]?.id != undefined?this.imgList?.length / this.pageSize+1:1
+			// }
             let data = {
                 level1Type:this.selectCode,
-                level2Type: this.selectCode == 'Moodboard'?'':this.disignType,
+                level2Type: this.selectCode == 'Moodboard'?'':this.disignType.value,
 				modelSex:workspace?.sexEnum.value,
                 page: this.currentPage,
                 // page:this.currentPage,
@@ -353,6 +393,7 @@ export default defineComponent({
                 (rv: any) => {
                     this.total = rv.total
 					let aa:any = []
+					if(rv.content.length == 0)this.load.isNoData = true
 					rv.content.forEach((item:any,index:any) => {
 						let arr
 						if(this.type_.type2 == 'Sketchboard'){
@@ -392,6 +433,7 @@ export default defineComponent({
                 }
             ).catch((res)=>{
                 this.isShowLoading = false
+				this.load.isNoData = true
             });
         },
     }
@@ -401,9 +443,10 @@ export default defineComponent({
 .my_material_modal{
 	height: calc(30rem*1.2);
     overflow-x: hidden;
-	border-right: 1px solid #e5e5e5;
 	flex: 1;
 	border-radius: 0;
+	display: flex;
+    flex-direction: column;
 	&.my_material_modal::-webkit-scrollbar{display: none;}
     .ant-modal-close{
         width: calc(3.6rem*1.2);
@@ -434,7 +477,7 @@ export default defineComponent({
 		padding: 0;
 		padding-top: calc(2.5rem*1.2);
 		padding-bottom: calc(2rem*1.2);
-		background-color: #fff;
+		// background-color: #fff;
 		position: sticky;
 		top: 0;
 		z-index: 2;
@@ -507,7 +550,8 @@ export default defineComponent({
         // height: calc(100% - 6.6rem*1.2));
 		height: auto;
         position: relative;
-
+		flex: 1;
+		overflow: hidden;
         .material_content_top{
             padding: calc(1.3rem*1.2) 0 calc(2.1rem*1.2);
             height: calc(7rem*1.2);
@@ -571,14 +615,17 @@ export default defineComponent({
 			height: 100%;
             overflow-y: auto;
             position: relative;
-			height: calc(30rem*1.2);
 			&.material_content_body::-webkit-scrollbar{display: none;}
 
             .content_img_item{
-				margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
+				margin: 1rem;
 				display: inline-block;
-				width: calc(10rem*1.2);
-				height: calc(10rem*1.2);
+				// width: calc(16.5rem);
+				// height: calc(16.5rem);
+				// width: calc(10rem);
+				// height: calc(10rem);
+				width: calc(25% - 2rem);
+				aspect-ratio: 1 / 1;
 				border: 1px solid #f5f5f5;
 				position: relative;
 				cursor: pointer;
@@ -589,7 +636,7 @@ export default defineComponent({
 					height: 100%;
 				}
 				&.moodb{
-					margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
+					// margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
 				}
 				.pin_block{
 					.ant-checkbox-wrapper{
@@ -639,6 +686,13 @@ export default defineComponent({
             }
 			.material_content_list_loding{
 				text-align: center;
+				height: 50px;
+				.page_loading{
+					display: block;
+					width: 50px;
+					height: 50px;
+					margin: 0 auto;
+				}
 				img{
 					height: calc(10rem*1.2);
 				}
diff --git a/src/component/HomePage/PrintboardUpload.vue b/src/component/HomePage/PrintboardUpload.vue
index 1c03c0f6..7cde30f8 100644
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -28,7 +28,7 @@
 							
 						</div>
 						<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
-							<div @click.stop="openPrintModel"><span>{{ scene.name }}</span>	<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
+							<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>	</div>
 							<ul v-show="openMenu">
 								<li 
 									v-for="item,index in printCatecoryList" 
@@ -696,8 +696,7 @@ export default defineComponent({
 					i{
 						transition: all .3s;
 						display: inline-block;
-						position: absolute;
-						right: 0;
+						margin-left: 1rem;
 					}
 					.forbidden{
 						transform: rotate(180deg);
diff --git a/src/component/HomePage/SketchboardUpload.vue b/src/component/HomePage/SketchboardUpload.vue
index 0d27e6e8..3138a2f2 100644
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -24,8 +24,8 @@
                     <span>{{ $t('SketchboardUpload.Generate') }}</span>
                 </div>
 				<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
-					<div @click.stop="openPrintModel"> <span>{{ scene.name }}</span>
-						<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
+					<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
+						</div>
 					<ul v-show="openMenu">
 						<li 
 							v-for="item,index in sketchStyleList" 
@@ -662,6 +662,7 @@ export default defineComponent({
 					i{
 						transition: all .3s;
 						display: inline-block;
+						margin-left: 1rem;
 					}
 					.forbidden{
 						transform: rotate(180deg);
diff --git a/src/component/HomePage/generalMenu.vue b/src/component/HomePage/generalMenu.vue
index e894e020..a7cbca33 100644
--- a/src/component/HomePage/generalMenu.vue
+++ b/src/component/HomePage/generalMenu.vue
@@ -225,6 +225,7 @@ import { message, Upload, Modal } from "ant-design-vue";
 			height: 100%;
 			box-sizing: border-box;
 			align-items: center;
+			background: #fff;
 			> span{
 				white-space: nowrap; 
 				overflow: hidden;
diff --git a/src/component/HomePage/index/editContent/collection/ColorboardUpload.vue b/src/component/HomePage/index/editContent/collection/ColorboardUpload.vue
new file mode 100644
index 00000000..64f4d5ab
--- /dev/null
+++ b/src/component/HomePage/index/editContent/collection/ColorboardUpload.vue
@@ -0,0 +1,1438 @@
+<template>
+    <div class="colorboard_upload_modal">
+		<!-- <div class="modal_layout">
+			<div class="modal_text">
+				<div>{{ $t('ColorboardUpload.Thumbnail') }}</div>
+			</div>
+			<div class="modal_img">
+				<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
+					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
+					</div>
+				</div>
+				<div>
+					<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
+				</div>
+			</div>
+		</div> -->
+		<div class="modal_left">
+			<div class="right_content_line right_content_line_upload">
+				<div class="upload_right_header">
+					<span>{{ $t('ColorboardUpload.UploadImage') }}</span>
+				</div>
+				<div class="upload_centetn">
+					<div class="upload_item">
+						<div class="upload_file_item upload_file_item_show">
+							<i v-show="fileList.length == 0" class="fi fi-rr-square-plus"></i>
+							<div v-show="fileList.length > 0" class="upload_file_item upload_file_item_upload" v-for="(file) in fileList" :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="deleteFile(index)">Delete</div>
+								</div>
+							</div>
+							<div class="upload_file_item_scale" :style="[(driver__.driver && (driver__.index == 19 || driver__.index == 18))?'display :flex;':'']">
+								<div style="position: relative;">
+									<a-upload
+									:title="$t('ColorboardUpload.uploadTitle')"
+									:capture="null"
+									:max-count="1"
+									list-type="picture-card"
+									:customRequest="function(){}"
+									@change="fileUploadChange"
+									:before-upload="beforeUpload"
+									accept=".jpg,.png,.jpeg,.bmp"
+									class=" Guide_1_10"
+									>
+									<div  class="upload_tip_block">
+										<i class="fi fi-br-upload"></i>
+									</div>
+								</a-upload>
+								</div>
+								<div :title="$t('ColorboardUpload.selectTitle')" class="upload_file_item" @click="setPrintImg()">
+									<i class="fi fi-rr-picture"></i>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="upload_color" :style="[driver__.driver?'    overflow: hidden !important;':'']">
+						<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item" :class="[ index == 0?'Guide_1_11':'',index == 1?'Guide_1_11_2':'',]">
+							<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 :title="pantongNameList[index]">
+						</div>
+					</div>
+					<div class="upload_color_btn" :title="isSelectSuccessively?$t('ColorboardUpload.SelectSuccessivelyOnTitle'):$t('ColorboardUpload.SelectSuccessivelyOffTitle')" v-show="selectColorList.length>0">
+						<span>{{$t('ColorboardUpload.SelectSuccessively')}}</span>
+						<a-switch :checked="isSelectSuccessively" @click="()=>isSelectSuccessively = !isSelectSuccessively" checked-children="ON" un-checked-children="OFF"/>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="modal_right">
+			<div class="right_content_line">
+				<div class="upload_right_header">
+					<span>{{ $t('ColorboardUpload.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">
+								{{ $t('ColorboardUpload.HEX') }}
+							</div>
+							<div v-show="!colorBlockHex">
+								{{ $t('ColorboardUpload.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 class="color_setting_operateSingle">
+						<!-- <div class="started_btn" @click="setOperate">
+							{{ colorList[selectIndex]?.gradient?.gradientShow? 'Gradual':'Single'}}
+						</div> -->
+						<div class="color_setting_btn" :class="{active:!colorList[selectIndex]?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Single') }}</div>
+						<a-switch :checked="colorList[selectIndex]?.gradient?.gradientShow"  @click="setOperate"/>
+						<div class="color_setting_btn" :class="{active:colorList[selectIndex]?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Gradual') }}</div>
+
+					</div>
+					<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
+						<div class="color_setting_operate_item color_setting_operate_control">
+							<div class="operate_item_box">
+								<div>{{ $t('ColorboardUpload.Alignment') }}</div>
+							</div>
+							<div class="operate_item_box operate_item_angle">
+								<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event,'mousedown')" @touchstart="mousedownGradientAngle($event,'touchstart')">
+									<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
+								</div>
+								<!-- <input type="number"> -->
+							</div>
+							<div class="operate_item_box operate_item_delete">
+								<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
+							</div>
+						</div>
+						<div class="color_setting_operate_item color_setting_operate_input">
+							<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':colorList[selectIndex]?.gradient?`linear-gradient(90deg,${setGradient(colorList[selectIndex].gradient)})`:'none'}">
+							</div>
+							<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index,'mousedown')" @touchstart="mousedownGradient($event,item,index,'touchstart')"></div>
+						</div>
+					</div>
+				</div>
+				<!-- <div class="color_review_block">
+					<div class="clear_button" @click="clearCurrentColor()">Clear</div>
+				</div> -->
+			</div>
+			
+			<div class="right_content_line" style="margin-left: 8rem; flex: 1;">
+				<div class="upload_right_header">
+					<span>{{ $t('ColorboardUpload.Thumbnail') }}</span>
+				</div>
+				<div class="modal_img">
+					<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
+						<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
+						</div>
+					</div>
+					<div style="width: 100%;">
+						<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
+					</div>
+				</div>
+				<div class="upload_right_header">
+					<span>{{ $t('ColorboardUpload.ColorCode') }}</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">{{ $t('ColorboardUpload.ExtractColor') }}</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 :title="pantongName">
+					</div> -->
+				</div>
+			</div>
+		</div>
+		<selectImgList ref="selectImgList" @setImgGetColor="setImgGetColor"></selectImgList>
+    </div>
+</template>
+<script>
+import { Chrome,Slider,Sketch,Material,Compact,Swatches,} from '@ans1998/vue3-color'
+import { Https } from "@/tool/https";
+import GO from "@/tool/GO";
+import { defineComponent, h,ref,inject, nextTick } from 'vue'
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
+import {useStore} from 'vuex'
+import ColorThief from '@/tool/colorthief/colorthief'
+import { message,Upload} from 'ant-design-vue';
+import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
+import selectImgList from "@/component/HomePage/selectImgList.vue";
+import { useI18n } from 'vue-i18n';
+export default defineComponent({
+    components:{
+        Chrome,
+        Slider,
+		Sketch,
+		selectImgList,
+    },
+	props: {
+		collectionStep: {
+			type: Number,
+		}
+	},
+    setup(){
+		// console.log(isMoible());
+        let fileList = ref([])
+        let colorList = ref([{},{},{},{},{},{},{},{}])
+        let selectColor = ref({
+			rgba:{},
+		}) //顔色选择器默认颜色
+		let selectColorList = ref({
+		})
+		let driver__ = inject('driver__')
+		let {t} = useI18n()
+		let gradient = ref({
+			gradientList:[
+				{
+					rgba:{
+						r:117,
+						g:119,
+						b:255,
+						a:1,
+					},
+					left:'0%'
+				},{
+					rgba:{
+						r:0,
+						g:222,
+						b:152,
+						a:1,
+					},
+					left:'100%'
+				},
+			],
+			angle:45,
+			selectIndex:-1,
+			gradientShow:false,
+		})
+		let isSelectSuccessively = ref(false)
+        return {
+            fileList,
+            colorList,
+            selectColor,
+			selectColorList,
+			driver__,
+			t,
+			gradient,
+			isSelectSuccessively,
+        }
+    },
+    watch:{
+        // selectColor(newVal,oldVal){
+		// 	console.log(this.selectIndex);
+        //     this.colorList[this.selectIndex] = newVal.rgba
+        //     let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+        //     this.setColorboardList(colorList)
+		// 	// this.clearSelectColor()
+        // },
+		collectionStep:{
+			handler(newVal,oldVal){
+				if(newVal != 3)return
+				const backIcon = document.createElement('div');
+				if(backIcon.classList.contains('vc-sketch-color-wrap'))return
+				backIcon.classList.add('vc-sketch-color-wrap')
+				let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
+				dropperDom.appendChild(backIcon);
+				backIcon.addEventListener('click', async ()=>{
+					try {
+						const dropper = new EyeDropper();
+						const result = await dropper.open();
+						let hex = result.sRGBHex.replace("#", "");
+						// 将十六进制颜色码拆分成红、绿、蓝三个部分
+						const r = parseInt(hex.substring(0, 2), 16);
+						const g = parseInt(hex.substring(2, 4), 16);
+						const b = parseInt(hex.substring(4, 6), 16);
+						this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
+						// 返回RGB格式的字符串
+						// return `rgb(${r}, ${g}, ${b})`;
+						// box.style.backgroundColor = label.textContent = result.sRGBHex;
+					} catch (e) {
+						message.info(this.t('ColorboardUpload.jsContent1'))
+					}
+				})
+			}
+		},
+		selectColor:{
+			handler(newVal,oldVal){
+				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
+					this.colorList[this.selectIndex] = {}
+					return	
+				}
+				this.colorList[this.selectIndex].rgba = newVal.rgba
+				if(this.colorList[this.selectIndex]?.gradient && this.colorList[this.selectIndex]?.gradient?.selectIndex>-1 && this.colorList[this.selectIndex]?.gradient?.gradientShow){
+					this.colorList[this.selectIndex].gradient.gradientList[this.colorList[this.selectIndex].gradient.selectIndex].rgba = {
+						r:newVal.rgba.r,
+						g:newVal.rgba.g,
+						b:newVal.rgba.b,
+						a:1,
+					}
+				}
+				let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+				this.setColorboardList(colorList)
+			},
+			immediate: true
+		},
+    },
+    computed:{
+        getSelectRGB(selectColor){
+            return (selectColor)=>{
+                let rgba = selectColor.rgba
+                let data = {
+                    r:rgba?.r,
+                    g:rgba?.g,
+                    b:rgba?.b,
+                    a:rgba?.a,
+					// 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
+                }
+				if(data.a != 1 || data.a != 0){
+					data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
+				}
+                return data
+            }
+        },
+		setGradient(){
+			// return this.setGradientAngle(gradient)
+			return (gradient)=>{
+				let gradientStr = ''
+				if(!gradient.gradientList)return
+				gradient.gradientList.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item,index)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+			
+		}
+    },
+    data(){
+        return{
+            
+            reviewColor:{}, //预览的颜色
+            selectIndex:0,//选中的文件索引
+            tcxColor:'',
+            pantongName:'',//潘通值
+			pantongNameList:[],
+            indicator : h(LoadingOutlined, {
+                style: {
+                    fontSize: '2.4rem',
+                },
+                spin: true,
+            }),
+            upload:{
+                isPin:0,
+				gender:'',
+                level1Type:'Moodboard',
+                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            uploadUrl:'',
+            store:useStore(),
+			colorPickerVisible: true,
+			colorBlockHex:true,
+			getColorBg:false,
+        }
+    },
+    mounted(){
+		nextTick(()=>{
+			this.uploadUrl = getUploadUrl()
+			
+		})
+       
+		// this.clearSelectColor()
+		// if ("EyeDropper" in window) {
+		// 	console.log(true);
+		// }
+		// else {
+		// 	console.log(false);
+		// }
+    },
+    methods:{
+		clearSelectColor(){
+			// let colorBg0 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[0]
+			// let colorBg1 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[1]
+			// if(this.selectColor?.rgba?.r || this.selectColor?.rgb?.r){
+			// 	colorBg0.style.opacity = 1
+			// 	colorBg1.style.opacity = 1
+			// }else{
+ 			// 	colorBg0.style.opacity = 0
+			// 	colorBg1.style.opacity = 0
+			// }
+		},
+        //选择不同的色块
+        selectColorItem(index,color){
+			let hex
+			if(color?.rgba?.r){
+				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
+			}else{
+				hex = '#FFFFFF'
+			}
+            this.selectIndex = index
+            this.tcxColor = ''
+            this.pantongName = ''
+            this.pantongNameList = []
+			this.reviewColor= {}
+			this.getColorBg = false
+			if(this.driver__.driver){
+				driverObj__.moveNext()
+			}
+			if(color?.rgba?.r){
+	            this.selectColor = color
+	            this.selectColor.hex = hex
+			}
+        },
+
+        //通过tcx获取颜色
+        getTcxColor(){
+            if(!this.tcxColor){
+                return
+            }
+			let pattern = /^\d{2}-\d{4}$/;
+			if(pattern.test(this.tcxColor)){
+				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,rv.a?rv.a:1])
+						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].rgba =  {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.info(this.t('ColorboardUpload.jsContent2'))
+					}
+				})
+			}else{
+				message.info(this.t('ColorboardUpload.jsContent5'))
+			}
+          
+        },
+
+        //清除当前的颜色
+        clearCurrentColor(){
+            this.selectColor = {}
+            // this.fileList = []
+			this.reviewColor={}
+			this.colorList[this.selectIndex] = {}
+            this.pantongName = ''
+			this.colorList[this.selectIndex] = {}
+			let colorList =this.colorList.filter((v) => Object.keys(v).length)
+			this.setColorboardList(colorList)
+
+            // this.pantongNameList = []
+            this.tcxColor = ''
+        },
+
+        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.fileList[0] = file
+                this.getImgColor()
+				// nextTick().then(()=>{
+				// 	if(this.driver__.driver){
+				// 		driverObj__.moveNext()
+				// 	}
+				// })
+            };
+            // 转化为base64S
+            reader.readAsDataURL(fileData)
+        },
+		getImgColor(){
+			setTimeout(()=>{
+				const img = new Image();
+				let colorImage = this.$refs.colorImage
+				const colorThief = new ColorThief();
+				img.onload = async () => {
+					let domImg = colorImage[0];
+					// let color = colorThief.getColor(domImg)
+					let selectColorList = [];
+					let selectColor = colorThief.getPalette(img,9)
+					//排序
+					let obj = {
+						max : 5,
+						min: 5,
+					}
+					let colorSort
+					await GO.setColor(selectColor,this.fileList[0].imgUrl,obj).then(
+						(rv) => {
+							if(rv){
+								colorSort = rv.ratio
+							}
+						}
+					)
+					colorSort.sort((a, b) => {
+						var a_num = a.ratio;
+						var b_num = b.ratio;
+						return b_num - a_num;
+					});
+					selectColor = []
+					colorSort.forEach(v=>{
+						selectColor.push(v.rgb)
+					})
+					selectColor = selectColor.join('&')
+					selectColor = selectColor.split("&")
+					let color = selectColor[0].split(',')
+					let colorHex = this.rgbaToHex(color)
+					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}
+					// console.log(this.colorList);
+					// console.log(selectColorList);
+					// let colorListIndex = []
+					// this.colorList.forEach((item,index)=>{
+					// 	if(!item.rgba){
+					// 		colorListIndex.push(index)
+					// 	}
+					// })
+					// for (let index = 0; index < selectColorList.length; index++) {
+					// 	this.colorList[colorListIndex[0]] = selectColorList[index]
+					// 	colorListIndex.splice(0,1)										
+					// }
+					nextTick().then(()=>{
+						if(this.driver__.driver){
+							driverObj__.moveNext()
+						}
+					})
+					img.remove()
+				};
+				img.src = colorImage[0].src;
+			},100)
+		},
+		rgbaToHex(rgba) { // rgba转16进制
+            let hex = '#';
+			rgba.forEach((i,index) => {
+				if(index == 3){
+					hex += Math.round(i * 255).toString(16)
+				}else{
+					hex += Number(i).toString(16).padStart(2, '0');
+				}
+			});
+          
+            return hex;
+        },
+		setUplpadColor(color){
+			nextTick().then(()=>{
+				if(this.isSelectSuccessively){
+					for (let index = 0; index < this.colorList.length; index++) {
+						if(!this.colorList[index].rgba){
+							this.selectIndex = index
+							this.selectColor = color
+							break
+						}
+					}
+				}else{
+					this.selectColor = color
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				}
+				
+			})
+			
+		},
+        beforeUpload(file){
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(this.t('ColorboardUpload.jsContent3'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(this.t('ColorboardUpload.jsContent4'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        },
+
+        deleteFile(index){
+            this.fileList.splice(index, 1)
+			this.selectColorList = []
+        },
+
+        //通过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) 
+						});
+					}
+                }
+            ).catch(res=>{
+            });
+        },
+
+        setColorboardList(colorList){
+            let  newColorList = colorList.map((v)=>{
+                let data = {
+                    id:'',
+                    name:'',
+                    rgbValue:v.rgba,
+                    gradient:v.gradient,
+
+                }
+                return data
+            })
+            this.store.commit('setColorboardList',newColorList)
+        },
+
+        recollection(){
+            let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
+			let hex
+            colorList.forEach((ele, index) => {
+				hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
+                this.colorList[index].rgba = ele.rgbValue
+				this.colorList[index].gradient = ele.gradient
+				// if(ele.gradient) this.colorList[index].gradient = ele.gradient
+				// if(ele.gradient) this.colorList[index].gradient = ele.gradient
+            });
+			if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
+				this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
+			}else{
+				this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
+			}
+            this.store.commit('setColorboardList',colorList)
+        },
+		addGradient(event){
+			let gradientWidth = event.target.clientWidth
+			let left = event.offsetX/gradientWidth
+			this.colorList[this.selectIndex].gradient.gradientList.push({
+				rgba:this.selectColor.rgba,
+				left:left.toFixed(2)*100+'%'
+			})
+		},
+		deleteGradientItem(){
+			if(this.colorList[this.selectIndex].gradient.gradientList.length <= 2)return
+			this.colorList[this.selectIndex].gradient.gradientList.splice(this.colorList[this.selectIndex].gradient.selectIndex,1)
+		},
+		mousedownGradient(event,item,index,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
+			event.stopPropagation();
+			this.colorList[this.selectIndex].gradient.selectIndex = index
+			let gradientRgba = item.rgba
+			let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
+			let hex = this.rgbaToHex(rgba)
+            this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
+			// isMoible()  true为移动端
+			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
+			let position = {
+				x:moible?event.touches[0].screenX:event?.x,
+				left:event.target.style.left?event.target.style.left.split('%')[0]:0
+			}
+			let mousedownGradient = (e)=>{
+				let left = ((moible?e.touches[0].screenX:e.x) - position.x)/gradientWidth*100+Number(position.left)
+				left = (left<0?0:left>100?100:left)
+				item.left = left+'%'
+			}
+			let mouseupGradient = ()=>{
+				if(moible){
+					window.removeEventListener('touchmove',mousedownGradient)
+					window.removeEventListener('touchend',mouseupGradient)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradient)
+					window.removeEventListener('mouseup',mouseupGradient)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradient)
+				window.addEventListener('touchend',mouseupGradient)
+			}else{
+				window.addEventListener('mousemove',mousedownGradient)
+				window.addEventListener('mouseup',mouseupGradient)
+			}
+			// event.target.addEventListener('touchmove',)
+		},
+		mousedownGradientAngle(event,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
+			event.stopPropagation();
+			// isMoible()  true为移动端
+			let domPosition = event.target.getBoundingClientRect()
+			let position = {
+				x:domPosition.x+domPosition.width/2,
+				y:domPosition.y+domPosition.height/2,
+			}
+			let angle
+
+			let mousedownGradientAngle = (e)=>{
+				let X = position.x 
+				let Y = position.y
+				let x = (moible?e.touches[0].clientX:e?.x) - X
+				let y = Y -( moible?e.touches[0].clientY:e?.y)
+				angle = Math.atan2(x,y)*(180 / Math.PI)
+				// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+				this.colorList[this.selectIndex].gradient.angle = angle
+
+			}
+			let mouseupGradientAngle = ()=>{
+				if(moible){
+					window.removeEventListener('touchmove',mousedownGradientAngle)
+					window.removeEventListener('touchend',mouseupGradientAngle)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradientAngle)
+					window.removeEventListener('mouseup',mouseupGradientAngle)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradientAngle)
+				window.addEventListener('touchend',mouseupGradientAngle)
+			}else{
+				window.addEventListener('mousemove',mousedownGradientAngle)
+				window.addEventListener('mouseup',mouseupGradientAngle)
+			}
+		},
+		setOperate(){
+			// this.colorList[this.selectIndex]
+			this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
+			this.gradient.selectIndex = 0
+			this.gradient.gradientShow = true
+			this.colorList[this.selectIndex].rgba = this.selectColor.rgba
+			if(!this.colorList[this.selectIndex].gradient){
+				if(this.selectColor.rgba.r){
+					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
+						r:this.selectColor.rgba.r,
+						g:this.selectColor.rgba.g,
+						b:this.selectColor.rgba.b,
+						a:1,
+					}
+				}
+				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+			}else{
+				this.selectColor = {rgba:this.colorList[this.selectIndex].gradient.gradientList[0].rgba}
+				this.colorList[this.selectIndex].gradient = null
+			}
+			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+			this.setColorboardList(colorList)
+		},
+		setPrintImg(){
+			let printImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.printboard))
+			let moodImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.moodboard))
+			let imgListData = [...moodImgListData,...printImgListData]
+			if(imgListData?.length==0){
+				message.info(this.t('ColorboardUpload.jsContent6'))
+				return 
+			}
+			let selectImgList = this.$refs.selectImgList;
+			// selectImgList.selectImgListMask = true
+			// selectImgList.styleList = this.styleList
+			selectImgList.init(imgListData);
+		},
+		setImgGetColor(data){
+			data.status = 'await'
+			this.fileList[0] = data
+			fetch(data.imgUrl)
+			.then(response => response.blob())
+				.then(blob => {
+					const reader = new FileReader();
+					reader.readAsDataURL(blob);
+					reader.onloadend = () => {
+						this.fileList[0].status = 'done'
+						const base64data = reader.result;
+						this.fileList[0].imgUrl = base64data
+						nextTick(()=>{
+							this.getImgColor()
+						})
+					};
+			})
+			
+		}
+    }
+})
+</script>
+<style lang="less">
+.colorboard_upload_modal{
+    // padding: 1rem 1rem 1.8rem 1rem;
+    height: 100%;
+    // background: #F2F3FB;
+	position: relative;
+	flex: 1;
+    display: flex;
+	justify-content: space-between;
+	.modal_left,.modal_right{
+		background: #f7f8fa;
+		border-radius: 3rem;
+		padding: 2rem 3rem;
+	}
+	.modal_left{
+		display: flex;
+		flex-direction: column;
+		margin-right: 2rem;
+		width: 33rem;
+	}
+	.modal_right{
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+	}
+	.upload_right_header{
+		padding-bottom: 2rem;
+		font-weight: bold;
+		line-height: calc(2.4rem*1.2);
+		font-size: var(--aida-fsize1-8);
+		color: #333333;
+		display: flex;
+		align-items: center;
+
+		.color_edit{
+			font-size: calc(2rem*1.2);
+			margin-right: calc(1rem*1.2);
+		}
+
+	}
+
+	
+	.right_content_line{
+		// padding-left: calc(3rem*1.2);
+		position: relative;
+		// padding-right: calc(3rem*1.2);
+		// margin-right: 2.4rem;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		
+		.upload_centetn{
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+		.upload_item{
+			position: relative;
+		}
+		.upload_centetn::-webkit-scrollbar {
+			display: none;
+		}
+		.upload_file_item_show{
+			position: relative;
+		}
+		.upload_file_item_scale{
+			position: absolute;
+			width: 28rem;
+			height: 14rem;
+			z-index: 2;
+			top: 100%;
+			left: 50%;
+			display: none;
+			transform: translateX(-50%);
+			border-radius: 4px;
+			box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
+			overflow: hidden;
+			background: #fff;
+			>div,>span{
+				background: #fafafa                            ;
+				width: 50%;
+			}
+		}
+		.upload_file_item_show:hover{
+			border-bottom: none;
+			.upload_file_item_scale{
+				display: flex;
+			}
+		} 
+		.modal_img{
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			margin-bottom: 3rem;
+			justify-content: space-between;
+			.modal_img_item{
+				width: calc(100% / 8 - 2rem);
+				aspect-ratio: 1 / 1;
+				>div{
+					width: 100%;
+					height: 100%;
+					border: 1px solid #DCDCEC;
+				}
+				.select_upload_color{
+					border: 1px solid #000;
+				}
+			}
+		}
+		.fi-rr-square-plus,.fi-rr-picture{
+			zoom: 7.5;
+			display: flex;
+		}
+		.upload_file_item{
+			// margin: 0 2rem 2rem 0;
+			margin: 0;
+			// width: 16.5rem;
+			// height: 16.5rem;
+			// width: calc(12rem*1.2);
+			// height: calc(12rem*1.2);
+			width: 100%;
+			aspect-ratio: 1 / 1;
+			// border: 1px solid #F5F5F5;
+			vertical-align: top;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border: 1px dashed transparent;
+			background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(-45deg, #fff 0, #fff 0.3em, #000 0, #000 0.6em);
+			.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: calc(4rem*1.2);
+					background: rgba(0,0,0,0.2);
+					font-size: calc(1.6rem*1.2);
+					color: #FFFFFF;
+					line-height: calc(4rem*1.2);
+					text-align: center;
+					position: absolute;
+					left: 0;
+					bottom: 0;
+				}
+			}
+		}
+
+		.upload_img_icon{
+			width: calc(4.6rem*1.2);
+		}
+		.upload_color{
+			display: flex;
+			width: 100%;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			overflow-y: auto;
+			&.upload_color::-webkit-scrollbar {
+				display: none;
+			}
+			.upload_color_item{
+				width: calc(50% - 2rem);
+				aspect-ratio: 1 / 1;
+				margin: 1rem;
+				position: relative;
+				cursor: pointer;
+				.upload_color_item_bg{
+					width: 100%;
+					height: 100%;
+				}
+				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{
+				}
+			}
+		}
+		.upload_color_btn{
+			white-space: nowrap;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 4rem;
+			font-weight: 600;
+			font-size: 1.8rem;
+			>span{
+				margin-right: 1rem;
+			}
+		}
+		.color_setting_block{
+			background: linear-gradient(70deg, #eee4f3, #f3f4e6);
+
+			border-radius: calc(1rem*1.2);
+			overflow: hidden;
+			// box-shadow: 2px 2px 8px #000;
+			box-shadow: 2px 2px 8px rgba(0,0,0,.3);
+			.vc-chrome{
+				background: rgba(0,0,0,0);
+				box-shadow:none;
+			}
+			.chrome_color{
+				// width: calc(17.5rem*1.2);
+				// width: 24rem;
+				width: 100%;
+				// height: 16.5rem;
+				overflow: hidden;
+
+				.vc-chrome-saturation-wrap{
+					height: 100%;
+					// width: calc(16rem*1.2);
+					width: 100%;
+					height: calc(14rem*1.2);
+					max-height: calc(17rem*1.2);
+					max-width: 23rem;
+					margin: calc(.7rem*1.2) auto;
+					padding-bottom: 0;
+				}
+				.vc-chrome-body{
+					padding: 0;
+					width: 90%;
+					margin: calc(0.5rem*1.2) auto;
+					margin: 0 auto;
+					background: rgba(0,0,0,0);
+					margin-bottom: calc(1rem*1.2);
+					// display: none;
+					.vc-chrome-fields-wrap{
+						margin-top: 5%;
+						padding: 0;
+						position: relative;
+						.vc-chrome-toggle-btn{
+							width: calc(3.2rem*1.2);
+							.vc-chrome-toggle-icon{
+								height: auto;
+								margin-right: calc(-0.4rem*1.2);
+								margin-top: 0rem;
+								display: flex;
+								flex-direction: column;
+								align-items: center;
+								svg{
+									width: calc(2.4rem*1.2) !important;
+									height: calc(2.4rem*1.2) !important;
+								}
+							}
+						}
+						.vc-chrome-fields{
+							.vc-chrome-field{
+								padding-left: calc(.6rem*1.2);
+							}
+							.vc-input__label{
+								font-size: calc(1.6rem*1.2);
+							}
+							.vc-input__input{
+								font-size: calc(1.1rem*1.2);
+								height: calc(2.1rem*1.2);
+							}
+						}
+						.ant-upload-list{
+							
+						}
+						.vc-sketch-color-wrap{
+							background-image: url(@../../../../../../../assets/images/homePage/dropper.png);
+							// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
+							// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
+							// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
+							background-size: calc(1.5rem*1.2);
+							background-repeat: no-repeat;
+							background-position: 50%;
+							cursor: pointer;
+							margin: 0;
+							width: calc(2.2rem*1.2);
+							height: calc(2.2rem*1.2);
+							padding: calc(.7rem*1.2);
+							border: 1px solid;
+							position: absolute;
+							bottom: calc(-.5rem*1.2);
+							right: calc(.5rem*1.2);
+							border-radius: calc(.5rem*1.2);
+						}
+						.vc-chrome-fields{
+							.vc-input__label{
+								margin-top: calc(1rem*1.2);
+							}
+						}
+						.vc-chrome-fields:nth-child(2){
+							>:last-of-type {
+								display: none;
+							}
+						}
+						.vc-chrome-fields:nth-child(3){
+							>:last-of-type {
+								display: none;
+							}
+						}
+					}
+					.vc-chrome-controls{
+						align-items: center;
+						flex-direction: row-reverse;
+						.vc-chrome-color-wrap{
+							// width: 3.6rem;
+							margin-left: calc(2rem*1.2);
+							width: auto;
+							.vc-chrome-active-color,.vc-checkerboard{
+								width: calc(3rem*1.2);
+								height: calc(3rem*1.2);
+								border-radius: 50%;
+							}
+						}
+						.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
+							.vc-hue{
+								border-radius: 15px;
+							}
+							.vc-alpha{
+								border-radius: 15px;
+								overflow: hidden;
+							}
+							height: calc(1rem*1.2);
+							.vc-hue-picker{
+								width: calc(1.4rem*1.2);
+								height: calc(1.4rem*1.2);
+							}
+							.vc-alpha-picker{
+								width: calc(1.4rem*1.2);
+								height: calc(1.4rem*1.2);
+								transform: translate(calc(-.6rem*1.2),calc(-.4rem*1.2));
+							}
+						}
+						.vc-chrome-alpha-wrap{
+							display: none;
+						}
+						.vc-chrome-hue-wrap{
+							margin-bottom: .5rem;
+						}
+					}
+				}
+				.vc-chrome-saturation-wrap .vc-saturation-circle{
+					width: calc(1rem*1.2);
+					height: calc(1rem*1.2);
+				}
+			}
+
+			
+			.color_block{
+				// margin-top: calc(1rem;
+				// display: flex;
+				// justify-content: space-between;
+				// font-size: calc(1.6rem;
+				width: 100%;
+				padding: 0 5%;
+				padding-bottom: 5%;
+				margin: calc(0.5rem*1.2) auto;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.color_right{
+					width: 13rem;
+					font-size: calc(1.2rem*1.2);
+					color: #666666;
+					.color_rgb_block{
+						display: flex;
+						.rgb_item{
+							margin-left: calc(.2rem*1.2);
+						}
+					}
+				}
+				.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: .25rem .6rem;
+						box-shadow: inset 0 0 0 1px #ccc;
+						border-radius: .5rem;
+						justify-content: space-around;
+						text-transform:uppercase;
+						.color_block_bg{
+							width: 1.8rem;
+							height: 2.5rem;
+							// margin-right: .5rem;
+							display: flex;
+							justify-content: space-between;
+						}
+					}
+					.color_block_bg{
+					}
+				}
+				
+			}
+			.color_setting_operateSingle{
+				text-align: center;
+				margin: 1rem 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.color_setting_btn{
+					margin: 0 1rem;
+					color: rgba(0, 0, 0, 0.5);
+					&.active{
+						color: rgba(0, 0, 0, 0.7);
+						font-weight: 900;
+					}
+				}
+			}
+			.color_setting_operate{
+				*{
+					-webkit-touch-callout: none; /* iOS Safari */
+					-webkit-user-select: none; /* Safari */
+					-moz-user-select: none; /* Firefox */
+					-ms-user-select: none; /* Internet Explorer/Edge */
+					user-select: none;
+				}
+				.color_setting_operate_item{
+					display: flex;
+					justify-content: space-around;
+					align-items: center;
+					.operate_item_box{
+					}
+				}
+				.color_setting_operate_control{
+					.operate_item_delete,.operate_item_angle{
+						cursor: pointer;
+					}
+					.operate_item_delete{
+						i{
+						display: flex;
+							font-size: 3rem;
+						}
+					}
+					.operate_item_angle{
+						.operate_item_angle_box{
+							border-radius: 50%;
+							width: 4rem;
+							height: 4rem;
+							border: solid 2px #39215b;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							cursor: pointer;
+							>div{
+								height: 100%;
+								width: 1rem;
+								position: relative;
+								pointer-events:none;
+							}
+							>div::before{
+								position: absolute;
+								content: "";
+								top: 0.2rem;
+								width: 1rem;
+								height: 1rem;
+								border-radius: 50%;
+								background: #39215b;
+							}
+						}
+					}
+				}
+				.color_setting_operate_input{
+					width: 80%;
+					// padding: 0 10%;
+					margin: 1.2rem 10%;
+					border-radius: 10%;
+					position: relative;
+					height: 2.5rem;
+					.color_setting_operate_bg{
+						border-radius: .5rem;
+						width: 100%;
+						height: 2.5rem;
+						background: #fff;
+						position: absolute;
+					}
+				}
+				.color_setting_operate_btn{
+					position: absolute;
+					top: 50%;
+					transform: translate(-50%,-50%);
+					left: 0;
+					width: 1rem;
+					height: 110%;
+					border: .2rem solid;
+					border-radius: .5rem;
+					cursor: pointer;
+					box-sizing: content-box;
+					z-index: 2;
+					&.active{
+						border: .3rem solid;
+					}
+				}
+				.color_setting_operate_btn:hover{
+					border: .3rem solid;
+				}
+			}
+		}
+		.get_color_block{
+			display: flex;
+			flex-direction: column;
+			width: 32rem;
+			.get_color_input,.get_color_button{
+				width: 100%;
+				border-radius: 5rem;
+				font-weight: 600;
+			}
+			.get_color_input{
+				background: #FFFFFF;
+				border: 1px solid #000;
+				padding: calc(1rem*1.2) calc(1.3rem*1.2);
+				box-sizing: border-box;
+				font-size: calc(1.4rem*1.2);
+				font-size: var(--aida-fsize1-8);
+				text-align: left;
+
+				&::placeholder {
+					color: #B7B7B7;
+				}
+			}
+			
+			.get_color_button{
+				margin-top: 2rem;
+				background: #bdbdbd;
+				display: inline-block;
+				color: #000;
+				line-height: 5rem;
+				text-align: center;
+				font-size: var(--aida-fsize1-8);
+				vertical-align: middle;
+				cursor: pointer;
+				.get_color_des{
+					vertical-align: middle;
+				}
+			}
+			// .get_color_bg{
+			// 	width: calc(18rem*1.2);
+			// 	height: calc(18rem*1.2);
+			// 	position: relative;
+			// 	left: 50%;
+			// 	transform: translateX(-50%);
+			// 	margin-top: calc(1.5rem*1.2);
+			// 	img{
+			// 		opacity: 0;
+			// 		position: absolute;
+			// 		top: 0;
+			// 		width: 100%;
+			// 		height: 100%;
+			// 	}
+			// }
+		}
+	}
+
+	.upload_item{
+		margin-bottom: calc(2rem*1.2);
+		.ant-upload-picture-card-wrapper{
+			.ant-upload-list{
+				.ant-upload-select-picture-card{
+					// margin: 0 2rem 2rem 0;
+					margin: 0;
+					display: inline-block;
+					width: calc(12rem*1.2);
+					height: calc(12rem*1.2);
+					border: 1px solid #F5F5F5;
+					vertical-align: top;
+					i{
+						zoom: 4;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/component/HomePage/index/editContent/collection/MoodboardUpload.vue b/src/component/HomePage/index/editContent/collection/MoodboardUpload.vue
new file mode 100644
index 00000000..e4dc6954
--- /dev/null
+++ b/src/component/HomePage/index/editContent/collection/MoodboardUpload.vue
@@ -0,0 +1,743 @@
+<template>
+    <div class="collection_modal_item">
+        <div class="modal_left" >
+            <div class="switch_type_list" >
+                <div
+                    @click.stop="open(1)"
+                    class="switch_type_item"
+                    :class="[openClick == 1 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('MoodboardUpload.Upload') }}</span>
+                </div>
+                <div
+                    @click.stop="open(2)"
+                    class="switch_type_item"
+                    :class="[openClick == 2 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('MoodboardUpload.Library') }}</span>
+                </div>
+                <div
+                    @click.stop="open(3)"
+                    class="switch_type_item"
+                    :class="[openClick == 3 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('MoodboardUpload.Generate') }}</span>
+                </div>
+            </div>
+            <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)"
+                                >
+									{{ $t('MoodboardUpload.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"
+								:capture="null"
+                                :data="{
+                                    ...upload,
+                                }"
+                                :headers="{ Authorization: token }"
+                                :before-upload="beforeUpload"
+                                v-model:file-list="fileList"
+								: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>
+                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+                                </div>
+                            </a-upload>
+                        </div>
+                    </div>
+                </div>
+				<div class="upload_max_tip">
+					<span class="icon iconfont icon-zhuyi"></span>
+					<span>{{ $t('MoodboardUpload.Maximum') }}</span>
+				</div>
+                <!-- <div class="upload_max_tip">
+                    <span class="icon iconfont icon-zhuyi"></span>
+                    <span
+                        >Maximum 10 images can be uploaded, Maximum 2M per
+                        image</span
+                    >
+                </div> -->
+            </div>
+            <Material
+                v-show="openClick == 2"
+                ref="Material"
+                msg="Moodboard"
+            ></Material>
+            <Generate
+                v-show="openClick == 3"
+                ref="Generate"
+                msg="Moodboard"
+            ></Generate>
+        </div>
+        <div v-show="moodboarList.length" class="modal_right">
+			<div class="modal_layout">
+				<div class="modal_text">
+					<div>
+						{{ $t('MoodboardUpload.Thumbnail') }}
+					</div>
+					<div class="modal_btn started_btn"  @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
+				</div>
+				<div class="modal_img" >
+					<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
+						<img v-lazy="item.imgUrl">
+						<div class="checked" >
+							<i class="fi fi-rr-trash"></i>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
+				<div class="modal_text">
+					<div>{{ $t('MoodboardUpload.selected') }}</div>
+					<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
+				</div>
+				<div class="modal_img_max">
+					<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
+						<div v-for="item,index in layoutList" :class="[moodb_className[index]]"  class="modal_imgItem">
+							<img :src="item.imgUrl" v-modelImg>
+						</div>
+					</div>
+					<div v-else class="modal_img">
+						<img :src="modalImg[0].imgUrl">
+					</div>
+					<div class="mark_loading" v-show="loadingShow">
+						<a-spin size="large" />
+					</div>
+				</div>
+				
+			</div>
+			
+		</div>
+		<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
+       
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { getCookie } from "@/tool/cookie";
+import { getUploadUrl,isMoible } from "@/tool/util";
+import { useStore } from "vuex";
+import { message, Upload } from "ant-design-vue";
+import { Https } from "@/tool/https";
+import Material from "@/component/HomePage/Material.vue";
+import Generate from "@/component/HomePage/Generate.vue";
+import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
+import layout from "@/component/HomePage/layout.vue";
+import domTurnImg from '@/tool/domTurnImg'
+import GO from "@/tool/GO";
+import moodb from "@/tool/moodb";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+    components: { Material, MoodTemplate, Generate,layout },
+    setup() {
+		const store = useStore()
+        let lessenList: any = ref([]);
+        let fileList: any = ref([]);
+        let showFileList: any = ref([]);
+        let templateModal: any = ref(false);
+        let templateFileList: any = ref([]);
+        let openClick: any = ref(1);
+		let moodb_className:any = ref([]);
+		let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
+		let layoutList:any = []//选中后随机生成的list
+		let layoutOpen = ref(false)
+		let loadingShow = ref(false)
+		let modalImg:any= computed(()=>{
+			return store.state.UploadFilesModule.disposeMoodboard
+		})
+		let uploading:any = ref([])
+		let edieShow:any = ref()
+		let {t} = useI18n()
+
+        return {
+            fileList,
+			showFileList,
+            lessenList,
+            templateModal,
+            templateFileList,
+            openClick,
+			moodb_className,
+			flex_direction,
+			layoutList,
+			layoutOpen,
+			loadingShow,
+			modalImg,
+			uploading,
+			edieShow,
+			t,
+        };
+    },
+    data() {
+        return {
+            indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+            upload: {
+                isPin: 0,
+				gender:'',
+                level1Type: "Moodboard",
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            token: "",
+            uploadUrl: "",
+            moodTemplateId: "", //模板id
+            store: useStore(),
+			moodb_:moodb.moodb_,
+			moodboarList:computed(()=>{
+				return  useStore().state.UploadFilesModule.moodboard
+			}),
+        };
+    },
+	// watcheffect(){
+	// 	let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
+    //                 (v: any) => v.checked == true
+    //             );
+	// 	this.store.commit("setMoodboardFile", breviaryList);
+	// 	console.log(22);
+	// },
+    mounted() {
+        this.token = getCookie("token") || "";
+        this.uploadUrl = getUploadUrl();
+    },
+	directives:{
+		modelImg:{
+			mounted(el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight >= parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			},
+			updated (el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight >= parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			}
+		}
+	},
+    methods: {
+        open(num: Number) {
+            this.openClick = num;
+			if(num ==2 ){
+				let material:any = this.$refs.Material
+				material.init('Moodboard')
+			}else if (num == 3){
+			}
+        },
+        fileUploadChange(data: any) {
+            let file = data.file;
+			let bor = true
+            if (file.status === "done") {
+                let res = JSON.parse(file.xhr.response);
+				if(res.errCode == 0){
+					file.imgUrl = res.data.url;
+					file.resData = res.data;
+					file.type_ = {
+						type1:'upload',
+						type2:'Moodboard'
+					};
+					file.id_ = GO.id++
+					file.id = res.data.id
+					let fileList = this.fileList.filter(
+						(v: any) => v.status === "done"
+					);
+					let arr =  this.store.state.UploadFilesModule.moodboard
+					if(arr.length >= 8){
+						message.info(this.t('MoodboardUpload.jsContent1'))
+					}else{
+						this.store.commit("setMoodboardFile", fileList);
+					}
+				}else{
+					bor = false
+				}
+				// this.showFileList = this.fileList
+            } else if (file.status === "error") {
+				bor = false
+            }
+			if(!bor){
+                let res:any = JSON.parse(file.xhr.response);
+				let index = -1;
+                this.fileList.forEach((ele: any, index1: any) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
+                    }
+                });
+                if (index > -1) {
+                    this.fileList.splice(index, 1);
+                }
+                // message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
+                message.warning(res.errMsg);
+			}
+        },
+        beforeUpload(file: any) {
+            const isJpgOrPng =
+                file.type === "image/jpeg" ||
+                file.type === "image/png" ||
+                file.type === "image/jpg" ||
+                file.type === "image/bmp";
+            if (!isJpgOrPng) {
+                message.info(this.t('MoodboardUpload.jsContent3'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(this.t('MoodboardUpload.jsContent4'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        },
+
+        deleteFile(item: any) {
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
+				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
+				this.store.commit("addGenerateMaterialFils", item);
+			}else{
+				this.fileList = this.store.state.UploadFilesModule.moodboardFiles
+				let moodboard 
+				this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
+					if(items.id_ == item.id_){
+						moodboard = index
+						
+					}
+				})
+				this.fileList.splice(moodboard,1)
+				this.store.commit("setMoodboardFile", this.fileList);
+			}
+			if(this.store.state.UploadFilesModule.moodboard.length == 0){
+				this.store.commit("clearMoodTemplateId");
+				this.layoutList = []
+				this.edieShow = false
+			}
+        },
+        recollection() {
+            let arr = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .moodboardFiles
+                )
+            );
+			let disposeMoodboard = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .disposeMoodboard
+                )
+            );
+			let moodboardPosition = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .moodboardPosition
+                )
+            );
+			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.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
+			this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
+			this.fileList = setboard.moodboard
+        },
+
+        async changeTemplateModal() {
+			if(this.modalImg[0]?.id){
+				let layout:any = this.$refs.layout
+				if(this.layoutList.length <= 0){
+					let styleObj = this.store.state.UploadFilesModule.moodboardPosition
+					if(!styleObj.domStyle)await this.layout()
+					// 
+					let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
+					this.layoutList = arr
+				}
+				if(window.screen.width<1300){
+					layout.isMobile = true
+				}else{
+					layout.isMobile = false
+				}
+				
+				layout.init()
+			}else{
+				message.info(this.t('MoodboardUpload.jsContent5'))
+			}
+			
+        },
+		async layout(){
+			if(this.loadingShow)return
+			await new Promise((resolve, reject) => {
+				this.loadingShow = true
+				this.store.commit("setDisposeMoodboard", []);
+				let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
+				this.layoutList = arr
+				var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
+				let moodb =  this.moodb_[arr.length-1][random]
+				if( moodb.filter((item,index)=> item == 'w2h1').length != 0  && arr.length > 4){
+					this.flex_direction = true
+				}else{
+					this.flex_direction = false
+				}
+				if(this.moodb_[arr.length-1].length != 1){
+					if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
+						this.loadingShow = false
+						this.layout()
+						return resolve('')
+					}
+				}
+				this.edieShow = true
+				if(this.moodb_[arr.length-1].length == 2){
+					this.moodb_className = this.moodb_[arr.length-1][0]
+				}else{
+					this.moodb_className = this.moodb_[arr.length-1][random]
+				}
+				this.layoutOpen = true
+				//提交模板
+				// this.loadingShow = true
+				this.layoutList.forEach((v:any)=>{
+					v.setPitch = false
+				})
+				nextTick().then(()=>{
+					let layoutCentent = document.getElementById('modal_img')
+					let obj = {
+						imgStyle:[],
+						domStyle:[],
+						borStyle:[],
+						rototeStyle:[],
+						translateStyle:[],
+						angleTRStyle:[],
+						angleTLStyle:[],
+						angleBRStyle:[],
+						angleBLStyle:[],
+						class:this.moodb_className,
+					}
+					this.store.commit("setDisposeMoodboardPosition", obj);
+					domTurnImg(layoutCentent).then((rv)=>{
+						let file = rv
+						let param = new FormData(); 
+						param.append('inPin','0')
+						param.append('level1Type','Moodboard')
+						param.append('gender','')
+						param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
+						param.append('file',file);
+						let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+						Https.axiosPost(Https.httpUrls.elementUpload,param,config)
+						.then((rv: any) => {
+								let img:any = rv
+								img.imgUrl = rv.url
+								img.resData = JSON.parse(JSON.stringify(img))
+								this.store.commit("setDisposeMoodboard", img);
+								this.loadingShow = false
+								resolve('')
+							}
+						).catch(rv=>{
+							this.loadingShow = false
+						})
+					})
+					
+				})			
+			})
+			    
+		},
+		setmoodbClass(val:any){
+			this.moodb_className = val
+		}
+    },
+});
+</script>
+<style lang="less" scoped>
+.collection_modal_item {
+    // padding: 1.5rem 2.6rem 4rem;
+    height: 100%;
+	flex: 1;
+    display: flex;
+	justify-content: space-between;
+	.modal_left,.modal_right{
+		background: #f7f8fa;
+		border-radius: 3rem;
+		padding: 2rem 3rem;
+	}
+    .modal_left {
+		width: 71rem;
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		margin-right: 2rem;
+        // width: 50rem*1.2);
+        .switch_type_list {
+            display: flex;
+            align-items: center;
+            position: relative;
+
+            .switch_type_item {
+                display: flex;
+                align-items: center;
+                // padding: 0 2rem*1.2);
+                height: calc(4rem*1.2);
+                border-radius: calc(0.8rem*1.2);
+                line-height: calc(4rem*1.2);
+                font-size: var(--aida-fsize1-8);
+                // margin-right: 2.2rem*1.2);
+                margin-right: calc(8rem*1.2);
+                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: calc(.3rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: calc(.6rem*1.2);
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+                &.select_swtich {
+                    color: #000;
+                    // font-weight: 900;
+                    transform: scale(1.15);
+                }
+                &.select_swtich::before {
+                    width: 100%;
+                }
+
+                .switch_icon {
+                    font-size: calc(1.8rem*1.2);
+                    margin-right: calc(0.8rem*1.2);
+                }
+            }
+        }
+
+        .moodboard_body {
+            padding-top: calc(2.5rem*1.2);
+			flex: 1;
+            height: calc(30rem*1.2);
+            overflow-x: hidden;
+            border-right: 1px solid #e5e5e5;
+			display: flex;
+			flex-direction: column;
+            &.moodboard_body::-webkit-scrollbar {
+                display: none;
+            }
+            .upload_img_body {
+				height: 100%;
+                overflow-y: auto;
+                margin-bottom: calc(1rem*1.2);
+            }
+
+            
+
+            .upload_max_tip {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: calc(1.4rem*1.2);
+                color: #030303;
+
+                .icon-zhuyi {
+                    font-size: calc(1.6rem*1.2);
+                    margin-right: calc(0.7rem*1.2);
+                }
+            }
+        }
+    }
+	.modal_right{
+		flex: 1;
+		display: flex;
+		min-width: calc(57rem*1.2);
+		flex-direction: column;
+		overflow: hidden;
+		.modal_layout,.modal_accomplish{
+			.modal_text{
+				font-size:var(--aida-fsize1-4);
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+		.modal_layout{
+			.modal_img{
+				width: calc(40rem*1.2);
+				height: calc(5rem*1.2);
+				overflow-x: hidden;
+				display: flex;
+				&.modal_img::-webkit-scrollbar {
+					display: none;
+				}
+				.modal_img_item{
+					width: calc(4rem*1.2);
+					height: calc(4rem*1.2);
+					text-align: center;
+					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
+					position: relative;
+					cursor: pointer;
+					overflow: hidden;
+					img{
+						width: auto;
+						height: 100%;
+						max-width: 100%;
+						object-fit: cover;
+					}
+					.checked{
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+						cursor: pointer;
+						display: none;
+						justify-content: center;
+						align-items: center;
+					}
+					&.modal_img_item:hover .checked{
+						display: flex;
+					}
+				}
+				
+			}
+		}
+		.modal_accomplish{
+			// margin-top: 2rem*1.2);
+			height: calc(30rem*1.2);
+			display: flex;
+			flex: 1;
+			flex-direction: column;
+			.modal_text{
+				padding-top: calc(2rem*1.2);
+				padding-block: calc(2rem*1.2);
+			}
+			.modal_img_max{
+				// flex: 1;
+				// width: 57rem;
+				// height: 35rem;
+				width: 92rem;
+				height: 56.5rem;
+				position: relative;
+				.mark_loading{
+					position: absolute;
+				}
+			}
+			.modal_img{
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				align-items: center;
+				flex-direction: column;
+				position: relative;
+				
+				>img{
+					// height: 100%;
+					width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+				}
+				&.active{
+					flex-direction: row;
+				}
+				.modal_imgItem{
+					position: relative;
+					overflow: hidden;
+					text-align: center;
+					img{
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+						float: left;
+						user-select:none;
+						-webkit-user-drag: none;
+					}
+				}
+				.wh1{
+					width: 23%;
+					height: 48%;
+				}
+				.wh4{
+					width: 48.5%;
+					height: 100%;
+				}
+				.wh8{
+					width: 100%;
+					height: 48.5%;
+				}
+				.w1h2{
+					width: 23%;
+					height: 100%;
+				}
+				.w2h1{
+					width: 48.5%;
+					height: 48%;
+				}
+			}
+		}
+	}
+}
+</style>
+
diff --git a/src/component/HomePage/index/editContent/collection/PrintboardUpload.vue b/src/component/HomePage/index/editContent/collection/PrintboardUpload.vue
new file mode 100644
index 00000000..f226f920
--- /dev/null
+++ b/src/component/HomePage/index/editContent/collection/PrintboardUpload.vue
@@ -0,0 +1,1000 @@
+<template>
+    <div class="printboard_upload_modal" :class="[driver__.driver?'showEvents':'']">
+		
+        <div class="printboard_left_upload modal_left">
+            <div class="left_upload_header">
+                <div class="upload_header_item">
+                    <div class="switch_type_list">
+                        <div
+							
+							class="switch_type_item"
+							:class="[openClick == 1 ? 'select_swtich' : '']"
+						>
+							<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
+						</div>
+						<div
+							
+							class="switch_type_item"
+							:class="[openClick == 2 ? 'select_swtich' : '']"
+						>
+							<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
+						</div>
+						<div
+							
+							class="switch_type_item Guide_1_2_1"
+							:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
+						>
+							<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
+							
+						</div>
+						<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
+							<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>	</div>
+							<ul v-show="openMenu">
+								<li 
+									v-for="item,index in printCatecoryList" 
+									class="printModel_item" 
+									@click.stop="setSceneList(item)"
+									:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
+									item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
+									item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
+								>{{ item.name }}</li>
+							</ul>
+						</div>
+                    </div>
+                </div>
+            </div>
+             <div v-show="openClick == 1" class="printboard_body">
+                <div class="upload_img_body">
+                    <div class="upload_item">
+                        <div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
+                            <div class="upload_file_img_block">
+                                <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  v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
+									<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
+
+                                    <div class="delete_like_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'">
+                                <a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
+                            </div> -->
+                            
+                        </div>
+                        <div class="upload_file_item upload_component" v-show="printboardList.length < 16">
+                            <a-upload
+                                :action="uploadUrl + '/api/element/upload'"
+								:capture="null"
+                                list-type="picture-card"
+                                :before-upload="beforeUpload"
+                                :data="{
+                                    ...upload
+                                }"
+                                :headers="{Authorization:token}"
+                                v-model:file-list="fileList"
+                                :customRequest="function(){}"
+								:multiple="!driver__.driver"
+                                :maxCount="16 - printboardList.length+fileList.length"
+                                accept=".jpg,.png,.jpeg,.bmp"
+                                @change="fileUploadChange"
+                                >
+								<div
+                                    class="upload_tip_block"
+									v-show="printboardList.length < 16"
+                                >
+                                    <i class="fi fi-br-upload"></i>
+                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+                                </div>
+                            </a-upload>
+                        </div>
+                    </div>
+                </div>
+				<div class="upload_max_tip">
+					<span class="icon iconfont icon-zhuyi"></span>
+					<span>{{ $t('PrintboardUpload.Maximum') }}</span>
+				</div>
+            </div>
+			<Material v-show="openClick == 2" 
+				ref="Material" 
+				msg="Printboard" 
+				@setLibrary = setSetchboardGenerate 
+				@confirmSelect="confirmSelect"
+				:disignTypeList="printCatecoryList"
+				></Material>
+			<Generate v-show="openClick == 3" ref="Generate" :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
+        </div>
+		<div class="modal_right">
+			<div class="modal_layout">
+				<div class="modal_text">
+					<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
+					<!-- <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.stop="deleteFile(item)">
+						<img v-lazy="item.imgUrl">
+						<div class="checked" >
+							<i class="fi fi-rr-trash"></i>
+						</div>
+					</div>
+				</div> -->
+			</div>
+			<div class="modal_accomplish">
+				<div class="modal_img">
+					<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
+						<img v-lazy="item.imgUrl">
+						<sketchCategory :disignTypeList="printCatecoryList" :generateList="printboardList" :isSpread="true" :item="item" ></sketchCategory>
+						<!-- 在sketch 和print暂时关闭like -->
+						<!-- <div
+							class="delete_like_file_block left1"
+							:class="[driver__.driver?'hideEvents':'']"
+						>
+							<i v-if="!item.like || item.libraryChecked" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
+							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
+						</div> -->
+						
+						<!-- <div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
+							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
+						</div>
+						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
+							<span class="icon iconfont icon-shanchu operate_icon"></span>
+						</div> -->
+						<div class="pin_block">
+							<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
+								<i v-if="item.pin" class="fi fi-rr-check"></i>
+								<i v-else class="fi noCheck"></i>
+								<span>PIN</span>
+							</label>
+						</div>
+						<div class="moreBox" @click.stop> 
+							<more :moreList="['edit','down','enlargement']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 取消请求 -->
+		<scaleImage ref="scaleImage"></scaleImage>
+        <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import {getCookie} from '@/tool/cookie'
+import {getUploadUrl} from '@/tool/util'
+import {useStore} from 'vuex'
+import { Https } from "@/tool/https";
+import { Modal,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";
+import { useI18n } from 'vue-i18n';
+import { openGuide,driverObj__ } from "@/tool/guide";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import axios from 'axios'
+import generalMenu from "@/component/HomePage/generalMenu.vue";
+import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
+import more from './more.vue'
+
+export default defineComponent({
+    components:{
+        Cropper,
+        Material,
+		Generate,
+		scaleImage,
+		generalMenu,
+		sketchCategory,
+		more,
+    },
+    setup(){
+        let store:any =useStore()
+        let fileList:any = ref([]),//选中的文件id数据
+            printImgList:any = ref([]), //print的印花图片
+            moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
+        let openClick: any = ref(1);
+		let driver__:any = inject('driver__')
+		let {t} = useI18n()
+		let isTest = ref()
+		let userInfo:any = {}
+		let useGenerate:any = ref({
+			imgId : '',
+			imgUrl:1,
+			checked:false,
+			level2Type:'',
+			designType:''
+		})
+		let workspace:any = ref({})
+		let scene = ref({
+			name:'Pattern',
+			value:'Pattern'
+		})
+		let openMenu = ref(false)
+		let printCatecoryList:any = computed(()=>{
+			return store.state.UserHabit.printType
+		})
+        return {
+            fileList,
+            printImgList,
+            moodBoards,
+			openClick,
+			driver__,
+			t,
+			isTest,
+			userInfo,
+			useGenerate,
+			workspace,
+			scene,
+			openMenu,
+			printCatecoryList,
+        }
+    },
+    computed:{
+       
+    },
+	watch:{
+	},
+    data(){
+        return {
+            swtich_type:'upload',
+            indicator : h(LoadingOutlined, {
+                style: {
+                    fontSize: '2.4rem*1.2)',
+                },
+                spin: true,
+            }),
+            upload:{
+                isPin:0,
+				gender:'',
+                level1Type:'Printboard',
+                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            token:'',
+            uploadUrl:'',
+            store:useStore(),
+            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
+            currentFileNum:0, //当前上传的文件数
+            isUpload:false,
+			printboardList:computed(()=>{
+				return  useStore().state.UploadFilesModule.printboard
+			}),
+			isTextarea:false,
+			isInputFocus:false,
+        }
+    },
+    mounted(){
+		let userInfo:any = getCookie("userInfo")
+        this.userInfo = JSON.parse(userInfo);
+        this.token = getCookie('token') || ''
+		let isTest:any = getCookie('isTest')
+        this.isTest =JSON.parse(isTest)
+        this.uploadUrl = getUploadUrl()
+		this.workspace = computed(()=>{
+			return  this.store?.state?.Workspace?.workspace
+		})
+		let Generate:any = this.$refs.Generate
+
+		if(this.driver__.driver){
+			Generate.searchPictureName = 'Elegant floral print for high-fashion attire'
+		}else{
+			Generate.searchPictureName = ''
+		}
+    },
+     methods:{
+		setSetchboardGenerate(item:any){
+			this.useGenerate.imgId = item.imgId
+			this.useGenerate.imgUrl = item.imgUrl
+			this.useGenerate.level2Type = item.level2Type
+			this.useGenerate.designType = item.designType
+			let Material:any = this.$refs.Material
+			let generate:any = this.$refs.Generate
+
+			if(item.designType == 'collection'){
+			}else {
+				generate.sketchboardList.forEach((item:any) => {
+					item.checked = false
+				});
+			}
+		},
+		open(num: Number) {
+            this.openClick = num;
+			let material:any = this.$refs.Material
+			if(num == 2){
+				material.init('Printboard')
+			}
+			if(num == 3){
+				this.scene = this.printCatecoryList[0]
+				nextTick().then(()=>{
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				})
+			}
+        },
+        fileUploadChange(data:any){
+            let file = data.file
+			
+			// let res = JSON.parse(data?.xhr?.response);
+			file.id_ = GO.id++
+			file.type_ = {
+				type1:'upload',
+				type2:'Printboard'
+			};
+			file.pin = false;
+			// file.id = res.data.id?res.data.id:""
+            let Cropper:any = this.$refs.Cropper
+            if(this.currentFileNum === 1){
+                var reader = new FileReader();
+				
+                reader.onload = (e:any) => {
+                    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;
+                    }
+                    Cropper.getOptionImg(data_new)
+					
+					
+                };
+                // 转化为base64
+                // reader.readAsDataURL(file)
+                // 转化为blob
+                reader.readAsArrayBuffer(file.originFileObj);
+                this.cropperFileData = file
+                Cropper.changeShowModal(true)
+				nextTick().then(()=>{
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				})
+            }else{
+                this.customRequest(file)
+            }
+        },
+
+        beforeUpload(file:any,fileList:any){
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(this.t('PrintboardUpload.jsContent1'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(this.t('PrintboardUpload.jsContent2'));
+            }
+            if(isJpgOrPng && isLt2M){
+                this.currentFileNum = fileList.length
+            }else{
+                return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+            }
+            
+        },
+
+        deleteFile(item:any){
+            // this.fileList.splice(item, 1)
+            // this.store.commit('setPrintboardFile',this.fileList)
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
+				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
+				this.store.commit("addGenerateMaterialFils", item);
+			}else{
+				this.fileList = this.store.state.UploadFilesModule.printboardFiles
+				let moodboard 
+				this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
+					if(items.id_ == item.id_){
+						moodboard = index
+						
+					}
+				})
+				this.fileList.splice(moodboard,1)
+				this.store.commit("setPrintboardFile", this.fileList);
+			}
+        },
+		likeFile(item:any,str:string){
+			if(str == 'like'){
+				let data = {
+					generateDetailId:item.id,
+					level1Type:"Printboard",
+					level2Type: item.categoryValue,
+					gender:this.workspace.sexEnum.value,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosPost(Https.httpUrls.generateLike, data).then(
+					(rv) => {
+						item.like = true
+					}
+				).catch(res=>{
+				});
+			}else{
+				let data = {
+					generateDetailId:item.id,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
+					(rv) => {
+						item.like = false
+					}
+				).catch(res=>{
+				});
+			}
+
+		},
+        
+        customRequest(data:any){
+            let new_data = {
+                ...this.upload,
+                file:data.originFileObj
+            }
+            let fileUid = data.uid
+            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
+                (rv: any) => {
+                    if (rv) {
+                        for(let file of this.fileList){
+                            if(fileUid === file.uid){
+                                file.status = 'done'
+                                file.imgUrl = rv.url
+                                file.pin = false
+                                file.id = rv.id
+								file.category = this.printCatecoryList[0].name
+								file.categoryValue = this.printCatecoryList[0].value
+                                file.resData = rv
+								
+                            }
+                        }
+                        let fileList = this.fileList.filter((v:any)=> v.status === 'done')
+                        this.store.commit('setPrintboardFile',fileList)
+                    }
+                }
+            ).catch((res)=>{
+                let index = -1
+                this.fileList.forEach((ele:any,index1:any) => {
+                    if(fileUid === ele.uid){
+                        index = index1
+                    }
+                });
+                if(index > -1){
+                    this.fileList.splice(index, 1)
+                }
+            });
+        },
+
+        closeCropper(type:any){
+            if(this.isUpload){
+                return
+            }
+            if(type == 'error'){
+                let index = -1
+                this.fileList.forEach((ele:any,index1:any) => {
+                    if(this.cropperFileData.uid === ele.uid){
+                        index = index1
+                    }
+                });
+                if(index > -1){
+                    this.fileList.splice(index, 1)
+                }
+            }
+            let Cropper:any = this.$refs.Cropper
+            Cropper.closeCropper()
+
+        },
+
+        deletUploadFile(){
+            let index = -1
+            this.fileList.forEach((ele:any,index1:any) => {
+                if(this.cropperFileData.uid === ele.uid){
+                    index = index1
+                }
+            });
+            if(index > -1){
+                this.fileList.splice(index, 1)
+            }
+        },
+
+
+        handleCropperSuccess(event:any){
+            let {file, fileData} =event
+            let new_data = {
+                ...this.upload,
+                file:file
+            }
+            if(this.isUpload){
+                return
+            }
+            this.isUpload = true
+            const hide = message.loading('loading', 0);
+            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
+                (rv: any) => {
+                    for(let file of this.fileList){
+                        if(fileData.uid === file.uid){
+                            file.status = 'done'
+                            file.imgUrl = rv.url
+                            file.id = rv.id
+                            file.resData = rv
+							file.category = this.printCatecoryList[0].name
+							file.categoryValue = this.printCatecoryList[0].value
+                        }
+                    }
+                    let fileList = this.fileList.filter((v:any)=> v.status === 'done')
+                    this.isUpload = false
+                    this.closeCropper('success')
+                    this.cropperFileData = {name:'',uid:''}
+                    this.store.commit('setPrintboardFile',fileList)
+                    hide()
+					nextTick().then(()=>{
+						if(this.driver__.driver){
+							driverObj__.moveNext()
+						}
+					})
+                }
+            ).catch(res=>{
+                let index = -1
+                this.fileList.forEach((ele:any,index1:any) => {
+                    if(fileData.uid === ele.uid){
+                        index = index1
+                    }
+                });
+                if(index > -1){
+                    this.fileList.splice(index, 1)
+                }
+                this.cropperFileData = {name:'',uid:''}
+                this.isUpload = false
+                this.closeCropper('error')
+                hide()
+            });
+        },
+
+        recollection(){
+			this.useGenerate = {
+				imgId : '',
+				imgUrl:1,
+				checked:false,
+				level2Type:'',
+				designType:'',
+			}
+            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)=>{
+				v.pin = v.pin == 1?true:false
+				this.printCatecoryList.forEach((item:any) => {
+					if(v.level2Type == item.value){
+						v.category=item.name
+						v.categoryValue=item.value
+					}
+				});
+				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)
+
+        },
+
+        confirmSelect(event:any){
+            for(let item of event){
+                let data = {
+                    imgUrl:item.url,
+                    resData:item,
+                    pin:false,
+                    id:item.id,
+                    status:'done',
+                }
+                if(this.fileList.length == 15){
+                    message.warning(this.t('PrintboardUpload.jsContent3'))
+                    break
+                }
+                this.fileList.push(data)
+            }
+            this.store.commit('setPrintboardFile',this.fileList)
+            
+        },
+		scaleImage(index:any){
+			let scaleImage:any = this.$refs.scaleImage
+			scaleImage.isLike = false
+			scaleImage.init(this.printboardList,index)
+		},
+		setSceneList(data:any){
+			if(this.scene.value === data.value) return
+			this.scene = data
+			let generate:any = this.$refs.Generate
+			generate.sketchboardList = []
+			generate.searchPictureName = ''
+			this.openMenu = false
+		},
+		openPrintModel(){
+			if(this.openMenu)return
+			document.addEventListener('click',this.removePrintModel)
+			this.openMenu = true
+		},
+		removePrintModel(){
+			this.openMenu = false
+			document.removeEventListener('click',this.removePrintModel)
+		}
+     }
+
+})
+</script>
+<style lang="less" scoped>
+.printboard_upload_modal{
+    // padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
+	height: 100%;
+    flex: 1;
+    display: flex;
+	justify-content: space-between;
+	.modal_left,.modal_right{
+		background: #f7f8fa;
+		border-radius: 3rem;
+		padding: 2rem 3rem;
+	}
+    .printboard_left_upload{
+		display: flex;
+		flex-direction: column;
+		margin-right: 2rem;
+		width: 71rem;
+        .switch_type_list {
+            display: flex;
+            align-items: center;
+            position: relative;
+			z-index: 11;
+            .switch_type_item {
+                display: flex;
+                align-items: center;
+                // padding: 0 2rem*1.2);
+                height: calc(4rem*1.2);
+                border-radius: calc(0.8rem*1.2);
+                line-height: calc(4rem*1.2);
+                font-size: var(--aida-fsize1-8);
+                // margin-right: 2.2rem*1.2);
+                margin-right: calc(8rem*1.2);
+                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: calc(.3rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: calc(.6rem*1.2);
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+                &.select_swtich {
+                    color: #000;
+                    // font-weight: 900;
+                    transform: scale(1.15);
+                }
+                &.select_swtich::before {
+                    width: 100%;
+                }
+				
+                .switch_icon {
+                    font-size: calc(1.8rem*1.2);
+                    margin-right: calc(0.8rem*1.2);
+                }
+            }
+			.printMenu{
+				margin-right: 0;
+				margin-top: auto;
+				position: relative;
+				margin-left: 2rem;
+				>div{
+					width: 14rem;
+					font-size: var(--aida-fsize1-6);
+					border: 0;
+					i{
+						transition: all .3s;
+						display: inline-block;
+						margin-left: 1rem;
+					}
+					.forbidden{
+						transform: rotate(180deg);
+					}
+				}
+				ul{
+					width: 14rem;
+				}
+			}
+			.switch_type_item:nth-child(3){
+				margin: 0;
+			}
+        }
+
+        .printboard_body{
+			display: flex;
+			flex-direction: column;
+            // height: calc(100% - 5rem*1.2));
+			flex: 1;
+			padding-top: calc(2.5rem*1.2);
+			height: calc(30rem*1.2);
+			overflow-x: hidden;
+			&.printboard_body::-webkit-scrollbar {
+            display: none;
+        }
+            .upload_img_body{
+                height: calc(100% - 3rem*1.2);
+                overflow-y: auto;
+                margin-bottom: calc(1rem*1.2);
+				&.upload_img_body::-webkit-scrollbar {
+					display: none;
+				}
+            }
+		
+            .upload_file_item{
+				// margin: 0 2rem*1.2) 2rem*1.2) 0;
+				display: inline-block;
+				// width: 10rem;
+				// height: 10rem;
+				width: calc(25% - 2rem);
+				aspect-ratio: 1 / 1;
+				border: 1px solid #f5f5f5;
+				vertical-align: top;
+				position: relative;
+				text-align: center;
+				img{
+					width: auto;
+					object-fit: cover;
+					height: 100%;
+					max-width: 100%;
+				}
+
+              .upload_file_img_block{
+				height: 100%;
+			  }
+
+                &.upload_component{
+                }
+				.checked{
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					cursor: pointer;
+					display: none;
+					justify-content: center;
+					align-items: center;
+				}
+				&.modal_img_item:hover .checked{
+				display: flex;
+				}
+				.upload_file_item_content{
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 100%;
+					position: relative;
+					cursor: pointer;
+					.upload_img{
+						display: block;
+						max-height: 100%;
+						width: auto;
+						max-width: 100%;
+						object-fit: cover;
+					}
+					&:hover .more{
+						display: block;
+					}
+				}
+			}
+			.upload_max_tip {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: calc(1.4rem*1.2);
+                color: #030303;
+
+                .icon-zhuyi {
+                    font-size: calc(1.6rem*1.2);
+                    margin-right: calc(0.7rem*1.2);
+                }
+            }
+        }
+    }
+	
+	.modal_right{
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		.modal_layout{
+			.modal_text{
+				font-size: var(--aida-fsize1-4);
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+		.modal_layout{
+			padding-bottom: 4.8rem;
+			.modal_img{
+				width: calc(40rem*1.2);
+				height: calc(5rem*1.2);
+				overflow-x: hidden;
+				display: flex;
+				flex-direction: row;
+				&.modal_img::-webkit-scrollbar {
+					display: none;
+				}
+				.modal_img_item{
+					width: calc(4rem*1.2);
+					height: calc(4rem*1.2);
+					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
+					position: relative;
+					cursor: pointer;
+					text-align: center;
+					overflow: hidden;
+					img{
+						width: auto;
+						height: 100%;
+						object-fit: cover;
+						max-width: 100%;
+					}
+					.checked{
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+						cursor: pointer;
+						display: none;
+						justify-content: center;
+						align-items: center;
+					}
+					&.modal_img_item:hover .checked{
+						display: flex;
+					}
+				}
+				
+			}
+		}
+		.modal_accomplish{
+			// margin-top: 2rem*1.2);
+			overflow-x: hidden;
+			height: calc(30rem*1.2);
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			position: relative;
+			.mark_loading{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				z-index: 99;
+			}
+            // overflow-x: hidden;
+			&.modal_accomplish::-webkit-scrollbar {
+                display: none;
+            }
+			.modal_text{
+				padding-top: calc(2rem*1.2);
+				padding-block: calc(2rem*1.2);
+			}
+			.modal_img{
+				flex: 1;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				position: relative;
+				align-content: flex-start;
+				.modal_imgItem:hover .more{
+					// display: block;
+					opacity: 1;
+				}
+				.modal_imgItem{
+					margin: 1rem;
+					margin-bottom: 5rem;
+					display: inline-block;
+					// width: calc(10rem*1.2);
+					// height: calc(10rem*1.2);
+					width: calc(33.33% - 2rem);
+					aspect-ratio: 1 / 1;
+					border: 1px solid #f5f5f5;
+					position: relative;
+					cursor: pointer;
+					text-align: center;
+					overflow: hidden;
+					.moreBox{
+						position: absolute;
+						right: 1rem;
+						top: 1rem;
+						// opacity: 0;
+						width: 3.5rem;
+						height: 3.5rem;
+						transition: all 0.3s ease-in-out;
+					}
+					&.modal_imgItem:nth-child(even) {
+					}
+					img{
+						object-fit: cover;
+						height: 100%;
+						max-width: 100%;
+						width: auto;
+					}
+					.pin_block{
+						position: absolute;
+						left: 1rem;
+						top: 1rem;
+						width: 8rem;
+						height: 3.5rem;
+						border-radius: 3rem;
+						background: rgba(0,0,0,.7);
+						color: #fff;
+						>label{
+							width: 100%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							cursor: pointer;
+							padding-right: 1rem;
+							padding-left: .2rem;
+						}
+						i{
+							width: 3rem;
+							height: 3rem;
+							border-radius: 50%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							font-size: 2rem;
+							background: #000;
+							&.noCheck{
+								background: inherit;
+								border: 2px solid #fff;
+							}
+						}
+						span{
+							font-size: 1.8rem;
+							font-weight: 600;
+						}
+					}
+					&.active{
+						opacity: 0.5;
+					// border: 2px solid;
+						border-radius: calc(1rem*1.2);
+						transform: scale(0.9);
+						img {
+						}
+						
+						.more{
+							pointer-events:none
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+
+</style>
diff --git a/src/component/HomePage/index/editContent/collection/SketchboardUpload.vue b/src/component/HomePage/index/editContent/collection/SketchboardUpload.vue
new file mode 100644
index 00000000..94de7d9c
--- /dev/null
+++ b/src/component/HomePage/index/editContent/collection/SketchboardUpload.vue
@@ -0,0 +1,967 @@
+<template>
+    <div class="sketchboard_upload_modal">
+        <div class="modal_left">
+            <div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
+                <div
+                    @click.stop="open(1)"
+                    class="switch_type_item"
+                    :class="[openClick == 1 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('SketchboardUpload.Upload') }}</span>
+                </div>
+                <div
+                    @click.stop="open(2)"
+                    class="switch_type_item"
+                    :class="[openClick == 2 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('SketchboardUpload.Library') }}</span>
+                </div>
+                <div
+                    @click.stop="open(3)"
+                    class="switch_type_item Guide_1_9"
+                    :class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
+                >
+                    <span>{{ $t('SketchboardUpload.Generate') }}</span>
+                </div>
+				<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
+					<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
+						</div>
+					<ul v-show="openMenu">
+						<li 
+							v-for="item,index in sketchStyleList" 
+							class="printModel_item" 
+							@click.stop="setSceneList(item)"
+							:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
+							item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
+							item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
+						>{{ item.name }}</li>
+					</ul>
+				</div>
+            </div>
+            <div v-show="openClick == 1" class="sketchboard_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" />
+								<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
+                                <div
+                                    class="delete_like_file_block"
+                                    @click.stop="deleteFile(file)"
+                                >
+                                    <span
+                                        class="icon iconfont icon-shanchu"
+                                    ></span>
+                                </div>
+                            </div>
+                            <!-- <div
+                                class="pin_block"
+                                v-show="file?.status === 'done'"
+                            >
+                                <a-checkbox v-model:checked="file.pin"
+                                    >{{ $t('SketchboardUpload.PIN') }}</a-checkbox
+                                >
+                            </div> -->
+                        </div>
+                        <div
+                            class="upload_file_item upload_component"
+                            v-show="sketchboardList.length < 20"
+                        >
+                            <a-upload
+                                :action="uploadUrl + '/api/element/upload'"
+								:capture="null"
+                                list-type="picture-card"
+                                :data="{
+                                    ...upload,
+                                }"
+								:multiple="!driver__.driver"
+                                :before-upload="beforeUpload"
+                                :headers="{ Authorization: token }"
+                                v-model:file-list="fileList"
+                                :maxCount="20 - sketchboardList.length+fileList.length"
+                                accept=".jpg,.png,.jpeg,.bmp"
+                                @change="(file) => fileUploadChange(file)"
+                            >
+								<div
+                                    class="upload_tip_block"
+									v-show="sketchboardList.length < 20"
+                                >
+                                    <i class="fi fi-br-upload"></i>
+                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+                                </div>
+                            </a-upload>
+                        </div>
+                    </div>
+                </div>
+				<div class="upload_max_tip">
+					<span class="icon iconfont icon-zhuyi"></span>
+					<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
+				</div>
+            </div>
+
+            <Material
+                v-show="openClick == 2"
+                ref="Material"
+                msg="Sketchboard"
+                @confirmSelect="confirmSelect"
+				:disignTypeList="sketchCatecoryList"
+				@setLibrary = setSetchboardGenerate
+            ></Material>
+            <Generate
+                v-show="openClick == 3"
+                ref="Generate"
+                msg="Sketchboard"
+				:scene="scene"
+				:sketchCatecoryList="sketchCatecoryList"
+            ></Generate>
+        </div>
+		<div class="modal_right">
+			<div class="modal_layout">
+				<div class="modal_text">
+					<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
+					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
+				</div>
+				<!-- <div class="modal_img modal_img_x" v-mousewheel>
+					<div class="mousewheel">
+						<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
+							<img v-lazy="item.imgUrl">
+							<div class="checked" >
+								<i class="fi fi-rr-trash"></i>
+							</div>
+						</div>
+					</div>
+					
+				</div> -->
+			</div>
+			<div class="modal_accomplish">
+				<div class="modal_img">
+					<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
+						<img v-lazy="item.imgUrl">
+						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
+						<!-- 在sketch 和print暂时关闭like -->
+						<!-- <div
+							class="delete_like_file_block left1"
+							:class="[driver__.driver?'hideEvents':'']"
+						>
+							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
+							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
+						</div> -->
+						<div class="pin_block">
+							<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
+								<i v-if="item.pin" class="fi fi-rr-check"></i>
+								<i v-else class="fi noCheck"></i>
+								<span>PIN</span>
+							</label>
+						</div>
+						<div class="moreBox" @click.stop> 
+							<more :moreList="['edit','down','enlargement']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<scaleImage ref="scaleImage"></scaleImage>
+		
+		<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
+       	
+		
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { getCookie } from "@/tool/cookie";
+import { getUploadUrl } from "@/tool/util";
+import GO from "@/tool/GO";
+import { useStore } from "vuex";
+import { message, Upload, Modal } from "ant-design-vue";
+import Material from "@/component/HomePage/Material.vue";
+import Generate from "@/component/HomePage/Generate.vue";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
+import { Https } from "@/tool/https";
+import { openGuide,driverObj__ } from "@/tool/guide";
+import { useI18n } from "vue-i18n";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import more from './more.vue'
+
+export default defineComponent({
+    components: { Material, Generate,scaleImage,sketchCategory,more },
+    setup() {
+        let fileList: any = ref([
+		]);
+        let openClick: any = ref(1);
+		
+        let store:any =useStore()
+
+		let sketchCatecoryList:any = computed(()=>{
+			return store.state.Workspace.workspacePosition
+		})
+		let sketchCatecoryAllList:any = computed(()=>{
+			return store.state.Workspace.workspaceAllPosition
+		})
+		let workspace:any = ref({})
+		let sketchboardList:any = computed(()=>{
+			return store.state.UploadFilesModule.sketchboard
+		})
+		let {t} = useI18n()
+		let driver__:any = inject('driver__')
+		let isTest = ref()
+		let useGenerate:any = ref({
+			imgId : '',
+			imgUrl:1,
+			checked:false,
+			level2Type:'',
+			designType:'',
+		})
+		
+		let openMenu = ref(false)
+		let sketchStyleList:any = computed(()=>{
+			return store.state.UserHabit.SketchGenerateType
+		})
+		let scene = ref({
+			name: t('SketchboardUpload.GenerateSketch'),
+			value:'generate'
+		})
+        return {
+            fileList,
+            openClick,
+			store,
+			sketchCatecoryList,
+			sketchCatecoryAllList,
+			workspace,
+			sketchboardList,
+			t,
+			driver__,
+			isTest,
+			useGenerate,
+			scene,
+			openMenu,
+			sketchStyleList,
+        };
+    },
+    data() {
+        return {
+            swtich_type: "upload",
+            indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+            upload: {
+                isPin: 0,
+                level1Type: "Sketchboard",
+				gender:'',
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            token: "",
+            uploadUrl: "",
+			workspaceCom:{},
+			isTextarea:false,
+			isInputFocus:false,
+        };
+    },
+    computed: {
+        getSketchLabel(value) {
+            return (value: any) => {
+                let lable = "";
+                for (let item of this.sketchCatecoryList) {
+                    if (item.value === value) {
+                        lable = item.label;
+                        break;
+                    }
+                }
+                return lable;
+            };
+        },
+    },
+	directives:{
+		mousewheel:{
+			mounted (el) {
+				// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
+				let dom:any = document.getElementsByClassName('modal_img_x')
+				let mouseover = ()=>{
+					// bodyDom.classList.add('active')
+				}
+				let mouseleave = ()=>{
+					// bodyDom.classList.remove('active')
+				}
+				dom.forEach((item:any) => {
+					item.addEventListener('mouseover',mouseover)
+					item.addEventListener('mouseleave',mouseleave)
+				});
+				
+			
+				el.addEventListener('wheel',(e:WheelEvent)=>{
+					let num = 0
+					if(e.deltaY > 0){
+						num = 25
+					}else{
+						num = -25
+					}
+					el.scrollBy(num, 0);
+				},true)
+			}
+		}
+	},
+	watch:{
+		workspaceCom(newVal,oldVal){
+			this.workspace = newVal
+			this.upload.gender = newVal?.sexEnum?.value
+		},
+		sketchboardList:{
+			handler(newVal:any,oldVal:any){
+				if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
+					if(this.driver__.driver){
+						// driverObj__.moveTo(22)
+					}
+				}
+			}
+		},
+		driver__:{
+			handler(newVal,oldVal){
+				if(newVal.index >= 15 && newVal.index <= 16){
+					if(this.driver__.driver){
+						// driverObj__.moveTo(15)
+					}
+				}else{
+				}
+			}
+		}
+	},
+    mounted() {
+        this.token = getCookie("token") || "";
+        let isTest:any = getCookie('isTest')
+        this.isTest =JSON.parse(isTest)
+        this.uploadUrl = getUploadUrl();
+		this.workspaceCom = computed(()=>{
+			return  this.store?.state?.Workspace?.workspace
+		})
+		let Generate:any = this.$refs.Generate
+		if(this.driver__.driver){
+		Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
+		}else{
+			Generate.searchPictureName = ''
+		}
+    },
+    methods: {
+		setSetchboardGenerate(item:any){
+			this.useGenerate.imgId = item.imgId
+			this.useGenerate.imgUrl = item.imgUrl
+			this.useGenerate.level2Type = item.level2Type
+			this.useGenerate.designType = item.designType
+			let Material:any = this.$refs.Material
+			let generate:any = this.$refs.Generate
+
+			if(item.designType == 'collection'){
+			}else {
+				generate.sketchboardList.forEach((item:any) => {
+					item.checked = false
+				});
+			}
+		},
+        open(num: Number) {
+            this.openClick = num;
+            if (num == 2) {
+                let material: any = this.$refs.Material;
+                material.init("Sketchboard");
+            } else if (num == 3) {
+                // let Generate:any = this.$refs.Generate
+                // Generate.init('generate')
+				nextTick().then(()=>{
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				})
+            }
+        },
+		scaleImage(index:any){
+			let scaleImage:any = this.$refs.scaleImage
+			scaleImage.isLike = false
+			scaleImage.init(this.sketchboardList,index)
+		},
+		
+        fileUploadChange(data: any) {
+            let file = data.file;
+			let bor = true
+            if (file.status === "done") {
+				let res = JSON.parse(file.xhr.response);
+				if(res.errCode == 0){
+					let category:any={
+						value:'',
+						name:'',
+					}
+					this.sketchCatecoryList.forEach((item:any) => {
+						if(item.value == res.data.level2Type){
+							category.value = item?.value
+							category.name = item?.name
+						}
+					});
+					file.imgUrl = res.data.url;
+					file.resData = res.data;
+					// file.pin = false;
+					//category用来数据处理
+					file.categoryValue = category?.value;
+					file.category = category?.name;
+					file.categoryShow = false;
+					file.id_ = GO.id++
+					file.id = res.data.id
+					file.type_ = {
+						type1:'upload',
+						type2:'Sketchboard'
+					};
+					let fileList = this.fileList.filter(
+						(v: any) => v.status === "done"
+					);
+					this.store.commit("setSketchboardFile", fileList);
+				}else{
+					bor = false
+				}
+            } else if (file.status === "error") {
+				bor = false
+            }
+			if(!bor){
+				let index = -1;
+                let res:any = JSON.parse(file.xhr.response);
+                this.fileList.forEach((ele: any, index1: any) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
+                    }
+                });
+                if (index > -1) {
+                    this.fileList.splice(index, 1);
+                }
+                // message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
+                message.warning(res.errMsg);
+			}
+        },
+
+        beforeUpload(file: any) {
+            const isJpgOrPng =
+                file.type === "image/jpeg" ||
+                file.type === "image/png" ||
+                file.type === "image/jpg" ||
+                file.type === "image/bmp";
+            if (!isJpgOrPng) {
+                message.info(this.t('SketchboardUpload.jsContent2'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(this.t('SketchboardUpload.jsContent3'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        },
+        deleteFile(item: any) {
+			if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
+				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
+				this.store.commit("addGenerateMaterialFils", item);
+			}else{
+				this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
+				let moodboard 
+				this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
+					if(items.id_ == item.id_){
+						moodboard = index
+						
+					}
+				})
+				this.fileList.splice(moodboard,1)
+				this.store.commit("setSketchboardFile", this.fileList);
+			}
+        },
+		likeFile(item:any,str:string){
+			if(str == 'like'){
+				let data = {
+					generateDetailId:item.id,
+					level1Type:"Sketchboard",
+					level2Type: item.categoryValue?item.categoryValue:item.level2Type,
+					gender:this.workspace.sexEnum.value,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosPost(Https.httpUrls.generateLike, data).then(
+					(rv) => {
+						item.like = true
+					}
+				).catch(res=>{
+				});
+			}else{
+				let data = {
+					generateDetailId:item.id,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
+					(rv) => {
+						item.like = false
+					}
+				).catch(res=>{
+				});
+			}
+
+		},
+        recollection() {
+			this.useGenerate = {
+				imgId : '',
+				imgUrl:1,
+				checked:false,
+				level2Type:'',
+				designType:''
+			}
+            let arr = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .sketchboardFiles
+                )
+            );
+			let setboard = {
+				generate:[] as any,
+				material:[] as any,
+				moodboard:[] as any,
+			}
+			arr.forEach((v:any)=>{
+				v.pin = v.pin == 1?true:false
+				this.sketchCatecoryAllList.forEach((item:any) => {
+					if(v.level2Type == item.value){
+						v.category=item.name
+						v.categoryValue=item.value
+					}
+				});
+				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) {
+                let data = {
+                    imgUrl: item.url,
+                    resData: item,
+                    pin: false,
+                    status: "done",
+                    category: item.level2Type || "Outwear",
+                    categoryShow: false,
+                };
+                if (this.fileList.length == 15) {
+                    message.warning(
+                        this.t('SketchboardUpload.jsContent4')
+                    );
+                    break;
+                }
+                this.fileList.push(data);
+            }
+            this.store.commit("setSketchboardFile", this.fileList);
+        },
+		setSceneList(data:any){
+			if(this.scene.value === data.value) return
+			this.scene = data
+			let generate:any = this.$refs.Generate
+			generate.sketchboardList = []
+			generate.searchPictureName = ''
+			this.openMenu = false
+		},
+		openPrintModel(){
+			if(this.openMenu)return
+			document.addEventListener('click',this.removePrintModel)
+			this.openMenu = true
+		},
+		removePrintModel(){
+			this.openMenu = false
+			document.removeEventListener('click',this.removePrintModel)
+		}
+    },
+});
+</script>
+<style lang="less" scoped>
+.sketchboard_upload_modal {
+	height: 100%;
+    display: flex;
+	.modal_left,.modal_right{
+		background: #f7f8fa;
+		border-radius: 3rem;
+		padding: 2rem 3rem;
+	}
+	.modal_left {
+		width: 71rem;
+		margin-right: 2rem;
+		display: flex;
+		flex-direction: column;
+		.switch_type_list {
+            display: flex;
+            align-items: center;
+            position: relative;
+
+            .switch_type_item {
+                display: flex;
+                align-items: center;
+                // padding: 0 2rem*1.2);
+                height: calc(4rem*1.2);
+                background: #fff;
+                border-radius: calc(0.8rem*1.2);
+                line-height: calc(4rem*1.2);
+                font-size: var(--aida-fsize1-8);
+                // margin-right: 2.2rem*1.2);
+                margin-right: calc(8rem*1.2);
+                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: calc(.3rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: calc(.6rem*1.2);
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+                &.select_swtich {
+                    color: #000;
+                    // font-weight: 900;
+                    transform: scale(1.15);
+                }
+                &.select_swtich::before {
+                    width: 100%;
+                }
+
+                .switch_icon {
+                    font-size: calc(1.8rem*1.2);
+                    margin-right: calc(0.8rem*1.2);
+                }
+            }
+			.printMenu{
+				margin-right: 0;
+				margin-left: 2rem;
+				margin-top: auto;
+				position: relative;
+				>div{
+					width: 14rem;
+					font-size: var(--aida-fsize1-6);
+					border: 0;
+					i{
+						transition: all .3s;
+						display: inline-block;
+						margin-left: 1rem;
+					}
+					.forbidden{
+						transform: rotate(180deg);
+					}
+				}
+				ul{
+					width: 14rem;
+				}
+			}
+			.switch_type_item:nth-child(3){
+				margin: 0;
+			}
+        }
+		.sketchboard_body {
+			// height: calc(100% - 5rem*1.2));
+			flex: 1;
+			padding-top: calc(2.5rem*1.2);
+			height: calc(30rem*1.2);
+			overflow-x: hidden;
+			border-right: 1px solid #e5e5e5;
+			display: flex;
+			flex-direction: column;
+        &.moodboard_body::-webkit-scrollbar {
+            display: none;
+        }
+        .upload_img_body {
+            height: calc(100% - 3rem*1.2);
+            overflow-y: auto;
+            margin-bottom: calc(1rem*1.2);
+			&.upload_img_body::-webkit-scrollbar {
+					display: none;
+				}
+        }
+
+       
+		.upload_file_item{
+			// margin: 0 2rem*1.2) 2rem*1.2) 0;
+			display: inline-block;
+			width: calc(25% - 2rem);
+			aspect-ratio: 1 / 1;
+			border: 1px solid #f5f5f5;
+			vertical-align: top;
+			position: relative;
+			img{
+				width: 100%;
+				height: 100%;
+			}
+			&.upload_component {
+                    border: none;
+                }
+               
+			.checked{
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				cursor: pointer;
+				display: none;
+				justify-content: center;
+				align-items: center;
+			}
+			&.modal_img_item:hover .checked{
+				display: flex;
+			}
+			.upload_file_item_content{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
+                position: relative;
+                cursor: pointer;
+                .upload_img{
+                    display: block;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+				&:hover .delete_like_file_block{
+						// display: block;
+						opacity: 1;
+					}
+               
+
+               
+            }
+			
+		}
+		.upload_max_tip {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: calc(1.4rem*1.2);
+			color: #030303;
+
+			.icon-zhuyi {
+				font-size: calc(1.6rem*1.2);
+				margin-right: calc(0.7rem*1.2);
+			}
+		}
+    }
+	}
+	
+	.modal_right{
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		.modal_layout,.modal_accomplish{
+			.modal_text{
+				font-size: var(--aida-fsize1-4);
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+		.modal_layout{
+			padding-bottom: 4.8rem;
+			.modal_img{
+				width: calc(40rem*1.2);
+				height: calc(5rem*1.2);
+				// overflow-x: hidden;
+				display: flex;
+				flex-direction: row;
+				overflow-y: hidden;
+				&.modal_img::-webkit-scrollbar {
+					display: none;
+				}
+				.mousewheel{
+					display: flex;
+				}
+				.modal_img_item{
+					width: calc(4rem*1.2);
+					height: calc(4rem*1.2);
+					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
+					position: relative;
+					text-align: center;
+					cursor: pointer;
+					overflow: hidden;
+					flex-shrink: 0;
+					img{
+						// width: 100%;
+						width: auto;
+						height: 100%;
+						object-fit: contain;
+					}
+					.checked{
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+						cursor: pointer;
+						display: none;
+						justify-content: center;
+						align-items: center;
+					}
+					&.modal_img_item:hover .checked{
+						display: flex;
+					}
+				}
+				
+			}
+		}
+		.modal_accomplish{
+			// margin-top: 2rem*1.2);
+			overflow-x: hidden;
+			height: calc(30rem*1.2);
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			position: relative;
+			.mark_loading{
+				position: absolute;
+				z-index: 99;
+			}
+            // overflow-x: hidden;
+			&.modal_accomplish::-webkit-scrollbar {
+                display: none;
+            }
+			.modal_text{
+				padding-top: calc(2rem*1.2);
+				padding-block:calc(2rem*1.2);
+			}
+			.input_box{
+				z-index: 1;
+				input{
+					&.forbidden{
+						cursor:not-allowed;
+					}
+				}
+			}
+			.modal_img{
+				flex: 1;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				align-content: flex-start;
+				position: relative;
+				.modal_imgItem{
+					margin: 1rem;
+					margin-bottom: 5rem;
+					display: inline-block;
+					// width: calc(10rem*1.2);
+					// height: calc(10rem*1.2);
+					width: calc(33.33% - 2rem);
+					aspect-ratio: 1 / 1;
+					border: 1px solid #f5f5f5;
+					position: relative;
+					cursor: pointer;
+					text-align: center;
+					overflow: hidden;
+					.moreBox{
+						position: absolute;
+						right: 1rem;
+						top: 1rem;
+						// opacity: 0;
+						width: 3.5rem;
+						height: 3.5rem;
+						transition: all 0.3s ease-in-out;
+					}
+					&.modal_imgItem:nth-child(even) {
+						margin-right: 0;
+					}
+					&:hover .delete_like_file_block{
+						display: block;
+						opacity: 1;
+					}
+					img{
+						object-fit: contain;
+						width: 100%;
+						height: 100%;
+					}
+					.pin_block{
+						position: absolute;
+						left: 1rem;
+						top: 1rem;
+						width: 8rem;
+						height: 3.5rem;
+						border-radius: 3rem;
+						background: rgba(0,0,0,.7);
+						color: #fff;
+						>label{
+							width: 100%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							cursor: pointer;
+							padding-right: 1rem;
+							padding-left: .2rem;
+						}
+						i{
+							width: 3rem;
+							height: 3rem;
+							border-radius: 50%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							font-size: 2rem;
+							background: #000;
+							&.noCheck{
+								background: inherit;
+								border: 2px solid #fff;
+							}
+						}
+						span{
+							font-size: 1.8rem;
+							font-weight: 600;
+						}
+					}
+					&.active{
+						opacity: 0.5;
+					// border: 2px solid;
+						border-radius: calc(1rem*1.2);
+						transform: scale(0.9);
+						// img {
+						// }
+						.operate_file_block{
+							pointer-events:none
+						}
+						.pin_block{
+							pointer-events:none
+						}
+						.delete_like_file_block{
+							pointer-events:none
+						}
+					}
+					
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/component/HomePage/index/editContent/collection/more.vue b/src/component/HomePage/index/editContent/collection/more.vue
new file mode 100644
index 00000000..a52a7bcd
--- /dev/null
+++ b/src/component/HomePage/index/editContent/collection/more.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="more">
+		<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
+		<div class="more_box" v-show="show">
+			<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
+				<i class="fi fi-rr-edit"></i>
+				{{ $t('more.edit') }}
+			</div>
+			<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
+				<i class="fi fi-bs-expand-arrows-alt"></i>
+				{{ $t('more.enlargement') }}
+			</div>
+			<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
+				<i class="fi fi-br-download"></i>
+				{{ $t('more.down') }}
+			</div>
+			<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
+				<span class="icon iconfont icon-shanchu operate_icon"></span>
+				{{ $t('more.delete') }}
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { downloadIamge } from "@/tool/util";
+
+export default defineComponent({
+    components:{
+    },
+	props:{
+		moreList:{type:Array,default:()=>[]},
+		item:{type:Object,default:()=>{}},
+		index:{type:Number,default:0},
+	},
+	emits:['deleteFile','scaleImage'],
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+			show:false
+		})
+		
+		const dataDom = reactive({
+		})
+		const openList = ()=>{
+			data.show = true
+			document.addEventListener('click',setShow)
+		}
+		const setShow = ()=>{
+			data.show = false
+			document.removeEventListener('click',setShow)
+		}
+		const setMore = (str:any)=>{
+			if(str == 'delete'){
+				emit("deleteFile",props.item);
+			}else if(str == 'edit'){
+				emit("scaleImage",props.index);
+			}else if(str == 'down'){
+				console.log(props.item);
+				downloadIamge(props.item.url)
+			}else if(str == 'enlargement'){
+				emit("scaleImage",props.index);
+			}
+			setShow()
+		}
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			openList,
+			setMore,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .more{
+		position: relative;
+		width: 100%;
+		height: 100%;
+		> .fi{
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: rgba(0,0,0,.7);
+			color: #fff;
+			border-radius: .6rem;
+		}
+		> .more_box{
+			position: absolute;
+			background: rgba(0,0,0,.7);
+			right: 0;
+			margin-top: .5rem;
+			color: #fff;
+			border-radius: .6rem;
+			padding: 1rem 0;
+			font-size: 1.4rem;
+			// width: 12rem;
+			text-align: left;
+			> .item{
+				display: flex;
+				padding: 1rem 1.3rem;
+				> i,> span{
+					margin-right: 1rem;
+				}
+				&:hover{
+					background: rgba(0,0,0,.3);
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/HomePage/index/editContent/design/index.vue b/src/component/HomePage/index/editContent/design/index.vue
new file mode 100644
index 00000000..47fc4921
--- /dev/null
+++ b/src/component/HomePage/index/editContent/design/index.vue
@@ -0,0 +1,2066 @@
+<template>
+	<div class="designPage">
+		<div class="page_content">
+			<div class="userSystem" v-if="userDetail.systemList.indexOf(1) == -1">
+				You can use these features only after becoming a regular user~
+			</div>
+			<div class="page_content_body">
+				<div class="designPage_body">
+					<div class="designPage_left" ref="hidden">
+						<div class="designPage_left_content" :class="{'active':(domHidden)}">
+							<!-- 空状态 start-->
+							<div class="home_left_null" v-show="!isHaveReviewCollection">
+								<div>
+									<div id="Guide_1_1" class="new_collection_button Guide_1_1" @click="startNewCollection()">
+										{{ $t('HomeView.GetStarted') }}
+									</div>
+								</div>
+								<div class="is_finish_loading" v-show="isFinishLoading">
+									<a-spin size="large"></a-spin>
+								</div>
+							</div>
+							<!-- 空状态 end-->
+
+							<!-- 有图状态 start-->
+							<div class="home_left_info" v-show="isHaveReviewCollection">
+								<div class="left_info_top">
+									<!-- <div class="button_second" @click="startNewCollection()">
+										{{ $t('HomeView.Start') }}
+									</div> -->
+									<div class="gallery_btn white button_margin" @click="recollection()">
+										{{ $t('HomeView.Edit') }}
+									</div>
+									<div class="gallery_btn white button_margin" @click="resetCollection()">
+										{{ $t('HomeView.Reset') }}
+									</div>
+								</div>
+								<div class="left_info_content scroll_style">
+									<div class="left_info_content_body" ref="collection_canvas">
+										<NewCollectionReview id="collectionReview"></NewCollectionReview>
+									<!-- <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection> -->
+
+									</div>
+								</div>
+								<div v-show="isMannequinShow" class="left_info_hint">
+									<span class="icon iconfont icon-zhuyi"></span>
+									<span>{{ $t('HomeView.masnnequinHint') }}</span>
+								</div>
+							</div>
+							<!-- 有图状态 end-->
+						</div>
+						<div class="designPage_left_bottom" @click="setShowHide('domHidden')" >
+							<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
+						</div>
+					</div>
+					<div class="designPage_right">
+						<div class="right_top">
+						<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
+							<div class="right_top_left">
+								<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
+									{{ $t('HomeView.Design') }}
+								</div>
+								<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
+									@click="resDesignCollection()">
+									{{ $t('HomeView.Redesign') }}
+								</div>
+								<div class="silder button_margin_14" v-show="designCollectionId">
+									<div class="text">Small</div>
+										<a-slider
+											class="system_silder"
+											v-model:value="collValue"
+											:min="minCollValue"
+											:max="maxCollValue-1"
+											@afterChange="setSystemDesigner(500)"
+											:tooltipVisible="false"
+										>
+										</a-slider>
+									<div class="text">Big</div>
+								</div>
+								<div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
+									<!-- {{ $t('HomeView.Export') }} -->
+									{{$t('HomeView.FinalizeCollection')}}
+								</div>
+							</div>
+						</div>
+						<div class="right_content_block_box">
+							<div class="right_content_block" @mouseenter="mouseenter($event,'like')">
+								
+
+								<div class="right_content_body">
+									<div class="right_content_header">
+										<div class="content_header_left">
+											<i class="fi fi-rs-comments"></i><span class="content_header_des">
+												{{ $t('HomeView.SelectedDesign') }}
+												</span>
+										</div>
+									</div>
+									<div class="right_content_img_block scroll_style active">
+										<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
+										
+											<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
+												v-for="(design, index) in likeDesignCollectionList" :key="design.id"
+												@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId,'like')" 
+												@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId,'like')"
+												@click="designDetail(
+														design,
+														index,
+														likeDesignCollectionList,
+														'like'
+													)">
+												<div class="content_img_flex">
+													<img class="content_img" :src="design.designOutfitUrl"
+														:key="design.designOutfitUrl" designType="like" :index="index"/>
+												</div>
+												<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
+													dislikeDesignCollection(
+														design,
+														index
+													)">
+												</div>
+											</div>
+											
+										
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="right_content_block recycleBin" @mouseenter="mouseenter($event,'recycle')" :class="{recycleBinShow:recycleDomHidden}">
+								<div class="right_content_body">
+									<div class="right_content_header">
+										<div class="content_header_left">
+											<i class="fi fi-rs-comments"></i><span class="content_header_des">
+												{{ $t('HomeView.GeneratedDesign') }}
+												</span>
+										</div>
+									</div>
+									<div class="right_content_img_block scroll_style Guide_1_17"  :class="[driver__.driver?'showEvents':'']">
+										<div class="right_content_img_item" ref="collItemDom" designType="dislike" :index="0">
+											<!-- <div class="content_img_block" v-for="(
+													design, index
+												) in deleteDesignCollectionList" :key="design?.designItemId">
+													<div class="content_img_flex" 
+														@click="
+														designDetail(
+															design,
+															index,
+															designCollectionList,
+															'dislike'
+														)">
+														<img class="content_img" :src="design.designOutfitUrl" />
+													</div> 
+													<div class="Dustbin" @click.stop="
+														cancelDeleteDesign(index)">
+														Dustbin
+													</div>
+											</div> -->
+											<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
+												<a-spin size="large" class="content_img_flex"></a-spin>
+											</div>
+											<div class="content_img_block content_img_GetWidth" v-for="(
+													design, index
+												) in designCollectionList" :key="design?.designItemId" :style="collStyle">
+													<div class="content_img_flex" 
+													:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
+													@mousedown.stop="designMousedown(getMousePosition($event,false),design.designItemId,'disLike')" 
+													@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId,'disLike')"
+														@click="
+														designDetail(
+															design,
+															index,
+															designCollectionList,
+															'dislike'
+														)">
+														<img class="content_img" :src="design.designOutfitUrl" designType="dislike" :index="index"/>
+													</div> 
+													<div class="icon iconfont icon-jushoucang icon_like" :class="[driver__.driver?index == 0?driver__.index == 32?'Guide_img showEvents':'':'':'']" @click.stop="
+														likeDesignCollection(
+															design,
+															index
+														)
+														">
+													</div>
+													<i class="fi fi-rr-trash icon_delete" @click.stop="
+														setDeleteDesign(design,index)">
+													</i>
+											</div>
+											
+										</div>
+									</div>
+								</div>
+								
+							</div>
+							<div class="designPage_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
+								<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
+							</div>
+						</div>
+						
+					</div>
+				</div>
+			</div>
+		</div>
+		<KeepAlive>
+			<CollectionModal :getDesignData="getDesignData" ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
+		</KeepAlive>
+		<productImg ref="productImg" @setTask="setTask"></productImg>
+		<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
+		<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
+
+		<!-- 导出缩略图的蒙层 start-->
+		<div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div>
+		<!-- 导出缩略图的蒙层 end-->
+
+		<!-- design collection的进度蒙层  start-->
+
+		<!-- <div class="progress_mark" v-show="showDesignMark">
+			<div class="mark_content Guide_1_16">
+				<a-progress type="circle" :percent="designProgress" strokeColor="#341e57" :width="200" />
+				<div>
+					<a-spin :indicator="indicator" />
+				</div>
+			</div>
+		</div> -->
+		<!-- design collection的进度蒙层  end-->
+		<affiche ref="affiche"></affiche>
+		<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
+
+	</div>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount, toRef} from "vue";
+// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+// import HeaderComponent from "@/component/HomePage/Header.vue";
+import CollectionModal from "@/component/HomePage/collectionModal.vue";
+import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
+import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
+import productImg from "@/component/HomePage/productImg.vue";
+import generalCanvas from "@/component/modules/generalCanvas.vue";
+import affiche from "@/component/HomePage/affiche.vue";
+import DesignDetail from "@/component/Detail/DesignDetail.vue";
+import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
+import html2canvas from "html2canvas";
+import { message,Modal } from "ant-design-vue";
+import { useStore } from "vuex";
+import { Https } from "@/tool/https";
+import { openGuide,driverObj__ } from "@/tool/guide";
+import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
+// import JSZip, { forEach } from "jszip";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import i18n from "@/lang";
+import { useI18n } from "vue-i18n";
+import { getMousePosition } from "@/tool/mdEvent";
+import { removeClass } from "element-plus/es/utils";
+const FileSaver = require("file-saver");
+
+export default defineComponent({
+	name: "homePage",
+	components: {
+		// HeaderComponent,
+		CollectionModal,
+		NewCollectionReview,
+		DesignDetail,
+		ExportNewCoolection,
+		affiche,
+		productImg,
+		generalCanvas,
+		DesignDetailcopy
+	},
+	emits:['setTask'],
+	 activated() {
+  },
+  deactivated() {
+  },
+	setup(props,{emit}) {
+		const store = useStore();
+		let likeDesignCollectionList: any = computed(() => {
+			return store.state.HomeStoreModule.likeDesignCollectionList;
+		});
+		let deleteDesignCollectionList: any = computed(() => {
+			return store.state.HomeStoreModule.deleteDesignCollectionList;
+		});
+		let designCollectionList: any = computed(() => {
+			return store.state.HomeStoreModule.designCollectionList;
+		});
+		let userDetail= computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
+		let bindEmail= computed(()=>{
+			return store.state.UserHabit.bindEmail
+		})
+		let userGroupId: any = computed(() => {
+			return store.state.HomeStoreModule.userGroupId;
+		}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
+		let setPortfolio = (data:any)=>{
+			portfolio.value = data
+		}
+		provide('setPortfolio',setPortfolio)
+		let designCollectionId: any = computed(() => {
+			return store.state.HomeStoreModule.designCollectionId;
+		});
+		let designId: any = computed(() => {
+			return store.state.HomeStoreModule.designId;
+		});
+		let contentImgMax = {
+			width:'',
+			height:'',
+		}
+		let contentImg = {
+			width:'',
+			height:'',
+		}
+		let exportNav = ref([
+			{
+				name:useI18n().t('HomeView.moodboard'),
+				change:true,
+				noChange:true,
+				value:'moodboardFiles',
+			},{
+				name:useI18n().t('HomeView.printboard'),
+				change:true,
+				noChange:false,
+				value:'printboardFiles',
+			},{
+				name:useI18n().t('HomeView.colorboard'),
+				change:true,
+				noChange:false,
+				value:'colorBoards',
+			},{
+				name:useI18n().t('HomeView.sketchboard'),
+				change:true,
+				noChange:false,
+				value:'sketchboardFiles',
+			},{
+				name:useI18n().t('HomeView.mannequins'),
+				change:true,
+				noChange:true,
+				value:'',
+			},
+		])
+		provide('exportNav',exportNav)
+		let isShowOperate = ref(false)
+		let {t} = useI18n()
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		})
+		let likeDesignItemIdList = ref([])
+		let workspacePosition:any = computed(()=>{
+			return store.state.Workspace.workspacePosition
+		})
+		let allBoardData:any = computed(()=>{
+			return store.state.UploadFilesModule.allBoardData})
+		let isMannequinShow = ref(false)
+		let chooseIsDesign:any = computed(()=>{
+			return store.state.UploadFilesModule.chooseIsDesign})
+		let portfolio:any = ref({})
+		provide('portfolio',portfolio)
+		let showDesignMark = ref(false)
+		let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
+		
+		const collItemSize = reactive({
+			collValue:( sessionStorageCollValue>= 20? 10:sessionStorageCollValue) || 3,
+			minCollValue:4,
+			maxCollValue:20,
+			likeStyle:{
+				width:'240px',
+				height:'370px',
+				position:'absolute',
+			},
+			collStyle:{
+				width:'0',
+				height:'0',
+				position:'absolute',
+			},
+			itemStyle:{
+				width:0,
+				height:0,
+			},
+			scale:[1,1.54],
+			collTime:null as any,
+			isMove:false,
+		})
+		const posiitonData = ref({
+			likeElList:[] as any,
+			likeSelectIndex:0,
+			generateElList:[] as any,
+			generateSelectIndex:0,
+		})
+		let likeItemDom = ref()
+		let collItemDom = ref()
+		let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
+		let recycleDomHidden = ref(false);
+		if(designCollectionList.value.length>0){
+			recycleDomHidden.value = JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false
+		}
+		let getDesignTime = null as any;
+		const setSystemDesigner = (time:any)=>{
+			clearTimeout(collItemSize.collTime)
+			collItemSize.collTime = setTimeout(()=>{
+			nextTick(()=>{
+				let parentWidth = likeItemDom.value.parentElement.offsetWidth
+				collItemSize.minCollValue = collItemSize.maxCollValue - Math.round(likeItemDom.value.parentElement.offsetWidth/120)
+				collItemSize.collValue = collItemSize.collValue<collItemSize.minCollValue?collItemSize.minCollValue:collItemSize.collValue
+				let value = collItemSize.maxCollValue - collItemSize.collValue
+				collItemSize.itemStyle.width = (parentWidth - (value * 10)) / value
+				collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
+				
+				collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
+				collItemSize.collStyle.height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1] + 'px'
+
+				collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
+				collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
+				let elArr = likeItemDom.value.children
+				posiitonData.value.likeElList = []
+				for(let i = 0;i < elArr.length;i++){
+					posiitonData.value.likeElList.push({
+						el: elArr[i], 
+						sort: likeDesignCollectionList.value[i].sort - 1, 
+						index: i,
+						userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId
+					});
+				}
+				moveItem('like')
+			})
+			},time)
+		}
+		const setDesignItemStyle = ()=>{
+			posiitonData.value.generateElList = []
+			let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
+			designCollectionList.value.forEach((item:any,index:any)=>{
+				posiitonData.value.generateElList.push({
+					el: elArr[index], 
+					sort: designCollectionList.value.length - index - 1, 
+					index: designCollectionList.value.length - index - 1,
+					userLikeSortId:item.designItemId
+				});
+			})
+			
+		}
+
+		const setDeleteDesign = (value:any,index:any)=>{
+			console.log(value);
+			
+			store.commit("setDeleteDesignCollectionList",index);
+			let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
+			posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
+			
+			posiitonData.value.generateElList.forEach((item:any)=>{
+				if(item.sort > collItem.sort){
+					item.sort-=1
+				}
+			})
+			console.log(posiitonData.value.likeElList);
+			
+			moveItem('')
+		}
+		const cancelDeleteDesign = (index:any)=>{
+			store.commit("cancelDeleteDesignCollectionList",index);
+		}
+		const designMousedown = (e:any,Id:number,str:string)=>{
+			if(str != 'like' && showDesignMark.value) return
+			let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
+			let item:any  = arr.filter((item:any)=>item.userLikeSortId == Id)[0]
+			item.el.style.zIndex = 2;
+			item.el.style.transition = 'all 0s';
+			let startX = e.clientX,
+			startY = e.clientY,
+			left = item.el.offsetLeft,
+			top = item.el.offsetTop;
+			collItemSize.isMove = false
+			let moveFun = (e:any) => {
+				collItemSize.isMove = true
+				let X = e.clientX - startX + left;
+				let Y = e.clientY - startY + top;
+				item.el.style.left = `${X}px`;
+				item.el.style.top = `${Y}px`;
+				reRange(item, X, Y,str);
+			};
+			let mouseUpFun = ()=>{
+				document.removeEventListener('mousemove',mouseMove)
+				document.removeEventListener('touchmove',touchmove)
+
+				document.removeEventListener('mouseup',mouseUpFun) 
+				document.removeEventListener('touchend',mouseUpFun) 
+				item.el.style.zIndex = 1;
+				item.el.style.transition = 'top,left .5s';
+				moveItem(str);
+				if(str == 'like')sortDesignCollection()
+			}
+			let mouseMove = function(event:any){
+				let e = getMousePosition(event,false)
+				moveFun(e)
+			}
+			let touchmove = function(event:any){
+				let e = getMousePosition(event,true)
+				moveFun(e)
+			}
+
+			document.addEventListener('mousemove',mouseMove)
+			document.addEventListener('touchmove',touchmove)
+
+			document.addEventListener('mouseup',mouseUpFun) 
+			document.addEventListener('touchend',mouseUpFun) 
+		}
+		//排序  从大到小
+		const sortDesignCollection = ()=> {
+			let arrData:any = []
+			likeDesignCollectionList.value.forEach((likeItem:any)=>{
+			    let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
+				likeItem.sort = item.sort + 1
+				let obj = {
+					id:likeItem.userLikeSortId,
+					"sort": item.sort + 1,
+					"userLikeGroupId": likeItem.userLikeGroupId,
+					"userLikeId": likeItem.id
+				}
+				arrData.push(obj)
+			})
+			let data = {
+				"userLikeGroupId": userGroupId.value,
+				"userLikeSortList": arrData
+			}
+			Https.axiosPost(Https.httpUrls.designSort, data).then((rv:any)=>{
+			})
+		}
+		const mouseenter = (e:any,str:string)=>{
+		}
+		const reRange = (item:any, x:number, y:number,str:string)=>{
+			let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
+			let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
+			let value = collItemSize.maxCollValue - collItemSize.collValue
+			let width,height,num
+			if(str == 'like'){
+				num = value
+				width = collItemSize.itemStyle.width
+				height = collItemSize.itemStyle.height
+			}else{
+				num = 3
+				width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
+				height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
+			}
+
+			let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
+			moveIndex = elList.length - 1 - moveIndex
+			moveIndex = moveIndex < 0 ? 0 : moveIndex;
+			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
+			if(moveIndex != index){
+				if(str == 'like'){
+					posiitonData.value.likeSelectIndex = moveIndex;
+				}else{
+					posiitonData.value.generateSelectIndex = moveIndex;
+				}
+				let currentSort = item.sort;
+				for(let i = 0;i < elList.length;i++){
+					if(currentSort < moveIndex){
+						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
+							elList[i].sort -= 1;
+						};
+					}else if(currentSort > moveIndex){
+						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
+							elList[i].sort += 1;
+						};
+					}
+				};
+				elList[item.index].sort = moveIndex;
+				moveItem(str);
+			}
+		}
+		const setLikeDislLike = (str:string,value:any)=>{
+			posiitonData.value.likeSelectIndex = 0
+			nextTick(()=>{
+				if(str == 'like'){
+					let elArr = likeItemDom.value.children
+					posiitonData.value.likeElList.push({
+						el: elArr[0], 
+						sort: value.sort - 1, 
+						index: value.sort - 1,
+						userLikeSortId:value.userLikeSortId
+					});
+					let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
+					posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
+					
+					posiitonData.value.generateElList.forEach((item:any)=>{
+						if(item.sort > collItem.sort){
+							item.sort-=1
+						}
+					})
+				}else if(str == 'disLike'){
+					let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
+					posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
+					posiitonData.value.likeElList.forEach((item:any)=>{
+						if(item.sort > value.sort - 1){
+							item.sort-=1
+						}
+					})
+					posiitonData.value.generateElList.push({
+						el: elArr[elArr.length-1], 
+						sort: posiitonData.value.generateElList.length, 
+						index: posiitonData.value.generateElList.length,
+						userLikeSortId:value.designItemId
+					});
+				}
+				moveItem('like');
+				// moveItem('disLike');
+			})
+		}
+		//排列
+		const moveItem = (str:any)=>{
+			let elLikeList = posiitonData.value.likeElList
+			let generateElList = posiitonData.value.generateElList
+			let value = collItemSize.maxCollValue - collItemSize.collValue
+			let width,height
+			width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
+			height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
+			 
+			// let num = str == 'like'?value:3
+			for(let i = 0;i < elLikeList.length;i++){
+				elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
+				elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
+			}
+			for(let i = 0;i < generateElList.length;i++){
+				generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
+				generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
+			}
+		}
+		return {
+			store,
+			likeDesignCollectionList,
+			deleteDesignCollectionList,
+			designCollectionList,
+			userGroupId,
+			userDetail,
+			bindEmail,
+			setPortfolio,
+			designCollectionId,
+			designId,
+			contentImgMax,
+			contentImg,
+			exportNav,
+			isShowOperate,
+			t,
+			driver__,
+			likeDesignItemIdList,
+			workspacePosition,
+			allBoardData,
+			isMannequinShow,
+			chooseIsDesign,
+			portfolio,
+			setSystemDesigner,
+			setDesignItemStyle,
+			showDesignMark,
+			...toRefs(collItemSize),
+			likeItemDom,
+			collItemDom,
+			domHidden,
+			recycleDomHidden,
+			getDesignTime,
+
+			setDeleteDesign,
+			cancelDeleteDesign,
+			designMousedown,
+			sortDesignCollection,
+			getMousePosition,
+			mouseenter,
+			setLikeDislLike,
+			posiitonData,
+			moveItem
+		};
+	},
+	data() {
+		return {
+			isHaveReviewCollection: false,
+			isFinishLoading: false,
+			isShowMark: false, //导出的loading蒙层
+			indicator: h(LoadingOutlined, {
+				style: {
+					fontSize: "4.8rem",
+					marginTop: "3rem",
+					color:"#341e57",
+				},
+				spin: true,
+			}),
+			designProgress: 0,
+			startDesignType: "design", //设计类型 design 和 resdesign
+			disLikeLoading: false, //不喜欢防抖
+			likeLoading: false, //喜欢防抖
+			dragIdx:0,
+			designRandom:'',
+			detailDestroy:false,//销毁detail
+			designFailure:{
+				num:0,
+				currentNum:0,
+			},//获取20次都为空的话就停止获取
+			
+		};
+	},
+	watch: {
+		workspacePosition:{
+			handler(newVal:any,oldVal:any){
+				this.isMannequin()
+			},
+		},
+		allBoardData:{
+			handler(newVal:any,oldVal:any){
+				this.isMannequin()
+			},
+		},
+	},
+	
+	beforeUnmount(){
+		clearTimeout(this.getDesignTime);
+		sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
+		sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
+		sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
+		this.sortDesignCollection()
+		window.removeEventListener('resize', this.setDesignItemPosition)
+
+	},
+	async mounted() {
+		
+		// if(JSON.parse( getCookie('isFirst') as any)){
+		// }
+		let test:any = getCookie('isTest')
+        let isTest =JSON.parse(test)
+		this.store.dispatch('get_clothingType')
+		//判断账号剩余时间是否太短
+		let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
+	
+		if(!getCookie('isBeginner') || this.userDetail.systemUser == 0)return
+		// if(this.store.state.UserHabit.bindEmail.isBindEmail)return
+		if(!isModalOne){//判断是否是试用用户
+		// if(!isTest && !isModalOne){//判断是否是试用用户
+			await new Promise(async (resolve) => {
+				if(isTest){
+					openGuide()
+					resolve('')
+				}else{
+					await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv: any) => {
+						if (rv) {
+							let dateNow = Date.now()
+							let date:any =  new Date(dateNow)
+							let rvDate:any = new Date(rv);
+							let diffInMilliseconds = Math.abs(date - rvDate); // 获取时间差的毫秒数
+							let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
+							let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
+							let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
+							if(days < 5){
+								setTimeout(() => {
+									let text = {
+										str:`${this.t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${this.t('HomeView.jsContent8')}</a>`,
+										title:`${this.t('HomeView.jsContent7')}`,
+									}
+									this.affiche(text)
+								}, 500);
+							}else{
+								openGuide()
+							}
+							resolve('')
+						}else{
+							openGuide()
+							resolve('')
+						}
+					})
+				}
+				
+
+			})
+		}else if(!isModalOne && isTest){
+		}else{
+			openGuide()
+		}
+		let noRefresh = this.$route.params.noRefresh; //判断是否主动刷新还是路由跳转过来的 true 路由跳转过来的
+		window.addEventListener('beforeunload', (event)=>{
+			this.store.commit("clearAllCollection");
+		});
+		if (this.$route.name == "homePage") {
+			let colorBoards =
+				this.store.state.UploadFilesModule.allBoardData.colorBoards ||
+				[];
+			if (colorBoards.length) {
+				this.isHaveReviewCollection = true;
+			}
+		} else {
+			// this.store.commit("setUserGroupId", this.$route.params.id);
+			// this.store.commit("clearAllCollection");
+		}
+		if (this.$route.params.id) {
+			if(this.$route.params.type == 'History'){
+				this.getHistoryChoose(this.$route.params.id, "normal");
+			}else if(this.$route.params.type == 'Works'){
+				this.getWorks(this.$route.params.id, "normal");
+			}
+			this.store.commit("setDesignCollectionList",[]);
+		} else {
+			// this.store.commit("clearAllData");
+		}
+		// let dataa:any = {
+		// 	designItemId: 63094,
+		// 	designItemUrl: null,
+		// 	designOutfitId: 62798,
+		// 	designOutfitUrl:''
+		// }
+		// let designDetail: any = this.$refs.designDetail;
+		// 	let data = {
+		// 		design: dataa,
+		// 		index: 0,
+		// 		collectionList: [],
+		// 		type: 'dislike',
+		// 	};
+		// 	designDetail.showDesignDetailModal(data);
+		window.addEventListener('resize', this.setDesignItemPosition)
+		this.setSystemDesigner(0)
+		this.setDesignItemStyle()
+	},
+	directives:{
+		mousewheel:{
+			mounted (el) {
+				let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
+				let dom:any = document.getElementsByClassName('right_content_body')
+				let mouseover = ()=>{
+					bodyDom.classList.add('active')
+				}
+				let mouseleave = ()=>{
+					bodyDom.classList.remove('active')
+				}
+				dom.forEach((item:any) => {
+					item.addEventListener('mouseover',mouseover)
+					item.addEventListener('mouseleave',mouseleave)
+				});
+				
+			
+				el.addEventListener('wheel',(e:WheelEvent)=>{
+					let num = 0
+					if(e.deltaY > 0){
+						num = 25
+					}else{
+						num = -25
+					}
+					el.scrollBy(num, 0);
+				},{ passive: true })
+			}
+		}
+	},
+	methods: {
+		// addTeam (team:any) {
+		// this.likeDesignCollectionList.push(team)
+		// },
+		setDesignItemPosition(){
+			this.setSystemDesigner(0)
+			this.setDesignItemStyle()
+		},
+		affiche(text:any){
+			nextTick(()=>{
+			    let affiche:any = this.$refs.affiche
+				affiche.init(text)
+			})
+			
+			// affiche.afficheMask = true
+		},
+		
+		//判断模特和当前start的sketch是否匹配
+		isMannequin(){
+			this.isMannequinShow = false
+			let num = 0
+			this.allBoardData?.sketchboardFiles?.forEach((sketchItem:any) => {
+				
+				this.workspacePosition.forEach((positionItem:any) => {
+
+					if(positionItem.value == sketchItem.categoryValue){
+						num ++ 
+					}
+				});
+				
+			});
+			if(this.allBoardData?.sketchboardFiles?.length && this.allBoardData?.sketchboardFiles?.length>0){
+				if(num != this.allBoardData?.sketchboardFiles?.length){
+					this.isMannequinShow = true
+				}
+			}else{
+				this.isMannequinShow = false
+			}
+		},
+		formatter(value: number) {
+			return `${value}%`;
+		},
+		//开始设计collection
+		startNewCollection() {
+			let collectionModal: any = this.$refs.collectionModal;
+			this.store.commit("clearAllData");
+			collectionModal.changeCollectionModal(true);
+			if(this.driver__.driver){
+				nextTick().then(()=>{
+					driverObj__.moveNext();
+				})
+			}
+		},
+
+		//recollection
+		recollection() {
+			let collectionModal: any = this.$refs.collectionModal;
+			this.store.commit("clearAllData");
+			collectionModal.changeCollectionModal(true);
+			collectionModal.recollection();
+		},
+
+		resetCollection(){
+			let _this = this
+			Modal.confirm({
+				title: this.t('HomeView.jsContent9'),
+				icon: createVNode(ExclamationCircleOutlined),
+				okText: 'Yes',
+				cancelText: 'No',
+				mask:false,
+				centered:true,
+				onOk() {
+					_this.store.commit("clearAllData");
+					_this.store.commit("clearAllCollection");
+					_this.store.commit("setAllBoardDataChoose",{});
+					_this.store.commit("clearShowSketchboard",{});
+					_this.isHaveReviewCollection = false
+				}
+			});
+		},
+		//完成设计
+		finishCollection() {
+			this.isHaveReviewCollection = true;
+			this.isFinishLoading = false;
+		},
+		getContainer() {
+			return document.querySelector("#system_silder");
+		},
+
+		//设计新的collection
+		designNewCollection() {
+			if(!this.chooseIsDesign.value){
+				message.info(this.t('HomeView.jsContent10'));
+				return
+			}
+			let { colorBoards } =
+				this.store.state.UploadFilesModule.allBoardData;
+			if (!colorBoards || colorBoards?.length < 1) {
+				message.info(
+					this.t('HomeView.jsContent1')
+				);
+				return;
+			}
+			clearTimeout(this.getDesignTime);
+			let data = this.getDesignData("");
+			if(this.driver__.driver){
+				nextTick().then(()=>{
+					driverObj__.moveNext();
+				})
+			}
+			this.isShowMark = true
+			this.store.commit("setLikeDesignCollectionList", []);
+			Https.axiosPost(Https.httpUrls.designCollection, data)
+			
+				.then((rv: any) => {
+					if (rv) {
+						let value = {
+							objectSignList:data.requestIdList.join(),
+							requestId:rv
+						}
+						this.posiitonData.generateElList.forEach((item:any) => {
+							item.sort -= 1
+						})
+						this.moveItem('disLike')
+
+						this.getDesignResult(value,'newDesign')
+						this.startDesignType = "design";
+						this.posiitonData.likeSelectIndex = 0
+						this.posiitonData.likeElList = []
+					}
+					this.isShowMark = false;
+				})
+				.catch((res) => {
+					this.isShowMark = false;
+				})
+				// this.getDesignProcess(this.designRandom);
+		},
+		getDesignResult(data:any,str:any){
+			this.showDesignMark = true
+			this.recycleDomHidden = true
+			this.setSystemDesigner(0)
+			Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
+			.then(async (rv)=>{
+				if(rv.designCollectionItems){
+					let arr:any = []
+					if(this.designCollectionList.length == 0){
+						arr.push(...rv.designCollectionItems)
+					}else{
+						arr = rv.designCollectionItems.filter((itemA:any) => 
+							!this.designCollectionList.some((itemB:any) => itemA.objectSign === itemB.objectSign)
+						);
+					}
+					for (let index = 0; index < arr.length; index++) {
+						const item = arr[index];
+						await new Promise((resolve, reject) => {
+							setTimeout(() => {
+								this.designCollectionList.unshift(item)
+								nextTick().then(()=>{
+									let dom:any = this.$refs.collItemDom
+								    let elArr:any = dom.querySelectorAll(".content_img_GetWidth");
+									this.posiitonData.generateElList.push({
+										el: elArr[0], 
+										sort: elArr.length - 2, 
+										index: elArr.length - 1,
+										userLikeSortId:item.designItemId
+									});
+									this.moveItem('disLike')
+								})
+								resolve('')
+							}, 200);
+						})
+					}
+				}
+				if(rv.unfinishedList.length == 0){
+					this.showDesignMark = false
+					if(str == 'newDesign'){
+						if(rv.designCollectionItems){
+							this.store.commit("deleteUserGroupId");
+							this.store.commit(
+								"setDesignCollectionId",
+								rv.collectionId
+							);
+							this.store.commit("setDesignId", rv.designId);
+						}
+					}else{
+						// this.designProgress = 0,
+						this.store.commit("setDesignId", rv.designId);
+					}
+					nextTick().then(()=>{
+						driverObj__.moveNext();
+						this.posiitonData.generateElList.forEach((item:any) => {
+							item.sort += 1
+						});
+						this.moveItem('disLike')
+
+					})
+				}else{
+					data.objectSignList = rv.unfinishedList.join()
+					this.getDesignTime = setTimeout(()=>{
+						if(this.designFailure.currentNum == rv.unfinishedList.length){
+							this.designFailure.num++
+							if(this.designFailure.num >= 10)data.objectSignList=''
+						}else{
+							this.designFailure.num = 0
+						}
+						this.getDesignResult(data,str)
+					},1000)
+				}
+			}).catch(()=>this.showDesignMark = false)
+		},
+		//重新设计collection
+		resDesignCollection() {
+			let { colorBoards } =
+				this.store.state.UploadFilesModule.allBoardData;
+			if (!colorBoards || colorBoards?.length < 1) {
+				message.info(
+					this.t('HomeView.jsContent2')
+				);
+				return;
+			}
+			if(this.driver__.driver){
+				nextTick().then(()=>{
+					driverObj__.moveNext();
+				})
+			}
+			clearTimeout(this.getDesignTime);
+			this.isShowMark = true
+			let data = this.getDesignData(this.designCollectionId);
+			Https.axiosPost(Https.httpUrls.reDesignCollection, data)
+				.then((rv: any) => {
+					if (rv) {
+						let value = {
+							objectSignList:data.requestIdList.join(),
+							requestId:rv
+						}
+						this.posiitonData.generateElList.forEach((item:any) => {
+							item.sort -= 1
+						})
+						this.moveItem('disLike')
+						this.getDesignResult(value,'resDesign')
+						this.startDesignType = "resDesign";
+						this.isShowMark = false
+					}
+				})
+				.catch((res) => {
+					this.isShowMark = false;
+				});
+				// this.getDesignProcess(this.designRandom);
+
+		},
+ 
+		getDesignData(designCollectionId: any) {
+			let {
+				moodboardFiles,
+				printboardFiles,
+				disposeMoodboard,
+				// generatePrintFiles,
+				colorBoards,
+				sketchboardFiles,
+				marketingSketchFiles,
+				moodboardPosition,
+			} = this.store.state.UploadFilesModule.allBoardData;
+			this.randomNum()
+			let workspace = this.store.state.Workspace.workspace
+			let data: any = {
+				colorBoards: this.getColorBoard(colorBoards),
+				// marketingSketchs: this.getBoardId(marketingSketchFiles),
+				moodBoards: this.getBoardId(moodboardFiles),
+				printBoards: this.getPrintId(printboardFiles),
+				sketchBoards: this.getSkecthBoard(sketchboardFiles),
+				moodboardPosition: JSON.stringify(moodboardPosition),
+				switchCategory: !workspace.overallSingle ?"": workspace.position,
+				singleOverall: !workspace.overallSingle ? "overall" : "single",
+				systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
+				// templateId: 3377,
+				templateId: workspace.mannequinId?workspace.mannequinId:'',
+				modelType:workspace.mannequinType,
+				modelSex:workspace.sex,
+				moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
+				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+				processId:this.designRandom
+			};
+			// data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
+			this.setSystemDesigner(0)
+			this.designFailure = {
+				num:0,
+				currentNum:0,
+			}
+			let isLoad = false
+			if(designCollectionId == -1){
+				isLoad = true
+			} else if (designCollectionId) {
+				data.collectionId = designCollectionId;
+			}
+			if(!isLoad){
+				// this.designProgress = 0;
+				// this.isShowMark = true;
+			}
+			let arr = []
+			for (let index = 0; index < 8; index++) {
+				let floor = Math.floor(Math.random() * 90000000) + 10000000
+				arr.push(floor)
+			}
+			data.requestIdList = arr
+			return data;
+		},
+
+		//deisgn的进度
+		getDesignProcess(num:any) {
+			Https.axiosGet(Https.httpUrls.designProcess,{params:{processId:num}}).then((rv: any) => {
+				if (rv) {
+					
+				}
+				if (this.showDesignMark) {
+					this.designProgress = rv;
+					if(rv == 100){
+						setTimeout(() => {
+							this.showDesignMark = false 
+							this.designProgress = 0
+							if(this.driver__.driver){
+								nextTick().then(()=>{
+									driverObj__.moveNext();
+								})
+							}
+						}, 500);
+
+					}
+					setTimeout(() => {
+						this.getDesignProcess(num);
+					}, 500);
+				}
+			})
+			// Https.axiosPost(Https.httpUrls.designProcess, {}).then(
+			// 	(rv: any) => {
+			// 		if (rv < 1 && this.showDesignMark) {
+			// 			this.designProgress = rv * 100;
+			// 			setTimeout(() => {
+			// 				this.getDesignProcess();
+			// 			}, 1000);
+			// 		}
+			// 	}
+			// );
+		},
+		randomNum(){
+			this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
+		},
+		getBoardId(boardData: any) {
+			let dataList = boardData.map((v: any) => {
+				let data: any = {
+					id: v.resData.id,
+					designType: v.resData.designType,
+				};
+				return data;
+			});
+			return dataList;
+		},
+
+		getPrintId(boardData: any) {
+			let dataList = boardData.map((v: any) => {
+				let data: any = {
+					id: v.resData.id,
+					designType: v.resData.designType,
+					level2Type: v.categoryValue,
+					isPin: v.pin ? 1 : 0,
+				};
+				return data;
+			});
+			return dataList;
+		},
+
+		getSkecthBoard(boardData: any) {
+			let sketchBoards = boardData.map((v: any) => {
+				let data = {
+					designType: v.resData.designType,
+					isPin: v.pin ? 1 : 0,
+					level2Type: v.categoryValue,
+					sketchBoardId: v.resData.id,
+				};
+				return data;
+			});
+			return sketchBoards;
+		},
+
+		getColorBoard(boardData: any) {
+			let colorBoards = boardData.map((v: any) => {
+				let data = {
+					id: v.id,
+					name: v.name,
+					tcx: v.tcx,
+					gradient:v.gradient,
+					rgbValue: "",
+				};
+				data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
+				return data;
+			});
+			return colorBoards;
+		},
+		deleteDesignCollection(list:any,index:any){
+			list.splice(index,1)
+		},
+		likeDesignCollection(design: any, index: any) {
+			let data = {
+				designItemId: design.designItemId,
+				userGroupId: this.userGroupId,
+				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
+			};
+			if (this.likeLoading) {
+				return;
+			}
+			
+			this.likeLoading = true;
+			Https.axiosPost(Https.httpUrls.designLike, data)
+				.then((rv: any) => {
+					if (rv) {
+						let value:any = {
+							...design,
+							id:rv.userLikeId,
+							groupDetailId:rv.userLikeId,
+							userLikeSortId:rv.userLikeSortId,
+							userLikeGroupId:rv.userGroupId,
+							sort:rv.sort,
+						}
+						this.store.commit("setUserGroupId", rv.userGroupId);
+						design.groupDetailId = rv.groupDetailId;
+						this.store.commit(
+							"addLikeDesignCollectionList",
+							value
+						);
+						this.setLikeDislLike('like',value)
+						this.store.commit("deleteDesignCollectionList", index);
+						if (this.startDesignType === "resDesign") {
+							this.getHistoryChoose(this.userGroupId, "like");
+						}
+					}
+					this.likeLoading = false;
+					if(this.driver__.driver){
+						driverObj__.moveNext();
+					}
+				})
+				.catch((rv) => {
+					this.likeLoading = false;
+				});
+		},
+
+		//不喜欢设计
+		dislikeDesignCollection(design: any, index: any) {
+			let data = {
+				designId: design.designId || this.designId,
+				designPythonOutfitId:design.designOutfitId,
+				groupDetailId: design.groupDetailId,
+				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			};
+			if (this.disLikeLoading) {
+				return;
+			}
+			this.disLikeLoading = true;
+			Https.axiosPost(Https.httpUrls.designDislike, data)
+				.then((rv: any) => {
+					if (rv) {
+						this.store.commit("addDesignCollectionList", design);
+						this.store.commit(
+							"deleteLikeDesignCollectionList",
+							index
+						);
+						this.likeDesignCollectionList.forEach((item:any)=>{
+							if(item.sort > design.sort){
+								item.sort-=1
+							}
+						})
+					
+						this.setLikeDislLike('disLike',design)
+						// if (!this.likeDesignCollectionList.length) {
+						// 	this.store.commit("deleteUserGroupId");
+						// }
+					}
+					this.disLikeLoading = false;
+				})
+				.catch((rv) => {
+					this.disLikeLoading = false;
+				});
+		},
+
+
+		//获取选择的组
+		getHistoryChoose(userGroupId: any, type: any) {
+			
+			this.isShowMark = true;
+			let url =
+				Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
+			Https.axiosGet(url)
+				.then((rv: any) => {
+					this.setPortfolio(rv.portfolioDTO)
+					this.store.commit("setUserGroupId", rv.userGroupId);
+					this.dealHistoryChooseData(rv, type);
+					this.isShowMark = false;
+				})
+				.catch((rv) => {
+					this.isShowMark = false;
+				});
+		},
+		getWorks(userGroupId: any, type: any) {
+			let data:any = {
+				"accountId": 0,
+				"collectionId": 0,
+				"coverId": 0,
+				"createDate": "",
+				"id": userGroupId,
+				"isDeleted": 0,
+				"portfolioDes": "",
+				"portfolioName": "",
+				"portfolioType": "",
+				"status": 0,
+				"updateDate": "",
+				"userLikeGroupId":'' 
+			}
+			this.isShowMark = true;
+			Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
+					(rv: any) => {
+						this.setPortfolio(rv.portfolioDTO)
+						this.store.commit("setUserGroupId", rv.userGroupId);
+						this.dealHistoryChooseData(rv, type);
+						this.isShowMark = false;
+					}
+				).catch((res)=>{
+					this.isShowMark = false;
+				});
+		},
+		//处理选择组的数据
+		dealHistoryChooseData(data: any, type: any) {
+			let collectionData = {
+				disposeMoodboard: data.collection.moodTemplateId?[{
+					id:data.collection.moodTemplateId,
+					imgUrl:data.collection.moodTemplateUrl,
+					resData:{
+						name:data.collection.moodTemplateName,
+					}
+				}]:[],
+				moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):{},
+				moodboardFiles: this.dealViewChooseData(
+					data.collection.moodBoards,"Moodboard"
+				),
+				printboardFiles: this.dealViewChooseData(
+					data.collection.printBoards,"Printboard"
+				),
+				generatePrintFiles: [],
+				colorBoards: this.dealViewChooseColor(
+					data.collection.colorBoards
+				),
+				sketchboardFiles: this.dealViewChooseData(
+					data.collection.sketchBoards,"Sketchboard"
+				),
+				marketingSketchFiles: this.dealViewChooseData(
+					data.collection.marketingSketchs,""
+				),
+				
+			};
+			this.store.commit("setAllBoardDataChoose", collectionData);
+			// this.store.commit('clearShowSketchboard')
+			this.store.commit("setShowSketchboard", data.collection.sketchBoards);
+			this.store.commit(
+				"setDesignCollectionId",
+				data.collection.collectionId
+			);
+			this.isHaveReviewCollection = true;
+			if (type === "normal") {
+
+				let likeDesignCollectionList = data.userLikeDetails.map(
+					(v: any) => {
+						let data = {
+							...v,
+							groupDetailId: v.id,
+							designItemUrl: v.designOutfitUrl,
+							designItemId: v.designItemId,
+						};
+						return data;
+					}
+				);
+				this.store.commit(
+					"setLikeDesignCollectionList",
+					likeDesignCollectionList
+				);
+			}
+			this.setSystemDesigner(100)
+		},
+
+		//统一处理选择组的渲染数据
+		dealViewChooseData(data: any,str:string) {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url?v.url:v.designOutfitUrl,
+					id: v.id,
+					status: "done",
+					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.categoryValue = v.level2Type;
+					newData.level2Type = v.level2Type;
+				}
+				if (v.level1Type === "Printboard") {
+					newData.pin = v.isPin;
+					newData.level2Type = v.level2Type;
+					newData.categoryValue = v.level2Type;
+				}
+				return newData;
+			});
+			return filesList;
+		},
+
+		//统一处理选择组的渲染数据
+		dealViewChooseColor(data: any) {
+			let colorList = data.map((v: any) => {
+				let rgbValue = v.rgbValue.split(" ");
+				let newData: any = {
+					id: v.id,
+					name: v.name,
+					tcx: v.tcx || "",
+					rgbValue: {
+						r: rgbValue[0],
+						g: rgbValue[1],
+						b: rgbValue[2],
+						a: 1,
+					},
+				};
+				if(v.gradient){
+					newData.gradient = v.gradient;
+				}else{
+					delete newData.gradient;
+				}
+				return newData;
+			});
+			return colorList;
+		},
+ //点击下拉图标出现操作
+		changeShowOperateContent() {
+            this.isShowOperate = !this.isShowOperate;
+            document.addEventListener(
+                "click",
+                this.closeShowOperateContent,
+                false
+            );
+        }, 
+		//关闭下拉图标
+        closeShowOperateContent() {
+            this.isShowOperate = false;
+            document.removeEventListener("click", this.closeShowOperateContent);
+        },
+		exportModel(){
+			let productImg:any = this.$refs.productImg
+			productImg.productImgMask = true
+			productImg.init(this.userGroupId)			
+			
+		},
+		//销毁图片详情
+		setDetailDestroy() {
+		    // let designDetail: any = this.$refs.designDetail;
+			// designDetail.destroy();
+			this.detailDestroy = false
+		},
+		//打开图片详情
+		designDetail(
+			design: any,
+			index: number,
+			collectionList: any,
+			type: string
+		) {
+			if(this.isMove)return
+			design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
+			let data = {
+				design: design,
+				index: index,
+				collectionList: collectionList,
+				type: type,
+			};
+			this.detailDestroy = true
+			nextTick(()=>{
+				let designDetail: any = this.$refs.designDetail;
+				designDetail.showDesignDetailModal(data);
+			})
+		},
+
+		//完成单个图片设计
+		finishRedesign(event: any) {
+			let { design, index, type } = event;
+			if (type === "dislike") {
+				this.store.commit("setSingleDesignCollectionList", {
+					index: index,
+					design: design,
+				});
+			} else {
+				this.store.commit("setSingleLikeDesignCollectionList", {
+					index: index,
+					design: design,
+				});
+			}
+			this.setDetailDestroy()
+		},
+		setTask(data:any){
+			this.$emit('setTask',data)
+			// this.exportModel()
+		},
+		setShowHide(str:string){
+			if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
+			if(str == 'domHidden')this.domHidden = !this.domHidden
+			this.setSystemDesigner(0)
+		}
+	},
+});
+</script>
+<style lang="less" scoped>
+.designPage {
+	width: 100%;
+	height: 100%;
+	padding-right:5rem;
+	// overflow: hidden;
+	// min-width: 1440px;
+	position: relative;
+	// left: 50%;
+	// margin-left: -50%;
+	// transform: translateX(-50%);
+	
+	.page_content {
+		position: relative;
+		
+		.userSystem{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			background: rgba(0, 0, 0, 0.4);
+			z-index:2;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: #fff;
+			font-weight: 600;
+			font-size: 4rem;
+		}
+		.designPage_left_bottom{
+			position: absolute;
+			width: 4rem;
+			height: 7rem;
+			background: #fff;
+			border: 2px solid;
+			border-right: none;
+			border-radius: 2rem 0 0 2rem;
+			top: 50%;
+			transform: translate(-100%,-50%);
+			left: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			z-index: 2;
+			cursor: pointer;
+			>span{
+				transition: all .3s;
+				transform: rotate(90deg);
+				&.active{
+					transform: rotate(270deg);
+				}
+			}
+			
+		}
+		.page_content_body {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			padding-bottom: 4rem;
+			box-sizing: border-box;
+			z-index:1;
+			.designPage_body {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				// padding-left: 0.7rem;
+				box-sizing: border-box;
+				// overflow: hidden;
+
+				.designPage_left {
+					// width: 44.4rem;
+					height: 100%;
+					padding: 2rem 0 0 0;
+					background: rgba(255, 255, 255, 0.2);
+					position: relative;
+					// overflow: hidden;
+					
+					
+					.designPage_left_content {
+						height: 100%;
+						width: 55rem;
+						overflow: hidden;
+						// transition: all .3s;
+						padding-right: 1.2rem;
+						&.active{
+							padding-right: 0;
+							width: 0;
+						}
+						.home_left_null {
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							text-align: center;
+							width: 100%;
+							height: 100%;
+							position: relative;
+							background: #f6f6fa;
+							border-radius: 2rem;
+							overflow: hidden;
+
+							.home_null_icon {
+								display: block;
+								width: 32.3rem;
+							}
+
+							.new_collection_button {
+								padding: .5rem 5rem;
+								height: 4rem;
+								line-height: 4rem;
+								background: #fff;
+								font-size: 1.3rem;
+								color: #000000;
+								margin: 1.2rem auto 0;
+								text-align: center;
+								cursor: pointer;
+								display: inline-block;
+								box-sizing: initial;
+								border: 2px solid #000;
+								font-weight: 600;
+								border-radius: 15px;
+							}
+
+							.is_finish_loading {
+								width: 100%;
+								height: 100%;
+								position: absolute;
+								left: 0;
+								top: 0;
+								background: #ffffff;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+						}
+
+						.home_left_info {
+							height: 100%;
+							display: flex;
+							flex-direction: column;
+							.left_info_top {
+								padding: 0 0 1.3rem 0;
+								display: flex;
+
+								.button_margin {
+									margin-left: 2rem;
+								}
+							}
+
+							.left_info_content {
+								width: 100%;
+								height: calc(100% - 6.9rem);
+								overflow-y: auto;
+								background: #ffffff;
+								&.left_info_content::-webkit-scrollbar {
+									display: none;
+								}
+
+								.left_info_content_body {
+									width: 100%;
+								}
+							}
+							.left_info_hint{
+								display: flex;
+								span{
+									font-size: 1.3rem;
+									display: inline-block;
+								}
+							}
+						}
+					}
+				}
+
+				.designPage_right {
+					// width: calc(100% - 44.4rem);
+					flex: 1;
+					height: 100%;
+					width: 100%;
+					// overflow: hidden;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					position: relative;
+					.designPage_left_bottom{
+						border-radius: 0 2rem 2rem 0rem;
+						left: 2rem;
+						top: 50%;
+						left: auto;
+						right: 0;
+						transform: translate(100%, -50%);
+						// top: calc(50% - 10.4rem / 2);
+						border: 2px solid;
+						border-left: none;
+						background: #000;
+						color: #fff;
+						flex-direction: column;
+						&.active{
+							right: 53rem;
+							transform: translate(0, -50%);
+						}
+					}
+					.right_top {
+						padding: 2rem 3.2rem 2rem 1.2rem;
+						display: flex;
+						justify-content: space-between;
+						box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
+						background: rgba(255, 255, 255, 0.4);
+						transition: all .3s;
+						&.active{
+							overflow: hidden;
+							padding-top: 0;
+							padding-bottom: 0;
+							height: 0;
+						}
+						.right_top_left {
+							display: flex;
+							align-items: center;
+							width: 100%;
+							.button_margin_14 {
+								margin-left: 1.4rem;
+							}
+							.silder{
+								display: flex;
+								align-items: center;
+								.text{
+									font-weight: 600;
+									font-size: 1.8rem;
+								}
+								.system_silder{
+									margin: 0 3rem;
+									width: 12rem;
+								}
+							}
+						}
+					}
+					.right_content_block_box{
+						flex: 1;
+						display: flex;
+						overflow: hidden;
+					}
+					.right_content_block {
+						flex: 1;
+						display: flex;
+						width: 0;
+						flex-direction: column;
+						&.recycleBin{
+							flex: none;
+							margin-left: 0;
+							width: 0;
+							overflow: hidden;
+							&.recycleBinShow{
+								width: auto;
+								margin-left: 2rem;
+							}
+							.right_content_body {
+								width: 55rem;
+								.right_content_img_block{
+									
+									.content_img_block{
+										width: 16rem;
+										height: 23rem;
+									}
+								}
+							}
+						}
+						&.right_content_block::-webkit-scrollbar{display: none;}
+						&.active{
+							overflow: hidden;
+						}
+						.right_content_header {
+							display: flex;
+							justify-content: space-between;
+							height: 4.5rem;
+							align-items: center;
+							padding: 0 3.2rem 0 1.9rem;
+							background: rgba(255, 255, 255, 0.2);
+							position: relative;
+							.right_content_export{
+								display: flex;
+								align-items: center; 
+								position: relative;
+								.icon-xiala{
+									cursor: pointer;
+									transition: .3s all;
+									margin-left: 1rem;
+								}
+								.icon_rotate{
+									-moz-transform: rotate(180deg);
+									-webkit-transform: rotate(180deg);
+									transform: rotate(180deg);
+									animation-direction: 0.5s;
+								}
+								.export_nav{
+									display: flex;
+									flex-direction: column;
+									position: absolute;
+									top: 5.5rem;
+									width: 100%;
+									background: #fff;
+									padding: 1rem;
+									border: 2px solid;
+									z-index: 2;
+									label{
+										margin: 0;
+									}
+								}
+							}
+							.content_header_left {
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+
+								.icon-dangqianweizhi {
+									font-size: 1.6rem;
+									color: #000;
+								}
+
+								.content_header_des {
+									font-size: 1.6rem;
+									color: #000000;
+									margin-left: 1rem;
+									font-weight: 900;
+								}
+							}
+						}
+						.right_content_body {
+							// padding: 0 1.8rem 0 1.2rem;
+							// height: calc(50% - 4.5rem);
+							flex: 1;
+							overflow: auto;
+							background: #f6f6fa;
+							border-radius: 2rem;
+							display: flex;
+							flex-direction: column;
+							.right_content_img_block {
+								// overflow-y: auto;
+								height: 100%;
+								flex: 1;
+								display: flex;
+								width: auto;
+								// overflow: hidden;
+								align-items: center;
+								// padding-bottom: 1rem;
+								overflow-x: auto;
+								justify-content: center;
+								&.active::-webkit-scrollbar {
+									display: none;
+								}
+								// &.active::-webkit-scrollbar-button:single-button{
+								// 	display: none;
+								// }
+								// &.active::-webkit-scrollbar {
+								// 	/* 竖轴的宽度 */
+								// 	width: 1rem;
+								// 	/* 横轴的高度 */
+								// 	height: 1rem;
+								// 	transition: all .3s;
+								// }
+								// /* 进度 */
+								// &.active::-webkit-scrollbar-thumb {
+								// 	border-radius: 1rem;
+								// 	background: rgba(238, 238, 244, 0);
+								// }
+								// /* 轨道 */
+								// &.active::-webkit-scrollbar-track {
+								// 	border-radius: 1rem;
+								// 	background: rgba(238, 238, 244, 0);
+								// }
+								// &.active:hover {
+								// 	// overflow-x: scroll;
+								// 	&.active::-webkit-scrollbar-thumb {
+								// 		background: #543087;
+								// 	}
+								// 	/* 轨道 */
+								// 	&.active::-webkit-scrollbar-track {
+								// 		background: rgba(84, 48, 135,.2);
+								// 	}
+								// }
+								>div{
+									display: flex;
+									flex-wrap: wrap;
+									// padding: 0 2.8rem 0 0.9rem;
+									width: 100%;
+									height: 100%;
+									// align-content: flex-start;
+									overflow-x: hidden;
+									position: relative;
+									&::-webkit-scrollbar {
+										display: none;
+									}
+								}
+								.content_img_block {
+									// width: 24rem;
+									// height: 37rem;
+									width: calc(33.33% - 30px);
+									height: calc((33.33% - 30px) * 1.54);
+									box-sizing: border-box;
+									margin: 5px;
+									// min-height: 271px;
+									// max-height: 80%;
+
+									display: inline-block;
+									position: relative;
+									vertical-align: top;
+									flex-shrink: 0;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									position: absolute;
+									transition: top,left .3s;
+									&:hover .icon_like,&:hover .icon_delete,&:hover .Dustbin {
+										display: block;
+									}
+
+									// &:nth-child(4n) {
+									// 	margin-right: 0;
+									// }
+
+									.content_img_flex {
+										display: flex;
+										justify-content: center;
+										align-items: center;
+										width: 100%;
+										height: 100%;
+										border-radius: 2rem;
+										border: 2px solid #E0E0E0;
+										background: #fff;
+									}
+									&.active{
+										.icon_like,.icon_delete{
+											display: block;
+										}
+										.content_img_flex {
+											border: 2px solid #000;
+										}
+									}
+									.content_img {
+										// max-width: 100%;
+										width: 100%;
+										height: 100%;
+										// max-height: 100%;
+										object-fit: contain;
+									}
+									.Dustbin{
+										position: absolute;
+										top: 50%;
+										left: 50%;
+										transform: translate(-50%,-50%);
+										cursor: pointer;
+										color: #fff;
+										border-radius: 4rem;
+										font-size: 1.8rem;
+										padding: 1rem 1.5rem;
+										background: rgba(0, 0, 0, 0.7);
+										display: none;
+									}
+									.icon_like,.icon_delete {
+										font-size: 2.4rem;
+										top: 1rem;
+										right: 1rem;
+										position: absolute;
+										cursor: pointer;
+										display: none;
+									}
+									.icon_delete{
+										top: 5rem;
+									}
+									.icon-jushoucang {
+										color: #000;
+									}
+									.icon-jushoucanggift {
+										// color: rgba(52, 53, 121, 1);
+										color: #000;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.page_content_bg {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.progress_mark {
+		background: #ffffff;
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: 9999;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.mark_content {
+			text-align: center;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/component/HomePage/index/editContent/index.vue b/src/component/HomePage/index/editContent/index.vue
new file mode 100644
index 00000000..1cc6b39a
--- /dev/null
+++ b/src/component/HomePage/index/editContent/index.vue
@@ -0,0 +1,244 @@
+<template>
+	<div class="home">
+		<navList @setSelectKey="setSelectKey" :navListData="navListData" :selectKey="selectKey"></navList>
+		<div class="contentBox">
+			<div class="homeContent" ref="parent">
+				<navListBox @setSelectKey=setSelectKey :navListData="navListData" :selectKey="selectKey"></navListBox>
+			</div>
+			<div class="content">
+				<div class="back" @click="setBack()">&lt; Back</div>
+				<design class="design" v-if="selectKey_ == 'design'"></design>
+				<MoodboardUpload class="moodBoard" v-if="selectKey_ == 'moodBoard'"></MoodboardUpload>
+				<PrintboardUpload class="printBoard" v-if="selectKey_ == 'printBoard'"></PrintboardUpload>
+				<ColorboardUpload class="colorBoard" v-if="selectKey_ == 'colorBoard'"></ColorboardUpload>
+				<SketchboardUpload class="sketchBoard" v-if="selectKey_ == 'sketchBoard'"></SketchboardUpload>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import design from './design/index.vue'
+import MoodboardUpload from './collection/MoodboardUpload.vue'
+import PrintboardUpload from './collection/PrintboardUpload.vue'
+import ColorboardUpload from './collection/ColorboardUpload.vue'
+import SketchboardUpload from './collection/SketchboardUpload.vue'
+
+import navList from './nav.vue'
+import navListBox from './navBox.vue'
+
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{
+		design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,navList,navListBox
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		})
+		provide('driver__',driver__)
+
+		const data = reactive({
+			
+			selectKey:'',
+			selectKey_:'',
+			adminData:{
+				position:'',
+				dom:null as any,
+				parentDom:null as any,
+			},
+			navListData:[
+				{
+					icon:'',
+					value:'design',
+					name:'1',
+					task:'1-1',
+				},{
+					icon:'',
+					value:'moodBoard',
+					name:'2',
+					task:'1-2',
+				},{
+					icon:'',
+					value:'printBoard',
+					name:'3',
+					task:'1-3',
+				},{
+					icon:'',
+					value:'colorBoard',
+					name:'3',
+					task:'1-4',
+				},{
+					icon:'',
+					value:'sketchBoard',
+					name:'3',
+					task:'1-5',
+				},{
+					icon:'',
+					value:'color3',
+					name:'3',
+					task:'2-1',
+				},{
+					icon:'',
+					value:'color4',
+					name:'3',
+					task:'3-1',
+				},{
+					icon:'',
+					value:'color5',
+					name:'3',
+					task:'4-1',
+				},{
+					icon:'',
+					value:'color6',
+					name:'3',
+					task:'4-2',
+				},{
+					icon:'',
+					value:'color7',
+					name:'3',
+					task:'5-1',
+				},
+			],
+		})
+		const dataTime = reactive({
+			selectTime:null as any,
+		})
+		const dataDom = reactive({
+			parent:null as any
+		})
+		const setBack = ()=>{
+			data.selectKey = ''
+			updataPage()
+		}
+		const setSelectKey = (value:any)=>{
+			let {str,dom,position} = value
+			data.adminData.dom = dom
+			data.adminData.parentDom = value?.parentDom
+			data.adminData.position = position
+			data.selectKey = str
+			updataPage()
+		}
+		const updataPage = ()=>{
+			let {dom,position} = data.adminData
+			let contentDom:any = document.querySelectorAll('.home .content')[0]
+			clearTimeout(dataTime.selectTime)
+			let {top,left,width,height} = dom.getBoundingClientRect()
+			let parentPosition = dataDom.parent.getBoundingClientRect()
+			let parentTop = parentPosition?.top
+			let parentLeft = parentPosition?.left
+			if(data.selectKey_ && data.selectKey == ''){
+				// let index = data.navListData.findIndex((item:any) => item.value === data.selectKey_);
+				let y = top - parentTop + height / 2
+				let x = left - parentLeft + width / 2
+				if(position == 'nav'){
+					x = 0
+					y = dom.offsetTop + dom.offsetHeight / 2
+				}
+				contentDom.style.transformOrigin = `${x}px ${y}px`
+				gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
+				dataTime.selectTime = setTimeout(() => {
+					data.selectKey_ = data.selectKey
+				}, 500);
+			}else{
+				data.selectKey_ = data.selectKey
+				nextTick(()=>{
+					// let index = data.navListData.findIndex((item:any) => item.value === str);
+					let y = top - parentTop + height / 2
+					let x = left - parentLeft + width / 2
+					if(position == 'nav'){
+						x = 0
+						y = dom.offsetTop + dom.offsetHeight / 2
+					}
+					contentDom.style.transformOrigin = `${x}px ${y}px`
+					gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
+				})
+			}
+		}
+		// watch(()=>data.selectKey,(newVal:any,oldVal:any)=>{
+		// 	let navDom:any = document.querySelectorAll('.home .navList')
+		// 	let contentDom:any = document.querySelectorAll('.home .content')[0]
+		// 	clearTimeout(dataTime.selectTime)
+		// 	if(oldVal && newVal == ''){
+		// 		dataTime.selectTime
+		// 		let index = data.navListData.findIndex(item => item.value === oldVal);
+		// 		let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
+		// 		contentDom.style.transformOrigin = `0px ${top}px`
+		// 		gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
+		// 		dataTime.selectTime = setTimeout(() => {
+		// 			data.selectKey_ = newVal
+		// 		}, 500);
+		// 	}else{
+		// 		data.selectKey_ = newVal
+		// 		nextTick(()=>{
+		// 			let index = data.navListData.findIndex(item => item.value === newVal);
+		// 			let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
+		// 			contentDom.style.transformOrigin = `0px ${top}px`
+		// 			gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
+		// 		})
+		// 	}
+		// })
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setBack,
+			setSelectKey,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.home{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/HomePage/index/editContent/nav.vue b/src/component/HomePage/index/editContent/nav.vue
new file mode 100644
index 00000000..4ed0811a
--- /dev/null
+++ b/src/component/HomePage/index/editContent/nav.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="homeNav">
+		<div class="navList" :class="{active:selectKey == item.value}" v-for="item in navListData" :key="item.value"  @click="setNav(item.value, $event)">
+			{{ item.name }}
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+
+export default defineComponent({
+    components:{
+    },
+	props:{
+		selectKey:{type:String,default:''},
+		navListData:{type:Array,default:()=>[]},
+	},
+	emits:['setSelectKey'],
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+			
+		})
+		
+		const dataDom = reactive({
+		})
+		const setNav = (str:any,event:any)=>{
+			let data = {
+				str:str == props.selectKey?'':str,
+				dom:event.target,
+				posiiton:'nav',
+			}
+			
+			emit("setSelectKey", data);
+			// emit("update:selectKey", str);
+		}
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setNav,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .homeNav{
+		padding: 5rem 0;
+		background: #f7f8fa;
+		> div{
+			width: 5rem;
+			height: 5rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			&.active{
+				background: #ebebeb;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/HomePage/index/editContent/navBox.vue b/src/component/HomePage/index/editContent/navBox.vue
new file mode 100644
index 00000000..f4af7719
--- /dev/null
+++ b/src/component/HomePage/index/editContent/navBox.vue
@@ -0,0 +1,170 @@
+<template>
+    <div class="homeNavBox">
+		<div class="navList">
+			<img src="@/assets/images/homePage/homeNavBg.png" alt="">
+			<div class="navListItem" :class="[selectKey == item.value?'active':'',`item${item.task}`]" v-for="item in navListData" :key="item.value" @dblclick.stop="setNav(item.value,$event)"  @click.stop="setSelect(item.value)">
+				<div class="background"></div>
+				<div class="text">
+					{{ item.name }}
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+
+export default defineComponent({
+    components:{
+    },
+	props:{
+		selectKey:{type:String,default:''},
+		navListData:{type:Array,default:()=>[]},
+	},
+	emits:['setSelectKey'],
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+			
+		})
+		const dataTime = reactive({
+			clickTime:null as any,
+		})
+		const dataDom = reactive({
+			navList:null as any
+		})
+		const setNav = (str:any,event:any)=>{
+			clearTimeout(dataTime.clickTime)
+			let data = {
+				str:str == props.selectKey?'':str,
+				dom:event.target,
+				posiiton:'navBox'
+			}
+			emit("setSelectKey", data);
+			// emit("update:selectKey", str);
+		}
+		const setSelect = ()=>{
+			clearTimeout(dataTime.clickTime)
+			dataTime.clickTime = setTimeout(()=>{//防止双击和单机都执行的问题
+				console.log(123123);
+			},200)
+		}
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setNav,
+			setSelect,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .homeNavBox{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		> .navList{
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			> img{
+				width: 98rem;
+			}
+			> .navListItem{
+				width: 22rem;
+				height: 10rem;
+				border-radius: 2rem;
+				border: 2px solid #000;
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transition: all .2s;
+				overflow: hidden;
+				cursor: pointer;
+				&.item1-1{
+					top: -5rem;
+					left: -22rem;
+					// transform: translateX(-100%);
+				}
+				&.item1-2{
+					top: 9rem;
+					left: -22rem;
+					// transform: translateX(-100%);
+				}
+				&.item1-3{
+					top: 23rem;
+					left: -22rem;
+					// transform: translateX(-100%);
+				}
+				&.item1-4{
+					top: 37rem;
+					left: -22rem;
+					// transform: translateX(-100%);
+				}
+				&.item1-5{
+					top: 51rem;
+					left: -22rem;
+					// transform: translateX(-100%);
+				}
+				&.item2-1{
+					top: 23rem;
+					left: 8rem;
+				}
+				&.item3-1{
+					top: 23rem;
+					left: 38rem;
+				}
+				&.item4-1{
+					top: 12rem;
+					left: 68rem;
+				}
+				&.item4-2{
+					top: 34rem;
+					left: 68rem;
+				}
+				&.item5-1{
+					top: 23rem;
+					left: 98rem;
+				}
+				.background{
+					background: #d6eb77;
+					transition: all .3s;
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+				}
+				.text{
+					position: relative;
+				}
+				&.active{
+					border: 3px solid #000;
+					.background{
+						opacity: .5;
+					}
+				}
+				&:hover{
+					border: 3px solid #000;
+					.background{
+						opacity: .5;
+					}
+				}
+			}
+		}
+		
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/HomePage/index/index.vue b/src/component/HomePage/index/index.vue
new file mode 100644
index 00000000..05790203
--- /dev/null
+++ b/src/component/HomePage/index/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="start">
+		<div class="createProject" v-if="false">
+
+		</div>
+		<editContent v-else></editContent>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import editContent from './editContent/index.vue'
+
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{
+		editContent
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+
+			
+		})
+		const dataTime = reactive({
+			selectTime:null as any,
+		})
+		const dataDom = reactive({
+		})
+		
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.start{
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/HomePage/scaleImage.vue b/src/component/HomePage/scaleImage.vue
index 1a9050e4..95342ab9 100644
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -457,7 +457,8 @@ export default defineComponent({
 			}
 		},
 		download(){
-			downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
+			let url = this.scaleImageList[this.scaleImageIndex].imgUrl || this.scaleImageList[this.scaleImageIndex]?.url
+			downloadIamge(url)
 		},
 		setScaleImageIndex(index:any){
 			// this.scaleImageIndex = index
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index cd478032..628dc689 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -312,6 +312,12 @@ export default {
 		jsContent2:'图片必须小于5MB',
 		jsContent3:'上传失败',
 	},
+	more:{
+		delete:'删除',
+		down:'下载',
+		edit:'修改',
+		enlargement:'放大',
+	},
 	SketchboardUpload:{
 		Upload:'上传',
 		Library:'收藏',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index f5081246..3b4ba06c 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -312,6 +312,12 @@ export default {
 		jsContent2:'Image must smaller than 5MB!',
 		jsContent3:'upload failed',
 	},
+	more:{
+		delete:'Delete',
+		down:'Download',
+		edit:'Modify',
+		enlargement:'Enlargement',
+	},
 	SketchboardUpload:{
 		Upload:'Upload',
 		Library:'Library',
diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue
index 9f84736a..cf6f6f2e 100644
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -1,241 +1,7 @@
 <template>
-	<div class="home_page">
-		<!-- <HeaderComponent></HeaderComponent> -->
-		<!-- <generalCanvas></generalCanvas> -->
-
-		<div class="page_content">
-			<div class="userSystem" v-if="userDetail.systemList.indexOf(1) == -1">
-				You can use these features only after becoming a regular user~
-			</div>
-
-			<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
-			<div class="page_content_body">
-				<div class="home_page_body">
-					<div class="home_page_left" ref="hidden">
-						<div class="home_page_left_content" :class="{'active':(domHidden)}">
-							<!-- 空状态 start-->
-							<div class="home_left_null" v-show="!isHaveReviewCollection">
-								<div>
-									<!-- <img
-                                        class="home_null_icon"
-                                        src="@/assets/images/homePage/null_img.png"
-                                    /> -->
-									<div id="Guide_1_1" class="new_collection_button Guide_1_1" @click="startNewCollection()">
-										{{ $t('HomeView.GetStarted') }}
-									</div>
-								</div>
-								<div class="is_finish_loading" v-show="isFinishLoading">
-									<a-spin size="large"></a-spin>
-								</div>
-							</div>
-							<!-- 空状态 end-->
-
-							<!-- 有图状态 start-->
-							<div class="home_left_info" v-show="isHaveReviewCollection">
-								<div class="left_info_top">
-									<!-- <div class="button_second" @click="startNewCollection()">
-										{{ $t('HomeView.Start') }}
-									</div> -->
-									<div class="gallery_btn white button_margin" @click="recollection()">
-										{{ $t('HomeView.Edit') }}
-									</div>
-									<div class="gallery_btn white button_margin" @click="resetCollection()">
-										{{ $t('HomeView.Reset') }}
-									</div>
-								</div>
-								<div class="left_info_content scroll_style">
-									<div class="left_info_content_body" ref="collection_canvas">
-										<NewCollectionReview id="collectionReview"></NewCollectionReview>
-									<!-- <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection> -->
-
-									</div>
-								</div>
-								<div v-show="isMannequinShow" class="left_info_hint">
-									<span class="icon iconfont icon-zhuyi"></span>
-									<span>{{ $t('HomeView.masnnequinHint') }}</span>
-								</div>
-							</div>
-							<!-- 有图状态 end-->
-						</div>
-						<div class="home_page_left_bottom" @click="setShowHide('domHidden')" >
-							<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
-						</div>
-					</div>
-					<div class="home_page_right">
-						<div class="right_top">
-						<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
-							<div class="right_top_left">
-								<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
-									{{ $t('HomeView.Design') }}
-								</div>
-								<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
-									@click="resDesignCollection()">
-									{{ $t('HomeView.Redesign') }}
-								</div>
-								<div class="silder button_margin_14" v-show="designCollectionId">
-									<div class="text">Small</div>
-										<a-slider
-											class="system_silder"
-											v-model:value="collValue"
-											:min="minCollValue"
-											:max="maxCollValue-1"
-											@afterChange="setSystemDesigner(500)"
-											:tooltipVisible="false"
-										>
-										</a-slider>
-									<div class="text">Big</div>
-								</div>
-								<div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
-									<!-- {{ $t('HomeView.Export') }} -->
-									{{$t('HomeView.FinalizeCollection')}}
-								</div>
-							</div>
-						</div>
-						<div class="right_content_block_box">
-							<div class="right_content_block" @mouseenter="mouseenter($event,'like')">
-								
-
-								<div class="right_content_body">
-									<div class="right_content_header">
-										<div class="content_header_left">
-											<i class="fi fi-rs-comments"></i><span class="content_header_des">
-												{{ $t('HomeView.SelectedDesign') }}
-												</span>
-										</div>
-									</div>
-									<div class="right_content_img_block scroll_style active">
-										<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
-										
-											<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
-												v-for="(design, index) in likeDesignCollectionList" :key="design.id"
-												@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId,'like')" 
-												@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId,'like')"
-												@click="designDetail(
-														design,
-														index,
-														likeDesignCollectionList,
-														'like'
-													)">
-												<div class="content_img_flex">
-													<img class="content_img" :src="design.designOutfitUrl"
-														:key="design.designOutfitUrl" designType="like" :index="index"/>
-												</div>
-												<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
-													dislikeDesignCollection(
-														design,
-														index
-													)">
-												</div>
-											</div>
-											
-										
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="right_content_block recycleBin" @mouseenter="mouseenter($event,'recycle')" :class="{recycleBinShow:recycleDomHidden}">
-								<div class="right_content_body">
-									<div class="right_content_header">
-										<div class="content_header_left">
-											<i class="fi fi-rs-comments"></i><span class="content_header_des">
-												{{ $t('HomeView.GeneratedDesign') }}
-												</span>
-										</div>
-									</div>
-									<div class="right_content_img_block scroll_style Guide_1_17"  :class="[driver__.driver?'showEvents':'']">
-										<div class="right_content_img_item" ref="collItemDom" designType="dislike" :index="0">
-											<!-- <div class="content_img_block" v-for="(
-													design, index
-												) in deleteDesignCollectionList" :key="design?.designItemId">
-													<div class="content_img_flex" 
-														@click="
-														designDetail(
-															design,
-															index,
-															designCollectionList,
-															'dislike'
-														)">
-														<img class="content_img" :src="design.designOutfitUrl" />
-													</div> 
-													<div class="Dustbin" @click.stop="
-														cancelDeleteDesign(index)">
-														Dustbin
-													</div>
-											</div> -->
-											<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
-												<a-spin size="large" class="content_img_flex"></a-spin>
-											</div>
-											<div class="content_img_block content_img_GetWidth" v-for="(
-													design, index
-												) in designCollectionList" :key="design?.designItemId" :style="collStyle">
-													<div class="content_img_flex" 
-													:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
-													@mousedown.stop="designMousedown(getMousePosition($event,false),design.designItemId,'disLike')" 
-													@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId,'disLike')"
-														@click="
-														designDetail(
-															design,
-															index,
-															designCollectionList,
-															'dislike'
-														)">
-														<img class="content_img" :src="design.designOutfitUrl" designType="dislike" :index="index"/>
-													</div> 
-													<div class="icon iconfont icon-jushoucang icon_like" :class="[driver__.driver?index == 0?driver__.index == 32?'Guide_img showEvents':'':'':'']" @click.stop="
-														likeDesignCollection(
-															design,
-															index
-														)
-														">
-													</div>
-													<i class="fi fi-rr-trash icon_delete" @click.stop="
-														setDeleteDesign(design,index)">
-													</i>
-											</div>
-											
-										</div>
-									</div>
-								</div>
-								
-							</div>
-							<div class="home_page_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
-								<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
-							</div>
-						</div>
-						
-					</div>
-				</div>
-			</div>
-		</div>
-		<KeepAlive>
-			<CollectionModal :getDesignData="getDesignData" ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
-		</KeepAlive>
-		<productImg ref="productImg" @setTask="setTask"></productImg>
-		<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
-		<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
-
-		<!-- 导出缩略图的蒙层 start-->
-		<div class="mark_loading" v-show="isShowMark">
-			<a-spin size="large" />
-		</div>
-		<!-- 导出缩略图的蒙层 end-->
-
-		<!-- design collection的进度蒙层  start-->
-
-		<!-- <div class="progress_mark" v-show="showDesignMark">
-			<div class="mark_content Guide_1_16">
-				<a-progress type="circle" :percent="designProgress" strokeColor="#341e57" :width="200" />
-				<div>
-					<a-spin :indicator="indicator" />
-				</div>
-			</div>
-		</div> -->
-		<!-- design collection的进度蒙层  end-->
-		<affiche ref="affiche"></affiche>
-		<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
-
+	<div class="homeView">
+		<homeIndex @setTask="()=>$emit('setTask')"></homeIndex>
 	</div>
-
 </template>
 
 <script lang="ts">
@@ -250,6 +16,7 @@ import generalCanvas from "@/component/modules/generalCanvas.vue";
 import affiche from "@/component/HomePage/affiche.vue";
 import DesignDetail from "@/component/Detail/DesignDetail.vue";
 import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
+import homeIndex from "@/component/HomePage/index/index.vue";
 import html2canvas from "html2canvas";
 import { message,Modal } from "ant-design-vue";
 import { useStore } from "vuex";
@@ -268,7 +35,7 @@ export default defineComponent({
 	name: "homePage",
 	components: {
 		// HeaderComponent,
-		CollectionModal,
+		homeIndex,
 		NewCollectionReview,
 		DesignDetail,
 		ExportNewCoolection,
@@ -278,1798 +45,17 @@ export default defineComponent({
 		DesignDetailcopy
 	},
 	emits:['setTask'],
-	 activated() {
-  },
-  deactivated() {
-  },
 	setup(props,{emit}) {
-		const store = useStore();
-		let likeDesignCollectionList: any = computed(() => {
-			return store.state.HomeStoreModule.likeDesignCollectionList;
-		});
-		let deleteDesignCollectionList: any = computed(() => {
-			return store.state.HomeStoreModule.deleteDesignCollectionList;
-		});
-		let designCollectionList: any = computed(() => {
-			return store.state.HomeStoreModule.designCollectionList;
-		});
-		let userDetail= computed(()=>{
-			return store.state.UserHabit.userDetail
-		})
-		let bindEmail= computed(()=>{
-			return store.state.UserHabit.bindEmail
-		})
-		let userGroupId: any = computed(() => {
-			return store.state.HomeStoreModule.userGroupId;
-		}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
-		let setPortfolio = (data:any)=>{
-			portfolio.value = data
-		}
-		provide('setPortfolio',setPortfolio)
-		let designCollectionId: any = computed(() => {
-			return store.state.HomeStoreModule.designCollectionId;
-		});
-		let designId: any = computed(() => {
-			return store.state.HomeStoreModule.designId;
-		});
-		let contentImgMax = {
-			width:'',
-			height:'',
-		}
-		let contentImg = {
-			width:'',
-			height:'',
-		}
-		let exportNav = ref([
-			{
-				name:useI18n().t('HomeView.moodboard'),
-				change:true,
-				noChange:true,
-				value:'moodboardFiles',
-			},{
-				name:useI18n().t('HomeView.printboard'),
-				change:true,
-				noChange:false,
-				value:'printboardFiles',
-			},{
-				name:useI18n().t('HomeView.colorboard'),
-				change:true,
-				noChange:false,
-				value:'colorBoards',
-			},{
-				name:useI18n().t('HomeView.sketchboard'),
-				change:true,
-				noChange:false,
-				value:'sketchboardFiles',
-			},{
-				name:useI18n().t('HomeView.mannequins'),
-				change:true,
-				noChange:true,
-				value:'',
-			},
-		])
-		provide('exportNav',exportNav)
-		let isShowOperate = ref(false)
-		let {t} = useI18n()
-		let driver__:any = computed(()=>{
-			return store.state.Guide.guide
-		})
-		let likeDesignItemIdList = ref([])
-		let workspacePosition:any = computed(()=>{
-			return store.state.Workspace.workspacePosition
-		})
-		let allBoardData:any = computed(()=>{
-			return store.state.UploadFilesModule.allBoardData})
-		let isMannequinShow = ref(false)
-		let chooseIsDesign:any = computed(()=>{
-			return store.state.UploadFilesModule.chooseIsDesign})
-		let portfolio:any = ref({})
-		provide('portfolio',portfolio)
-		let showDesignMark = ref(false)
-		let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
-		
-		const collItemSize = reactive({
-			collValue:( sessionStorageCollValue>= 20? 10:sessionStorageCollValue) || 3,
-			minCollValue:4,
-			maxCollValue:20,
-			likeStyle:{
-				width:'240px',
-				height:'370px',
-				position:'absolute',
-			},
-			collStyle:{
-				width:'0',
-				height:'0',
-				position:'absolute',
-			},
-			itemStyle:{
-				width:0,
-				height:0,
-			},
-			scale:[1,1.54],
-			collTime:null as any,
-			isMove:false,
-		})
-		const posiitonData = ref({
-			likeElList:[] as any,
-			likeSelectIndex:0,
-			generateElList:[] as any,
-			generateSelectIndex:0,
-		})
-		let likeItemDom = ref()
-		let collItemDom = ref()
-		let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
-		let recycleDomHidden = ref(false);
-		if(designCollectionList.value.length>0){
-			recycleDomHidden.value = JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false
-		}
-		let getDesignTime = null as any;
-		const setSystemDesigner = (time:any)=>{
-			clearTimeout(collItemSize.collTime)
-			collItemSize.collTime = setTimeout(()=>{
-			nextTick(()=>{
-				let parentWidth = likeItemDom.value.parentElement.offsetWidth
-				collItemSize.minCollValue = collItemSize.maxCollValue - Math.round(likeItemDom.value.parentElement.offsetWidth/120)
-				collItemSize.collValue = collItemSize.collValue<collItemSize.minCollValue?collItemSize.minCollValue:collItemSize.collValue
-				let value = collItemSize.maxCollValue - collItemSize.collValue
-				collItemSize.itemStyle.width = (parentWidth - (value * 10)) / value
-				collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
-				
-				collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
-				collItemSize.collStyle.height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1] + 'px'
-
-				collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
-				collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
-				let elArr = likeItemDom.value.children
-				posiitonData.value.likeElList = []
-				for(let i = 0;i < elArr.length;i++){
-					posiitonData.value.likeElList.push({
-						el: elArr[i], 
-						sort: likeDesignCollectionList.value[i].sort - 1, 
-						index: i,
-						userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId
-					});
-				}
-				moveItem('like')
-			})
-			},time)
-		}
-		const setDesignItemStyle = ()=>{
-			posiitonData.value.generateElList = []
-			let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
-			designCollectionList.value.forEach((item:any,index:any)=>{
-				posiitonData.value.generateElList.push({
-					el: elArr[index], 
-					sort: designCollectionList.value.length - index - 1, 
-					index: designCollectionList.value.length - index - 1,
-					userLikeSortId:item.designItemId
-				});
-			})
-			
-		}
-
-		const setDeleteDesign = (value:any,index:any)=>{
-			console.log(value);
-			
-			store.commit("setDeleteDesignCollectionList",index);
-			let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
-			posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
-			
-			posiitonData.value.generateElList.forEach((item:any)=>{
-				if(item.sort > collItem.sort){
-					item.sort-=1
-				}
-			})
-			console.log(posiitonData.value.likeElList);
-			
-			moveItem('')
-		}
-		const cancelDeleteDesign = (index:any)=>{
-			store.commit("cancelDeleteDesignCollectionList",index);
-		}
-		const designMousedown = (e:any,Id:number,str:string)=>{
-			if(str != 'like' && showDesignMark.value) return
-			let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
-			let item:any  = arr.filter((item:any)=>item.userLikeSortId == Id)[0]
-			item.el.style.zIndex = 2;
-			item.el.style.transition = 'all 0s';
-			let startX = e.clientX,
-			startY = e.clientY,
-			left = item.el.offsetLeft,
-			top = item.el.offsetTop;
-			collItemSize.isMove = false
-			let moveFun = (e:any) => {
-				collItemSize.isMove = true
-				let X = e.clientX - startX + left;
-				let Y = e.clientY - startY + top;
-				item.el.style.left = `${X}px`;
-				item.el.style.top = `${Y}px`;
-				reRange(item, X, Y,str);
-			};
-			let mouseUpFun = ()=>{
-				document.removeEventListener('mousemove',mouseMove)
-				document.removeEventListener('touchmove',touchmove)
-
-				document.removeEventListener('mouseup',mouseUpFun) 
-				document.removeEventListener('touchend',mouseUpFun) 
-				item.el.style.zIndex = 1;
-				item.el.style.transition = 'top,left .5s';
-				moveItem(str);
-				if(str == 'like')sortDesignCollection()
-			}
-			let mouseMove = function(event:any){
-				let e = getMousePosition(event,false)
-				moveFun(e)
-			}
-			let touchmove = function(event:any){
-				let e = getMousePosition(event,true)
-				moveFun(e)
-			}
-
-			document.addEventListener('mousemove',mouseMove)
-			document.addEventListener('touchmove',touchmove)
-
-			document.addEventListener('mouseup',mouseUpFun) 
-			document.addEventListener('touchend',mouseUpFun) 
-		}
-		//排序  从大到小
-		const sortDesignCollection = ()=> {
-			let arrData:any = []
-			likeDesignCollectionList.value.forEach((likeItem:any)=>{
-			    let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
-				likeItem.sort = item.sort + 1
-				let obj = {
-					id:likeItem.userLikeSortId,
-					"sort": item.sort + 1,
-					"userLikeGroupId": likeItem.userLikeGroupId,
-					"userLikeId": likeItem.id
-				}
-				arrData.push(obj)
-			})
-			let data = {
-				"userLikeGroupId": userGroupId.value,
-				"userLikeSortList": arrData
-			}
-			Https.axiosPost(Https.httpUrls.designSort, data).then((rv:any)=>{
-			})
-		}
-		const mouseenter = (e:any,str:string)=>{
-		}
-		const reRange = (item:any, x:number, y:number,str:string)=>{
-			let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
-			let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
-			let value = collItemSize.maxCollValue - collItemSize.collValue
-			let width,height,num
-			if(str == 'like'){
-				num = value
-				width = collItemSize.itemStyle.width
-				height = collItemSize.itemStyle.height
-			}else{
-				num = 3
-				width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
-				height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
-			}
-
-			let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
-			moveIndex = elList.length - 1 - moveIndex
-			moveIndex = moveIndex < 0 ? 0 : moveIndex;
-			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
-			if(moveIndex != index){
-				if(str == 'like'){
-					posiitonData.value.likeSelectIndex = moveIndex;
-				}else{
-					posiitonData.value.generateSelectIndex = moveIndex;
-				}
-				let currentSort = item.sort;
-				for(let i = 0;i < elList.length;i++){
-					if(currentSort < moveIndex){
-						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
-							elList[i].sort -= 1;
-						};
-					}else if(currentSort > moveIndex){
-						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
-							elList[i].sort += 1;
-						};
-					}
-				};
-				elList[item.index].sort = moveIndex;
-				moveItem(str);
-			}
-		}
-		const setLikeDislLike = (str:string,value:any)=>{
-			posiitonData.value.likeSelectIndex = 0
-			nextTick(()=>{
-				if(str == 'like'){
-					let elArr = likeItemDom.value.children
-					posiitonData.value.likeElList.push({
-						el: elArr[0], 
-						sort: value.sort - 1, 
-						index: value.sort - 1,
-						userLikeSortId:value.userLikeSortId
-					});
-					let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
-					posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
-					
-					posiitonData.value.generateElList.forEach((item:any)=>{
-						if(item.sort > collItem.sort){
-							item.sort-=1
-						}
-					})
-				}else if(str == 'disLike'){
-					let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
-					posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
-					posiitonData.value.likeElList.forEach((item:any)=>{
-						if(item.sort > value.sort - 1){
-							item.sort-=1
-						}
-					})
-					posiitonData.value.generateElList.push({
-						el: elArr[elArr.length-1], 
-						sort: posiitonData.value.generateElList.length, 
-						index: posiitonData.value.generateElList.length,
-						userLikeSortId:value.designItemId
-					});
-				}
-				moveItem('like');
-				// moveItem('disLike');
-			})
-		}
-		//排列
-		const moveItem = (str:any)=>{
-			let elLikeList = posiitonData.value.likeElList
-			let generateElList = posiitonData.value.generateElList
-			let value = collItemSize.maxCollValue - collItemSize.collValue
-			let width,height
-			width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
-			height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
-			 
-			// let num = str == 'like'?value:3
-			for(let i = 0;i < elLikeList.length;i++){
-				elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
-				elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
-			}
-			for(let i = 0;i < generateElList.length;i++){
-				generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
-				generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
-			}
-		}
 		return {
-			store,
-			likeDesignCollectionList,
-			deleteDesignCollectionList,
-			designCollectionList,
-			userGroupId,
-			userDetail,
-			bindEmail,
-			setPortfolio,
-			designCollectionId,
-			designId,
-			contentImgMax,
-			contentImg,
-			exportNav,
-			isShowOperate,
-			t,
-			driver__,
-			likeDesignItemIdList,
-			workspacePosition,
-			allBoardData,
-			isMannequinShow,
-			chooseIsDesign,
-			portfolio,
-			setSystemDesigner,
-			setDesignItemStyle,
-			showDesignMark,
-			...toRefs(collItemSize),
-			likeItemDom,
-			collItemDom,
-			domHidden,
-			recycleDomHidden,
-			getDesignTime,
-
-			setDeleteDesign,
-			cancelDeleteDesign,
-			designMousedown,
-			sortDesignCollection,
-			getMousePosition,
-			mouseenter,
-			setLikeDislLike,
-			posiitonData,
-			moveItem
-		};
-	},
-	data() {
-		return {
-			isHaveReviewCollection: false,
-			isFinishLoading: false,
-			isShowMark: false, //导出的loading蒙层
-			indicator: h(LoadingOutlined, {
-				style: {
-					fontSize: "4.8rem",
-					marginTop: "3rem",
-					color:"#341e57",
-				},
-				spin: true,
-			}),
-			designProgress: 0,
-			startDesignType: "design", //设计类型 design 和 resdesign
-			disLikeLoading: false, //不喜欢防抖
-			likeLoading: false, //喜欢防抖
-			dragIdx:0,
-			designRandom:'',
-			detailDestroy:false,//销毁detail
-			designFailure:{
-				num:0,
-				currentNum:0,
-			},//获取20次都为空的话就停止获取
-			
-		};
-	},
-	watch: {
-		workspacePosition:{
-			handler(newVal:any,oldVal:any){
-				this.isMannequin()
-			},
-		},
-		allBoardData:{
-			handler(newVal:any,oldVal:any){
-				this.isMannequin()
-			},
-		},
-	},
-	
-	beforeUnmount(){
-		clearTimeout(this.getDesignTime);
-		sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
-		sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
-		sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
-		this.sortDesignCollection()
-		window.removeEventListener('resize', this.setDesignItemPosition)
-
-	},
-	async mounted() {
 		
-		// if(JSON.parse( getCookie('isFirst') as any)){
-		// }
-		let test:any = getCookie('isTest')
-        let isTest =JSON.parse(test)
-		this.store.dispatch('get_clothingType')
-		//判断账号剩余时间是否太短
-		let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
-	
-		if(!getCookie('isBeginner') || this.userDetail.systemUser == 0)return
-		// if(this.store.state.UserHabit.bindEmail.isBindEmail)return
-		if(!isModalOne){//判断是否是试用用户
-		// if(!isTest && !isModalOne){//判断是否是试用用户
-			await new Promise(async (resolve) => {
-				if(isTest){
-					openGuide()
-					resolve('')
-				}else{
-					await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv: any) => {
-						if (rv) {
-							let dateNow = Date.now()
-							let date:any =  new Date(dateNow)
-							let rvDate:any = new Date(rv);
-							let diffInMilliseconds = Math.abs(date - rvDate); // 获取时间差的毫秒数
-							let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
-							let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
-							let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
-							if(days < 5){
-								setTimeout(() => {
-									let text = {
-										str:`${this.t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${this.t('HomeView.jsContent8')}</a>`,
-										title:`${this.t('HomeView.jsContent7')}`,
-									}
-									this.affiche(text)
-								}, 500);
-							}else{
-								openGuide()
-							}
-							resolve('')
-						}else{
-							openGuide()
-							resolve('')
-						}
-					})
-				}
-				
-
-			})
-		}else if(!isModalOne && isTest){
-		}else{
-			openGuide()
-		}
-		let noRefresh = this.$route.params.noRefresh; //判断是否主动刷新还是路由跳转过来的 true 路由跳转过来的
-		window.addEventListener('beforeunload', (event)=>{
-			this.store.commit("clearAllCollection");
-		});
-		if (this.$route.name == "homePage") {
-			let colorBoards =
-				this.store.state.UploadFilesModule.allBoardData.colorBoards ||
-				[];
-			if (colorBoards.length) {
-				this.isHaveReviewCollection = true;
-			}
-		} else {
-			// this.store.commit("setUserGroupId", this.$route.params.id);
-			// this.store.commit("clearAllCollection");
-		}
-		if (this.$route.params.id) {
-			if(this.$route.params.type == 'History'){
-				this.getHistoryChoose(this.$route.params.id, "normal");
-			}else if(this.$route.params.type == 'Works'){
-				this.getWorks(this.$route.params.id, "normal");
-			}
-			this.store.commit("setDesignCollectionList",[]);
-		} else {
-			// this.store.commit("clearAllData");
-		}
-		// let dataa:any = {
-		// 	designItemId: 63094,
-		// 	designItemUrl: null,
-		// 	designOutfitId: 62798,
-		// 	designOutfitUrl:''
-		// }
-		// let designDetail: any = this.$refs.designDetail;
-		// 	let data = {
-		// 		design: dataa,
-		// 		index: 0,
-		// 		collectionList: [],
-		// 		type: 'dislike',
-		// 	};
-		// 	designDetail.showDesignDetailModal(data);
-		window.addEventListener('resize', this.setDesignItemPosition)
-		this.setSystemDesigner(0)
-		this.setDesignItemStyle()
-	},
-	directives:{
-		mousewheel:{
-			mounted (el) {
-				let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
-				let dom:any = document.getElementsByClassName('right_content_body')
-				let mouseover = ()=>{
-					bodyDom.classList.add('active')
-				}
-				let mouseleave = ()=>{
-					bodyDom.classList.remove('active')
-				}
-				dom.forEach((item:any) => {
-					item.addEventListener('mouseover',mouseover)
-					item.addEventListener('mouseleave',mouseleave)
-				});
-				
-			
-				el.addEventListener('wheel',(e:WheelEvent)=>{
-					let num = 0
-					if(e.deltaY > 0){
-						num = 25
-					}else{
-						num = -25
-					}
-					el.scrollBy(num, 0);
-				},{ passive: true })
-			}
-		}
-	},
-	methods: {
-		// addTeam (team:any) {
-		// this.likeDesignCollectionList.push(team)
-		// },
-		setDesignItemPosition(){
-			this.setSystemDesigner(0)
-			this.setDesignItemStyle()
-		},
-		affiche(text:any){
-			nextTick(()=>{
-			    let affiche:any = this.$refs.affiche
-				affiche.init(text)
-			})
-			
-			// affiche.afficheMask = true
-		},
-		
-		//判断模特和当前start的sketch是否匹配
-		isMannequin(){
-			this.isMannequinShow = false
-			let num = 0
-			this.allBoardData?.sketchboardFiles?.forEach((sketchItem:any) => {
-				
-				this.workspacePosition.forEach((positionItem:any) => {
-
-					if(positionItem.value == sketchItem.categoryValue){
-						num ++ 
-					}
-				});
-				
-			});
-			if(this.allBoardData?.sketchboardFiles?.length && this.allBoardData?.sketchboardFiles?.length>0){
-				if(num != this.allBoardData?.sketchboardFiles?.length){
-					this.isMannequinShow = true
-				}
-			}else{
-				this.isMannequinShow = false
-			}
-		},
-		formatter(value: number) {
-			return `${value}%`;
-		},
-		//开始设计collection
-		startNewCollection() {
-			let collectionModal: any = this.$refs.collectionModal;
-			this.store.commit("clearAllData");
-			collectionModal.changeCollectionModal(true);
-			if(this.driver__.driver){
-				nextTick().then(()=>{
-					driverObj__.moveNext();
-				})
-			}
-		},
-
-		//recollection
-		recollection() {
-			let collectionModal: any = this.$refs.collectionModal;
-			this.store.commit("clearAllData");
-			collectionModal.changeCollectionModal(true);
-			collectionModal.recollection();
-		},
-
-		resetCollection(){
-			let _this = this
-			Modal.confirm({
-				title: this.t('HomeView.jsContent9'),
-				icon: createVNode(ExclamationCircleOutlined),
-				okText: 'Yes',
-				cancelText: 'No',
-				mask:false,
-				centered:true,
-				onOk() {
-					_this.store.commit("clearAllData");
-					_this.store.commit("clearAllCollection");
-					_this.store.commit("setAllBoardDataChoose",{});
-					_this.store.commit("clearShowSketchboard",{});
-					_this.isHaveReviewCollection = false
-				}
-			});
-		},
-		//完成设计
-		finishCollection() {
-			this.isHaveReviewCollection = true;
-			this.isFinishLoading = false;
-		},
-		getContainer() {
-			return document.querySelector("#system_silder");
-		},
-
-		//设计新的collection
-		designNewCollection() {
-			if(!this.chooseIsDesign.value){
-				message.info(this.t('HomeView.jsContent10'));
-				return
-			}
-			let { colorBoards } =
-				this.store.state.UploadFilesModule.allBoardData;
-			if (!colorBoards || colorBoards?.length < 1) {
-				message.info(
-					this.t('HomeView.jsContent1')
-				);
-				return;
-			}
-			clearTimeout(this.getDesignTime);
-			let data = this.getDesignData("");
-			if(this.driver__.driver){
-				nextTick().then(()=>{
-					driverObj__.moveNext();
-				})
-			}
-			this.isShowMark = true
-			this.store.commit("setLikeDesignCollectionList", []);
-			Https.axiosPost(Https.httpUrls.designCollection, data)
-			
-				.then((rv: any) => {
-					if (rv) {
-						let value = {
-							objectSignList:data.requestIdList.join(),
-							requestId:rv
-						}
-						this.posiitonData.generateElList.forEach((item:any) => {
-							item.sort -= 1
-						})
-						this.moveItem('disLike')
-
-						this.getDesignResult(value,'newDesign')
-						this.startDesignType = "design";
-						this.posiitonData.likeSelectIndex = 0
-						this.posiitonData.likeElList = []
-					}
-					this.isShowMark = false;
-				})
-				.catch((res) => {
-					this.isShowMark = false;
-				})
-				// this.getDesignProcess(this.designRandom);
-		},
-		getDesignResult(data:any,str:any){
-			this.showDesignMark = true
-			this.recycleDomHidden = true
-			this.setSystemDesigner(0)
-			Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
-			.then(async (rv)=>{
-				if(rv.designCollectionItems){
-					let arr:any = []
-					if(this.designCollectionList.length == 0){
-						arr.push(...rv.designCollectionItems)
-					}else{
-						arr = rv.designCollectionItems.filter((itemA:any) => 
-							!this.designCollectionList.some((itemB:any) => itemA.objectSign === itemB.objectSign)
-						);
-					}
-					for (let index = 0; index < arr.length; index++) {
-						const item = arr[index];
-						await new Promise((resolve, reject) => {
-							setTimeout(() => {
-								this.designCollectionList.unshift(item)
-								nextTick().then(()=>{
-									let dom:any = this.$refs.collItemDom
-								    let elArr:any = dom.querySelectorAll(".content_img_GetWidth");
-									this.posiitonData.generateElList.push({
-										el: elArr[0], 
-										sort: elArr.length - 2, 
-										index: elArr.length - 1,
-										userLikeSortId:item.designItemId
-									});
-									this.moveItem('disLike')
-								})
-								resolve('')
-							}, 200);
-						})
-					}
-				}
-				if(rv.unfinishedList.length == 0){
-					this.showDesignMark = false
-					if(str == 'newDesign'){
-						if(rv.designCollectionItems){
-							this.store.commit("deleteUserGroupId");
-							this.store.commit(
-								"setDesignCollectionId",
-								rv.collectionId
-							);
-							this.store.commit("setDesignId", rv.designId);
-						}
-					}else{
-						// this.designProgress = 0,
-						this.store.commit("setDesignId", rv.designId);
-					}
-					nextTick().then(()=>{
-						driverObj__.moveNext();
-						this.posiitonData.generateElList.forEach((item:any) => {
-							item.sort += 1
-						});
-						this.moveItem('disLike')
-
-					})
-				}else{
-					data.objectSignList = rv.unfinishedList.join()
-					this.getDesignTime = setTimeout(()=>{
-						if(this.designFailure.currentNum == rv.unfinishedList.length){
-							this.designFailure.num++
-							if(this.designFailure.num >= 10)data.objectSignList=''
-						}else{
-							this.designFailure.num = 0
-						}
-						this.getDesignResult(data,str)
-					},1000)
-				}
-			}).catch(()=>this.showDesignMark = false)
-		},
-		//重新设计collection
-		resDesignCollection() {
-			let { colorBoards } =
-				this.store.state.UploadFilesModule.allBoardData;
-			if (!colorBoards || colorBoards?.length < 1) {
-				message.info(
-					this.t('HomeView.jsContent2')
-				);
-				return;
-			}
-			if(this.driver__.driver){
-				nextTick().then(()=>{
-					driverObj__.moveNext();
-				})
-			}
-			clearTimeout(this.getDesignTime);
-			this.isShowMark = true
-			let data = this.getDesignData(this.designCollectionId);
-			Https.axiosPost(Https.httpUrls.reDesignCollection, data)
-				.then((rv: any) => {
-					if (rv) {
-						let value = {
-							objectSignList:data.requestIdList.join(),
-							requestId:rv
-						}
-						this.posiitonData.generateElList.forEach((item:any) => {
-							item.sort -= 1
-						})
-						this.moveItem('disLike')
-						this.getDesignResult(value,'resDesign')
-						this.startDesignType = "resDesign";
-						this.isShowMark = false
-					}
-				})
-				.catch((res) => {
-					this.isShowMark = false;
-				});
-				// this.getDesignProcess(this.designRandom);
-
-		},
- 
-		getDesignData(designCollectionId: any) {
-			let {
-				moodboardFiles,
-				printboardFiles,
-				disposeMoodboard,
-				// generatePrintFiles,
-				colorBoards,
-				sketchboardFiles,
-				marketingSketchFiles,
-				moodboardPosition,
-			} = this.store.state.UploadFilesModule.allBoardData;
-			this.randomNum()
-			let workspace = this.store.state.Workspace.workspace
-			let data: any = {
-				colorBoards: this.getColorBoard(colorBoards),
-				// marketingSketchs: this.getBoardId(marketingSketchFiles),
-				moodBoards: this.getBoardId(moodboardFiles),
-				printBoards: this.getPrintId(printboardFiles),
-				sketchBoards: this.getSkecthBoard(sketchboardFiles),
-				moodboardPosition: JSON.stringify(moodboardPosition),
-				switchCategory: !workspace.overallSingle ?"": workspace.position,
-				singleOverall: !workspace.overallSingle ? "overall" : "single",
-				systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
-				// templateId: 3377,
-				templateId: workspace.mannequinId?workspace.mannequinId:'',
-				modelType:workspace.mannequinType,
-				modelSex:workspace.sex,
-				moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
-				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-				processId:this.designRandom
-			};
-			// data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
-			this.setSystemDesigner(0)
-			this.designFailure = {
-				num:0,
-				currentNum:0,
-			}
-			let isLoad = false
-			if(designCollectionId == -1){
-				isLoad = true
-			} else if (designCollectionId) {
-				data.collectionId = designCollectionId;
-			}
-			if(!isLoad){
-				// this.designProgress = 0;
-				// this.isShowMark = true;
-			}
-			let arr = []
-			for (let index = 0; index < 8; index++) {
-				let floor = Math.floor(Math.random() * 90000000) + 10000000
-				arr.push(floor)
-			}
-			data.requestIdList = arr
-			return data;
-		},
-
-		//deisgn的进度
-		getDesignProcess(num:any) {
-			Https.axiosGet(Https.httpUrls.designProcess,{params:{processId:num}}).then((rv: any) => {
-				if (rv) {
-					
-				}
-				if (this.showDesignMark) {
-					this.designProgress = rv;
-					if(rv == 100){
-						setTimeout(() => {
-							this.showDesignMark = false 
-							this.designProgress = 0
-							if(this.driver__.driver){
-								nextTick().then(()=>{
-									driverObj__.moveNext();
-								})
-							}
-						}, 500);
-
-					}
-					setTimeout(() => {
-						this.getDesignProcess(num);
-					}, 500);
-				}
-			})
-			// Https.axiosPost(Https.httpUrls.designProcess, {}).then(
-			// 	(rv: any) => {
-			// 		if (rv < 1 && this.showDesignMark) {
-			// 			this.designProgress = rv * 100;
-			// 			setTimeout(() => {
-			// 				this.getDesignProcess();
-			// 			}, 1000);
-			// 		}
-			// 	}
-			// );
-		},
-		randomNum(){
-			this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
-		},
-		getBoardId(boardData: any) {
-			let dataList = boardData.map((v: any) => {
-				let data: any = {
-					id: v.resData.id,
-					designType: v.resData.designType,
-				};
-				return data;
-			});
-			return dataList;
-		},
-
-		getPrintId(boardData: any) {
-			let dataList = boardData.map((v: any) => {
-				let data: any = {
-					id: v.resData.id,
-					designType: v.resData.designType,
-					level2Type: v.categoryValue,
-					isPin: v.pin ? 1 : 0,
-				};
-				return data;
-			});
-			return dataList;
-		},
-
-		getSkecthBoard(boardData: any) {
-			let sketchBoards = boardData.map((v: any) => {
-				let data = {
-					designType: v.resData.designType,
-					isPin: v.pin ? 1 : 0,
-					level2Type: v.categoryValue,
-					sketchBoardId: v.resData.id,
-				};
-				return data;
-			});
-			return sketchBoards;
-		},
-
-		getColorBoard(boardData: any) {
-			let colorBoards = boardData.map((v: any) => {
-				let data = {
-					id: v.id,
-					name: v.name,
-					tcx: v.tcx,
-					gradient:v.gradient,
-					rgbValue: "",
-				};
-				data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
-				return data;
-			});
-			return colorBoards;
-		},
-		deleteDesignCollection(list:any,index:any){
-			list.splice(index,1)
-		},
-		likeDesignCollection(design: any, index: any) {
-			let data = {
-				designItemId: design.designItemId,
-				userGroupId: this.userGroupId,
-				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-				designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
-			};
-			if (this.likeLoading) {
-				return;
-			}
-			
-			this.likeLoading = true;
-			Https.axiosPost(Https.httpUrls.designLike, data)
-				.then((rv: any) => {
-					if (rv) {
-						let value:any = {
-							...design,
-							id:rv.userLikeId,
-							groupDetailId:rv.userLikeId,
-							userLikeSortId:rv.userLikeSortId,
-							userLikeGroupId:rv.userGroupId,
-							sort:rv.sort,
-						}
-						this.store.commit("setUserGroupId", rv.userGroupId);
-						design.groupDetailId = rv.groupDetailId;
-						this.store.commit(
-							"addLikeDesignCollectionList",
-							value
-						);
-						this.setLikeDislLike('like',value)
-						this.store.commit("deleteDesignCollectionList", index);
-						if (this.startDesignType === "resDesign") {
-							this.getHistoryChoose(this.userGroupId, "like");
-						}
-					}
-					this.likeLoading = false;
-					if(this.driver__.driver){
-						driverObj__.moveNext();
-					}
-				})
-				.catch((rv) => {
-					this.likeLoading = false;
-				});
-		},
-
-		//不喜欢设计
-		dislikeDesignCollection(design: any, index: any) {
-			let data = {
-				designId: design.designId || this.designId,
-				designPythonOutfitId:design.designOutfitId,
-				groupDetailId: design.groupDetailId,
-				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-			};
-			if (this.disLikeLoading) {
-				return;
-			}
-			this.disLikeLoading = true;
-			Https.axiosPost(Https.httpUrls.designDislike, data)
-				.then((rv: any) => {
-					if (rv) {
-						this.store.commit("addDesignCollectionList", design);
-						this.store.commit(
-							"deleteLikeDesignCollectionList",
-							index
-						);
-						this.likeDesignCollectionList.forEach((item:any)=>{
-							if(item.sort > design.sort){
-								item.sort-=1
-							}
-						})
-					
-						this.setLikeDislLike('disLike',design)
-						// if (!this.likeDesignCollectionList.length) {
-						// 	this.store.commit("deleteUserGroupId");
-						// }
-					}
-					this.disLikeLoading = false;
-				})
-				.catch((rv) => {
-					this.disLikeLoading = false;
-				});
-		},
-
-
-		//获取选择的组
-		getHistoryChoose(userGroupId: any, type: any) {
-			
-			this.isShowMark = true;
-			let url =
-				Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
-			Https.axiosGet(url)
-				.then((rv: any) => {
-					this.setPortfolio(rv.portfolioDTO)
-					this.store.commit("setUserGroupId", rv.userGroupId);
-					this.dealHistoryChooseData(rv, type);
-					this.isShowMark = false;
-				})
-				.catch((rv) => {
-					this.isShowMark = false;
-				});
-		},
-		getWorks(userGroupId: any, type: any) {
-			let data:any = {
-				"accountId": 0,
-				"collectionId": 0,
-				"coverId": 0,
-				"createDate": "",
-				"id": userGroupId,
-				"isDeleted": 0,
-				"portfolioDes": "",
-				"portfolioName": "",
-				"portfolioType": "",
-				"status": 0,
-				"updateDate": "",
-				"userLikeGroupId":'' 
-			}
-			this.isShowMark = true;
-			Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
-					(rv: any) => {
-						this.setPortfolio(rv.portfolioDTO)
-						this.store.commit("setUserGroupId", rv.userGroupId);
-						this.dealHistoryChooseData(rv, type);
-						this.isShowMark = false;
-					}
-				).catch((res)=>{
-					this.isShowMark = false;
-				});
-		},
-		//处理选择组的数据
-		dealHistoryChooseData(data: any, type: any) {
-			let collectionData = {
-				disposeMoodboard: data.collection.moodTemplateId?[{
-					id:data.collection.moodTemplateId,
-					imgUrl:data.collection.moodTemplateUrl,
-					resData:{
-						name:data.collection.moodTemplateName,
-					}
-				}]:[],
-				moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):{},
-				moodboardFiles: this.dealViewChooseData(
-					data.collection.moodBoards,"Moodboard"
-				),
-				printboardFiles: this.dealViewChooseData(
-					data.collection.printBoards,"Printboard"
-				),
-				generatePrintFiles: [],
-				colorBoards: this.dealViewChooseColor(
-					data.collection.colorBoards
-				),
-				sketchboardFiles: this.dealViewChooseData(
-					data.collection.sketchBoards,"Sketchboard"
-				),
-				marketingSketchFiles: this.dealViewChooseData(
-					data.collection.marketingSketchs,""
-				),
-				
-			};
-			this.store.commit("setAllBoardDataChoose", collectionData);
-			// this.store.commit('clearShowSketchboard')
-			this.store.commit("setShowSketchboard", data.collection.sketchBoards);
-			this.store.commit(
-				"setDesignCollectionId",
-				data.collection.collectionId
-			);
-			this.isHaveReviewCollection = true;
-			if (type === "normal") {
-
-				let likeDesignCollectionList = data.userLikeDetails.map(
-					(v: any) => {
-						let data = {
-							...v,
-							groupDetailId: v.id,
-							designItemUrl: v.designOutfitUrl,
-							designItemId: v.designItemId,
-						};
-						return data;
-					}
-				);
-				this.store.commit(
-					"setLikeDesignCollectionList",
-					likeDesignCollectionList
-				);
-			}
-			this.setSystemDesigner(100)
-		},
-
-		//统一处理选择组的渲染数据
-		dealViewChooseData(data: any,str:string) {
-			if (!data) {
-				return [];
-			}
-			let filesList = data.map((v: any) => {
-				let newData: any = {
-					imgUrl: v.url?v.url:v.designOutfitUrl,
-					id: v.id,
-					status: "done",
-					resData: v,
-					type_:{
-						type1:'material',
-						type2:v.level1Type
-					}
-				};
-				if (v.level1Type === "Sketchboard") {
-					newData.pin = v.isPin;
-					newData.categoryValue = v.level2Type;
-					newData.level2Type = v.level2Type;
-				}
-				if (v.level1Type === "Printboard") {
-					newData.pin = v.isPin;
-					newData.level2Type = v.level2Type;
-					newData.categoryValue = v.level2Type;
-				}
-				return newData;
-			});
-			return filesList;
-		},
-
-		//统一处理选择组的渲染数据
-		dealViewChooseColor(data: any) {
-			let colorList = data.map((v: any) => {
-				let rgbValue = v.rgbValue.split(" ");
-				let newData: any = {
-					id: v.id,
-					name: v.name,
-					tcx: v.tcx || "",
-					rgbValue: {
-						r: rgbValue[0],
-						g: rgbValue[1],
-						b: rgbValue[2],
-						a: 1,
-					},
-				};
-				if(v.gradient){
-					newData.gradient = v.gradient;
-				}else{
-					delete newData.gradient;
-				}
-				return newData;
-			});
-			return colorList;
-		},
- //点击下拉图标出现操作
-		changeShowOperateContent() {
-            this.isShowOperate = !this.isShowOperate;
-            document.addEventListener(
-                "click",
-                this.closeShowOperateContent,
-                false
-            );
-        }, 
-		//关闭下拉图标
-        closeShowOperateContent() {
-            this.isShowOperate = false;
-            document.removeEventListener("click", this.closeShowOperateContent);
-        },
-		exportModel(){
-			let productImg:any = this.$refs.productImg
-			productImg.productImgMask = true
-			productImg.init(this.userGroupId)			
-			
-		},
-		//销毁图片详情
-		setDetailDestroy() {
-		    // let designDetail: any = this.$refs.designDetail;
-			// designDetail.destroy();
-			this.detailDestroy = false
-		},
-		//打开图片详情
-		designDetail(
-			design: any,
-			index: number,
-			collectionList: any,
-			type: string
-		) {
-			if(this.isMove)return
-			design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
-			let data = {
-				design: design,
-				index: index,
-				collectionList: collectionList,
-				type: type,
-			};
-			this.detailDestroy = true
-			nextTick(()=>{
-				let designDetail: any = this.$refs.designDetail;
-				designDetail.showDesignDetailModal(data);
-			})
-		},
-
-		//完成单个图片设计
-		finishRedesign(event: any) {
-			let { design, index, type } = event;
-			if (type === "dislike") {
-				this.store.commit("setSingleDesignCollectionList", {
-					index: index,
-					design: design,
-				});
-			} else {
-				this.store.commit("setSingleLikeDesignCollectionList", {
-					index: index,
-					design: design,
-				});
-			}
-			this.setDetailDestroy()
-		},
-		setTask(data:any){
-			this.$emit('setTask',data)
-			// this.exportModel()
-		},
-		setShowHide(str:string){
-			if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
-			if(str == 'domHidden')this.domHidden = !this.domHidden
-			this.setSystemDesigner(0)
-		}
+		};
 	},
 });
 </script>
 <style lang="less" scoped>
-.home_page {
-	width: 100%;
-	height: 100%;
-	padding: 0 6rem;
-	// overflow: hidden;
-	// min-width: 1440px;
-	position: relative;
-	// left: 50%;
-	// margin-left: -50%;
-	// transform: translateX(-50%);
-	
-	.page_content {
-		position: relative;
-		
-		.userSystem{
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			background: rgba(0, 0, 0, 0.4);
-			z-index:2;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			color: #fff;
-			font-weight: 600;
-			font-size: 4rem;
-		}
-		.home_page_left_bottom{
-			position: absolute;
-			width: 4rem;
-			height: 7rem;
-			background: #fff;
-			border: 2px solid;
-			border-right: none;
-			border-radius: 2rem 0 0 2rem;
-			top: 50%;
-			transform: translate(-100%,-50%);
-			left: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			z-index: 2;
-			cursor: pointer;
-			>span{
-				transition: all .3s;
-				transform: rotate(90deg);
-				&.active{
-					transform: rotate(270deg);
-				}
-			}
-			
-		}
-		.page_content_body {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			padding-bottom: 4rem;
-			box-sizing: border-box;
-			z-index:1;
-			.home_page_body {
-				width: 100%;
-				height: 100%;
-				display: flex;
-				// padding-left: 0.7rem;
-				box-sizing: border-box;
-				// overflow: hidden;
-
-				.home_page_left {
-					// width: 44.4rem;
-					height: 100%;
-					padding: 2rem 0 0 0;
-					background: rgba(255, 255, 255, 0.2);
-					position: relative;
-					// overflow: hidden;
-					
-					
-					.home_page_left_content {
-						height: 100%;
-						width: 55rem;
-						overflow: hidden;
-						// transition: all .3s;
-						padding-right: 1.2rem;
-						&.active{
-							padding-right: 0;
-							width: 0;
-						}
-						.home_left_null {
-							display: flex;
-							align-items: center;
-							justify-content: center;
-							text-align: center;
-							width: 100%;
-							height: 100%;
-							position: relative;
-							background: #f6f6fa;
-							border-radius: 2rem;
-							overflow: hidden;
-
-							.home_null_icon {
-								display: block;
-								width: 32.3rem;
-							}
-
-							.new_collection_button {
-								padding: .5rem 5rem;
-								height: 4rem;
-								line-height: 4rem;
-								background: #fff;
-								font-size: 1.3rem;
-								color: #000000;
-								margin: 1.2rem auto 0;
-								text-align: center;
-								cursor: pointer;
-								display: inline-block;
-								box-sizing: initial;
-								border: 2px solid #000;
-								font-weight: 600;
-								border-radius: 15px;
-							}
-
-							.is_finish_loading {
-								width: 100%;
-								height: 100%;
-								position: absolute;
-								left: 0;
-								top: 0;
-								background: #ffffff;
-								display: flex;
-								align-items: center;
-								justify-content: center;
-							}
-						}
-
-						.home_left_info {
-							height: 100%;
-							display: flex;
-							flex-direction: column;
-							.left_info_top {
-								padding: 0 0 1.3rem 0;
-								display: flex;
-
-								.button_margin {
-									margin-left: 2rem;
-								}
-							}
-
-							.left_info_content {
-								width: 100%;
-								height: calc(100% - 6.9rem);
-								overflow-y: auto;
-								background: #ffffff;
-								&.left_info_content::-webkit-scrollbar {
-									display: none;
-								}
-
-								.left_info_content_body {
-									width: 100%;
-								}
-							}
-							.left_info_hint{
-								display: flex;
-								span{
-									font-size: 1.3rem;
-									display: inline-block;
-								}
-							}
-						}
-					}
-				}
-
-				.home_page_right {
-					// width: calc(100% - 44.4rem);
-					flex: 1;
-					height: 100%;
-					width: 100%;
-					// overflow: hidden;
-					display: flex;
-					flex-direction: column;
-					justify-content: space-between;
-					position: relative;
-					.home_page_left_bottom{
-						border-radius: 0 2rem 2rem 0rem;
-						left: 2rem;
-						top: 50%;
-						left: auto;
-						right: 0;
-						transform: translate(100%, -50%);
-						// top: calc(50% - 10.4rem / 2);
-						border: 2px solid;
-						border-left: none;
-						background: #000;
-						color: #fff;
-						flex-direction: column;
-						&.active{
-							right: 53rem;
-							transform: translate(0, -50%);
-						}
-					}
-					.right_top {
-						padding: 2rem 3.2rem 2rem 1.2rem;
-						display: flex;
-						justify-content: space-between;
-						box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
-						background: rgba(255, 255, 255, 0.4);
-						transition: all .3s;
-						&.active{
-							overflow: hidden;
-							padding-top: 0;
-							padding-bottom: 0;
-							height: 0;
-						}
-						.right_top_left {
-							display: flex;
-							align-items: center;
-							width: 100%;
-							.button_margin_14 {
-								margin-left: 1.4rem;
-							}
-							.silder{
-								display: flex;
-								align-items: center;
-								.text{
-									font-weight: 600;
-									font-size: 1.8rem;
-								}
-								.system_silder{
-									margin: 0 3rem;
-									width: 12rem;
-								}
-							}
-						}
-					}
-					.right_content_block_box{
-						flex: 1;
-						display: flex;
-						overflow: hidden;
-					}
-					.right_content_block {
-						flex: 1;
-						display: flex;
-						width: 0;
-						flex-direction: column;
-						&.recycleBin{
-							flex: none;
-							margin-left: 0;
-							width: 0;
-							overflow: hidden;
-							&.recycleBinShow{
-								width: auto;
-								margin-left: 2rem;
-							}
-							.right_content_body {
-								width: 55rem;
-								.right_content_img_block{
-									
-									.content_img_block{
-										width: 16rem;
-										height: 23rem;
-									}
-								}
-							}
-						}
-						&.right_content_block::-webkit-scrollbar{display: none;}
-						&.active{
-							overflow: hidden;
-						}
-						.right_content_header {
-							display: flex;
-							justify-content: space-between;
-							height: 4.5rem;
-							align-items: center;
-							padding: 0 3.2rem 0 1.9rem;
-							background: rgba(255, 255, 255, 0.2);
-							position: relative;
-							.right_content_export{
-								display: flex;
-								align-items: center; 
-								position: relative;
-								.icon-xiala{
-									cursor: pointer;
-									transition: .3s all;
-									margin-left: 1rem;
-								}
-								.icon_rotate{
-									-moz-transform: rotate(180deg);
-									-webkit-transform: rotate(180deg);
-									transform: rotate(180deg);
-									animation-direction: 0.5s;
-								}
-								.export_nav{
-									display: flex;
-									flex-direction: column;
-									position: absolute;
-									top: 5.5rem;
-									width: 100%;
-									background: #fff;
-									padding: 1rem;
-									border: 2px solid;
-									z-index: 2;
-									label{
-										margin: 0;
-									}
-								}
-							}
-							.content_header_left {
-								display: flex;
-								justify-content: space-between;
-								align-items: center;
-
-								.icon-dangqianweizhi {
-									font-size: 1.6rem;
-									color: #000;
-								}
-
-								.content_header_des {
-									font-size: 1.6rem;
-									color: #000000;
-									margin-left: 1rem;
-									font-weight: 900;
-								}
-							}
-						}
-						.right_content_body {
-							// padding: 0 1.8rem 0 1.2rem;
-							// height: calc(50% - 4.5rem);
-							flex: 1;
-							overflow: auto;
-							background: #f6f6fa;
-							border-radius: 2rem;
-							display: flex;
-							flex-direction: column;
-							.right_content_img_block {
-								// overflow-y: auto;
-								height: 100%;
-								flex: 1;
-								display: flex;
-								width: auto;
-								// overflow: hidden;
-								align-items: center;
-								// padding-bottom: 1rem;
-								overflow-x: auto;
-								justify-content: center;
-								&.active::-webkit-scrollbar {
-									display: none;
-								}
-								// &.active::-webkit-scrollbar-button:single-button{
-								// 	display: none;
-								// }
-								// &.active::-webkit-scrollbar {
-								// 	/* 竖轴的宽度 */
-								// 	width: 1rem;
-								// 	/* 横轴的高度 */
-								// 	height: 1rem;
-								// 	transition: all .3s;
-								// }
-								// /* 进度 */
-								// &.active::-webkit-scrollbar-thumb {
-								// 	border-radius: 1rem;
-								// 	background: rgba(238, 238, 244, 0);
-								// }
-								// /* 轨道 */
-								// &.active::-webkit-scrollbar-track {
-								// 	border-radius: 1rem;
-								// 	background: rgba(238, 238, 244, 0);
-								// }
-								// &.active:hover {
-								// 	// overflow-x: scroll;
-								// 	&.active::-webkit-scrollbar-thumb {
-								// 		background: #543087;
-								// 	}
-								// 	/* 轨道 */
-								// 	&.active::-webkit-scrollbar-track {
-								// 		background: rgba(84, 48, 135,.2);
-								// 	}
-								// }
-								>div{
-									display: flex;
-									flex-wrap: wrap;
-									// padding: 0 2.8rem 0 0.9rem;
-									width: 100%;
-									height: 100%;
-									// align-content: flex-start;
-									overflow-x: hidden;
-									position: relative;
-									&::-webkit-scrollbar {
-										display: none;
-									}
-								}
-								.content_img_block {
-									// width: 24rem;
-									// height: 37rem;
-									width: calc(33.33% - 30px);
-									height: calc((33.33% - 30px) * 1.54);
-									box-sizing: border-box;
-									margin: 5px;
-									// min-height: 271px;
-									// max-height: 80%;
-
-									display: inline-block;
-									position: relative;
-									vertical-align: top;
-									flex-shrink: 0;
-									display: flex;
-									align-items: center;
-									justify-content: center;
-									position: absolute;
-									transition: top,left .3s;
-									&:hover .icon_like,&:hover .icon_delete,&:hover .Dustbin {
-										display: block;
-									}
-
-									// &:nth-child(4n) {
-									// 	margin-right: 0;
-									// }
-
-									.content_img_flex {
-										display: flex;
-										justify-content: center;
-										align-items: center;
-										width: 100%;
-										height: 100%;
-										border-radius: 2rem;
-										border: 2px solid #E0E0E0;
-										background: #fff;
-									}
-									&.active{
-										.icon_like,.icon_delete{
-											display: block;
-										}
-										.content_img_flex {
-											border: 2px solid #000;
-										}
-									}
-									.content_img {
-										// max-width: 100%;
-										width: 100%;
-										height: 100%;
-										// max-height: 100%;
-										object-fit: contain;
-									}
-									.Dustbin{
-										position: absolute;
-										top: 50%;
-										left: 50%;
-										transform: translate(-50%,-50%);
-										cursor: pointer;
-										color: #fff;
-										border-radius: 4rem;
-										font-size: 1.8rem;
-										padding: 1rem 1.5rem;
-										background: rgba(0, 0, 0, 0.7);
-										display: none;
-									}
-									.icon_like,.icon_delete {
-										font-size: 2.4rem;
-										top: 1rem;
-										right: 1rem;
-										position: absolute;
-										cursor: pointer;
-										display: none;
-									}
-									.icon_delete{
-										top: 5rem;
-									}
-									.icon-jushoucang {
-										color: #000;
-									}
-									.icon-jushoucanggift {
-										// color: rgba(52, 53, 121, 1);
-										color: #000;
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-
-		.page_content_bg {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	.progress_mark {
-		background: #ffffff;
+	.homeView{
 		width: 100%;
 		height: 100%;
-		position: fixed;
-		left: 0;
-		top: 0;
-		z-index: 9999;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		.mark_content {
-			text-align: center;
-		}
+		position: relative;
 	}
-}
 </style>
\ No newline at end of file