push Develop

.env.dev

@@ -7,6 +7,6 @@ VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # VUE_APP_BASE_URL = 'http://192.168.1.9:17088'
 # VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
 # 佩佩
-# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
+VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
 # 海波
-# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
+VUE_APP_BASE_URL = 'http://192.168.1.9:5567'

src/assets/style/style.css

@@ -116,9 +116,15 @@ li {
   border-radius: 5px;
   padding: 0.6rem 0.5rem;
 }
+.select_block {
+  height: 4rem;
+}
+.select_block .ant-select {
+  height: 100%;
+}
 .select_block .ant-select:not(.ant-select-customize-input) .ant-select-selector {
   background: transparent;
-  height: 4rem;
+  height: 95%;
   border: 0.1rem solid rgba(0, 0, 0, 0) !important;
   border-radius: 0;
   box-shadow: none !important;
@@ -467,6 +473,9 @@ li {
   top: auto;
   margin: 0 9rem;
 }
+.ant-modal {
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+}
 .ant-modal-confirm-confirm .ant-modal-content {
   border-radius: 1rem;
 }
@@ -609,8 +618,6 @@ li {
 .generalModel .ant-modal-body {
   padding: 0;
   height: calc(65rem*1.2);
-}
-.generalModel .ant-modal-body {
   padding: calc(4rem*1.2) calc(5rem*1.2);
 }
 .generalModel .fi-rr-down-to-line,
@@ -937,14 +944,17 @@ li {
   height: 2.2rem;
   align-items: center;
 }
-.pin_block .ant-checkbox-wrapper span {
+.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 {
+.pin_block .ant-checkbox-wrapper > span .ant-checkbox-input::after {
   height: auto;
 }
-.pin_block .ant-checkbox-wrapper span.ant-checkbox-checked::after {
+.pin_block .ant-checkbox-wrapper > span.ant-checkbox-checked::after {
   border: 1px solid rgba(0, 0, 0, 0);
 }
 .ant-checkbox-inner {
@@ -1230,7 +1240,9 @@ li {
 }
 .designOpenrtion_modal .design_closeIcon,
 .designOpenrtionMobile_modal .design_closeIcon,
-.design_detail_modal_component .design_closeIcon {
+.design_detail_modal_component .design_closeIcon,
+.designElements_modal .design_closeIcon,
+.designElementsMobile_modal .design_closeIcon {
   top: 2rem;
   right: 2rem;
   cursor: pointer;
@@ -1243,7 +1255,9 @@ li {
 }
 .designOpenrtion_modal .design_closeIcon .fi-rr-cross-small::before,
 .designOpenrtionMobile_modal .design_closeIcon .fi-rr-cross-small::before,
-.design_detail_modal_component .design_closeIcon .fi-rr-cross-small::before {
+.design_detail_modal_component .design_closeIcon .fi-rr-cross-small::before,
+.designElements_modal .design_closeIcon .fi-rr-cross-small::before,
+.designElementsMobile_modal .design_closeIcon .fi-rr-cross-small::before {
   padding: 0.2rem;
   border-radius: 5px;
   border: solid 2px rgba(0, 0, 0, 0.25);
@@ -1252,33 +1266,41 @@ li {
 }
 .designOpenrtion_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before,
 .designOpenrtionMobile_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before,
-.design_detail_modal_component .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before {
+.design_detail_modal_component .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before,
+.designElements_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before,
+.designElementsMobile_modal .design_closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before {
   border: solid 2px rgba(0, 0, 0, 0.55);
   color: #000000;
 }
 .design_detail_modal_component .ant-upload-list-picture-card-container,
 .designOpenrtion_modal .ant-upload-list-picture-card-container,
+.designElements_modal .ant-upload-list-picture-card-container,
 .UpgradePlan_modal .ant-upload-list-picture-card-container,
 .refund_reason .ant-upload-list-picture-card-container,
 .Export .ant-upload-list-picture-card-container,
-.designOpenrtionMobile_modal .ant-upload-list-picture-card-container {
+.designOpenrtionMobile_modal .ant-upload-list-picture-card-container,
+.designElementsMobile_modal .ant-upload-list-picture-card-container {
   display: none !important;
 }
 .design_detail_modal_component .ant-upload-picture-card-wrapper,
 .designOpenrtion_modal .ant-upload-picture-card-wrapper,
+.designElements_modal .ant-upload-picture-card-wrapper,
 .UpgradePlan_modal .ant-upload-picture-card-wrapper,
 .refund_reason .ant-upload-picture-card-wrapper,
 .Export .ant-upload-picture-card-wrapper,
-.designOpenrtionMobile_modal .ant-upload-picture-card-wrapper {
+.designOpenrtionMobile_modal .ant-upload-picture-card-wrapper,
+.designElementsMobile_modal .ant-upload-picture-card-wrapper {
   width: auto;
   vertical-align: top;
 }
 .design_detail_modal_component .subitOkPreviewBtn,
 .designOpenrtion_modal .subitOkPreviewBtn,
+.designElements_modal .subitOkPreviewBtn,
 .UpgradePlan_modal .subitOkPreviewBtn,
 .refund_reason .subitOkPreviewBtn,
 .Export .subitOkPreviewBtn,
-.designOpenrtionMobile_modal .subitOkPreviewBtn {
+.designOpenrtionMobile_modal .subitOkPreviewBtn,
+.designElementsMobile_modal .subitOkPreviewBtn {
   background-color: #38205b;
   color: #fff;
   cursor: pointer;
@@ -1304,13 +1326,19 @@ i {
   opacity: 0.5;
   transform: scale(0.9);
 }
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
 textarea:focus {
   outline: none;
   /* 清除默认焦点样式 */
 }
 .collection_modal_body .input_border,
 .design_detail_modal_component .input_border,
-.library_page .input_border {
+.library_page .input_border,
+.productImg_modal .input_border {
   z-index: 2;
   display: flex;
   align-items: center;
@@ -1323,7 +1351,8 @@ textarea:focus {
 }
 .collection_modal_body .input_border .input_box,
 .design_detail_modal_component .input_border .input_box,
-.library_page .input_border .input_box {
+.library_page .input_border .input_box,
+.productImg_modal .input_border .input_box {
   position: relative;
   z-index: 2;
   flex: 1;
@@ -1333,35 +1362,41 @@ textarea:focus {
 }
 .collection_modal_body .input_border .input_box .inputShowText,
 .design_detail_modal_component .input_border .input_box .inputShowText,
-.library_page .input_border .input_box .inputShowText {
+.library_page .input_border .input_box .inputShowText,
+.productImg_modal .input_border .input_box .inputShowText {
   width: 100%;
   display: none;
 }
 .collection_modal_body .input_border .input_box.active .input_box_btnBox,
 .design_detail_modal_component .input_border .input_box.active .input_box_btnBox,
 .library_page .input_border .input_box.active .input_box_btnBox,
+.productImg_modal .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 {
+.library_page .input_border .input_box.active textarea,
+.productImg_modal .input_border .input_box.active textarea {
   border: 1px solid #ff0001;
   box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
 }
 .collection_modal_body .input_border .input_box.active span,
 .design_detail_modal_component .input_border .input_box.active span,
-.library_page .input_border .input_box.active span {
+.library_page .input_border .input_box.active span,
+.productImg_modal .input_border .input_box.active span {
   opacity: 1;
   display: block;
   color: rgba(255, 0, 0.7);
 }
 .collection_modal_body .input_border .search_keyword,
 .design_detail_modal_component .input_border .search_keyword,
-.library_page .input_border .search_keyword {
+.library_page .input_border .search_keyword,
+.productImg_modal .input_border .search_keyword {
   height: 0;
   flex-basis: 100%;
 }
 .collection_modal_body .input_border .search_keyword .search_keyword_center,
 .design_detail_modal_component .input_border .search_keyword .search_keyword_center,
-.library_page .input_border .search_keyword .search_keyword_center {
+.library_page .input_border .search_keyword .search_keyword_center,
+.productImg_modal .input_border .search_keyword .search_keyword_center {
   justify-content: space-between;
   display: flex;
   width: var(--width);
@@ -1377,7 +1412,8 @@ textarea:focus {
 }
 .collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
 .design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
-.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
+.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 {
   display: flex;
   overflow: hidden;
   flex: 1;
@@ -1385,7 +1421,8 @@ textarea:focus {
 }
 .collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
-.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
+.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 {
   border-radius: 0.4rem;
   border: solid 1px #39215b;
   background-color: #8156bd;
@@ -1399,12 +1436,14 @@ textarea:focus {
 }
 .collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
 .design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
-.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
+.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 {
   margin-right: 0;
 }
 .collection_modal_body .input_border .input_box_btnBox,
 .design_detail_modal_component .input_border .input_box_btnBox,
-.library_page .input_border .input_box_btnBox {
+.library_page .input_border .input_box_btnBox,
+.productImg_modal .input_border .input_box_btnBox {
   border: calc(0.1rem*1.2) solid #F1F1F1;
   width: var(--width);
   display: flex;
@@ -1412,18 +1451,31 @@ textarea:focus {
 }
 .collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
 .design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
-.library_page .input_border .input_box_btnBox .ant-spin-text {
+.library_page .input_border .input_box_btnBox .ant-spin-text,
+.productImg_modal .input_border .input_box_btnBox .ant-spin-text {
   font-size: 1.2rem;
 }
+.collection_modal_body .input_border .input_box_btnBox .search_seed,
+.design_detail_modal_component .input_border .input_box_btnBox .search_seed,
+.library_page .input_border .input_box_btnBox .search_seed,
+.productImg_modal .input_border .input_box_btnBox .search_seed {
+  padding: 0;
+  width: 4rem;
+  text-align: center;
+  font-size: 1.2rem;
+  border-right: calc(0.1rem*1.2) solid #F1F1F1;
+}
 .collection_modal_body .input_border .upload_item .upload_file_item,
 .design_detail_modal_component .input_border .upload_item .upload_file_item,
-.library_page .input_border .upload_item .upload_file_item {
+.library_page .input_border .upload_item .upload_file_item,
+.productImg_modal .input_border .upload_item .upload_file_item {
   width: 8rem;
   height: 8rem;
 }
 .collection_modal_body .input_border input,
 .design_detail_modal_component .input_border input,
-.library_page .input_border input {
+.library_page .input_border input,
+.productImg_modal .input_border input {
   width: 100%;
   border-radius: calc(0.5rem*1.2);
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -1434,32 +1486,38 @@ textarea:focus {
 }
 .collection_modal_body .input_border inputinput:-moz-placeholder,
 .design_detail_modal_component .input_border inputinput:-moz-placeholder,
-.library_page .input_border inputinput:-moz-placeholder {
+.library_page .input_border inputinput:-moz-placeholder,
+.productImg_modal .input_border inputinput:-moz-placeholder {
   color: rgba(0, 0, 0, 0.15);
 }
 .collection_modal_body .input_border inputinput:-ms-input-placeholder,
 .design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
-.library_page .input_border inputinput:-ms-input-placeholder {
+.library_page .input_border inputinput:-ms-input-placeholder,
+.productImg_modal .input_border inputinput:-ms-input-placeholder {
   color: rgba(0, 0, 0, 0.15);
 }
 .collection_modal_body .input_border inputinput::-webkit-input-placeholder,
 .design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
-.library_page .input_border inputinput::-webkit-input-placeholder {
+.library_page .input_border inputinput::-webkit-input-placeholder,
+.productImg_modal .input_border inputinput::-webkit-input-placeholder {
   color: rgba(0, 0, 0, 0.15);
 }
 .collection_modal_body .input_border input.forbidden,
 .design_detail_modal_component .input_border input.forbidden,
-.library_page .input_border input.forbidden {
+.library_page .input_border input.forbidden,
+.productImg_modal .input_border input.forbidden {
   cursor: no-drop;
 }
 .collection_modal_body .input_border .input_box_btnBox_upImg,
 .design_detail_modal_component .input_border .input_box_btnBox_upImg,
-.library_page .input_border .input_box_btnBox_upImg {
+.library_page .input_border .input_box_btnBox_upImg,
+.productImg_modal .input_border .input_box_btnBox_upImg {
   height: 100%;
 }
 .collection_modal_body .input_border .fi,
 .design_detail_modal_component .input_border .fi,
-.library_page .input_border .fi {
+.library_page .input_border .fi,
+.productImg_modal .input_border .fi {
   margin-right: 1rem;
   display: flex;
   cursor: pointer;
@@ -1473,23 +1531,27 @@ textarea:focus {
 }
 .collection_modal_body .input_border .fi.fi-br-loading,
 .design_detail_modal_component .input_border .fi.fi-br-loading,
-.library_page .input_border .fi.fi-br-loading {
+.library_page .input_border .fi.fi-br-loading,
+.productImg_modal .input_border .fi.fi-br-loading {
   height: 100%;
   background-color: rgba(0, 0, 0, 0);
 }
 .collection_modal_body .input_border .fi.active,
 .design_detail_modal_component .input_border .fi.active,
-.library_page .input_border .fi.active {
+.library_page .input_border .fi.active,
+.productImg_modal .input_border .fi.active {
   transform: rotate(180deg);
 }
 .collection_modal_body .input_border .fi.forbidden,
 .design_detail_modal_component .input_border .fi.forbidden,
-.library_page .input_border .fi.forbidden {
+.library_page .input_border .fi.forbidden,
+.productImg_modal .input_border .fi.forbidden {
   cursor: no-drop;
 }
 .collection_modal_body .input_border .search_upImg,
 .design_detail_modal_component .input_border .search_upImg,
-.library_page .input_border .search_upImg {
+.library_page .input_border .search_upImg,
+.productImg_modal .input_border .search_upImg {
   width: 4rem;
   height: 100%;
   position: absolute;
@@ -1498,20 +1560,23 @@ textarea:focus {
 }
 .collection_modal_body .input_border .search_upImg span,
 .design_detail_modal_component .input_border .search_upImg span,
-.library_page .input_border .search_upImg span {
+.library_page .input_border .search_upImg span,
+.productImg_modal .input_border .search_upImg span {
   position: absolute;
   width: 100%;
 }
 .collection_modal_body .input_border .search_upImg .ant-upload-select-picture-card,
 .design_detail_modal_component .input_border .search_upImg .ant-upload-select-picture-card,
-.library_page .input_border .search_upImg .ant-upload-select-picture-card {
+.library_page .input_border .search_upImg .ant-upload-select-picture-card,
+.productImg_modal .input_border .search_upImg .ant-upload-select-picture-card {
   width: 100%;
   height: 100%;
   display: block !important;
 }
 .collection_modal_body .input_border .search_textarea,
 .design_detail_modal_component .input_border .search_textarea,
-.library_page .input_border .search_textarea {
+.library_page .input_border .search_textarea,
+.productImg_modal .input_border .search_textarea {
   z-index: 3;
   height: auto;
   position: absolute;
@@ -1525,18 +1590,21 @@ textarea:focus {
 }
 .collection_modal_body .input_border .generage_btn,
 .design_detail_modal_component .input_border .generage_btn,
-.library_page .input_border .generage_btn {
+.library_page .input_border .generage_btn,
+.productImg_modal .input_border .generage_btn {
   margin-left: 2rem;
 }
 .collection_modal_body .upload_item,
 .design_detail_modal_component .upload_item,
-.library_page .upload_item {
+.library_page .upload_item,
+.productImg_modal .upload_item {
   display: flex;
   flex-wrap: wrap;
 }
 .collection_modal_body .upload_item .upload_file_item,
 .design_detail_modal_component .upload_item .upload_file_item,
-.library_page .upload_item .upload_file_item {
+.library_page .upload_item .upload_file_item,
+.productImg_modal .upload_item .upload_file_item {
   margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
   display: inline-block;
   width: calc(10rem*1.2);
@@ -1548,24 +1616,28 @@ textarea:focus {
 }
 .collection_modal_body .upload_item .upload_file_item.active,
 .design_detail_modal_component .upload_item .upload_file_item.active,
-.library_page .upload_item .upload_file_item.active {
+.library_page .upload_item .upload_file_item.active,
+.productImg_modal .upload_item .upload_file_item.active {
   opacity: 0.5;
   border-radius: calc(1rem*1.2);
   transform: scale(0.9);
 }
 .collection_modal_body .upload_item .upload_file_item.active .delete_file_block,
 .design_detail_modal_component .upload_item .upload_file_item.active .delete_file_block,
-.library_page .upload_item .upload_file_item.active .delete_file_block {
+.library_page .upload_item .upload_file_item.active .delete_file_block,
+.productImg_modal .upload_item .upload_file_item.active .delete_file_block {
   pointer-events: none;
 }
 .collection_modal_body .upload_item .upload_file_item.active .operate_file_block,
 .design_detail_modal_component .upload_item .upload_file_item.active .operate_file_block,
-.library_page .upload_item .upload_file_item.active .operate_file_block {
+.library_page .upload_item .upload_file_item.active .operate_file_block,
+.productImg_modal .upload_item .upload_file_item.active .operate_file_block {
   pointer-events: none;
 }
 .collection_modal_body .upload_item .upload_file_item.upload_component,
 .design_detail_modal_component .upload_item .upload_file_item.upload_component,
-.library_page .upload_item .upload_file_item.upload_component {
+.library_page .upload_item .upload_file_item.upload_component,
+.productImg_modal .upload_item .upload_file_item.upload_component {
   border: none;
   display: flex;
   align-items: center;
@@ -1573,7 +1645,8 @@ textarea:focus {
 }
 .collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
 .design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
-.library_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
+.library_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
+.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -1581,7 +1654,8 @@ textarea:focus {
 }
 .collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
 .design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
-.library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
+.library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
+.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
   width: calc(6rem*1.2);
   height: calc(6rem*1.2);
   border: calc(0.3rem*1.2) solid #ededed;
@@ -1590,7 +1664,8 @@ textarea:focus {
 }
 .collection_modal_body .upload_item .upload_file_item .upload_file_item_content,
 .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content,
-.library_page .upload_item .upload_file_item .upload_file_item_content {
+.library_page .upload_item .upload_file_item .upload_file_item_content,
+.productImg_modal .upload_item .upload_file_item .upload_file_item_content {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1600,17 +1675,20 @@ textarea:focus {
 }
 .collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover div,
 .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover div,
-.library_page .upload_item .upload_file_item .upload_file_item_content:hover div {
+.library_page .upload_item .upload_file_item .upload_file_item_content:hover div,
+.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover div {
   opacity: 1;
 }
 .collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
 .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
-.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
+.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
+.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
   display: block;
 }
 .collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img,
 .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .upload_img,
-.library_page .upload_item .upload_file_item .upload_file_item_content .upload_img {
+.library_page .upload_item .upload_file_item .upload_file_item_content .upload_img,
+.productImg_modal .upload_item .upload_file_item .upload_file_item_content .upload_img {
   display: block;
   height: 100%;
   width: auto;
@@ -1619,7 +1697,8 @@ textarea:focus {
 }
 .collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
 .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
-.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
+.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
+.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
   display: none;
   width: 100%;
   cursor: pointer;
@@ -1635,7 +1714,8 @@ textarea:focus {
 }
 .collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
 .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
-.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
+.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
+.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
   width: calc(3.2rem*1.2);
   height: calc(3.2rem*1.2);
   background: rgba(0, 0, 0, 0.6);
@@ -1649,18 +1729,21 @@ textarea:focus {
 }
 .collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
 .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
-.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
+.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
+.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
   font-size: calc(1.6rem*1.2);
   color: #fff;
 }
 .collection_modal_body .upload_item .upload_file_item .upload_img_icon,
 .design_detail_modal_component .upload_item .upload_file_item .upload_img_icon,
-.library_page .upload_item .upload_file_item .upload_img_icon {
+.library_page .upload_item .upload_file_item .upload_img_icon,
+.productImg_modal .upload_item .upload_file_item .upload_img_icon {
   width: calc(4.6rem*1.2);
 }
 .collection_modal_body .upload_item .upload_file_item:last-child,
 .design_detail_modal_component .upload_item .upload_file_item:last-child,
-.library_page .upload_item .upload_file_item:last-child {
+.library_page .upload_item .upload_file_item:last-child,
+.productImg_modal .upload_item .upload_file_item:last-child {
   margin: 0;
 }
 .generalModel_modal .ant-modal-content {

src/assets/style/style.less

@@ -127,9 +127,13 @@ input:focus{
 }
 
 .select_block{
+	height: 4rem;
+	.ant-select{
+		height: 100%;
+	}
   .ant-select:not(.ant-select-customize-input) .ant-select-selector{
     background: transparent;
-    height: 4rem;
+    height: 95%;
     border: 0.1rem solid rgba(0,0,0,0) !important;
     // border: 0.1rem solid #000 !important;
     border-radius: 0;
@@ -533,6 +537,7 @@ input:focus{
 
 //弹窗公共样式
 .ant-modal{
+	box-shadow: 0px 0px 6px rgba(0, 0, 0, .2);
 	&.ant-modal-confirm{
 		&.ant-modal-confirm-confirm{
 			// top: 50%;
@@ -696,13 +701,10 @@ input:focus{
 		// height: calc(65vh - 6.4rem);
 		height: calc(65rem*1.2);
 		// background-color: #181818;
+		padding: calc(4rem*1.2) calc(5rem*1.2);
 	}
 	.ant-modal-btn{
 		
-	}
-	.ant-modal-body{
-		padding: calc(4rem*1.2) calc(5rem*1.2);
-		
 	}
 	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
 		font-size: 2rem;
@@ -1068,7 +1070,10 @@ input:focus{
 	.ant-checkbox-wrapper{
 		height: 2.2rem;
 		align-items: center;
-		span{
+		>span{
+			height: 100%;
+		}
+		>span{
 			font-size: 1.4rem;
 			line-height: 2.3rem;
 			.ant-checkbox-input::after{
@@ -1339,7 +1344,7 @@ input:focus{
     }
 }
 //desing 关闭按钮
-.designOpenrtion_modal,.designOpenrtionMobile_modal,.design_detail_modal_component{
+.designOpenrtion_modal,.designOpenrtionMobile_modal,.design_detail_modal_component,.designElements_modal,.designElementsMobile_modal{
 	.design_closeIcon{
 		top: 2rem;
 		right: 2rem;
@@ -1363,7 +1368,7 @@ input:focus{
 		}
 	}
 }
-.design_detail_modal_component,.designOpenrtion_modal,.UpgradePlan_modal,.refund_reason,.Export,.designOpenrtionMobile_modal{
+.design_detail_modal_component,.designOpenrtion_modal,.designElements_modal,.UpgradePlan_modal,.refund_reason,.Export,.designOpenrtionMobile_modal,.designElementsMobile_modal{
 	.ant-upload-list-picture-card-container{
 		display: none !important;
 	}
@@ -1402,12 +1407,16 @@ i{
 	opacity: .5;
 	transform: scale(.9);
 }
-
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
 textarea:focus{
 	outline: none; /* 清除默认焦点样式 */
 }
 //设计input和上传按钮样式
-.collection_modal_body,.design_detail_modal_component,.library_page,{
+.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal{
 	.input_border{
 		z-index: 2;
 		display: flex;
@@ -1490,6 +1499,13 @@ textarea:focus{
 			.ant-spin-text{
 				font-size: 1.2rem;
 			}
+			.search_seed{
+				padding: 0;
+				width: 4rem;
+				text-align: center;
+				font-size: 1.2rem;
+				border-right: calc(0.1rem* 1.2) solid #F1F1F1;
+			}
 		}
 		.upload_item{
 			.upload_file_item{

src/component/Detail/DesignDetail.vue

@@ -79,6 +79,7 @@
 								<i class="fi fi-rs-comments"></i>
 								<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
 								<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
+								<i v-show="current?.id" class="fi fi-rs-pencil-paintbrush" @click.stop="addDetail"></i>
 							</div>
 							<div class="centent_div" v-if="current?.id" @click="openCurrent(1)">
 								<img :src="current?.path" alt="" class="" @click="openCurrent(1)">
@@ -93,12 +94,14 @@
 								<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
 							</div>
 							<div class="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
-								<div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
+								<div class="centent_div centent_print" v-if="current?.printObject?.prints?.[0]?.path && current?.printObject?.prints.length > 1" @click="openCurrent(2)">
+									<img v-for="item in current?.printObject?.prints" :key="item.id" :src="item.path" alt="">
+								</div>
+								<div v-else-if="current?.printObject?.prints?.[0]?.path && current?.printObject?.prints.length == 1" class="centent_div">
 									<img :src="current?.printObject?.prints[0]?.path" alt="">
 								</div>
 								<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
 							</div>
-							
                         </div>
 						<div class="clothes_detail_item clothes_detail_item_color" :class="[current?.id?'':'hideCursor']">
                             <div class="clothes_item_header">
@@ -117,7 +120,19 @@
 								</div>
 							</div>
                         </div>
-						
+						<div class="clothes_detail_item clothes_detail_item_elements" :class="[current?.id?'':'hideCursor']">
+                            <div class="clothes_item_header">
+								<i class="fi fi-rs-comments"></i>
+								<div>Current Elements</div>
+								<i class="fi fi-rr-edit" @click.stop="openCurrent(4)"></i>
+							</div>
+							<div class="Guide_1_20 clothes_item_icon" :class="[driver__.driver?'showEvents':'']">
+								<!-- <div class="centent_div" v-if="current?.printObject?.prints?.[0]?.path" @click="openCurrent(2)">
+									<img :src="current?.printObject?.prints[0]?.path" alt="">
+								</div> -->
+								<i class="fi fi-rr-picture centent" @click="openCurrent(4)"></i>
+							</div>
+                        </div>
                     </div>
                 </div>
 				<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
@@ -139,6 +154,7 @@
                 </div>
 
             </div>
+			<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
         </a-modal>
          <div class="mark_loading" v-show="loadingShow">
             <a-spin size="large" />
@@ -163,6 +179,7 @@ import { openGuide,driverObj__ } from "@/tool/guide";
 import GO from '@/tool/GO';
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import { useI18n } from 'vue-i18n'
+import addDetails from '@/component/Detail/addDetails.vue'
 export default defineComponent({
     components:{
         Draggable,
@@ -170,6 +187,7 @@ export default defineComponent({
 		setDesignItem,
 		magnifyingGlass,
 		setDesignItemMobile,
+		addDetails,
     },
     setup() {
         const store = useStore();
@@ -212,6 +230,11 @@ export default defineComponent({
 		provide('body',body)
 		let moible:any = isMoible()
 		provide('moible',moible)
+		let exhibitionList = ref({
+			print:[],
+			elements:[],
+		})
+		provide('exhibitionList',exhibitionList)
 		let {t} = useI18n()
 		//创建单件衣服
 		let setClothes:any = ref()
@@ -239,6 +262,7 @@ export default defineComponent({
 			revocationShow,
 			driver__,
 			moible,
+			exhibitionList,
 			t,
 			setClothes,
 			deleteShow,
@@ -324,7 +348,21 @@ export default defineComponent({
 			handler: function(newval) {
 				// this.removeRevocation()
 			}
+		},
+		'current.printObject.prints':{
+			handler(newVal,oldVal){
+				if(newVal && newVal.length > 0){
+					this.exhibitionList.print = this.setExhibitionList(newVal)
 				}
+			}
+		},
+		'current.trims.prints':{
+			handler(newVal,oldVal){
+				if(newVal && newVal.length > 0){
+					this.exhibitionList.elements = this.setExhibitionList(newVal)
+				}
+			}
+		},
 	},
 	provide() {
 		return {
@@ -387,7 +425,10 @@ export default defineComponent({
 				}
 			}
         },
-	
+		addDetail(){
+			let addDetails:any = this.$refs.addDetails
+			addDetails.init(this.current,this.currentIndex)
+		},
         closeModal(submit:any){
             if(this.designShowPrview == 1){
 				if(this.ifSubmit && submit == ''){
@@ -423,7 +464,19 @@ export default defineComponent({
 				// this.designItemDetailUrl = {}
             }
         },
-		
+		//切换当前展示的是印花还是elements
+		setExhibitionList(arr:any){
+			const seen = new Map();
+			return arr.filter((obj:any, index:any, self:any) => {
+				const key = obj.minIOPath; // 替换成你想要去重的属性名
+				if (seen.has(key)) {
+					return false;
+				} else {
+					seen.set(key, true);
+					return true;
+				}
+			});
+		},
         showDesignDetailModal(data:any,str:string){
 			this.moible = isMoible()
 			this.designItemId = data.design.designItemId
@@ -443,7 +496,7 @@ export default defineComponent({
 							item.layersObject[1] = a
 						}
 						if(item.printObject.prints == null){
-							item.printObject.prints = [{}]
+							item.printObject.prints = []
 						}else{
 							item.printObject.prints.forEach((element:any) => {
 								if(!element.designType){
@@ -674,6 +727,8 @@ export default defineComponent({
 					id:item.id,
 					path:item.minIOPath,
 					gradient:{},
+					trims:item.trims,
+					sketchString:item.sketchString,
 					changed:item.changed?item.changed:false,
 					designType:item.designType?item.designType:"Library",
 					offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
@@ -711,6 +766,7 @@ export default defineComponent({
 				gender:workspace?.sex,
 				designSingleItemDTOList:clothes,
 				isPreview:false,
+				sketchString:'',
 				ifSubmit:designItemDetail.isPreview,
 				processId:String(this.userInfo?.userId),
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -772,6 +828,7 @@ export default defineComponent({
 					img.onload = () => {
 						imgWidth = img.width
 						resolve(img)
+						img.remove()
 					};
 					img.onerror = reject;
 					img.src = url;
@@ -852,17 +909,30 @@ export default defineComponent({
 			}else{
 				this.deleteShow = false
 				
-				let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
-				
 				let data:any = this.setSubmitItem('preview',true)
 				if(!this.deleteItemShow){
 					return	
 				}
+				this.setDesignSingle(data)
+			}
+			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
+			DesignDetailAlter.changePlace()
+			DesignDetailAlter.terminate()
+		},
+		setDesignSingle(data:any){
 			this.loadingShow = true
+			let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
 			Https.axiosPost(Https.httpUrls.designSingle, data).then(
 				(rv) => {
-						this.designItemDetail.currentFullBodyView = rv.currentFullBodyView
+					// this.current.minIOPath = rv.clothes[this.currentIndex].minIOPath
-						this.designItemDetail.ifSubmit = true
+					designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
+					this.current.path = rv.clothes[this.currentIndex].minIOPath
+					designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
+					designItemDetail.clothes[this.currentIndex].sketchString = ''
+					data.designSingleItemDTOList[this.currentIndex].sketchString =''
+					data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
+					designItemDetail.currentFullBodyView = rv.currentFullBodyView
+					designItemDetail.ifSubmit = true
 					this.loadingShow = false
 					// if(this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1] && !this.designItemDetail.clothes[this.designItemDetail.clothes.legnth-1].id){
 					// 	this.designItemDetail.clothes.split(this.designItemDetail.clothes.legnth-1,1)
@@ -871,7 +941,6 @@ export default defineComponent({
 						data.designSingleItemDTOList.split(data.designSingleItemDTOList.legnth-1,1)
 					}
 					this.store.commit("setDesignItemDetail", designItemDetail);
-						console.log(123);
 					this.store.commit("setDesignPreviewData", data);
 					this.setRevocation(designItemDetail,data)
 					this.deleteItemShow = false
@@ -879,10 +948,6 @@ export default defineComponent({
 			).catch(res=>{
 				this.loadingShow = false
 			});
-			}
-			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
-			DesignDetailAlter.changePlace()
-			DesignDetailAlter.terminate()
 		},
 		setDelete(num:number){
 			this.designItemDetail.clothes.splice(num,1)
@@ -942,12 +1007,16 @@ export default defineComponent({
 				"color": color,
 				gradient:gradient,
 				priority:10,
+				trims:{
+					"ifSingle": null,
+					"prints":null,
+				},
 				"printObject": {
 					"ifSingle": null,
 					"prints": [
-						{}
 					]
 				},
+				sketchString:'',
 				"layersObject": [
 				]
 			}
@@ -1001,17 +1070,19 @@ export default defineComponent({
 					}
 				});
 			}
+			this.current.sketchString = ''
 			this.currentIndex = this.currentIndex>0?this.currentIndex:0
 			data.designSingleItemDTOList[this.currentIndex] = {
 				color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
-
 				id:this.current.id?this.current.id:'',
 				changed:this.current.changed?this.current.changed:false,
 				designType:this.current.designType?this.current.designType:'Library',
 				path:this.current.minIOPath?this.current.minIOPath:'',
 				offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
 				priority:this.current.priority,
+				trims:this.current.trims,
 				scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
+				sketchString:'',
 				printObject:{
 					ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
 					// prints:this.current?.printObject[0]?.path == null ? [] : [{
@@ -1031,12 +1102,21 @@ export default defineComponent({
 			this.store.commit('setDesignPreviewData',data)
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.changePlace()
+
 			if(this.driver__.driver){
 				nextTick().then(()=>{
 					driverObj__.moveNext();
 				})
 			}
         },
+		setSloganData(data:any){
+			this.current.sketchString = data
+			
+			// let designData:any = this.setSubmitItem('preview',true)
+			let designData = this.store.state.DesignDetailModule.designPreviewData
+			designData.designSingleItemDTOList[this.currentIndex].sketchString = data
+			this.setDesignSingle(designData)
+		}
         //重新设计
         // redesignItem(){
         //     let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -1356,20 +1436,34 @@ export default defineComponent({
 				display: flex;
 				flex-direction: column;
 				overflow: hidden;
+				overflow-y: auto;
 				.hideCursor{
 					*{
 						cursor: not-allowed !important;
 					}
 				}
+				&.detail_modal_right_top::-webkit-scrollbar{display: none;}
                 .clothes_detail_item{
 					// margin-bottom: 5rem*1.2);
 					position: relative;
-					flex: 1;
+					height: 20rem;
+					// flex: 1;
+					flex-shrink: 0;
 					.centent_div{
 						display: flex;
 						cursor: pointer;
 						justify-content: center;
 					}
+					.centent_print{
+						flex-wrap: wrap;
+						justify-content: space-between;
+						align-content: space-between;
+						img{
+							width: 30%;
+							height: 30%;
+							margin-bottom: 1rem;
+						}
+					}
 					.centent{
 						cursor: pointer;
 
@@ -1386,10 +1480,17 @@ export default defineComponent({
                         font-size: var(--aida-fsize1-8);
                         color: #000000;
 						justify-content: space-between;
+						position: relative;
                         .icon-dangqianweizhi{
                             font-size: calc(1.8rem*1.2);
                             color: #000000;
                             margin-right: calc(1rem*1.2);
+                        }
+						.fi-rs-pencil-paintbrush{
+							position: absolute;
+							right: 0;
+							top: 4rem;
+							cursor: pointer;
 						}
 						i{
 							font-size: var(--aida-fsize1-8);
@@ -1442,7 +1543,8 @@ export default defineComponent({
 						}
 					}
 					&.clothes_detail_item_print,
-					&.clothes_detail_item_apparel{
+					&.clothes_detail_item_apparel,
+					&.clothes_detail_item_elements{
 						.fi-rr-picture{
 							display: flex;
 							align-items: center;

src/component/Detail/DesignDetailAlter.vue

@@ -1,12 +1,13 @@
 <template>
 	<div class="detail_modal_body_select">
-		<div v-show="(type_ == 1 || type_ == 2) && select == true">
+		<div v-show="(type_ == 1 || type_ == 2 || type_ == 4) && select == true">
 			<div class="detail_uploadLibrary">
 				<div class="switch_type_list">
 					<div
 						@click.stop="open(1)"
 						class="switch_type_item"
-					:class="[openClick == 1 ? 'select_swtich' : '']"
+						:class="[openClick == 1 ? 'select_swtich' : '',]"
+						:style="{cursor:type_==4?'no-drop':''}"
 					>
 						<span>{{ $t('DesignDetailAlter.Upload') }}</span>
 					</div>
@@ -19,6 +20,21 @@
 					</div>
 				</div>
 				<div v-show="openClick == 2" class="detail_Library">
+					<div class="select_block">
+						<a-select
+							v-model:value="designType"
+							:options="designTypeList"
+							@change="handleChange"
+							:fieldNames="{ label: 'name', value: 'value' }"
+						>
+							<template #suffixIcon
+								><span
+									class="icon iconfont icon-xiala"
+									style="color: #343579"
+								></span
+							></template>
+						</a-select>
+					</div>
 					<div class="content_search_block">
 						<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
 						<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
@@ -47,51 +63,7 @@
 									v-show="file?.status === 'done'"
 								>
 									<img :src="file?.url" class="upload_img" />
-									<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
+									<sketchCategory v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
-
-									<!-- <div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
-										<div class="select_img_type">
-											<div
-												class="select_category"
-												@click.stop="showFileCategory(file)"
-											>
-												{{ file.level2Type }}
-												<div
-												v-if="!body"
-													:class="[
-														'icon',
-														'iconfont',
-														'icon-xiala',
-														file.categoryShow
-															? 'icon_rotate'
-															: '',
-													]"
-												>
-												</div>
-											</div>
-											<div
-												v-if="!body"
-												class="category_list"
-												v-show="file.categoryShow"
-											>
-												<div
-													:class="[
-														'category_item',
-														file.level2Type == cate.value
-															? 'select_category_item'
-															: '',
-													]"
-													v-for="(
-														cate, index
-													) in disignTypeList"
-													:key="index"
-													@click.stop="selectFileCategory(file, cate)"
-												>
-													{{ cate.value }}
-												</div>
-											</div>
-										</div>
-									</div> -->
 									<div
 										class="delete_file_block"
 										@click.stop="deleteFile(index)"
@@ -138,7 +110,7 @@
                     <div class="content_img_item" v-for="(file) in clothesList" :key="file.id"  :class="{active:selectCode !== 'Moodboard'}">
                         <div class="content_img_item_block" :class="{active:file?.checked}">
                             <img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
-							<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="clothesList" :item="file" ></sketchCategory>
+							<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="designTypeList" :generateList="clothesList" :item="file" :isSpread="selectCode == 'DesignElements'" :isSetSketchCategory="true" @upTypeSucced='handleChange'></sketchCategory>
                         </div>
                     </div>
 					<div v-show="total > clothesList.length" class="material_content_list_loding" v-observe>
@@ -288,7 +260,7 @@ import { useStore } from "vuex";
 import { LoadingOutlined } from '@ant-design/icons-vue';
 import { message,Upload} from 'ant-design-vue';
 import { Sketch, Chrome} from '@ans1998/vue3-color'
-import {getUploadUrl,rgbToHsv} from '@/tool/util'
+import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
 import DesignDetailEnd from './DesignDetailEnd.vue';
 import { getCookie } from "@/tool/cookie";
 import { openGuide,driverObj__ } from "@/tool/guide";
@@ -321,6 +293,11 @@ export default defineComponent({
 		let apparelList = ref([])
 		let printList = ref([])
 		let selectCode = ref('Sketchboard')
+		let designTypeList = ref([])
+		let printCatecoryList = computed(()=>{
+			return store.state.UserHabit.printType
+		})
+		let designType = ref('')
 		//颜色
 		let selectColor = ref({
 			rgba:{},
@@ -331,6 +308,9 @@ export default defineComponent({
 		let sketchCatecoryList = computed(()=>{
 			return store.state.Workspace.workspacePosition
 		})
+		let designElementsType = computed(()=>{
+			return store.state.UserHabit.designElementsType;
+		})
 		let colorList = ref([{},{},{},{},{},{},{},{},{}])
 		let selectIndex = ref(0)
 		let gradient = ref({
@@ -359,6 +339,7 @@ export default defineComponent({
 		})
 		provide('colorList',colorList)
 		provide('selectIndex',selectIndex)
+		provide('designTypeList',designTypeList)
 		let {t} = useI18n()
         return{
             store,
@@ -375,6 +356,10 @@ export default defineComponent({
 			printList,
 			selectCode,
 
+			designTypeList,
+			printCatecoryList,
+			designType,
+
 			type_,
 			select,
 			selectColor,
@@ -383,6 +368,7 @@ export default defineComponent({
 			driver__,
 			body,
 			sketchCatecoryList,
+			designElementsType,
 			colorList,
 			selectIndex,
 			gradient,
@@ -595,12 +581,22 @@ export default defineComponent({
 				this.selectCode = 'Sketchboard'
 				this.upload.level1Type = 'Sketchboard'
 				this.uploadList = this.apparelList
+				this.designTypeList = this.sketchCatecoryList
+				this.designType = this.designTypeList[0].value
 			}else if (num == 2){
 				this.selectCode = 'Printboard'
 				this.upload.level1Type = 'Printboard'
 				this.uploadList = this.printList
+				this.designTypeList = this.printCatecoryList
+				this.designType = this.designTypeList[0].value
+			}else if (num == 4){
+				this.selectCode = 'DesignElements'
+				this.upload.level1Type = 'DesignElements'
+				this.designTypeList = this.designElementsType
+				this.designType = this.designTypeList[0]?.value
+				this.openClick = 2
 			}
-			if(num == 1 || num == 2){
+			if(num == 1 || num == 2 || num == 4){
 				this.clothesList = []
 				this.getLibraryList()
 			}
@@ -650,6 +646,7 @@ export default defineComponent({
 						(v) => v.status === "done"
 					);
 					this.uploadList = fileList
+					this.selectImgItem(this.uploadList[this.uploadList.length-1])
 					// this.store.commit("clearMoodTemplateId");
 					if(this.selectCode == 'Sketchboard'){
 						this.apparelList = this.uploadList
@@ -706,6 +703,7 @@ export default defineComponent({
 			// DesignDetailEnd.colorList = [{}]
 			DesignDetailEnd.sketchImg={}
 			this.terminate()
+			DesignDetailEnd.clearModal()
 		},
 		// this.getLibraryList('Moodboard')
 		// this.getLibraryList('Printboard')
@@ -721,39 +719,57 @@ export default defineComponent({
             });
 		},
 		selectImgItem(imgData){
+			let DesignDetailEnd = this.$refs.DesignDetailEnd
+			imgData.categoryValue = imgData.level2TypeEnum.value
+			imgData.category = imgData.level2TypeEnum.name
 			if(this.selectCode == 'Sketchboard'){
 				// this.current.id_ = imgData.id
 				// this.current.path = imgData.url
-				let DesignDetailEnd = this.$refs.DesignDetailEnd
 				DesignDetailEnd.setSketchImg(imgData)
 				// DesignDetailEnd.sketchImg.id_ = imgData.id
 				// DesignDetailEnd.sketchImg.path = imgData.url
-			}else{
+			}else if(this.selectCode == 'Printboard'){
-				this.current.printObject.path = imgData?.url
+				// this.current.printObject.path = imgData?.url
-				this.current.printObject.id = imgData?.id
+				// this.current.printObject.id = imgData?.id
-				this.current.printObject.designType = imgData?.designType
+				// this.current.printObject.designType = imgData?.designType
-				this.current.printObject.minIOPath = imgData.minIOPath
+				// this.current.printObject.minIOPath = imgData.minIOPath
-				this.current.printObject.prints = [{
+				// this.current.printObject.prints = [{
-					minIOPath:imgData.minIOPath,
+				// 	minIOPath:imgData.minIOPath,
-					path:imgData?.url,
+				// 	path:imgData?.url,
-					designType: imgData?.designType
+				// 	designType: imgData?.designType
-				}]
+				// }]
-				if(this.driver__.driver){
+				// if(this.driver__.driver){
-					nextTick().then(()=>{
+				// 	nextTick().then(()=>{
-						driverObj__.moveNext();
+				// 		driverObj__.moveNext();
-					})
+				// 	})
-				}
+				// }
+				imgData.path = imgData.url
+				DesignDetailEnd.printsList.push(imgData)
 
 				// console.log(this.current.printObject,imgData); 
+			}else if(this.selectCode == 'DesignElements'){
+				imgData.path = imgData.url
+				DesignDetailEnd.elementsList.push(imgData)
 			}
+        },
+		handleChange(){
+			this.currentPage = 1
+			this.clothesList = []
+            this.getLibraryList('')
 		},
 		//请求我的印花&&模型
 		getLibraryList(){
-			let type = this.body?this.current.type:''
+			let level2Type = ''
+			if(this.selectCode == 'Sketchboard' || this.selectCode == 'Printboard' || this.selectCode == 'DesignElements'){
+				level2Type = this.designType
+			}
+			let type = this.body?this.current.type:level2Type
 			let workspace = this.store.state.Workspace.workspace
             let data = {
+                // level1Type:'Printboard',
                 level1Type:this.selectCode,
-                level2Type:this.selectCode == 'Sketchboard'?type:'',
+                // level2Type:'Pattern',
+                level2Type:type,
 				modelSex:workspace?.sex,
                 page:this.currentPage,
                 pictureName:this.searchPictureName,
@@ -783,6 +799,7 @@ export default defineComponent({
 
 		//衣服
 		open(num) {
+			if(num == 1 && this.type_ ==4)return
             this.openClick = num;
 			if(num ==2 ){
 				this.getLibraryList()
@@ -805,7 +822,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('DesignDetailAlter.jsContent4'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 3;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('DesignDetailAlter.jsContent5'));
             }
@@ -905,7 +922,7 @@ export default defineComponent({
 			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 gradientWidth = document.querySelector('.detail_modal_body_select .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
@@ -1098,6 +1115,7 @@ export default defineComponent({
 						this.selectColorList = selectColorList
 						// this.getHsvColor(selectColorList)
 						this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
+						img.remove()
 					};
                     
 				
@@ -1136,6 +1154,19 @@ export default defineComponent({
 	
 	}
 	.detail_Library{
+		.select_block{
+			border: calc(0.1rem* 1.2) solid #F1F1F1;
+			// margin-right: calc(2.3rem*1.2);
+			height: 4rem;
+			width: calc(20rem*1.2);
+			margin-bottom: 1rem;
+			.ant-select{
+				width: 90%;
+			}
+			.ant-select:not(.ant-select-customize-input) .ant-select-selector{
+				width: 100%;
+			}
+		}
 		.content_search_block{
                 display: flex;
 				margin-bottom: calc(1rem*1.2);
@@ -1150,7 +1181,7 @@ export default defineComponent({
                     // font-size: 1.6rem*1.2);
 					font-size: calc(1.2rem*1.2);
                     font-weight: 400;
-					height: calc(3rem*1.2);
+					height: 4rem;
 
                     &::placeholder {
                         color: #C2C2C2;

src/component/Detail/DesignDetailEnd.vue

@@ -1,68 +1,47 @@
 <template>
 	<div class="detail_modal_body_result">
-		<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
+		<div v-show="type_ == 1" class="result_apparel_print">
 			<div class="upload_title result_apparel" v-show="type_ == 1">
 				<i class="color_edit fi fi-bs-comments"></i>
 				<span>{{ $t('DesignDetailEnd.NewApparel') }}</span>
 			</div>
-			<div v-show="type_ == 2" class="result_print">
+			
-				<div>
+			<div class="result_apparel_print_img">
-					<div class="upload_title">
+				<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.path?sketchImg?.path:current?.path" :title="current?.type">
+				<!-- <div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
+					<img v-for="item in current?.layersObject" :src="item.imageUrl" alt="">
+				</div> -->
+			
+			</div>
+		</div>
+		<div v-show="type_ == 2" class="result_apparel_elements">
+			<div class="upload_title result_apparel">
 				<i class="color_edit fi fi-bs-comments"></i>
 				<span>{{ $t('DesignDetailEnd.NewPrint') }}</span>
 			</div>
-					<div class="print_left">
+			<div class="modal_img">
-						<!-- <img :src="current.path" :title="current.type"> -->
+				<div class="modal_img_item" v-for="item,index in exhibitionList.print" :key="item" >
-						<img  :src="current?.printObject?.prints?.[0]?.path" v-if="current?.printObject?.prints?.[0]?.path">
+				<!-- <div class="modal_img_item" v-for="item,index in current.printObject.prints" :key="item" > -->
-						<div  src="@/assets/images/homePage/null_img.png" v-else ></div>
+					<img v-lazy="item.path" alt="">
+					<sketchCategory :disignTypeList="designTypeList" :generateList="exhibitionList.print" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
+
 					<div
-							v-show="current?.printObject?.prints?.[0]?.path"
 						class="delete_file_block"
-							@click="deleteFile"
+						@click="deleteSelectptints(item,index)"
 					>
 						<span class="icon iconfont icon-shanchu"></span>
 					</div>
 				</div>
-				</div>
+				<div class="modal_img_item" v-for="item,index in printsList" :key="item" >
-				<div>
+					<img v-lazy="item.path" alt="">
-					<div class="upload_title">
+					<sketchCategory :disignTypeList="designTypeList" :generateList="printsList" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
-						<i class="color_edit fi fi-bs-comments"></i>
-						<span>{{ $t('DesignDetailEnd.Placement') }}</span>
-					</div>
-					<div class="print_right">
-						<div class="habit_Overal_Single">
 					<div
-								class="habit_Overal_Single_text"
+						class="delete_file_block"
-								:class="{ active: !overallSingle }"
+						@click="deleteptints(item,index)"
 					>
-								{{ $t('DesignDetailEnd.Overall') }}
+						<span class="icon iconfont icon-shanchu"></span>
-							</div>
-							<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
-							<div
-								class="habit_Overal_Single_text"
-								:class="{ active: overallSingle }"
-							>
-								{{ $t('DesignDetailEnd.Single') }}
 					</div>
 				</div>
-						<!-- <div v-show="!overallSingle" class="habit_System_Designer">
-							<a-slider id="system_silder"
-								v-model:value="systemDesignerPercentage"
-								@afterChange="systemDesigner"
-								:tip-formatter="formatter"
-							>
-							</a-slider>
-						</div> -->
-					</div>
-				</div>
-			</div>
-			<div class="result_apparel_print_img">
-				<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.path?sketchImg?.path:current?.path" :title="current?.type">
-				<!-- <img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint"> -->
-				<div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
-					<img v-for="item in current?.layersObject" :src="item.imageUrl" alt="">
-				</div>
-			
 			</div>
 		</div>
 		<div v-show="type_ == 3">
@@ -84,11 +63,43 @@
 				</div>
 			</div>
 		</div>
+		<div v-show="type_ == 4" class="result_apparel_elements">
+			<div class="upload_title result_apparel">
+				<i class="color_edit fi fi-bs-comments"></i>
+				<span>New Elements</span>
+			</div>
+			<div class="modal_img">
+				
+				<!-- <div class="modal_img_item" v-for="item,index in current.trims.prints" :key="item" > -->
+				<div class="modal_img_item" v-for="item,index in exhibitionList.elements" :key="item" >
+					<img v-lazy="item.path" alt="">
+					<div
+						class="delete_file_block"
+						@click="deleteSelectElements(item,index)"
+					>
+						<span class="icon iconfont icon-shanchu"></span>
+					</div>
+				</div>
+				<div class="modal_img_item" v-for="item,index in elementsList" :key="item" >
+					<img v-lazy="item.url" alt="">
+					<div
+						class="delete_file_block"
+						@click="deleteElements(item,index)"
+					>
+						<span class="icon iconfont icon-shanchu"></span>
+					</div>
+				</div>
+			</div>
+		</div>
 		<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn" :class="[ !sketchImg?.id?!current?.id?'active':'':'' ]">{{ $t('DesignDetailEnd.preview') }}</div>
-		<div v-if="type_ == 2 && current?.printObject?.prints?.[0]?.path != null" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
+		<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
-		<div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div>
+		<!-- <div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div> -->
+		<div v-if="type_ == 4" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
+		
 	<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
 	<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
+	<DesignElementsOperation v-if="!moible" ref="DesignElementsOperation"></DesignElementsOperation>
+	<DesignPrintMobile v-else ref="DesignPrintMobile"></DesignPrintMobile>
 	</div>
 	<div class="mark_loading" v-show="loadingShow">
 		<a-spin size="large" />
@@ -102,15 +113,19 @@ import { useStore } from "vuex";
 import { Sketch} from '@ans1998/vue3-color'
 import DesignPrintOperation from './DesignPrintOperation.vue';
 import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
+import DesignElementsOperation from './DesignElements.vue';
+import DesignPrintMobile from './DesignElementsMobile.vue';
 import { message,Upload} from 'ant-design-vue';
 import { openGuide,driverObj__ } from "@/tool/guide";
 import {isMoible,setGradual} from '@/tool/util'
 import { useI18n } from 'vue-i18n';
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 
 export default defineComponent({
     props: ["msg"],
     components:{
-        Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile
+        Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
+		DesignElementsOperation,DesignPrintMobile,sketchCategory
     },
     setup(prop) {
         const store = useStore();
@@ -122,10 +137,9 @@ export default defineComponent({
         let moible = inject('moible')//父组件传过来的数据
         let designItemDetail = inject('designItemDetail')//父组件传过来的数据
         let currentIndex = inject('currentIndex')//父组件传过来的数据
+        let designTypeList = inject('designTypeList')//父组件传过来的数据
 		let previewShow = ref(false)
 		//印花
-		let overallSingle = ref(false)
-		let systemDesignerPercentage = ref(30)
 
 		//颜色
 		// let colorList = ref([{}])
@@ -135,7 +149,12 @@ export default defineComponent({
 		//加载中
 		let loadingShow = ref(false)
 
+		let exhibitionList = inject('exhibitionList')
 		let {t} = useI18n()
+		let printsList = ref([])
+		let elementsList = ref([
+		
+		])
         return{
 			store,
 			current,
@@ -145,14 +164,16 @@ export default defineComponent({
 			moible,
 			designItemDetail,
 			currentIndex,
+			designTypeList,
 			previewShow,
 			type_,
-			overallSingle,
-			systemDesignerPercentage,
 			colorList,
 			selectIndex,
 			loadingShow,
+			exhibitionList,
 			t,
+			printsList,
+			elementsList,
         }
     },
     data(){
@@ -182,14 +203,40 @@ export default defineComponent({
 			}
 		}
 	},
+	watch: {
+		'exhibitionList.print':{
+			handler(newVal,oldVal){
+				this.printsList = this.printsList.filter(objA => {
+					return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
+				});
+				this.setExhibitionType('print')
+			}
+		},
+		'exhibitionList.elements':{
+			handler(newVal,oldVal){
+				this.elementsList = this.elementsList.filter(objA => {
+					return !newVal.some(objB => objB.minIOPath === objA.minIOPath);
+				});
+				this.setExhibitionType('elements')
+			}
+		}
+	},
     methods:{
+		
 		//点击判断
 		init(num){
 			// this.current = JSON.parse(JSON.stringify(this.currentItem))
 			this.type_ = num
 			this.colorList[this.selectIndex] = this.$parent.selectColor
-			this.overallSingle = this.current?.printObject?.ifSingle == null?false:this.current?.printObject?.ifSingle
+			if(num == 2){
-			this.systemDesignerPercentage = this.current?.printObject?.ifSingle?this.current?.printObject?.prints[0].scale?this.current?.printObject?.prints[0].scale*100:100:100
+				this.setExhibitionType('print')
+			}else if(num == 4){
+				this.setExhibitionType('elements')
+			}
+		},
+		clearModal(){
+			this.elementsList = []
+			this.printsList = []
 		},
 		//模型
 		setSketchImg(v){
@@ -201,17 +248,22 @@ export default defineComponent({
 			this.sketchImg.designType = v.designType
 		},
 		//印花
-		systemDesigner(num) {
+		setExhibitionType(str){
-			this.current.printObject.scale = num
+			this.exhibitionList[str].forEach((item,index)=>{
-        },
+				if(!item.categoryValue){
-		setOveralSingle(){
+					this.designTypeList.forEach((typeItem)=>{
-			this.current.printObject.ifSingle = this.overallSingle
+						if(item.level2Type == typeItem.value){
-		},
+							item.categoryValue = typeItem.name
-		formatter(value) {
+							item.category = typeItem.value
-			return `${value*3}%`;
+						}
+
+					})
+				}
+			})
 		},
+		
 		setPrint(){
-			if(this.current?.printObject?.prints?.[0]?.path){
+			// if(this.current?.printObject?.prints?.[0]?.path){
 				let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
 				DesignPrintOperation.init()
 				if(this.driver__.driver){
@@ -219,9 +271,9 @@ export default defineComponent({
 						driverObj__.moveNext();
 					})
 				}
-			}else{
+			// }else{
-                message.info(this.t('DesignDetailEnd.jsContent1'));
+            //     message.info(this.t('DesignDetailEnd.jsContent1'));
-			}
+			// }
 			
 		},
 		deleteFile(){
@@ -286,6 +338,23 @@ export default defineComponent({
 			// arr[index].id = this.sketchImg.id_? this.sketchImg.id_:this.current.id
 			return arr
 		},
+		deleteptints(item,index){
+			this.printsList.splice(index,1)
+		},
+		deleteSelectptints(item,index){
+			this.exhibitionList.print.splice(index,1)
+		},
+		deleteElements(item,index){
+			this.elementsList.splice(index,1)
+		},
+		deleteSelectElements(item,index){
+			this.exhibitionList.elements.splice(index,1)
+		},
+		setElemets(){
+			if(this.current.trims.prints && this.current.trims.prints.length == 0 && this.elementsList.length == 0)return message.info('请选择至少一张element')
+			let DesignElementsOperation = isMoible() ? this.$refs.DesignPrintMobile : this.$refs.DesignElementsOperation
+			DesignElementsOperation.init()
+		},
 		//提交
 		setPreview(){
             let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -329,6 +398,8 @@ export default defineComponent({
 				}
 				let color = `${this.colorList[this.selectIndex].rgba.r} ${this.colorList[this.selectIndex].rgba.g} ${this.colorList[this.selectIndex].rgba.b}`
 				data.designSingleItemDTOList[index].color = color
+			}else if(this.type_ == 4){
+			    data.designSingleItemDTOList[index].trims = this.current.trims
 			}
 			if(this.colorList[this.selectIndex].gradient){
 				let gradient = this.colorList[this.selectIndex].gradient
@@ -353,6 +424,7 @@ export default defineComponent({
 									delete designItemDetail.clothes[index].gradient
 								}
 								designItemDetail.clothes[index].designType = item.designType
+								designItemDetail.clothes[index].trims = item.trims
 								designItemDetail.clothes[index].layersObject = item.layersObject
 								designItemDetail.clothes[index].minIOPath = item.minIOPath
 								designItemDetail.clothes[index].path = item.path
@@ -544,6 +616,7 @@ export default defineComponent({
 		display: flex;
 		flex-wrap: wrap;
 		padding-left: calc(2rem*1.2);
+		align-content: flex-start;
 		&.modal_img::-webkit-scrollbar {
 			display: none;
 		}
@@ -590,6 +663,48 @@ export default defineComponent({
 			
 		}
 	}
+	//elements
+	.result_apparel_elements{
+		height: 85%;
+		// height: 100%;
+		.modal_img{
+			height: calc(100%);
+			overflow-y: auto;
+		}
+		.modal_img_item{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			height: auto;
+			border: none;
+			img{
+				width: 100%;
+				object-fit: cover;
+			}
+			.delete_file_block{
+				display: none;
+				width: calc(3.2rem*1.2);
+				height: calc(3.2rem*1.2);
+				background: rgba(0,0,0,0.6);
+				border-radius: calc(0.4rem*1.2);
+				position: absolute;
+				top: calc(0.9rem*1.2);
+				right: calc(0.9rem*1.2);
+				text-align: center;
+				line-height: calc(3.2rem*1.2);
+				left: auto;
+				cursor: pointer;
+				.icon-shanchu{
+					font-size: calc(1.6rem*1.2);
+					color: #fff;
+				}
+			}
+			&:hover .delete_file_block{
+				display: block;
+			}
+		}
+	}
 	.subitOkPreviewBtn{
 		bottom: calc(4rem*1.2);
 		position: absolute;

src/component/Detail/DesignElements.vue

@@ -0,0 +1,922 @@
+<template>
+  <div>
+	<a-modal
+            class="designElements_modal"
+            v-model:visible="designElements"
+            :footer="null"
+            width="78%"
+            :maskClosable="false"
+            :centered="true"
+            :closable="false"
+			:keyboard="false"
+            :mask="true"
+        >
+            <div class="designElements_content">
+				<div class="design_title_text">
+					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
+				</div>
+				<div class="design_closeIcon" @click.stop="closeModal()">
+					<i class="fi fi-rr-cross-small"></i>
+				</div>
+				<div class="designElements_open">
+					<!--  -->
+					<div class="print_right">
+						<div class="print_right show_print_right ">
+							<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
+							<div class="designElements_nav">
+								<div class="designElements_single" v-for="item,index in designElementsList" :key="item">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+								<div class="designElements_single" v-for="item,index in designSelectElementsList" :key="item">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+							</div>
+							<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
+							<div class="subitOkPreviewBtn  _1"  @click.stop="setOK">OK</div>
+						</div>
+					</div>
+				</div>
+				<div class="designElements_centent" id="designElementsCentent">
+					<div class="designElements_imgMask">
+						<div class="designElements_print">
+							<div 
+								v-for="item,index in exhibitionElementsList" 
+								:key="item"
+								:style="[printStyleList?.[index]?.style]" 
+								@mousedown.stop="itemMoveMousedown(index,$event)"
+								class="modal_imgItem" 
+								ref="content" >
+								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false"> 
+							</div>
+						</div>
+						<img :src="current?.path" alt="" class="designElements_sketch">
+						<div class="designElements_btn">
+							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
+								<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
+								<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
+								<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
+								<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
+								<li class="designElements_rotote" v-rotote.stop="[index,item.transform]"></li>
+								<li class="designElements_delete" @click="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
+							</ul>
+							<div></div>
+						</div>
+					</div>
+				</div>
+				<div class="designElements_right">
+					<div class="designElements_entirety_img">
+						<img :src="currentFullBodyView" alt="">
+					</div>
+				</div>
+            </div>
+			<div class="mark_loading" v-show="loadingShow">
+				<a-spin size="large" />
+        </div>
+        </a-modal>
+  </div>
+</template>
+
+<script >
+import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
+// import { LoadingOutlined } from "@ant-design/icons-vue";
+import { useStore } from "vuex";
+import { openGuide,driverObj__ } from "@/tool/guide";
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+	
+    setup(prop) {
+        let designElements = ref(false);
+		let designSelectElementsList = ref([])//新增的元素
+		let designElementsList = ref([])//已经存在的元素
+		let exhibitionElementsList = ref([])//展示的元素
+		let setOkData = ref([])
+		let current = inject('current')//父组件传过来的数据
+		let driver__ = inject('driver__')
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
+		let printZIndex = ref(2)//印花优先级
+        let printStyleList = ref([]);
+		let currentPrintStyleList = {
+			centers:{
+				left:0,
+				top:0,
+			},
+			style:{
+				left:0+"px",
+				top:0+"px",
+				right:"auto",
+				bottom:"auto",
+				width:'auto',
+				height:'auto',
+				zIndex:1,
+			},
+			transform:{
+				scale:1,
+				rotateZ:0,
+			},
+			designElementsBtn:false
+		}
+		let direction = ref('')
+		let imgDom = ref()
+		let imgDomIndex = ref(0)
+		let print = ref({
+			width:'',
+			height:''
+		})
+		let sketch = ref({
+			width:'',
+			height:''
+		})
+		let loadingShow = ref(false)
+		let currentFullBodyView = ref('')
+		let designItemDetailTS = ref({})
+		let body = ref(false)
+		let {t} = useI18n()
+        return {
+            designElements,
+			designSelectElementsList,
+			designElementsList,
+			exhibitionElementsList,
+			setOkData,
+			current,
+			driver__,
+			printZIndex,
+            printStyleList,
+			currentPrintStyleList,
+			direction,//判断点击的是li那个边
+			imgDom,
+			imgDomIndex,
+			print,
+			sketch,
+			loadingShow,
+			setRevocation,
+			t,
+			currentFullBodyView,
+			designItemDetailTS,
+			body,
+        };
+    },
+    data() {
+        return {
+            store: useStore(),
+        };
+    },
+
+	directives:{
+		//操作旋转
+		rotote:{
+			mounted(el,value){
+				
+				el.addEventListener('mousedown', (e) => {
+				let elParent = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
+				let mouse = true;
+				let angle  = 0
+				let num = 1
+				let x = 0
+				let y = 0
+				num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
+				angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
+				// 添加鼠标按下事件监听器
+				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
+				// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+					e.stopPropagation()
+					mouse = true;
+					var info = el.getBoundingClientRect();
+					let eX = info.x + info.width / 2;
+					let eY = info.y + info.height / 2;
+					let mousemove = (e) => {
+						if (mouse) {
+							let X = eX 
+							let Y = eY
+							let x = e.clientX - X
+							let y = Y - e.clientY
+							angle = Math.atan2(x,y)*(180 / Math.PI)
+							elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
+							el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+						}
+					}
+					document.addEventListener('mousemove', mousemove);
+					// 添加鼠标松开事件监听器
+					let mouseup = () => {
+						value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
+						mouse = false;
+						document.removeEventListener('mouseup',mouseup)
+						document.removeEventListener('mousemove',mousemove)
+					}
+					document.addEventListener('mouseup', mouseup);
+				});
+			}
+
+			},
+	},
+    methods: {
+		init(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
+			if(designItemDetail.others.length == 0){
+				this.body = true
+			}
+			this.designElements = true
+			this.clearModal()
+			if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
+			if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
+			if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
+			let skecth = new Image
+			skecth.src = this.current.path
+			skecth.onload=()=>{
+				this.sketch.width = skecth.width/10+'rem'
+				this.sketch.height = skecth.height/10+'rem'
+				skecth.remove()
+			}
+			if(this.exhibitionElementsList.length > 0){
+				this.exhibitionElementsList.forEach((item,index)=>{
+					this.setTemplate(item,index)
+				})
+			}else{
+			}
+		},
+		random(){
+			if(this.printStyleList.length == 0)return
+			this.printStyleList.forEach((v,index)=>{
+				this.refetchTemplate(index)
+			})
+		},
+		setPrintWH(url){
+			let print = new Image
+			return new Promise((resolve, reject) => {
+				print.onload=()=>{
+					this.print.width = print.width+'px'
+					this.print.height = print.height+'px'
+					resolve()
+					print.remove()
+				}
+				print.src = url
+			})
+		},
+		async setpitch(item,index){
+			await this.setPrintWH(item.path)
+			this.printStyleList.forEach((v)=>{
+				v.designElementsBtn = false
+			})
+			this.currentPrintStyleList.url = item.url
+			this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
+			let currentIndex = this.printStyleList.length-1
+			this.exhibitionElementsList.push({
+				angle:0,
+				designType:item.designType,
+				minIOPath:item.minIOPath,
+				path:item.path,
+				priority:1,
+				scale:1,
+				location:[0,0]
+			})
+			this.refetchTemplate(currentIndex)
+		
+			
+		},
+		//设置移动
+		itemMoveMousedown(index,event){
+			if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
+			this.imgDomIndex = index
+			this.printStyleList.forEach((v)=>{
+				v.designElementsBtn = false
+			})
+			this.imgDom = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			this.printStyleList[index].designElementsBtn = true
+			this.printStyleList[index].style.zIndex = this.printZIndex++
+			this.printStyleList[index].transform = {
+				scale:scale,
+				rotateZ:rotateZ?rotateZ:0,
+			}
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
+			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
+			this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
+			this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
+			document.addEventListener("mouseup", this.mouseup);
+			document.addEventListener("mousemove", this.moveMousemove);
+		},
+		//设置尺寸
+		itemSizeMousedown(direction,event){
+			this.direction = direction
+			this.imgDom = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			this.printStyleList[this.imgDomIndex].designElementsBtn = true
+			this.printStyleList[this.imgDomIndex].transform = {
+				scale:scale,
+				rotateZ:rotateZ,
+			}
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let li = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_btn_top")[0].offsetWidth/2
+			if(this.direction == 'right' || this.direction == 'bottom'){
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
+			}else{
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
+			}
+			
+			document.addEventListener("mouseup", this.sizeMouseup);
+			document.addEventListener("mousemove", this.sizeMousemove);
+		},
+		//鼠标移动
+		moveMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_imgMask")[0]
+			parentNode = parentNode.getBoundingClientRect()
+			let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
+			let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
+			this.printStyleList[this.imgDomIndex].style.left = x
+			this.printStyleList[this.imgDomIndex].style.top = y
+			
+		
+		},
+
+		sizeMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode =this.imgDom.parentNode
+			let width = imgDomWH.width
+			let height = imgDomWH.height
+			let num = width/height
+			let num1 = height/width
+			let w,h
+			//判断移动四个边
+			if(this.direction == 'right'){
+				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
+				h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				width = w+'px'
+				height = w*num1+'px'
+			}else if(this.direction == 'top'){
+				this.printStyleList[this.imgDomIndex].style.top = 'auto'
+				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
+				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
+				
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'bottom'){
+				h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'left'){
+				this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
+				w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
+				width = w+'px'
+				height = w*num1+'px'
+			}
+			//判断尺寸是否到边
+			this.printStyleList[this.imgDomIndex].style.width = width
+			this.printStyleList[this.imgDomIndex].style.height = height
+
+		},
+		//鼠标抬起
+		sizeMouseup(e){
+			this.printStyleList[this.imgDomIndex].style={
+				right:'auto',
+				left:this.imgDom.offsetLeft+'px',
+				bottom:'auto',
+				top:this.imgDom.offsetTop+'px',
+				height:this.imgDom.offsetHeight+'px',
+				width:this.imgDom.offsetWidth+'px',
+				zIndex:this.printZIndex
+			}
+			document.removeEventListener("mouseup", this.sizeMouseup);
+			document.removeEventListener("mousemove", this.sizeMousemove);
+		},
+		mouseup(e) {
+
+			document.removeEventListener("mouseup", this.mouseup);
+			document.removeEventListener("mousemove", this.moveMousemove);
+		},
+		deletePrint(){
+			this.exhibitionElementsList.splice(this.imgDomIndex,1)
+			this.printStyleList.splice(this.imgDomIndex,1)
+		},
+		
+        //随机重置图片顺序
+        refetchTemplate(index) {
+			// let scale = (Math.trunc(Math.random()*15)+1)*.1
+			let rotateZ1 = Math.trunc(Math.random()*360)+1
+			let rotateZ2 = Math.trunc(Math.random()*360)+1
+			let sketch = document.getElementsByClassName("designElements_modal")[0]?.getElementsByClassName('designElements_sketch')[0]
+			let width
+			let scale
+			if(sketch.width<sketch.height){
+				width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
+				scale = width / this.print.width.replace(/px/g,'')
+			}else{
+				width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
+				scale = width / this.print.height.replace(/px/g,'')
+			}
+			// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
+			// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
+			let x = sketch?.width - this.print.width.replace(/px/g,'')*scale 
+			let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
+			this.printStyleList[index].style = {
+				left:Math.trunc(Math.random()*x)+1+"px",
+				top:Math.trunc(Math.random()*y)+1+"px",
+				right:"auto",
+				bottom:"auto",
+				width:this.print.width.replace(/px/g,'')*scale+'px',
+				height:this.print.height.replace(/px/g,'')*scale+'px',
+				zIndex:this.printZIndex++
+			}
+			this.printStyleList[index].transform = {
+				rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
+			}
+        },
+		//设置图片
+       async setTemplate(item,index) {
+			await this.setPrintWH(item.path)
+			this.designSelectElementsList
+			let sketch = document.getElementsByClassName("designElements_modal")[0]?.getElementsByClassName('designElements_sketch')[0]
+			let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+			let scale
+			scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+			let zIndex = 1
+			let left = item.location[0]/sketchNum+'px'
+			let top = item.location[1]/sketchNum+'px'
+			if(sketch.offsetWidth < item.location[0]/sketchNum){
+				left = sketch.offsetWidth +'px'
+			}
+			if(sketch.offsetHeight < item.location[1]/sketchNum){
+				top = sketch.offsetHeight +'px'
+			}
+			this.printStyleList[index]={
+				centers:{
+					left:0,
+					top:0,
+				},
+				style:{
+					left:left,
+					top:top,
+					right:"auto",
+					bottom:"auto",
+					width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
+					height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
+					zIndex:zIndex++
+				},
+				transform:{
+					// scale:scale<.2?.2:scale,//0.2-3
+					rotateZ:item.angle,
+				},
+				designElementsBtn:false
+			}
+        },
+		computeZindex(){
+			let arr = JSON.parse(JSON.stringify(this.printStyleList))
+			arr.sort((a, b) => {
+				var a_num = a["style"].zIndex;
+				var b_num = b["style"].zIndex;
+				return a_num - b_num;
+			});
+			let num = 1
+			arr.forEach((v)=>{
+				v.style.zIndex = num++
+			})
+			return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
+		},
+		computeSize(arr){
+			// let num = this.sketch/
+			return new Promise(async (resolve, reject) => {
+				let sketch = document.getElementsByClassName("designElements_sketch")[0]
+				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+				let prints = []
+				let scale
+				let location
+				for (let index = 0; index < arr.length; index++) {
+					await this.setPrintWH(this.exhibitionElementsList[index].path)
+					scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+					location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
+					let obj = {
+						angle : arr[index].transform.rotateZ,
+						location : location,
+						priority:arr[index].style.zIndex,
+						scale: scale,
+						designType:this.exhibitionElementsList[index].designType,
+						path:this.exhibitionElementsList[index].path,
+						minIOPath:this.exhibitionElementsList[index].minIOPath,
+					}
+					prints.push(obj)
+				}
+				resolve(prints)
+			})
+		},
+		async setPreview(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let index 
+			designItemDetail.clothes.forEach((v,ind)=>{
+				if(v.id == this.current.id){
+					index = ind
+				}
+			})
+			// let data = {
+            //     ...designItemDetail,
+            //     priority:priority,
+            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            // }
+			await this.computeZindex().then((rv)=>{
+				this.setOkData = rv
+			})
+			let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
+			data.designSingleItemDTOList[index].trims.prints = this.setOkData
+			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+			this.loadingShow = true
+			Https.axiosPost(Https.httpUrls.designSingle, data).then(
+				(rv) => {
+					// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
+					this.currentFullBodyView = rv.currentFullBodyView
+					this.designItemDetailTS.rv = rv
+					this.designItemDetailTS.data = data
+					this.loadingShow = false
+					// this.designElements = false
+					if(this.driver__.driver){
+						nextTick().then(()=>{
+							driverObj__.moveNext();
+						})
+					}
+				}
+			).catch(res=>{
+				this.loadingShow = false
+			});
+		},
+		setOK(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let index 
+			designItemDetail.clothes.forEach((v,ind)=>{
+				if(v.id == this.current.id){
+					index = ind
+				}
+			})
+			if(this.designItemDetailTS.rv){
+				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
+				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
+				designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
+				designItemDetail.clothes[index].trims.prints = this.setOkData
+				designItemDetail.ifSubmit = true
+				designItemDetail.clothes.forEach((item,i)=>{
+					let a
+					if(item.layersObject[0].imageCategory.indexOf("back") == -1){
+						a = item.layersObject[0]
+						item.layersObject[0] = item.layersObject[1]
+						item.layersObject[1] = a
+					}
+					item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
+					item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
+				})
+				this.store.commit("setDesignItemDetail", designItemDetail);
+				this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
+				this.setRevocation(designItemDetail,this.designItemDetailTS.data)
+				this.designItemDetailTS = {}
+			}
+			this.$parent.elementsList = JSON.parse(JSON.stringify(this.designElementsList))
+
+			this.designElements = false
+			if(this.driver__.driver){
+				driverObj__.moveNext();
+			}
+		},
+		clearModal(){
+			this.designElements = true//modal页面关闭
+			this.printZIndex = 2//点击图片z-index
+			this.imgDomIndex = 0//点击图片下标
+			this.designSelectElementsList = []
+			this.printStyleList = []
+			this.designElementsList = []
+			this.exhibitionElementsList = []
+		},
+		closeModal(){
+            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let _this = this
+            Modal.confirm({
+                title: this.t('DesignPrintOperation.jsContent1'),
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+					_this.designElements=false
+                }
+            });
+		},
+    },
+});
+</script>
+
+<style lang="less">
+.designElements_modal {
+	// max-width: 1440px;
+	.mark_loading{
+		position: absolute;
+	}
+	.ant-modal-body{
+		padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
+		// height: calc(65vh - 6.4rem*1.2));
+		height: calc(65rem*1.2);
+		display: flex;
+		overflow-y: hidden;
+		flex-direction: column;
+	}
+	.ant-modal-content{
+		border-radius: calc(1rem*1.2);
+		overflow: hidden;
+	}
+
+    .designElements_content {
+        // background: #f2f3fb;
+        // padding-bottom: 2.9rem*1.2);
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+        .designElements_header {
+            position: relative;
+            height: calc(6.6rem*1.2);
+            width: 100%;
+            background: #F7F7F7;
+
+            .placement_modal_title{
+                position: absolute;
+                height: 100%;
+                line-height: calc(6.6rem*1.2);
+                left: calc(3.7rem*1.2);
+                top: 0;
+                font-size: calc(1.8rem*1.2);
+                color: #030303;
+            }
+        }
+
+		.designElements_right{
+			height: calc(50rem*1.2);
+			position: absolute;
+			right: calc(2rem*1.2);
+			left: auto;
+			top: 50%;
+			transform: translateY(-50%);
+			max-height: calc(50rem*1.2);
+			max-width: calc(30rem*1.2);
+			.designElements_entirety_img{
+				height: 100%;
+				img{
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+					position: relative;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%);
+				}
+			}
+		}
+		.designElements_open{
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			.print_right{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				border: 2px solid;
+				padding: calc(2rem*1.2) 0;
+				width: calc(16rem*1.2);
+				border-radius: calc(1rem*1.2);
+				height: calc(40rem*1.2);
+				.button_second{
+					margin: calc(1rem*1.2) 0;
+					width: calc(10rem*1.2);
+					text-align: center;
+					position: initial;
+					transform: none;
+					height: calc(3rem*1.2);
+					line-height: calc(3rem*1.2);
+				}
+				.designElements_nav{
+					display: flex;
+					margin-top: calc(2rem*1.2);
+					flex-wrap: wrap;
+					width: 100%;
+					height: calc(22rem*1.2);
+					overflow-x: hidden;
+					justify-content: space-evenly;
+					align-content: flex-start;
+					&.designElements_nav::-webkit-scrollbar {
+						display: none;
+					}
+					.active{
+						img{
+							border: 2px solid;
+							border-radius: 2px;
+							box-sizing: border-box;
+						}
+					}
+					.designElements_single{
+						width: 40%;
+						margin-bottom: calc(2rem*1.2);
+					}
+					img{
+						width: 100%;
+						cursor: pointer;
+					}
+				}
+				&.show_print_right{
+					border: none;
+					padding: 0;
+					height: 100%;
+				}
+			}
+		}
+		.designElements_centent{
+			margin: 0 auto;
+			overflow: hidden;
+			justify-content: space-between;
+			position: relative;
+			user-select:none;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%,-50%);
+			display: flex;
+			&.active{
+				flex-direction: row;
+			}
+			.designElements_imgMask{
+				width: auto;
+				height: auto;
+				position: relative;
+				>img{
+					z-index: 2;
+					position: relative;
+					// max-width: 100%;
+					// max-height: 100%;
+					// width: 100%;
+					// height: 50rem*1.2);
+					max-height: calc(50rem*1.2);
+					min-height: calc(30rem*1.2);
+					width: auto;
+					max-width: calc(60rem*1.2);
+				}
+				.designElements_sketch_mask{
+					z-index: 3;
+					position: absolute;
+					inset: 0;
+					width: 100%;
+				}
+				>div{
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					top: 0;
+				}
+			}
+			.designElements_print{
+				z-index: 3;
+				.modal_imgItem{
+					position: absolute;
+					overflow: hidden;
+					top: 0;
+					img{
+						width: 100%;
+						height: 100%;
+						float: left;
+						user-select:none;
+						-webkit-user-drag: none;
+					}
+				}
+			}
+			.designElements_btn{
+				z-index: 3;
+				>div{
+					width: 100%;
+					height: 100%;
+					border: 2px solid rgb(20, 188, 255);
+					position: absolute;
+				}
+				ul{
+					list-style: none;
+					// width: 100%;
+					// height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+					box-sizing: border-box;
+					border: 2px solid rgb(20, 188, 255);
+					padding: 0;
+					-webkit-user-drag: none;
+					user-select:none;
+					opacity: 0;
+					margin: 0;
+				
+					&.designElements_Mouoverall{
+						opacity: 1;
+						border: none;
+						width: calc(1.4rem*1.2);
+						height: calc(1.4rem*1.2);
+						i{
+							display: flex;
+							color: #14bcff;
+						}
+
+					}
+					li{
+						cursor: pointer;
+						// border-radius: 50%;
+						width: calc(1rem*1.2);
+						height: calc(1rem*1.2);
+						background-color: rgb(20, 188, 255);
+						position: absolute;
+						pointer-events: none;
+					}
+					&.active{
+						opacity: 1;
+						li{
+							pointer-events: auto;
+						}
+					}
+					.designElements_btn_top,.designElements_btn_bottom{
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: n-resize;
+					}
+					.designElements_btn_top{
+						top: 0;
+					}
+					.designElements_btn_bottom{
+						top: 100%;
+					}
+					.designElements_btn_left,.designElements_btn_right{
+						top: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: e-resize;
+					}
+					.designElements_btn_left{
+						left: 0;
+					}
+					.designElements_btn_right{
+						left: 100%;
+					}
+					.designElements_rotote{
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+						width: 0;
+						height: 0;
+					}
+					.designElements_delete{
+						position: absolute;
+						top: 0;
+						right: 0;
+						width: 4rem;
+						background: none;
+						transform: translate(100%, -100%);
+						height: 4rem;
+						img{
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.designElements_rotote::after{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						width: calc(.2rem*1.2);
+						height: calc(3rem*1.2);
+						left: 50%;
+						bottom: 0;
+						transform: translateX(-50%);
+					}
+					.designElements_rotote::before{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						top: calc(50% - 3rem*1.2);
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						width: calc(1.5rem*1.2);
+						height: calc(1.5rem*1.2);
+						border-radius: 50%;
+					}
+				}
+			}
+			
+		}
+		.subitOkPreviewBtn{
+			z-index: 2;
+			margin: calc(1rem*1.2) 0;
+			width: calc(10rem*1.2);
+			text-align: center;
+			position: initial;
+			transform: none;
+		}
+    }
+}
+</style>

src/component/Detail/DesignElementsMobile.vue

@@ -0,0 +1,924 @@
+<template>
+  <div>
+	<a-modal
+            class="designElementsMobile_modal"
+            v-model:visible="designElements"
+            :footer="null"
+            width="78%"
+            :maskClosable="false"
+            :centered="true"
+            :closable="false"
+			:keyboard="false"
+            :mask="true"
+        >
+            <div class="designElementsMobile_content">
+				<div class="design_title_text">
+					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
+				</div>
+				<div class="design_closeIcon" @click.stop="closeModal()">
+					<i class="fi fi-rr-cross-small"></i>
+				</div>
+				<div class="designElementsMobile_open">
+					<!--  -->
+					<div class="print_right">
+						<div class="print_right show_print_right ">
+							<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
+							<div class="designElementsMobile_nav">
+								<div class="designElementsMobile_single" v-for="item,index in designElementsList" :key="item">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+								<div class="designElementsMobile_single" v-for="item,index in designSelectElementsList" :key="item">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+							</div>
+							<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
+							<div class="subitOkPreviewBtn  _1"  @click.stop="setOK">OK</div>
+						</div>
+					</div>
+				</div>
+				<div class="designElementsMobile_centent" id="designElementsCentent">
+					<div class="designElementsMobile_imgMask">
+						<div class="designElementsMobile_print">
+							<div 
+								v-for="item,index in exhibitionElementsList" 
+								:key="item"
+								:style="[printStyleList?.[index]?.style]" 
+								@touchstart.stop="itemMoveMousedown(index,$event)"
+								class="modal_imgItem" 
+								ref="content" >
+								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false"> 
+							</div>
+						</div>
+						<img :src="current?.path" alt="" class="designElementsMobile_sketch">
+						<div class="designElementsMobile_btn">
+							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
+								<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
+								<li class="designElementsMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
+								<li class="designElementsMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
+								<li class="designElementsMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
+								<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
+								<li class="designElementsMobile_delete" @click="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
+							</ul>
+							<div></div>
+						</div>
+					</div>
+				</div>
+				<div class="designElementsMobile_right">
+					<div class="designElementsMobile_entirety_img">
+						<img :src="currentFullBodyView" alt="">
+					</div>
+				</div>
+            </div>
+			<div class="mark_loading" v-show="loadingShow">
+				<a-spin size="large" />
+        </div>
+        </a-modal>
+  </div>
+</template>
+
+<script >
+import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
+// import { LoadingOutlined } from "@ant-design/icons-vue";
+import { useStore } from "vuex";
+import { openGuide,driverObj__ } from "@/tool/guide";
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+	
+    setup(prop) {
+        let designElements = ref(false);
+		let designSelectElementsList = ref([])//新增的元素
+		let designElementsList = ref([])//已经存在的元素
+		let exhibitionElementsList = ref([])//展示的元素
+		let setOkData = ref([])
+		let current = inject('current')//父组件传过来的数据
+		let driver__ = inject('driver__')
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
+		let printZIndex = ref(2)//印花优先级
+        let printStyleList = ref([]);
+		let currentPrintStyleList = {
+			centers:{
+				left:0,
+				top:0,
+			},
+			style:{
+				left:0+"px",
+				top:0+"px",
+				right:"auto",
+				bottom:"auto",
+				width:'auto',
+				height:'auto',
+				zIndex:1,
+			},
+			transform:{
+				scale:1,
+				rotateZ:0,
+			},
+			designElementsBtn:false
+		}
+		let direction = ref('')
+		let imgDom = ref()
+		let imgDomIndex = ref(0)
+		let print = ref({
+			width:'',
+			height:''
+		})
+		let sketch = ref({
+			width:'',
+			height:''
+		})
+		let loadingShow = ref(false)
+		let currentFullBodyView = ref('')
+		let designItemDetailTS = ref({})
+		let body = ref(false)
+		let {t} = useI18n()
+        return {
+            designElements,
+			designSelectElementsList,
+			designElementsList,
+			exhibitionElementsList,
+			setOkData,
+			current,
+			driver__,
+			printZIndex,
+            printStyleList,
+			currentPrintStyleList,
+			direction,//判断点击的是li那个边
+			imgDom,
+			imgDomIndex,
+			print,
+			sketch,
+			loadingShow,
+			setRevocation,
+			t,
+			currentFullBodyView,
+			designItemDetailTS,
+			body,
+        };
+    },
+    data() {
+        return {
+            store: useStore(),
+        };
+    },
+
+	directives:{
+		//操作旋转
+		rotote:{
+			mounted(el,value){
+				
+				el.addEventListener('touchstart', (e) => {
+				let elParent = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
+				let mouse = true;
+				let angle  = 0
+				let num = 1
+				let x = 0
+				let y = 0
+				num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
+				angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
+				// 添加鼠标按下事件监听器
+				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
+				// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+					e.stopPropagation()
+					mouse = true;
+					var info = el.getBoundingClientRect();
+					let eX = info.x + info.width / 2;
+					let eY = info.y + info.height / 2;
+					let touchmove = (e) => {
+						if (mouse) {
+							let X = eX 
+							let Y = eY
+							let x = e.targetTouches[0].clientX - X
+							let y = Y - e.targetTouches[0].clientY
+							angle = Math.atan2(x,y)*(180 / Math.PI)
+							elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
+							el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+						}
+					}
+					document.addEventListener('touchmove', touchmove,{passive:true});
+					// 添加鼠标松开事件监听器
+					let touchend = () => {
+						value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
+						mouse = false;
+						document.removeEventListener('touchend',touchend)
+						document.removeEventListener('touchmove',touchmove)
+					}
+					document.addEventListener('touchend', touchend);
+				});
+			}
+
+			},
+	},
+    methods: {
+		init(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
+			if(designItemDetail.others.length == 0){
+				this.body = true
+			}
+			this.designElements = true
+			this.clearModal()
+			if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
+			if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
+			if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
+			let skecth = new Image
+			skecth.src = this.current.path
+			skecth.onload=()=>{
+				this.sketch.width = skecth.width/10+'rem'
+				this.sketch.height = skecth.height/10+'rem'
+				skecth.remove()
+			}
+			if(this.exhibitionElementsList.length > 0){
+				this.exhibitionElementsList.forEach((item,index)=>{
+					this.setTemplate(item,index)
+				})
+			}else{
+			}
+		},
+		random(){
+			if(this.printStyleList.length == 0)return
+			this.printStyleList.forEach((v,index)=>{
+				this.refetchTemplate(index)
+			})
+		},
+		setPrintWH(url){
+			let print = new Image
+			return new Promise((resolve, reject) => {
+				print.onload=()=>{
+					this.print.width = print.width+'px'
+					this.print.height = print.height+'px'
+					resolve()
+					print.remove()
+				}
+				print.src = url
+			})
+		},
+		async setpitch(item,index){
+			await this.setPrintWH(item.path)
+			this.printStyleList.forEach((v)=>{
+				v.designElementsBtn = false
+			})
+			this.currentPrintStyleList.url = item.url
+			this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
+			let currentIndex = this.printStyleList.length-1
+			this.exhibitionElementsList.push({
+				angle:0,
+				designType:item.designType,
+				minIOPath:item.minIOPath,
+				path:item.path,
+				priority:1,
+				scale:1,
+				location:[0,0]
+			})
+			this.refetchTemplate(currentIndex)
+		},
+		//设置移动
+		itemMoveMousedown(index,event){
+			this.imgDomIndex = index
+			this.printStyleList.forEach((v)=>{
+				v.designElementsBtn = false
+			})
+			this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			this.printStyleList[index].designElementsBtn = true
+			this.printStyleList[index].style.zIndex = this.printZIndex++
+			this.printStyleList[index].transform = {
+				scale:scale,
+				rotateZ:rotateZ?rotateZ:0,
+			}
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
+			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
+			this.printStyleList[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
+			this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
+			document.addEventListener("touchend", this.touchend);
+			document.addEventListener("touchmove", this.moveMousemove);
+		},
+		//设置尺寸
+		itemSizeMousedown(direction,event){
+			this.direction = direction
+			this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			let scale = Number(this.imgDom.style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(this.imgDom.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			this.printStyleList[this.imgDomIndex].designElementsBtn = true
+			this.printStyleList[this.imgDomIndex].transform = {
+				scale:scale,
+				rotateZ:rotateZ,
+			}
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let li = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_btn_top")[0].offsetWidth/2
+			if(this.direction == 'right' || this.direction == 'bottom'){
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
+			}else{
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
+				this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
+				this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
+			}
+			document.addEventListener("touchend", this.sizeMouseup);
+			document.addEventListener("touchmove", this.sizeMousemove);
+		},
+		//鼠标移动
+		moveMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_imgMask")[0]
+			parentNode = parentNode.getBoundingClientRect()
+			let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
+			let y = (  e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
+			this.printStyleList[this.imgDomIndex].style.left = x
+			this.printStyleList[this.imgDomIndex].style.top = y
+			
+		
+		},
+
+		sizeMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode =this.imgDom.parentNode
+			let width = imgDomWH.width
+			let height = imgDomWH.height
+			let num = width/height
+			let num1 = height/width
+			let w,h
+			//判断移动四个边
+			if(this.direction == 'right'){
+				w = ( e.changedTouches[0].pageX -imgDomWH.left)
+				h = ( e.changedTouches[0].pageX - imgDomWH.left)*num
+				width = w+'px'
+				height = w*num1+'px'
+			}else if(this.direction == 'top'){
+				this.printStyleList[this.imgDomIndex].style.top = 'auto'
+				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				// this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
+				this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
+				w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
+				h = (this.printStyleList[this.imgDomIndex].centers.top -  e.changedTouches[0].pageY)
+				
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'bottom'){
+				h = ( e.changedTouches[0].pageY - imgDomWH.top)
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'left'){
+				this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.imgDomIndex].style.right = this.printStyleList[this.imgDomIndex].centers.right+'px'
+				w = (this.printStyleList[this.imgDomIndex].centers.left -  e.changedTouches[0].pageX)
+				width = w+'px'
+				height = w*num1+'px'
+			}
+			//判断尺寸是否到边
+			this.printStyleList[this.imgDomIndex].style.width = width
+			this.printStyleList[this.imgDomIndex].style.height = height
+		},
+		//鼠标抬起
+		sizeMouseup(e){
+			this.printStyleList[this.imgDomIndex].style={
+				right:'auto',
+				left:this.imgDom.offsetLeft+'px',
+				bottom:'auto',
+				top:this.imgDom.offsetTop+'px',
+				height:this.imgDom.offsetHeight+'px',
+				width:this.imgDom.offsetWidth+'px',
+				zIndex:this.printZIndex
+			}
+			document.removeEventListener("touchend", this.sizeMouseup);
+			document.removeEventListener("touchmove", this.sizeMousemove);
+		},
+		touchend(e) {
+
+			document.removeEventListener("touchend", this.touchend);
+			document.removeEventListener("touchmove", this.moveMousemove);
+		},
+
+
+		
+		deletePrint(){
+			this.exhibitionElementsList.splice(this.imgDomIndex,1)
+			this.printStyleList.splice(this.imgDomIndex,1)
+		},
+		
+        //随机重置图片顺序
+        refetchTemplate(index) {
+			// let scale = (Math.trunc(Math.random()*15)+1)*.1
+			let rotateZ1 = Math.trunc(Math.random()*360)+1
+			let rotateZ2 = Math.trunc(Math.random()*360)+1
+			let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
+			let width
+			let scale
+			if(sketch.width<sketch.height){
+				width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
+				scale = width / this.print.width.replace(/px/g,'')
+			}else{
+				width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
+				scale = width / this.print.height.replace(/px/g,'')
+			}
+			// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
+			// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
+			let x = sketch?.width - this.print.width.replace(/px/g,'')*scale 
+			let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
+			this.printStyleList[index].style = {
+				left:Math.trunc(Math.random()*x)+1+"px",
+				top:Math.trunc(Math.random()*y)+1+"px",
+				right:"auto",
+				bottom:"auto",
+				width:this.print.width.replace(/px/g,'')*scale+'px',
+				height:this.print.height.replace(/px/g,'')*scale+'px',
+				zIndex:this.printZIndex++
+			}
+			this.printStyleList[index].transform = {
+				rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
+			}
+        },
+		//设置图片
+		async setTemplate(item,index) {
+			await this.setPrintWH(item.path)
+			this.designElementsList
+			let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
+			let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+			let scale
+			scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+			let zIndex = 1
+			let left = item.location[0]/sketchNum+'px'
+			let top = item.location[1]/sketchNum+'px'
+			if(sketch.offsetWidth < item.location[0]/sketchNum){
+				left = sketch.offsetWidth +'px'
+			}
+			if(sketch.offsetHeight < item.location[1]/sketchNum){
+				top = sketch.offsetHeight +'px'
+			}
+			this.printStyleList[index]={
+				centers:{
+					left:0,
+					top:0,
+				},
+				style:{
+					left:left,
+					top:top,
+					right:"auto",
+					bottom:"auto",
+					width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
+					height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
+					zIndex:zIndex++
+				},
+				transform:{
+					// scale:scale<.2?.2:scale,//0.2-3
+					rotateZ:item.angle,
+				},
+				designElementsBtn:false
+			}
+        },
+		computeZindex(){
+			let arr = JSON.parse(JSON.stringify(this.printStyleList))
+			arr.sort((a, b) => {
+				var a_num = a["style"].zIndex;
+				var b_num = b["style"].zIndex;
+				return a_num - b_num;
+			});
+			let num = 1
+			arr.forEach((v)=>{
+				v.style.zIndex = num++
+			})
+			return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
+		},
+		async computeSize(arr){
+			// let num = this.sketch/
+			return new Promise(async (resolve, reject) => {
+				let sketch = document.getElementsByClassName("designElementsMobile_sketch")[0]
+				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+				let prints = []
+				let scale
+				let location
+				for (let index = 0; index < arr.length; index++) {
+					await this.setPrintWH(this.exhibitionElementsList[index].path)
+					scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
+					location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
+					let obj = {
+						angle : arr[index].transform.rotateZ,
+						location : location,
+						priority:arr[index].style.zIndex,
+						scale: scale,
+						designType:this.exhibitionElementsList[index].designType,
+						path:this.exhibitionElementsList[index].path,
+						minIOPath:this.exhibitionElementsList[index].minIOPath,
+					}
+					prints.push(obj)
+				}
+				resolve(prints)
+			})
+		},
+		async setPreview(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let index 
+			designItemDetail.clothes.forEach((v,ind)=>{
+				if(v.id == this.current.id){
+					index = ind
+				}
+			})
+			let priority = designItemDetail.clothes.map((v)=>{
+                return v.type
+            })
+			// let data = {
+            //     ...designItemDetail,
+            //     priority:priority,
+            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            // }
+			let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
+			await this.computeZindex().then((rv)=>{
+				this.setOkData = rv
+			})
+			data.designSingleItemDTOList[index].trims.prints = this.setOkData
+			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+			this.loadingShow = true
+			Https.axiosPost(Https.httpUrls.designSingle, data).then(
+				(rv) => {
+					// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
+					this.currentFullBodyView = rv.currentFullBodyView
+					this.designItemDetailTS.rv = rv
+					this.designItemDetailTS.data = data
+					this.loadingShow = false
+					// this.designElements = false
+					if(this.driver__.driver){
+						nextTick().then(()=>{
+							driverObj__.moveNext();
+						})
+					}
+				}
+			).catch(res=>{
+				this.loadingShow = false
+			});
+		},
+		setOK(){
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let index 
+			designItemDetail.clothes.forEach((v,ind)=>{
+				if(v.id == this.current.id){
+					index = ind
+				}
+			})
+			if(this.designItemDetailTS.rv){
+				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
+				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
+				designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
+				designItemDetail.clothes[index].trims.prints = this.setOkData
+				designItemDetail.ifSubmit = true
+				designItemDetail.clothes.forEach((item,i)=>{
+					let a
+					if(item.layersObject[0].imageCategory.indexOf("back") == -1){
+						a = item.layersObject[0]
+						item.layersObject[0] = item.layersObject[1]
+						item.layersObject[1] = a
+					}
+					item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
+					item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
+				})
+				this.store.commit("setDesignItemDetail", designItemDetail);
+				this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
+				this.setRevocation(designItemDetail,this.designItemDetailTS.data)
+				this.designItemDetailTS = {}
+			}
+			this.designElements = false
+			if(this.driver__.driver){
+				driverObj__.moveNext();
+			}
+		},
+		clearModal(){
+			this.designElements = true//modal页面关闭
+			this.printZIndex = 2//点击图片z-index
+			this.imgDomIndex = 0//点击图片下标
+			this.designSelectElementsList = []
+			this.printStyleList = []
+			this.designElementsList = []
+			this.exhibitionElementsList = []
+		},
+		closeModal(){
+            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			let _this = this
+            Modal.confirm({
+                title: this.t('DesignPrintOperation.jsContent1'),
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+					_this.designElements=false
+                }
+            });
+		},
+    },
+});
+</script>
+
+<style lang="less">
+.designElementsMobile_modal {
+	// max-width: 1440px;
+	.mark_loading{
+		position: absolute;
+	}
+	.ant-modal-body{
+		padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
+		// height: calc(65vh - 6.4rem*1.2));
+		height: calc(65rem*1.2);
+		display: flex;
+		overflow-y: hidden;
+		flex-direction: column;
+	}
+	.ant-modal-content{
+		border-radius: calc(1rem*1.2);
+		overflow: hidden;
+	}
+
+    .designElementsMobile_content {
+        // background: #f2f3fb;
+        // padding-bottom: 2.9rem*1.2);
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+        .designElementsMobile_header {
+            position: relative;
+            height: calc(6.6rem*1.2);
+            width: 100%;
+            background: #F7F7F7;
+
+            .placement_modal_title{
+                position: absolute;
+                height: 100%;
+                line-height: calc(6.6rem*1.2);
+                left: calc(3.7rem*1.2);
+                top: 0;
+                font-size: calc(1.8rem*1.2);
+                color: #030303;
+            }
+        }
+
+		.designElementsMobile_right{
+			height: calc(50rem*1.2);
+			position: absolute;
+			right: calc(2rem*1.2);
+			left: auto;
+			top: 50%;
+			transform: translateY(-50%);
+			max-height: calc(50rem*1.2);
+			max-width: calc(30rem*1.2);
+			.designElementsMobile_entirety_img{
+				height: 100%;
+				img{
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+					position: relative;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%);
+				}
+			}
+		}
+		.designElementsMobile_open{
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			.print_right{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				border: 2px solid;
+				padding: calc(2rem*1.2) 0;
+				width: calc(16rem*1.2);
+				border-radius: calc(1rem*1.2);
+				height: calc(40rem*1.2);
+				.button_second{
+					margin: calc(1rem*1.2) 0;
+					width: calc(10rem*1.2);
+					text-align: center;
+					position: initial;
+					transform: none;
+					height: calc(3rem*1.2);
+					line-height: calc(3rem*1.2);
+				}
+				.designElementsMobile_nav{
+					display: flex;
+					margin-top: calc(2rem*1.2);
+					flex-wrap: wrap;
+					width: 100%;
+					height: calc(22rem*1.2);
+					overflow-x: hidden;
+					justify-content: space-evenly;
+					align-content: flex-start;
+					&.designElementsMobile_nav::-webkit-scrollbar {
+						display: none;
+					}
+					.active{
+						img{
+							border: 2px solid;
+							border-radius: 2px;
+							box-sizing: border-box;
+						}
+					}
+					.designElementsMobile_single{
+						width: 40%;
+						margin-bottom: calc(2rem*1.2);
+					}
+					img{
+						width: 100%;
+						cursor: pointer;
+					}
+				}
+				&.show_print_right{
+					border: none;
+					padding: 0;
+					height: 100%;
+				}
+			}
+		}
+		.designElementsMobile_centent{
+			margin: 0 auto;
+			overflow: hidden;
+			justify-content: space-between;
+			position: relative;
+			user-select:none;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%,-50%);
+			display: flex;
+			&.active{
+				flex-direction: row;
+			}
+			.designElementsMobile_imgMask{
+				width: auto;
+				height: auto;
+				position: relative;
+				>img{
+					z-index: 2;
+					position: relative;
+					// max-width: 100%;
+					// max-height: 100%;
+					// width: 100%;
+					// height: 50rem*1.2);
+					max-height: calc(50rem*1.2);
+					min-height: calc(30rem*1.2);
+					width: auto;
+					max-width: calc(60rem*1.2);
+				}
+				.designElementsMobile_sketch_mask{
+					z-index: 3;
+					position: absolute;
+					inset: 0;
+					width: 100%;
+				}
+				>div{
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					top: 0;
+				}
+			}
+			.designElementsMobile_print{
+				z-index: 3;
+				.modal_imgItem{
+					position: absolute;
+					overflow: hidden;
+					top: 0;
+					img{
+						width: 100%;
+						height: 100%;
+						float: left;
+						user-select:none;
+						-webkit-user-drag: none;
+					}
+				}
+			}
+			.designElementsMobile_btn{
+				z-index: 3;
+				>div{
+					width: 100%;
+					height: 100%;
+					border: 2px solid rgb(20, 188, 255);
+					position: absolute;
+				}
+				ul{
+					list-style: none;
+					// width: 100%;
+					// height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+					box-sizing: border-box;
+					border: 2px solid rgb(20, 188, 255);
+					padding: 0;
+					-webkit-user-drag: none;
+					user-select:none;
+					opacity: 0;
+					margin: 0;
+				
+					&.designElementsMobile_Mouoverall{
+						opacity: 1;
+						border: none;
+						width: calc(1.4rem*1.2);
+						height: calc(1.4rem*1.2);
+						i{
+							display: flex;
+							color: #14bcff;
+						}
+
+					}
+					li{
+						cursor: pointer;
+						// border-radius: 50%;
+						width: calc(1rem*1.2);
+						height: calc(1rem*1.2);
+						background-color: rgb(20, 188, 255);
+						position: absolute;
+						pointer-events: none;
+					}
+					&.active{
+						opacity: 1;
+						li{
+							pointer-events: auto;
+						}
+					}
+					.designElementsMobile_btn_top,.designElementsMobile_btn_bottom{
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: n-resize;
+					}
+					.designElementsMobile_btn_top{
+						top: 0;
+					}
+					.designElementsMobile_btn_bottom{
+						top: 100%;
+					}
+					.designElementsMobile_btn_left,.designElementsMobile_btn_right{
+						top: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: e-resize;
+					}
+					.designElementsMobile_btn_left{
+						left: 0;
+					}
+					.designElementsMobile_btn_right{
+						left: 100%;
+					}
+					.designElementsMobile_rotote{
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+						width: 0;
+						height: 0;
+					}
+					.designElementsMobile_delete{
+						position: absolute;
+						top: 0;
+						right: 0;
+						width: 4rem;
+						background: none;
+						transform: translate(100%, -100%);
+						height: 4rem;
+						img{
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.designElementsMobile_rotote::after{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						width: calc(.2rem*1.2);
+						height: calc(3rem*1.2);
+						left: 50%;
+						bottom: 0;
+						transform: translateX(-50%);
+					}
+					.designElementsMobile_rotote::before{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						top: calc(50% - 3rem*1.2);
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						width: calc(1.5rem*1.2);
+						height: calc(1.5rem*1.2);
+						border-radius: 50%;
+					}
+				}
+			}
+			
+		}
+		.subitOkPreviewBtn{
+			z-index: 2;
+			margin: calc(1rem*1.2) 0;
+			width: calc(10rem*1.2);
+			text-align: center;
+			position: initial;
+			transform: none;
+		}
+    }
+}
+</style>

src/component/Detail/DesignPrintOperation.vue

@@ -38,10 +38,21 @@
 							</div>
 						</div>
 						<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
+							<div class="designOpenrtion_nav">
+								<div class="designOpenrtion_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+								<div class="designOpenrtion_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div>
+								<!-- <div class="designOpenrtion_overall" v-show="!overallSingle">
+									<img :src="designOpenrtionList[0].path">
+								</div> -->
+							</div>
 							<div v-show="!overallSingle" class="habit_System_Designer">
 								<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
 								<a-slider id="system_silder"
-									:min="1"
+									:min="20"
 									v-model:value="systemDesignerPercentage"
 									@afterChange="systemDesigner"
 									:tip-formatter="formatter"
@@ -49,18 +60,11 @@
 								</a-slider>
 							</div>
 							<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
-							<div v-show="overallSingle" class="print_input">
+							<!-- <div v-show="overallSingle" class="print_input">
 								<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
 								<i class="fi fi-rr-trash" @click="deletePrint"></i>
-							</div>
+							</div> -->
-							<div class="designOpenrtion_nav">
+						
-								<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
-									<img :src="item.path" @click="setpitch(item,index)">
-								</div>
-								<div class="designOpenrtion_overall" v-show="!overallSingle">
-									<img :src="designOpenrtionList[0].path">
-								</div>
-							</div>
 							<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
 							<div class="subitOkPreviewBtn  Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']"  @click.stop="setOK">OK</div>
 						</div>
@@ -69,32 +73,40 @@
 				<div class="designOpenrtion_centent" id="designOpenrtionCentent">
 					<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
 					<div class="designOpenrtion_imgMask">
-						<div class="designOpenrtion_print" v-show="overallSingle">
+						<div class="designOpenrtion_print">
 							<div 
-								v-for="item,index in designOpenrtionList" 
+								v-for="item,index in exhibitionOpenrtionList[stateOverallSingle]" 
 								:key="item"
-								:style="[printStyleList?.[index]?.style]" 
+								v-if="overallSingle"
+								:style="[printStyleList[stateOverallSingle]?.[index]?.style]" 
 								@mousedown.stop="itemMoveMousedown(index,$event)"
 								class="modal_imgItem" 
-								@click="setpitch(item,index)" ref="content" >
+								ref="content" 
-								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
+								>
+								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[stateOverallSingle][index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
 							</div>
 						</div>
 						<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch"> -->
 						<img :src="current?.path" alt="" class="designOpenrtion_sketch">
 						<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch_mask">
 						<div class="designOpenrtion_btn">
-							<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
+							<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
 								<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
 								<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
 								<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
 								<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
 								<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
+								<li class="designOpenrtion_delete" @click.stop="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
 							</ul>
 							<div v-show="!overallSingle"></div>
-							<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @mousedown.stop="itemMoveMousedown(index,$event)">
+							<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtion_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,$event)">
 								<i class="fi fi-rr-arrows animtion1"></i>
 								<i class="fi fi-rr-arrows animtion2"></i>
+								<li class="designOpenrtion_delete" @click="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
 							</ul>
 						</div>
 					</div>
@@ -121,19 +133,30 @@ import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { useI18n } from "vue-i18n";
+import { remove } from "jszip";
 export default defineComponent({
 	
     setup(prop) {
         let designOpenrtion = ref(false);
-		let designOpenrtionList = ref([])
+		let designOpenrtionList = ref([])//新增的元素
+		let designList = ref([])//已经存在的元素
+		let setOkData = ref([])
+		let exhibitionOpenrtionList = ref({
+			single:[],
+			overall:[],
+		})//展示的元素
 		let current = inject('current')//父组件传过来的数据
 		let driver__ = inject('driver__')
         let setRevocation = inject('setRevocation')//父组件传过来的数据
-		let overallSingle = ref(false)
+		let overallSingle = ref(true)
+		let stateOverallSingle = ref('single')
 		let systemDesignerPercentage = ref(0)
-		let printAmount = ref(1)//印花数量
 		let printZIndex = ref(2)//印花优先级
-        let printStyleList = ref([{
+        let printStyleList = ref({
+			single:[],
+			overall:[],
+		});
+        let currentPrintStyleList = ref({
 			centers:{
 				left:0,
 				top:0,
@@ -152,7 +175,7 @@ export default defineComponent({
 				rotateZ:0,
 			},
 			designOpenrtionBtn:false
-		}]);
+		});
 		
 		let direction = ref('')
 		let imgDom = ref()
@@ -173,13 +196,17 @@ export default defineComponent({
         return {
             designOpenrtion,
 			designOpenrtionList,
+			designList,
+			setOkData,
+			exhibitionOpenrtionList,
 			overallSingle,
+			stateOverallSingle,
 			systemDesignerPercentage,
 			current,
 			driver__,
-			printAmount,
 			printZIndex,
             printStyleList,
+			currentPrintStyleList,
 			direction,//判断点击的是li那个边
 			imgDom,
 			imgDomIndex,
@@ -211,8 +238,8 @@ export default defineComponent({
 				let num = 1
 				let x = 0
 				let y = 0
-				num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
+				num = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
-				angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
+				angle = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ
 				// 添加鼠标按下事件监听器
 				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
 				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
@@ -236,7 +263,7 @@ export default defineComponent({
 					document.addEventListener('mousemove', mousemove);
 					// 添加鼠标松开事件监听器
 					let mouseup = () => {
-						value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
+						value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
 						mouse = false;
 						document.removeEventListener('mouseup',mouseup)
 						document.removeEventListener('mousemove',mousemove)
@@ -254,82 +281,106 @@ export default defineComponent({
 			if(designItemDetail.others.length == 0){
 				this.body = true
 			}
-			let DesignPrintOperationParent = this.$parent
 			this.designOpenrtion = true
 			this.clearModal()
-			this.designOpenrtionList = []
+			this.overallSingle = this.current.printObject.ifSingle?true:false
-			this.designOpenrtionList.push(...this.current.printObject.prints)
+			this.ifListOver()
-			this.overallSingle = DesignPrintOperationParent.overallSingle
+			if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
-			this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
+			if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
+			if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
+			// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
 			let skecth = new Image
 			skecth.src = this.current.path
 			skecth.onload=()=>{
 				this.sketch.width = skecth.width/10+'rem'
 				this.sketch.height = skecth.height/10+'rem'
+				skecth.remove()
 			}
-			// this.sketch = {
+			if(this.exhibitionOpenrtionList[this.stateOverallSingle].length > 0){
-			// 	width:this.current.layersObject[1].imageSize[0]/10+'rem',
+				this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((item,index)=>{
-			// 	height:this.current.layersObject[1].imageSize[1]/10+'rem'
+					this.setTemplate(item,index)
-			// }
+				})
+			}else{
+			}
+		
+		},
+		ifListOver(){
+			if(!this.overallSingle){
+				// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
+				// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
+				this.stateOverallSingle = 'overall'
+			}else{
+				this.stateOverallSingle = 'single'
+			}
+		},
+		setPrintWH(url){
 			let print = new Image
-			print.src = this.current.printObject.prints[0].path
+			return new Promise((resolve, reject) => {
 				print.onload=()=>{
 					this.print.width = print.width+'px'
 					this.print.height = print.height+'px'
-				this.printStyleList[0].style.width = print.width+'px'
+					resolve()
-				this.printStyleList[0].style.height = print.height+'px'
+					print.remove()
-				this.printStyleList[0].designOpenrtionBtn = false
-				nextTick().then(()=>{
-					if(this.designOpenrtionList[0].scale){
-						this.designOpenrtionList.forEach((item,index)=>{
-							this.setTemplate(item,index)
-							this.printAmount = this.printStyleList.length
-							if (!this.overallSingle) {
-								this.printAmount = 1
-								this.setprintAmount()
 				}
-							if(this.current.printObject.ifSingle != this.overallSingle){
+				print.src = url
-								this.refetchTemplate(0)
-							}
-
 			})
-					}else{
-						this.refetchTemplate(0)
-					}
-				})
-			}
 		},
 		systemDesigner(num) {
-			let DesignPrintOperationParent = this.$parent
+			
-			DesignPrintOperationParent.systemDesignerPercentage = num
         },
 		formatter(value) {
-			if(value<30)value = 30
 			return `${value*3}%`;
 		},
 		
 		setOveralSingle(){
-			let DesignPrintOperationParent = this.$parent
-			DesignPrintOperationParent.overallSingle = this.overallSingle
 			if(!this.overallSingle){
-				this.printAmount = 1
+				// this.refetchTemplate(0)
-				this.setprintAmount()
+				this.stateOverallSingle = 'overall'
 			}else{
+				this.stateOverallSingle = 'single'
 			}
-			this.random()
+			// this.random()
 		},
-		setpitch(item,index){
+		async setpitch(item,index){
-			this.printStyleList.forEach((v)=>{
+			await this.setPrintWH(item.path)
+			this.printStyleList[this.stateOverallSingle].forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
-			this.imgDomIndex = index
+			if(!this.overallSingle){
-			this.printStyleList[index].designOpenrtionBtn = true
+				this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
-			this.printStyleList[index].style.zIndex = this.printZIndex++
+				this.refetchTemplate(0)
+				this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
+					angle:0,
+					designType:item.designType,
+					level2Type:item.level2Type,
+					minIOPath:item.minIOPath,
+					path:item.path,
+					priority:1,
+					scale:.3,
+					location:[0,0]
+				}
+				this.systemDesignerPercentage = 30
+			}else{
+				this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
+				let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
+				this.exhibitionOpenrtionList[this.stateOverallSingle].push({
+					angle:0,
+					designType:item.designType,
+					level2Type:item.level2Type,
+					minIOPath:item.minIOPath,
+					path:item.path,
+					priority:1,
+					scale:1,
+					location:[0,0]
+				})
+				this.refetchTemplate(currentIndex)
+			}
 		},
 		//设置移动
 		itemMoveMousedown(index,event){
+			if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
 			this.imgDomIndex = index
-			this.printStyleList.forEach((v)=>{
+			this.printStyleList[this.stateOverallSingle].forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
 			if(!this.overallSingle){
@@ -339,17 +390,17 @@ export default defineComponent({
 			}
 			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
 			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-			this.printStyleList[index].designOpenrtionBtn = true
+			this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
-			this.printStyleList[index].style.zIndex = this.printZIndex++
+			this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
-			this.printStyleList[index].transform = {
+			this.printStyleList[this.stateOverallSingle][index].transform = {
 				scale:scale,
 				rotateZ:rotateZ?rotateZ:0,
 			}
 			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
+			let left = Number(this.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
-			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
+			let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
-			this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
+			this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
-			this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
+			this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
 			document.addEventListener("mouseup", this.mouseup);
 			document.addEventListener("mousemove", this.moveMousemove);
 		},
@@ -359,19 +410,19 @@ export default defineComponent({
 			this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
 			let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
 			let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-			this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
-			this.printStyleList[this.imgDomIndex].transform = {
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
 				scale:scale,
 				rotateZ:rotateZ,
 			}
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let li = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
 			if(this.direction == 'right' || this.direction == 'bottom'){
-				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
-				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
 			}else{
-				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
-				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
 			}
 			
 			document.addEventListener("mouseup", this.sizeMouseup);
@@ -382,22 +433,22 @@ export default defineComponent({
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
 			parentNode = parentNode.getBoundingClientRect()
-			let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
+			let x = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
-			let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
+			let y = ( e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
-			this.printStyleList[this.imgDomIndex].style.left = x
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
-			this.printStyleList[this.imgDomIndex].style.top = y
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
 			if(!this.overallSingle){
 				if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
-					this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
 				}
 				if(x.replace(/px/g,'') <= 0){
-					this.printStyleList[this.imgDomIndex].style.left = 0+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 0+'px'
 				}
 				if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
-					this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
 				}
 				if(y.replace(/px/g,'') <= 0){
-					this.printStyleList[this.imgDomIndex].style.top = 0+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
 				}
 			}
 		
@@ -413,38 +464,38 @@ export default defineComponent({
 			let w,h
 			//判断移动四个边
 			if(this.direction == 'right'){
-				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
+				w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
-				h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				h = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
 				width = w+'px'
 				height = w*num1+'px'
 			}else if(this.direction == 'top'){
-				this.printStyleList[this.imgDomIndex].style.top = 'auto'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
-				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
-				this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
-				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
-				h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
+				h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.y)
 				
 				height = h+'px'
 				width = h*num+'px'
 			}else if(this.direction == 'bottom'){
-				h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
+				h = (e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
 				height = h+'px'
 				width = h*num+'px'
 			}else if(this.direction == 'left'){
-				this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
-				this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
-				w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
+				w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.x)
 				width = w+'px'
 				height = w*num1+'px'
 			}
 			//判断尺寸是否到边
-			this.printStyleList[this.imgDomIndex].style.width = width
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
-			this.printStyleList[this.imgDomIndex].style.height = height
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height
 
 		},
 		//鼠标抬起
 		sizeMouseup(e){
-			this.printStyleList[this.imgDomIndex].style={
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
 				right:'auto',
 				left:this.imgDom.offsetLeft+'px',
 				bottom:'auto',
@@ -461,47 +512,12 @@ export default defineComponent({
 			document.removeEventListener("mouseup", this.mouseup);
 			document.removeEventListener("mousemove", this.moveMousemove);
 		},
-
-
-		setprintAmount(){
-			if(this.printAmount < 1){
-				this.printAmount  = 1
-				return
-			}
-			if(this.printAmount > 20){
-				this.printAmount  = 20
-				return
-			}
-			let printTiemNum
-			if(this.printAmount>this.printStyleList.length){
-				let num = this.printAmount - this.printStyleList.length
-				for (let index = 0; index < num; index++) {
-					this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
-					this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
-					this.refetchTemplate(this.printStyleList.length-1)
-					this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
-				}
-			}else{
-				let num = this.printStyleList.length - this.printAmount
-				this.designOpenrtionList.splice(this.printStyleList.length-num,num)
-				this.printStyleList.splice(this.printStyleList.length-num,num)
-			}
-			this.printStyleList.forEach((v)=>{
-				v.designOpenrtionBtn = false
-			})
-			this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
-			this.imgDomIndex = this.printStyleList.length-1
-		},
 		deletePrint(){
-			if(this.designOpenrtionList.length <= 1){
+			this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
-				return
+			this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
-			}
-			this.designOpenrtionList.splice(this.imgDomIndex,1)
-			this.printStyleList.splice(this.imgDomIndex,1)
-			this.printAmount = this.designOpenrtionList.length
 		},
 		random(){
-			this.designOpenrtionList.forEach((v,index)=>{
+			this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
 				this.refetchTemplate(index)
 			})
 		},
@@ -527,7 +543,7 @@ export default defineComponent({
 				x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
 			}
 			let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
-			this.printStyleList[index]={
+			this.printStyleList[this.stateOverallSingle][index]={
 				centers:{
 					left:0,
 					top:0,
@@ -544,13 +560,14 @@ export default defineComponent({
 				transform:{
 					// scale:scale<.2?.2:scale,//0.2-3
 					// rotateZ:rotateZ1-rotateZ2,
-					rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
+					rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
 				},
 				designOpenrtionBtn:false
 			}
         },
 		//设置图片
-        setTemplate(item,index) {
+       	async setTemplate(item,index) {
+			await this.setPrintWH(item.path)
 			this.designOpenrtionList
 			let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
 			let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
@@ -565,7 +582,7 @@ export default defineComponent({
 			if(sketch.offsetHeight < item.location[1]/sketchNum){
 				top = sketch.offsetHeight +'px'
 			}
-			this.printStyleList[index]={
+			this.printStyleList[this.stateOverallSingle][index]={
 				centers:{
 					left:0,
 					top:0,
@@ -587,7 +604,7 @@ export default defineComponent({
 			}
         },
 		computeZindex(){
-			let arr = JSON.parse(JSON.stringify(this.printStyleList))
+			let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
 			arr.sort((a, b) => {
 				var a_num = a["style"].zIndex;
 				var b_num = b["style"].zIndex;
@@ -600,18 +617,20 @@ export default defineComponent({
 			return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
 		},
 		computeSize(arr){
+			return new Promise(async (resolve, reject) => {
 				// let num = this.sketch/
 				let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
 				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
 				let prints = []
 				let scale
 				let location
-			arr.forEach((v,index)=>{
+				for (let index = 0; index < arr.length; index++) {
 					if(!this.overallSingle){
 						scale = this.systemDesignerPercentage/100
 						// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
 						location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
 					}else{
+						await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
 						scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
 						location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
 					}
@@ -620,18 +639,19 @@ export default defineComponent({
 						location : location,
 						priority:arr[index].style.zIndex,
 						scale: scale,
-					designType:this.designOpenrtionList[index].designType,
+						designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
-					path:this.designOpenrtionList[index].path,
+						level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
-					minIOPath:this.designOpenrtionList[index].minIOPath,
+						path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
+						minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
 					}
 					prints.push(obj)
+				}
+				resolve(prints)
 			})
-			return prints	
 		},
-		setPreview(){
+		async setPreview(){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let index 
-			let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
 			designItemDetail.clothes.forEach((v,ind)=>{
 				if(v.id == this.current.id){
 					index = ind
@@ -645,10 +665,13 @@ export default defineComponent({
             //     priority:priority,
             //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
             // }
-			let data = this.store.state.DesignDetailModule.designPreviewData
+			let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
+			await this.computeZindex().then((rv)=>{
+				this.setOkData = rv
+			})
 			data.designSingleItemDTOList[index].printObject={
 				ifSingle:this.overallSingle,
-				prints:this.computeZindex(),
+				prints:this.setOkData,
 			}
 			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 			this.loadingShow = true
@@ -678,12 +701,12 @@ export default defineComponent({
 					index = ind
 				}
 			})
-			console.log(this.designItemDetailTS);
 			if(this.designItemDetailTS.rv){
 				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
 				designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
 				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
-				designItemDetail.clothes[index].printObject.prints = this.computeZindex()
+				designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
+				designItemDetail.clothes[index].printObject.prints = this.setOkData
 				designItemDetail.ifSubmit = true
 				designItemDetail.clothes.forEach((item,i)=>{
 					let a
@@ -706,31 +729,18 @@ export default defineComponent({
 			}
 		},
 		clearModal(){
-			this.printAmount = 1//显示数量
 			this.designOpenrtion = true//modal页面关闭
 			this.printZIndex = 2//点击图片z-index
 			this.imgDomIndex = 0//点击图片下标
 			this.designOpenrtionList = []
-			this.printStyleList.splice(1,this.printStyleList.length-1)
+			this.designList = []
-			this.printStyleList[0] = {
+			this.exhibitionOpenrtionList = {
-				centers:{
+				single:[],
-					left:0,
+				overall:[],
-					top:0,
+			}
-				},
+			this.printStyleList = {
-				style:{
+				single:[],
-					left:0+"px",
+				overall:[],
-					top:0+"px",
-					right:"auto",
-					bottom:"auto",
-					width:'auto',
-					height:'auto',
-					zIndex:1,
-				},
-				transform:{
-					scale:1,
-					rotateZ:0,
-				},
-				designOpenrtionBtn:false
 			}
 		},
 		closeModal(){
@@ -887,30 +897,6 @@ export default defineComponent({
 					height: calc(3rem*1.2);
 					line-height: calc(3rem*1.2);
 				}
-				.print_input{
-					margin-top: calc(1rem*1.2);
-					width: calc(9.85rem*1.2);
-					display: flex;
-					.search_input{
-						width: calc(6.85rem*1.2);
-						margin-right: calc(1rem*1.2);
-						padding: 0 calc(1.5rem*1.2);
-						border: 2px solid #000;
-						font-size: calc(1.2rem*1.2);
-						font-weight: 400;
-						height: calc(3rem*1.2);
-						border-radius: calc(1.5rem*1.2);
-						&::placeholder {
-							color: #C2C2C2;
-						}
-					}
-					i{
-						width: calc(2rem*1.2);
-						cursor: pointer;
-						display: flex;
-						align-items: center;
-					}
-				}
 				.designOpenrtion_nav{
 					display: flex;
 					margin-top: calc(2rem*1.2);
@@ -922,13 +908,6 @@ export default defineComponent({
 					&.designOpenrtion_nav::-webkit-scrollbar {
 						display: none;
 					}
-					.active{
-						img{
-							border: 2px solid;
-							border-radius: 2px;
-							box-sizing: border-box;
-						}
-					}
 					.designOpenrtion_single{
 						width: 40%;
 						margin-bottom: calc(2rem*1.2);
@@ -944,6 +923,7 @@ export default defineComponent({
 				&.show_print_right{
 					border: none;
 					padding: 0;
+					flex: 1;
 					height: auto;
 				}
 			}
@@ -1104,6 +1084,19 @@ export default defineComponent({
 						width: 0;
 						height: 0;
 					}
+					.designOpenrtion_delete{
+						position: absolute;
+						top: 0;
+						right: 0;
+						width: 4rem;
+						background: none;
+						transform: translate(100%, -100%);
+						height: 4rem;
+						img{
+							width: 100%;
+							height: 100%;
+						}
+					}
 					.designOpenrtion_rotote::after{
 						position: absolute;
 						content: "";

src/component/Detail/DesignPrintOperationMobile.vue

@@ -49,17 +49,23 @@
 								</a-slider>
 							</div>
 							<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
-							<div v-show="overallSingle" class="print_input">
+							<!-- <div v-show="overallSingle" class="print_input">
 								<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
 								<i class="fi fi-rr-trash" @click="deletePrint"></i>
-							</div>
+							</div> -->
 							<div class="designOpenrtionMobile_nav">
-								<div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
+								<!-- <div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
+									<img :src="item.path" @click="setpitch(item,index)">
+								</div> -->
+								<div class="designOpenrtionMobile_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
 									<img :src="item.path" @click="setpitch(item,index)">
 								</div>
-								<div class="designOpenrtionMobile_overall" v-show="!overallSingle">
+								<div class="designOpenrtionMobile_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
-									<img :src="designOpenrtionList[0].path">
+									<img :src="item.path" @click="setpitch(item,index)">
 								</div>
+								<!-- <div class="designOpenrtionMobile_overall" v-show="!overallSingle">
+									<img :src="designOpenrtionList[0].path">
+								</div> -->
 							</div>
 							<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
 							<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
@@ -69,14 +75,15 @@
 				<div class="designOpenrtionMobile_centent" id="designOpenrtionCentent">
 					<!-- <div class="designOpenrtionMobile_imgMask" :style="sketch"> -->
 					<div class="designOpenrtionMobile_imgMask">
-						<div class="designOpenrtionMobile_print" v-show="overallSingle">
+						<div class="designOpenrtionMobile_print">
 							<div 
-								v-for="item,index in designOpenrtionList" 
+								v-for="item,index in exhibitionOpenrtionList[stateOverallSingle]" 
 								:key="item"
-								:style="[printStyleList?.[index]?.style]" 
+								v-if="overallSingle"
+								:style="[printStyleList[stateOverallSingle]?.[index]?.style]" 
 								@touchstart.stop="itemMoveMousedown(index,$event)"
 								class="modal_imgItem" 
-								@click="setpitch(item,index)" ref="content" >
+								ref="content" >
 								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false"> 
 							</div>
 						</div>
@@ -84,17 +91,23 @@
 						<img :src="current?.path" alt="" class="designOpenrtionMobile_sketch">
 						<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtionMobile_sketch_mask">
 						<div class="designOpenrtionMobile_btn">
-							<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
+							<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
 								<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
 								<li class="designOpenrtionMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
 								<li class="designOpenrtionMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
 								<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
 								<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
+								<li class="designOpenrtionMobile__delete" @click="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
 							</ul>
 							<div v-show="!overallSingle"></div>
-							<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @touchstart.stop="itemMoveMousedown(index,$event)">
+							<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.stop="itemMoveMousedown(0,$event)">
 								<i class="fi fi-rr-arrows animtion1"></i>
 								<i class="fi fi-rr-arrows animtion2"></i>
+								<li class="designOpenrtionMobile__delete" @click="deletePrint">
+									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
+								</li>
 							</ul>
 						</div>
 					</div>
@@ -125,15 +138,25 @@ export default defineComponent({
 	
     setup(prop) {
         let designOpenrtion = ref(false);
-		let designOpenrtionList = ref([])
+		let designOpenrtionList = ref([])//新增的元素
+		let designList = ref([])//已经存在的元素
+		let setOkData = ref([])
+		let exhibitionOpenrtionList = ref({
+			single:[],
+			overall:[],
+		})//展示的元素
 		let driver__ = inject('driver__')
 		let current = inject('current')//父组件传过来的数据
         let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let overallSingle = ref(false)
+		let stateOverallSingle = ref('single')
 		let systemDesignerPercentage = ref(0)
-		let printAmount = ref(1)//印花数量
 		let printZIndex = ref(2)//印花优先级
-        let printStyleList = ref([{
+		let printStyleList = ref({
+			single:[],
+			overall:[],
+		});
+        let currentPrintStyleList = ref({
 			centers:{
 				left:0,
 				top:0,
@@ -152,7 +175,7 @@ export default defineComponent({
 				rotateZ:0,
 			},
 			designOpenrtionBtn:false
-		}]);
+		});
 		
 		let direction = ref('')
 		let imgDom = ref()
@@ -174,11 +197,15 @@ export default defineComponent({
             designOpenrtion,
 			designOpenrtionList,
 			overallSingle,
+			stateOverallSingle,
+			designList,
+			setOkData,
+			exhibitionOpenrtionList,
 			systemDesignerPercentage,
 			current,
-			printAmount,
 			printZIndex,
             printStyleList,
+			currentPrintStyleList,
 			direction,//判断点击的是li那个边
 			imgDom,
 			imgDomIndex,
@@ -211,8 +238,8 @@ export default defineComponent({
 				let num = 1
 				let x = 0
 				let y = 0
-				num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
+				num = value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
-				angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
+				angle = value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ
 				// 添加鼠标按下事件监听器
 				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
 				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
@@ -236,7 +263,7 @@ export default defineComponent({
 					document.addEventListener('touchmove', touchmove,{passive:true});
 					// 添加鼠标松开事件监听器
 					let touchend = () => {
-						value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
+						value.instance.printStyleList[num = value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
 						mouse = false;
 						document.removeEventListener('touchend',touchend)
 						document.removeEventListener('touchmove',touchmove)
@@ -254,52 +281,48 @@ export default defineComponent({
 			if(designItemDetail.others.length == 0){
 				this.body = true
 			}
-			let DesignPrintOperationParent = this.$parent
 			this.designOpenrtion = true
 			this.clearModal()
-			this.designOpenrtionList = []
+			this.overallSingle = this.current.printObject.ifSingle?true:false
-			this.designOpenrtionList.push(...this.current.printObject.prints)
+			this.ifListOver()
-			this.overallSingle = DesignPrintOperationParent.overallSingle
+			if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
-			this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
+			if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
+			if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
+			// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
 			let skecth = new Image
 			skecth.src = this.current.path
 			skecth.onload=()=>{
 				this.sketch.width = skecth.width/10+'rem'
 				this.sketch.height = skecth.height/10+'rem'
+				skecth.remove()
 			}
-			// this.sketch = {
+			if(this.exhibitionOpenrtionList[this.stateOverallSingle].length > 0){
-			// 	width:this.current.layersObject[1].imageSize[0]/10+'rem',
+				this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((item,index)=>{
-			// 	height:this.current.layersObject[1].imageSize[1]/10+'rem'
+					this.setTemplate(item,index)
-			// }
+				})
+			}else{
+			}
+		},
+		ifListOver(){
+			if(!this.overallSingle){
+				// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
+				// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
+				this.stateOverallSingle = 'overall'
+			}else{
+				this.stateOverallSingle = 'single'
+			}
+		},
+		setPrintWH(url){
 			let print = new Image
-			print.src = this.current.printObject.prints[0].path
+			return new Promise((resolve, reject) => {
 				print.onload=()=>{
 					this.print.width = print.width+'px'
 					this.print.height = print.height+'px'
-				this.printStyleList[0].style.width = print.width+'px'
+					resolve()
-				this.printStyleList[0].style.height = print.height+'px'
+					print.remove()
-				this.printStyleList[0].designOpenrtionBtn = false
-				nextTick().then(()=>{
-					if(this.designOpenrtionList[0].scale){
-						this.designOpenrtionList.forEach((item,index)=>{
-							this.setTemplate(item,index)
-							this.printAmount = this.printStyleList.length
-							if (!this.overallSingle) {
-								this.printAmount = 1
-								this.setprintAmount()
 				}
-							if(this.current.printObject.ifSingle != this.overallSingle){
+				print.src = url
-								this.refetchTemplate(0)
-							}
-
 			})
-					}else{
-						this.refetchTemplate(0)
-					}
-				})
-				
-			}
-			
 		},
 		systemDesigner(num) {
 			let DesignPrintOperationParent = this.$parent
@@ -310,27 +333,53 @@ export default defineComponent({
 		},
 		
 		setOveralSingle(){
-			let DesignPrintOperationParent = this.$parent
-			DesignPrintOperationParent.overallSingle = this.overallSingle
 			if(!this.overallSingle){
-				this.printAmount = 1
+				// this.refetchTemplate(0)
-				this.setprintAmount()
+				this.stateOverallSingle = 'overall'
 			}else{
-				this.random()
+				this.stateOverallSingle = 'single'
 			}
+			// this.random()
 		},
-		setpitch(item,index){
+		async setpitch(item,index){
-			this.printStyleList.forEach((v)=>{
+			await this.setPrintWH(item.path)
+			this.printStyleList[this.stateOverallSingle].forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
-			this.imgDomIndex = index
+			if(!this.overallSingle){
-			this.printStyleList[index].designOpenrtionBtn = true
+				this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
-			this.printStyleList[index].style.zIndex = this.printZIndex++
+				this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
+					angle:0,
+					designType:item.designType,
+					level2Type:item.level2Type,
+					minIOPath:item.minIOPath,
+					path:item.path,
+					priority:1,
+					scale:.3,
+					location:[0,0]
+				}
+				this.refetchTemplate(0)
+				this.systemDesignerPercentage = 30
+			}else{
+				this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
+				let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
+				this.exhibitionOpenrtionList[this.stateOverallSingle].push({
+					angle:0,
+					designType:item.designType,
+					level2Type:item.level2Type,
+					minIOPath:item.minIOPath,
+					path:item.path,
+					priority:1,
+					scale:1,
+					location:[0,0]
+				})
+				this.refetchTemplate(currentIndex)
+			}
 		},
 		//设置移动
 		itemMoveMousedown(index,event){
 			this.imgDomIndex = index
-			this.printStyleList.forEach((v)=>{
+			this.printStyleList[this.stateOverallSingle].forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
 			if(!this.overallSingle){
@@ -340,17 +389,17 @@ export default defineComponent({
 			}
 			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
 			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-			this.printStyleList[index].designOpenrtionBtn = true
+			this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
-			this.printStyleList[index].style.zIndex = this.printZIndex++
+			this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
-			this.printStyleList[index].transform = {
+			this.printStyleList[this.stateOverallSingle][index].transform = {
 				scale:scale,
 				rotateZ:rotateZ?rotateZ:0,
 			}
 			let imgDomWH = this.imgDom.getBoundingClientRect()
-			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
+			let left = Number(this.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
-			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
+			let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
-			this.printStyleList[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
+			this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
-			this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
+			this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
 			document.addEventListener("touchend", this.touchend);
 			document.addEventListener("touchmove", this.moveMousemove);
 		},
@@ -358,23 +407,23 @@ export default defineComponent({
 		itemSizeMousedown(direction,event){
 			this.direction = direction
 			this.imgDom = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
-			let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
+			let scale = Number(this.imgDom.style.transform?.split('scale(')[1]?.split(')')[0])
-			let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			let rotateZ = Number(this.imgDom.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-			this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
-			this.printStyleList[this.imgDomIndex].transform = {
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
 				scale:scale,
 				rotateZ:rotateZ,
 			}
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let li = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_btn_top")[0].offsetWidth/2
 			if(this.direction == 'right' || this.direction == 'bottom'){
-				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
-				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
 			}else{
-				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
-				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
-				this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
-				this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
 			}
 			
 			document.addEventListener("touchend", this.sizeMouseup);
@@ -385,22 +434,22 @@ export default defineComponent({
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let parentNode = document.getElementsByClassName('designOpenrtionMobile_modal')[0].getElementsByClassName("designOpenrtionMobile_imgMask")[0]
 			parentNode = parentNode.getBoundingClientRect()
-			let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
+			let x = ( e.changedTouches[0].pageX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
-			let y = (  e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
+			let y = (  e.changedTouches[0].pageY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
-			this.printStyleList[this.imgDomIndex].style.left = x
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
-			this.printStyleList[this.imgDomIndex].style.top = y
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
 			if(!this.overallSingle){
 				if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
-					this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
 				}
 				if(x.replace(/px/g,'') <= 0){
-					this.printStyleList[this.imgDomIndex].style.left = 0+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 0+'px'
 				}
 				if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
-					this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
 				}
 				if(y.replace(/px/g,'') <= 0){
-					this.printStyleList[this.imgDomIndex].style.top = 0+'px'
+					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
 				}
 			}
 		
@@ -421,12 +470,12 @@ export default defineComponent({
 				width = w+'px'
 				height = w*num1+'px'
 			}else if(this.direction == 'top'){
-				this.printStyleList[this.imgDomIndex].style.top = 'auto'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
-				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
-				// this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
+				// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
-				this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.bottom+'px'
-				w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
+				w = ( e.changedTouches[0].pageX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
-				h = (this.printStyleList[this.imgDomIndex].centers.top -  e.changedTouches[0].pageY)
+				h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top -  e.changedTouches[0].pageY)
 				
 				height = h+'px'
 				width = h*num+'px'
@@ -435,19 +484,19 @@ export default defineComponent({
 				height = h+'px'
 				width = h*num+'px'
 			}else if(this.direction == 'left'){
-				this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
-				this.printStyleList[this.imgDomIndex].style.right = this.printStyleList[this.imgDomIndex].centers.right+'px'
+				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.right+'px'
-				w = (this.printStyleList[this.imgDomIndex].centers.left -  e.changedTouches[0].pageX)
+				w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left -  e.changedTouches[0].pageX)
 				width = w+'px'
 				height = w*num1+'px'
 			}
 			//判断尺寸是否到边
-			this.printStyleList[this.imgDomIndex].style.width = width
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
-			this.printStyleList[this.imgDomIndex].style.height = height
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height
 		},
 		//鼠标抬起
 		sizeMouseup(e){
-			this.printStyleList[this.imgDomIndex].style={
+			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
 				right:'auto',
 				left:this.imgDom.offsetLeft+'px',
 				bottom:'auto',
@@ -464,47 +513,12 @@ export default defineComponent({
 			document.removeEventListener("touchend", this.touchend);
 			document.removeEventListener("touchmove", this.moveMousemove);
 		},
-
-
-		setprintAmount(){
-			if(this.printAmount < 1){
-				this.printAmount  = 1
-				return
-			}
-			if(this.printAmount > 20){
-				this.printAmount  = 20
-				return
-			}
-			let printTiemNum
-			if(this.printAmount>this.printStyleList.length){
-				let num = this.printAmount - this.printStyleList.length
-				for (let index = 0; index < num; index++) {
-					this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
-					this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
-					this.refetchTemplate(this.printStyleList.length-1)
-					this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
-				}
-			}else{
-				let num = this.printStyleList.length - this.printAmount
-				this.designOpenrtionList.splice(this.printStyleList.length-num,num)
-				this.printStyleList.splice(this.printStyleList.length-num,num)
-			}
-			this.printStyleList.forEach((v)=>{
-				v.designOpenrtionBtn = false
-			})
-			this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
-			this.imgDomIndex = this.printStyleList.length-1
-		},
 		deletePrint(){
-			if(this.designOpenrtionList.length <= 1){
+			this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
-				return
+			this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
-			}
-			this.designOpenrtionList.splice(this.imgDomIndex,1)
-			this.printStyleList.splice(this.imgDomIndex,1)
-			this.printAmount = this.designOpenrtionList.length
 		},
 		random(){
-			this.designOpenrtionList.forEach((v,index)=>{
+			this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
 				this.refetchTemplate(index)
 			})
 		},
@@ -530,7 +544,7 @@ export default defineComponent({
 				x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
 			}
 			let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
-			this.printStyleList[index]={
+			this.printStyleList[this.stateOverallSingle][index]={
 				centers:{
 					left:0,
 					top:0,
@@ -547,7 +561,7 @@ export default defineComponent({
 				transform:{
 					// scale:scale<.2?.2:scale,//0.2-3
 					// rotateZ:rotateZ1-rotateZ2,
-					rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
+					rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
 				},
 				designOpenrtionBtn:false
 			}
@@ -568,7 +582,7 @@ export default defineComponent({
 			if(sketch.offsetHeight < item.location[1]/sketchNum){
 				top = sketch.offsetHeight +'px'
 			}
-			this.printStyleList[index]={
+			this.printStyleList[this.stateOverallSingle][index]={
 				centers:{
 					left:0,
 					top:0,
@@ -590,7 +604,7 @@ export default defineComponent({
 			}
         },
 		computeZindex(){
-			let arr = JSON.parse(JSON.stringify(this.printStyleList))
+			let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
 			arr.sort((a, b) => {
 				var a_num = a["style"].zIndex;
 				var b_num = b["style"].zIndex;
@@ -604,17 +618,19 @@ export default defineComponent({
 		},
 		computeSize(arr){
 			// let num = this.sketch/
+			return new Promise(async (resolve, reject) => {
 				let sketch = document.getElementsByClassName("designOpenrtionMobile_sketch")[0]
 				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
-			let prints = []
 				let scale
+				let prints = []
 				let location
-			arr.forEach((v,index)=>{
+				for (let index = 0; index < arr.length; index++) {
 					if(!this.overallSingle){
 						scale = this.systemDesignerPercentage/100
 						// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
 						location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
 					}else{
+						await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
 						scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
 						location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
 					}
@@ -623,18 +639,19 @@ export default defineComponent({
 						location : location,
 						priority:arr[index].style.zIndex,
 						scale: scale,
-					designType:this.designOpenrtionList[index].designType,
+						designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
-					path:this.designOpenrtionList[index].path,
+						level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
-					minIOPath:this.designOpenrtionList[index].minIOPath,
+						path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
+						minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
 					}
 					prints.push(obj)
+				}
+				resolve(prints)
 			})
-			return prints	
 		},
-		setPreview(){
+		async setPreview(){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let index 
-			let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
 			designItemDetail.clothes.forEach((v,ind)=>{
 				if(v.id == this.current.id){
 					index = ind
@@ -649,9 +666,12 @@ export default defineComponent({
             //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
             // }
 			let data = this.store.state.DesignDetailModule.designPreviewData
+			await this.computeZindex().then((rv)=>{
+				this.setOkData = rv
+			})
 			data.designSingleItemDTOList[index].printObject={
 				ifSingle:this.overallSingle,
-				prints:this.computeZindex(),
+				prints:this.setOkData,
 			}
 			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 			this.loadingShow = true
@@ -686,7 +706,9 @@ export default defineComponent({
 				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
 				designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
 				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
-				designItemDetail.clothes[index].printObject.prints = this.computeZindex()
+				designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
+				designItemDetail.clothes[index].printObject.prints = this.setOkData
+				// designItemDetail.clothes[index].printObject.prints = this.computeZindex()
 				designItemDetail.ifSubmit = true
 				designItemDetail.clothes.forEach((item,i)=>{
 					let a
@@ -708,31 +730,18 @@ export default defineComponent({
 			}
 		},
 		clearModal(){
-			this.printAmount = 1//显示数量
 			this.designOpenrtion = true//modal页面关闭
 			this.printZIndex = 2//点击图片z-index
 			this.imgDomIndex = 0//点击图片下标
 			this.designOpenrtionList = []
-			this.printStyleList.splice(1,this.printStyleList.length-1)
+			this.designList = []
-			this.printStyleList[0] = {
+			this.exhibitionOpenrtionList = {
-				centers:{
+				single:[],
-					left:0,
+				overall:[],
-					top:0,
+			}
-				},
+			this.printStyleList = {
-				style:{
+				single:[],
-					left:0+"px",
+				overall:[],
-					top:0+"px",
-					right:"auto",
-					bottom:"auto",
-					width:'auto',
-					height:'auto',
-					zIndex:1,
-				},
-				transform:{
-					scale:1,
-					rotateZ:0,
-				},
-				designOpenrtionBtn:false
 			}
 		},
 		closeModal(){
@@ -1111,6 +1120,19 @@ export default defineComponent({
 						width: 0;
 						height: 0;
 					}
+					.designOpenrtionMobile__delete{
+						position: absolute;
+						top: 0;
+						right: 0;
+						width: 4rem;
+						background: none;
+						transform: translate(100%, -100%);
+						height: 4rem;
+						img{
+							width: 100%;
+							height: 100%;
+						}
+					}
 					.designOpenrtionMobile_rotote::after{
 						position: absolute;
 						content: "";

src/component/Detail/addDetails.vue

@@ -0,0 +1,437 @@
+<template>
+    <a-modal
+        class="addDetails_modal generalModel"
+        v-model:visible="showPayOrder"
+        :footer="null"
+        width="50%"
+        :maskClosable="false"
+        :centered="true"
+        :closable="false"
+        wrapClassName="#app"
+        :keyboard="false"
+    >
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+		</div>
+		
+		<div class="addDetails_center">
+			<div class="modal_title_text">
+				<div>Add Details</div>
+				<div class="modal_title_text_intro"></div>
+			</div>
+			<div class="exportCanvasBox_center">
+				<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
+					<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
+						<div>新增</div>
+					</div> -->
+					<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+					<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+					<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
+					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
+					<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
+					<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
+					<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
+				</div>
+			</div>
+			<div class="exportCanvasBox_submit" @click="setSubmit">
+				<div class="started_btn">
+					submit
+				</div>
+			</div>
+			
+		</div>
+		<div></div>
+    </a-modal>
+	<div class="mark_loading" v-show="loadingShow">
+		<a-spin size="large" />
+	</div>
+</template>
+<script>
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { Https } from "@/tool/https";
+import { formatTime } from "@/tool/util";
+import { setCookie, getCookie } from "@/tool/cookie";
+import { Modal, message } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import allOrder from "@/component/Pay/allOrder.vue";
+import creditsDetail from "@/component/Pay/creditsDetail.vue";
+import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+    components: {
+		creditsDetail,
+		allOrder,
+    },
+	emits: ['setSloganData'],
+    setup(props,{emit}) {
+        let presentState = ref('paypal');
+        let showPayOrder = ref(false);
+        let loadingShow = ref(false);
+        let { t } = useI18n();
+        let canvas = reactive({});
+		let scale = 2;
+		let ratio = [1,1]
+		let exportWH = 512
+		let canvasBtn = reactive({
+			canvasState:'move',
+			canvasPencilWidth:4,
+			spreadState:false,
+		})
+		let canvasWH = ref(0);
+		onMounted(()=>{
+		})
+		let exportUrl = ''
+		let reverseCanvasState = ref([])//存放canvas操作
+		let normalCanvasState = ref([])//存放canvas操作
+		let canvasState = ref()//存放canvas操作
+		let init = (data,index)=>{
+			normalCanvasState.value = []
+			reverseCanvasState.value = []
+            showPayOrder.value = true;
+			loadingShow.value = true
+			scale = 2;
+			ratio = [1,1]
+			exportWH = 512
+			nextTick(()=>{
+				let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
+				let height = canvasBox.offsetHeight;
+				canvasBox.style.width = height+'px'
+				canvasWH.value = height
+				var canvasDom = document.createElement("canvas");
+				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+				if(oldCanvasDom)oldCanvasDom.remove()
+				canvasBox.appendChild(canvasDom);
+				let img = new Image();
+
+				img.onload = function(){
+					let wScale = 1
+					let hScale = 1
+					if(img.width>img.height){
+						hScale = img.height/img.width
+						exportWH = img.width
+					}else{
+						wScale = img.width/img.height
+						exportWH = img.height
+					}
+					ratio = [wScale,hScale]
+					canvas = new fabric.Canvas(canvasDom, {
+						backgroundColor: "#FFF",
+						width: canvasWH.value * wScale,
+						height: canvasWH.value * hScale,
+						isDrawingMode: false, // 开启绘图模式
+					});
+					scale = img.height/canvas.height
+					
+					JSchangeType(canvas,'init')
+					// 鼠标抬起事件
+					canvas.on('mouse:up', function(event) {
+						if(canvasBtn.canvasState != 'move'){
+							updateCanvasState()
+						}
+					});
+					fabric.Object.prototype.cornerSize = 10
+					fabric.Object.prototype.transparentCorners = false 
+					exportUrl = data.path
+					fabric.Image.fromURL(data.path, function(img) {
+						// 设置背景图对象的宽度和高度与 canvas 相同
+						img.scaleToWidth(canvas.width);
+						img.scaleToHeight(canvas.height);
+						
+						// 将背景图添加到 canvas 的底层
+						canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+						if(!fabric.Object.prototype.controls.deleteControl){
+							JSSetRemoveImage(deleteObj)
+						}else{
+							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
+						}
+						updateCanvasState()
+
+						// img.selectable = false
+						// canvas.add(img)
+					},{ crossOrigin: "Anonymous" });
+					
+				    loadingShow.value = false
+					setOperation('pencil')
+					img.remove()
+				}
+				img.src = data.path
+				
+			})
+        }
+		let clearCanvas = ()=>{
+		    canvasBtn.canvasState = 'move'
+		    canvasBtn.spreadState = false
+		}
+		let rgba = 'rgba(0, 0, 0, 1)'
+		let brushIndicator = new fabric.Circle({
+			radius:(canvasBtn.canvasPencilWidth/2),
+			fill: '#fff',
+			stroke: '#000',
+			strokeWidth: 1,
+			originX: 'center',
+			originY: 'center',
+			visible :true,
+			left: -100,
+			top: -100,
+			erasable: false,
+		});
+		let setOperation = (str)=>{
+			canvasBtn.canvasState = str
+			if(str == 'move'){
+				setMove()
+				if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
+			}else if(str == 'pencil'){
+				setPencil()
+				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+				
+			}else if(str == 'eraser'){
+				setEraser()
+				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+			}
+		}
+		let setMove = ()=>{
+			canvas.isDrawingMode = false
+			canvas.forEachObject((obj) =>obj.selectable = true);
+		}
+		let setPencil = ()=>{
+			canvas.isDrawingMode = true//开启绘画模式
+			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
+			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
+			canvas.freeDrawingBrush.color = rgba
+			brushIndicator.set('fill',rgba)
+			canvas.freeDrawingBrush.isEraser = false
+		}
+		let setEraser = ()=>{
+			canvas.isDrawingMode = true
+			let eraser = new fabric.EraserBrush(canvas)
+            canvas.freeDrawingBrush = eraser
+			brushIndicator.set({fill: '#fff'});
+			canvas.requestRenderAll();
+			canvas.freeDrawingBrush.isEraser = true
+			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
+		}
+		let deleteObj = ()=> {
+			// if(!canvas.getActiveObjects()){
+			// 	return
+			// }
+			let target = canvas.getActiveObjects()
+			target.forEach((item)=>{
+				canvas.fxRemove(item, {
+					onComplete(){
+					canvas.discardActiveObject(); // 丢弃当前选中的对象
+					canvas.renderAll(); // 重新渲染 Canvas
+					}
+				})
+				canvas.FX_DURATION = 300
+			})
+		}
+		let setTimeOutWidth
+		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
+			clearTimeout(setTimeOutWidth)
+			setTimeOutWidth = setTimeout(()=>{
+				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth)
+			},300)
+		}
+		let updateCanvasState = () =>{
+				const canvasAsJson = JSON.stringify(canvas.toJSON());
+				normalCanvasState.value.push(canvasAsJson);
+		}
+		//撤回
+		let historyState = (str)=> {
+			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
+				let obj = reverseCanvasState.value.pop()
+				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+				canvasState.value = obj 
+				normalCanvasState.value.push(obj);
+			}else if(str == '' && normalCanvasState.value.length > 1){
+				let obj = normalCanvasState.value.pop()
+				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+				reverseCanvasState.value.push(obj);
+			}else{
+				return
+			}
+			canvas.loadFromJSON(canvasState.value, () => {});
+		}
+		let setSubmit = ()=>{
+			var allObjects = canvas.getObjects();
+			if(allObjects.length == 0){
+				return
+			}
+			var canvasDom = document.createElement("canvas");
+			let exportCanvas = new fabric.Canvas(canvasDom, {
+				backgroundColor: "rgba(255, 255, 255,1)",
+				width: exportWH * ratio[0],
+				height: exportWH * ratio[1],
+				isDrawingMode: false, // 开启绘图模式
+			});
+			canvas.backgroundImage.clone((back)=>{
+				back.set({
+					scaleX:1,
+					scaleY:1,
+					left:back.left*scale,
+					top:back.top*scale ,
+				})
+				exportCanvas.backgroundImage = back
+				allObjects.forEach((item,index)=>{
+					// let obj = fabric.util.object.clone(item);
+					if(item.type == 'circle')return
+					let obj 
+					item.clone((cloned)=>{
+						obj = cloned
+					})
+					obj.set(
+						{
+							scaleX:(item.scaleX?item.scaleX:1)*scale,
+							scaleY:(item.scaleY?item.scaleY:1)*scale,
+							left:item.left*scale,
+							top:item.top*scale,
+						}
+					)
+					exportCanvas.add(obj)
+					if(allObjects.length-1 == index){
+						let data = exportCanvas.toDataURL('jpg')
+						showPayOrder.value = false;
+						clearCanvas()
+						emit('setSloganData',data)
+					}
+				})
+				
+			})
+				
+			
+		}
+		
+        return {
+            presentState,
+            showPayOrder,
+			loadingShow,
+            t,
+			...toRefs(canvasBtn),
+			init,
+			setOperation,
+			setPencilWidth,
+			historyState,
+			setSubmit,
+        };
+    },
+    data() {
+        return {
+        };
+    },
+    mounted() {},
+    methods: {
+       
+		
+		cancelDsign(){
+			this.showPayOrder = false
+		}
+    },
+});
+</script>
+<style lang="less">
+.addDetails_modal {
+    .closeIcon {
+        z-index: 2;
+    }
+	.addDetails_center{
+		position: relative;
+		// width: calc(512px / 2);
+		// width: 256px;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		// height: calc(512px / 2);
+		margin: 0 auto;
+		.addDetails_center_item{
+			// position: relative;
+			background: #fff;
+			position: absolute;
+			
+			display: flex;
+			border: 0.2rem solid #c4c4c4;
+			width: 25rem;
+			border-radius: 4px; /* 设置圆角半径 */
+			flex-wrap: wrap;
+			.addDetails_center_btn_item{
+				display: flex;
+				align-items: center;
+				padding: 1rem 0;
+			}
+		}
+		.exportCanvasBox_center{
+			height: 100%;
+			flex: 1;
+			position: relative;
+			margin: 0 auto;
+			overflow: hidden;
+			background: #e6e6e6;
+			// overflow: scroll;
+			.addDetails_center_btn{
+				z-index: 2;
+				left: 50%;
+				transform: translate(-50%,-135%);
+				transition: all .3s;
+				padding: 1rem 1.5rem;
+				// position: relative;
+				input{
+					width: 100%;
+					margin-top: 1rem;
+				}
+				.icon-xiala{
+					position: absolute;	
+					width: 2rem;
+					bottom: 0;
+					transform: translate(-50%, 90%);
+					left: 50%;
+					width: 6rem;
+					background: #fff;
+					text-align: center;
+					cursor: pointer;
+					&.icon-xiala::before{
+						transition: all .3s;
+					}
+					&.btnRotate::before{
+						transform: rotate(180deg);
+						display: block;
+					}
+				}
+				i{
+					font-size: 2.5rem;
+					cursor: pointer;
+					width: 4rem;
+					height: 4rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					&.active{
+						border: 1px solid;
+						border-radius: .4rem;
+					}
+				}
+				&.spread{
+					transform: translate(-50%,0);
+				}
+			}
+			.canvas-container{
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%,-50%);
+			}
+		}
+		.exportCanvasBox_center:hover{
+			.addDetails_center_btn{
+				transform: translate(-50%,-101%);
+				&.spread{
+					transform: translate(-50%,0);
+				}
+			}
+		}
+	}
+	.exportCanvasBox_submit{
+		margin-top: 2.4rem;
+		text-align: center;
+	}
+}
+</style>

src/component/Detail/habit.vue

@@ -105,11 +105,11 @@
                 <div class="habit_System_Designer_text_max">
                     <div class="habit_System_Designer_text">
 						
-						{{ $t('Habit.System') }}<span>({{systemDesigner.system}}%)</span>
+						{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
 					</div>
                     <div class="habit_System_Designer_text">
 					
-						{{ $t('Habit.Designer') }}<span>({{systemDesigner.designer}}%)</span>
+						{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
 					</div>
                 </div>
             </div>
@@ -811,17 +811,18 @@ export default defineComponent({
 		// },
 		setWorkspaceStyle(data: any){
 			this.workspaceItem.styleId = data
-			this.putWorkspace(this.workspaceItem,'')
+			this.putWorkspace(this.workspaceItem,this.workspaceItem.id)
 		},
 		setStyle(){
-			this.openType.habit = false
+			// this.openType.habit = false
 			let habitSetStyle:any = this.$refs.habitSetStyle;
-			habitSetStyle.habitSetStyleMask = true
+			// habitSetStyle.habitSetStyleMask = true
 			// habitSetStyle.styleList = this.styleList
-			habitSetStyle.init();
+			habitSetStyle.init(this.workspaceItem);
 		},
 		setParentData(){
-			this.openType.habit = true
+			// this.openType.habit = true
+			// this.getDetail(this.workspaceItem.id)
 		},
     },
 });

src/component/Detail/habitSetStyle.vue

@@ -10,6 +10,7 @@
 		:mask="habitSetStyleMask"
 		:keyboard="false"
 		:destroyOnClose="true"
+		:zIndex="1050"
 	>
 	<div class="generalModel_btn">
 		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
@@ -23,7 +24,7 @@
 		</div>
 		<div class="habitSetStyle_content_bottom">
 			<div class="content_bottom_item" v-for="item in styleList">
-				<div class="content_bottom_item_border" :class="{active:item.id == selectStyleId}" @click="setItemSelect(item)">
+				<div class="content_bottom_item_border" :class="{active:item.name == selectStyle.name}" @click="setItemSelect(item)">
 					{{ item.name}}
 				</div>
 			</div>
@@ -56,7 +57,11 @@ setup(props,{emit}) {
 	let habitSetStyleMask:any = ref(false)//弹窗遮罩
 	let habitSetStyleData:any = reactive({
 		styleList:[],
-		selectStyleId:'',
+		selectStyle:{
+			name:'',
+			id:'',
+		},
+		selectStyleName:'',
 		isShowMark:false,
 	})
 	let getStyleList = ()=>{
@@ -75,11 +80,13 @@ setup(props,{emit}) {
 			habitSetStyleData.isShowMark = false
 		});
 	}
-	let init = ()=>{
+	let init = (data:any)=>{
 		habitSetStyle.value = true
 		if(habitSetStyleData.styleList.length == 0){
 			getStyleList()
 		}
+		habitSetStyleData.selectStyle.id = data.styleId 
+		habitSetStyleData.selectStyle.name = data.styleName 
 		// habitSetStyleData.selectStyleId = 'feng2'
 	}
 	let setCover = (item:any)=>{
@@ -90,7 +97,7 @@ setup(props,{emit}) {
 	let cleardata = ()=>{
 		habitSetStyle.value = false
 		habitSetStyleData.isShowMark = false
-		setParentData()
+		// setParentData()
 	
 	}
 	let setParentData = ()=>{
@@ -101,11 +108,11 @@ setup(props,{emit}) {
 		cleardata()
 	}
 	let setOk= ()=>{
-		emit('setWorkspaceStyle',habitSetStyleData.selectStyleId)
+		emit('setWorkspaceStyle',habitSetStyleData.selectStyle.id)
 		cleardata()
 	}
 	let setItemSelect = (item:any)=>{
-		habitSetStyleData.selectStyleId = item.id
+		habitSetStyleData.selectStyle = item
 	}
 	return {
 		habitSetStyle,
@@ -161,6 +168,12 @@ methods: {
 
 <style lang="less">
 .habitSetStyle_modal {
+	&.generalModel{
+		.ant-modal-body {
+			height: calc(55rem*1.2);
+		}
+	}
+	
 	.habitSetStyle_content{
 		display: flex;
 		flex-direction: column;

src/component/Detail/setDesignItem.vue

@@ -210,6 +210,7 @@ export default defineComponent({
 					const img = new Image();
 					img.onload = () => {
 						resolve(img)
+						img.remove()
 					};
 					img.onerror = reject;
 					img.src = url;

src/component/Detail/setDesignItemMobile.vue

@@ -206,6 +206,7 @@ export default defineComponent({
 					const img = new Image();
 					img.onload = () => {
 						resolve(img)
+						img.remove()
 					};
 					img.onerror = reject;
 					img.src = url;

src/component/HomePage/ColorboardUpload.vue

@@ -486,6 +486,7 @@ export default defineComponent({
 								driverObj__.moveNext()
 							}
 						})
+						img.remove()
 					};
                    
                 },100)
@@ -519,7 +520,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('ColorboardUpload.jsContent3'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 3;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('ColorboardUpload.jsContent4'));
             }

src/component/HomePage/ExportModel.vue

@@ -54,23 +54,26 @@
                         <div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
                         <div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
                         <div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
-						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item" :class="{active:colorItem.checked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
+                        <div v-if="item[0] && key == 'likePorductImg'" class="exportCanvasBox_intro">Selected Product</div>
-							<img src="" alt="">
+						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
+							<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
+							<div v-if="!colorItem.gradient">
 								<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
 								<div>{{colorItem.tcx}}</div>
 								<div>{{colorItem.name}}</div>
 							</div>
 							
+						</div>
+
                         <div
                             class="exportCanvasBox_item"
                             v-for="imgItem in item"
-							:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.checked?'active':'']"
+							:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
 							draggable
 							@dragstart="onDragstart(key,imgItem)"
 							@click="isMoible?setDragstart(key,imgItem):''"
                         >
 							<div class="exportCanvasBox_img">
-								<!-- <div v-if="key == 'likeDesignCollectionList'">{{ imgItem.designOutfitUrl }}</div> -->
 								<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
 							</div>
                         </div>
@@ -192,6 +195,8 @@
 					</div>
 					<div class="exportCanvasBox_left_btn">
 						<div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
+						<div class="subitOkPreviewBtn" @click="setSubmit">Save</div>
+						<div class="subitOkPreviewBtn" @click="setShare">Share</div>
 						<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
 					</div>
 				</div>
@@ -273,6 +278,7 @@
 				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
 			</div>
 		</a-modal>
+		<publish ref="publish"></publish>
     </a-modal>
 </template>
 <script>
@@ -289,14 +295,16 @@ import { message, Modal } from "ant-design-vue";
 import domTurnImg from '@/tool/domTurnImg'
 import { openGuide,driverObj__ } from "@/tool/guide";
 const FileSaver = require("file-saver");
-import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
+import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture,JSSetRemoveImage } from "@/tool/canvasDrawing";
 import { useI18n } from "vue-i18n";
-import {isMoible} from '@/tool/util'
+import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
+import publish from "@/component/WorksPage/publish.vue";
 
 export default defineComponent({
     components: {
         scaleImage,
         ExportNewCoolection,
+		publish,
     },
     props: ["msg", "sketchCatecoryList"],
     setup(props,{emit}) {
@@ -314,6 +322,7 @@ export default defineComponent({
             height: 100,
         });
 		
+		let publish = ref()
 		// canvasWH.value.width = [window.innerWidth/2.4]
 		// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
         let credits = computed(() => {
@@ -326,7 +335,7 @@ export default defineComponent({
         let likeDesignCollectionList = computed(() => {
             return store.state.HomeStoreModule.likeDesignCollectionList;
         });
-        let isShowMark = false;
+        let isShowMark = ref(false);
         // let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
 		let position = {
 			//设置每个图形位置的初始值
@@ -343,15 +352,19 @@ export default defineComponent({
 		let reverseCanvasState = ref([])//存放canvas操作
 		let normalCanvasState = ref([])//存放canvas操作
 		let isLoadCanvas = false//撤回或者反撤回false为撤回
-        let init = () => {
+		let userlikeGroupId = 0
+		let beenPublished = 0
+        let init = (productData) => {
+			beenPublished = productData.beenPublished
+			userlikeGroupId = productData.userlikeGroupId
 			canvasWH.value.height = 100
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
             showUpgradePlan.value = true;
 			allBoardData.value.likeDesignCollectionList =
                     likeDesignCollectionList;
+			allBoardData.value[productData.key] = productData.imgList;
             nextTick().then(async () => {
-				
 				let exportCanvasBoxCanvas = document.querySelector('.exportCanvasBox_center')
 				canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
                 
@@ -369,7 +382,12 @@ export default defineComponent({
                 });
 				brushIndicator = clearBrushIndicator()
 				canvasOnDrop()//开启鼠标到画布事件
-				setRemoveImage()//设置元素删除
+				if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
+					JSSetRemoveImage(deleteObject)
+				}else{
+					fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObject
+				}
+				// setRemoveImage()//设置元素删除
 				canvas.on("object:modified", ()=>{
 					updateCanvasState()
 				});
@@ -411,12 +429,34 @@ export default defineComponent({
                     "colorBoards",
                     "sketchboardFiles",
                     "likeDesignCollectionList",
+					productData.key,
                 ];
                 let oldKey = "";
                 let margin = 20; //每个图形边距
 				let maxHeight = 0
 				let sketchXy = {x:0,y:0}
+				let data = {
+					userLikeGroupId:userlikeGroupId
+				}
+				isShowMark.value = true
+				let oldExportCanvas = await new Promise((resolve, reject) => {
+					Https.axiosPost(Https.httpUrls.exportSearch, data)
+					.then((rv) => {
+						resolve(rv)
+						isShowMark.value = false
+					})
+					.catch((rv) => {
+						resolve(null)
+						isShowMark.value = false
+					});
+				})
+				
                 // arr.forEach((item,index)=>{
+                if(oldExportCanvas){
+					canvasWH.value.height = oldExportCanvas.canvasHeight
+					canvas.setHeight(canvasWH.value.height);
+					canvas.loadFromJSON(oldExportCanvas, () => {});
+				}else{
 					for (const item of arr) {
 						for (const key in allBoardData.value) {
 							if (item == key) {
@@ -465,7 +505,6 @@ export default defineComponent({
 														position.y = maxHeight;
 													}
 												}
-											console.log(allItem,key);
 												setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
 												position.height = img.height * scaleWH + margin;
 												if (key == "sketchboardFiles") {
@@ -482,7 +521,6 @@ export default defineComponent({
 														sketchGroupingItem.forEach(
 															(sketchItem,sketchIndex) => {
 																if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
-																// console.log(sketchItem.x,sketchItem.y);
 																	sketchXyIndex.minNum = sketchItem.y + sketchItem.height
 																	sketchXyIndex.minIndex = sketchIndex;
 																}
@@ -522,6 +560,7 @@ export default defineComponent({
 							canvas.setHeight(canvasWH.value.height);
 						}
 					}
+				}
 				updateCanvasState('')//加载完成后记录一下
 				if(driver__.value.driver){
 					driverObj__.moveNext()
@@ -554,34 +593,7 @@ export default defineComponent({
 				// canvas.renderAll(); // 重新渲染 Canvas
 				updateCanvasState('remove')
 			}
-		let setRemoveImage = ()=>{
 		
-			const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
-			// 创建删除图片元素
-			let deleteImg = document.createElement('img')
-			deleteImg.src = deleteIcon
-			function renderIcon(icon) {
-				return function (ctx, left, top, styleOverride, fabricObject) {
-					var size = this.cornerSize;
-					ctx.save();
-					ctx.translate(left, top);
-					ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
-					ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
-					ctx.restore();
-				}
-			}
-			// 删除按钮控件
-			fabric.Object.prototype.controls.deleteControl = new fabric.Control({
-				x: 0.5,
-				y: -0.5,
-				offsetY: -16,
-				offsetX: 16,
-				cursorStyle: 'pointer',
-				mouseUpHandler: deleteObject,
-				render: renderIcon(deleteImg),
-				cornerSize: 24
-			})
-		}
 		
 		let setImageWidth = (key)=>{
 			let imgWidth = canvasWH.value.width; //这是设置画布等宽
@@ -594,7 +606,9 @@ export default defineComponent({
 				//如果是mood 需要判断用户是否点击layout
 				disposeMoodboardShow = false;
 			}
-			
+			if(key == 'upImgFiles'){
+				imgWidth = canvasWH.value.width / 4;
+			}
 			if (key == "printboardFiles") {
 				imgWidth = canvasWH.value.width / 8;
 			}
@@ -604,7 +618,7 @@ export default defineComponent({
 						(sketchGrouping - 1) * 20) /
 					sketchGrouping;
 			}
-			if (key == "likeDesignCollectionList") {
+			if (key == "likeDesignCollectionList" || key == 'likePorductImg') {
 				imgWidth =
 					(canvasWH.value.width -
 						(likeDesign - 1) * 20) /
@@ -614,23 +628,24 @@ export default defineComponent({
 		}
 		let setCanvasImage = (img,key,left,top,data)=>{
 			// data
-			console.log(data);
 			let imgId = 0
-			let designType = ''//表示收藏或者generate
+			let minioUrl = ''//表示收藏或者generate
-			let level1Type = ''//表示sketch或者print
+			if(key == 'likeDesignCollectionList'){
-			if(key == 'disposeMoodboard'){
+				imgId = data.designOutfitId
-				imgId = data.id
+				minioUrl = data.url
-
-			}else if(key == 'moodboardFiles'){
-				
-			}else if(key == 'sketchboardFiles'){
-
-			}else if(key == 'printboardFiles'){
-				
-			}else if(key == 'likeDesignCollectionList'){
-				
 			}else if(key == 'upImgFiles'){
-				
+				imgId = data
+				minioUrl = data.url
+			}else if(key == 'likePorductImg'){
+				imgId = data.id
+			}else if(key == 'disposeMoodboard'){
+				let url = data.imgUrl.split('?')[0]
+				var match = url.match(/:(\d+)\/(.*)/);
+				minioUrl = match[2]
+				console.log(match[2]);
+				// data.imgUrl
+			}else{
+				minioUrl = data.minIOPath?data.minIOPath:data.resData.minIOPath
 			}
 			// let id = 
 			let proportion = img.height / img.width; //计算图形宽高比例
@@ -641,6 +656,8 @@ export default defineComponent({
 				// height: canvasWH.value.height/img.height,
 				left,
 				top,
+				imgId,
+				minioUrl,
 				scaleX:
 					imgWidth / img.width,
 				scaleY:(img.width * proportion * scaleWH) / img.height,
@@ -684,6 +701,10 @@ export default defineComponent({
                         if (key == "likeDesignCollectionList") {
                             data.imgUrl = item.designOutfitUrl;
                             data.name = "result" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
+                        }
+						if (key == "likePorductImg") {
+                            data.imgUrl = item.designOutfitUrl;
+                            data.name = "porduct" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
                         }
                         img.push(data);
                         index++;
@@ -746,17 +767,18 @@ export default defineComponent({
                     zip.generateAsync({ type: "blob" }).then((content) => {
                         // 生成二进制流
                         FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
-                        isShowMark = false;
+                        isShowMark.value = false;
                     });
 					if(driver__.value.driver){
 						driverObj__.moveNext()
 					}
+					setSubmit()//导出的时候保存
 					initAligningGuidelines(canvas,true)
 
                 })
                 .catch((res) => {
                     // message.warning(t('HomeView.jsContent3'));
-                    isShowMark = false;
+                    isShowMark.value = false;
 					initAligningGuidelines(canvas,true)
                 });
         };
@@ -781,7 +803,7 @@ export default defineComponent({
 					operation.value = 'fill'
 				},
 				// onCancel(){
-				// 	_this.isShowMark = false
+				// 	_this.isShowMark.value = false
 				// 	resolve(false)
 				// }
 			});
@@ -842,11 +864,11 @@ export default defineComponent({
 		let present = {}
 		let setDragstart = (type,imgItem)=>{
 			currentType.value.type = type
-			present.checked = false
+			present.upScaleChecked = false
 			present = {}
-			if(imgItem.checked){
+			if(imgItem.upScaleChecked){
 			}else{
-				imgItem.checked = true
+				imgItem.upScaleChecked = true
 				present = imgItem
 			}
 			currentType.value.data = imgItem
@@ -881,6 +903,50 @@ export default defineComponent({
 			})
 		}
 		let setGroup = (data)=>{
+			let rect
+			if(data.gradient){
+				let colorStops = []
+				data.gradient.gradientList.forEach(item=>{
+				    let obj = {
+						offset:item.left.split('%')[0]/100,
+						color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
+					}
+					colorStops.push(obj)
+				})
+				let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
+				let linear = new fabric.Gradient({
+					type: 'linear', // 线性渐变
+					// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
+					coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
+					colorStops: colorStops,
+				})
+				var color = new fabric.Rect({
+					top:0,
+					left:0,
+					width: 110,
+					height: 130,
+					textAlign: "left",
+					fill: linear // 设置渐变填充
+					// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
+				});
+				var text = new fabric.Text('',{
+					left: 0,
+					top: 0,
+					fontSize: 0,
+					fontFamily: "Arial",
+					textAlign: "left",
+					fill: "black",
+				});
+				let text1 = new fabric.Text('',{
+					left: 0,
+					top: 0,
+					width: 20,
+					fontSize: 0,
+					fontFamily: "Arial",
+					textAlign: "left",
+				});
+				rect = {text,text1,color,width:110}
+			}else{
 				var text = new fabric.Text(data.tcx,{
 					left: 0,
 					top: 60,
@@ -904,11 +970,15 @@ export default defineComponent({
 					textAlign: "left",
 					fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
 				});
-			let rect = {text,text1,color,width}
+				rect = {text,text1,color,width}
+			}
+			
+
 			return rect
 		}
 		let setCanvasColor = (top,left,rect)=>{
-			var group = new fabric.Group([rect.color, rect.text, rect.text1],{
+			let group
+			group = new fabric.Group([rect.color,rect.text,rect.text1],{
 				left,
 				top,
 				width: rect.width,
@@ -922,12 +992,13 @@ export default defineComponent({
 		// 创建矩形
 		let createImage = async (top, left,key)=> {
 			let itemCanvasImg = currentType.value.data.imgUrl
+			let data = JSON.parse(JSON.stringify(currentType.value.data))
 			if(key == 'likeDesignCollectionList'){
 				itemCanvasImg = currentType.value.data.designOutfitUrl;
 			}
 			await new Promise((resolve,reject)=>{
 				fabric.Image.fromURL(itemCanvasImg,(img) => {
-					setCanvasImage(img,key,left,top)//设置图片
+					setCanvasImage(img,key,left,top,data)//设置图片
 					canvas.add(img);
 					resolve()
 				},{ crossOrigin: "Anonymous" });
@@ -937,10 +1008,6 @@ export default defineComponent({
 		//设置画布监听修改添加事件，用来做撤回功能
 		let updateCanvasState = (str) =>{
 				const canvasAsJson = JSON.stringify(canvas.toJSON());
-				console.log(canvas.toJSON());
-				var json = canvas.toJSON(['aaaID']);
-				const d = canvas.toObject(['myFabricType1', 'myFabricType2'])
-				console.log(json,d);
 				if(str == 'loadingCompleted'){
 					// reverseCanvasState.value.push(canvasAsJson);
 				}
@@ -1030,7 +1097,6 @@ export default defineComponent({
   // 检查是否鼠标离开了画布
 //   if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
 //     // 执行你的操作
-//     console.log('鼠标离开了画布');
 //   }
 			// if(!x || !y){
 			// 	document.removeEventListener('keydown',canvasKeyDown);
@@ -1152,10 +1218,16 @@ export default defineComponent({
 			if (file) {
 				const reader = new FileReader();
 				reader.onload = (e) => {
-					fabric.Image.fromURL(e.target.result,(img) => {
+					let file = base64ToFile(e.target.result,'upload')
-						setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,e.target.result)
+					let formData = new FormData();
+					formData.append("file", file);
+					let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+					Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
+						fabric.Image.fromURL(rv.minioUrl,(img) => {
+							setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,rv)
 							canvas.add(img);
 						},{ crossOrigin: "Anonymous" })
+					})
 					input.value = ''
 				};
 				reader.readAsDataURL(file);
@@ -1413,8 +1485,8 @@ export default defineComponent({
 		let setCanvasDown = (event)=>{
 			// brushIndicator.set({fill: '#FFF',strokeWidth:0});
 			//设置移动端按下添加元素
-			if(isMoible && present.checked){
+			if(isMoible && present.upScaleChecked){
-				present.checked = false
+				present.upScaleChecked = false
 				present = {}
 				let pointerVpt = canvas.restorePointerVpt(event.pointer)
 				switch (currentType.value.type) {
@@ -1597,7 +1669,7 @@ export default defineComponent({
 			// 			});
 			// 		},
 			// 		// onCancel(){
-			// 		// 	_this.isShowMark = false
+			// 		// 	_this.isShowMark.value = false
 			// 		// 	resolve(false)
 			// 		// }
 			// 	});
@@ -1656,6 +1728,7 @@ export default defineComponent({
 							if(img.width*scaleSR.value>2048 || img.height*scaleSR.value>2048){
 								arr.push(index)
 							}
+							img.remove()
 							resolve(img)
 						}
 						img.src = item.imgUrl
@@ -1688,9 +1761,47 @@ export default defineComponent({
 			});
 			
 		}
+		
 		let toSvg = ()=>{
 			// console.log(canvas.toSvg());
 		}
+		let setShare = ()=>{
+			initAligningGuidelines(canvas,false)
+			let publishModal = publish.value
+			publishModal.publishMask = true
+			var imageDataURL = canvas.toDataURL({
+                format: "jpeg", // 导出格式为 PNG
+                quality: 1, // 图片质量为 1（最高质量）
+            });
+			let data = {
+				"imgUrl":imageDataURL,
+				userlikeGroupId:userlikeGroupId,
+				beenPublished
+			}
+			publishModal.init(data)
+		}
+		let setSubmit = ()=>{
+			let data = setCanvasContent()
+			data.canvasHeight = canvasWH.value.height
+			let blob = new Blob([JSON.stringify(data)], { type: "application/json" });
+			let formData = new FormData();
+			formData.append("file", blob, "data.json");
+			formData.append('userLikeGroupId', userlikeGroupId);
+			let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+            Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
+				message.success('save successfully')
+            })
+		}
+		let setCanvasContent = ()=>{
+			var json = canvas.toJSON(['imgId','minioUrl']);
+			// console.log(JSON.stringify(json));
+			json.objects.forEach(item=>{
+				if(item.type == 'image'){
+					delete item.src
+				}
+			})
+			return json
+		}
         onMounted(() => {});
         return {
 			toSvg,
@@ -1698,6 +1809,7 @@ export default defineComponent({
 			toSvg,
             showUpgradePlan,//当前弹窗是否打开
             canvasWH,//画布初始宽高
+			publish,//发布作品广场
 			credits,//积分 用来判断HD导出积分是否够用
             init,//首页点击导出后初始化
             setExport,//导出所有内容
@@ -1740,6 +1852,8 @@ export default defineComponent({
 			selectAllImg,//控制全选
 			selectImg,//选中单个图片
 			setExportSR,//设置SR导出
+			setShare,
+			setSubmit,
         };
     },
     data(prop) {
@@ -1747,6 +1861,26 @@ export default defineComponent({
 			isMoible:isMoible()
 		};
     },
+	computed: {
+		setGradient(){
+			return (gradient)=>{
+				let gradientStr = ''
+				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}`
+			}
+			
+		}
+	},
     watch: {
         'canvasWH.height':{
         	handler(newVal,oldVal){
@@ -1766,7 +1900,6 @@ export default defineComponent({
 				
 
 				let mousedown = (event)=>{//按下
-					// console.log(event.target.getBoundingClientRect());
 					let position = {
 						y:event.touches[0].screenY,
 						top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
@@ -1777,7 +1910,6 @@ export default defineComponent({
 						let offsetTop = position.top+e.touches[0].screenY - position.y
 						offsetTop = offsetTop <= 0? 0 : offsetTop
 						offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
-						console.log();
 						scrollBox.style.marginTop = offsetTop+'px'
 						canvasBox.scroll({
 							top: offsetTop*scale, // 纵向滚动距离
@@ -1897,14 +2029,24 @@ export default defineComponent({
 					display: flex;
 					justify-content: space-between;
 					padding-top: 2rem;
+					flex-wrap: wrap;
 					.subitOkPreviewBtn{
 						position: initial;
 						transform: none;
+						margin-bottom: 2rem;
+						width: 40%;
+						text-align: center;
 						&.active{
 							opacity: .7;
 							cursor: not-allowed;
 						}
 					}
+					.subitOkPreviewBtn:nth-child(2n){
+						margin-left: 1rem;
+					}
+					.subitOkPreviewBtn:nth-child(3),.subitOkPreviewBtn:nth-child(4){
+						margin-bottom: 0;
+					}
 					
 				}
 			}

src/component/HomePage/ExportNewCoolection.vue

@@ -169,6 +169,7 @@ export default defineComponent({
 									sketch2.num = 1
 									sketch3.num = 2
 									resolve()
+									image.remove()
 								})
 							}
 							

src/component/HomePage/Generate.vue

@@ -39,6 +39,9 @@
 							</div>
 						</div>
 					</div>
+					<a-popover title="Seed">
+						<input class="search_seed" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
+					</a-popover>
 					<input
 						class="search_input"
 						@input="ifMaximumLength"
@@ -139,7 +142,7 @@
                 :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
             >
 				<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
-				<sketchCategory v-if="type_.type2 == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
+				<sketchCategory v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
 				<div
 					class="delete_like_file_block left1"
 					:class="[driver__.driver?'hideEvents':'',]"
@@ -212,6 +215,7 @@ export default defineComponent({
 			label:useI18n().t('Generate.Model1')
 		})
         let searchPictureName = ref("");
+        let searchPictureSeed:any = ref(0);
         let store = useStore();
         let fileList: any = ref([
           
@@ -233,9 +237,9 @@ export default defineComponent({
 		let generateProceedList = ref([])
 		let remGenerate:any = ref(false)
 		let remGenerateTime:any = ref()
-		let scene:any = props.scene
         return {
             searchPictureName,
+			searchPictureSeed,
             store,
             fileList,
 			sketchboardList,
@@ -243,7 +247,6 @@ export default defineComponent({
 			printModel,
 			printModelList,
 			isGenerate,
-			scene,
 
 			// printBoards,
 			// moodboarList,
@@ -373,7 +376,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('Generate.jsContent1'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('Generate.jsContent2'));
             }
@@ -383,6 +386,7 @@ export default defineComponent({
 			this.printModel = value
 		},
 		getgenerate(){
+			if(this.isGenerate)return
 			clearInterval(this.remGenerateTime)
 			if(this.searchPictureName){
 				let arr = this.searchPictureName.split(/\s+/).length
@@ -415,7 +419,6 @@ export default defineComponent({
 			}
 			if(this.upload.level1Type == "Sketchboard"){
 				
-				console.log(this.sketchboardList);
 			}else if(this.upload.level1Type == "Printboard"){
 				level2Type = this.scene?.value
 			}
@@ -426,14 +429,18 @@ export default defineComponent({
 				level1Type:this.upload.level1Type,
 				level2Type:level2Type,
 				text:this.searchPictureName,
+				seed:this.searchPictureSeed,
 				userId:this?.userInfo?.userId,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				version:1,//为1就是Print
 				isTestUser:this.driver__.driver?false:this.isTest,
 				gender:this.workspace.sexEnum.name,
-				base64:base64,
+				sloganBase64:base64,
 			}
 			this.isGenerate = true
+			this.remGenerateTime = setTimeout(()=>{
+				this.remGenerate = true
+			},10000)
 			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
                 (rv) => {
 					if(data.isTestUser){
@@ -456,17 +463,21 @@ export default defineComponent({
                 }
             ).catch(res=>{
 				this.isGenerate = false
+				clearInterval(this.remGenerateTime)
+				this.remGenerate = false
             });
 		},
 		setGenerate(dataList:any){
-			this.remGenerateTime = setTimeout(()=>{
+			
-				this.remGenerate = true
-			},10000)
 			let data = dataList
 			let dataNum = dataList.length
+			let state = true
 			this.generateTime = setInterval(()=>{
+				if(!state)return
+				state = false
 				Https.axiosPost(Https.httpUrls.generateResult, data).then(
 					(rv) => {
+						state = true
 						if(this.isGenerate){//防止取消后有正在执行的获取状态
 							this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
 							rv.forEach((element:any) => {
@@ -475,12 +486,14 @@ export default defineComponent({
 									element.id_ = GO.id++
 									this.fileList.unshift(element)
 									data = data.filter((item:any) => item !== element.taskId);
-									this.sketchCatecoryList.forEach((itemCategory:any) => {
+									element.categoryValue = this.scene?.name
-										if(itemCategory.value == element.category){
+									element.category = this.scene?.value
-											element.categoryValue = itemCategory?.name
+									// this.sketchCatecoryList.forEach((itemCategory:any) => {
-											element.category = itemCategory?.value
+									// 	if(itemCategory.value == element.category){
-										}
+									// 		element.categoryValue = itemCategory?.name
-									});
+									// 		element.category = itemCategory?.value
+									// 	}
+									// });
 								}
 							});
 							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
@@ -533,6 +546,11 @@ export default defineComponent({
 			}
 			this.searchPictureName += str + value
 		},
+		ifSeedValue(e:any){
+			if(this.searchPictureSeed == ''){
+				this.searchPictureSeed = 0
+			}
+		},
 		ifMaximumLength(){
 			clearTimeout(this.inputTime)
 			let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
@@ -635,8 +653,6 @@ export default defineComponent({
         },
 		likeFile(item:any,str:string){
 			if(str == 'like'){
-				console.log();
-				
 				let level2Type = ''
 				if(this.upload.level1Type == "Sketchboard"){
 					level2Type = item.category
@@ -724,7 +740,7 @@ export default defineComponent({
         top: 0;
         background: #fff;
         padding-bottom: calc(2rem*1.2);
-        z-index: 2;
+        z-index: 3;
     }
     .generate_checkbox {
     }

src/component/HomePage/MarketingSketchUpload.vue

@@ -129,7 +129,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.warning(this.t('MarketingSketchUpload.jsContent2'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.warning(this.t('MarketingSketchUpload.jsContent3'));
             }

src/component/HomePage/Material.vue

@@ -8,6 +8,25 @@
             :centered="true"
         > -->
             <div class="my_material_header">
+				<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
+					<div class="select_block">
+						<a-select
+							ref="select"
+							v-model:value="disignType"
+							:options="disignTypeList"
+							@change="handleChange"
+							:fieldNames="{ label: 'name', value: 'value' }"
+						>
+							<template #suffixIcon
+								><span
+									class="icon iconfont icon-xiala"
+									style="color: #343579"
+								></span
+							></template>
+						</a-select>
+					</div>
+					
+				</div>
                 <div class="my_material_header_right">
                     <div class="content_search_block">
                         <input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList('')">
@@ -21,8 +40,8 @@
                 <div class="material_content_body scroll_style">
 					<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':''  , selectCode == 'Moodboard' ? 'moodb':''  ]" >
 						<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
-						<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></sketchCategory>
+						<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true" @upTypeSucced='upTypeSucced'></sketchCategory>
-						<printCategory v-if="selectCode == 'Printboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></printCategory>
+						<!-- <printCategory v-if="selectCode == 'Printboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></printCategory> -->
 						<!-- <div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
 							<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
 						</div> -->
@@ -67,7 +86,6 @@ export default defineComponent({
         let pageSize = ref(12)
         let total = ref(0)
         let searcMaterialhName:any = ref('') //搜索名字
-        let designType:any = ref(null)
         // let disignTypeList:any = ref([
 		let driver__:any = inject('driver__')
 				
@@ -77,6 +95,11 @@ export default defineComponent({
 		let {t} = useI18n()
 		let usGenerateList = ref([])
 	
+		
+		let disignType = ref({
+			name:'',
+			value:''
+		})
         return{
             myMaterialModalShow,
             imgList,
@@ -88,12 +111,12 @@ export default defineComponent({
             pageSize,
             total,
             searcMaterialhName,
-            designType,
             // disignTypeList,
 			workspace,
 			t,
 			driver__,
 			usGenerateList,
+			disignType,
         }
     },
 	data (prop) {
@@ -229,6 +252,9 @@ export default defineComponent({
 			this.currentPage = 1
 			this.pageSize = 12
 			this.imgList = []
+			if(code != 'Moodboard'){
+				this.disignType = this.disignTypeList[0].value
+			}
 			this.getLibraryList('')
 			
         },
@@ -251,6 +277,10 @@ export default defineComponent({
 		},
         selectImgItem(imgData:any){
 			let parent:any = this.$parent
+			if(this.selectCode != 'Moodboard'){
+				imgData.categoryValue = imgData.level2TypeEnum.value
+				imgData.category = imgData.level2TypeEnum.name
+			}
 			if(parent.isUseGenerate){
 				this.setUseGenerate([])
 				imgData.checked = true
@@ -258,8 +288,12 @@ export default defineComponent({
 					imgId : imgData.id,
 					imgUr: imgData.imgUrl,
 					level2Type:imgData.level2Type,
+					categoryValue:imgData.categoryValue,
+					category:imgData.category,
 					designType:'library'
 				}
+				console.log(obj);
+				
 				// parent.useGenerate.designType = 'collection'
 				this.$emit('setLibrary',obj)
 			}else{
@@ -282,6 +316,14 @@ export default defineComponent({
 				}
 			}
 			
+        },
+		handleChange(){
+			this.currentPage = 1
+			this.imgList = []
+            this.getLibraryList('')
+		},
+		upTypeSucced(){
+			this.handleChange()
 		},
         //选择所有的图片
         async getLibraryList(str:any){
@@ -297,7 +339,7 @@ export default defineComponent({
 			}
             let data = {
                 level1Type:this.selectCode,
-                // level2Type:this.designType,
+                level2Type: this.selectCode == 'Moodboard'?'':this.disignType,
 				modelSex:workspace?.sex,
                 page: this.currentPage,
                 // page:this.currentPage,
@@ -396,6 +438,16 @@ export default defineComponent({
 		position: sticky;
 		top: 0;
 		z-index: 2;
+		.my_material_header_left{
+			.select_block{
+				border: calc(0.1rem* 1.2) solid #F1F1F1;
+				margin-right: calc(2.3rem*1.2);
+				height: 4rem;
+				.ant-select-selector{
+					height: 90%;
+				}
+			}
+		}
         .my_material_header_right{
             display: flex;
             justify-content: space-between;
@@ -415,7 +467,7 @@ export default defineComponent({
                     // font-size: 1.6rem*1.2);
 					font-size: calc(1.2rem*1.2);
                     font-weight: 400;
-					height: calc(3rem*1.2);
+					height: 4rem;
 
                     &::placeholder {
                         color: #C2C2C2;

src/component/HomePage/MoodboardUpload.vue

@@ -365,7 +365,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('MoodboardUpload.jsContent3'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('MoodboardUpload.jsContent4'));
             }

src/component/HomePage/NewCollectionReview.vue

@@ -182,6 +182,7 @@ export default defineComponent({
 								sketchH[index]+=image.height * (300/image.width)
 								nextTick().then(()=>{
 									resolve()
+									image.remove()
 								})
 							}
 						})

src/component/HomePage/PrintboardUpload.vue

@@ -30,7 +30,7 @@
 						<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
 							<div @click.stop="openPrintModel">{{ scene.name }}	<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
 							<ul v-show="openMenu">
-								<li v-for="item,index in sceneList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.name }}</li>
+								<li v-for="item,index in printCatecoryList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.name }}</li>
 							</ul>
 						</div>
                     </div>
@@ -46,6 +46,8 @@
                                 </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"
@@ -98,7 +100,7 @@
 				@confirmSelect="confirmSelect"
 				:disignTypeList="printCatecoryList"
 				></Material>
-			<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard"></Generate>
+			<Generate v-show="openClick == 3" ref="Generate" :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
         </div>
 		<div class="modal_right">
 			<div class="modal_layout">
@@ -119,6 +121,8 @@
 				<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>
+
 						<!-- <div
 							class="delete_like_file_block left1"
 							:class="[driver__.driver?'hideEvents':'']"
@@ -160,6 +164,7 @@ 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';
@@ -171,6 +176,7 @@ export default defineComponent({
 		Generate,
 		scaleImage,
 		generalMenu,
+		sketchCategory,
     },
     setup(){
         let store:any =useStore()
@@ -300,6 +306,7 @@ export default defineComponent({
 				material.init('Printboard')
 			}
 			if(num == 3){
+				this.scene = this.printCatecoryList[0]
 				nextTick().then(()=>{
 					if(this.driver__.driver){
 						driverObj__.moveNext()
@@ -355,7 +362,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('PrintboardUpload.jsContent1'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('PrintboardUpload.jsContent2'));
             }
@@ -430,6 +437,8 @@ export default defineComponent({
                                 file.imgUrl = rv.url
                                 file.pin = false
                                 file.id = rv.id
+								file.category = this.printCatecoryList[0].value
+								file.categoryValue = this.printCatecoryList[0].name
                                 file.resData = rv
 								
                             }
@@ -503,6 +512,8 @@ export default defineComponent({
                             file.imgUrl = rv.url
                             file.id = rv.id
                             file.resData = rv
+							file.category = this.printCatecoryList[0].value
+							file.categoryValue = this.printCatecoryList[0].name
                         }
                     }
                     let fileList = this.fileList.filter((v:any)=> v.status === 'done')
@@ -549,6 +560,13 @@ export default defineComponent({
 				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.value
+						v.categoryValue=item.name
+					}
+				});
 				if(v.type_.type1 == 'generate'){
 					setboard.generate.push(v)
 				}else if(v.type_.type1 == 'material'){
@@ -592,10 +610,8 @@ export default defineComponent({
 		setSceneList(data:any){
 			if(this.scene.value === data.value) return
 			this.scene = data
-			console.log(data);
 			let generate:any = this.$refs.Generate
 			generate.sketchboardList = []
-			generate.scene = data
 			this.openMenu = false
 		},
 		openPrintModel(){

src/component/HomePage/SketchboardUpload.vue

@@ -138,7 +138,7 @@
 				<div class="modal_img">
 					<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
 						<img v-lazy="item.imgUrl">
-						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :item="item" :driver__="driver__.driver"></sketchCategory>
+						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
 
 						<!-- <div
 							class="delete_like_file_block left1"
@@ -154,7 +154,7 @@
 							<span class="icon iconfont icon-shanchu operate_icon"></span>
 						</div>
 						<div class="pin_block">
-							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
+							<a-checkbox v-model="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
 						</div>
 					</div>
 				</div>
@@ -432,7 +432,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('SketchboardUpload.jsContent2'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('SketchboardUpload.jsContent3'));
             }
@@ -482,6 +482,13 @@ export default defineComponent({
 				moodboard:[] as any,
 			}
 			arr.forEach((v:any)=>{
+				v.pin = v.pin == 1?true:false
+				this.sketchCatecoryList.forEach((item:any) => {
+					if(v.level2Type == item.value){
+						v.category=item.value
+						v.categoryValue=item.name
+					}
+				});
 				if(v.type_.type1 == 'generate'){
 					setboard.generate.push(v)
 				}else if(v.type_.type1 == 'material'){

src/component/HomePage/Upload.vue

@@ -93,7 +93,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('Upload.jsContent1'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('Upload.jsContent2'));
             }

src/component/HomePage/collectionModal.vue

@@ -136,8 +136,6 @@ export default defineComponent({
     methods:{
         nextStep(){
 			let colorBoards = this.store.state.UploadFilesModule.colorBoards
-			console.log(colorBoards);
-			
 			if(this.collectionStep == 1){
 				let disposeMoodboard = this.store.state.UploadFilesModule.disposeMoodboard
 				let moodboard = this.store.state.UploadFilesModule.moodboard

src/component/HomePage/createSlogan.vue

@@ -86,7 +86,9 @@ import { Modal, message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import allOrder from "@/component/Pay/allOrder.vue";
 import creditsDetail from "@/component/Pay/creditsDetail.vue";
+import { JSSetRemoveImage } from "@/tool/canvasDrawing";
 import { useI18n } from "vue-i18n";
+
 export default defineComponent({
     components: {
 		creditsDetail,
@@ -146,8 +148,8 @@ export default defineComponent({
 				canvasWH.value = height
 				scale = exportWH/canvasWH.value
 				var canvasDom = document.createElement("canvas");
-				let oldCanvasDom = canvasBox.querySelector('canvas')
+				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
-				if(oldCanvasDom)canvasBox.removeChild(oldCanvasDom); // 清空原有内容
+				if(oldCanvasDom)oldCanvasDom.remove()
 				canvasBox.appendChild(canvasDom);
 				canvas = new fabric.Canvas(canvasDom, {
 					backgroundColor: "#e6e6e6",
@@ -157,6 +159,11 @@ export default defineComponent({
 				});
 				canvas.on('object:moving',canvasMoving)
 				setTextFun('请输入一段话吧~')
+				if(!fabric.Object.prototype.controls.deleteControl){
+					JSSetRemoveImage(deleteObj)
+				}else{
+					fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
+				}
 				// setRemoveImage()
 				fabric.Object.prototype.cornerSize = 10
 				fabric.Object.prototype.transparentCorners = false 
@@ -181,6 +188,21 @@ export default defineComponent({
 				textBtnShow.value = false
 			}
 		}
+		let deleteObj = ()=> {
+			if(!canvas.getActiveObjects()){
+				return
+			}
+			let target = canvas.getActiveObjects()
+			target.forEach((item)=>{
+				canvas.fxRemove(item, {
+					onComplete(){
+					canvas.discardActiveObject(); // 丢弃当前选中的对象
+					canvas.renderAll(); // 重新渲染 Canvas
+					}
+				})
+				canvas.FX_DURATION = 300
+			})
+		}
 		let messageShow = false
 		let canvasMoving = (options)=>{
 			let obj = options.target

src/component/HomePage/printCategory.vue

@@ -54,6 +54,7 @@
  import { openGuide,driverObj__ } from "@/tool/guide";
  export default defineComponent({
 	 name:'filterComponent',
+	 emits:['upTypeSucced'],
 	 props:{
 		 disignTypeList:{
 			 type:Object
@@ -77,7 +78,7 @@
 			 default:{class1:'',class2:''},
 		 }
 	 },
-	 setup(props:any){
+	 setup(props:any,{emit}){
 		 let showFileCategory = (file:any)=> {
 			 file.categoryShow = true;
 			 nextTick().then(()=>{
@@ -114,11 +115,12 @@
 				 libraryId:[item.id],
 				 level2Type:item.category,
 			 }
-			//  Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
+			 Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
-			// 	 (rv: any) => {
+				 (rv: any) => {
-			// 	 }
+					emit('upTypeSucced')
-			//  ).catch((res)=>{
+				 }
-			//  });
+			 ).catch((res)=>{
+			 });
 		 }
 		 return {
 			 showFileCategory,

src/component/HomePage/productImg.vue

@@ -26,10 +26,10 @@
 					<div class="productImg_content_item_title">Select Collection</div>
 					<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
 						<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
-							<img v-lazy="item.designOutfitUrl" alt="">
+							<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl" alt="" :class="{active:item.isChecked}">
 						</div>
 					</div>
-					<div class="productImg_content_item_title">Up Load</div>
+					<div class="productImg_content_item_title">Upload</div>
 					<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
                         <div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
                             <div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
@@ -41,17 +41,18 @@
                             <div
                                 class="upload_file_item_content content_item_imgBox_itemImg"
                                 v-show="file?.status === 'done'"
+
                             >
-                                <img :src="file?.imgUrl" class="upload_img" />
+                                <img @click="setGenerate(file)" :src="file?.imgUrl" class="upload_img" :class="{active:file?.isChecked}"/>
-								<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
+								<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
 									<i class="fi fi-rr-trash"></i>
-								</div>
+								</div> -->
                             </div>
                         </div>
                         <div class="upload_file_item upload_component ">
 						<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
                             <a-upload
-                                :action="uploadUrl + '/api/element/upload'"
+                                :action="uploadUrl + '/api/history/toProductImageElementUpload'"
                                 list-type="picture-card"
 								:capture="null"
                                 :data="{
@@ -76,29 +77,62 @@
                         </div>
                     </div>
 					<div class="productImg_content_item_title">Magic Tools</div>
-
+					<div class="input_border productImg_content_item_generate">
-
+						<div class="input_box">
+							<div class="input_box_btnBox">
+								<input
+									class="search_input"
+									:placeholder="$t('Generate.inputContent1')"
+									v-model="searchName"
+									@keydown.enter="getPrductimg()"
+								/>
+								<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
+								<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="()=>isTextarea = !isTextarea"></i>
+							</div>
+							<textarea 
+								v-show="isTextarea"
+								class="search_textarea "  
+								@keydown.enter="getPrductimg()"
+								v-model="searchName"
+							></textarea>
+							<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
+								{{ $t('Generate.Generate') }}
+							</div>
+							<div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
+								<i class="fi fi-br-loading"></i>
+							</div>
+							<div v-show="remProductimg" @click="removeProductimg" class="generage_btn started_btn">
+								{{$t('Generate.Close')}}
+							</div>
+						</div>
+					</div>
 				</div>
 				<div class="productImg_right">
 					<div class="productImg_content_item_title">Selected Product</div>
 					<div class="productImg_right_item_box generalScroll" v-mousewheel>
 						<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
-							<img v-lazy="item.url" alt="">
+							<img :src="item.url" alt="">
 							<div class="productImg_right_item_like">
 								<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
 							</div>
+							<div class="productImg_right_item_scale">
+								<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(generateList,index)"></i>
+							</div>
 						</div>
 					</div>
 					<div class="productImg_content_item_title productImg_right_titleBtn">
 						Selected Product
-						<div class="button_second">Export</div>
+						<div class="button_second" @click="setExport">Export</div>
 					</div>
 					<div class="productImg_right_item_box generalScroll" v-mousewheel>
 						<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
-							<img v-lazy="item.url" alt="">
+							<img :src="item.url" alt="">
 							<div class="productImg_right_item_like">
 								<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
 							</div>
+							<div class="productImg_right_item_scale">
+								<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(likeList,index)"></i>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -108,6 +142,7 @@
 			<a-spin size="large" />
 		</div>
 		<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
+		<scaleImage ref="scaleImage"></scaleImage>
 	</a-modal>
 </template>
 
@@ -125,74 +160,59 @@ import { downloadIamge } from "@/tool/util";
 import { useI18n } from "vue-i18n";
 import ExportModel from "@/component/HomePage/ExportModel.vue";
 import { useStore } from "vuex";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
+
 export default defineComponent({
 	components:{
 		ExportModel,
+		scaleImage,
 	},
     setup(props,{emit}) {
 		const store = useStore();
 		const {t} = useI18n()
+		const upload:any = ref({})
         let productImg: any = ref(false);//弹窗
 		let productImgMask:any = ref(false)//弹窗遮罩
 		let productImgData:any = reactive({
 			isShowMark:false,
+			beenPublished:0,
 			fileList:[],
+			searchName:'',
+			isTextarea:false,//是否展开
+			remProductimg:false,//是否出现取消按钮
+			isProductimg:false,//开始生成
+			selectProductimgList:[],
 			generateList:[
-				{
+				
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:2,
-				}
 			],
 			likeList:[
-				{
+				
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},{
-					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
-					id:1,
-				},
 			],
 		})
+		let ExportModel = ref()
 		let likeDesignCollectionList: any = computed(() => {
 			return store.state.HomeStoreModule.likeDesignCollectionList;
 		});
-		let init = ()=>{
+		let userlikeGroupId = 0
+		let init = (userGroupId:any,beenPublished:any)=>{
 			productImg.value = true
-			console.log(likeDesignCollectionList);
+			productImgData.beenPublished = beenPublished
-			
+			upload.value = {
+				userlikeGroupId:userGroupId
+			}
+			userlikeGroupId = userGroupId
+			getLikeProductImage(userGroupId)
+		}
+		let getLikeProductImage = (userGroupId:any)=>{
+			let data = {
+				userLikeGroupId:userGroupId
+			}
+			Https.axiosPost(Https.httpUrls.productImageLikeList, data).then(
+				(rv) => {
+					productImgData.likeList.push(...rv)
+				}
+			).catch(res=>{
+			});
 		}
 		let cancelDsign = ()=>{
 			Modal.confirm({
@@ -219,11 +239,9 @@ export default defineComponent({
                 let res = JSON.parse(file.xhr.response);
 				if(res.errCode == 0){
 					file.imgUrl = res.data.url;
-					// file.type_ = {
-					// 	type1:'upload',
-					// 	type2:'Moodboard'
-					// };
 					file.id = res.data.id
+					file.isChecked = true
+					file.type = 'ProductElement'
 					productImgData.fileList.filter((v: any) => v.status === "done");
 				}else{
 					bor = false
@@ -242,7 +260,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(useI18n().t('MoodboardUpload.jsContent3'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(useI18n().t('MoodboardUpload.jsContent4'));
             }
@@ -251,35 +269,191 @@ export default defineComponent({
 		let deleteFile = (index:any)=>{
 			productImgData.fileList.splice(index,1)
 		}
+		let setGenerate = (item:any)=>{
+			item.isChecked = !item.isChecked
+			// productImgData.selectProductimgList
+		}
 		let likeFile = (item:any,str:any,index:any) =>{
+			let url
+			let data = {
+				toProductImageResultId:[item.id]
+			}
+			if(str == 'like'){
+				url = Https.httpUrls.productImageLike
+			}else{
+				url = Https.httpUrls.productImageUnLike
+			}
+			Https.axiosPost(url, data).then(
+				(rv) => {
 					if(str == 'like'){
 						productImgData.likeList.push(item)
 						productImgData.generateList.splice(index,1)
-				
 					}else{
 						productImgData.generateList.push(item)
 						productImgData.likeList.splice(index,1)
 					}
+					
+				}
+			).catch(res=>{
+			});
 		}
 		let setExport = ()=>{
-		    // let exportModel:any = this.$refs.ExportModel
+			let data = {
-			// exportModel.init()
+				key:'likePorductImg',
+				imgList:productImgData.likeList,
+				userlikeGroupId,
+				beenPublished:productImgData.beenPublished
 			}
+		    let exportModel:any = ExportModel.value
+			exportModel.init(data)
+		}
+		let remPrductimgTime:any = null
+		let prductimgTime:any = null
+		let getPrductimg = ()=>{
+			if(productImgData.isProductimg) return
+			clearInterval(remPrductimgTime)
+			let selectArr:any = []
+			let obj = {
+				"createTime": "",
+				"elementId": 0,
+				"elementType": "",
+				"id": 0,
+				"isLike": 0,
+				"taskId": "",
+				"toProductImageRecordId": 0,
+				"url": ""
+			}
+			productImgData.fileList.forEach((item:any)=>{
+				if(item.isChecked){
+					obj.elementId = item.id
+					obj.elementType = item.type
+					selectArr.push(JSON.parse(JSON.stringify(obj)))
+				}
+			})
+			likeDesignCollectionList.value.forEach((item:any)=>{
+				if(item.isChecked){
+					obj.elementId = item.designOutfitId
+					obj.elementType = 'DesignOutfit'
+					selectArr.push(JSON.parse(JSON.stringify(obj)))
+				}
+			})
+			if(selectArr.length == 0) {
+				message.info('Please select at least one picture')
+				return
+			}
+			let data:any ={
+				prompt:productImgData.searchName,
+				toProductImageVOList:selectArr,
+				userLikeGroupId:upload.value.userlikeGroupId,
+			}
+			productImgData.isProductimg = true
+			remPrductimgTime = setTimeout(()=>{
+				productImgData.remProductimg = true
+			},10000)
+			Https.axiosPost(Https.httpUrls.toProduct, data).then(
+                (rv) => {
+					let arr:any = []
+					rv.forEach((item:any)=>{
+					  arr.push(item.taskId)  
+					})
+					setPrductimg(arr)
+                }
+            ).catch(res=>{
+				productImgData.isProductimg = false
+				clearInterval(remPrductimgTime)
+				productImgData.remProductimg= false
+            });
+		}
+		let generateProceedList:any = []
+		let setPrductimg = (dataList:any)=>{
+			
+			let data = dataList
+			let dataNum = dataList.length
+			let state = true
+			prductimgTime = setInterval(()=>{
+				if(!state)return
+				state = false
+				Https.axiosPost(Https.httpUrls.toProductImageResult, data).then(
+					(rv) => {
+						state = true
+						if(productImgData.isProductimg){//防止取消后有正在执行的获取状态
+							// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
+							rv.forEach((element:any) => {
+								if(element.status == 'Success'){
+									element.imgUrl = element.url
+									productImgData.generateList.unshift(element)
+								}
+								data = data.filter((item:any) => item !== element.taskId);
+							});
+							generateProceedList = data
+							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
+								// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
+								// }
+								clearInterval(prductimgTime)
+								clearInterval(remPrductimgTime)
+								productImgData.remProductimg = false
+								productImgData.isProductimg = false
+							}
+						}
+					}
+				).catch(res=>{
+					clearInterval(prductimgTime)
+					clearInterval(remPrductimgTime)
+					productImgData.isProductimg = false
+					productImgData.remProductimg= false
+				});
+			},1000)
+		}
+		let removeProductimg = ()=>{
+			productImgData.isProductimg = false
+			productImgData.remProductimg= false
+			clearInterval(prductimgTime)
+			let userInfo:any = getCookie("userInfo")
+			if(generateProceedList){
+				// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
+				let str = generateProceedList.join(',')
+				console.log(str,generateProceedList);
+				let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
+				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
+					(rv) => {
+						generateProceedList = []
+					}
+				).catch(res=>{
+				});
+			}
+		}
+		let scaleImage = ref()
+		let setScaleImage = (arr:any,index:any)=>{
+			arr.forEach((item:any)=>{
+			  item.imgUrl = item.url  
+			})
+			scaleImage.value.init(arr,index)
+			scaleImage.value.isLike = false
+		}
+		//超分
 		let setTask = (data:any)=>{
 			emit('setTask',data)
 		}
+		
         return {
+			upload,
             productImg,
 			productImgMask,
 			...toRefs(productImgData),
 			likeDesignCollectionList,
+			ExportModel,
 			init,
 			cancelDsign,
 			fileUploadChange,
 			beforeUpload,
 			deleteFile,
+			setGenerate,
 			likeFile,
 			setExport,
+			getPrductimg,
+			removeProductimg,
+			scaleImage,
+			setScaleImage,
 			setTask,
         };
     },
@@ -309,12 +483,7 @@ export default defineComponent({
             // moodTemplateId: "", //模板id
 			token: "",
             uploadUrl: "",
-			upload: {
+			
-                isPin: 0,
-				gender:'',
-                level1Type: "Moodboard",
-                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            },
         };
     },
     mounted() {
@@ -370,13 +539,7 @@ export default defineComponent({
 		.upload_item{
 
 		}
-		.upload_file_item{
+		
-			display: flex;
-			margin-right: 1rem;
-			&.upload_file_item:last-child{
-				margin-right: 0rem;
-			}
-		}
 		.productImg_content_item_title{
 			font-weight: 600;
 			font-size: 1.8rem;
@@ -398,7 +561,12 @@ export default defineComponent({
 				height: 12rem;
 				img{
 					width: 100%;
+					cursor: pointer;
 					object-fit: contain;
+					&.active{
+						opacity: .5;
+						transform: scale(.9);
+					}
 				}
 				&.content_item_imgBox_itemImg:hover{
 					.content_item_imgBox_itemImg_delete{
@@ -435,6 +603,16 @@ export default defineComponent({
 		}
 		.productImg_left{
 			width: 25%;
+			.upload_file_item{
+				display: flex;
+				margin-right: 1rem;
+				width: auto;
+				border: none;
+				margin-bottom: 0;
+				&.upload_file_item:last-child{
+					margin-right: 0rem;
+				}
+			}
 			// width: 45%;
 			.productImg_content_item_imgBox{
 				.content_item_imgBox_itemImg{
@@ -442,6 +620,9 @@ export default defineComponent({
 					flex-shrink: 0;
 				}
 			}
+			.productImg_content_item_generate{
+				--width:60%;
+			}
 		}
 		.productImg_right{
 			width: 75%;
@@ -465,7 +646,7 @@ export default defineComponent({
 						height: 100%;
 					}
 					
-					.productImg_right_item_like{
+					.productImg_right_item_like,.productImg_right_item_scale{
 						display: none;
 						position: absolute;
 						top: 1rem;
@@ -475,9 +656,12 @@ export default defineComponent({
 							color: red;
 						}
 					}
+					.productImg_right_item_scale{
+						top: 4rem;
+					}
 				}
 				.productImg_right_item:hover{
-					.productImg_right_item_like{
+					.productImg_right_item_like,.productImg_right_item_scale{
 						display: block;
 					}	
 				}

src/component/HomePage/scaleImage.vue

@@ -21,7 +21,7 @@
 		</div>
 		<div class="scaleImage_content">
 			<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
-			<div class="img_operate_block">
+			<div class="img_operate_block" v-if="isLike">
 				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
 				<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
 			</div>
@@ -76,7 +76,7 @@ export default defineComponent({
 		])
 		let scaleImageMask:any = ref(false)
 		let scaleImageIndex:any = ref(0)
-
+		let isLike:any = ref(true)
 		let robotAssits:any = ref(0)
         return {
             scaleImage,
@@ -86,7 +86,7 @@ export default defineComponent({
 			scaleImageList,
 			scaleImageMask,
 			scaleImageIndex,
-
+			isLike,
 			robotAssits,
         };
     },

src/component/HomePage/sketchCategory.vue

@@ -8,6 +8,7 @@
 			>
 				{{ item.categoryValue }}
 				<div
+					v-show="!isSpread"
 					:class="[
 						'icon',
 						'iconfont',
@@ -22,6 +23,7 @@
 				class="category_list"
 				:class="driverClass.class2"
 				v-show="item.categoryShow"
+				v-if="!isSpread"
 			>
 				<div
 					:class="[
@@ -49,14 +51,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent,ref ,nextTick} from "vue";  
+import { defineComponent,ref ,nextTick, computed,watch} from "vue";  
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 export default defineComponent({
     name:'filterComponent',
+	emits:['upTypeSucced'],
     props:{
         disignTypeList:{
-            type:Object
+            type:Object,
+			default:{}
         },
         item:{
             type:Object
@@ -68,6 +72,10 @@ export default defineComponent({
 			type:Boolean,
 			default:false,
 		},
+		isSpread:{
+			type:Boolean,
+			default:false,
+		},
 		driver__:{
 			type:Boolean,
 			default:false,
@@ -77,8 +85,10 @@ export default defineComponent({
 			default:{class1:'',class2:''},
 		}
     },
-    setup(props:any){
+    setup(props:any,{emit}){
+		let data = ''
 		let showFileCategory = (file:any)=> {
+			if(props.isSpread)return
             file.categoryShow = true;
 			nextTick().then(()=>{
 				if(props.driver__){
@@ -110,12 +120,14 @@ export default defineComponent({
 			
         }
 		let setSketchLibrary = (item:any)=>{
+			
 			let data = {
 				libraryId:[item.id],
 				level2Type:item.category,
 			}
 			Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
                 (rv: any) => {
+					emit('upTypeSucced')
                 }
             ).catch((res)=>{
             });

src/component/LibraryPage/ModelPlacementMobile.vue

@@ -250,8 +250,6 @@ export default defineComponent({
 			
             setTimeout(()=>{
 				nextTick().then(()=>{
-					let image:any = new Image()
-					image.src = this.option.img
 					let imgbox:any = this.$refs.imgbox
 					let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
 					let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]

src/component/WorksPage/Falls.vue

@@ -11,7 +11,7 @@
 			<!-- 图片 -->
 			<div class="falls_item_img">
 				<img
-					v-lazy="item.designPythonOutfitUrl"
+					v-lazy="item.canvasUrl"
 					@click="setItemDetail(item)"
 					:style="{
 						height: item.style.imgHeihgt + 'px',
@@ -26,30 +26,31 @@
 				</div>
 				<div class="falls_item_content">
 					<div class="falls_item_user">
-						<img src="http://121.40.53.210:3000/falls/5.png" alt="">
+						<!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
 						<div class="falls_item_user_detail">
-							<div>{{item.name}}</div>
+							<div>{{item.portfolioName}}</div>
 							<span>地区</span>
 						</div>
 					</div>
 					<div class="falls_item_detail">
-						<div>
+						<!-- <div>
 							<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
 								<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
 							</svg>
 							<span>321</span>
-						</div>
+						</div> -->
-						<div>
+						<label @click="portfolioLike(item)">
 							<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
 							<i v-else class="fi fi-rr-social-network"></i>
-							<span>321</span>
+							<span>{{item.likeNum}}</span>
-						</div>
+						</label>
 						<div>
-							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
+							<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
 								<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
 								<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
-							</svg>
+							</svg> -->
-							<span>321</span>
+							<i class="fi fi-sr-eye"></i>
+							<span>{{item.likeNum}}</span>
 						</div>
 					</div>
 				</div>
@@ -142,6 +143,17 @@ export default defineComponent({
 		},
 		// 挂载方法
 		methods: {
+			clearData(){
+				this.width = 300
+				this.num_x = 1
+				this.gap_x = 0
+				this.gap_y = 0
+				this.poss = []
+				this.loading = false
+				this.computedHeight = 0
+				this.list = []
+				this.resize()
+			},
 			push(arr) {
 				this.wait_list = this.wait_list.concat(arr);
 				if (!this.loading) {
@@ -156,7 +168,7 @@ export default defineComponent({
 					return;
 				}
 				
-				let url = this.wait_list[0].designPythonOutfitUrl;
+				let url = this.wait_list[0].canvasUrl;
 				let data = this.wait_list[0]
 				let img = document.createElement("img");
 				img.src = url;
@@ -181,7 +193,7 @@ export default defineComponent({
 					let imgHeight = height - this.computedHeight
 					this.poss[idx] = top + height;
 					let obj = {
-						designPythonOutfitUrl:url,
+						canvasUrl:url,
 						style: { width, height, top, left, imgHeight },
 						...data
 					};
@@ -234,6 +246,9 @@ export default defineComponent({
 			},
 			setItemDetail(data){
 				this.$emit('getImgScale',data)
+			},
+			portfolioLike(data){
+				this.$emit('setPortfolioLike',data)
 			}
 		},
 })
@@ -321,10 +336,21 @@ export default defineComponent({
 						display: flex;
 						width: 40%;
 						justify-content: space-between;
-						>div{
+						>label{
+							// cursor: pointer;
+						}
+						>label,>div{
+							display: flex;
+							align-items: center;
+							i{
+								font-size: 2rem;
+							}
 							svg,i{
-								width: 10px;
+								color: #9e9ea7;
-								height: 10px;
+								display: flex;
+								// width: 10px;
+								// height: 10px;
+								margin-right: .5rem;
 							}
 							span{
 								margin-left: 3px;

src/component/WorksPage/newScaleImage.vue

@@ -23,32 +23,37 @@
 			<div class="newScaleImage_left">
 				<div class="newScaleImage_content_right">
 					<div class="newScaleImage_content_right_img">
-						<img :src="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
+						<div>
+							<img :src="scaleImageList[scaleImageIndex]">
+							<!-- <img :src="scaleImageData?.canvasUrl"> -->
 						</div>
-					<div class="nav_centent" v-mousewheel="{allLength:scaleImageList.length}" :style="{'margin-top':scaleImageMarginTop}">
+					</div>
-						<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.designPythonOutfitUrl" :key="item.id">
+					<div class="nav_centent" v-mousewheel="{allLength:scaleImageData.length}" :style="{'margin-top':scaleImageMarginTop}">
+						<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :src="item" :key="item.id">
 					</div>
 				</div>
 			</div>
 			<div class="newScaleImage_right">
 				<div class="newScaleImage_right_content">
 					<div class="newScaleImage_right_content_type">
-						<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageList[scaleImageIndex]?.portfolioType=='History'? 'collection' : 'generate' }}</div>
+						<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageData?.portfolioType=='History'? 'collection' : 'generate' }}</div>
 					</div>
 					<div v-if="true" class="newScaleImage_right_content_collection">
-						<!-- <div class="scaleImage_chunk_item content_left_collection_detail">
+						<div class="scaleImage_chunk_item content_left_collection_detail">
-							<div class="scaleImage_chunk_title">设计模式:</div>
+							<!-- <div class="scaleImage_chunk_title">设计模式:</div>
 							<div class="scaleImage_chunk_title_intro">
 								Overall
-							</div>
 							</div> -->
+							<div class="scaleImage_chunk_title">{{scaleImageData.portfolioName}}</div>
+							<div class="scaleImage_chunk_title_intro">{{scaleImageData.portfolioDes}}</div>
+						</div>
 						<div class="scaleImage_chunk_item content_left_collection_content">
 							<div class="scaleImage_chunk_title">Finished Products</div>
 							<div class="content_left_collection_content_list">
 								<img v-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
 							</div>
 						</div>
-						<div class="started_btn" @click="setChoose">二创</div>
+						<div class="started_btn" @click="setChoose" :title="scaleImageData.openSource == 0?'发布者不允许二次创作~':''" :class="{active:scaleImageData.openSource == 0}">二创</div>
 					</div>
 					<div v-else class="newScaleImage_right_content_generate">
 						<div class="scaleImage_chunk_item content_left_generate_item">
@@ -74,7 +79,7 @@
 					<div class="scaleImage_chunk_item">
 						<div class="detail_right_user detail_left_right_item">
 							<div class="detail_right_user_head">
-								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+								<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
 							</div>
 							<div class="detail_right_user_content">
 								<div class="scaleImage_chunk_title">名字</div>
@@ -83,41 +88,42 @@
 							</div>
 						</div>
 						<div class="detail_right_work_detail detail_left_right_item">
-							<div class="scaleImage_chunk_title">{{ scaleImageData.portfolioName }}</div>
+							<!-- <div class="scaleImage_chunk_title">{{ scaleImageData?.portfolioName }}</div> -->
-							<div class="scaleImage_chunk_title_intro">{{ scaleImageData.portfolioDes }}</div>
+							<!-- <div class="scaleImage_chunk_title_intro">{{ scaleImageData?.portfolioDes }}</div> -->
 						</div>
 						<div class="detail_right_date detail_left_right_item">
 							<div class="detail_right_date_setUp">
 								<div>创建时间</div>
-								<span>{{ scaleImageList[scaleImageIndex].createDate }}</span>
+								<span>{{ scaleImageData.createDate }}</span>
 							</div>
 							<div class="detail_right_date_upData">
 								<div>更新时间</div>
-								<span>{{ scaleImageList[scaleImageIndex].updateDate }}</span>
+								<span>{{ scaleImageData.updateDate }}</span>
 							</div>
 						</div>
 						<div class="detail_right_look_operation detail_left_right_item">
-							<div class="detail_left_right_item_click">
+							<!-- <div class="detail_left_right_item_click">
 								<svg :adminLike="!!true" xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
 									<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
 								</svg>
 								<span>321</span>
-							</div>
+							</div> -->
-							<div class="detail_left_right_item_click">
+							<div class="detail_left_right_item_click" @click="setPortfolioLike">
-								<i v-if="true" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
+								<i v-if="scaleImageData?.isLike == 1" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
 								<i v-else class="fi fi-rr-social-network"></i>
-								<span>321</span>
+								<span>{{scaleImageData.likeNum}}</span>
 							</div>
 							<div>
-								<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
+								<!-- <svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
 									<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
 									<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
-								</svg>
+								</svg> -->
-								<span>321</span>
+								<i class="fi fi-sr-eye"></i>
+								<span>{{scaleImageData.likeNum}}</span>
 							</div>
 							<div>
 								<i class="fi fi-rr-comment-alt-dots"></i>
-								<span>321</span>
+								<span>{{scaleImageData.likeNum}}</span>
 							</div>
 						</div>
 						<div class="detail_right_auther detail_left_right_item">
@@ -144,41 +150,50 @@
 				</div>
 				<div class="newScaleImage_right_comment scaleImage_chunk_item">
 					<div class="scaleImage_chunk_title">Comment</div>
-					<div v-if="false" class="newScaleImage_right_comment_null">
+					<div v-if="commentList.length === 0" class="newScaleImage_right_comment_null">
 						<div class="scaleImage_chunk_title">No Comments</div>
 						<div class="scaleImage_chunk_title">You can be the first!</div>
 					</div>
 					<div v-else class="newScaleImage_right_comment_content">
-						<div class="detail_left_content_item">
+						<div class="detail_left_content_item" v-for="item in commentList" :key="item.id">
-							<div class="detail_left_content_item_img">
+							<!-- <div class="detail_left_content_item_img">
-								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+								<img v-lazy="scaleImageData?.imgUrl">
-							</div>
+							</div> -->
 							<div class="detail_left_content_item_content">
-								<div class="scaleImage_chunk_title">名字</div>
+								<div class="scaleImage_chunk_title_intro">{{ item?.userName }}</div>
-								<div class="scaleImage_chunk_title_intro">个性签名</div>
+								<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
-								<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']">这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
+								<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ item.comment }}</div>
+								<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ item.createTimes }}</div>
 								<div class="detail_left_content_item_btn">
-									<div class="left_content_item_reply">回复</div>									
+									<div class="left_content_item_reply" @click.stop="setCommentReply(item,'parent')">
-									<div class="left_content_item_thumbs">
+										<i class="fi fi-rr-comment-alt-dots"></i>
+										回复
+									</div>									
+									<!-- <div class="left_content_item_thumbs">
 										<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
 										<span>123</span>
+									</div>									 -->
+									<div v-show="true" class="left_content_item_unfold" @click="()=>item.unfold = !item.unfold">展开</div>
 								</div>
-									<div v-show="true" class="left_content_item_unfold">展开</div>
+								<div class="detail_left_content_item_replyContent" v-for="children in item.childCommentVOList" :key="children.id">
-								</div>
-								<div class="detail_left_content_item_replyContent">
 									<div class="detail_left_content_item_img">
-										<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+										<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
 									</div>
 									<div class="detail_left_content_item_content">
-										<div class="scaleImage_chunk_title">名字</div>
+										<div class="scaleImage_chunk_title">{{ children?.userName }}<span v-if="children?.replyTo" class="replyIcon"></span>{{ children?.replyTo }}</div>
-										<div class="scaleImage_chunk_title_intro">个性签名</div>
+										<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
-										<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']"><span class="scaleImage_chunk_title">@名字</span>这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
+										<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ children.comment }}</div>
+										<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ children.createTimes }}</div>
+
 										<div class="detail_left_content_item_btn">
-											<div class="left_content_item_reply">回复</div>									
+											<div class="left_content_item_reply" @click.stop="setCommentReply(children,'son')">
-											<div class="left_content_item_thumbs">
+												<i class="fi fi-rr-comment-alt-dots"></i>
+												回复
+											</div>									
+											<!-- <div class="left_content_item_thumbs">
 												<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
 												<span>123</span>
-											</div>									
+											</div>									 -->
 											<div v-show="false" class="left_content_item_unfold">展开</div>
 										</div>
 									</div>
@@ -186,9 +201,9 @@
 							</div>
 						</div>
 					</div>
-					<div class="newScaleImage_right_comment_setComment">
+					<div class="newScaleImage_right_comment_setComment" @click.stop="">
-						<input type="text" placeholder="回复Wxd的评论">
+						<input type="text" ref="commentInputFocus" v-model="commentText" :placeholder="commentInput">
-						<div class="detail_left_setComment_btn">
+						<div class="detail_left_setComment_btn" @click="setComment">
 							<i class="fi fi-ss-paper-plane-top"></i>
 						</div>
 					</div>
@@ -200,12 +215,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
+import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, onMounted} from "vue";
 import { Https } from "@/tool/https";
 // import { getCookie } from "@/tool/cookie";
 // import domTurnImg from '@/tool/domTurnImg'
 import { useRouter } from 'vue-router'
-import { downloadIamge } from "@/tool/util";
+import { downloadIamge,setPubDate } from "@/tool/util";
 
 export default defineComponent({
     setup() {
@@ -217,10 +232,24 @@ export default defineComponent({
 			generateValue:'123123',
 			loadingShow:false,
 			scaleImageMarginTop:0,
+			commentReply:{
+				leve1Id:null,
+				leve2Id:null,
+				name:'',
+			},
 			scaleImageList:[],
 			scaleImageIndex:0,//当前图片索引
 			scaleImageData:{},//当前图片内容
+			getCommentData:{
+				portfolioId:0,
+				page:1,
+				size:10
+			},
+			commentText:'',
+			commentInput:'',//评论框提示词
+			commentList:[],
 		})
+		let commentInputFocus:any = ref()
 		let textarea: any = ref(null)
 		let setCopy = ()=>{
 			textarea.value.select()
@@ -228,18 +257,17 @@ export default defineComponent({
 		}
 		let init = (item:any)=>{
 			scaleImage.value = true
-			// imgData.scaleImageList = list
-			// imgData.scaleImageIndex = index
 			// let data = list[index]
-
+			getDetail(item,'')
-			getDetail(item.id)
+			document.addEventListener('click',removeCommentReply)
-
 			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
 		}
 		let cancelDsign = ()=>{
 			scaleImage.value = false
 			imgData.scaleImageIndex = 0
 			imgData.scaleImageData = {}
+			imgData.commentText = ''
+			document.removeEventListener('click',removeCommentReply)
 		}
 		let download = ()=>{
 			downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
@@ -257,25 +285,109 @@ export default defineComponent({
 		// 	let parent:any = this.$parent
 		// 	parent.likeFile(item,str)
 		// },
-		let getDetail = (value:any)=>{
+		let getDeatilData = {}
+		let getDetail = (value:any,str:string)=>{
+			imgData.loadingShow = true
 			let data = value
-		    // Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
+			getDeatilData = value
-			// 	(rv: any) => {
+		    Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
-			// 			imgData.scaleImageData = rv
+				(rv: any) => {
-			// 			console.log(imgData.scaleImageData);
+					imgData.loadingShow = false
-			// 		}
+					imgData.scaleImageData = rv
-			// 	).catch((res)=>{
+					let canvasUrl = [rv.canvasUrl]
-			// 	}
+					var findUrl = rv.designPythonOutfitList.map((obj:any) => obj.designUrl);
-			// )
+					imgData.scaleImageList = canvasUrl.concat(findUrl);
+					imgData.scaleImageIndex = 0
+					imgData.getCommentData.portfolioId = rv.id
+					if(str == 'zan'){
+
+					}else{
+						getCommentPage()
 					}
+				}).catch((res)=>{
+					imgData.loadingShow = false
+				}
+			)
+		}
+		
 		let setChoose = () =>{
-        	router.push({name:'homePage',params: {id:imgData.scaleImageList[imgData.scaleImageIndex].userLikeGroupSourceId,type:'Works'}})
+			if(imgData.scaleImageData.openSource == 0)return
+        	router.push({name:'homePage',params: {id:imgData.scaleImageData.userLikeGroupSourceId,type:'Works'}})
+		}
+		let setCommentReply = (value:any,str:any)=>{
+				imgData.commentReply.leve1Id = value.id
+				imgData.commentReply.leve2Id = null
+			if(str == 'son'){
+				imgData.commentReply.leve1Id = value.parentLevel1Id
+				imgData.commentReply.leve2Id = value.id
+			}
+			imgData.commentReply.name = value.userName
+			imgData.commentInput = `回复${imgData.commentReply.name}的评论`
+			commentInputFocus.value.focus()
+		}
+		let removeCommentReply = ()=>{
+			imgData.commentReply.leve1Id = null
+			imgData.commentReply.leve2Id = null
+			imgData.commentReply.name = ''
+			imgData.commentInput = '请输入评论内容'
+		}
+		let setComment = ()=>{
+			let data = {
+				"accountId": 0,
+				"comment": imgData.commentText,
+				"createTime": "",
+				"id": '',
+				"isDeleted": 0,
+				"parentLevel1Id": imgData.commentReply.leve1Id,
+				"parentLevel2Id": imgData.commentReply.leve2Id,
+				"portfolioId": imgData.scaleImageData.id,
+			}
+			Https.axiosPost(Https.httpUrls.portfolioComment, data)
+			.then((rv) => {
+				imgData.commentText = ''
+				getCommentPage()
+			})
+			.catch((rv) => {
+			});
+		}
+		let getCommentPage = ()=>{
+			let data = imgData.getCommentData
+			Https.axiosPost(Https.httpUrls.portfolioCommentPage,data).then(
+				(rv: any) => {
+					imgData.commentList = rv.content
+					imgData.commentList.forEach((item:any)=>{
+						item.createTimes = setPubDate(item.createTime)
+						if (item.childCommentVOList) {
+							item.childCommentVOList.forEach((obj:any)=>{
+								obj.createTimes = setPubDate(obj.createTime)
+							})
+						}
+					})
+				}
+				).catch((res)=>{
+				}
+			)
+		}
+		let setPortfolioLike = ()=>{
+			
+			let data = {id:imgData.scaleImageData.id}
+			let url 
+			if(imgData.scaleImageData.isLike == 1){
+				url = Https.httpUrls.portfolioNoLike
+			}else{
+				url = Https.httpUrls.portfolioLike
+			}
+			Https.axiosGet(url, {params:data})
+			.then((rv) => {
+				getDetail(getDeatilData,'zan')
+			})
+			.catch((rv) => {
+			});
 		}
 		watch(()=>imgData.scaleImageIndex,
 			(newVal,oldVal)=>{
 				let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
 				if(!dom) return
-				getDetail(imgData.scaleImageList[newVal])
 				let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
 				imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
 			}
@@ -284,6 +396,7 @@ export default defineComponent({
             scaleImage,
 			scaleImageMask,
 			...toRefs(imgData),
+			commentInputFocus,
 			textarea,
 			setCopy,
 			init,
@@ -292,6 +405,9 @@ export default defineComponent({
 			setScaleImageIndex,
 			LikeFile,
 			setChoose,
+			setCommentReply,
+			setComment,
+			setPortfolioLike,
         };
     },
 	directives:{
@@ -329,6 +445,7 @@ export default defineComponent({
 				
 			}
 		},
+
 	},
     data() {
         return {
@@ -339,26 +456,6 @@ export default defineComponent({
     mounted() {
     },
     methods: {
-		// init(list:any,index:any,dialogueIndex:any){
-			
-		// },
-		// cancelDsign(){
-		// 	this.scaleImage = false
-		// 	// this.scaleImageList = []
-		// 	// this.scaleImageIndex = 0
-		// },
-		// download(){
-		// 	// downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
-		// },
-		// setScaleImageIndex(index:any){
-		// 	// this.scaleImageIndex = index
-		// 	// console.log(this.scaleImageIndex);
-			
-		// },
-		// LikeFile(item:any,str:string){
-		// 	let parent:any = this.$parent
-		// 	parent.likeFile(item,str)
-		// },
     },
 });
 </script>
@@ -427,39 +524,54 @@ export default defineComponent({
 			width: 100%;
 			flex-wrap: wrap;
 			justify-content: space-between;
-			height: var(--content-height);
+			// height: var(--content-height);
+			height: 100%;
 			position: relative;
 			overflow: hidden;
+			overflow-y: auto;
+
 			.newScaleImage_content_right_img{
 				height: 100%;
-				width: auto;
+				width: 70%;
-				width: 60%;
+				margin-left: auto;
-				overflow-x: auto;
+				// width: 100%;
 				display: flex;
-				justify-content: center;
+				// justify-content: center;
+				justify-content: right;
+				overflow-y: auto;
+				&.newScaleImage_content_right_img::-webkit-scrollbar{display: none;}
+				>div{
+					width: 100%;
+					height: auto;
 					img{
-					width: auto;
+						// width: auto;
 						max-width: 100%;
 						height: 100%;
+						// height: 100%;
 						object-fit: contain;
+						width: 100%;
 						margin-right: 2rem;
 					}
 					img:last-child{
 						margin-right: 0;
 					}
 				}
+				
+			}
 			--count: 50;
 			--snap-size: 10rem;
 			--offset: 2;
 			.nav_centent{
-				width: auto;
+				// width: auto;
 				display: flex;
 				flex-direction: column;
 				position: absolute;
 				right: 0;
 				padding-top: calc(var(--content-height) / 2);
-				padding-left: 10rem;
+				// padding-left: 10rem;
 				transition: all .2s;
+				left: 0;
+				width: 30%;
 			}
 			.nav_centent_img{
 				max-width: calc(var(--snap-size) - 2rem);
@@ -481,17 +593,17 @@ export default defineComponent({
 				transition: all .1s;
 				&.active1{
 					// border: 4px solid rgb(148, 230, 255);
-					transform: scale(1.4) translateX(-30%);
+					transform: scale(1.4) translateX(30%);
 					z-index: 2;
 				}
 				&.active2{
 					// border: 4px solid rgb(216, 255, 172);
-					transform: scale(1.6) translateX(-60%);
+					transform: scale(1.6) translateX(60%);
 					z-index: 3;
 				}
 				&.active3{
 					// border: 4px solid rgb(148, 233, 183);
-					transform: scale(1.4) translateX(-30%);
+					transform: scale(1.4) translateX(30%);
 					z-index: 2;
 				}
 			}
@@ -527,12 +639,16 @@ export default defineComponent({
 				// }
 				.started_btn{
 					margin-bottom: var(--margin);
+					&.active{
+						cursor: no-drop;
+					}
 				}
 				.content_left_collection_detail{
 					height: calc(8rem + var(--padding) * 2);
 					display: flex;
-					align-items: center;
+					flex-direction: column;
-					justify-content: flex-start;
+					align-items: flex-start;
+					justify-content: center;
 					.scaleImage_chunk_title{
 						margin-right: 1rem;
 					}
@@ -611,6 +727,9 @@ export default defineComponent({
 			}
 			.detail_left_right_item_click{
 				cursor: pointer;
+				i{
+					color: #9e9ea7;
+				}
 			}
 			.detail_left_right_item:last-child{
 				margin-bottom: 0;
@@ -654,6 +773,16 @@ export default defineComponent({
 						flex: 1;
 						margin-left: 1rem;
 						width: calc(100% - 6rem - 1rem);
+						.replyIcon{
+							width: 0;
+							height: 0;
+							vertical-align: middle;
+							border: .5rem solid transparent;
+							border-left: 1rem solid #000;
+							border-right: none;
+							display: inline-block;
+							margin: 0 1rem;
+						}
 						>div{
 							margin-top: .4rem;
 							>span{
@@ -666,6 +795,7 @@ export default defineComponent({
 						.detail_left_content_item_btn{
 							display: flex;
 							align-items: center;
+							margin-top: 1rem;
 							.left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold{
 								cursor: pointer;
 							}
@@ -711,6 +841,7 @@ export default defineComponent({
 					border: .2rem solid var(--border-color);
 				}
 				.detail_left_setComment_btn{
+					cursor: pointer;
 					width: 4rem;
 					height: 4rem;
 					background: rgba(57, 33, 91);

src/component/WorksPage/publish.vue

@@ -29,35 +29,51 @@
 							<img v-lazy="selectDate.url" alt="">
 						</div>
 					</div>
-					<div class="publidh_left_thubnai publidh_content_item">
-						<div class="publidh_content_item_title">Select Cover Picture</div>
-						<div class="publidh_left_thubnail_list publish_content_item">
-							<img v-for="item in getPublishDate.groupDetails" :class="{selectActive:item.designOutfitId === subPublishDate.coverId}" v-lazy="item.url" @click="setCover(item)" alt="">
-						</div>
-					</div>
 				</div>
 				<div class="publidh_right">
 					<div class="publidh_right_name publidh_content_item">
-						<div class="publidh_content_item_title">Name</div>
+						<div class="publidh_content_item_title">Collection Title</div>
 						<input type="text" v-model="subPublishDate.portfolioName">
 					</div>
 					<div class="publidh_right_name publidh_content_item">
 						<div class="publidh_content_item_title">Description</div>
 						<textarea ref="textarea" v-model="subPublishDate.portfolioDes"></textarea>
 					</div>
+					<div class="publidh_right_detail publidh_content_item">
+						<div class="publidh_content_item_title">Permissions</div>
+						<!-- <div>
+							<a-checkbox @change="setPermissions" v-model:checked="setPermissionsAll">All.</a-checkbox>
+						</div> -->
+						<!-- <div>
+							<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isAllowLikes">Whether to allow likes.</a-checkbox>
+						</div> -->
+						<!-- <div>
+							<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isAllowComment">Allow comments or not.</a-checkbox>
+						</div>
+						<div>
+							<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isDisplayArea">Show locale or not.</a-checkbox>
+						</div> -->
+						<div>
+							<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isSecondaryCreation">Whether to allow other users to perform secondary creation.</a-checkbox>
+						</div>
+					</div>
 					<!-- <div class="publidh_right_name publidh_content_item">
 						<div class="publidh_content_item_title">Thumbnail preview</div>
 						<input type="text">
 					</div> -->
 					<div class="publidh_content_item publidh_right_zhuyi">
-						<div class="publidh_content_item_intro">
+						<!-- <div class="publidh_content_item_intro">
-							<span class="icon iconfont icon-zhuyi"></span>This will publish your work to the square for all users to see.
+							<label >
+								<span class="icon iconfont icon-zhuyi"></span>
+								<div>
+									This will publish your work to the square for all users to see.
 								</div>
+							</label>
+						</div> -->
 					</div>
 					<div class="publidh_right_btn">
-						<div class="started_btn" @click="setClose">Close</div>
+						<div class="started_btn" @click="cancelDsign">Close</div>
-						<div class="started_btn">Save as draft</div>
+						<div class="started_btn" @click="setPublish">{{beenPublished == 0?'Publish':'Updata Publish'}}</div>
-						<div class="started_btn" @click="setPublish">Publish</div>
 					</div>
 				</div>
 			</div>
@@ -76,26 +92,31 @@ import { getCookie,setCookie } from "@/tool/cookie";
 // import domTurnImg from '@/tool/domTurnImg'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Modal,message } from 'ant-design-vue';
-import { downloadIamge } from "@/tool/util";
+import { downloadIamge,base64ToFile } from "@/tool/util";
 
 export default defineComponent({
     setup() {
         let publish: any = ref(false);//弹窗
 		let publishMask:any = ref(false)//弹窗遮罩
 		let publishData:any = reactive({
-			publishName:'123123',
+			publishName:'',
 			loadingShow:false,
 			publishMarginTop:0,
+			beenPublished:0,//history回来时候表示是否已经发布0为没发布
 			publishList:[],
 			publishIndex:0,//当前图片索引
 			isShowMark:false,
+			setPermissionsAll:true,
 			selectDate:{
 				url:'',
 			},
-			getPublishDate:{
-			},
 			subPublishDate:{
 			},
+			selectPermissions:{
+				isAllowComment:true,
+				isDisplayArea:true,
+				isSecondaryCreation:true,
+			}
 		})
 		// let textarea: any = ref(null)
 		// let setCopy = ()=>{
@@ -103,56 +124,51 @@ export default defineComponent({
 		// 	document.execCommand("copy");
 		// }
 		let init = (data:any)=>{
+			publishData.beenPublished = data.beenPublished
 			let userInfo:any = getCookie("userInfo")
-			console.log(data);
+			// console.log(data);
-			publishData.getPublishDate = data
 			publish.value = true
-			publishData.selectDate.url = data.groupDetails[0].url
+			publishData.selectDate.url = data.imgUrl
 			publishData.subPublishDate = {
-				userLikeGroupId : data.id,
+				userLikeGroupId : data.userlikeGroupId,
-				coverId : data.groupDetails[0].designOutfitId,
+				// userLikeGroupId : data.id,
+				coverId : '',
+				// coverId : data.groupDetails[0].designOutfitId,
 				accountId : JSON.parse(userInfo).userId,
 				createDate:'',
 				idDeleted:'',
 				id:'',
 				portfolioDes:'',
-				portfolioName:data.name,
+				portfolioName:'',
 				portfolioType:'History',
 				status:'',
 				updateDate:'',
 				collectionId:'',
+				// isAllowLikes:true,
 			}
-			// publishData.publishList = list
-			// publishData.publishIndex = index
-			// let publishList = this.store.state.UploadFilesModule.moodboard
 		}
-		// let download = ()=>{
-		// 	downloadIamge(publishData.publishList[publishData.publishIndex].imgUrl)
-		// }
-		// let setScaleImageIndex = (index:any)=>{
-		// 	publishData.publishIndex = index
-		// }
-		// let LikeFile = (item:any,str:string)=>{
-		// 	const currentInstance = getCurrentInstance();
-		// 	let parent:any = currentInstance?.parent
-		// 	console.log(parent);
-			
-		// 	parent.likeFile(item,str)
-		// }
-	
-		// LikeFile(item:any,str:string){
-		// 	let parent:any = this.$parent
-		// 	parent.likeFile(item,str)
-		// },
 		let setCover = (item:any)=>{
 		    publishData.subPublishDate.coverId = item.designOutfitId
 			publishData.selectDate.url = item.url
 
 		}
+		let setPermissionsItem = ()=>{
+			// publishData.selectPermissions.isAllowLikes && 
+			if(publishData.selectPermissions.isAllowComment && publishData.selectPermissions.isDisplayArea && publishData.selectPermissions.isSecondaryCreation){
+				publishData.setPermissionsAll = true
+			}else{
+				publishData.setPermissionsAll = false
+			}
+		}
+		let setPermissions = ()=>{
+			// publishData.selectPermissions.isAllowLikes = publishData.setPermissionsAll;
+			publishData.selectPermissions.isAllowComment = publishData.setPermissionsAll
+			publishData.selectPermissions.isDisplayArea = publishData.setPermissionsAll
+			publishData.selectPermissions.isSecondaryCreation = publishData.setPermissionsAll
+		}
 		let cleardata = ()=>{
 		    publish.value = false
 			publishData.isShowMark = false
-			publishData.getPublishDate = {}
 			publishData.subPublishDate = {}
 		}
 		let cancelDsign = ()=>{
@@ -169,7 +185,12 @@ export default defineComponent({
             });
 		}
 		let setPublish= ()=>{
-			let _this = this
+			if(!publishData.subPublishDate.portfolioName){
+				return message.info('Please enter the name of your work')
+			}
+			// if(!publishData.subPublishDate.portfolioDes){
+			// 	return message.info('Please enter a description')
+			// }
 			Modal.confirm({
                 title: 'This will publish your work to the square for all users to see. Please confirm whether to publish?',
                 icon: createVNode(ExclamationCircleOutlined),
@@ -183,13 +204,24 @@ export default defineComponent({
             });
 		}
 		let subPublish = ()=>{
-			let data = publishData.subPublishDate
+			
+			let param = new FormData(); 
+			// let fill = dataURLtoFile(publishData.selectDate.url,'collection')
+			// let aa = new File([fill], 'collection' + ".jpg");
+
+			let file = base64ToFile(publishData.selectDate.url,'collection')
+			param.append('file',file)
+			publishData.subPublishDate.openSource = publishData.selectPermissions.isSecondaryCreation?1:0
+			param.append('data',JSON.stringify(publishData.subPublishDate))
+			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			// let data = publishData.subPublishDate
 			publishData.isShowMark = true
-			Https.axiosPost(Https.httpUrls.publish, data)
+			Https.axiosPost(Https.httpUrls.publish, param,config)
                 .then((rv) => {
 					console.log(rv);
 					cleardata()
 					publishData.isShowMark = false
+					message.success('Release success! You can find it in my work')
                 })
                 .catch((rv) => {
 					publishData.isShowMark = false
@@ -204,6 +236,8 @@ export default defineComponent({
 			// textarea,
 			// setCopy,
 			init,
+			setPermissionsItem,
+			setPermissions,
 			// download,
 			// setScaleImageIndex,
 			// LikeFile,
@@ -221,26 +255,6 @@ export default defineComponent({
     mounted() {
     },
     methods: {
-		// init(list:any,index:any,dialogueIndex:any){
-			
-		// },
-		// cancelDsign(){
-		// 	this.publish = false
-		// 	// this.publishList = []
-		// 	// this.publishIndex = 0
-		// },
-		// download(){
-		// 	// downloadIamge(this.publishList[this.publishIndex].imgUrl)
-		// },
-		// setScaleImageIndex(index:any){
-		// 	// this.publishIndex = index
-		// 	// console.log(this.publishIndex);
-			
-		// },
-		// LikeFile(item:any,str:string){
-		// 	let parent:any = this.$parent
-		// 	parent.likeFile(item,str)
-		// },
     },
 });
 </script>
@@ -262,6 +276,7 @@ export default defineComponent({
 		display: flex;
 		justify-content: space-between;
 		flex: 1;
+		height: calc(100% - 10rem);
 		.publidh_left,.publidh_right{
 			display: flex;
 			flex-direction: column;
@@ -306,14 +321,18 @@ export default defineComponent({
 		}
 		.publidh_left{
 			width: 45%;
-			
+			.publidh_content_item{
+				height: 100%;
+			}
 			.publish_content_shrink{
 				width: 100%;
+				height: calc(100% - 4rem);
 				img{
 					width: 100%;
-					height: 100%;
 					object-fit: contain;
-					max-height: 30rem;
+					// object-fit: cover;
+					// max-height: 30rem;
+					max-height: 100%;
 				}
 			}
 			.publidh_left_thubnai{
@@ -349,6 +368,13 @@ export default defineComponent({
 					margin-right: 1rem;
 				}
 			}
+			.publidh_right_detail{
+				display: flex;
+				flex-direction: column;
+				label{
+					display: flex;
+				}
+			}
 		}
 	
 	}

src/lang/cn.ts

@@ -55,13 +55,13 @@ export default {
 		Layer:'层级',
 		More:'更多',
 		insufficient:'您的积分余额不足，如需使用此功能，请点击左上角充值',
-		HDExport:'高清导出',
+		HDExport:'转高清',
 		Export:'导出',
 		SR:'请选择需要超分的图片',
 		requiresCredits:'执行超分的图片需要消耗{data}积分',
 		Scale:'倍率',
 		Cancel:'取消',
-		jsContent1:'画布内容没有保存是否离开页面',
+		jsContent1:'您是否已经保存画布内容，如果没有保存请点击保存后再关闭。',
 		jsContent2:'我们只支持对印花进行超分',
 		jsContent3:'您的积分小于一次超分',
 		jsContent4:'您的积分余额不足',
@@ -171,7 +171,7 @@ export default {
 		jsContent1:'你确定要删除选中图片吗？',
 		jsContent2:'你确定要删除选中图片吗？',
 		jsContent3:'您只能上传图片文件！',
-		jsContent4:'图片必须小于2MB',
+		jsContent4:'图片必须小于5MB',
 		jsContent5:'图片已经上传是否继续上传',
 		jsContent6:'输入的内容超过允许输入的最大长度',
 		jsContent7:'请输入内容~',
@@ -196,7 +196,7 @@ export default {
 		jsContent1:'删除成功',
 		jsContent2:'您确定要删除这个收藏吗？',
 		jsContent3:'修改成功',
-		jsContent4:'图片必须小于2MB',
+		jsContent4:'图片必须小于5MB',
 		jsContent5:'图片已经上传是否继续上传',
 		jsContent6:'输入的内容超过允许输入的最大长度',
 		jsContent7:'请输入内容~',
@@ -237,9 +237,9 @@ export default {
 	},
 	Upload:{
 		Delete:'删除',
-		Maximum2M:'您最多可以上传10张照片，每张照片不能超过2MB',
+		Maximum2M:'您最多可以上传10张照片，每张照片不能超过5MB',
 		jsContent1:'您只能上传图片文件！',
-		jsContent2:'图片必须小于2MB',
+		jsContent2:'图片必须小于5MB',
 		jsContent3:'上传失败',
 	},
 	SketchboardUpload:{
@@ -255,7 +255,7 @@ export default {
 		maximumLength:'输入的内容超过允许输入的最大长度',
 		jsContent1:"上传失败",
 		jsContent2:"您只能上传图片文件！",
-		jsContent3:'图片必须小于2MB',
+		jsContent3:'图片必须小于5MB',
 		jsContent4:"超过允许上传的最大图片数量",
 		jsContent5:"请选择一张图片",
 		jsContent6:"输入的内容超过允许输入的最大长度",
@@ -273,7 +273,7 @@ export default {
 		inputContent1:'生成图片的标题',
 		maximumLength:'输入的内容超过允许输入的最大长度',
 		jsContent1:"您只能上传图片文件！",
-		jsContent2:'图片必须小于2MB',
+		jsContent2:'图片必须小于5MB',
 		jsContent3:"超过允许上传的最大图片数量",
 		jsContent4:"请选择一张图片",
 		jsContent5:"输入的内容超过允许输入的最大长度",
@@ -291,7 +291,7 @@ export default {
 		jsContent1:"您的浏览器不支持",
 		jsContent2:"找不到这个TCX的颜色",
 		jsContent3:"您只能上传图片文件！",
-		jsContent4:'图片必须小于2MB',
+		jsContent4:'图片必须小于5MB',
 		jsContent5:"请输入正确的TCX值",
 	},
 	MoodboardUpload:{
@@ -307,7 +307,7 @@ export default {
 		jsContent1:'您最多可以选择8张图片',
 		jsContent2:"上传失败",
 		jsContent3:"您只能上传图片文件！",
-		jsContent4:'图片必须小于2MB',
+		jsContent4:'图片必须小于5MB',
 		jsContent5:'请点击布局进行随机排序',
 	},
 	Cropper:{
@@ -323,10 +323,10 @@ export default {
 	MarketingSketchUpload:{
 		Upload:'上传',
 		MyLibrary:'我的收藏',
-		maximumLength:'最多可以上传15张照片，每张照片不能超过2MB',
+		maximumLength:'最多可以上传15张照片，每张照片不能超过5MB',
 		jsContent1:'上传失败',
 		jsContent2:"您只能上传图片文件！",
-		jsContent3:'图片必须小于2MB',
+		jsContent3:'图片必须小于5MB',
 		jsContent5:'超过允许上传的最大图片数量',
 	},
 	layout:{
@@ -351,7 +351,7 @@ export default {
 		effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。',
 		Model:'模型',
 		jsContent1:"您只能上传图片文件！",
-		jsContent2:'图片必须小于2MB',
+		jsContent2:'图片必须小于5MB',
 		jsContent3:"请输入内容~",
 		jsContent4:'输入的内容超过允许输入的最大长度',
 		jsContent5:"请输入内容~",

src/lang/en.ts

@@ -62,7 +62,7 @@ export default {
 		requiresCredits:'Performing upscale image requires a {data} credits',
 		Scale:'Scale',
 		Cancel:'Cancel',
-		jsContent1:'Canvas edit content is not saved, whether to leave the page',
+		jsContent1:'Have you saved the canvas content? If not, please click "Save" first before closing.',
 		jsContent2:'We only provide super-resolution capabilities for printboard images.',
 		jsContent3:'Your points are less than one SR',
 		jsContent4:'Your points balance is insufficient',
@@ -172,7 +172,7 @@ export default {
 		jsContent1:'Are you sure to delete this picture?',
 		jsContent2:'Are you sure to delete this picture?',
 		jsContent3:'You can only upload Image file!',
-		jsContent4:'Image must smaller than 2MB!',
+		jsContent4:'Image must smaller than 5MB!',
 		jsContent5:'This picture has been uploaded whether to continue uploading？',
 		jsContent6:'The entered content exceeds the maximum length.',
 		jsContent7:'Please enter content',
@@ -197,7 +197,7 @@ export default {
 		jsContent1:'Deleted successfully',
 		jsContent2:'Do you really want to delete this collection? ',
 		jsContent3:'Change successfully',
-		jsContent4:'Image must smaller than 2MB!',
+		jsContent4:'Image must smaller than 5MB!',
 		jsContent5:'This picture has been uploaded whether to continue uploading？',
 		jsContent6:'The entered content exceeds the maximum length.',
 		jsContent7:'Please enter content',
@@ -240,7 +240,7 @@ export default {
 		Delete:'Delete',
 		Maximum2M:'Maximum 8 images can be uploaded, Maximum 2M per image',
 		jsContent1:'You can only upload Image file!',
-		jsContent2:'Image must smaller than 2MB!',
+		jsContent2:'Image must smaller than 5MB!',
 		jsContent3:'upload failed',
 	},
 	SketchboardUpload:{
@@ -256,7 +256,7 @@ export default {
 		maximumLength:'The entered content exceeds the maximum length.',
 		jsContent1:"upload failed",
 		jsContent2:"You can only upload Image file!",
-		jsContent3:'Image must smaller than 2MB!',
+		jsContent3:'Image must smaller than 5MB!',
 		jsContent4:"Maximum number of allowable file uploads has been exceeded",
 		jsContent5:"Please select a picture",
 		jsContent6:"The entered content exceeds the maximum length.",
@@ -274,7 +274,7 @@ export default {
 		inputContent1:'Input prompt',
 		maximumLength:'The entered content exceeds the maximum length.',
 		jsContent1:"You can only upload Image file!",
-		jsContent2:'Image must smaller than 2MB!',
+		jsContent2:'Image must smaller than 5MB!',
 		jsContent3:"Maximum number of allowable file uploads has been exceeded",
 		jsContent4:"Please select a picture",
 		jsContent5:"The entered content exceeds the maximum length.",
@@ -292,7 +292,7 @@ export default {
 		jsContent1:"Your browser does not support it",
 		jsContent2:"Can't find the TCX color",
 		jsContent3:"You can only upload Image file!",
-		jsContent4:'Image must smaller than 2MB!',
+		jsContent4:'Image must smaller than 5MB!',
 		jsContent5:"Please enter the correct TCX value",
 	},
 	MoodboardUpload:{
@@ -308,7 +308,7 @@ export default {
 		jsContent1:'You can select up to 8 images',
 		jsContent2:"upload failed",
 		jsContent3:"You can only upload Image file!",
-		jsContent4:'Image must smaller than 2MB!',
+		jsContent4:'Image must smaller than 5MB!',
 		jsContent5:'Please click Layout to sort randomly',
 	},
 	Cropper:{
@@ -327,7 +327,7 @@ export default {
 		maximumLength:'Maximum 15 images can be uploaded, Maximum 2M per image',
 		jsContent1:'upload failed',
 		jsContent2:"You can only upload Image file!",
-		jsContent3:'Image must smaller than 2MB!',
+		jsContent3:'Image must smaller than 5MB!',
 		jsContent5:'Maximum number of allowable file uploads has been exceeded',
 	},
 	layout:{
@@ -352,7 +352,7 @@ export default {
 		effectPoor:'The quality of the generated images currently falls below standard. Please consider adjusting your prompt and trying again.',
 		Model:'Model',
 		jsContent1:"You can only upload Image file!",
-		jsContent2:'Image must smaller than 2MB!',
+		jsContent2:'Image must smaller than 5MB!',
 		jsContent3:"Please enter content",
 		jsContent4:'The entered content exceeds the maximum length.',
 		jsContent5:"Please enter content",

src/router/index.ts

@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router'
 import { defineAsyncComponent } from 'vue'
 import { getBrowserInfo, murmur } from '@/tool/util'
+import { useStore } from "vuex";
+import store from "@/store"
 import { getCookie, setCookie } from "@/tool/cookie";
 const _import = (path: string) => defineAsyncComponent(() => import(`../views/${path}.vue`));
 const _import_component = (path : string) => defineAsyncComponent(() => import(`../component/${path}`));
@@ -22,6 +24,11 @@ const routes: Array<RouteRecordRaw> = [
 		name: 'login',
 		component: _import('LoginPage')
 	},
+	{
+		path: '/register',
+		name: 'register',
+		component: _import('RegisterPage')
+	},
 	{
 		path: '/upgrade',
 		name: 'upgrade',
@@ -137,6 +144,20 @@ const router = createRouter({
 	//   history: createWebHashHistory(),
 	routes
 })
+// 刷新保存数据-
+let state:any = store.state
+window.addEventListener("beforeunload", (e) => {
+	sessionStorage.setItem(
+		"vuex_setSystemUser",
+		JSON.stringify(state.UserHabit.systemUser.value)
+	);
+});
+var vuex_setSystemUser:any = sessionStorage.getItem("vuex_setSystemUser");
+if (vuex_setSystemUser == 0 || vuex_setSystemUser == 1) {
+	store.commit("setSystemUser", JSON.parse(vuex_setSystemUser));
+	sessionStorage.removeItem("vuex_setSystemUser");
+}
+
 router.beforeEach((to, from, next) => {
 	
 	// 	系统维护
@@ -156,6 +177,9 @@ router.beforeEach((to, from, next) => {
 	let isMurmur = JSON.parse(getIsMurmur)
     let routeList = ['/testClickData','/trialApproval']//指定页面需要指定id才能进入
     let userIdList = [88,6,46,31,73,83,87]
+    let isSystemUserRouteList = ['/login','/']//指定页面需要指定id才能进入
+
+	let systemUser = state.UserHabit.systemUser
 	const routeExists = router.getRoutes().some(({ name }) =>{
 		if(name){
 			return  name === to.name
@@ -163,6 +187,16 @@ router.beforeEach((to, from, next) => {
 			return false
 		}
 	});
+	console.log(systemUser);
+	
+	if(systemUser.value == 0){
+		if(isSystemUserRouteList.indexOf(to.path) > -1){
+			next();
+		}else{
+			next('/');
+		}
+		return
+	}
 	if (routeExists) {
 		if (isMurmur && murmurStr && token) {
 			const toName = to.name === 'login';

src/store/uploadFile/uploadFile.ts

@@ -182,6 +182,8 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         },
 		setPrintboardMaterialFiles(state,files){
 			state.printMaterialFiles = files
+			console.log(files);
+			
 			state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]	
         },
 

src/store/userHabit/userHabit.ts

@@ -13,6 +13,7 @@ interface UserHabit{
 	FemalePosition:any,
 	MalePosition:any,
 	Position:any,
+	systemUser:any,
 }
 
 const userHabit : Module<UserHabit,RootState> = {
@@ -35,6 +36,10 @@ const userHabit : Module<UserHabit,RootState> = {
 		FemalePosition:[],
 		MalePosition:[],
 		Position:[],
+		systemUser:{
+			value : 0
+		},
+
     },
     mutations:{
         res_clothingType(state,data){
@@ -62,6 +67,9 @@ const userHabit : Module<UserHabit,RootState> = {
 				state.Position = state.MalePosition
 			}
 		},
+		setSystemUser(state,data){
+			state.systemUser.value = data
+		},
     },
 
     actions:{

src/tool/GO.ts

@@ -42,7 +42,7 @@ export default {
 				}
 				ratio.push(rgb)
 				// console.log(ratio);
-				
+				img.remove()
 				// console.log((num/ (width * height) * 100).toFixed(2));
 			 }
 

src/tool/canvasDrawing.js

@@ -263,10 +263,37 @@ async function JSSetTexture(src,){
 			img.width = 200
 			img.height = 200
 			resolve()
+			img.remove()
 		}
 	})
 	return img
 }
+function JSSetRemoveImage(fun){
+	const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
+	// 创建删除图片元素
+	let deleteImg = document.createElement('img')
+	deleteImg.src = deleteIcon
+	function renderIcon(icon) {
+		return function (ctx, left, top, styleOverride, fabricObject) {
+			var size = this.cornerSize;
+			ctx.save();
+			ctx.translate(left, top);
+			ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+			ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
+			ctx.restore();
+		}
+	}
+	fabric.Object.prototype.controls.deleteControl = new fabric.Control({
+		x: 0.5,
+		y: -0.5,
+		offsetY: -16,
+		offsetX: 16,
+		cursorStyle: 'pointer',
+		mouseUpHandler:fun,
+		render: renderIcon(deleteImg),
+		cornerSize: 24
+	})
+}
 export { 
 	multiselectJS, 
 	JSRectUpdata, 
@@ -275,5 +302,6 @@ export {
 	JScanvasMouseMove,
 	JScreateCheck,
 	exportSele,
-	JSSetTexture 
+	JSSetTexture,
+	JSSetRemoveImage
 }

src/tool/color.js

@@ -30,6 +30,7 @@ let setColor = (rgba,url) =>{
 		resolve({
 			width,height,num
 		})
+		img.remove()
 	}
    })
 };

src/tool/domTurnImg.js

@@ -38,6 +38,8 @@ const getJpeg = dom =>{
 					// console.log(smallBase64);
 					// resolve(base64ToFile(fileOfBlob))
 					resolve(fileOfBlob)
+					newImage.remove()
+
 					}
 				})
 			}, 100);

src/tool/https.js

@@ -33,6 +33,8 @@ let httpIp = process.env.NODE_ENV == 'development' ? "" : "";
 // console.log(axios.defaults.baseURL);
 axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
 
+// 创建取消令牌
+let cancelList = []
 // console.log(process.env.VUE_APP_BASE_URL);
 //POST传参序列化(添加请求拦截器)
 axios.interceptors.request.use((config) => {
@@ -41,7 +43,9 @@ axios.interceptors.request.use((config) => {
         // config.data = qs.stringify(config.data);
         // config.data = JSON.stringify(config.data);
     }
-
+	// config['cancelToken'] = axios.CancelToken(function(c){
+	// 	cancel.push(c)
+	// })
     // config.headers.Authorization = 'Bearer-eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIyIiwic3ViIjoie1wiaWRcIjoyLFwidXNlcm5hbWVcIjpcImxpcnNcIn0iLCJpYXQiOjE2NjU3NDEwODcsImlzcyI6IkRXSiIsImF1dGhvcml0aWVzIjoiW10iLCJleHAiOjE2NzQzODEwODd9.ShM9R_NNFD7oo1OvxrEgg7PFeWinOuAKkuInUCMQupp66s64Hhv8tN0Wwr83nIN4rHPqtn95wmd4msWcvaFYJA'; 
     config.headers.Authorization = getCookie('token'); 
 
@@ -49,7 +53,7 @@ axios.interceptors.request.use((config) => {
 },(error) =>{
     return Promise.reject(error);
 });
-
+let isLoginTime = false
 //返回状态判断(添加响应拦截器)
 axios.interceptors.response.use((res) =>{
 	// if(res.data.data == null){
@@ -84,18 +88,39 @@ axios.interceptors.response.use((res) =>{
             return Promise.reject(res.data);
 		}
     }
+	removeCancelToken(res.config.cancelToken);
     
 }, function(error) {
     if(error?.response?.status === 401 && router.currentRoute._value.name != 'setIdentification'){//如果是记录浏览器页面就不跳转login
-        router.replace('/login')
+		if(!isLoginTime){
+			isLoginTime = true
+			router.replace('/')
+			message.warning('请登陆后重试~')
+			cancelAllRequests()
 			clonAllCookie()
+			setTimeout(()=>[
+				isLoginTime = false
+			],2000)
+		}
+       
         return Promise.reject()
     }
     let data_new = error?.response?.data
     // message.error(data_new?.errMsg || 'Error: server exception')
     return Promise.reject(data_new);
-    
 });
+function removeCancelToken(cancelTokenToRemove) {
+    const index = cancelList.findIndex(source => source.token === cancelTokenToRemove);
+    if (index !== -1) {
+        cancelList.splice(index, 1);
+    }
+}
+function cancelAllRequests() {
+    // cancelList.forEach(source => {
+	// 	console.log(123123,source);
+    //     source('123');
+    // });
+}
 export const Https = {
     httpUrls: {
         interfaceUrl: '',
@@ -120,6 +145,9 @@ export const Https = {
         endpoint:`api/third/party/your-secured-endpoint`, //获取唯一标识是否存在
 		
 
+		designWorksRegister:'/api/account/designWorksRegister', //注册
+		designWorksRegisterCode:'/api/account/designWorksRegisterCode', //注册
+		
 
         preLogin:'/api/account/preLogin',//预先登入
         accountSendEmail:`/api/account/sendEmail`, //发送邮件
@@ -225,12 +253,33 @@ export const Https = {
 		getPorfolio:`/api/portfolio/page`,//查询作品广场
 		getPorfolioDetail:`/api/portfolio/detail`,//查询作品广场作品详情
 		setPorfolioChoose:`/api/portfolio/choose`,//二次创作
+		portfolioLike:`/api/portfolio/like`,//作品广场点赞
+		portfolioNoLike:`/api/portfolio/unlike`,//作品广场取消点赞
+		portfolioComment:`/api/portfolio/comment`,//作品广场评论
+		portfolioCommentPage:`/api/portfolio/commentPage`,//作品广场评论列表
 
+		//product生成
+		toProduct:`/api/history/toProduct`,//开始生成
+		toProductImageResult:`/api/history/toProductImageResult`,//获取结果
+		toProductImageElementUpload:`/api/history/toProductImageElementUpload`,//上传
+		productImageLike:`/api/history/productImageLike`,//like生成结果
+		productImageUnLike:`/api/history/productImageUnLike`,//取消like生成结果
+		productImageLikeList:`/api/history/productImageLikeList`,//like生成结果
+		
+
+		//保存画布
+		canvasElementUpload:`/api/history/canvasElementUpload`,//画布上传临时图片
+		exportSave:`/api/history/exportSave`,//保存画布
+		exportSearch:`/api/history/exportSearch`,//保存画布
 
     },
 
     axiosGet(url,config) {
         return new Promise((resolve, reject) => {
+			if(isLoginTime) {
+				resolve('')
+				return
+			}
             axios.get(url,config).then(response => {
                     resolve(response)
                 }).catch((error) => {
@@ -241,6 +290,10 @@ export const Https = {
 
     axiosPut(url, data) {
         return new Promise((resolve, reject) => {
+			if(isLoginTime) {
+				resolve('')
+				return
+			}
             axios.put(url, data).then(response => {
                     resolve(response)
                 }).catch((error) => {
@@ -251,6 +304,10 @@ export const Https = {
 
     axiosPost(url, data,config) {
         return new Promise((resolve, reject) => {
+			if(isLoginTime) {
+				resolve('')
+				return
+			}
             axios.post(url, data,config).then(response => {
                     resolve(response)
                 }).catch((error) => {
@@ -261,6 +318,10 @@ export const Https = {
 
     axiosDelete(url, newData) {
         return new Promise((resolve, reject) => {
+			if(isLoginTime) {
+				resolve('')
+				return
+			}
             axios.delete(url,{data:newData}).then(response => {
                     resolve(response)
                 }).catch((error) => {

src/tool/util.js

@@ -12,6 +12,20 @@ const getUploadUrl = () => {
 	return url
 }
 
+function base64ToFile(urlData,name) {
+	let arr = urlData.split(',');
+	let mime = arr[0].match(/:(.*?);/)[1];
+	let bstr = atob(arr[1]);
+	let n = bstr.length;
+	let u8arr = new Uint8Array(n);
+	while (n--) {
+		u8arr[n] = bstr.charCodeAt(n);
+	}
+	return new File([u8arr], name, {
+		type: mime
+	});
+}
+
 function dataURLtoBlob(dataurl) {//吧data url转为blob对象
 	var arr = dataurl.split(',');
 	var mime = arr[0].match(/:(.*?);/)[1];
@@ -47,6 +61,7 @@ function downloadIamge(imgsrc, name) { // 下载图片地址和图片名
 		a.href = url // 将生成的URL设置为a.href属性
 		a.target = '_blank'
 		a.dispatchEvent(event) // 触发a的单击事件
+		image.remove()
 	}
 	image.src = imgsrc
 }
@@ -164,6 +179,36 @@ const isMoible = () => {//判断是否是移动端
 	}
 }
 
+let setPubDate = (date)=>{
+	const timestamp = new Date(date);
+	const now = new Date();
+	// 计算时间差（以毫秒为单位）
+	const differenceMs = now - timestamp;
+	const seconds = Math.floor(differenceMs / 1000);
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+	const weeks = Math.floor(days / 7);
+	const months = Math.floor(days / 30);
+	const years = Math.floor(days / 365);
+	
+	// 根据时间差的大小返回不同的描述
+	if (years > 0) {
+		return `${years} 年前`;
+	} else if (months > 0) {
+		return `${months} 个月前`;
+	} else if (weeks > 0) {
+		return `${weeks} 周前`;
+	} else if (days > 0) {
+		return `一天前`;
+	} else if (hours > 0) {
+		return `${hours} 小时前`;
+	} else if (minutes > 0) {
+		return `${minutes} 分钟前`;
+	} else {
+		return `1 分钟前`;
+	}
+}
 
 function getBrowserInfo() {//获取是什么浏览器
 	var agent = navigator.userAgent.toLowerCase();
@@ -386,6 +431,7 @@ const setGradual = (colorObj,colorWidth,colorHeight)=>{
 export {
 	isEmail,
 	getUploadUrl,
+	base64ToFile,
 	dataURLtoFile,
 	blobToFile,
 	base64toFile,
@@ -395,6 +441,8 @@ export {
 	isMoible,
 	downloadIamge,
 	getBrowserInfo,
+	setPubDate,
 	murmur,
 	setGradual,
+	calculateGradientCoordinate,
 }

src/views/HomeMain.vue

@@ -75,13 +75,13 @@
 					<i class="fi fi-rs-notebook"></i>
 					<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
 				</div>
-				<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(userInfo.userId) >= 0"  :to="`/administrator`">
+				<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(userInfo?.userId) >= 0"  :to="`/administrator`">
 					<span class="icon iconfont icon-yonghu"></span>
 					<span class="select_item_des">Administrator</span>
 				</router-link>
 				<div class="select_item" @click="logout()">
-					<span class="icon iconfont icon-tuichu"></span
+					<span class="icon iconfont icon-tuichu"></span>
-					><span class="select_item_des">{{$t('Header.logOff')}}</span>
+					<span class="select_item_des">{{$t('Header.logOff')}}</span>
 				</div>
 				
 			</nav>
@@ -197,7 +197,7 @@ export default defineComponent({
         this.isMurmur =JSON.parse(isMurmur)
         this.userInfo = JSON.parse(getCookie("userInfo"));
         if (!this.userInfo) {
-            this.$router.replace("/login");
+            this.$router.replace("/");
         } else {
             this.accountIsLogin(this.userInfo);
         }
@@ -288,7 +288,7 @@ export default defineComponent({
 			if(JSON.parse(isTest)){
 				await Https.axiosGet(Https.httpUrls.trialUserLogout,).then((rv) => {
 					Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
-						this.$router.replace("/login");
+						this.$router.replace("/");
 						// WriteCookie("token");
 					});
 				})
@@ -296,7 +296,7 @@ export default defineComponent({
 				await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
 					// WriteCookie("token");
 				});
-				this.$router.replace("/login");
+				this.$router.replace("/");
 			}
 			// WriteCookie("token");
 			// window.location.reload()
@@ -309,7 +309,7 @@ export default defineComponent({
             };
             Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) => {
                 if (!rv) {
-                    this.$router.replace("/login");
+                    this.$router.replace("/");
                 }
             });
         },
@@ -587,6 +587,7 @@ export default defineComponent({
 	box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
 	overflow: hidden;
 	border: 1px solid #000000;
+	height: auto;
 	&.select_list{
 		// display: none;
 		transform: translateX(105%);

src/views/HomeRecommend.vue

@@ -12,17 +12,18 @@
             </div>
 			<div class="homeRecommend_right">
 				<div class="started_btn" @click="setLogin">登录</div>
-				<div class="started_btn started_btn2">注册</div>
+				<div class="started_btn started_btn2" @click="setRegister">注册</div>
 			</div>
+
         </header>
 		<div class="homeRecommend_content_body">
 			<div class="homeRecommend_content_body_recommend" id="aaaa">
 				<div class="content_body_recommend_left">
-					<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img1 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
-					<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img2 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
-					<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img3 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
-					<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img4 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
-					<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img5 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
 				</div>
 				<div class="content_body_recommend_center content_body_text">
 					<div class="content_body_recommend_center_title">
@@ -34,11 +35,11 @@
 					</div>
 				</div>
 				<div class="content_body_recommend_right">
-					<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img1 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
-					<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img2 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
-					<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img3 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
-					<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img4 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
-					<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img5 content_body_img" src="https://img2.baidu.com/it/u=1061364893,2453516073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
 				</div>
 			</div>
 			<Works :isScroll="false"></Works>
@@ -50,7 +51,7 @@
 	
 </template>
 <script >
-import { defineComponent, createVNode, ref , nextTick } from "vue";
+import { defineComponent, createVNode, ref , nextTick,computed } from "vue";
 import { isEmail } from "@/tool/util";
 import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
@@ -74,9 +75,15 @@ export default defineComponent({
 	setup(){
         const store = useStore();
 		const router = useRouter();
+		let systemUser = computed(()=>{
+			return store.state.UserHabit.systemUser
+		})
 		let setLogin = ()=>{
 			router.push("/login");
 		}
+		let setRegister = () =>{
+			router.push("/register");
+		}
 		let setAdminUp = ()=>{
 			let scrollDom = document.querySelector('.homeRecommend_content_body')
 			scrollDom.scrollTo({
@@ -85,7 +92,9 @@ export default defineComponent({
 			});
 		}
 		return {
+			systemUser,
 			setLogin,
+			setRegister,
 			setAdminUp,
 		}
 	},
@@ -260,26 +269,36 @@ export default defineComponent({
 			right: 0;
 			.content_body_img1{
 				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
 				top: 10rem;
 				right: calc(20rem + var(--margin));
 			}
 			.content_body_img2{
 				width: 15rem;
+				height: 15rem;
+				object-fit: cover;
 				top: calc(30rem + var(--margin));
 				right: calc(20rem + var(--margin));
 			}
 			.content_body_img3{
 				top: 38rem;
 				width: 30rem;
+				height: 30rem;
+				object-fit: cover;
 				right: calc(-13rem + var(--margin));
 			}
 			.content_body_img4{
 				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
 				top: 51rem;
 				right: calc(20rem + var(--margin));
 			}
 			.content_body_img5{
 				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
 				top: 15rem;
 				right: 0;
 			}
@@ -288,31 +307,43 @@ export default defineComponent({
 			left: 0;
 			.content_body_img1{
 				width: 15rem;
+				height: 15rem;
+				object-fit: cover;
 				top: 5rem;
 				left: calc(20rem + var(--margin));
 			}
 			.content_body_img2{
 				width: 25rem;
+				height: 25rem;
+				object-fit: cover;
 				top: calc(20rem + var(--margin));
 				left: calc(20rem + var(--margin));
 			}
 			.content_body_img3{
 				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
 				top: calc(10rem + var(--margin));
 				left: calc(0 + var(--margin));
 			}
 			.content_body_img4{
 				width: 30rem;
+				height: 30rem;
+				object-fit: cover;
 				top: 36rem;
 				left: calc(-13rem + var(--margin));
 			}
 			.content_body_img5{
 				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
 				top: 51rem;
 				left: calc(20rem + var(--margin));
 			}
 			.content_body_img6{
 				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
 				top: 20rem;
 				left: calc(0 + var(--margin));
 			}

src/views/HomeView/HomeView.vue

@@ -269,6 +269,7 @@ export default defineComponent({
 		let userGroupId: any = computed(() => {
 			return store.state.HomeStoreModule.userGroupId;
 		}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
+		let beenPublished = null
 		let designCollectionId: any = computed(() => {
 			return store.state.HomeStoreModule.designCollectionId;
 		});
@@ -330,6 +331,7 @@ export default defineComponent({
 			likeDesignCollectionList,
 			designCollectionList,
 			userGroupId,
+			beenPublished,
 			designCollectionId,
 			designId,
 			contentImgMax,
@@ -808,6 +810,7 @@ export default defineComponent({
 				let data: any = {
 					id: v.resData.id,
 					designType: v.resData.designType,
+					level2Type: v.category,
 					isPin: v.pin ? 1 : 0,
 				};
 				return data;
@@ -912,11 +915,13 @@ export default defineComponent({
 
 		//获取选择的组
 		getHistoryChoose(userGroupId: any, type: any) {
+			
 			this.isShowMark = true;
 			let url =
 				Https.httpUrls.historyChoose + `?userGroupId=${userGroupId}`;
 			Https.axiosGet(url)
 				.then((rv: any) => {
+					this.beenPublished = rv.beenPublished
 					this.store.commit("setUserGroupId", rv.userGroupId);
 					this.dealHistoryChooseData(rv, type);
 					this.isShowMark = false;
@@ -954,6 +959,8 @@ export default defineComponent({
 		},
 		//处理选择组的数据
 		dealHistoryChooseData(data: any, type: any) {
+			console.log(data);
+			
 			let collectionData = {
 				disposeMoodboard: data.collection.moodTemplateId?[{
 					id:data.collection.moodTemplateId,
@@ -980,6 +987,8 @@ export default defineComponent({
 				),
 				
 			};
+			console.log(collectionData);
+			
 			// console.log(data);
 			this.store.commit("setAllBoardDataChoose", collectionData);
 			// this.store.commit('clearShowSketchboard')
@@ -1027,9 +1036,11 @@ export default defineComponent({
 				if (v.level1Type === "Sketchboard") {
 					newData.pin = v.isPin;
 					newData.category = v.level2Type;
+					newData.level2Type = v.level2Type;
 				}
 				if (v.level1Type === "Printboard") {
 					newData.pin = v.isPin;
+					newData.level2Type = v.level2Type;
 				}
 				return newData;
 			});
@@ -1078,7 +1089,7 @@ export default defineComponent({
 			
 			let productImg:any = this.$refs.productImg
 			productImg.productImgMask = true
-			productImg.init()			
+			productImg.init(this.userGroupId,this.beenPublished)			
 		},
 
 		//打开图片详情

src/views/HomeView/Works.vue

@@ -4,16 +4,16 @@
 			<div>Works</div>
 		</div> -->
 		<div class="modal_title_text modal_search">
-			<div v-for="item in worksType" :key="item" v-show="isScroll?true:(item.value != 'myWorks')" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
+			<div v-for="item in worksType" :key="item" v-show="isScroll?true:(item.value != 'myWorks' && item.value !='favoriteWorks')" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
 				{{ item.name }}
 			</div>
-			<div class="modal_search_menu">
+			<!-- <div class="modal_search_menu">
 				<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
-			</div>
+			</div> -->
 		</div>
         <div class="page_content" >
-			<Falls ref="fall" @loadend="isShowMark = false" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
+			<Falls ref="fall" @loadend="isShowMark = false"  @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
-			<div class="page_loading_box">
+			<div class="page_loading_box" v-show="!isNoData">
 				<span class="page_loading" v-show="!isShowMark"></span>
 				<span v-show="isShowMark">
 					<a-spin size="large" />
@@ -64,13 +64,17 @@ export default defineComponent({
 					name: '全部',
 					value: 'all'
 				},
+				// {
+				// 	name: 'generate',
+				// 	value: 'generate'
+				// },
+				// {
+				// 	name: 'freehand sketching',
+				// 	value: 'freehandSketching'
+				// },
 				{
-					name: 'generate',
+					name: 'Favorite Works',
-					value: 'generate'
+					value: 'favoriteWorks'
-				},
-				{
-					name: 'freehand sketching',
-					value: 'freehandSketching'
 				},
 				{
 					name: 'My Works',
@@ -194,6 +198,8 @@ export default defineComponent({
 				}
 			],
 			getListDate:{
+				"getLikePortfolio": 0,
+				"getMyPortfolio": 0,
 				page:1,
 				size:10,
 			},
@@ -229,6 +235,19 @@ export default defineComponent({
 		let fall:any = ref()
 		let setWorksSelect = (val:any) => {
 			filter.worksSelect = val.value
+			if(val.value == 'all'){
+				filter.getListDate.getLikePortfolio = 0
+				filter.getListDate.getMyPortfolio = 0
+			}else if(val.value == 'favoriteWorks'){
+				filter.getListDate.getLikePortfolio = 1
+				filter.getListDate.getMyPortfolio = 0
+			}else if(val.value == 'myWorks'){
+				filter.getListDate.getMyPortfolio = 1
+				filter.getListDate.getLikePortfolio = 0
+			}
+			filter.getListDate.page = 0
+			fall.value.clearData()
+			getPorfolio()
 		}
 		let likeFile = (item:any,type:string) => {
 		}
@@ -237,24 +256,41 @@ export default defineComponent({
 			newScaleImage.value.init(item)
 		}
 		let getPorfolio = ()=>{
-			// let data = filter.getListDate
+			let data = filter.getListDate
-			// Https.axiosPost(Https.httpUrls.getPorfolio, data)
+			console.log(123123);
-            //     .then((rv) => {
+			
-			// 		console.log(rv);
-			// 		filter.worksList = rv.content
-            //     })
-            //     .catch((rv) => {});
 			if(filter.isShowMark && !filter.isNoData)return
 			filter.isShowMark = true
-			setTimeout(() => {
+			Https.axiosPost(Https.httpUrls.getPorfolio, data)
+                .then((rv) => {
+					if (rv.content.length > 0) {
 						filter.isShowMark = false
-				fall.value.push(filter.worksList);
+						fall.value.push(rv.content);
-			}, 1000);
+					} else {
+						filter.isNoData = true
+					}
+					// filter.worksList = rv.content
+                })
+                .catch((rv) => {});
+
+			// setTimeout(() => {
+			// 	filter.isShowMark = false
+			// 	fall.value.push(filter.worksList)
+			// }, 1000);
 		}
 		let {t} = useI18n()
 		let setprintModel= (data:any)=>{
 			selectMenu.value = data
 		}
+		let setPortfolioLike = (value:any) =>{
+			// let data = {id:value.id}
+			// Https.axiosGet(Https.httpUrls.portfolioLike, {params:data})
+			// .then((rv) => {
+				
+			// })
+			// .catch((rv) => {
+			// });
+		}
 		onMounted (()=>{
 			getPorfolio()
 			let worksPage:any = document.querySelector('.works_page')
@@ -264,6 +300,7 @@ export default defineComponent({
 					// 如果不是相交，则直接返回
 					// console.log(entries[0]);
 					if (!entries[0].intersectionRatio) return;
+					filter.getListDate.page += 1
 					getPorfolio()
 				},
 				// { root:worksPage }
@@ -280,6 +317,7 @@ export default defineComponent({
 			getImgScale,
 			t,
 			setprintModel,
+			setPortfolioLike,
         }
     },
 	data() {
@@ -365,10 +403,11 @@ export default defineComponent({
 		background: #f7f8fa;
 		.page_loading_box{
 			text-align: center;
+			height: 50px;
 			.page_loading{
 				display: block;
-				width: 20px;
+				width: 50px;
-				height: 20px;
+				height: 50px;
 			}
 		}
     }

src/views/HomeView/history.vue

@@ -69,8 +69,8 @@
 									<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
 									<div class="operate_item" @click="renameCollection(record,index)">{{ $t('LibraryPage.Rename') }}</div>
 									<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
-									<div class="operate_item" @click="setPublish(record)">Publish</div>
+									<!-- <div class="operate_item" @click="setPublish(record)">Publish</div> -->
-									<div class="operate_item" @click="updatePublish(record)">Update Publish</div>
+									<!-- <div class="operate_item" @click="updatePublish(record)">Update Publish</div> -->
 									<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
 								</div>
 							</template>

src/views/HomeView/library.vue

@@ -33,7 +33,7 @@
                                 <div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
 									<div>{{ $t('LibraryPage.Organize') }}</div>
                                 </div>
-							   <div v-show="selectCode != 'Models'" class='header_operate_item pointer'  :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
+							   <div v-show="selectCode != 'Models' &&  selectCode != 'DesignElements'" class='header_operate_item pointer'  :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
                             </div>
 
                             <div class="librart_headr_right">
@@ -70,7 +70,7 @@
 									<a-select
                                         ref="select"
 										v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
-                                        v-model:value="designType.value"
+                                        v-model:value="designType"
                                         :options="designTypeList[selectCode]"
                                         @change="handleChange"
 										:fieldNames="{ label: 'name', value: 'value' }"
@@ -88,7 +88,11 @@
 
                         <div class="libray_right_content">
                             <div class="right_content_body" v-show="uploadGenerate =='Upload'">
-                                <div class="content_body_header">
+								<div class="content_body_header" v-show="selectCode == 'DesignElements'">
+									<div style="font-size:1.5rem;">All default materials are generated by AiDA ourselves</div>
+								</div>
+                                <!-- <div class="content_body_header"> -->
+                                <div class="content_body_header" v-show="selectCode != 'DesignElements'">
 									<div class="content_body_header_left">
 										<div class="content_body_header_right">
 											<div :class="['header_operate_item' , 'fontSize','active']">
@@ -151,7 +155,7 @@
                                     <div class="content_img_item" v-for="(img,index) in imgList" :key="img.id" @click="selectImgItem(img)" :draggable="true">
                                         <div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
                                             <img v-lazy="img.url" :key="img.url" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']"/>
-                                            <div class="img_item_hover">
+                                            <div class="img_item_hover" v-show="selectCode != 'DesignElements'">
                                                 <div class="img_operate_content">
                                                     <div class="img_operate_block" :title="t('LibraryPage.Point')" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
                                                         <span class="icon iconfont icon-dianwei operate_icon"></span>
@@ -187,7 +191,7 @@
 							<div class="right_content_body" v-show="uploadGenerate !='Upload'">
 								<div class="content_body_header content_body_header_generate">
 									<div class="content_body_header_right"></div>
-									<div v-show="selectCode == 'Printboard'" class="printModel">
+									<div v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" class="printModel">
 										<div @click.stop="PrintModel">{{ printModel.name }}</div>
 										<ul v-show="printModel.optype">
 											<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
@@ -198,7 +202,7 @@
 									<div class="input_border">
 										<div class="input_box" :class="{active:inputShow}">
 											<div class="input_box_btnBox">
-												<div class="upload_item">
+												<div class="upload_item" v-show="selectCode !== 'Moodboard' && (scene?.value == 'Pattern' || scene?.value == 'Slogan')">
 													<div
 														class="upload_file_item"
 														v-for="(file, index) in selectGenerateList"
@@ -221,6 +225,8 @@
 														</div>
 													</div>
 												</div>
+												<input class="search_seed" v-show="selectCode == 'Printboard' && scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
+
 												<input 
 													class="search_input " 
 													@input="ifMaximumLength" 
@@ -248,7 +254,7 @@
 													>
 													</a-upload>
 												</i>
-												<i v-show="scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
+												<i v-show="selectCode == 'Printboard' && scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
 												<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
 												<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
 											</div>
@@ -324,6 +330,8 @@
         <ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
         <ModelPlacementMobile ref="ModelPlacementMobile" @submitModelPlacement="getLibraryList"></ModelPlacementMobile>
 		<setLabel ref="setLabel"></setLabel>
+		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
+
         <!-- 蒙层 start-->
         <div class="mark_loading" v-show="isShowMark">
             <a-spin size="large" />
@@ -356,6 +364,7 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 import { useI18n } from "vue-i18n";
 import { ElCascader } from 'element-plus'
 import { remove } from "jszip";
+import createSlogan from "@/component/HomePage/createSlogan.vue";
 export default defineComponent({
     components: {
         // HeaderComponent,
@@ -367,6 +376,7 @@ export default defineComponent({
 		ElCascader,
 		scaleImage,
 		sketchCategory,
+		createSlogan,
     },
     setup() {
         const store = useStore();
@@ -377,7 +387,7 @@ export default defineComponent({
 				// {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
 				{title:useI18n().t('LibraryPage.Sketches'),code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
 				// {title:'Market Sketch',code:'Elements',icon:'icon-fuwushichang',showChildren:false,children:[]},
-				{title:'Design Elements',code:'DesignElements',icon:'fi fi-rs-people',showChildren:false,children:[]},
+				{title:'Design Elements',code:'DesignElements',icon:'fi fi-ss-puzzle-piece',showChildren:false,children:[]},
 				{title:useI18n().t('LibraryPage.Mannequins'),code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
 
 			]
@@ -385,6 +395,7 @@ export default defineComponent({
         let selectImgList:any = ref([])
         let selectCode:any = ref('Moodboard')
         let searchPictureName = ref('')
+        let searchPictureSeed:any = ref(0);
         let designType:any = ref({
 			name:'',
 			value:''
@@ -500,6 +511,7 @@ export default defineComponent({
             selectImgList,
             selectCode,
             searchPictureName,
+			searchPictureSeed,
 			sexList,
 			sex,
 			designTypeList,
@@ -612,7 +624,7 @@ export default defineComponent({
 			// 	params = 'MalePosition'
 			// }
 			this.store.commit('setPosition',this.sex.value)
-			this.designType = this.designTypeList.Sketchboard[0]
+			this.designType = this.designTypeList.Sketchboard[0].value
 
 			// await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
 			// 	if (rv) {
@@ -632,8 +644,10 @@ export default defineComponent({
 		},
 		likeFile(item:any,str:string){
 			let designType = ''
+			console.log(this.designType);
+			
 			if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
-				designType = this.designType.value
+				designType = this.designType
 			}
 			if(str == 'like'){
 				let data = {
@@ -676,15 +690,12 @@ export default defineComponent({
 					this.isTextarea = false
 					this.value.labelValue = []
 					if(this.designTypeList[this.selectCode].length >= 1){
-						this.designType = this.designTypeList[this.selectCode][0]
+						this.designType = this.designTypeList[this.selectCode][0].value
 					}else{
-						this.designType = {
+						this.designType = ''
-							name:'',
-							value:'',
-						}
 					}
+					if(this.selectCode == 'DesignElements')this.uploadGenerate = 'Upload'
 					if(this.selectCode == 'Models')this.uploadGenerate = 'Upload'
-					if(this.selectCode == 'Printboard')this.uploadGenerate = 'Upload'
 					if(this.selectCode != 'DesignElements'){
 						this.getClass()
 					}
@@ -699,10 +710,14 @@ export default defineComponent({
 
 		async sexChange(){
 			await this.getPosition()
+			if(this.uploadGenerate == 'Generate')return
             this.currentPage = 1
             this.getLibraryList('')
 		},
         handleChange(){
+			this.scene = this.designTypeList[this.selectCode].filter((item:any)=>item.value == this.designType)[0]
+			this.selectGenerateList = []
+			if(this.uploadGenerate == 'Generate')return
             this.currentPage = 1
             this.getLibraryList('')
         },
@@ -746,6 +761,7 @@ export default defineComponent({
 
         //选择图片
         selectImgItem(imgData:any){
+			if(imgData.level2Type == "DesignElements")return
             if(this.selectImgList.indexOf(imgData.id) === -1){
                 this.selectImgList.push(imgData.id)
             }else{
@@ -772,6 +788,11 @@ export default defineComponent({
 
 		},
 		uploadGenerateOpen(str:any){
+			// if(str == 'Generate'){
+			// 	if(this.selectCode == 'Printboard'){
+			// 		this.scene = this.designTypeList[this.selectCode][0]
+			// 	}
+			// }
 			if(this.uploadGenerate == 'Generate'){
 				if(str != 'Generate'){
                     this.getLibraryList('')
@@ -902,7 +923,7 @@ export default defineComponent({
             if (!isJpgOrPng) {
                 message.info(this.t('LibraryPage.jsContent3'));
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.info(this.t('LibraryPage.jsContent4'));
             }
@@ -926,7 +947,7 @@ export default defineComponent({
 			// }
 			let designType = ''
 			if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
-				designType = this.designType.value
+				designType = this.designType
 			}
             let new_data = {
                 file:event.file,
@@ -997,7 +1018,7 @@ export default defineComponent({
 			})
             let designType = ''
 			if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
-				designType = this.designType.value
+				designType = this.designType
 			}
             let data = {
 				classificationIdList:labelArr,
@@ -1057,6 +1078,11 @@ export default defineComponent({
 			}
 			this.captionGeneration += str + value
 		},
+		ifSeedValue(e:any){
+			if(this.searchPictureSeed == ''){
+				this.searchPictureSeed = 0
+			}
+		},
 		ifMaximumLength(){
 			clearTimeout(this.inputTime)
 			this.inputTime = setTimeout(()=>{
@@ -1068,6 +1094,13 @@ export default defineComponent({
 				}
 			},500)
 		},
+		setSlogan(){
+			let createSlogan:any = this.$refs.createSlogan
+			createSlogan.init()
+		},
+		setSloganData(data:any){
+			this.selectGenerateList = data
+		},
 		inputFocus(){
 			if(this.isInputFocus) return
 		    this.isInputFocus = true
@@ -1147,11 +1180,12 @@ export default defineComponent({
 		},
 		getgenerate(){
 			let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
-			clearInterval(this.remGenerateTime[selectCodeStr])
-			this.remGenerate[selectCodeStr] = false
 			if(this.isGenerate[selectCodeStr]){
 				return
 			}
+			clearInterval(this.remGenerateTime[selectCodeStr])
+			this.remGenerate[selectCodeStr] = false
+			
 			let level2Type = ''
 			let collectionElementId = ''
 			let base64 = ''
@@ -1162,6 +1196,8 @@ export default defineComponent({
 					base64 = this.selectGenerateList[0].imgUrl
 				}
 			}
+			console.log(this.scene);
+			
 			if(this.selectCode == "Sketchboard"){
 				console.log(this.selectGenerateList);
 			}else if(this.selectCode == "Printboard"){
@@ -1177,13 +1213,17 @@ export default defineComponent({
 				userId:(this?.userInfo as any).userId,
 				isTestUser:this.driver__.driver?false:this.isTest,
 				text:selectCodeStr == 'Printboard'?`${arr[this.printModel.num-1]},${this.captionGeneration}`:this.captionGeneration,
+				seed:this.searchPictureSeed,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				version:1,//为1就是Print
 				gender:selectCodeStr == 'Sketchboard'?this.sex.value:'',
-				base64:base64,
+				sloganBase64:base64,
 			}
 			this.isGenerate[selectCodeStr] = true
 			this.isTextarea = false
+			this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
+				this.remGenerate[selectCodeStr] = true
+			},10000)
 			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
                 (rv) => {
 					if(data.isTestUser){
@@ -1210,29 +1250,29 @@ export default defineComponent({
             ).catch(res=>{
 				// this.isShowMark = false
 				this.isGenerate[selectCodeStr] = false
+				clearInterval(this.remGenerateTime[selectCodeStr])
+				this.remGenerate[selectCodeStr] = false
             });
 		},
 		setGenerate(str:any,dataList:any){
-			this.remGenerateTime[str] = setTimeout(()=>{
+			
-				this.remGenerate[str] = true
-			},10000)
 			let data = dataList
 			let dataNum = dataList.length
+			let state = true
 			this.generateTime[str] = setInterval(()=>{
 				// let data = this.generateList[str].filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
+				if(!state)return
+				state = false
 				Https.axiosPost(Https.httpUrls.generateResult, data).then(
 					(rv) => {
+						state = true
 						if(this.isGenerate[str]){//防止取消后有正在执行的获取状态
 							this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' &&  item.status != 'Invalid')
 							rv.forEach((element:any) => {
 								if(element.status === 'Success'){
 									element.imgUrl = element.url
-									this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
+									element.categoryValue = this.scene?.name
-										if(itemCategory.value == element.category){
+									element.category = this.scene?.value
-											element.categoryValue = itemCategory?.label
-											element.category = itemCategory?.value
-										}
-									});
 									this.generateList[str].unshift(element)
 									data = data.filter((item:any) => item !== element.taskId);
 								}

src/views/LoginPage.vue

@@ -474,7 +474,12 @@ export default defineComponent({
                         setCookie("isBeginner", isBeginner);
                         setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
                         setCookie("userInfo", JSON.stringify(rv));
-                        this.turnToHomePage();
+						this.store.commit("setSystemUser", rv.systemUser)
+						if(rv.systemUser == 0){
+							this.turnToHomePage('/');
+						}else{
+							this.turnToHomePage('/home');
+						}
 						sessionStorage.setItem('isTimeOne', JSON.stringify(false));//是否需要公告 提示 弹窗
 						let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
 						sessionStorage.setItem('sessionId', randomNum);  
@@ -522,7 +527,7 @@ export default defineComponent({
         },
 
         //跳转到首页
-        turnToHomePage() {
+        turnToHomePage(str:any) {
 			this.getLang()
             // this.$router.push("/home");
 			// console.log(window.location.search.substring(1));
@@ -530,7 +535,7 @@ export default defineComponent({
 			this.store.commit("clearAllCollection");
 			this.store.commit("setAllBoardDataChoose",{});
 			this.store.commit("clearShowSketchboard",{});
-			this.$router.push("/home");
+			this.$router.push(str);
         },
 		//获取当前语言
 		getLang(){

src/views/RegisterPage.vue

@@ -0,0 +1,914 @@
+<template>
+    <div class="login_page">
+        <div class="page_content">
+            <img
+                class="login_logo"
+                src="@/assets/images/loginPage/aida_Logo_login.png"
+            />
+            <!-- 账号密码和邮箱登录  start-->
+            <div class="login_content" v-if="isLogin === 1">
+				<div class="login_content_left">
+					<div class="login_type_list">
+						<div
+							:class="[
+								'login_type_item','username_login_item',
+								'login_active',
+							]"
+						>
+							Register  AiDA 3.0
+						</div>
+					</div>
+					<!-- 账号密码登录 start -->
+					<!-- v-show="loginType == 'username'" -->
+					<div >
+						<div class="login_form_content" :state="emailStap">
+								<div class="login_form_title">Name</div>
+							<input
+								class="login_form_input"
+								placeholder="Enter your username"
+								v-model="username"
+							/>
+							
+							<div class="login_form_title marign_top30">
+								<div>Password</div>
+								<!-- <div class="tip_content" @click="changeIsLogin(2)">
+									Forgot password？
+								</div> -->
+							</div>
+							<div class="password_input_block">
+								<input
+									class="login_form_input"
+									:type="passwordType"
+									placeholder="Enter your password"
+									v-model="password"
+									@keydown.enter="submitPerLogin()"
+								/>
+								<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
+							</div>
+							<div class="login_form_title marign_top30">Email</div>
+							<input
+								class="login_form_input"
+								placeholder="Enter your email address"
+								v-model="email"
+								@keydown.enter="submitPerLogin()"
+							/>
+
+						<!-- 邮箱登录 start -->
+							<div class="login_form_email" :class="{active:emailStap===2}">
+					<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
+						<!-- <div v-show="emailStap === 1" class="forget_password_content">
+							<div class="forget_password_content_block" @click="changeLoginType('username')">
+								<span class="icon iconfont fi-br-arrow-left"></span
+								><span class="forget_password_content_title"
+									>Log on to AiDA</span
+								>
+							</div>
+							<div class="login_form_content">
+								<div class="login_form_title">Email</div>
+								<input
+									class="login_form_input"
+									placeholder="Enter your email address"
+									v-model="email"
+									@keydown.enter="emailNextStepFun()"
+								/>
+							</div>
+							<div
+								class="login_submit_button marign_top40"
+								@click="emailNextStepFun()"
+							>
+								Sign In
+							</div>
+						</div> -->
+
+						<div v-show="emailStap === 2"  class="email_last_step">
+							
+							<div class="email_last_step_block" >
+								<span class="email_last_step_content"
+									>Verify with one-time verification code</span
+								>
+								<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
+							</div>
+							<div class="email_last_step_bottom">
+								<div class="email_last_step_des">
+								<div class="sent_email_content">
+									Sent to {{ email }}
+								</div>
+								<div class="tip_content">
+									<span v-show="time">{{ time }}s</span>
+									<span v-show="!time" @click="emailNextStepFun()"
+										>Resend</span
+									>
+								</div>
+							</div>
+							<VerificationCodeInput
+								:ct="emailCode"
+								@sendCaptcha="submitEmailLogin($event)"
+							></VerificationCodeInput>
+
+							<div class="email_last_step_des">
+								<div class="sent_email_content email_tip_content">
+								Please check the junk box if you haven't received verification code
+								</div>
+							</div>
+							</div>
+						</div>
+					</div>
+						</div>
+
+						<div  class="login_form_title marign_top30">
+							<label :class="{active:emailStap == 2}">
+								<input :state="emailStap" type="checkbox" v-model="checked">
+								<span>I agree to all Term, Privacy Policy and Fees</span>
+							</label>
+						</div>
+						
+						<div
+							class="login_submit_button marign_top40" :state="emailStap"
+							@click="submitPerLogin()"
+						>
+						Register
+						</div>
+						
+						<!-- <div class="login_text"  >
+							<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
+						</div> -->
+
+					</div>
+					<!-- 账号密码登录 end -->
+					
+				</div>
+                
+                <!-- 邮箱登录 end -->
+				<div class="login_content_right">
+					<img
+						src="@/assets/images/loginPage/aida_logo_centent.jpg"
+					/>
+					<!-- <img src="https://www.aida.com.hk/download/aida_V2_images/image/login-right-image.jpg" alt=""> -->
+				</div>
+            </div>
+
+            <!-- 忘记密码 start -->
+            <div class="forget_password_content" v-else>
+                <div class="forget_password_content_block" @click="forgetPasswordLastStepFun()">
+                    <!-- <span class="icon iconfont fi-br-arrow-left"></span
+                    > -->
+					<i class="fi fi-br-arrow-left"></i>
+					<span class="forget_password_content_title"
+                        >Retrieve password</span
+                    >
+                </div>
+                <div v-show="frogetPasswordStep === 1">
+                    <div class="forget_passored_form_content">
+                        <div class="forget_passored_form_title">Email</div>
+                        <input
+                            class="forget_passored_form_input"
+                            placeholder="Enter your email"
+                            v-model="forgetPasswordEmail"
+                            @keydown.enter="forgetPasswordNextStepFun()"
+                        />
+                    </div>
+                    <div
+                        class="forget_submit_button marign_top40"
+                        @click="forgetPasswordNextStepFun()"
+                    >
+                        Next step
+                    </div>
+                </div>
+
+                <div v-show="frogetPasswordStep === 2">
+                    <div class="forget_verif_code_des">Verification Code</div>
+                    <div class="email_last_step_des">
+                        <div class="sent_email_content">
+                            Sent to {{ forgetPasswordEmail }}
+                        </div>
+                        <div class="tip_content">
+                            <span v-show="time">{{ time }}s</span>
+                            <span
+                                v-show="!time"
+                                @click="forgetPasswordNextStepFun()"
+                                >Resend</span
+                            >
+                        </div>
+                    </div>
+                </div>
+
+                <div v-show="frogetPasswordStep === 3">
+                    <div class="forget_passored_form_content">
+                        <div class="forget_passored_form_title">Password</div>
+                        <input
+                            class="forget_passored_form_input"
+                            placeholder="Enter a new password"
+                            v-model="newPassword"
+                            @keydown.enter="submitResetPassword()"
+                        />
+                    </div>
+                    <div
+                        class="forget_submit_button marign_top40"
+                        @click="submitResetPassword()"
+                    >
+                        Submit
+                    </div>
+                </div>
+            </div>
+            <!-- 忘记密码 end -->
+           
+        </div>
+
+        <div class="login_footer">
+            <div class="login_footer_item"><div class="login_footer_item_text">©2024 Code-Create Limited</div></div>
+            <div class="login_footer_item">
+                <div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-terms-and-conditions/')">Terms&Conditions</div>
+                <div class="login_footer_line"></div>
+                <div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-subscription-agreement/')">Privacy Policy</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref ,onMounted} from "vue";
+import { Https } from "@/tool/https";
+import { isEmail } from "@/tool/util";
+import { setCookie ,WriteCookie } from "@/tool/cookie";
+import { message } from "ant-design-vue";
+import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+import { useStore } from "vuex";
+import { useI18n } from "vue-i18n";
+import { setLang } from "@/tool/guide";
+const md5 = require("md5");
+export default defineComponent({
+    components: {
+        VerificationCodeInput,
+    },
+    setup(){
+        let timer:any =  0;
+		const {locale} = useI18n()
+		const store = useStore();
+        return{
+			store,
+            timer,
+			locale
+        }
+    },
+    data() {
+        return {
+			checked:false,
+            isLogin: 1, //是否为登录 1-登录， 2-忘记密码
+            loginType: "username",
+            emailStap: 1, // 邮箱登录步骤
+            emailCode: ["", "", "", "", "", ""], //邮箱验证码
+            emailNextStep: true,
+            username: "",
+            password: "",
+            email: "", //邮箱登录邮箱
+            frogetPasswordStep: 1, //忘记密码的步骤
+            forgetPasswordEmail: "",
+            forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
+            forgetEmailValue: "", //忘记密码的邮箱验证码保存值
+            newPassword: "", //新密码
+            isCheckRobot: false,
+            time: 60, //60秒倒计时
+            passwordType:'password',
+            userId:'',
+			loginTime:true
+        };
+    },
+    methods: {
+        changeLoginType(type: string) {
+            this.loginType = type;
+        },
+
+        //是否忘记密码页面
+        changeIsLogin(isLogin: number) {
+            if (isLogin === 1) {
+                //登录
+                this.forgetPasswordEmail = "";
+                this.frogetPasswordStep = 1;
+                this.forgetEmailCode = ["", "", "", "", "", ""];
+                this.emailStap = 1;
+                this.clearTimer();
+            } else {
+                this.username = "";
+                this.password = "";
+            }
+            this.isLogin = isLogin;
+        },
+
+        //邮箱登录的下一步
+        emailNextStepFun() {
+            if (!isEmail(this.email)) {
+                message.info("The email format is incorrect");
+                return;
+            }
+            let data = {
+                email: this.email,
+                operationType: "LOGIN",
+            };
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
+                (rv: any) => {
+                    if (rv) {
+                        this.emailStap = 2;
+                        this.time = 60;
+                        this.emailCode = ["", "", "", "", "", ""]
+                        this.createTimer();
+                    }
+                }
+            );
+        },
+
+        //邮箱登录的上一步
+        emailLastStepFun() {
+            this.emailStap = 1;
+			this.username = "",
+            this.password = "",
+            this.email = "";
+			this.checked=false,
+			this.loginType = "username",
+            (this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
+        },
+
+        //忘记密码的下一步
+        forgetPasswordNextStepFun() {
+            if (!isEmail(this.forgetPasswordEmail)) {
+                message.info("The email format is incorrect");
+                return;
+            }
+            let data = {
+                email: this.forgetPasswordEmail,
+                operationType: "FORGET_PWD",
+            };
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
+                (rv: any) => {
+                    if (rv) {
+                        this.frogetPasswordStep = 2;
+                        (this.forgetEmailCode = ["", "", "", "", "", ""]),
+                            this.createTimer();
+                    }
+                }
+            );
+        },
+        //忘记密码的上一步
+        forgetPasswordLastStepFun() {
+            if (this.frogetPasswordStep === 1) {
+                this.changeIsLogin(1);
+            } else {
+                this.frogetPasswordStep = this.frogetPasswordStep - 1;
+                this.forgetPasswordEmail = "";
+                (this.forgetEmailCode = ["", "", "", "", "", ""]),
+                    this.clearTimer();
+            }
+        },
+
+
+        //改变勾选是否是机器人
+        checkRobot() {
+            this.isCheckRobot = !this.isCheckRobot;
+        },
+
+        //提交账号密码预先登录
+        submitPerLogin() {
+			//输入账号密码
+			if(this.emailStap>=2){
+				return;
+			}else{
+				if (!this.username || !this.password) {
+					message.info("Please enter your account number or password");
+					return;
+				}
+				//输入邮箱
+				if (!this.email) {
+					message.info("Please enter your email address");
+					return;
+				}
+				//判断邮箱格式是否正确
+				if (!isEmail(this.email)) {
+					message.info("The email format is incorrect");
+					return;
+				}
+				//判断是否同意隐私政策
+				if (!this.checked) {
+					message.info("Agree to all terms, privacy fees and policies");
+					return;
+				}
+				let data = {
+					userPassword: md5(this.password + "abc"),
+					userName: this.username,
+					userEmail: this.email,
+					"browserIdentifiers": "",
+					"country": "",
+					"createDate": "",
+					"credits": 0,
+					"id": 0,
+					"isBeginner": 0,
+					"isTrial": 0,
+					"language": "",
+					"systemUser": 0,
+					"updateDate": "",
+					"validEndTime": 0,
+					"validStartTime": 0
+				};
+				// this.loginType = 'email'
+				if(this.loginTime){
+					this.loginTime = false
+					Https.axiosPost(Https.httpUrls.designWorksRegister, data).then(
+					(rv: any) => {
+						// if (rv) {
+						//     this.loginType = 'email'
+						// }
+						this.emailStap = 2;
+						if (rv) {
+							this.userId = rv.userId
+							this.loginType = 'email'
+							this.time = 60;
+							this.emailCode = ["", "", "", "", "", ""]
+							this.createTimer();
+						}
+					}
+					).catch(res=>{
+						this.emailStap = 1;
+					});
+					setTimeout(() => {
+						this.loginTime = true
+					}, 2000);
+				}
+		
+			}
+        },
+
+        changePasswordType(){
+            this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
+        },
+
+        //邮箱登录提交
+        submitEmailLogin(emailVerifyCode: any) {
+            let data = {
+                email: this.email,
+                emailVerifyCode: emailVerifyCode,
+                loginType: "EMAIL",
+                userId:this.userId,
+				"userEmail":  this.email,
+				"userName": this.username,
+				"userPassword": md5(this.password + "abc"),
+            };
+            Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
+                (rv: any) => {
+                    if (rv) {
+                        this.createTimer();
+						let isTest = rv.isTrial == 1?true:false
+						let isBeginner = rv.isBeginner == 1?true:false
+                        let token = rv.token;
+                        setCookie("isMurmur", false);
+                        setCookie("token", token);
+                        setCookie("isTest", isTest);
+                        setCookie("isBeginner", isBeginner);
+                        setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
+                        setCookie("userInfo", JSON.stringify(rv));
+						this.store.commit("setSystemUser",rv.systemUser)
+						if(rv.systemUser == 0){
+							this.turnToHomePage('/');
+						}else{
+							this.turnToHomePage('/home');
+						}
+
+						sessionStorage.setItem('isTimeOne', JSON.stringify(false));//是否需要公告 提示 弹窗
+						let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
+						sessionStorage.setItem('sessionId', randomNum);  
+						sessionStorage.setItem('record', JSON.stringify([]))
+                    }
+                }
+			).catch(res=>{
+			});
+        },
+
+        //修改密码提交
+        submitResetPassword() {
+            let data = {
+                email: this.forgetPasswordEmail,
+                emailVerifyCode: this.forgetEmailValue,
+                password: md5(this.newPassword + "abc"),
+				verifyEmail:false,
+            };
+            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
+                (rv: any) => {
+                    if (rv) {
+                        message.success("Changing the password successfully");
+                        this.changeIsLogin(1);
+                    }
+                }
+            );
+        },
+
+        //创建定时器
+        createTimer() {
+            this.timer = setInterval(() => {
+                this.time--;
+                if (!this.time) {
+                    clearInterval(this.timer);
+                }
+            }, 1000);
+        },
+
+        //清除定时器
+        clearTimer() {
+            this.time = 60;
+            if (this.timer) {
+                clearInterval(this.timer);
+            }
+        },
+
+        //跳转到首页
+        turnToHomePage(str:any) {
+			this.getLang()
+            // this.$router.push("/home");
+			// console.log(window.location.search.substring(1));
+			this.store.commit("clearAllData");
+			this.store.commit("clearAllCollection");
+			this.store.commit("setAllBoardDataChoose",{});
+			this.store.commit("clearShowSketchboard",{});
+			this.$router.push(str);
+        },
+		//获取当前语言
+		getLang(){
+			let data ={}
+			Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
+                (rv: any) => {
+                    if (rv) {
+						this.locale = rv
+						setLang(rv)
+                    }
+                }
+            );
+		},
+        turnToWindow(url: any) {
+            window.open(url);
+        },
+    },
+});
+</script>
+<style lang="less" scoped>
+.login_page {
+    width: 100%;
+    height: 100%;
+    .page_content {
+        // position: relative;
+
+        .login_logo {
+            position: absolute;
+            left: 4rem;
+            top: 2.5rem;
+            width: 11rem;
+        }
+
+        .login_content {
+			
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            // width: 60rem;
+			width: 150rem;
+            background: #FFFFFF;
+            // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
+            border-radius: 1rem;
+            padding: 3rem 6rem 6.5rem;
+            box-sizing: border-box;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.login_content_left{
+				width: 40%;
+				.login_form_email{
+					position: absolute;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					top: 0;
+					background: #fff;
+					transform: scale(0);
+					transition: .3s all;
+					border: 2px solid;
+					border-radius: 20px;
+					.email_last_step{
+						width: 100%;
+						height: 100%;
+						#app{
+							height: auto;
+						}
+					}
+				}
+				.active{
+					transform: scale(1);
+				}
+			}
+			.login_content_right{
+				width: 40%;
+				img{
+					width: 100%;
+				}
+			}
+            .login_type_list {
+                width: 100%;
+                display: flex;
+
+                .login_type_item {
+                    text-align: center;
+                    font-size: 3.6rem;
+                    font-weight: bold;
+                    color: #D7D7D7;
+                    cursor: pointer;
+                    height: 4rem;
+                    line-height: 4rem;
+
+                    &.login_active {
+                        color: #030303;
+                    }
+                }
+            }
+			.login_form_title {
+                    font-size: 1.6rem;
+                    // color: #666666;
+					font-weight: 900;
+					color: #000;
+                    display: flex;
+                    justify-content: space-between;
+                    box-sizing: border-box;
+					label{
+						display: flex;
+						span{
+							font-size: 1.6rem;
+							margin-left: 10px;
+							font-weight: normal;
+						}
+						&.active{
+							pointer-events:none;
+							input{
+								pointer-events:none;
+							}
+						}
+					}
+                }
+
+            .login_form_content {
+                margin-top: 4rem;
+				position: relative;
+                &[state="2"]{
+					>*{
+						opacity: 0;
+					}
+					.login_form_email{
+						opacity: 1;
+					}
+				}
+                .password_input_block{
+                    position: relative;
+
+                    .password_show_icon{
+                        position: absolute;
+                        font-size: 2.4rem;
+                        right: 2rem;
+                        top:1.7rem;
+                        cursor: pointer;
+                    }
+                }
+
+                .login_form_input {
+                    width: 100%;
+                    height: 5rem;
+                    margin-top: 1rem;
+                    border: 0.1rem solid #DFDFDF;
+                    border-radius: 2.5rem;
+                    padding-left: 2.1rem;
+                    line-height: 5rem;
+                    font-size: 1.4rem;
+                    box-sizing: border-box;
+                    outline: none;
+                    
+
+                    &::placeholder {
+                        color: #a5b0c2;
+                    }
+                }
+            }
+
+            .email_last_step {
+                // margin-top: 4rem;
+				.email_last_step_bottom{
+					padding: 0 40px;
+				}
+                .email_last_step_block{
+					padding: 10px;
+					border-bottom: 2px solid;
+					box-sizing: border-box;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					.email_last_step_content {
+                    margin-left: 1rem;
+                    font-size: 2.2rem;
+                    font-weight: bold;
+                    color: #030303;
+                }
+					.email_last_step_block_icon{
+						cursor: pointer;
+						margin-right: 1rem;
+						height: 20px;
+					}
+                }
+
+                .fi-br-arrow-left {
+                    font-size: 2.5rem;
+                    font-weight: bold;
+                    color: #030303;
+					transform: translateY(1rem);
+					display: inline-block;
+                }
+
+                
+            }
+
+            .login_submit_button {
+                height: 5rem;
+                background: #000;
+                border-radius: 2.5rem;
+                line-height: 5rem;
+                text-align: center;
+                font-size: 1.8rem;
+                font-weight: 500;
+                color: #ffffff;
+                cursor: pointer;
+				&[state="2"]{
+					cursor: not-allowed;
+				}
+            }
+            .login_text {
+                font-size: 1.6rem;
+                margin-top: 4rem;
+                color: #151515;
+                display: flex;
+                justify-content: flex-end;
+
+                .forget_password_text{
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .forget_password_content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            width: 60rem;
+            background: #FFFFFF;
+            box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
+            border-radius: 1rem;
+            padding: 3rem 6rem 6.5rem;
+            box-sizing: border-box;
+
+            .forget_password_content_block{
+                cursor: pointer;
+            }
+
+            .fi-br-arrow-left {
+                font-size: 3.8rem;
+                font-weight: bold;
+                color: #030303;
+				transform: translateY(1rem);
+				display: inline-block;
+            }
+            .forget_password_content_title {
+                font-size: 3.2rem;
+                font-weight: bold;
+                color: #030303;
+                margin-left: 2rem;
+            }
+
+            .forget_passored_form_content {
+                margin-top: 3.5rem;
+
+                .forget_passored_form_title {
+                    font-size: 2.4rem;
+                    font-weight: bold;
+                    color: #030303;
+                    display: flex;
+                    justify-content: space-between;
+                    box-sizing: border-box;
+                }
+
+                .forget_passored_form_input {
+                    width: 100%;
+                    height: 5rem;
+                    margin-top: 1rem;
+                    border: 0.1rem solid #DFDFDF;
+                    border-radius: 2.5rem;
+                    padding-left: 2.1rem;
+                    line-height: 5rem;
+                    font-size: 1.4rem;
+                    box-sizing: border-box;
+                    outline: none;
+
+                    &::placeholder {
+                        color: #a5b0c2;
+                    }
+                }
+            }
+
+            .forget_verif_code_des {
+                font-size: 2.4rem;
+                font-weight: bold;
+                color: #030303;
+                margin-top: 3.5rem;
+            }
+
+            .forget_submit_button {
+                height: 5rem;
+                background: #000;
+                border-radius: 2.5rem;
+                line-height: 5rem;
+                text-align: center;
+                font-size: 1.8rem;
+                font-weight: 500;
+                color: #ffffff;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .login_footer{
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        left: 0;
+        bottom: 3.5rem;
+        width: 100%;
+        padding: 0 4rem;
+
+        .login_footer_item{
+            display: flex;
+            align-items: center;
+
+            .login_footer_item_text{
+                font-size: 1.3rem;
+                color: #151515;
+            }
+
+            .footer_item_text_pointer{
+                cursor: pointer;
+            }
+
+            .login_footer_line{
+                width: 0.1rem;
+                height: 2rem;
+                margin: 0 2rem;
+                background: #B9B9B9;
+            }
+        }
+
+    }
+
+
+    .marign_top20 {
+        margin-top: 2rem;
+    }
+
+    .marign_top22 {
+        margin-top: 2.2rem;
+    }
+
+    .marign_top30 {
+        margin-top: 3rem;
+    }
+    .marign_top40 {
+        margin-top: 4rem;
+    }
+
+    .tip_content {
+        font-size: 1.3rem;
+        font-weight: bold;
+        color: #343579;
+        cursor: pointer;
+    }
+
+    .email_last_step_des {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 4rem;
+        margin-bottom: 2rem;
+
+        .sent_email_content {
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: #a5b0c2;
+        }
+
+        .email_tip_content{
+            font-size: 1.4rem;
+            color: #030303;
+        }
+    }
+}
+
+</style>