页面调整

public/css/Satoshi/css/satoshi.css

@@ -0,0 +1,148 @@
+/**
+* @license
+*
+* Font Family: Satoshi
+* Designed by: Deni Anggara
+* URL: https://www.fontshare.com/fonts/satoshi
+* © 2025 Indian Type Foundry
+*
+* Satoshi Light 
+* Satoshi LightItalic 
+* Satoshi Regular 
+* Satoshi Italic 
+* Satoshi Medium 
+* Satoshi MediumItalic 
+* Satoshi Bold 
+* Satoshi BoldItalic 
+* Satoshi Black 
+* Satoshi BlackItalic 
+* Satoshi Variable (Variable font)
+* Satoshi VariableItalic (Variable font)
+
+*
+*/
+@font-face {
+  font-family: 'Satoshi-Light';
+  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
+       url('../fonts/Satoshi-Light.woff') format('woff'),
+       url('../fonts/Satoshi-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Satoshi-LightItalic';
+  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-LightItalic.woff') format('woff'),
+       url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Satoshi-Regular';
+  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
+       url('../fonts/Satoshi-Regular.woff') format('woff'),
+       url('../fonts/Satoshi-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Satoshi-Italic';
+  src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
+       url('../fonts/Satoshi-Italic.woff') format('woff'),
+       url('../fonts/Satoshi-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Satoshi-Medium';
+  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
+       url('../fonts/Satoshi-Medium.woff') format('woff'),
+       url('../fonts/Satoshi-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Satoshi-MediumItalic';
+  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
+       url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Satoshi-Bold';
+  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
+       url('../fonts/Satoshi-Bold.woff') format('woff'),
+       url('../fonts/Satoshi-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Satoshi-BoldItalic';
+  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
+       url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Satoshi-Black';
+  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
+       url('../fonts/Satoshi-Black.woff') format('woff'),
+       url('../fonts/Satoshi-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Satoshi-BlackItalic';
+  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
+       url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-display: swap;
+  font-style: italic;
+}
+/**
+* This is a variable font
+* You can control variable axes as shown below:
+* font-variation-settings: wght 900.0;
+*
+* available axes:
+'wght' (range from 300.0 to 900.0
+*/
+@font-face {
+  font-family: 'Satoshi-Variable';
+  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
+       url('../fonts/Satoshi-Variable.woff') format('woff'),
+       url('../fonts/Satoshi-Variable.ttf') format('truetype');
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: normal;
+}
+/**
+* This is a variable font
+* You can control variable axes as shown below:
+* font-variation-settings: wght 900.0;
+*
+* available axes:
+'wght' (range from 300.0 to 900.0
+*/
+@font-face {
+  font-family: 'Satoshi-VariableItalic';
+  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-VariableItalic.woff') format('woff'),
+       url('../fonts/Satoshi-VariableItalic.ttf') format('truetype');
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: italic;
+}
+

src/assets/images/icon/jcbPay.svg

@@ -0,0 +1,33 @@
+<svg
+  height="16"
+  viewBox="0 0 23 16"
+  width="23"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g fill="none">
+    <path
+      d="m.20535714 16h4.51785715c1.0278125 0 2.25892857-1.1946667 2.25892857-2.1333333v-13.8666667h-4.51785715c-1.0278125 0-2.25892857 1.19466667-2.25892857 3.2z"
+      fill="#047ab1"
+    />
+    <path
+      d="m2.76924107 10.816c-.86733559.0001606-1.73039558-.1147397-2.56388393-.3413333v-1.17333337c.64678874.37770431 1.38610045.59084099 2.14598215.61866667.8696875 0 1.35535714-.576 1.35535714-1.36533333v-3.22133334h2.14598214v3.22133334c0 1.25866666-.70026786 2.26133333-3.0834375 2.26133333z"
+      fill="#fff"
+    />
+    <path
+      d="m8.11160714 16h4.51785716c1.0278125 0 2.2589286-1.1946667 2.2589286-2.1333333v-13.8666667h-4.5178572c-1.02781249 0-2.25892856 1.19466667-2.25892856 3.2z"
+      fill="#d42d06"
+    />
+    <path
+      d="m8.11160714 6.08c.65508929-.59733333 1.78455357-.97066667 3.61428576-.88533333.9939285.04266666 2.0330357.32 2.0330357.32v1.184c-.5943231-.3394747-1.2623758-.54734656-1.9539732-.608-1.3892411-.11733334-2.23633933.61866666-2.23633933 1.90933333s.84709823 2.0266667 2.23633933 1.92c.6920185-.06606555 1.3596342-.27744592 1.9539732-.61866667v1.17333337s-1.0391072.288-2.0330357.3306666c-1.82973219.0853334-2.95919647-.288-3.61428576-.8853333z"
+      fill="#fff"
+    />
+    <path
+      d="m16.0178571 16h4.5178572c1.0278125 0 2.2589286-1.1946667 2.2589286-2.1333333v-13.8666667h-4.5178572c-1.0278125 0-2.2589286 1.19466667-2.2589286 3.2z"
+      fill="#67b637"
+    />
+    <path
+      d="m21.6651786 9.28c0 .8533333-.7002679 1.3866667-1.6377232 1.3866667h-4.0095983v-5.33333337h3.6481697l.2597768.01066667c.8245089.04266667 1.4344196.50133333 1.4344196 1.29066667 0 .61866666-.4179018 1.152-1.1746428 1.28v.032c.8358035.05333333 1.4795982.55466666 1.4795982 1.33333333zm-2.880134-3.104c-.0486104-.00686658-.0976798-.01043129-.1468303-.01066667h-1.3553572v1.344h1.5021875c.2823661-.064.5195536-.30933333.5195536-.672 0-.36266666-.2371875-.608-.5195536-.66133333zm.1694197 2.176c-.059755-.00886168-.1202559-.01243275-.1807143-.01066667h-1.4908929v1.46133334h1.4908929l.1807143-.02133334c.2823661-.064.5195536-.34133333.5195536-.71466666 0-.37333334-.2258929-.64-.5195536-.71466667z"
+      fill="#fff"
+    />
+  </g>
+</svg>

src/assets/images/icon/mastercardPay.svg

@@ -0,0 +1,16 @@
+<svg
+  height="16"
+  viewBox="0 0 24 16"
+  width="24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g fill="none" fill-rule="evenodd">
+    <rect fill="#252525" height="16" rx="2" width="24" />
+    <circle cx="9" cy="8" fill="#eb001b" r="5" />
+    <circle cx="15" cy="8" fill="#f79e1b" r="5" />
+    <path
+      d="m12 3.99963381c1.2144467.91220633 2 2.36454836 2 4.00036619s-.7855533 3.0881599-2 4.0003662c-1.2144467-.9122063-2-2.36454837-2-4.0003662s.7855533-3.08815986 2-4.00036619z"
+      fill="#ff5f00"
+    />
+  </g>
+</svg>

src/assets/images/icon/visaPay.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="16px" viewBox="0 0 24 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="319" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="New-Icons" transform="translate(-80.000000, -280.000000)" fill-rule="nonzero">
+            <g id="Card-Brands" transform="translate(40.000000, 200.000000)">
+                <g id="Color" transform="translate(0.000000, 80.000000)">
+                    <g id="Visa" transform="translate(40.000000, 0.000000)">
+                        <rect id="Container" stroke-opacity="0.2" stroke="#000000" stroke-width="0.5" fill="#FFFFFF" x="0.25" y="0.25" width="23.5" height="15.5" rx="2"></rect>
+                        <path d="M2.78773262,5.91443732 C2.26459089,5.62750595 1.6675389,5.39673777 1,5.23659312 L1.0280005,5.1118821 L3.76497922,5.1118821 C4.13596254,5.12488556 4.43699113,5.23650585 4.53494636,5.63071135 L5.12976697,8.46659052 L5.31198338,9.32072617 L6.97796639,5.1118821 L8.77678896,5.1118821 L6.10288111,11.2775284 L4.30396552,11.2775284 L2.78773262,5.91443732 L2.78773262,5.91443732 Z M10.0999752,11.2840738 L8.39882877,11.2840738 L9.46284763,5.1118821 L11.163901,5.1118821 L10.0999752,11.2840738 Z M16.2667821,5.26277458 L16.0354292,6.59558538 L15.881566,6.53004446 C15.5737466,6.40524617 15.1674138,6.28053516 14.6143808,6.29371316 C13.942741,6.29371316 13.6415263,6.56277129 13.6345494,6.82545859 C13.6345494,7.11441463 13.998928,7.3048411 14.5939153,7.58725177 C15.5740257,8.02718756 16.0286384,8.56556562 16.0218476,9.26818871 C16.0080799,10.5486366 14.8460128,11.376058 13.0610509,11.376058 C12.2978746,11.3694253 11.5627918,11.2180965 11.163808,11.0475679 L11.4018587,9.66204513 L11.6258627,9.76066195 C12.1788958,9.99070971 12.5428092,10.0889775 13.221984,10.0889775 C13.7117601,10.0889775 14.2368857,9.89837643 14.2435835,9.48488392 C14.2435835,9.21565125 14.0198586,9.01850486 13.3617074,8.7164581 C12.717789,8.42086943 11.8568435,7.92848346 11.8707973,7.04197926 C11.8780532,5.84042483 13.0610509,5 14.7409877,5 C15.3990458,5 15.9312413,5.13788902 16.2667821,5.26277458 Z M18.5277524,9.0974856 L19.941731,9.0974856 C19.8717762,8.78889347 19.549631,7.31147374 19.549631,7.31147374 L19.4307452,6.77964104 C19.3467437,7.00942698 19.1998574,7.38373457 19.2069273,7.37055657 C19.2069273,7.37055657 18.6678479,8.74290137 18.5277524,9.0974856 Z M20.6276036,5.1118821 L22,11.2839865 L20.4249023,11.2839865 C20.4249023,11.2839865 20.2707601,10.5748181 20.221922,10.3581228 L18.0377903,10.3581228 C17.9746264,10.5221933 17.6807607,11.2839865 17.6807607,11.2839865 L15.8957988,11.2839865 L18.4226343,5.62399144 C18.5977072,5.22341512 18.9059917,5.1118821 19.3117663,5.1118821 L20.6276036,5.1118821 L20.6276036,5.1118821 Z" id="Shape" fill="#1434CB"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/style/style.css

@@ -10,7 +10,7 @@ body,
   --aida-fsize1-8: calc(1.8rem);
   --aida-fsize1-6: calc(1.6rem);
   --aida-fsize1-4: calc(1.4rem*1.2);
-  --antd-wave-shadow-color: #39215b;
+  --antd-wave-shadow-color: #000;
 }
 ::selection {
   background-color: #1890ff;
@@ -57,7 +57,9 @@ li {
 }
 .ant-slider.system_silder {
   margin: 0;
-  width: 100%;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  width: calc(100% - 2rem);
 }
 .ant-slider.system_silder .ant-slider-rail {
   height: 0.6rem;
@@ -716,6 +718,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .generalModel_state .generalModel_state_item.smail .ant-select-selector,
 .generalModel_state .generalModel_state_item.smail .range_picker {
   padding: 1rem 2rem !important;
+  padding-right: 3rem !important;
 }
 .generalModel_state .generalModel_state_item.smail .el-cascader {
   padding: 1rem 2rem;
@@ -1750,6 +1753,7 @@ textarea:focus {
 .productImg_content .input_border,
 .poseTransfer .input_border,
 .scaleImage_modal .input_border,
+.editDesignType_modal .input_border,
 .accountEdit_page .input_border,
 .generalMenu_printModel_upload .input_border,
 .generate .input_border {
@@ -1759,6 +1763,7 @@ textarea:focus {
   padding-bottom: calc(2rem*1.2);
   top: 0;
   flex-wrap: wrap;
+  z-index: 6;
   --width: 65%;
 }
 .collection_modal_body .input_border .input_box,
@@ -1767,11 +1772,12 @@ textarea:focus {
 .productImg_content .input_border .input_box,
 .poseTransfer .input_border .input_box,
 .scaleImage_modal .input_border .input_box,
+.editDesignType_modal .input_border .input_box,
 .accountEdit_page .input_border .input_box,
 .generalMenu_printModel_upload .input_border .input_box,
 .generate .input_border .input_box {
   position: relative;
-  z-index: 2;
+  z-index: 6;
   flex: 1;
   display: flex;
   align-items: center;
@@ -1784,6 +1790,7 @@ textarea:focus {
 .productImg_content .input_border .input_box .inputShowText,
 .poseTransfer .input_border .input_box .inputShowText,
 .scaleImage_modal .input_border .input_box .inputShowText,
+.editDesignType_modal .input_border .input_box .inputShowText,
 .accountEdit_page .input_border .input_box .inputShowText,
 .generalMenu_printModel_upload .input_border .input_box .inputShowText,
 .generate .input_border .input_box .inputShowText {
@@ -1796,6 +1803,7 @@ textarea:focus {
 .productImg_content .input_border .input_box.active .input_box_btnBox,
 .poseTransfer .input_border .input_box.active .input_box_btnBox,
 .scaleImage_modal .input_border .input_box.active .input_box_btnBox,
+.editDesignType_modal .input_border .input_box.active .input_box_btnBox,
 .accountEdit_page .input_border .input_box.active .input_box_btnBox,
 .generalMenu_printModel_upload .input_border .input_box.active .input_box_btnBox,
 .generate .input_border .input_box.active .input_box_btnBox,
@@ -1805,6 +1813,7 @@ textarea:focus {
 .productImg_content .input_border .input_box.active .search_textarea,
 .poseTransfer .input_border .input_box.active .search_textarea,
 .scaleImage_modal .input_border .input_box.active .search_textarea,
+.editDesignType_modal .input_border .input_box.active .search_textarea,
 .accountEdit_page .input_border .input_box.active .search_textarea,
 .generalMenu_printModel_upload .input_border .input_box.active .search_textarea,
 .generate .input_border .input_box.active .search_textarea {
@@ -1817,6 +1826,7 @@ textarea:focus {
 .productImg_content .input_border .input_box.active .inputShowText,
 .poseTransfer .input_border .input_box.active .inputShowText,
 .scaleImage_modal .input_border .input_box.active .inputShowText,
+.editDesignType_modal .input_border .input_box.active .inputShowText,
 .accountEdit_page .input_border .input_box.active .inputShowText,
 .generalMenu_printModel_upload .input_border .input_box.active .inputShowText,
 .generate .input_border .input_box.active .inputShowText {
@@ -1830,6 +1840,7 @@ textarea:focus {
 .productImg_content .input_border .search_keyword,
 .poseTransfer .input_border .search_keyword,
 .scaleImage_modal .input_border .search_keyword,
+.editDesignType_modal .input_border .search_keyword,
 .accountEdit_page .input_border .search_keyword,
 .generalMenu_printModel_upload .input_border .search_keyword,
 .generate .input_border .search_keyword {
@@ -1842,6 +1853,7 @@ textarea:focus {
 .productImg_content .input_border .search_keyword .search_keyword_center,
 .poseTransfer .input_border .search_keyword .search_keyword_center,
 .scaleImage_modal .input_border .search_keyword .search_keyword_center,
+.editDesignType_modal .input_border .search_keyword .search_keyword_center,
 .accountEdit_page .input_border .search_keyword .search_keyword_center,
 .generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center,
 .generate .input_border .search_keyword .search_keyword_center {
@@ -1863,6 +1875,7 @@ textarea:focus {
 .productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
 .poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
 .scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
+.editDesignType_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
 .accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
 .generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
 .generate .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
@@ -1877,6 +1890,7 @@ textarea:focus {
 .productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
+.editDesignType_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .generate .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
@@ -1896,6 +1910,7 @@ textarea:focus {
 .productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
 .poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
 .scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
+.editDesignType_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
 .accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
 .generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
 .generate .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
@@ -1907,6 +1922,7 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox,
 .poseTransfer .input_border .input_box_btnBox,
 .scaleImage_modal .input_border .input_box_btnBox,
+.editDesignType_modal .input_border .input_box_btnBox,
 .accountEdit_page .input_border .input_box_btnBox,
 .generalMenu_printModel_upload .input_border .input_box_btnBox,
 .generate .input_border .input_box_btnBox {
@@ -1917,10 +1933,9 @@ textarea:focus {
   float: left;
   align-items: center;
   padding: 1.5rem 2rem;
-  padding-right: 0;
   background-color: #fff;
   flex: 1;
-  height: 5rem;
+  height: auto;
 }
 .collection_modal_body .input_border .input_box_btnBox.sketch,
 .design_detail_modal_component .input_border .input_box_btnBox.sketch,
@@ -1928,6 +1943,7 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox.sketch,
 .poseTransfer .input_border .input_box_btnBox.sketch,
 .scaleImage_modal .input_border .input_box_btnBox.sketch,
+.editDesignType_modal .input_border .input_box_btnBox.sketch,
 .accountEdit_page .input_border .input_box_btnBox.sketch,
 .generalMenu_printModel_upload .input_border .input_box_btnBox.sketch,
 .generate .input_border .input_box_btnBox.sketch {
@@ -1943,6 +1959,7 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox.sketch .upload_item,
 .poseTransfer .input_border .input_box_btnBox.sketch .upload_item,
 .scaleImage_modal .input_border .input_box_btnBox.sketch .upload_item,
+.editDesignType_modal .input_border .input_box_btnBox.sketch .upload_item,
 .accountEdit_page .input_border .input_box_btnBox.sketch .upload_item,
 .generalMenu_printModel_upload .input_border .input_box_btnBox.sketch .upload_item,
 .generate .input_border .input_box_btnBox.sketch .upload_item {
@@ -1954,6 +1971,7 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
 .poseTransfer .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
 .scaleImage_modal .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
+.editDesignType_modal .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
 .accountEdit_page .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
 .generalMenu_printModel_upload .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
 .generate .input_border .input_box_btnBox.sketch .upload_item .upload_file_item {
@@ -1966,12 +1984,13 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox > .textarea,
 .poseTransfer .input_border .input_box_btnBox > .textarea,
 .scaleImage_modal .input_border .input_box_btnBox > .textarea,
+.editDesignType_modal .input_border .input_box_btnBox > .textarea,
 .accountEdit_page .input_border .input_box_btnBox > .textarea,
 .generalMenu_printModel_upload .input_border .input_box_btnBox > .textarea,
 .generate .input_border .input_box_btnBox > .textarea {
   border-radius: 1rem;
   min-height: 2rem;
-  max-height: 20rem;
+  max-height: 14rem;
   border: none;
   resize: none;
   height: 2.7rem;
@@ -1985,6 +2004,7 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox .ant-spin-text,
 .poseTransfer .input_border .input_box_btnBox .ant-spin-text,
 .scaleImage_modal .input_border .input_box_btnBox .ant-spin-text,
+.editDesignType_modal .input_border .input_box_btnBox .ant-spin-text,
 .accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
 .generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text,
 .generate .input_border .input_box_btnBox .ant-spin-text {
@@ -1996,6 +2016,7 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox .search_seed,
 .poseTransfer .input_border .input_box_btnBox .search_seed,
 .scaleImage_modal .input_border .input_box_btnBox .search_seed,
+.editDesignType_modal .input_border .input_box_btnBox .search_seed,
 .accountEdit_page .input_border .input_box_btnBox .search_seed,
 .generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed,
 .generate .input_border .input_box_btnBox .search_seed {
@@ -2011,6 +2032,7 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox .upload_item,
 .poseTransfer .input_border .input_box_btnBox .upload_item,
 .scaleImage_modal .input_border .input_box_btnBox .upload_item,
+.editDesignType_modal .input_border .input_box_btnBox .upload_item,
 .accountEdit_page .input_border .input_box_btnBox .upload_item,
 .generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item,
 .generate .input_border .input_box_btnBox .upload_item {
@@ -2022,6 +2044,7 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox .upload_item .upload_file_item,
 .poseTransfer .input_border .input_box_btnBox .upload_item .upload_file_item,
 .scaleImage_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
+.editDesignType_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
 .accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
 .generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item,
 .generate .input_border .input_box_btnBox .upload_item .upload_file_item {
@@ -2040,6 +2063,7 @@ textarea:focus {
 .productImg_content .input_border input,
 .poseTransfer .input_border input,
 .scaleImage_modal .input_border input,
+.editDesignType_modal .input_border input,
 .accountEdit_page .input_border input,
 .generalMenu_printModel_upload .input_border input,
 .generate .input_border input {
@@ -2058,6 +2082,7 @@ textarea:focus {
 .productImg_content .input_border inputinput:-moz-placeholder,
 .poseTransfer .input_border inputinput:-moz-placeholder,
 .scaleImage_modal .input_border inputinput:-moz-placeholder,
+.editDesignType_modal .input_border inputinput:-moz-placeholder,
 .accountEdit_page .input_border inputinput:-moz-placeholder,
 .generalMenu_printModel_upload .input_border inputinput:-moz-placeholder,
 .generate .input_border inputinput:-moz-placeholder {
@@ -2069,6 +2094,7 @@ textarea:focus {
 .productImg_content .input_border inputinput:-ms-input-placeholder,
 .poseTransfer .input_border inputinput:-ms-input-placeholder,
 .scaleImage_modal .input_border inputinput:-ms-input-placeholder,
+.editDesignType_modal .input_border inputinput:-ms-input-placeholder,
 .accountEdit_page .input_border inputinput:-ms-input-placeholder,
 .generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder,
 .generate .input_border inputinput:-ms-input-placeholder {
@@ -2080,6 +2106,7 @@ textarea:focus {
 .productImg_content .input_border inputinput::-webkit-input-placeholder,
 .poseTransfer .input_border inputinput::-webkit-input-placeholder,
 .scaleImage_modal .input_border inputinput::-webkit-input-placeholder,
+.editDesignType_modal .input_border inputinput::-webkit-input-placeholder,
 .accountEdit_page .input_border inputinput::-webkit-input-placeholder,
 .generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder,
 .generate .input_border inputinput::-webkit-input-placeholder {
@@ -2091,6 +2118,7 @@ textarea:focus {
 .productImg_content .input_border input.forbidden,
 .poseTransfer .input_border input.forbidden,
 .scaleImage_modal .input_border input.forbidden,
+.editDesignType_modal .input_border input.forbidden,
 .accountEdit_page .input_border input.forbidden,
 .generalMenu_printModel_upload .input_border input.forbidden,
 .generate .input_border input.forbidden {
@@ -2102,6 +2130,7 @@ textarea:focus {
 .productImg_content .input_border .input_box_btnBox_upImg,
 .poseTransfer .input_border .input_box_btnBox_upImg,
 .scaleImage_modal .input_border .input_box_btnBox_upImg,
+.editDesignType_modal .input_border .input_box_btnBox_upImg,
 .accountEdit_page .input_border .input_box_btnBox_upImg,
 .generalMenu_printModel_upload .input_border .input_box_btnBox_upImg,
 .generate .input_border .input_box_btnBox_upImg {
@@ -2113,6 +2142,7 @@ textarea:focus {
 .productImg_content .input_border .fi,
 .poseTransfer .input_border .fi,
 .scaleImage_modal .input_border .fi,
+.editDesignType_modal .input_border .fi,
 .accountEdit_page .input_border .fi,
 .generalMenu_printModel_upload .input_border .fi,
 .generate .input_border .fi {
@@ -2132,6 +2162,7 @@ textarea:focus {
 .productImg_content .input_border .fi.fi-br-loading,
 .poseTransfer .input_border .fi.fi-br-loading,
 .scaleImage_modal .input_border .fi.fi-br-loading,
+.editDesignType_modal .input_border .fi.fi-br-loading,
 .accountEdit_page .input_border .fi.fi-br-loading,
 .generalMenu_printModel_upload .input_border .fi.fi-br-loading,
 .generate .input_border .fi.fi-br-loading {
@@ -2144,6 +2175,7 @@ textarea:focus {
 .productImg_content .input_border .fi.active,
 .poseTransfer .input_border .fi.active,
 .scaleImage_modal .input_border .fi.active,
+.editDesignType_modal .input_border .fi.active,
 .accountEdit_page .input_border .fi.active,
 .generalMenu_printModel_upload .input_border .fi.active,
 .generate .input_border .fi.active {
@@ -2155,6 +2187,7 @@ textarea:focus {
 .productImg_content .input_border .fi.forbidden,
 .poseTransfer .input_border .fi.forbidden,
 .scaleImage_modal .input_border .fi.forbidden,
+.editDesignType_modal .input_border .fi.forbidden,
 .accountEdit_page .input_border .fi.forbidden,
 .generalMenu_printModel_upload .input_border .fi.forbidden,
 .generate .input_border .fi.forbidden {
@@ -2166,6 +2199,7 @@ textarea:focus {
 .productImg_content .input_border .search_upImg,
 .poseTransfer .input_border .search_upImg,
 .scaleImage_modal .input_border .search_upImg,
+.editDesignType_modal .input_border .search_upImg,
 .accountEdit_page .input_border .search_upImg,
 .generalMenu_printModel_upload .input_border .search_upImg,
 .generate .input_border .search_upImg {
@@ -2181,6 +2215,7 @@ textarea:focus {
 .productImg_content .input_border .search_upImg span,
 .poseTransfer .input_border .search_upImg span,
 .scaleImage_modal .input_border .search_upImg span,
+.editDesignType_modal .input_border .search_upImg span,
 .accountEdit_page .input_border .search_upImg span,
 .generalMenu_printModel_upload .input_border .search_upImg span,
 .generate .input_border .search_upImg span {
@@ -2193,6 +2228,7 @@ textarea:focus {
 .productImg_content .input_border .search_upImg .ant-upload-select-picture-card,
 .poseTransfer .input_border .search_upImg .ant-upload-select-picture-card,
 .scaleImage_modal .input_border .search_upImg .ant-upload-select-picture-card,
+.editDesignType_modal .input_border .search_upImg .ant-upload-select-picture-card,
 .accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card,
 .generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card,
 .generate .input_border .search_upImg .ant-upload-select-picture-card {
@@ -2206,6 +2242,7 @@ textarea:focus {
 .productImg_content .input_border .search_textarea,
 .poseTransfer .input_border .search_textarea,
 .scaleImage_modal .input_border .search_textarea,
+.editDesignType_modal .input_border .search_textarea,
 .accountEdit_page .input_border .search_textarea,
 .generalMenu_printModel_upload .input_border .search_textarea,
 .generate .input_border .search_textarea {
@@ -2214,7 +2251,7 @@ textarea:focus {
   position: absolute;
   left: 0;
   font-size: calc(1.6rem*1.2);
-  width: var(--width);
+  width: 100%;
   border-radius: 4px;
   height: 20rem;
   top: 0rem;

src/assets/style/style.less

@@ -10,7 +10,7 @@ html,body,#app{
 	--aida-fsize1-8: calc(1.8rem);
 	--aida-fsize1-6: calc(1.6rem);
 	--aida-fsize1-4: calc(1.4rem*1.2);
-	--antd-wave-shadow-color:#39215b;
+	--antd-wave-shadow-color:#000;
 }
 ::selection{
 	background-color: #1890ff;
@@ -60,8 +60,10 @@ input:focus{
 }
 
   .ant-slider.system_silder{
-   margin: 0;
-	  width: 100%;
+		margin: 0;
+		margin-left: 1rem;
+		margin-right: 1rem;
+	  width: calc(100% - 2rem);
 
    .ant-slider-rail{
      height: 0.6rem;
@@ -787,6 +789,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 			}
 			.ant-picker-range,.ant-select-selector,.range_picker{
 				padding: 1rem 2rem !important;
+				padding-right: 3rem !important;
 			}
 			.el-cascader{
 				padding: 1rem 2rem;
@@ -1911,7 +1914,7 @@ textarea:focus{
 	
 }
 //设计input和上传按钮样式
-.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_content,.poseTransfer,.scaleImage_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
+.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_content,.poseTransfer,.scaleImage_modal,.editDesignType_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
 	.input_border{
 		z-index: 2;
 		display: flex;
@@ -1919,10 +1922,11 @@ textarea:focus{
 		padding-bottom: calc(2rem*1.2);
 		top: 0;
 		flex-wrap: wrap;
+		z-index: 6;
 		--width:65%;
 		.input_box{
 			position: relative;
-			z-index: 2;
+			z-index: 6;
 			flex: 1;
 			display: flex;
 			align-items: center;
@@ -1995,10 +1999,11 @@ textarea:focus{
 			float: left;
 			align-items: center;
 			padding: 1.5rem 2rem;
-			padding-right: 0;
+			// padding-right: 0;
 			background-color: #fff;
 			flex: 1;
-			height: 5rem;
+			height: auto;
+			// height: 5rem;
 			// border
 			&.sketch{
 				padding: 0;
@@ -2017,7 +2022,8 @@ textarea:focus{
 			> .textarea{
 					border-radius: 1rem;
 					min-height: 2rem;
-					max-height: 20rem;
+					// max-height: 20rem;
+					max-height: 14rem;
 					border: none;
 					resize: none;
 					height: 2.7rem;
@@ -2123,7 +2129,8 @@ textarea:focus{
 			left: 0;
 			font-size: calc(1.6rem*1.2);
 			// width: 30rem;
-			width: var(--width);
+			// width: var(--width);
+			width: 100%;
 			border-radius: 4px;
 			height: 20rem;
 			top: 0rem;

src/component/Account/account.vue

@@ -405,6 +405,9 @@ export default defineComponent({
 				text-align: center;
 				margin-right: 2rem;
 				padding: 12px 0;
+				> a{
+					border-radius: 1rem;
+				}
 			}
 			.account_page_content_right{
 				flex: 1;
@@ -486,7 +489,7 @@ export default defineComponent({
 			font-size: 1.4rem;
 		}
 		.search_icon_block{
-			background: #39215b;
+			background: #000;
 			color: #fff;
 			padding: .5rem 2rem;
 			font-size: 1.8rem;
@@ -525,7 +528,7 @@ export default defineComponent({
 		right: 0;
 	}
 	.account_generalMessage_item_link{
-		color: #39215b;
+		color: #000;
 		cursor: pointer;
 		font-weight: 600;
 	}

src/component/Account/message/privateChat.vue

@@ -372,7 +372,7 @@ export default defineComponent({
 							}
 							.content_right_record_item_text{
 								border-radius: 2rem 0rem 2rem 2rem;
-								background: #39215b;
+								background: #000;
 								color: #fff;
 							}
 						}

src/component/Administrator/affiliate/itemAffiliateDetail.vue

@@ -14,7 +14,7 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
 						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
 						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
 					</svg>

src/component/Administrator/allUserPoerations.vue

@@ -16,7 +16,7 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
 						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
 						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
 					</svg>

src/component/Administrator/organization/add.vue

@@ -17,7 +17,7 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
 						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
 						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
 					</svg>

src/component/Canvas/index.vue

@@ -1,18 +1,15 @@
 <template>
-  <div class="red-green-mode-example">
+  <div class="canvasBox">
     <!-- 画布编辑器 - 永久启用红绿图模式 -->
     <div class="canvas-wrapper">
-      <div class="canvas-wrapper-btns">
-        <div @click="getJSON">获取JSON</div>
-        <div @click="loadJSON">读取JSON</div>
-      </div>
       <CanvasEditor
         ref="canvasEditor"
         :enabledRedGreenMode="false"
-        :clothingImageUrl="imageUrls.baseImage"
-        :redGreenImageUrl="imageUrls.maskImage"
       />
     </div>
+	<div class="btn">123
+		<div class="gallery_btn" @click="exportElement">Export</div>
+	</div>
   </div>
 </template>
 
@@ -23,11 +20,6 @@ import CanvasEditor from "./CanvasEditor/index.vue";
 // 画布编辑器引用
 const canvasEditor = ref(null);
 
-// 图像URL配置
-const imageUrls = {
-  baseImage: "@/assets/redGreenPic/clothing_base_image.png",
-  maskImage: "@/assets/redGreenPic/clothing_mask_image.png",
-};
 const getJSON = () => {
   if (canvasEditor.value) {
     const json = canvasEditor.value.getJSON();
@@ -43,7 +35,42 @@ const loadJSON = () => {
     console.log("加载的JSON数据：", currentJSON);
   }
 };
+const exportElement = ()=>{
+	canvasEditor.value.exportImage({isContainBg:true,isContainFixed:false}).then((rv)=>{
+		console.log(rv)
+		downloadBase64Image(rv,'canvas')
+	})
+}
+function downloadBase64Image(base64Data, filename) {
+  // 1. 提取MIME类型（自动处理各种Base64前缀）
+  const mimeMatch = base64Data.match(/^data:(.+?);base64,/);
+  if (!mimeMatch) {
+    console.error('Invalid Base64 data');
+    return;
+  }
+  // 2. 获取扩展名
+  const mimeType = mimeMatch[1];
+  const extension = mimeType.split('/')[1] || 'png';
 
+  // 3. 转换Base64为Blob
+  const byteString = atob(base64Data.split(',')[1]);
+  const ab = new ArrayBuffer(byteString.length);
+  const ia = new Uint8Array(ab);
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+  const blob = new Blob([ab], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${filename}.${extension}`;
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(() => {
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, 100);
+}
 // 组件挂载时绑定键盘事件
 onMounted(() => {});
 
@@ -52,14 +79,16 @@ onUnmounted(() => {});
 </script>
 
 <style scoped lang="less">
-.red-green-mode-example {
+.canvasBox {
   width: 100%;
 //   height: 100vh;
 	height: 100%;
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	// flex-direction: column;
+}
+.btn{
+	margin-top: auto;
 }
-
 .canvas-wrapper {
   flex: 1;
   position: relative;

src/component/Canvas/test.vue

@@ -14,7 +14,7 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
 						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
 						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
 					</svg>

src/component/Detail/DesignDetailAlter.vue

@@ -86,6 +86,7 @@
 									:data="{
 										...upload,
 										gender:workspace.sex,
+										ageGroup:workspace.ageGroup,
 									}"
 									:headers="{ Authorization: token }"
 									v-model:file-list="uploadList"
@@ -1751,7 +1752,7 @@ export default defineComponent({
 									border-radius: 50%;
 									width: 4rem;
 									height: 4rem;
-									border: solid 2px #39215b;
+									border: solid 2px #000;
 									display: flex;
 									align-items: center;
 									justify-content: center;
@@ -1769,7 +1770,7 @@ export default defineComponent({
 										width: 1rem;
 										height: 1rem;
 										border-radius: 50%;
-										background: #39215b;
+										background: #000;
 									}
 								}
 							}

src/component/DetailCopy/canvas/index.vue

@@ -18,18 +18,19 @@
 					<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
 				</div> -->
 				<div class="contet">
-					<div class="canvas" v-if="!isEditFrontBack" @click.stop>
-						<editCanvas v-if="canvasLoad && currentView === 'canvasEditor'" :config="canvasConfig" 
-							:clothingImageUrl="selectDetail.undividedLayer" 
+					<div class="canvas" v-if="currentView === 'canvasEditor'" @click.stop>
+						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+							@canvasInit="canvasInit"
+							:clothingImageUrl="selectDetail.undividedLayer"
 							isFixedErasable
+							showFixedLayer
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
 							ref="editCanvas">
 							<template #customTools="{ toolButtonProps }">
 								<!-- 也可以直接使用普通的按钮 -->
-								 {{toolButtonProps}}
-								<div class="custom-tool-btn" @click="setCurrentView('redGreenExample')">
+								<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('redGreenExample')">
 									<i class="fi fi-sr-layers"></i>
 									<div class="tool-tooltip">Edit the front and back sections</div>
 								</div>
@@ -37,16 +38,16 @@
 						</editCanvas>
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
 					</div>
-					<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
+					<div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop>
 						<!-- <editFrontBack 
 							:patchData="frontBack" 
 							:imgDomIndex="imgDomIndex" 
 							
 							ref="editFrontBack">
 						</editFrontBack> -->
-						<editCanvas v-if="canvasLoad && currentView === 'redGreenExample'" :config="canvasConfig" 
+						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:enabledRedGreenMode="true"
-							:clothingImageUrl="selectDetail.undividedLayer" 
+							:clothingImageUrl="selectDetail.path" 
 							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
 							@trigger-red-green-mouseup="frontBackChange"
 							:clothing-image-opts="{
@@ -54,7 +55,7 @@
 							}"
 							ref="editCanvasBackFront">
 							<template #customTools="{ toolButtonProps }">
-								<div class="custom-tool-btn" @click="setCurrentView('canvasEditor')">
+								<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('canvasEditor')">
 									<i class="fi fi-sr-layers"></i>
 									<div class="tool-tooltip">Edit the front and back sections</div>
 								</div>
@@ -67,9 +68,6 @@
 					<div class="gallery_btn" @click="privewDetail">Finish</div>
 				</div> -->
 			</div>
-			<div class="Finish" style="text-align: right;margin-top:1rem;">
-				<div class="gallery_btn" style="line-height: 4rem;padding: 0 1rem;" @click="editFront">EditFrontBack</div>
-			</div>
 		 </div>
 		
 		<!-- <div class="mark_loading" v-show="isShowMark">
@@ -121,13 +119,14 @@ export default defineComponent({
 			liquefaction:null as any,
 			canvasType:'export',
 			imgDomIndex:-1,
-			isEditFrontBack:false,
 		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
 			canvasLoad:false,
 			canvasConfig:{
 			} as any,
 			currentView:'canvasEditor',
+			getCanvasIfEdit:inject('getCanvasIfEdit')as any,
+			canvasInstance:null as any,
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -152,10 +151,10 @@ export default defineComponent({
 		const toolLiquefaction = ()=>{//工具点击按钮
 			setLiquefaction()
 		}
-		const editFront = ()=>{//编辑前后片
+		const editFront = (str:any)=>{//编辑前后片
 
 			let canvasJSON = '' as any
-			if(!detailData.isEditFrontBack){
+			if(detailData.currentView === 'canvasEditor'){
 				sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
 				canvasJSON = sessionStorage.getItem('frontBackEdit');
 			}else{
@@ -163,18 +162,18 @@ export default defineComponent({
 				canvasJSON = sessionStorage.getItem('sketchEdit');
 			}
 			detailData.canvasLoad = false
-			detailData.isEditFrontBack = !detailData.isEditFrontBack
+			detailData.currentView = str
 			if(canvasJSON){
 				detailData.canvasLoad = true
 				nextTick(()=>{
-					if(!detailData.isEditFrontBack){
+					if(detailData.currentView === 'redGreenExample'){
 						detailDom.editCanvas.loadJSON(canvasJSON)
 					}else{
 						detailDom.editCanvasBackFront.loadJSON(canvasJSON)
 					}
 				})
 			}else{
-				if(!detailData.isEditFrontBack){
+				if(detailData.currentView === 'redGreenExample'){
 					nextTick(()=>{
 						setCanvas(detailData.selectDetail.undividedLayer).then(()=>{
 							detailData.canvasLoad = true
@@ -190,6 +189,7 @@ export default defineComponent({
 			}
 		}
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
+			if(!detailDom.editCanvas)return
 			return new Promise((res,reject)=>{
 				detailDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
 					// let data = await detailData.canvasObj.detailSubmit()
@@ -225,18 +225,36 @@ export default defineComponent({
 				...detailData.canvasConfig,
 			}
 			segmentImage(value,full,size).then((rv)=>{
-				detailData.frontBack.front[detailData.imgDomIndex].imageUrl = rv.targetFrontUrl
-				detailData.frontBack.back[detailData.imgDomIndex].imageUrl = rv.targetBackUrl
-				detailData.frontBack.front[detailData.imgDomIndex].maskUrl = value
+				let front = detailData.frontBack.front[detailData.imgDomIndex]
+				let back = detailData.frontBack.back[detailData.imgDomIndex]
+				if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
+				if(!front?.oldMaskUrl)front.oldMaskUrl = front.imageUrl
+				if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
+				if(!front?.oldMaskUrl)store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:front.oldMaskUrl})
+
+				front.imageUrl = rv.targetFrontUrl
+				front.maskUrl = value
+				back.imageUrl = rv.targetBackUrl
 				store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:value})
 			})
 
 		}
-		const setCurrentView = (str:string)=>{
-			detailData.currentView = str
+		const canvasInit = (value:any)=>{
+			// detailDom.editCanvas.addImageToLayer(detailData.selectDetail.undividedLayer,{layerId:value.layers.value[0].id,imageMode:'contains',undoable:false})
+			detailData.canvasInstance = value
+			detailData.getCanvasIfEdit.fun = getCanvasLength
+		}
+		const getCanvasLength = ()=>{
+			return detailData.canvasInstance?.commandManager?.undoStack?.length
 		}
 		onBeforeUnmount(()=>{
-			console.log(12312)
+			let front = detailData.frontBack.front[detailData.imgDomIndex]
+			let back = detailData.frontBack.back[detailData.imgDomIndex]
+			if(front?.oldImageUrl)front.imageUrl = front.oldImageUrl
+			if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
+			if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
+			if(front?.oldMaskUrl)store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:front.oldMaskUrl})
+
 			sessionStorage.removeItem('frontBackEdit');
 			sessionStorage.removeItem('sketchEdit');
 			detailData.canvasLoad = false
@@ -257,7 +275,7 @@ export default defineComponent({
 			privewDetail,
 			setFrontBackColor,
 			frontBackChange,
-			setCurrentView,
+			canvasInit,
         }
     },
 	provide() {
@@ -374,10 +392,18 @@ export default defineComponent({
   font-size: 16px;
   color: #333;
   transition: all 0.2s ease;
+  &.active{
+	background-color: #e6f7ff;
+    color: #1890ff;
+  }
 }
 
 .custom-tool-btn:hover {
   background-color: #f0f0f0;
+  &.active{
+	background-color: #e6f7ff;
+    color: #1890ff;
+  }
 }
 
 .custom-tool-btn:hover .tool-tooltip {

src/component/DetailCopy/designDetail.vue

@@ -39,7 +39,7 @@
 							<img src="@/assets/images/icon/details_elements.png" alt="">
 							<div class="detailText">{{$t('DesignPrintOperation.Elements')}}</div>
 						</div>
-						<div class="nav_item" :class="{active:currentDetailType == 'models'}" @click="setCurrentDetail('models')">
+						<div class="nav_item" v-if="selectObject.type == 'seriesDesign'" :class="{active:currentDetailType == 'models'}" @click="setCurrentDetail('models')">
 							<img src="@/assets/images/icon/details_model.svg" alt="">
 							<div class="detailText">{{$t('DesignPrintOperation.Model')}}</div>
 						</div>
@@ -48,7 +48,7 @@
 				<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
 					<detailLeft v-if="currentDetailType"></detailLeft>
 					<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
-					 <div class="btn" v-show="currentDetailType == 'color'">
+					 <div class="btn" style="margin: 0;" v-show="currentDetailType == 'color'">
 						<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
 					</div>
 				</div>
@@ -62,9 +62,9 @@
 						@revocation="revocation"
 						@oppositeRevocation="oppositeRevocation"
 					></model>
-					<div class="btn" style="margin-left: 0;">
-						<div class="gallery_btn" @click="submit">{{$t('DesignPrintOperation.Submit')}}</div>
-						<!-- <div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div> -->
+					<div class="btn">
+						<div class="gallery_btn" style="margin-right: 0;" @click="submit">{{$t('DesignPrintOperation.Submit')}}</div>
+						<div v-show="isEditPattern.value" style="margin-left: 2rem;" class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
 					</div>
 				</div>
 				<div class="item detailRight">
@@ -78,6 +78,7 @@
 								(currentDetailType === 'element' ||
 								currentDetailType === 'print' ||
 								(currentDetailType === 'sketch' && selectDetail?.newDetail?.[currentDetailType])|| 
+								(currentDetailType === 'sketch' && selectDetail?.sketchString)|| 
 								(currentDetailType === 'models' && designDetail?.newModel))
 								"
 						>
@@ -133,6 +134,7 @@ export default defineComponent({
 			return store.state.UserHabit.userDetail
 		})
 		const detailData = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
@@ -184,11 +186,11 @@ export default defineComponent({
 							}
 						}else{
 							item.color = {
-								rgba:{
-									r:undefined,
-									g:undefined,
-									b:undefined,
-								}
+								// rgba:{
+								// 	r:undefined,
+								// 	g:undefined,
+								// 	b:undefined,
+								// }
 							}
 						}
 						if(item.gradient){
@@ -281,7 +283,7 @@ export default defineComponent({
 				let isCurrent = list[i].id == detailData?.selectDetail?.id
 				let data:any = {
 					changed:false,
-					color:(detailData.currentDetailType == 'color' && isCurrent)?(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):(list[i].color.rgba.r?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''),
+					color:(detailData.currentDetailType == 'color' && isCurrent)?(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):(list[i].color?.rgba?.r?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''),
 					designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType,
 					id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
 					// maskMinioUrl:'',
@@ -293,7 +295,7 @@ export default defineComponent({
 					printObject:(newData && detailData.currentDetailType == 'print' && isCurrent)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
 					priority,
 					scale,
-					type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
+					type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type || newData.categoryValue:list[i].type,
 					sketchString:list[i].sketchString?list[i].sketchString:'',
 					trims:(newData && detailData.currentDetailType == 'element' && isCurrent)?{prints:newData}:list[i].trims?list[i].trims:{prints:[]},
 				}
@@ -327,6 +329,7 @@ export default defineComponent({
 				modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				processId:userDetail.value.userId,
+				probjectId:store.state.Workspace.probjects,
 			}
 			detailData.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
@@ -352,8 +355,11 @@ export default defineComponent({
 				// ifSubmit:designItemDetail.isPreview,
 				gender:workspace?.sex == 'Male'?1:0,
 				sketchString:'',
+				modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
+				modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				processId:userDetail.value.userId,
+				probjectId:store.state.Workspace.probjects,
 			}
 			detailData.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
@@ -552,12 +558,6 @@ export default defineComponent({
 					display: flex;
 					justify-content: center;
 					margin-left: 12rem;
-					> div{
-						margin-right: 2rem;
-					}
-					> div:last-child{
-						margin-right: 0rem;
-					}
 				}
 			}
 			> .nav{

src/component/DetailCopy/detailLeft/colorBox/index.vue

@@ -149,6 +149,7 @@ export default defineComponent({
 				colorData.colorList.list[newVal].push(item)
 			}
 			if(!isNoSelect){
+				if(!colorData.selectDetail.color?.rgba?.r)return
 				let item = {
 					hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
 					id:colorData.selectDetail.color.id,

src/component/DetailCopy/detailLeft/colorBox/pallet.vue

@@ -577,7 +577,7 @@ export default defineComponent({
 									border-radius: 50%;
 									width: 4rem;
 									height: 4rem;
-									border: solid 2px #39215b;
+									border: solid 2px #000;
 									display: flex;
 									align-items: center;
 									justify-content: center;
@@ -595,7 +595,7 @@ export default defineComponent({
 										width: 1rem;
 										height: 1rem;
 										border-radius: 50%;
-										background: #39215b;
+										background: #000;
 									}
 								}
 							}

src/component/DetailCopy/detailLeft/index.vue

@@ -47,6 +47,9 @@ export default defineComponent({
 		}
 		const setSloganData = (data:any)=>{
 			detailData.selectDetail.sketchString = data
+			if(detailData.currentDetailType == 'sketch' && detailData.selectDetail?.newDetail?.sketch){
+				detailData.selectDetail.newDetail.sketch = null
+			}
 		}
 		
         return{

src/component/DetailCopy/detailLeft/models.vue

@@ -92,6 +92,7 @@ export default defineComponent({
 		flex-direction: column;
 		> .detailText{
 			margin-bottom: 1rem;
+			text-align: left;
 		}
 		> .select_sketch{
 			width: 100%;

src/component/DetailCopy/detailLeft/module/libraryList.vue

@@ -4,7 +4,7 @@
 			<div class="generalModel_state_item" v-if="level1Type != 'Models' && catecoryList.length > 0" :style="{'width':(level1Type == 'DesignElements'?'100%':'40%')}">
 				<a-select
 					v-model:value="designType"
-					:options="(designTypeList || catecoryList)"
+					:options="(designTypeList)"
 					@change="handleChange"
 					style="width:100%"
 					size="large"
@@ -113,6 +113,7 @@ import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, react
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
 		sketchCategory
@@ -146,10 +147,11 @@ export default defineComponent({
 	emits:['selectImgItem'],
     setup(props,{emit}) {
         const store = useStore();
+		const {t} = useI18n()
 		const detailData = reactive({
 			isShowLoading:false,//懒加载，加载中
 			libraryList:[],
-			designTypeList:[] as any,
+			designTypeList:computed(()=>props.catecoryList) as any,
 			designType:'',
 			searchPictureName:'',
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
@@ -161,7 +163,7 @@ export default defineComponent({
 				systemList:[],
 				libraryList:[],
 			},
-			systemList:[{name:'System',value:'system',},{name:'Library',value:'library',}],//系统
+			systemList:[{name:t('libraryList.System'),value:'system',},{name:t('libraryList.Library'),value:'library',}],//系统
 			mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//风格列表
 			sexList:computed(()=>store.state.UserHabit.sex.value),//风格列表
 			ageGroupList:computed(()=>store.state.UserHabit.ageGroup),//风格列表
@@ -173,13 +175,16 @@ export default defineComponent({
 			detailData.mannequinData.style = newValue.style?newValue.style:''
 			detailData.mannequinData.ageGroup = newValue.ageGroup?newValue.ageGroup:''
 		},{immediate:true})
+		watch(()=>detailData.designTypeList.length,(newValue,oldValue)=>{
+			detailData.designType = detailData.designTypeList[0]?.value?detailData.designTypeList[0]?.value:''
+			getLibraryList()
+		})
 		const getDetailListData = reactive({
 			total:0,
 			pageSize:10,
 			currentPage:1,
 		})
 		const init = ()=>{
-			detailData.designTypeList = props.catecoryList
 			detailData.designType = detailData.designTypeList[0]?.value?detailData.designTypeList[0]?.value:''
 			getLibraryList()
 		}

src/component/DetailCopy/detailLeft/module/selectList.vue

@@ -53,6 +53,7 @@ import libraryList from './libraryList.vue'
 import uploadList from './uploadList.vue'
 import uploadSegmentation from './uploadSegmentation.vue'
 import currentList from './currentList.vue'
+import { getMinioUrl } from '@/tool/util';
 export default defineComponent({
     components:{
 		currentList,
@@ -171,6 +172,7 @@ export default defineComponent({
 					position: relative;
 					cursor: pointer;
 					margin-right: 6.5rem;
+					font-size: 1.8rem;
 				}
 				> .switch_type_item::before {
 						position: absolute;

src/component/DetailCopy/detailLeft/module/uploadList.vue

@@ -85,6 +85,7 @@ export default defineComponent({
 					level1Type: props.level1Type,
 					gender:store.state.Workspace.probjects.sex ,
 					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+					ageGroup:store.state.Workspace.probjects.ageGroup,
 				},
 			token:getCookie("token"),
 			uploadUrl:getUploadUrl(),

src/component/DetailCopy/detailLeft/module/uploadModel.vue

@@ -53,7 +53,7 @@
 			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
 				<div class="content_img_item_block" :class="{active:file?.checked}">
 					<img v-lazy="file.url" :key="file.url" :alt="file.name"/>
-					<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true"></sketchCategory>
+					<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true" :upDataType="'element'"></sketchCategory>
 				</div>
 			</div>
 			<div class="upload_item">
@@ -105,7 +105,7 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 		uploadList:[],
 	  });
 	  let operationsData = reactive({
-		
+		selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 	  });
 	  const getUploadElement = () => {
 	  };
@@ -120,7 +120,11 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 	  let setOk = () => {
 		clearData()
 	  };
-	  const upload = ()=>{
+		const createProbject:any = inject('createProbject',()=>{}) as any
+
+	  const upload = async ()=>{
+			if(!operationsData.selectObject?.id)await createProbject()
+
 			const input = document.createElement('input');
 			input.type = 'file';
 			input.accept = 'image/*';  // 只允许选择图片文件
@@ -136,7 +140,11 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 				let param = new FormData(); 
 				param.append('isPin', '0');
 				param.append('gender', store.state.Workspace.probjects.sex);
-				param.append('level1Type', 'Sketchboard');
+				param.append('ageGroup',store.state.Workspace.probjects.ageGroup)
+				param.append('projectId', operationsData.selectObject.id);
+				param.append('level1Type', 'De/Reconstruction');
+				param.append('level2Type', props.deReconstructionList[0].value);
+				
 				param.append('timeZone', Intl.DateTimeFormat().resolvedOptions().timeZone);
 				file.forEach((image:any) => {
 					param.append('file', image);

src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue

@@ -2,10 +2,11 @@
 <template>
     <div class="uploadList">
 		<div class="uploadList_box">
-			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
+			<div class="content_img_item" v-for="(file,index) in uploadList" :key="file.id">
 				<div class="content_img_item_block" :class="{active:file?.checked}">
 					<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
-					<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true"></sketchCategory>
+					<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true" :upDataType="'element'"></sketchCategory>
+					<i class="fi fi-rr-trash icon_delete" @click="deleteImgItem(file,index)"></i>
 				</div>
 			</div>
 			<div class="upload_item">
@@ -65,7 +66,7 @@ export default defineComponent({
         const store = useStore();
 		const detailData = reactive({
 			isShowLoading:false,//懒加载，加载中
-			uploadList:[] as any,
+			uploadList:computed(()=>store.state.HomeStoreModule.deReconstructionUploadImages) as any,
 			upload:props.segmentation?
 				props.segmentation:{
 					isPin: 0,
@@ -98,6 +99,18 @@ export default defineComponent({
 		const openUpload = ()=>{
 			dataDom.uploadModel.init()
 		}
+		const deleteImgItem = (item:any,index)=>{
+			console.log(item)
+			Https.axiosPost(
+				Https.httpUrls.elementDelete,
+				{
+					id:item.id,
+				}
+			).then(res=>{
+				detailData.uploadList.splice(item.index,1)
+			})
+
+		}
         return{
 			...toRefs(detailData),
 			...toRefs(dataDom),
@@ -106,6 +119,7 @@ export default defineComponent({
 			selectImgItem,
 			openUpload,
 			setUploadImgList,
+			deleteImgItem,
         }
     },
 	provide() {
@@ -143,6 +157,19 @@ export default defineComponent({
 						height: 100%;
 						object-fit: contain;
 					}
+					&:hover{
+						> .icon_delete{
+							opacity: 1;
+						}	
+					}
+					> .icon_delete{
+						position: absolute;
+						right: 1rem;
+						top: 1rem;
+						font-size: 1.8rem;
+						cursor: pointer;
+						opacity: 0;
+					}
 				}
 			}
 			> .material_content_list_loding{

src/component/DetailCopy/detailLeft/sketch.vue

@@ -3,7 +3,8 @@
 		<div class="detailText">{{$t('DesignPrintOperation.CurrentSketch')}}</div>
 		<div class="select_sketch" v-if="selectDetail.id">
 			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
-			<img :src="selectDetail.sketchString || selectDetail.path" alt="">
+			<img :src="selectDetail.path" alt="">
+			<!-- <img :src="selectDetail.sketchString || selectDetail.path" alt=""> -->
 			<i :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="openAddDetail"></i>
 		</div>
 		<div class="select_sketch" v-else>
@@ -11,7 +12,7 @@
 				<i class="fi fi-rr-picture centent"></i>
 			</div>
 		</div>
-		<selectList @selectImgItem="selectImgItem" level1Type="Sketchboard" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
+		<selectList @selectImgItem="selectImgItem" source="detail" level1Type="Sketchboard" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
     </div>
 </template>
 <script lang="ts">
@@ -58,10 +59,14 @@ export default defineComponent({
 			getDetailListDom.libraryList.init()
 		}
 		const selectImgItem = (data:any)=>{
+			console.log(data)
 			if(data?.imgUrl)data.url = data.imgUrl
 			let value = {
 				data,
 			}
+			if(detailData.currentDetailType == 'sketch'){
+				detailData.selectDetail.sketchString = ''
+			}
 			store.commit('DesignDetailCopy/setNewDetail',value)
 		}
 		const openAddDetail = ()=>{
@@ -96,6 +101,7 @@ export default defineComponent({
 		flex-direction: column;
 		> .detailText{
 			margin-bottom: 1rem;
+			text-align: left;
 		}
 		> .select_sketch{
 			width: 100%;

src/component/DetailCopy/detailRight/editPrintElement.vue

@@ -4,6 +4,7 @@
 			<div class="overallSlogin">
 				<div
 					class="habit_Overal_Single_text"
+					style="margin-left: 0"
 					:class="{ active: !overallSingle }"
 				>
 					{{ $t('DesignPrintOperation.Overall') }}
@@ -28,9 +29,10 @@
 				</a-slider>
 			</div>
 		</div>
-		<div class="printElementList" ref="printElementList">
+		<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}">
 			<div class="itemList" :style="{width:prentWidth || 0}">
 				<div class="imgItem" 
+					v-if="stateOverallSingle == 'single'"
 					v-for="item in printStyleList[type][stateOverallSingle]" 
 					:key="item"
 					@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')" 
@@ -39,6 +41,15 @@
 					<img :src="item.path" alt="">
 					<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
 				</div>
+				<div class="imgItem" 
+					v-if="stateOverallSingle == 'overall'"
+					v-for="item in printStyleList[type][stateOverallSingle]" 
+					:key="item"
+					style="width:14rem;height:14rem;"
+				>
+					<img :src="item.path" alt="">
+					<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
+				</div>
 			</div>
 		</div>
 		<div class="editPrintElementBox">
@@ -83,9 +94,9 @@
 				<a-spin size="large" />
 			</div>
 		</div>
-		<div class="clearOverall" style="text-align: center; height: 6rem;">
+		<!-- <div class="clearOverall" style="text-align: center; height: 6rem;">
 			<div class="gallery_btn" v-show="!overallSingle && type == 'print'" style="line-height: 5rem;" @click="clearOverall">Clear</div>
-		</div>
+		</div> -->
     </div>
     
 </template>
@@ -161,6 +172,7 @@ export default defineComponent({
 			}else{
 				editPrintElementData.stateOverallSingle = 'single'
 			}
+			setItemPosition()
 		}
 		const formatter = (value:any)=>{
 			return `${value}%`;
@@ -711,6 +723,7 @@ export default defineComponent({
 				});
 			}
 			collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
+			moveItem()
 		} 
 		onMounted(()=>{
 			if(props.type == 'element'){
@@ -828,6 +841,7 @@ export default defineComponent({
 		flex-direction: column;
 		> .printOverallBtn{
 			display: flex;
+			flex-direction: column;
 			> .overallSlogin{
 				align-items: center;
 				display: flex;
@@ -844,7 +858,6 @@ export default defineComponent({
 				}
 			}
 			.habit_System_Designer {
-				transform: scale(.8);
 				align-items: center;
 				display: flex;
 				.ant-slider-track,
@@ -920,7 +933,9 @@ export default defineComponent({
 				transform: translate(-50%,-50%);
 				display: flex;
 				justify-content: center;
-				width: 100%;
+				// width: 100%;
+				// max-height: 70%;
+				width: max-content;
 				&.active{
 					flex-direction: row;
 				}
@@ -933,8 +948,9 @@ export default defineComponent({
 					>img{
 						z-index: 2;
 						position: relative;
-						height: 100%;
-						width: 100%;
+						// height: 100%;
+						max-width: 100%;
+						// width: 100%;
 
 					}
 					.designOpenrtion_sketch_mask{

src/component/DetailCopy/detailRight/modelsType.vue

@@ -46,10 +46,17 @@ export default defineComponent({
     .sketchType{
 		margin: auto 0;
 		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
 		> .detailText{
 			margin-bottom: 1rem;
+			text-align: left;
 		}
 		> .sketchContent{
+			flex: 1;
+			display: flex;
+			align-items: center;
 			> img{
 				width: 100%;
 				object-fit: contain;

src/component/DetailCopy/detailRight/sketchType.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
+    <div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType] || selectDetail.sketchString">
 		<div class="detailText">{{$t('DesignPrintOperation.NewApparel')}}</div>
 		<div class="sketchContent">
-			<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">
+			<img :src="(selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.sketchString)" :title="selectDetail.type" alt="">
 		</div>
     </div>
 </template>
@@ -46,10 +46,17 @@ export default defineComponent({
     .sketchType{
 		margin: auto 0;
 		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
 		> .detailText{
 			margin-bottom: 1rem;
+			text-align: left;
 		}
 		> .sketchContent{
+			flex: 1;
+			display: flex;
+			align-items: center;
 			> img{
 				width: 100%;
 				object-fit: contain;

src/component/DetailCopy/model/index.vue

@@ -63,7 +63,7 @@ export default defineComponent({
 			new Promise((resolve, reject) => {
 				if(
 					getDetailListData.isEditPattern.value&&
-					detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
+					detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
 				){
 					Modal.confirm({
 						title: t('collectionModal.jsContent2'),
@@ -180,6 +180,9 @@ export default defineComponent({
 					width: 4rem;
 					height: 4rem;
 					justify-content: center;
+					@media (min-width: 1024px) {
+						font-size: 2.4rem;
+					}
 				}
 				> i:hover{
 					background: #000000;

src/component/DetailCopy/model/modelNav.vue

@@ -67,10 +67,11 @@ export default defineComponent({
 			})
 		},{immediate:true})
 		const selectDetailItem = (item:any,index:number)=>{
+			console.log(detailData?.getCanvasIfEdit?.fun)
 			new Promise((resolve, reject) => {
 				if(detailData.isEditPattern.value && 
 					detailData.selectDetail?.id && 
-					detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
+					detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
 				){
 					Modal.confirm({
 						title: t('collectionModal.jsContent2'),

src/component/DetailCopy/model/modelPosition.vue

@@ -24,7 +24,7 @@
 	<div class="molepositon" :class="{active:imgDesignImg}">
 		<div class="designOpenrtion_imgMask">
 			<div class="detail_modal_item_front">
-				<img :src="designDetail.designItemUrl" alt="">
+				<img :src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
 			</div>
 		</div>
 	</div>
@@ -295,7 +295,15 @@ export default defineComponent({
 		}
 		const getSubmitData = (value:any)=>{
 			let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
+			if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
+				return{
+					scale:value.layersObject[0].scale,
+					offset:value.layersObject[0].offset,
+					priority:value.layersObject[0].priority,
+				} 
+			}
 			let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
+
 			// let arr:any = sort(detailData.frontBack.front)
 			let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
 			let num = 10
@@ -413,13 +421,10 @@ export default defineComponent({
 				img.onload = () => {
 					// resolve(img)
 					sacle = el.parentNode.offsetWidth / img.width
-					console.log(sacle,123)
 					data.instance.frontBack.front.forEach((item:any,index:number) => {
 						for (const key in item.style) {
 							if(key == 'zIndex')return
-							console.log(item.style[key].replace(/px/g,''))
 							item.style[key] = item.style[key].replace(/px/g,'')*sacle+'px'
-							// console.log(item.style[key])
 						}
 						for (const key in data.instance.frontBack.back[index].style) {
 							if(key == 'zIndex')return

src/component/HomePage/ColorboardUpload.vue

@@ -1307,7 +1307,7 @@ export default defineComponent({
 									border-radius: 50%;
 									width: 4rem;
 									height: 4rem;
-									border: solid 2px #39215b;
+									border: solid 2px #000;
 									display: flex;
 									align-items: center;
 									justify-content: center;
@@ -1325,7 +1325,7 @@ export default defineComponent({
 										width: 1rem;
 										height: 1rem;
 										border-radius: 50%;
-										background: #39215b;
+										background: #000;
 									}
 								}
 							}

src/component/HomePage/Generate.vue

@@ -240,6 +240,7 @@ export default defineComponent({
         let userDetail:any= computed(()=>{
 			return store.state.UserHabit.userDetail
 		})
+		
 		let printModelList:any = ref([])
 		let sketchStyleList:any = ref([])
 		let printModel:any = ref({
@@ -263,6 +264,13 @@ export default defineComponent({
 		let workspace:any = computed(()=>{
 			return store.state.Workspace.probjects
 		})
+		let upload = ref({
+			isPin: 0,
+			level1Type: props.msg,
+			ageGroup:workspace.ageGroup,
+			gender: props.gender,
+			timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		})
 		let isGenerate = ref(false)//判断是否正在进行generate
 		let inputShow = ref(false)//表示是否出现红框
 		let inputTime = ref()
@@ -370,6 +378,7 @@ export default defineComponent({
 			...toRefs(speed),
 			openSpeed,
 			setSpeed,
+			upload,
         };
     },
     data(prop) {
@@ -380,12 +389,7 @@ export default defineComponent({
                 },
                 spin: true,
             }),
-            upload: {
-                isPin: 0,
-                level1Type: prop.msg,
-                gender: prop.gender,
-                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            },
+            
             token: "",
             uploadUrl: "",
            
@@ -996,6 +1000,7 @@ export default defineComponent({
 				let param = new FormData(); 
 				param.append('inPin','0')
 				param.append('gender',this.workspace.sex)
+				param.append('ageGroup',this.workspace.ageGroup)
 				param.append('level1Type',this.upload.level1Type)
 				param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
 				param.append('file',e.clipboardData.files[0]);
@@ -1048,7 +1053,7 @@ export default defineComponent({
         position: sticky;
         top: 0;
         padding-top: calc(2rem*1.2);
-        z-index: 3;
+        z-index: 7;
     }
     .generate_checkbox {
     }

src/component/HomePage/MoodboardUpload.vue

@@ -1,774 +0,0 @@
-<template>
-    <div class="collection_modal_item">
-        <div class="modal_left Guide_1_1_2" :class="[driver__.driver?'showEvents':'']">
-            <div class="switch_type_list" :class="[driver__.driver?'hideEvents':'']">
-                <div
-                    @click.stop="open(1)"
-                    class="switch_type_item"
-                    :class="[openClick == 1 ? 'select_swtich' : '']"
-                >
-                    <span>{{ $t('MoodboardUpload.Upload') }}</span>
-                </div>
-                <div
-                    @click.stop="open(2)"
-                    class="switch_type_item"
-                    :class="[openClick == 2 ? 'select_swtich' : '']"
-                >
-                    <span>{{ $t('MoodboardUpload.Library') }}</span>
-                </div>
-                <div
-                    @click.stop="open(3)"
-                    class="switch_type_item Guide_1_4"
-                    :class="[openClick == 3 ? 'select_swtich' : '']"
-                >
-                    <span>{{ $t('MoodboardUpload.Generate') }}</span>
-                </div>
-            </div>
-            <div v-show="openClick == 1" class="moodboard_body">
-                <div class="upload_img_body scroll_style">
-                    <div class="upload_item">
-                        <div
-                            class="upload_file_item"
-                            v-for="(file, index) in fileList"
-                            :key="file"
-                        >
-                            <div
-                                class="upload_file_item_content"
-								v-show="file?.status === 'uploading'"
-                            >
-                                <a-spin
-                                    :indicator="indicator"
-                                    tip="Uploading..."
-                                />
-                            </div>
-                            <div
-                                class="upload_file_item_content"
-                                v-show="file?.status === 'done'"
-                            >
-                                <img :src="file?.imgUrl" class="upload_img" />
-                                <div
-                                    class="delete_file_block"
-                                    @click="deleteFile(file)"
-                                >
-									{{ $t('MoodboardUpload.Delete') }}
-                                </div>
-                            </div>
-                        </div>
-                        <div
-                            class="upload_file_item upload_component"
-                            v-show="moodboarList.length < 8"
-                        >
-						
-                            <a-upload
-                                :action="uploadUrl + '/api/element/upload'"
-                                list-type="picture-card"
-								:capture="null"
-                                :data="{
-                                    ...upload,
-                                }"
-                                :headers="{ Authorization: token }"
-                                :before-upload="beforeUpload"
-                                v-model:file-list="fileList"
-								:multiple="!driver__.driver"
-								:maxCount="8 - moodboarList.length+fileList.length"
-                                accept=".jpg,.png,.jpeg,.bmp"
-                                @change="(file) => fileUploadChange(file)"
-                            >
-
-                                <div
-                                    class="upload_tip_block"
-                                    v-show=" moodboarList.length < 8"
-                                >
-                                    <i class="fi fi-br-upload"></i>
-                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
-                                </div>
-                            </a-upload>
-                        </div>
-                    </div>
-                </div>
-				<div class="upload_max_tip">
-					<span class="icon iconfont icon-zhuyi"></span>
-					<span>{{ $t('MoodboardUpload.Maximum') }}</span>
-				</div>
-                <!-- <div class="upload_max_tip">
-                    <span class="icon iconfont icon-zhuyi"></span>
-                    <span
-                        >Maximum 10 images can be uploaded, Maximum 2M per
-                        image</span
-                    >
-                </div> -->
-            </div>
-            <Material
-                v-show="openClick == 2"
-                ref="Material"
-                msg="Moodboard"
-            ></Material>
-            <Generate
-                v-show="openClick == 3"
-                ref="Generate"
-                msg="Moodboard"
-            ></Generate>
-        </div>
-        <div v-show="moodboarList.length" class="modal_right">
-			<div class="modal_layout">
-				<div class="modal_text">
-					<div>
-						{{ $t('MoodboardUpload.Thumbnail') }}
-					</div>
-					<div class="modal_btn started_btn Guide_1_7" :class="[driver__.driver?'showEvents':'']" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
-				</div>
-				<div class="modal_img" :class="[driver__.driver?'hideEvents':'']">
-					<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
-						<img v-lazy="item.imgUrl">
-						<div class="checked" >
-							<i class="fi fi-rr-trash"></i>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
-				<div class="modal_text">
-					<div>{{ $t('MoodboardUpload.selected') }}</div>
-					<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
-				</div>
-				<div class="modal_img_max">
-					<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
-						<div v-for="item,index in layoutList" :class="[moodb_className[index]]"  class="modal_imgItem">
-							<img :src="item.imgUrl" v-modelImg>
-						</div>
-					</div>
-					<div v-else class="modal_img">
-						<img :src="modalImg[0].imgUrl">
-					</div>
-					<div class="mark_loading" v-show="loadingShow">
-						<a-spin size="large" />
-					</div>
-				</div>
-				
-			</div>
-			
-		</div>
-		<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
-       
-    </div>
-</template>
-<script lang="ts">
-import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
-import { LoadingOutlined } from "@ant-design/icons-vue";
-import { getCookie } from "@/tool/cookie";
-import { getUploadUrl,isMoible } from "@/tool/util";
-import { useStore } from "vuex";
-import { message, Upload } from "ant-design-vue";
-import { Https } from "@/tool/https";
-import Material from "@/component/HomePage/Material.vue";
-import Generate from "@/component/HomePage/Generate.vue";
-import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
-import layout from "@/component/HomePage/layout.vue";
-import domTurnImg from '@/tool/domTurnImg'
-import GO from "@/tool/GO";
-import moodb from "@/tool/moodb";
-import { useI18n } from "vue-i18n";
-import { openGuide,driverObj__ } from "@/tool/guide";
-export default defineComponent({
-    components: { Material, MoodTemplate, Generate,layout },
-    setup() {
-		const store = useStore()
-        let lessenList: any = ref([]);
-        let fileList: any = ref([]);
-        let showFileList: any = ref([]);
-        let templateModal: any = ref(false);
-        let templateFileList: any = ref([]);
-        let openClick: any = ref(1);
-		let moodb_className:any = ref([]);
-		let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
-		let layoutList:any = []//选中后随机生成的list
-		let layoutOpen = ref(false)
-		let loadingShow = ref(false)
-		let modalImg:any= computed(()=>{
-			return store.state.UploadFilesModule.disposeMoodboard
-		})
-		// let driver__:any = computed(()=>{
-		// 	return store.state.Guide.guide
-		// })
-		let driver__:any = inject('driver__')
-
-		let uploading:any = ref([])
-		let edieShow:any = ref()
-		let {t} = useI18n()
-
-        return {
-            fileList,
-			showFileList,
-            lessenList,
-            templateModal,
-            templateFileList,
-            openClick,
-			moodb_className,
-			flex_direction,
-			layoutList,
-			layoutOpen,
-			loadingShow,
-			modalImg,
-			driver__,
-			uploading,
-			edieShow,
-			t,
-        };
-    },
-    data() {
-        return {
-            indicator: h(LoadingOutlined, {
-                style: {
-                    fontSize: "2.4rem",
-                },
-                spin: true,
-            }),
-            upload: {
-                isPin: 0,
-				gender:'',
-                level1Type: "Moodboard",
-                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            },
-            token: "",
-            uploadUrl: "",
-            moodTemplateId: "", //模板id
-            store: useStore(),
-			moodb_:moodb.moodb_,
-			moodboarList:computed(()=>{
-				return  useStore().state.UploadFilesModule.moodboard
-			}),
-        };
-    },
-	// watcheffect(){
-	// 	let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
-    //                 (v: any) => v.checked == true
-    //             );
-	// 	this.store.commit("setMoodboardFile", breviaryList);
-	// 	console.log(22);
-	// },
-    mounted() {
-        this.token = getCookie("token") || "";
-        this.uploadUrl = getUploadUrl();
-    },
-	watch:{
-		driver__:{
-			handler(newVal,oldVal){
-				if(newVal.index >= 6 && newVal.index <= 8){
-					this.open(newVal.index-5)
-				}else{
-				}
-			}
-		}
-	},
-	directives:{
-		modelImg:{
-			mounted(el) {
-				let parentNode = el.parentNode
-				if(parentNode.offsetHeight >= parentNode.offsetWidth){
-					el.style.height = 100+'%'
-					el.style.width = 'auto'
-				}else{
-					el.style.width = 100+'%'
-					el.style.height = 'auto'
-				}
-			},
-			updated (el) {
-				let parentNode = el.parentNode
-				if(parentNode.offsetHeight >= parentNode.offsetWidth){
-					el.style.height = 100+'%'
-					el.style.width = 'auto'
-				}else{
-					el.style.width = 100+'%'
-					el.style.height = 'auto'
-				}
-			}
-		}
-	},
-    methods: {
-        open(num: Number) {
-            this.openClick = num;
-			if(num ==2 ){
-				let material:any = this.$refs.Material
-				material.init('Moodboard')
-			}else if (num == 3){
-				// let driver = this.store.state.Guide.guide.driver
-				// if(this.driver__.driver){
-				// 	driverObj__.moveNext()
-				// }
-				let Generate:any = this.$refs.Generate
-				
-				if(this.driver__.driver){
-					Generate.searchPictureName = 'An image of airy, blush-toned fabrics and pale pink'
-				}else{
-					// Generate.searchPictureName = ''
-				}
-			}
-        },
-        fileUploadChange(data: any) {
-            let file = data.file;
-			let bor = true
-            if (file.status === "done") {
-                let res = JSON.parse(file.xhr.response);
-				if(res.errCode == 0){
-					file.imgUrl = res.data.url;
-					file.resData = res.data;
-					file.type_ = {
-						type1:'upload',
-						type2:'Moodboard'
-					};
-					file.id_ = GO.id++
-					file.id = res.data.id
-					let fileList = this.fileList.filter(
-						(v: any) => v.status === "done"
-					);
-					let arr =  this.store.state.UploadFilesModule.moodboard
-					if(arr.length >= 8){
-						message.info(this.t('MoodboardUpload.jsContent1'))
-					}else{
-						this.store.commit("setMoodboardFile", fileList);
-					}
-					if(fileList.length >=2){
-						if(this.driver__.driver){
-							driverObj__.moveNext()
-						}
-					}
-				}else{
-					bor = false
-				}
-				// this.showFileList = this.fileList
-            } else if (file.status === "error") {
-				bor = false
-            }
-			if(!bor){
-                let res:any = JSON.parse(file.xhr.response);
-				let index = -1;
-                this.fileList.forEach((ele: any, index1: any) => {
-                    if (file.uid === ele.uid) {
-                        index = index1;
-                    }
-                });
-                if (index > -1) {
-                    this.fileList.splice(index, 1);
-                }
-                // message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
-                message.warning(res.errMsg);
-			}
-        },
-        beforeUpload(file: any) {
-            const isJpgOrPng =
-                file.type === "image/jpeg" ||
-                file.type === "image/png" ||
-                file.type === "image/jpg" ||
-                file.type === "image/bmp";
-            if (!isJpgOrPng) {
-                message.info(this.t('MoodboardUpload.jsContent3'));
-            }
-            const isLt2M = file.size / 1024 / 1024 < 5;
-            if (!isLt2M) {
-                message.info(this.t('MoodboardUpload.jsContent4'));
-            }
-            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
-        },
-
-        deleteFile(item: any) {
-			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
-				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
-				this.store.commit("addGenerateMaterialFils", item);
-			}else{
-				this.fileList = this.store.state.UploadFilesModule.moodboardFiles
-				let moodboard 
-				this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
-					if(items.id_ == item.id_){
-						moodboard = index
-						
-					}
-				})
-				this.fileList.splice(moodboard,1)
-				this.store.commit("setMoodboardFile", this.fileList);
-			}
-			if(this.store.state.UploadFilesModule.moodboard.length == 0){
-				this.store.commit("clearMoodTemplateId");
-				this.layoutList = []
-				this.edieShow = false
-			}
-        },
-        recollection() {
-            let arr = JSON.parse(
-                JSON.stringify(
-                    this.store.state.UploadFilesModule.allBoardData
-                        .moodboardFiles
-                )
-            );
-			let disposeMoodboard = JSON.parse(
-                JSON.stringify(
-                    this.store.state.UploadFilesModule.allBoardData
-                        .disposeMoodboard
-                )
-            );
-			let moodboardPosition = JSON.parse(
-                JSON.stringify(
-                    this.store.state.UploadFilesModule.allBoardData
-                        .moodboardPosition
-                )
-            );
-			let setboard = {
-				generate:[] as any,
-				material:[] as any,
-				moodboard:[] as any,
-			}
-			arr.forEach((v:any)=>{
-				if(v.type_.type1 == 'generate'){
-					setboard.generate.push(v)
-				}else if(v.type_.type1 == 'material'){
-					setboard.material.push(v)
-				}else{
-					setboard.moodboard.push(v)
-				}
-			})
-			this.store.commit("setMoodboardGenerateFiles", setboard.generate);
-			this.store.commit("setMoodboardMaterialFiles", setboard.material);
-			this.store.commit("setMoodboardFile", setboard.moodboard);
-			this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
-			this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
-			this.fileList = setboard.moodboard
-        },
-
-        async changeTemplateModal() {
-			if(this.modalImg[0]?.id){
-				let layout:any = this.$refs.layout
-				if(this.layoutList.length <= 0){
-					let styleObj = this.store.state.UploadFilesModule.moodboardPosition
-					if(!styleObj.domStyle)await this.layout()
-					// 
-					let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
-					this.layoutList = arr
-				}
-				if(window.screen.width<1300){
-					layout.isMobile = true
-				}else{
-					layout.isMobile = false
-				}
-				
-				layout.init()
-			}else{
-				message.info(this.t('MoodboardUpload.jsContent5'))
-			}
-			
-        },
-		async layout(){
-			if(this.loadingShow)return
-			await new Promise((resolve, reject) => {
-				this.loadingShow = true
-				this.store.commit("setDisposeMoodboard", []);
-				let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
-				this.layoutList = arr
-				var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
-				let moodb =  this.moodb_[arr.length-1][random]
-				if( moodb.filter((item,index)=> item == 'w2h1').length != 0  && arr.length > 4){
-					this.flex_direction = true
-				}else{
-					this.flex_direction = false
-				}
-				if(this.moodb_[arr.length-1].length != 1){
-					if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
-						this.loadingShow = false
-						this.layout()
-						return resolve('')
-					}
-				}
-				this.edieShow = true
-				if(this.moodb_[arr.length-1].length == 2){
-					this.moodb_className = this.moodb_[arr.length-1][0]
-				}else{
-					this.moodb_className = this.moodb_[arr.length-1][random]
-				}
-				this.layoutOpen = true
-				//提交模板
-				// this.loadingShow = true
-				this.layoutList.forEach((v:any)=>{
-					v.setPitch = false
-				})
-				nextTick().then(()=>{
-					let layoutCentent = document.getElementById('modal_img')
-					let obj = {
-						imgStyle:[],
-						domStyle:[],
-						borStyle:[],
-						rototeStyle:[],
-						translateStyle:[],
-						angleTRStyle:[],
-						angleTLStyle:[],
-						angleBRStyle:[],
-						angleBLStyle:[],
-						class:this.moodb_className,
-					}
-					this.store.commit("setDisposeMoodboardPosition", obj);
-					domTurnImg(layoutCentent).then((rv)=>{
-						let file = rv
-						let param = new FormData(); 
-						param.append('inPin','0')
-						param.append('level1Type','Moodboard')
-						param.append('gender','')
-						param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
-						param.append('file',file);
-						let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
-						Https.axiosPost(Https.httpUrls.elementUpload,param,config)
-						.then((rv: any) => {
-								let img:any = rv
-								img.imgUrl = rv.url
-								img.resData = JSON.parse(JSON.stringify(img))
-								this.store.commit("setDisposeMoodboard", img);
-								this.loadingShow = false
-								resolve('')
-							}
-						).catch(rv=>{
-							this.loadingShow = false
-						})
-						if(this.driver__.driver){
-							driverObj__.moveNext()
-						}
-					})
-					
-				})			
-			})
-			    
-		},
-		setmoodbClass(val:any){
-			this.moodb_className = val
-		}
-    },
-});
-</script>
-<style lang="less" scoped>
-.collection_modal_item {
-    // padding: 1.5rem 2.6rem 4rem;
-    height: 100%;
-    display: flex;
-    .modal_left {
-        padding-top: calc(4rem*1.2);
-        width: 47%;
-		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
-        // width: 50rem*1.2);
-        .switch_type_list {
-            display: flex;
-            align-items: center;
-            position: relative;
-
-            .switch_type_item {
-                display: flex;
-                align-items: center;
-                // padding: 0 2rem*1.2);
-                height: calc(4rem*1.2);
-                background: #fff;
-                border-radius: calc(0.8rem*1.2);
-                line-height: calc(4rem*1.2);
-                font-size: var(--aida-fsize1-8);
-                // margin-right: 2.2rem*1.2);
-                margin-right: calc(8rem*1.2);
-                color: #000;
-                cursor: pointer;
-                position: relative;
-                text-align: center;
-                transform-origin: left;
-                transform: scale(1);
-                transition: 0.3s all;
-                &.switch_type_item::before {
-                    position: absolute;
-                    content: "";
-                    display: block;
-                    background: #000;
-                    height: calc(.3rem*1.2);
-                    left: 50%;
-                    transform: translateX(-50%);
-                    bottom: calc(.6rem*1.2);
-                    width: 0px;
-                    transition: 0.3s all;
-                }
-                &.select_swtich {
-                    color: #000;
-                    // font-weight: 900;
-                    transform: scale(1.15);
-                }
-                &.select_swtich::before {
-                    width: 100%;
-                }
-
-                .switch_icon {
-                    font-size: calc(1.8rem*1.2);
-                    margin-right: calc(0.8rem*1.2);
-                }
-            }
-        }
-
-        .moodboard_body {
-            padding-top: calc(2.5rem*1.2);
-			flex: 1;
-            height: calc(30rem*1.2);
-            overflow-x: hidden;
-			display: flex;
-			flex-direction: column;
-            &.moodboard_body::-webkit-scrollbar {
-                display: none;
-            }
-            .upload_img_body {
-				height: 100%;
-                overflow-y: auto;
-                margin-bottom: calc(1rem*1.2);
-            }
-
-            
-
-            .upload_max_tip {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: calc(1.4rem*1.2);
-                color: #030303;
-
-                .icon-zhuyi {
-                    font-size: calc(1.6rem*1.2);
-                    margin-right: calc(0.7rem*1.2);
-                }
-            }
-        }
-    }
-	.modal_right{
-		flex: 1;
-		margin-left: calc(3rem*1.2);
-		display: flex;
-		min-width: calc(57rem*1.2);
-		flex-direction: column;
-		overflow: hidden;
-		.modal_layout,.modal_accomplish{
-			.modal_text{
-				font-size:var(--aida-fsize1-4);
-				font-weight: 400;
-				color: rgba(0, 0, 0, 0.45);
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-			}
-		}
-		.modal_layout{
-			.modal_img{
-				width: calc(40rem*1.2);
-				height: calc(5rem*1.2);
-				overflow-x: hidden;
-				display: flex;
-				&.modal_img::-webkit-scrollbar {
-					display: none;
-				}
-				.modal_img_item{
-					width: calc(4rem*1.2);
-					height: calc(4rem*1.2);
-					text-align: center;
-					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
-					position: relative;
-					cursor: pointer;
-					overflow: hidden;
-					img{
-						width: auto;
-						height: 100%;
-						max-width: 100%;
-						object-fit: cover;
-					}
-					.checked{
-						position: absolute;
-						top: 0;
-						left: 0;
-						width: 100%;
-						height: 100%;
-						cursor: pointer;
-						display: none;
-						justify-content: center;
-						align-items: center;
-					}
-					&.modal_img_item:hover .checked{
-						display: flex;
-					}
-				}
-				
-			}
-		}
-		.modal_accomplish{
-			// margin-top: 2rem*1.2);
-			height: calc(30rem*1.2);
-			display: flex;
-			flex: 1;
-			flex-direction: column;
-			.modal_text{
-				padding-top: calc(2rem*1.2);
-				padding-block: calc(2rem*1.2);
-			}
-			.modal_img_max{
-				// flex: 1;
-				// width: calc(57rem*1.2);
-				// height: calc(35rem*1.2);
-				width: 100%;
-				aspect-ratio: 1.62 / 1;
-				position: relative;
-				.mark_loading{
-					position: absolute;
-				}
-			}
-			.modal_img{
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				flex-wrap: wrap;
-				align-items: center;
-				flex-direction: column;
-				position: relative;
-				
-				>img{
-					// height: 100%;
-					width: 100%;
-					max-height: 100%;
-					object-fit: contain;
-				}
-				&.active{
-					flex-direction: row;
-				}
-				.modal_imgItem{
-					position: relative;
-					overflow: hidden;
-					text-align: center;
-					img{
-						position: absolute;
-						top: 50%;
-						left: 50%;
-						transform: translate(-50%,-50%);
-						float: left;
-						user-select:none;
-						-webkit-user-drag: none;
-					}
-				}
-				.wh1{
-					width: 23%;
-					height: 48%;
-				}
-				.wh4{
-					width: 48.5%;
-					height: 100%;
-				}
-				.wh8{
-					width: 100%;
-					height: 48.5%;
-				}
-				.w1h2{
-					width: 23%;
-					height: 100%;
-				}
-				.w2h1{
-					width: 48.5%;
-					height: 48%;
-				}
-			}
-		}
-	}
-}
-</style>
-

src/component/HomePage/PrintboardUpload.vue

@@ -1,940 +0,0 @@
-<template>
-    <div class="printboard_upload_modal">
-		
-        <div class="printboard_left_upload">
-            <div class="left_upload_header">
-                <div class="upload_header_item">
-                    <div class="switch_type_list">
-                        <div
-							
-							class="switch_type_item"
-							:class="[openClick == 1 ? 'select_swtich' : '']"
-						>
-							<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
-						</div>
-						<div
-							
-							class="switch_type_item"
-							:class="[openClick == 2 ? 'select_swtich' : '']"
-						>
-							<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
-						</div>
-						<div
-							
-							class="switch_type_item Guide_1_2_1"
-							:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
-						>
-							<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
-							
-						</div>
-						<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
-							<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>	</div>
-							<ul v-show="openMenu">
-								<li 
-									v-for="item,index in printCatecoryList" 
-									class="printModel_item" 
-									@click.stop="setSceneList(item)"
-									:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
-									item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
-									item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
-								>{{ item.name }}</li>
-							</ul>
-						</div>
-                    </div>
-                </div>
-            </div>
-             <div v-show="openClick == 1" class="printboard_body">
-                <div class="upload_img_body">
-                    <div class="upload_item">
-                        <div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
-                            <div class="upload_file_img_block">
-                                <div class="upload_file_item_content" v-show="file?.status === 'uploading'">
-                                    <a-spin  :indicator="indicator" tip="Uploading..."/>
-                                </div>
-                                <div class="upload_file_item_content"  v-show="file?.status === 'done'">
-                                    <img  v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
-									<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
-
-                                    <div class="delete_like_file_block" @click.stop="deleteFile(file)">
-										<span
-											class="icon iconfont icon-shanchu"
-										></span>
-									</div>
-                                </div>
-                            </div>
-                            <!-- <div class="pin_block" v-show="file?.status === 'done'">
-                                <a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
-                            </div> -->
-                            
-                        </div>
-                        <div class="upload_file_item upload_component" v-show="printboardList.length < 16">
-                            <a-upload
-                                :action="uploadUrl + '/api/element/upload'"
-								:capture="null"
-                                list-type="picture-card"
-                                :before-upload="beforeUpload"
-                                :data="{
-                                    ...upload
-                                }"
-                                :headers="{Authorization:token}"
-                                v-model:file-list="fileList"
-                                :customRequest="function(){}"
-								:multiple="!driver__.driver"
-                                :maxCount="16 - printboardList.length+fileList.length"
-                                accept=".jpg,.png,.jpeg,.bmp"
-                                @change="fileUploadChange"
-                                >
-								<div
-                                    class="upload_tip_block"
-									v-show="printboardList.length < 16"
-                                >
-                                    <i class="fi fi-br-upload"></i>
-                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
-                                </div>
-                            </a-upload>
-                        </div>
-                    </div>
-                </div>
-				<div class="upload_max_tip">
-					<span class="icon iconfont icon-zhuyi"></span>
-					<span>{{ $t('PrintboardUpload.Maximum') }}</span>
-				</div>
-            </div>
-			<Material v-show="openClick == 2" 
-				ref="Material" 
-				msg="Printboard" 
-				@setLibrary = setSetchboardGenerate 
-				@confirmSelect="confirmSelect"
-				:disignTypeList="printCatecoryList"
-				></Material>
-			<Generate v-show="openClick == 3" ref="Generate" :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
-        </div>
-		<div class="modal_right">
-			<div class="modal_layout">
-				<div class="modal_text">
-					<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
-					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
-				</div>
-				<!-- <div class="modal_img">
-					<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
-						<img v-lazy="item.imgUrl">
-						<div class="checked" >
-							<i class="fi fi-rr-trash"></i>
-						</div>
-					</div>
-				</div> -->
-			</div>
-			<div class="modal_accomplish">
-				<div class="modal_img">
-					<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
-						<img v-lazy="item.imgUrl">
-						<sketchCategory :disignTypeList="printCatecoryList" :generateList="printboardList" :isSpread="true" :item="item" ></sketchCategory>
-						<!-- 在sketch 和print暂时关闭like -->
-						<!-- <div
-							class="delete_like_file_block left1"
-							:class="[driver__.driver?'hideEvents':'']"
-						>
-							<i v-if="!item.like || item.libraryChecked" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
-						</div> -->
-						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
-							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
-						</div>
-						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
-							<span class="icon iconfont icon-shanchu operate_icon"></span>
-						</div>
-						<div class="pin_block">
-							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<!-- 取消请求 -->
-		<scaleImage ref="scaleImage"></scaleImage>
-        <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
-    </div>
-</template>
-<script lang="ts">
-import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
-import { LoadingOutlined } from '@ant-design/icons-vue';
-import {getCookie} from '@/tool/cookie'
-import {getUploadUrl} from '@/tool/util'
-import {useStore} from 'vuex'
-import { Https } from "@/tool/https";
-import { Modal,message,Upload} from 'ant-design-vue';
-import Cropper from '@/component/HomePage/Cropper.vue'
-import Material from '@/component/HomePage/Material.vue'
-import Generate from "@/component/HomePage/Generate.vue";
-import GO from "@/tool/GO";
-import { useI18n } from 'vue-i18n';
-import { openGuide,driverObj__ } from "@/tool/guide";
-import scaleImage from "@/component/HomePage/scaleImage.vue";
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import sketchCategory from "@/component/HomePage/sketchCategory.vue";
-import axios from 'axios'
-import generalMenu from "@/component/HomePage/generalMenu.vue";
-import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
-
-export default defineComponent({
-    components:{
-        Cropper,
-        Material,
-		Generate,
-		scaleImage,
-		generalMenu,
-		sketchCategory,
-    },
-    setup(){
-        let store:any =useStore()
-        let fileList:any = ref([]),//选中的文件id数据
-            printImgList:any = ref([]), //print的印花图片
-            moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
-        let openClick: any = ref(1);
-		let driver__:any = inject('driver__')
-		let {t} = useI18n()
-		let isTest = ref()
-		let userInfo:any = {}
-		let useGenerate:any = ref({
-			imgId : '',
-			imgUrl:1,
-			checked:false,
-			level2Type:'',
-			designType:''
-		})
-		let workspace:any = ref({})
-		let scene = ref({
-			name:'Pattern',
-			value:'Pattern'
-		})
-		let openMenu = ref(false)
-		let printCatecoryList:any = computed(()=>{
-			return store.state.UserHabit.printType
-		})
-		let printboardList = computed(()=>{
-			return  store.state.UploadFilesModule.printboard
-		})
-        return {
-            fileList,
-            printImgList,
-            moodBoards,
-			openClick,
-			driver__,
-			t,
-			isTest,
-			userInfo,
-			useGenerate,
-			workspace,
-			scene,
-			openMenu,
-			printCatecoryList,
-			printboardList,
-        }
-    },
-    computed:{
-       
-    },
-	watch:{
-	},
-    data(){
-        return {
-            swtich_type:'upload',
-            indicator : h(LoadingOutlined, {
-                style: {
-                    fontSize: '2.4rem*1.2)',
-                },
-                spin: true,
-            }),
-            upload:{
-                isPin:0,
-				gender:'',
-                level1Type:'Printboard',
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            },
-            token:'',
-            uploadUrl:'',
-            store:useStore(),
-            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
-            currentFileNum:0, //当前上传的文件数
-            isUpload:false,
-		
-			isTextarea:false,
-			isInputFocus:false,
-        }
-    },
-    mounted(){
-		let userInfo:any = getCookie("userInfo")
-        this.userInfo = JSON.parse(userInfo);
-        this.token = getCookie('token') || ''
-		let isTest:any = getCookie('isTest')
-        this.isTest =JSON.parse(isTest)
-        this.uploadUrl = getUploadUrl()
-		this.workspace = computed(()=>{
-			return  this.store?.state?.Workspace?.workspace
-		})
-		let Generate:any = this.$refs.Generate
-
-		if(this.driver__.driver){
-			Generate.searchPictureName = 'Elegant floral print for high-fashion attire'
-		}else{
-			Generate.searchPictureName = ''
-		}
-    },
-     methods:{
-		setSetchboardGenerate(item:any){
-			this.useGenerate.imgId = item.imgId
-			this.useGenerate.imgUrl = item.imgUrl
-			this.useGenerate.level2Type = item.level2Type
-			this.useGenerate.designType = item.designType
-			let Material:any = this.$refs.Material
-			let generate:any = this.$refs.Generate
-
-			if(item.designType == 'collection'){
-			}else {
-				generate.sketchboardList.forEach((item:any) => {
-					item.checked = false
-				});
-			}
-		},
-		open(num: Number) {
-            this.openClick = num;
-			let material:any = this.$refs.Material
-			if(num == 2){
-				material.init('Printboard')
-			}
-			if(num == 3){
-				this.scene = this.printCatecoryList[0]
-				nextTick().then(()=>{
-					if(this.driver__.driver){
-						driverObj__.moveNext()
-					}
-				})
-			}
-        },
-        fileUploadChange(data:any){
-            let file = data.file
-			
-			// let res = JSON.parse(data?.xhr?.response);
-			file.id_ = GO.id++
-			file.type_ = {
-				type1:'upload',
-				type2:'Printboard'
-			};
-			file.pin = false;
-			// file.id = res.data.id?res.data.id:""
-            let Cropper:any = this.$refs.Cropper
-            if(this.currentFileNum === 1){
-                var reader = new FileReader();
-				
-                reader.onload = (e:any) => {
-                    let data_new;
-                    if (typeof e.target.result === 'object') {
-                    // 把Array Buffer转化为blob 如果是base64不需要
-                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
-                    } else {
-                    data_new = e.target.result;
-                    }
-                    Cropper.getOptionImg(data_new)
-					
-					
-                };
-                // 转化为base64
-                // reader.readAsDataURL(file)
-                // 转化为blob
-                reader.readAsArrayBuffer(file.originFileObj);
-                this.cropperFileData = file
-                Cropper.changeShowModal(true)
-				nextTick().then(()=>{
-					if(this.driver__.driver){
-						driverObj__.moveNext()
-					}
-				})
-            }else{
-                this.customRequest(file)
-            }
-        },
-
-        beforeUpload(file:any,fileList:any){
-            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
-            if (!isJpgOrPng) {
-                message.info(this.t('PrintboardUpload.jsContent1'));
-            }
-            const isLt2M = file.size / 1024 / 1024 < 5;
-            if (!isLt2M) {
-                message.info(this.t('PrintboardUpload.jsContent2'));
-            }
-            if(isJpgOrPng && isLt2M){
-                this.currentFileNum = fileList.length
-            }else{
-                return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
-            }
-            
-        },
-
-        deleteFile(item:any){
-            // this.fileList.splice(item, 1)
-            // this.store.commit('setPrintboardFile',this.fileList)
-			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
-				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
-				this.store.commit("addGenerateMaterialFils", item);
-			}else{
-				this.fileList = this.store.state.UploadFilesModule.printboardFiles
-				let moodboard 
-				this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
-					if(items.id_ == item.id_){
-						moodboard = index
-						
-					}
-				})
-				this.fileList.splice(moodboard,1)
-				this.store.commit("setPrintboardFile", this.fileList);
-			}
-        },
-		likeFile(item:any,str:string){
-			if(str == 'like'){
-				let data = {
-					generateDetailId:item.id,
-					level1Type:"Printboard",
-					level2Type: item.categoryValue,
-					gender:this.workspace.sexEnum.value,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosPost(Https.httpUrls.generateLike, data).then(
-					(rv) => {
-						item.like = true
-					}
-				).catch(res=>{
-				});
-			}else{
-				let data = {
-					generateDetailId:item.id,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
-					(rv) => {
-						item.like = false
-					}
-				).catch(res=>{
-				});
-			}
-
-		},
-        
-        customRequest(data:any){
-            let new_data = {
-                ...this.upload,
-                file:data.originFileObj
-            }
-            let fileUid = data.uid
-            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
-                (rv: any) => {
-                    if (rv) {
-                        for(let file of this.fileList){
-                            if(fileUid === file.uid){
-                                file.status = 'done'
-                                file.imgUrl = rv.url
-                                file.pin = false
-                                file.id = rv.id
-								file.category = this.printCatecoryList[0].name
-								file.categoryValue = this.printCatecoryList[0].value
-                                file.resData = rv
-								
-                            }
-                        }
-                        let fileList = this.fileList.filter((v:any)=> v.status === 'done')
-                        this.store.commit('setPrintboardFile',fileList)
-                    }
-                }
-            ).catch((res)=>{
-                let index = -1
-                this.fileList.forEach((ele:any,index1:any) => {
-                    if(fileUid === ele.uid){
-                        index = index1
-                    }
-                });
-                if(index > -1){
-                    this.fileList.splice(index, 1)
-                }
-            });
-        },
-
-        closeCropper(type:any){
-            if(this.isUpload){
-                return
-            }
-            if(type == 'error'){
-                let index = -1
-                this.fileList.forEach((ele:any,index1:any) => {
-                    if(this.cropperFileData.uid === ele.uid){
-                        index = index1
-                    }
-                });
-                if(index > -1){
-                    this.fileList.splice(index, 1)
-                }
-            }
-            let Cropper:any = this.$refs.Cropper
-            Cropper.closeCropper()
-
-        },
-
-        deletUploadFile(){
-            let index = -1
-            this.fileList.forEach((ele:any,index1:any) => {
-                if(this.cropperFileData.uid === ele.uid){
-                    index = index1
-                }
-            });
-            if(index > -1){
-                this.fileList.splice(index, 1)
-            }
-        },
-
-
-        handleCropperSuccess(event:any){
-            let {file, fileData} =event
-            let new_data = {
-                ...this.upload,
-                file:file
-            }
-            if(this.isUpload){
-                return
-            }
-            this.isUpload = true
-            const hide = message.loading('loading', 0);
-            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
-                (rv: any) => {
-                    for(let file of this.fileList){
-                        if(fileData.uid === file.uid){
-                            file.status = 'done'
-                            file.imgUrl = rv.url
-                            file.id = rv.id
-                            file.resData = rv
-							file.category = this.printCatecoryList[0].name
-							file.categoryValue = this.printCatecoryList[0].value
-                        }
-                    }
-                    let fileList = this.fileList.filter((v:any)=> v.status === 'done')
-                    this.isUpload = false
-                    this.closeCropper('success')
-                    this.cropperFileData = {name:'',uid:''}
-                    this.store.commit('setPrintboardFile',fileList)
-                    hide()
-					nextTick().then(()=>{
-						if(this.driver__.driver){
-							driverObj__.moveNext()
-						}
-					})
-                }
-            ).catch(res=>{
-                let index = -1
-                this.fileList.forEach((ele:any,index1:any) => {
-                    if(fileData.uid === ele.uid){
-                        index = index1
-                    }
-                });
-                if(index > -1){
-                    this.fileList.splice(index, 1)
-                }
-                this.cropperFileData = {name:'',uid:''}
-                this.isUpload = false
-                this.closeCropper('error')
-                hide()
-            });
-        },
-
-        recollection(){
-			this.useGenerate = {
-				imgId : '',
-				imgUrl:1,
-				checked:false,
-				level2Type:'',
-				designType:'',
-			}
-            let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
-			let setboard = {
-				generate:[] as any,
-				material:[] as any,
-				moodboard:[] as any,
-			}
-			arr.forEach((v:any)=>{
-				v.pin = v.pin == 1?true:false
-				this.printCatecoryList.forEach((item:any) => {
-					if(v.level2Type == item.value){
-						v.category=item.name
-						v.categoryValue=item.value
-					}
-				});
-				if(v.type_.type1 == 'generate'){
-					setboard.generate.push(v)
-				}else if(v.type_.type1 == 'material'){
-					setboard.material.push(v)
-				}else{
-					setboard.moodboard.push(v)
-				}
-			})
-			this.store.commit("setPrintboardGenerateFiles", setboard.generate);
-			this.store.commit("setPrintboardMaterialFiles", setboard.material);
-			this.store.commit("setPrintboardFile", setboard.moodboard);
-			this.fileList = setboard.moodboard
-            // this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
-            this.store.commit('setPrintboardFile',this.fileList)
-            // this.store.commit('setGeneratePrintFile',this.printImgList)
-
-        },
-
-        confirmSelect(event:any){
-            for(let item of event){
-                let data = {
-                    imgUrl:item.url,
-                    resData:item,
-                    pin:false,
-                    id:item.id,
-                    status:'done',
-                }
-                if(this.fileList.length == 15){
-                    message.warning(this.t('PrintboardUpload.jsContent3'))
-                    break
-                }
-                this.fileList.push(data)
-            }
-            this.store.commit('setPrintboardFile',this.fileList)
-            
-        },
-		scaleImage(index:any){
-			let scaleImage:any = this.$refs.scaleImage
-			scaleImage.isLike = false
-			scaleImage.init(this.printboardList,index)
-		},
-		setSceneList(data:any){
-			if(this.scene.value === data.value) return
-			this.scene = data
-			let generate:any = this.$refs.Generate
-			generate.sketchboardList = []
-			generate.searchPictureName = ''
-			this.openMenu = false
-		},
-		openPrintModel(){
-			if(this.openMenu)return
-			document.addEventListener('click',this.removePrintModel)
-			this.openMenu = true
-		},
-		removePrintModel(){
-			this.openMenu = false
-			document.removeEventListener('click',this.removePrintModel)
-		}
-     }
-
-})
-</script>
-<style lang="less" scoped>
-.printboard_upload_modal{
-    // padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
-	height: 100%;
-    display: flex;
-    .printboard_left_upload{
-		display: flex;
-		flex-direction: column;
-        padding-top: calc(4rem*1.2);
-        width: 47%;
-        .switch_type_list {
-            display: flex;
-            align-items: center;
-            position: relative;
-			z-index: 11;
-            .switch_type_item {
-                display: flex;
-                align-items: center;
-                // padding: 0 2rem*1.2);
-                height: calc(4rem*1.2);
-                background: #fff;
-                border-radius: calc(0.8rem*1.2);
-                line-height: calc(4rem*1.2);
-                font-size: var(--aida-fsize1-8);
-                // margin-right: 2.2rem*1.2);
-                margin-right: calc(8rem*1.2);
-                color: #000;
-                cursor: pointer;
-                position: relative;
-                text-align: center;
-                transform-origin: left;
-                transform: scale(1);
-                transition: 0.3s all;
-                &.switch_type_item::before {
-                    position: absolute;
-                    content: "";
-                    display: block;
-                    background: #000;
-                    height: calc(.3rem*1.2);
-                    left: 50%;
-                    transform: translateX(-50%);
-                    bottom: calc(.6rem*1.2);
-                    width: 0px;
-                    transition: 0.3s all;
-                }
-                &.select_swtich {
-                    color: #000;
-                    // font-weight: 900;
-                    transform: scale(1.15);
-                }
-                &.select_swtich::before {
-                    width: 100%;
-                }
-				
-                .switch_icon {
-                    font-size: calc(1.8rem*1.2);
-                    margin-right: calc(0.8rem*1.2);
-                }
-            }
-			.printMenu{
-				margin-right: 0;
-				margin-top: auto;
-				position: relative;
-				margin-left: 2rem;
-				>div{
-					width: 14rem;
-					font-size: var(--aida-fsize1-6);
-					border: 0;
-					i{
-						transition: all .3s;
-						display: inline-block;
-						margin-left: 1rem;
-					}
-					.forbidden{
-						transform: rotate(180deg);
-					}
-				}
-				ul{
-					width: 14rem;
-				}
-			}
-			.switch_type_item:nth-child(3){
-				margin: 0;
-			}
-        }
-
-        .printboard_body{
-			display: flex;
-			flex-direction: column;
-            // height: calc(100% - 5rem*1.2));
-			flex: 1;
-			padding-top: calc(2.5rem*1.2);
-			height: calc(30rem*1.2);
-			overflow-x: hidden;
-			&.printboard_body::-webkit-scrollbar {
-            display: none;
-        }
-            .upload_img_body{
-                height: calc(100% - 3rem*1.2);
-                overflow-y: auto;
-                margin-bottom: calc(1rem*1.2);
-				&.upload_img_body::-webkit-scrollbar {
-					display: none;
-				}
-            }
-		
-            .upload_file_item{
-                margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
-				// margin: 0 2rem*1.2) 2rem*1.2) 0;
-				display: inline-block;
-				width: 10rem;
-				height: 10rem;
-				border: 1px solid #f5f5f5;
-				vertical-align: top;
-				position: relative;
-				text-align: center;
-				img{
-					width: auto;
-					object-fit: cover;
-					height: 100%;
-					max-width: 100%;
-				}
-
-              .upload_file_img_block{
-				height: 100%;
-			  }
-
-                &.upload_component{
-                }
-				.checked{
-					position: absolute;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					cursor: pointer;
-					display: none;
-					justify-content: center;
-					align-items: center;
-				}
-				&.modal_img_item:hover .checked{
-				display: flex;
-				}
-				.upload_file_item_content{
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					height: 100%;
-					position: relative;
-					cursor: pointer;
-					.upload_img{
-						display: block;
-						max-height: 100%;
-						width: auto;
-						max-width: 100%;
-						object-fit: cover;
-					}
-					&:hover .delete_like_file_block{
-						display: block;
-					}
-				}
-			}
-			.upload_max_tip {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: calc(1.4rem*1.2);
-                color: #030303;
-
-                .icon-zhuyi {
-                    font-size: calc(1.6rem*1.2);
-                    margin-right: calc(0.7rem*1.2);
-                }
-            }
-        }
-    }
-	
-	.modal_right{
-		flex: 1;
-		margin-left: calc(3rem*1.2);
-		display: flex;
-		flex-direction: column;
-		.modal_layout{
-			.modal_text{
-				font-size: var(--aida-fsize1-4);
-				font-weight: 400;
-				color: rgba(0, 0, 0, 0.45);
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-			}
-		}
-		.modal_layout{
-			padding-bottom: 4.8rem;
-			.modal_img{
-				width: calc(40rem*1.2);
-				height: calc(5rem*1.2);
-				overflow-x: hidden;
-				display: flex;
-				flex-direction: row;
-				&.modal_img::-webkit-scrollbar {
-					display: none;
-				}
-				.modal_img_item{
-					width: calc(4rem*1.2);
-					height: calc(4rem*1.2);
-					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
-					position: relative;
-					cursor: pointer;
-					text-align: center;
-					overflow: hidden;
-					img{
-						width: auto;
-						height: 100%;
-						object-fit: cover;
-						max-width: 100%;
-					}
-					.checked{
-						position: absolute;
-						top: 0;
-						left: 0;
-						width: 100%;
-						height: 100%;
-						cursor: pointer;
-						display: none;
-						justify-content: center;
-						align-items: center;
-					}
-					&.modal_img_item:hover .checked{
-						display: flex;
-					}
-				}
-				
-			}
-		}
-		.modal_accomplish{
-			// margin-top: 2rem*1.2);
-			overflow-x: hidden;
-			height: calc(30rem*1.2);
-			display: flex;
-			flex-direction: column;
-			flex: 1;
-			position: relative;
-			.mark_loading{
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				z-index: 99;
-			}
-            // overflow-x: hidden;
-			&.modal_accomplish::-webkit-scrollbar {
-                display: none;
-            }
-			.modal_text{
-				padding-top: calc(2rem*1.2);
-				padding-block: calc(2rem*1.2);
-			}
-			.modal_img{
-				flex: 1;
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: flex-start;
-				position: relative;
-				align-content: flex-start;
-				.modal_imgItem:hover .delete_like_file_block{
-					// display: block;
-					opacity: 1;
-				}
-				.modal_imgItem{
-					margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
-					display: inline-block;
-					// width: calc(10rem*1.2);
-					// height: calc(10rem*1.2);
-					width: 30rem;
-					height: 30rem;
-					border: 1px solid #f5f5f5;
-					position: relative;
-					cursor: pointer;
-					text-align: center;
-					&.modal_imgItem:nth-child(even) {
-						margin-right: 0;
-					}
-					img{
-						object-fit: cover;
-						height: 100%;
-						max-width: 100%;
-						width: auto;
-					}
-					
-					&.active{
-						opacity: 0.5;
-					// border: 2px solid;
-						border-radius: calc(1rem*1.2);
-						transform: scale(0.9);
-						img {
-						}
-						.pin_block{
-							pointer-events:none;
-						}
-						.delete_like_file_block{
-							pointer-events:none
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-
-</style>

src/component/HomePage/SketchboardUpload.vue

@@ -1,913 +0,0 @@
-<template>
-    <div class="sketchboard_upload_modal">
-        <div class="modal_left">
-            <div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
-                <div
-                    @click.stop="open(1)"
-                    class="switch_type_item"
-                    :class="[openClick == 1 ? 'select_swtich' : '']"
-                >
-                    <span>{{ $t('SketchboardUpload.Upload') }}</span>
-                </div>
-                <div
-                    @click.stop="open(2)"
-                    class="switch_type_item"
-                    :class="[openClick == 2 ? 'select_swtich' : '']"
-                >
-                    <span>{{ $t('SketchboardUpload.Library') }}</span>
-                </div>
-                <div
-                    @click.stop="open(3)"
-                    class="switch_type_item Guide_1_9"
-                    :class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
-                >
-                    <span>{{ $t('SketchboardUpload.Generate') }}</span>
-                </div>
-				<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
-					<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
-						</div>
-					<ul v-show="openMenu">
-						<li 
-							v-for="item,index in sketchStyleList" 
-							class="printModel_item" 
-							@click.stop="setSceneList(item)"
-							:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
-							item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
-							item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
-						>{{ item.name }}</li>
-					</ul>
-				</div>
-            </div>
-            <div v-show="openClick == 1" class="sketchboard_body">
-                <div class="upload_img_body scroll_style">
-                    <div class="upload_item">
-                        <div 
-                            class="upload_file_item"
-                            v-for="(file, index) in fileList"
-                            :key="file"
-                        >
-						<div
-                                class="upload_file_item_content"
-                                v-show="file?.status === 'uploading'"
-                            >
-                                <a-spin
-                                    :indicator="indicator"
-                                    tip="Uploading..."
-                                />
-                            </div>
-                            <div
-                                class="upload_file_item_content"
-                                v-show="file?.status === 'done'"
-                            >
-                                <img :src="file?.imgUrl" class="upload_img" />
-								<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
-                                <div
-                                    class="delete_like_file_block"
-                                    @click.stop="deleteFile(file)"
-                                >
-                                    <span
-                                        class="icon iconfont icon-shanchu"
-                                    ></span>
-                                </div>
-                            </div>
-                            <!-- <div
-                                class="pin_block"
-                                v-show="file?.status === 'done'"
-                            >
-                                <a-checkbox v-model:checked="file.pin"
-                                    >{{ $t('SketchboardUpload.PIN') }}</a-checkbox
-                                >
-                            </div> -->
-                        </div>
-                        <div
-                            class="upload_file_item upload_component"
-                            v-show="sketchboardList.length < 20"
-                        >
-                            <a-upload
-                                :action="uploadUrl + '/api/element/upload'"
-								:capture="null"
-                                list-type="picture-card"
-                                :data="{
-                                    ...upload,
-                                }"
-								:multiple="!driver__.driver"
-                                :before-upload="beforeUpload"
-                                :headers="{ Authorization: token }"
-                                v-model:file-list="fileList"
-                                :maxCount="20 - sketchboardList.length+fileList.length"
-                                accept=".jpg,.png,.jpeg,.bmp"
-                                @change="(file) => fileUploadChange(file)"
-                            >
-								<div
-                                    class="upload_tip_block"
-									v-show="sketchboardList.length < 20"
-                                >
-                                    <i class="fi fi-br-upload"></i>
-                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
-                                </div>
-                            </a-upload>
-                        </div>
-                    </div>
-                </div>
-				<div class="upload_max_tip">
-					<span class="icon iconfont icon-zhuyi"></span>
-					<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
-				</div>
-            </div>
-
-            <Material
-                v-show="openClick == 2"
-                ref="Material"
-                msg="Sketchboard"
-                @confirmSelect="confirmSelect"
-				:disignTypeList="sketchCatecoryList"
-				@setLibrary = setSetchboardGenerate
-            ></Material>
-            <Generate
-                v-show="openClick == 3"
-                ref="Generate"
-                msg="Sketchboard"
-				:gender="upload.gender"
-				:scene="scene"
-				:sketchCatecoryList="sketchCatecoryList"
-            ></Generate>
-        </div>
-		<div class="modal_right">
-			<div class="modal_layout">
-				<div class="modal_text">
-					<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
-					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
-				</div>
-				<!-- <div class="modal_img modal_img_x" v-mousewheel>
-					<div class="mousewheel">
-						<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
-							<img v-lazy="item.imgUrl">
-							<div class="checked" >
-								<i class="fi fi-rr-trash"></i>
-							</div>
-						</div>
-					</div>
-					
-				</div> -->
-			</div>
-			<div class="modal_accomplish">
-				<div class="modal_img">
-					<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
-						<img v-lazy="item.imgUrl">
-						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
-						<!-- 在sketch 和print暂时关闭like -->
-						<!-- <div
-							class="delete_like_file_block left1"
-							:class="[driver__.driver?'hideEvents':'']"
-						>
-							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
-						</div> -->
-						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
-							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
-						</div>
-						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
-							<span class="icon iconfont icon-shanchu operate_icon"></span>
-						</div>
-						<div class="pin_block">
-							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<scaleImage ref="scaleImage"></scaleImage>
-		
-		<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
-       	
-		
-    </div>
-</template>
-<script lang="ts">
-import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
-import { LoadingOutlined } from "@ant-design/icons-vue";
-import { getCookie } from "@/tool/cookie";
-import { getUploadUrl } from "@/tool/util";
-import GO from "@/tool/GO";
-import { useStore } from "vuex";
-import { message, Upload, Modal } from "ant-design-vue";
-import Material from "@/component/HomePage/Material.vue";
-import Generate from "@/component/HomePage/Generate.vue";
-import scaleImage from "@/component/HomePage/scaleImage.vue";
-import { Https } from "@/tool/https";
-import { openGuide,driverObj__ } from "@/tool/guide";
-import { useI18n } from "vue-i18n";
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import sketchCategory from "@/component/HomePage/sketchCategory.vue";
-
-export default defineComponent({
-    components: { Material, Generate,scaleImage,sketchCategory },
-    setup() {
-        let fileList: any = ref([
-		]);
-        let openClick: any = ref(1);
-		
-        let store:any =useStore()
-
-		let sketchCatecoryList:any = computed(()=>{
-			return store.state.Workspace.probjects.positionList
-		})
-		let sketchCatecoryAllList:any = computed(()=>{
-			return store.state.Workspace.workspaceAllPosition
-		})
-		let workspace:any = ref({})
-		let sketchboardList:any = computed(()=>{
-			return store.state.UploadFilesModule.sketchboard
-		})
-		let {t} = useI18n()
-		let driver__:any = inject('driver__')
-		let isTest = ref()
-		let useGenerate:any = ref({
-			imgId : '',
-			imgUrl:1,
-			checked:false,
-			level2Type:'',
-			designType:'',
-		})
-		
-		let openMenu = ref(false)
-		let sketchStyleList:any = computed(()=>{
-			return store.state.UserHabit.SketchGenerateType
-		})
-		let scene = ref({
-			name: t('SketchboardUpload.GenerateSketch'),
-			value:'generate'
-		})
-        return {
-            fileList,
-            openClick,
-			store,
-			sketchCatecoryList,
-			sketchCatecoryAllList,
-			workspace,
-			sketchboardList,
-			t,
-			driver__,
-			isTest,
-			useGenerate,
-			scene,
-			openMenu,
-			sketchStyleList,
-        };
-    },
-    data() {
-        return {
-            swtich_type: "upload",
-            indicator: h(LoadingOutlined, {
-                style: {
-                    fontSize: "2.4rem",
-                },
-                spin: true,
-            }),
-            upload: {
-                isPin: 0,
-                level1Type: "Sketchboard",
-				gender:'',
-                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            },
-            token: "",
-            uploadUrl: "",
-			workspaceCom:{},
-			isTextarea:false,
-			isInputFocus:false,
-        };
-    },
-    computed: {
-        getSketchLabel(value) {
-            return (value: any) => {
-                let lable = "";
-                for (let item of this.sketchCatecoryList) {
-                    if (item.value === value) {
-                        lable = item.label;
-                        break;
-                    }
-                }
-                return lable;
-            };
-        },
-    },
-	directives:{
-		mousewheel:{
-			mounted (el) {
-				// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
-				let dom:any = document.getElementsByClassName('modal_img_x')
-				let mouseover = ()=>{
-					// bodyDom.classList.add('active')
-				}
-				let mouseleave = ()=>{
-					// bodyDom.classList.remove('active')
-				}
-				dom.forEach((item:any) => {
-					item.addEventListener('mouseover',mouseover)
-					item.addEventListener('mouseleave',mouseleave)
-				});
-				
-			
-				el.addEventListener('wheel',(e:WheelEvent)=>{
-					let num = 0
-					if(e.deltaY > 0){
-						num = 25
-					}else{
-						num = -25
-					}
-					el.scrollBy(num, 0);
-				},true)
-			}
-		}
-	},
-	watch:{
-		workspaceCom(newVal,oldVal){
-			this.workspace = newVal
-			this.upload.gender = newVal?.sexEnum?.value
-		},
-		sketchboardList:{
-			handler(newVal:any,oldVal:any){
-				if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
-					if(this.driver__.driver){
-						// driverObj__.moveTo(22)
-					}
-				}
-			}
-		},
-		driver__:{
-			handler(newVal,oldVal){
-				if(newVal.index >= 15 && newVal.index <= 16){
-					if(this.driver__.driver){
-						// driverObj__.moveTo(15)
-					}
-				}else{
-				}
-			}
-		}
-	},
-    mounted() {
-        this.token = getCookie("token") || "";
-        let isTest:any = getCookie('isTest')
-        this.isTest =JSON.parse(isTest)
-        this.uploadUrl = getUploadUrl();
-		this.workspaceCom = computed(()=>{
-			return  this.store?.state?.Workspace?.workspace
-		})
-		let Generate:any = this.$refs.Generate
-		if(this.driver__.driver){
-		Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
-		}else{
-			Generate.searchPictureName = ''
-		}
-    },
-    methods: {
-		setSetchboardGenerate(item:any){
-			this.useGenerate.imgId = item.imgId
-			this.useGenerate.imgUrl = item.imgUrl
-			this.useGenerate.level2Type = item.level2Type
-			this.useGenerate.designType = item.designType
-			let Material:any = this.$refs.Material
-			let generate:any = this.$refs.Generate
-
-			if(item.designType == 'collection'){
-			}else {
-				generate.sketchboardList.forEach((item:any) => {
-					item.checked = false
-				});
-			}
-		},
-        open(num: Number) {
-            this.openClick = num;
-            if (num == 2) {
-                let material: any = this.$refs.Material;
-                material.init("Sketchboard");
-            } else if (num == 3) {
-                // let Generate:any = this.$refs.Generate
-                // Generate.init('generate')
-				nextTick().then(()=>{
-					if(this.driver__.driver){
-						driverObj__.moveNext()
-					}
-				})
-            }
-        },
-		scaleImage(index:any){
-			let scaleImage:any = this.$refs.scaleImage
-			scaleImage.isLike = false
-			scaleImage.init(this.sketchboardList,index)
-		},
-		
-        fileUploadChange(data: any) {
-            let file = data.file;
-			let bor = true
-            if (file.status === "done") {
-				let res = JSON.parse(file.xhr.response);
-				if(res.errCode == 0){
-					let category:any={
-						value:'',
-						name:'',
-					}
-					this.sketchCatecoryList.forEach((item:any) => {
-						if(item.value == res.data.level2Type){
-							category.value = item?.value
-							category.name = item?.name
-						}
-					});
-					file.imgUrl = res.data.url;
-					file.resData = res.data;
-					// file.pin = false;
-					//category用来数据处理
-					file.categoryValue = category?.value;
-					file.category = category?.name;
-					file.categoryShow = false;
-					file.id_ = GO.id++
-					file.id = res.data.id
-					file.type_ = {
-						type1:'upload',
-						type2:'Sketchboard'
-					};
-					let fileList = this.fileList.filter(
-						(v: any) => v.status === "done"
-					);
-					this.store.commit("setSketchboardFile", fileList);
-				}else{
-					bor = false
-				}
-            } else if (file.status === "error") {
-				bor = false
-            }
-			if(!bor){
-				let index = -1;
-                let res:any = JSON.parse(file.xhr.response);
-                this.fileList.forEach((ele: any, index1: any) => {
-                    if (file.uid === ele.uid) {
-                        index = index1;
-                    }
-                });
-                if (index > -1) {
-                    this.fileList.splice(index, 1);
-                }
-                // message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
-                message.warning(res.errMsg);
-			}
-        },
-
-        beforeUpload(file: any) {
-            const isJpgOrPng =
-                file.type === "image/jpeg" ||
-                file.type === "image/png" ||
-                file.type === "image/jpg" ||
-                file.type === "image/bmp";
-            if (!isJpgOrPng) {
-                message.info(this.t('SketchboardUpload.jsContent2'));
-            }
-            const isLt2M = file.size / 1024 / 1024 < 5;
-            if (!isLt2M) {
-                message.info(this.t('SketchboardUpload.jsContent3'));
-            }
-            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
-        },
-        deleteFile(item: any) {
-			if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
-				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
-				this.store.commit("addGenerateMaterialFils", item);
-			}else{
-				this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
-				let moodboard 
-				this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
-					if(items.id_ == item.id_){
-						moodboard = index
-						
-					}
-				})
-				this.fileList.splice(moodboard,1)
-				this.store.commit("setSketchboardFile", this.fileList);
-			}
-        },
-		likeFile(item:any,str:string){
-			if(str == 'like'){
-				let data = {
-					generateDetailId:item.id,
-					level1Type:"Sketchboard",
-					level2Type: item.categoryValue?item.categoryValue:item.level2Type,
-					gender:this.workspace.sexEnum.value,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosPost(Https.httpUrls.generateLike, data).then(
-					(rv) => {
-						item.like = true
-					}
-				).catch(res=>{
-				});
-			}else{
-				let data = {
-					generateDetailId:item.id,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
-					(rv) => {
-						item.like = false
-					}
-				).catch(res=>{
-				});
-			}
-
-		},
-        recollection() {
-			this.useGenerate = {
-				imgId : '',
-				imgUrl:1,
-				checked:false,
-				level2Type:'',
-				designType:''
-			}
-            let arr = JSON.parse(
-                JSON.stringify(
-                    this.store.state.UploadFilesModule.allBoardData
-                        .sketchboardFiles
-                )
-            );
-			let setboard = {
-				generate:[] as any,
-				material:[] as any,
-				moodboard:[] as any,
-			}
-			arr.forEach((v:any)=>{
-				v.pin = v.pin == 1?true:false
-				this.sketchCatecoryAllList.forEach((item:any) => {
-					if(v.level2Type == item.value){
-						v.category=item.name
-						v.categoryValue=item.value
-					}
-				});
-				if(v.type_.type1 == 'generate'){
-					setboard.generate.push(v)
-				}else if(v.type_.type1 == 'material'){
-					setboard.material.push(v)
-				}else{
-					setboard.moodboard.push(v)
-				}
-			})
-			this.store.commit("setSketchboardGenerateFiles", setboard.generate);
-			this.store.commit("setSketchboardMaterialFiles", setboard.material);
-			this.store.commit("setSketchboardFile", setboard.moodboard);
-			this.fileList = setboard.moodboard
-        },
-        confirmSelect(event: any) {
-            for (let item of event) {
-                let data = {
-                    imgUrl: item.url,
-                    resData: item,
-                    pin: false,
-                    status: "done",
-                    category: item.level2Type || "Outwear",
-                    categoryShow: false,
-                };
-                if (this.fileList.length == 15) {
-                    message.warning(
-                        this.t('SketchboardUpload.jsContent4')
-                    );
-                    break;
-                }
-                this.fileList.push(data);
-            }
-            this.store.commit("setSketchboardFile", this.fileList);
-        },
-		setSceneList(data:any){
-			if(this.scene.value === data.value) return
-			this.scene = data
-			let generate:any = this.$refs.Generate
-			generate.sketchboardList = []
-			generate.searchPictureName = ''
-			this.openMenu = false
-		},
-		openPrintModel(){
-			if(this.openMenu)return
-			document.addEventListener('click',this.removePrintModel)
-			this.openMenu = true
-		},
-		removePrintModel(){
-			this.openMenu = false
-			document.removeEventListener('click',this.removePrintModel)
-		}
-    },
-});
-</script>
-<style lang="less" scoped>
-.sketchboard_upload_modal {
-	height: 100%;
-    display: flex;
-	.modal_left {
-        padding-top: calc(4rem*1.2);
-        width: 47%;
-		display: flex;
-		flex-direction: column;
-		.switch_type_list {
-            display: flex;
-            align-items: center;
-            position: relative;
-
-            .switch_type_item {
-                display: flex;
-                align-items: center;
-                // padding: 0 2rem*1.2);
-                height: calc(4rem*1.2);
-                background: #fff;
-                border-radius: calc(0.8rem*1.2);
-                line-height: calc(4rem*1.2);
-                font-size: var(--aida-fsize1-8);
-                // margin-right: 2.2rem*1.2);
-                margin-right: calc(8rem*1.2);
-                color: #000;
-                cursor: pointer;
-                position: relative;
-                text-align: center;
-                transform-origin: left;
-                transform: scale(1);
-                transition: 0.3s all;
-                &.switch_type_item::before {
-                    position: absolute;
-                    content: "";
-                    display: block;
-                    background: #000;
-                    height: calc(.3rem*1.2);
-                    left: 50%;
-                    transform: translateX(-50%);
-                    bottom: calc(.6rem*1.2);
-                    width: 0px;
-                    transition: 0.3s all;
-                }
-                &.select_swtich {
-                    color: #000;
-                    // font-weight: 900;
-                    transform: scale(1.15);
-                }
-                &.select_swtich::before {
-                    width: 100%;
-                }
-
-                .switch_icon {
-                    font-size: calc(1.8rem*1.2);
-                    margin-right: calc(0.8rem*1.2);
-                }
-            }
-			.printMenu{
-				margin-right: 0;
-				margin-left: 2rem;
-				margin-top: auto;
-				position: relative;
-				>div{
-					width: 18rem;
-					font-size: var(--aida-fsize1-6);
-					border: 0;
-					i{
-						transition: all .3s;
-						display: inline-block;
-						margin-left: 1rem;
-					}
-					.forbidden{
-						transform: rotate(180deg);
-					}
-				}
-				ul{
-					width: 18rem;
-				}
-			}
-			.switch_type_item:nth-child(3){
-				margin: 0;
-			}
-        }
-		.sketchboard_body {
-			// height: calc(100% - 5rem*1.2));
-			flex: 1;
-			padding-top: calc(2.5rem*1.2);
-			height: calc(30rem*1.2);
-			overflow-x: hidden;
-			display: flex;
-			flex-direction: column;
-        &.moodboard_body::-webkit-scrollbar {
-            display: none;
-        }
-        .upload_img_body {
-            height: calc(100% - 3rem*1.2);
-            overflow-y: auto;
-            margin-bottom: calc(1rem*1.2);
-			&.upload_img_body::-webkit-scrollbar {
-					display: none;
-				}
-        }
-
-       
-		.upload_file_item{
-			margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
-			// margin: 0 2rem*1.2) 2rem*1.2) 0;
-			display: inline-block;
-			width: 10rem;
-			height: 10rem;
-			border: 1px solid #f5f5f5;
-			vertical-align: top;
-			position: relative;
-			img{
-				width: 100%;
-				height: 100%;
-			}
-			&.upload_component {
-                    border: none;
-                }
-               
-			.checked{
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				cursor: pointer;
-				display: none;
-				justify-content: center;
-				align-items: center;
-			}
-			&.modal_img_item:hover .checked{
-				display: flex;
-			}
-			.upload_file_item_content{
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 100%;
-                position: relative;
-                cursor: pointer;
-                .upload_img{
-                    display: block;
-                    max-height: 100%;
-                    max-width: 100%;
-                }
-				&:hover .delete_like_file_block{
-						// display: block;
-						opacity: 1;
-					}
-               
-
-               
-            }
-			
-		}
-		.upload_max_tip {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: calc(1.4rem*1.2);
-			color: #030303;
-
-			.icon-zhuyi {
-				font-size: calc(1.6rem*1.2);
-				margin-right: calc(0.7rem*1.2);
-			}
-		}
-    }
-	}
-	
-	.modal_right{
-		flex: 1;
-		margin-left: calc(3rem*1.2);
-		display: flex;
-		flex-direction: column;
-		.modal_layout,.modal_accomplish{
-			.modal_text{
-				font-size: var(--aida-fsize1-4);
-				font-weight: 400;
-				color: rgba(0, 0, 0, 0.45);
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-			}
-		}
-		.modal_layout{
-			padding-bottom: 4.8rem;
-			.modal_img{
-				width: calc(40rem*1.2);
-				height: calc(5rem*1.2);
-				// overflow-x: hidden;
-				display: flex;
-				flex-direction: row;
-				overflow-y: hidden;
-				&.modal_img::-webkit-scrollbar {
-					display: none;
-				}
-				.mousewheel{
-					display: flex;
-				}
-				.modal_img_item{
-					width: calc(4rem*1.2);
-					height: calc(4rem*1.2);
-					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
-					position: relative;
-					text-align: center;
-					cursor: pointer;
-					overflow: hidden;
-					flex-shrink: 0;
-					img{
-						// width: 100%;
-						width: auto;
-						height: 100%;
-						object-fit: contain;
-					}
-					.checked{
-						position: absolute;
-						top: 0;
-						left: 0;
-						width: 100%;
-						height: 100%;
-						cursor: pointer;
-						display: none;
-						justify-content: center;
-						align-items: center;
-					}
-					&.modal_img_item:hover .checked{
-						display: flex;
-					}
-				}
-				
-			}
-		}
-		.modal_accomplish{
-			// margin-top: 2rem*1.2);
-			overflow-x: hidden;
-			height: calc(30rem*1.2);
-			display: flex;
-			flex-direction: column;
-			flex: 1;
-			position: relative;
-			.mark_loading{
-				position: absolute;
-				z-index: 99;
-			}
-            // overflow-x: hidden;
-			&.modal_accomplish::-webkit-scrollbar {
-                display: none;
-            }
-			.modal_text{
-				padding-top: calc(2rem*1.2);
-				padding-block:calc(2rem*1.2);
-			}
-			.input_box{
-				z-index: 1;
-				input{
-					&.forbidden{
-						cursor:not-allowed;
-					}
-				}
-			}
-			.modal_img{
-				flex: 1;
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: flex-start;
-				align-content: flex-start;
-				position: relative;
-				.modal_imgItem{
-					margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
-					display: inline-block;
-					width: calc(10rem*1.2);
-					height: calc(10rem*1.2);
-					width: 30rem;
-					height: 30rem;
-					border: 1px solid #f5f5f5;
-					position: relative;
-					cursor: pointer;
-					text-align: center;
-					&.modal_imgItem:nth-child(even) {
-						margin-right: 0;
-					}
-					&:hover .delete_like_file_block{
-						display: block;
-						opacity: 1;
-					}
-					img{
-						object-fit: contain;
-						width: 100%;
-						height: 100%;
-					}
-					&.active{
-						opacity: 0.5;
-					// border: 2px solid;
-						border-radius: calc(1rem*1.2);
-						transform: scale(0.9);
-						// img {
-						// }
-						.operate_file_block{
-							pointer-events:none
-						}
-						.pin_block{
-							pointer-events:none
-						}
-						.delete_like_file_block{
-							pointer-events:none
-						}
-					}
-					
-				}
-			}
-		}
-	}
-}
-</style>

src/component/HomePage/generalMenu.vue

@@ -15,42 +15,44 @@
 			</div>
 			<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
 		</div>
-		<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth}">
-			<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
-				<a-popover placement="right" v-if="isCanvas">
-					<template #content>
-						<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
-						<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
-						<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
-							<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
-								<a-upload
-									style="height: 100%;"
-									class="search_upImg"
-									:capture="null"
-									:action="uploadUrl + '/api/element/upload'"
-									list-type="picture-card"
-									:data="{
-										...upload,
-									}"
-									:maxCount='1'
-									:headers="{ Authorization: token }"
-									accept=".jpg,.png,.jpeg,.bmp"
-									@change="(file) => fileUploadChange(file)"
-								>
-								</a-upload>
-							</i>
-						</div> -->
-						<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
+		<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth,...ulStyle}">
+			<div>
+				<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
+					<a-popover placement="right" v-if="isCanvas">
+						<template #content>
+							<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
+							<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
+							<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
+								<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
+									<a-upload
+										style="height: 100%;"
+										class="search_upImg"
+										:capture="null"
+										:action="uploadUrl + '/api/element/upload'"
+										list-type="picture-card"
+										:data="{
+											...upload,
+										}"
+										:maxCount='1'
+										:headers="{ Authorization: token }"
+										accept=".jpg,.png,.jpeg,.bmp"
+										@change="(file) => fileUploadChange(file)"
+									>
+									</a-upload>
+								</i>
+							</div> -->
+							<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
 
-					</template>
-					<span v-if="listItem?.label">{{ listItem?.label }}</span>
-					<span v-else>{{ listItem?.name }}</span>
-				</a-popover>
-				<div v-else>
-					<span v-if="listItem?.label">{{ listItem?.label }}</span>
-					<span v-else>{{ listItem?.name }}</span>
-				</div>
-			</li>
+						</template>
+						<span v-if="listItem?.label">{{ listItem?.label }}</span>
+						<span v-else>{{ listItem?.name }}</span>
+					</a-popover>
+					<div v-else>
+						<span v-if="listItem?.label">{{ listItem?.label }}</span>
+						<span v-else>{{ listItem?.name }}</span>
+					</div>
+				</li>
+			</div>
 		</ul>
 	</div>
  </template>
@@ -91,6 +93,10 @@ import { message, Upload, Modal } from "ant-design-vue";
 			 type:Object,
 			 default:{}
 		 },
+		 ulStyle:{
+			 type:Object,
+			 default:{}
+		 },
 		 selectWidth:{
 			 type:String,
 			 default:'20rem'
@@ -241,12 +247,16 @@ import { message, Upload, Modal } from "ant-design-vue";
 		}
 		ul{
 			position: absolute;
-			border: 1px solid;
 			width: 20rem;
 			margin-top: calc(.3rem*1.2);
-			border-radius: calc(1rem*1.2);
+			z-index: 10;
 			overflow: hidden;
-			z-index: 3;
+			border-radius: calc(1rem*1.2);
+			> div{
+				overflow-y: auto;
+				
+				height: 100%;
+			}
 			li{
 				// background: rgba(0,0,0,.2);
 				background: #fff;

src/component/HomePage/productImg.vue

@@ -16,7 +16,7 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
 						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
 						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
 					</svg>

src/component/HomePage/renew.vue

@@ -206,23 +206,24 @@
             </div>
           </div>
           <div class="gallery_btn gallery_btn_radius" @click="payment">
-                {{ $t("Renew.Continue") }}
+                {{ $t("upgradePlan.Continue") }}
           </div>
           <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
             <label>
               <!-- <input type="checkbox" v-model="clause" /> -->
               <span class="generalModelDescription"
                 >{{ $t("upgradePlan.policy")}}
-				<!-- <a
+				<a
                   href="https://code-create.com.hk/aida-terms-and-conditions/"
-                  target="_blank"
-                  >{{ $t("upgradePlan.policy2") }}</a
-                >{{ $t("upgradePlan.policy3")}}
+                  target="_blank">
+				  {{ $t("upgradePlan.policy1") }}
+				</a>
+				&
 				<a
                   href="https://code-create.com.hk/aida-subscription-agreement/"
-                  target="_blank"
-                  >{{ $t("upgradePlan.policy4") }}</a
-                > -->
+                  target="_blank">
+				  {{ $t("upgradePlan.policy2") }}
+				</a>
 				<!-- . * -->
 				</span
               >
@@ -233,6 +234,10 @@
 			<label class="payIcon">
 				<img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
 				<img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
+				<img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="">
+				<img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="">
+				<img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="">
+				<img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="">
 			</label>
           </div>
           <!-- <div class="paySecure">
@@ -300,7 +305,7 @@ export default defineComponent({
             value: "Month",
             label: "Monthly",
           },
-          PaymentType: "",
+          PaymentType: "CreditCard",
           promotionData: {
             code: "",
             error: "",
@@ -918,7 +923,7 @@ export default defineComponent({
       border-radius: 10px;
       cursor: pointer;
       padding: 0.3rem 4rem;
-      background: #39215b;
+      background: #000;
       color: #fff;
       border: none;
       margin: 0 2rem;

src/component/HomePage/scaleImage.vue

@@ -14,7 +14,7 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
 						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
 						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
 					</svg>
@@ -26,7 +26,7 @@
 		</div>
 		<div class="scaleImage_content">
 			<div v-if="isProductimg" class="productImg_modal">
-				<div class="productImg_left">
+				<div class="productImg_left generalModel_state">
 					<div class="productImg_content_item_title productImg_content_item_title_menu">
 						<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
 						<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
@@ -34,26 +34,27 @@
 					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.SelectionFunction')}}</span>
 					</div>
-					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
-						<a-select  style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction generalModel_state_item" style="margin-bottom: 1rem;">
+						<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
 					</div>
-					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.Similarity')}}</span>
 					</div>
-					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_similarity ">
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_similarity ">
 						<a-slider class="system_silder"
 							v-model:value="productimgSimilarity"
 							:tooltipVisible="false"
 							:step="5"
 							@afterChange="()=>{}"
+							:max="70"
 						>
 						</a-slider>
-						<input type="number" readonly v-model="productimgSimilarity">
+						<input style="margin-left: 2rem;" type="number" readonly v-model="productimgSimilarity">
 					</div>
 					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.RelightDirection')}}</span>
 					</div>
-					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction generalModel_state_item">
 						<!-- <a-slider class="system_silder"
 							v-model:value="similarity"
 							@afterChange="setSimilarity"
@@ -61,7 +62,7 @@
 							:step="5"
 						>
 						</a-slider> -->
-						<a-select  style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
+						<a-select size="large" style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
 					</div>
 					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.Highlight')}}</span>
@@ -75,28 +76,33 @@
 							:step="0.1"
 						>
 						</a-slider>
-						<input type="number" readonly v-model="productimgBrightenValue">
+						<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
 					</div>
 					<div class="input_border productImg_content_item_generate">
 						<div class="input_box">
 							<div class="input_box_btnBox">
-								<input
+								<!-- <input
 									class="search_input"
 									:placeholder="$t('Generate.inputContent1')"
 									v-model="productimgSearchName"
 									@keydown.enter="getPrductimg()"
 								/>
 								<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
-								<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
+								<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i> -->
+								<textarea 
+									ref="textarea"
+									class="textarea "  
+									:placeholder="$t('Generate.inputContent1')"
+									@input="ifMaximumLength" 
+									@keydown.enter="getPrductimg()"
+									v-model="productimgSearchName"
+								></textarea>
 							</div>
-							<textarea 
-								v-show="productimgIsTextarea"
-								class="search_textarea "  
-								@keydown.enter="getPrductimg()"
-								v-model="productimgSearchName"
-							></textarea>
 						</div>
 					</div>
+					<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value == 'flux'">
+						<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
+					</div>
 					<div class="generage_btn_box" style="margin-left: auto;">
 						<div class="generage_btn started_btn"  v-show="!productimgIsProductimg">
 							<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
@@ -130,7 +136,7 @@
 			<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
 				<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
 				<generalMiniCanvas v-if="isCanvas" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
-				<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
+				<img v-else :style="{'max-width':maxWidth}" :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
 				
 				<!-- <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>
@@ -189,6 +195,10 @@ export default defineComponent({
 			type:String,
 			default:''
 		},
+		maxWidth:{
+			type:String,
+			default:'50rem'
+		},
 	},
     setup(props:any,{emit}) {
 		const store = useStore();
@@ -198,6 +208,7 @@ export default defineComponent({
 		let {t} = useI18n()
 		let productimg = reactive({
 			UpgradePlan:null,
+			textarea:null as any,
 			isProductimg:false,
 			productimgSearchName:'',
 			productimgIsTextarea:false,
@@ -226,24 +237,24 @@ export default defineComponent({
 				],
 				toPorductImg:[
 					{
-						title:'Generate with high quality',
-						label:'High',
-						relightLabel:'Relight',
-						value:'',
-					},{
 						title:'',
 						label:'FLUX',
 						relightLabel:'Edit',
 						value:'flux',
+					},{
+						title:'Generate with high quality',
+						label:'High',
+						relightLabel:'Relight',
+						value:'',
 					},
 				]
 			},
 			speedState:false,
 			speedData:{
-				title:'Generate high-quality images',
-				relightLabel:'Relight',
-				label:'High',
-				value:'',
+				title:'',
+				label:'FLUX',
+				relightLabel:'Edit',
+				value:'flux',
 			},
 		})
 		const openSpeed = ()=>{
@@ -449,6 +460,20 @@ export default defineComponent({
 				loadingShow.value = false
 			});
 		}
+		const ifMaximumLength = async ()=>{
+			await nextTick()
+			let textarea = productimg.textarea;
+			if(!textarea)return
+			const scrollTop = textarea.scrollTop;
+			// 2. 计算单行高度
+			const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
+			// 3. 重置高度为1行
+			textarea.style.height = lineHeight + 'px';
+			// 4. 计算实际需要的高度
+			const newHeight = Math.max(lineHeight, textarea.scrollHeight);
+			textarea.style.height = newHeight + 'px';
+			textarea.scrollTop = scrollTop;
+		}
         return {
 			t,
 			...toRefs(productimg),
@@ -469,6 +494,7 @@ export default defineComponent({
 			getPrductimg,
 			removeProductimg,
 			submitBase64Data,
+			ifMaximumLength,
         };
     },
     data() {
@@ -508,6 +534,8 @@ export default defineComponent({
 			}
 			this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
 			document.addEventListener('keydown',this.setKeydown)
+			this.$nextTick()
+			this.ifMaximumLength()
 		},
 		cancelDsign(){
 			this.scaleImage = false
@@ -595,19 +623,12 @@ export default defineComponent({
 	overflow: visible !important;
 }
 </style>
-<style lang="less">
+<style lang="less" >
 .scaleImage_modal {
 	.ant-modal-body {
 		display: flex;
 		flex-direction: column;
     }
-	.productImg_content_item_title{
-		font-weight: 600;
-		font-size: 1.6rem;
-		&.productImg_content_item_title_menu{
-			margin-bottom: 6rem;
-		}
-	}
 	.scaleImage_content{
 		display: flex;
 		justify-content: center;
@@ -619,11 +640,14 @@ export default defineComponent({
 			position: relative;
 			left: 0;
 			z-index: 9;
+			width: 24%;
 			.productImg_left{
 				width: 100%;
 				display: flex;
 				height: 100%;
 				flex-direction: column;
+				align-items: stretch;
+				flex-wrap: nowrap;
 				.input_box_btnBox{
 					width: 100%;
 				}
@@ -638,6 +662,56 @@ export default defineComponent({
 					justify-content: space-around;
 					margin-top: 0;
 				}
+				.productImg_content_item_title{
+					font-weight: 600;
+					font-size: 1.6rem;
+					margin-bottom: 1rem;
+					&.productImg_content_item_title_menu{
+						margin-bottom: 6rem;
+						:deep(.generalMenu_printModel){
+							margin: 0;
+							width: 100%;
+							> div,> ul{
+								width: 100%;
+							}
+						}
+						.productImg_content_item_title_menubtn{
+							font-size: 1.6rem;
+							font-weight: 500;
+						}
+					}
+					&.productImg_content_item_title_similarity{
+						// margin-bottom: 8rem;
+					}
+				}
+				.productImg_content_item_Direction{
+					padding-bottom: 1rem;
+					margin-right: 0;
+					margin-bottom: 1rem;
+				}
+				.selectText{
+					margin-bottom: 2rem;
+					display: flex;
+					width: 100%;
+					> div{
+						background: #efeff1;
+						width: 100%;
+						font-size: 1.6rem;
+						margin-right: 1.2rem;
+						border-radius: 1.6rem;
+						cursor: pointer;
+						padding: 1.2rem;
+						white-space: nowrap; /* 文本不换行 */
+						overflow: hidden; /* 溢出部分隐藏 */
+						text-overflow: ellipsis; /* 显示省略号 */
+						&:hover{
+							background: #f5f5f5;
+						}
+						&:first-child{
+							margin-right: 0;
+						}
+					}
+				}
 				.productImg_content_item_similarity{
 					padding-bottom: 2.4rem;
 					display: flex;