fix
This commit is contained in:
X1627315083
0
public/js/version.json
Normal file
0
public/js/version.json
Normal file
BIN
src/assets/images/homePage/homeNavBg.png
Normal file
BIN
src/assets/images/homePage/homeNavBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -660,8 +660,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
||||
right: 3rem;
|
||||
width: auto;
|
||||
height: auto;
|
||||
top: 60%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
.generalModel_page {
|
||||
width: 100%;
|
||||
@@ -1179,27 +1181,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
||||
.ant-spin {
|
||||
color: #000;
|
||||
}
|
||||
.pin_block {
|
||||
text-align: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.pin_block .ant-checkbox-wrapper {
|
||||
height: 2.2rem;
|
||||
align-items: center;
|
||||
}
|
||||
.pin_block .ant-checkbox-wrapper > span {
|
||||
height: 100%;
|
||||
}
|
||||
.pin_block .ant-checkbox-wrapper > span {
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
.pin_block .ant-checkbox-wrapper > span .ant-checkbox-input::after {
|
||||
height: auto;
|
||||
}
|
||||
.pin_block .ant-checkbox-wrapper > span.ant-checkbox-checked::after {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ant-checkbox-inner {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
@@ -1590,10 +1571,10 @@ textarea:focus {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.upload_item .upload_file_item {
|
||||
margin: 0 calc(2rem) calc(2rem) 0;
|
||||
margin: 1rem;
|
||||
display: inline-block;
|
||||
width: calc(10rem);
|
||||
height: calc(10rem);
|
||||
width: calc(25% - 2rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
@@ -1697,12 +1678,12 @@ textarea:focus {
|
||||
.library_page .input_border,
|
||||
.productImg_modal .input_border,
|
||||
.accountEdit_page .input_border,
|
||||
.generalMenu_printModel_upload .input_border {
|
||||
.generalMenu_printModel_upload .input_border,
|
||||
.generate .input_border {
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: calc(2rem*1.2);
|
||||
background: #fff;
|
||||
top: 0;
|
||||
flex-wrap: wrap;
|
||||
--width: 65%;
|
||||
@@ -1712,7 +1693,8 @@ textarea:focus {
|
||||
.library_page .input_border .input_box,
|
||||
.productImg_modal .input_border .input_box,
|
||||
.accountEdit_page .input_border .input_box,
|
||||
.generalMenu_printModel_upload .input_border .input_box {
|
||||
.generalMenu_printModel_upload .input_border .input_box,
|
||||
.generate .input_border .input_box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
@@ -1725,7 +1707,8 @@ textarea:focus {
|
||||
.library_page .input_border .input_box .inputShowText,
|
||||
.productImg_modal .input_border .input_box .inputShowText,
|
||||
.accountEdit_page .input_border .input_box .inputShowText,
|
||||
.generalMenu_printModel_upload .input_border .input_box .inputShowText {
|
||||
.generalMenu_printModel_upload .input_border .input_box .inputShowText,
|
||||
.generate .input_border .input_box .inputShowText {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
@@ -1735,12 +1718,14 @@ textarea:focus {
|
||||
.productImg_modal .input_border .input_box.active .input_box_btnBox,
|
||||
.accountEdit_page .input_border .input_box.active .input_box_btnBox,
|
||||
.generalMenu_printModel_upload .input_border .input_box.active .input_box_btnBox,
|
||||
.generate .input_border .input_box.active .input_box_btnBox,
|
||||
.collection_modal_body .input_border .input_box.active textarea,
|
||||
.design_detail_modal_component .input_border .input_box.active textarea,
|
||||
.library_page .input_border .input_box.active textarea,
|
||||
.productImg_modal .input_border .input_box.active textarea,
|
||||
.accountEdit_page .input_border .input_box.active textarea,
|
||||
.generalMenu_printModel_upload .input_border .input_box.active textarea {
|
||||
.generalMenu_printModel_upload .input_border .input_box.active textarea,
|
||||
.generate .input_border .input_box.active textarea {
|
||||
border: 1px solid #ff0001;
|
||||
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
@@ -1749,7 +1734,8 @@ textarea:focus {
|
||||
.library_page .input_border .input_box.active span,
|
||||
.productImg_modal .input_border .input_box.active span,
|
||||
.accountEdit_page .input_border .input_box.active span,
|
||||
.generalMenu_printModel_upload .input_border .input_box.active span {
|
||||
.generalMenu_printModel_upload .input_border .input_box.active span,
|
||||
.generate .input_border .input_box.active span {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
color: rgba(255, 0, 0.7);
|
||||
@@ -1759,7 +1745,8 @@ textarea:focus {
|
||||
.library_page .input_border .search_keyword,
|
||||
.productImg_modal .input_border .search_keyword,
|
||||
.accountEdit_page .input_border .search_keyword,
|
||||
.generalMenu_printModel_upload .input_border .search_keyword {
|
||||
.generalMenu_printModel_upload .input_border .search_keyword,
|
||||
.generate .input_border .search_keyword {
|
||||
height: 0;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
@@ -1768,7 +1755,8 @@ textarea:focus {
|
||||
.library_page .input_border .search_keyword .search_keyword_center,
|
||||
.productImg_modal .input_border .search_keyword .search_keyword_center,
|
||||
.accountEdit_page .input_border .search_keyword .search_keyword_center,
|
||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center {
|
||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center,
|
||||
.generate .input_border .search_keyword .search_keyword_center {
|
||||
margin-top: 1rem;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
@@ -1786,7 +1774,8 @@ textarea:focus {
|
||||
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
|
||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||
.generate .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
@@ -1797,7 +1786,8 @@ textarea:focus {
|
||||
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
|
||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||
.generate .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
|
||||
border-radius: 0.4rem;
|
||||
background-color: #000000;
|
||||
margin-right: 1rem;
|
||||
@@ -1813,7 +1803,8 @@ textarea:focus {
|
||||
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
|
||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||
.generate .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox,
|
||||
@@ -1821,7 +1812,8 @@ textarea:focus {
|
||||
.library_page .input_border .input_box_btnBox,
|
||||
.productImg_modal .input_border .input_box_btnBox,
|
||||
.accountEdit_page .input_border .input_box_btnBox,
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox {
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox,
|
||||
.generate .input_border .input_box_btnBox {
|
||||
border: 1px solid #000;
|
||||
border-radius: 4rem;
|
||||
width: var(--width);
|
||||
@@ -1830,13 +1822,15 @@ textarea:focus {
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
padding-right: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox.sketch,
|
||||
.design_detail_modal_component .input_border .input_box_btnBox.sketch,
|
||||
.library_page .input_border .input_box_btnBox.sketch,
|
||||
.productImg_modal .input_border .input_box_btnBox.sketch,
|
||||
.accountEdit_page .input_border .input_box_btnBox.sketch,
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch {
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch,
|
||||
.generate .input_border .input_box_btnBox.sketch {
|
||||
padding: 0;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
|
||||
@@ -1844,7 +1838,8 @@ textarea:focus {
|
||||
.library_page .input_border .input_box_btnBox .ant-spin-text,
|
||||
.productImg_modal .input_border .input_box_btnBox .ant-spin-text,
|
||||
.accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text {
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text,
|
||||
.generate .input_border .input_box_btnBox .ant-spin-text {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox .search_seed,
|
||||
@@ -1852,7 +1847,8 @@ textarea:focus {
|
||||
.library_page .input_border .input_box_btnBox .search_seed,
|
||||
.productImg_modal .input_border .input_box_btnBox .search_seed,
|
||||
.accountEdit_page .input_border .input_box_btnBox .search_seed,
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed {
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed,
|
||||
.generate .input_border .input_box_btnBox .search_seed {
|
||||
padding: 0;
|
||||
width: 4rem;
|
||||
text-align: center;
|
||||
@@ -1864,7 +1860,8 @@ textarea:focus {
|
||||
.library_page .input_border .input_box_btnBox .upload_item,
|
||||
.productImg_modal .input_border .input_box_btnBox .upload_item,
|
||||
.accountEdit_page .input_border .input_box_btnBox .upload_item,
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item {
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item,
|
||||
.generate .input_border .input_box_btnBox .upload_item {
|
||||
width: 5.7rem;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||
@@ -1872,7 +1869,8 @@ textarea:focus {
|
||||
.library_page .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||
.productImg_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||
.accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item {
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||
.generate .input_border .input_box_btnBox .upload_item .upload_file_item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
@@ -1887,7 +1885,8 @@ textarea:focus {
|
||||
.library_page .input_border input,
|
||||
.productImg_modal .input_border input,
|
||||
.accountEdit_page .input_border input,
|
||||
.generalMenu_printModel_upload .input_border input {
|
||||
.generalMenu_printModel_upload .input_border input,
|
||||
.generate .input_border input {
|
||||
width: 100%;
|
||||
border-radius: calc(0.5rem*1.2);
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
@@ -1903,7 +1902,8 @@ textarea:focus {
|
||||
.library_page .input_border inputinput:-moz-placeholder,
|
||||
.productImg_modal .input_border inputinput:-moz-placeholder,
|
||||
.accountEdit_page .input_border inputinput:-moz-placeholder,
|
||||
.generalMenu_printModel_upload .input_border inputinput:-moz-placeholder {
|
||||
.generalMenu_printModel_upload .input_border inputinput:-moz-placeholder,
|
||||
.generate .input_border inputinput:-moz-placeholder {
|
||||
color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.collection_modal_body .input_border inputinput:-ms-input-placeholder,
|
||||
@@ -1911,7 +1911,8 @@ textarea:focus {
|
||||
.library_page .input_border inputinput:-ms-input-placeholder,
|
||||
.productImg_modal .input_border inputinput:-ms-input-placeholder,
|
||||
.accountEdit_page .input_border inputinput:-ms-input-placeholder,
|
||||
.generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder {
|
||||
.generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder,
|
||||
.generate .input_border inputinput:-ms-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.collection_modal_body .input_border inputinput::-webkit-input-placeholder,
|
||||
@@ -1919,7 +1920,8 @@ textarea:focus {
|
||||
.library_page .input_border inputinput::-webkit-input-placeholder,
|
||||
.productImg_modal .input_border inputinput::-webkit-input-placeholder,
|
||||
.accountEdit_page .input_border inputinput::-webkit-input-placeholder,
|
||||
.generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder {
|
||||
.generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder,
|
||||
.generate .input_border inputinput::-webkit-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.collection_modal_body .input_border input.forbidden,
|
||||
@@ -1927,7 +1929,8 @@ textarea:focus {
|
||||
.library_page .input_border input.forbidden,
|
||||
.productImg_modal .input_border input.forbidden,
|
||||
.accountEdit_page .input_border input.forbidden,
|
||||
.generalMenu_printModel_upload .input_border input.forbidden {
|
||||
.generalMenu_printModel_upload .input_border input.forbidden,
|
||||
.generate .input_border input.forbidden {
|
||||
cursor: no-drop;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox_upImg,
|
||||
@@ -1935,7 +1938,8 @@ textarea:focus {
|
||||
.library_page .input_border .input_box_btnBox_upImg,
|
||||
.productImg_modal .input_border .input_box_btnBox_upImg,
|
||||
.accountEdit_page .input_border .input_box_btnBox_upImg,
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox_upImg {
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox_upImg,
|
||||
.generate .input_border .input_box_btnBox_upImg {
|
||||
height: 100%;
|
||||
}
|
||||
.collection_modal_body .input_border .fi,
|
||||
@@ -1943,7 +1947,8 @@ textarea:focus {
|
||||
.library_page .input_border .fi,
|
||||
.productImg_modal .input_border .fi,
|
||||
.accountEdit_page .input_border .fi,
|
||||
.generalMenu_printModel_upload .input_border .fi {
|
||||
.generalMenu_printModel_upload .input_border .fi,
|
||||
.generate .input_border .fi {
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
@@ -1960,7 +1965,8 @@ textarea:focus {
|
||||
.library_page .input_border .fi.fi-br-loading,
|
||||
.productImg_modal .input_border .fi.fi-br-loading,
|
||||
.accountEdit_page .input_border .fi.fi-br-loading,
|
||||
.generalMenu_printModel_upload .input_border .fi.fi-br-loading {
|
||||
.generalMenu_printModel_upload .input_border .fi.fi-br-loading,
|
||||
.generate .input_border .fi.fi-br-loading {
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@@ -1969,7 +1975,8 @@ textarea:focus {
|
||||
.library_page .input_border .fi.active,
|
||||
.productImg_modal .input_border .fi.active,
|
||||
.accountEdit_page .input_border .fi.active,
|
||||
.generalMenu_printModel_upload .input_border .fi.active {
|
||||
.generalMenu_printModel_upload .input_border .fi.active,
|
||||
.generate .input_border .fi.active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.collection_modal_body .input_border .fi.forbidden,
|
||||
@@ -1977,7 +1984,8 @@ textarea:focus {
|
||||
.library_page .input_border .fi.forbidden,
|
||||
.productImg_modal .input_border .fi.forbidden,
|
||||
.accountEdit_page .input_border .fi.forbidden,
|
||||
.generalMenu_printModel_upload .input_border .fi.forbidden {
|
||||
.generalMenu_printModel_upload .input_border .fi.forbidden,
|
||||
.generate .input_border .fi.forbidden {
|
||||
cursor: no-drop;
|
||||
}
|
||||
.collection_modal_body .input_border .search_upImg,
|
||||
@@ -1985,7 +1993,8 @@ textarea:focus {
|
||||
.library_page .input_border .search_upImg,
|
||||
.productImg_modal .input_border .search_upImg,
|
||||
.accountEdit_page .input_border .search_upImg,
|
||||
.generalMenu_printModel_upload .input_border .search_upImg {
|
||||
.generalMenu_printModel_upload .input_border .search_upImg,
|
||||
.generate .input_border .search_upImg {
|
||||
width: 4rem;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@@ -1997,7 +2006,8 @@ textarea:focus {
|
||||
.library_page .input_border .search_upImg span,
|
||||
.productImg_modal .input_border .search_upImg span,
|
||||
.accountEdit_page .input_border .search_upImg span,
|
||||
.generalMenu_printModel_upload .input_border .search_upImg span {
|
||||
.generalMenu_printModel_upload .input_border .search_upImg span,
|
||||
.generate .input_border .search_upImg span {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -2006,7 +2016,8 @@ textarea:focus {
|
||||
.library_page .input_border .search_upImg .ant-upload-select-picture-card,
|
||||
.productImg_modal .input_border .search_upImg .ant-upload-select-picture-card,
|
||||
.accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card,
|
||||
.generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card {
|
||||
.generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card,
|
||||
.generate .input_border .search_upImg .ant-upload-select-picture-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block !important;
|
||||
@@ -2016,7 +2027,8 @@ textarea:focus {
|
||||
.library_page .input_border .search_textarea,
|
||||
.productImg_modal .input_border .search_textarea,
|
||||
.accountEdit_page .input_border .search_textarea,
|
||||
.generalMenu_printModel_upload .input_border .search_textarea {
|
||||
.generalMenu_printModel_upload .input_border .search_textarea,
|
||||
.generate .input_border .search_textarea {
|
||||
z-index: 3;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
@@ -2033,7 +2045,8 @@ textarea:focus {
|
||||
.library_page .input_border .generage_btn_box,
|
||||
.productImg_modal .input_border .generage_btn_box,
|
||||
.accountEdit_page .input_border .generage_btn_box,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box {
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box,
|
||||
.generate .input_border .generage_btn_box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -2043,7 +2056,8 @@ textarea:focus {
|
||||
.library_page .input_border .generage_btn_box .icon-xiala,
|
||||
.productImg_modal .input_border .generage_btn_box .icon-xiala,
|
||||
.accountEdit_page .input_border .generage_btn_box .icon-xiala,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala {
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala,
|
||||
.generate .input_border .generage_btn_box .icon-xiala {
|
||||
margin-left: 1rem;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
@@ -2053,7 +2067,8 @@ textarea:focus {
|
||||
.library_page .input_border .generage_btn_box .icon-xiala.active,
|
||||
.productImg_modal .input_border .generage_btn_box .icon-xiala.active,
|
||||
.accountEdit_page .input_border .generage_btn_box .icon-xiala.active,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala.active {
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala.active,
|
||||
.generate .input_border .generage_btn_box .icon-xiala.active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.collection_modal_body .input_border .generage_btn_box .content,
|
||||
@@ -2061,7 +2076,8 @@ textarea:focus {
|
||||
.library_page .input_border .generage_btn_box .content,
|
||||
.productImg_modal .input_border .generage_btn_box .content,
|
||||
.accountEdit_page .input_border .generage_btn_box .content,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content {
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content,
|
||||
.generate .input_border .generage_btn_box .content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: calc(100% - 2rem);
|
||||
@@ -2077,7 +2093,8 @@ textarea:focus {
|
||||
.library_page .input_border .generage_btn_box .content > div,
|
||||
.productImg_modal .input_border .generage_btn_box .content > div,
|
||||
.accountEdit_page .input_border .generage_btn_box .content > div,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div {
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div,
|
||||
.generate .input_border .generage_btn_box .content > div {
|
||||
background: #cccccc;
|
||||
line-height: 2;
|
||||
font-size: 1.8rem;
|
||||
@@ -2091,7 +2108,8 @@ textarea:focus {
|
||||
.library_page .input_border .generage_btn_box .content > div:hover,
|
||||
.productImg_modal .input_border .generage_btn_box .content > div:hover,
|
||||
.accountEdit_page .input_border .generage_btn_box .content > div:hover,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div:hover {
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div:hover,
|
||||
.generate .input_border .generage_btn_box .content > div:hover {
|
||||
background: #999999;
|
||||
}
|
||||
.collection_modal_body .input_border .generage_btn,
|
||||
@@ -2099,7 +2117,8 @@ textarea:focus {
|
||||
.library_page .input_border .generage_btn,
|
||||
.productImg_modal .input_border .generage_btn,
|
||||
.accountEdit_page .input_border .generage_btn,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn {
|
||||
.generalMenu_printModel_upload .input_border .generage_btn,
|
||||
.generate .input_border .generage_btn {
|
||||
margin-left: 2rem;
|
||||
display: flex;
|
||||
font-size: 1.8rem;
|
||||
|
||||
@@ -726,9 +726,11 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
||||
// height: 1.2rem;
|
||||
width: auto;
|
||||
height: auto;
|
||||
top: 60%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
// margin-top: -.6rem;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0;
|
||||
// top: 50%;
|
||||
// transform: translateY(-45%);
|
||||
}
|
||||
@@ -1295,28 +1297,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
||||
.ant-spin{
|
||||
color: #000;
|
||||
}
|
||||
.pin_block{
|
||||
text-align: center;
|
||||
margin-top:.5rem;
|
||||
.ant-checkbox-wrapper{
|
||||
height: 2.2rem;
|
||||
align-items: center;
|
||||
>span{
|
||||
height: 100%;
|
||||
}
|
||||
>span{
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.3rem;
|
||||
.ant-checkbox-input::after{
|
||||
height: auto;
|
||||
}
|
||||
&.ant-checkbox-checked::after{
|
||||
border: 1px solid rgba(0,0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.ant-checkbox-inner{
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
@@ -1725,12 +1705,15 @@ textarea:focus{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.upload_file_item {
|
||||
margin: 0 calc(2rem) calc(2rem) 0;
|
||||
// margin: 0 calc(2rem) calc(2rem) 0;
|
||||
margin: 1rem;
|
||||
display: inline-block;
|
||||
// width: calc(16.5rem);
|
||||
// height: calc(16.5rem);
|
||||
width: calc(10rem);
|
||||
height: calc(10rem);
|
||||
// width: calc(10rem);
|
||||
// height: calc(10rem);
|
||||
width: calc(25% - 2rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
@@ -1840,13 +1823,12 @@ textarea:focus{
|
||||
|
||||
}
|
||||
//设计input和上传按钮样式
|
||||
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal,.accountEdit_page,.generalMenu_printModel_upload{
|
||||
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
|
||||
.input_border{
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: calc(2rem*1.2);
|
||||
background: #fff;
|
||||
top: 0;
|
||||
flex-wrap: wrap;
|
||||
--width:65%;
|
||||
@@ -1925,6 +1907,7 @@ textarea:focus{
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
padding-right: 0;
|
||||
background-color: #fff;
|
||||
// border
|
||||
&.sketch{
|
||||
padding: 0;
|
||||
|
||||
@@ -838,7 +838,6 @@ export default defineComponent({
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: calc(7rem*1.2);
|
||||
.modal_layout{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@@ -263,7 +263,8 @@ export default defineComponent({
|
||||
let generateProceedList:any = ref([])
|
||||
let remGenerate:any = ref(false)
|
||||
let remGenerateTime:any = ref()
|
||||
let styleRecommend:any = inject('styleRecommend')
|
||||
let styleRecommend:any = []
|
||||
// let styleRecommend:any = inject('styleRecommend')
|
||||
let generateLevel2Type = ''
|
||||
let isSloganHint:any = ref(' ')
|
||||
let loadingShow =ref(false)
|
||||
@@ -959,7 +960,6 @@ export default defineComponent({
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
position: relative;
|
||||
// padding-top: calc(2.5rem*1.2);
|
||||
.input_border{
|
||||
@@ -978,7 +978,6 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
padding-top: calc(2rem*1.2);
|
||||
z-index: 3;
|
||||
}
|
||||
@@ -998,7 +997,9 @@ export default defineComponent({
|
||||
}
|
||||
.generage_img_item {
|
||||
cursor: pointer;
|
||||
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
||||
margin: 1rem;
|
||||
width: calc(25% - 2rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
position: relative;
|
||||
&.active {
|
||||
opacity: 0.5;
|
||||
|
||||
@@ -10,7 +10,8 @@
|
||||
<div class="my_material_header">
|
||||
<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
|
||||
<div class="select_block">
|
||||
<a-select
|
||||
<generalMenu :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
|
||||
<!-- <a-select
|
||||
ref="select"
|
||||
v-model:value="disignType"
|
||||
:options="disignTypeList"
|
||||
@@ -23,7 +24,7 @@
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</a-select> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -46,9 +47,15 @@
|
||||
<a-checkbox v-model:collectionChecked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
|
||||
<img src="@/assets/images/homePage/loading.gif" alt="">
|
||||
<div v-show="!load.isNoData" class="material_content_list_loding">
|
||||
<span class="page_loading" v-show="!isShowLoading" v-observe></span>
|
||||
<span v-show="isShowLoading">
|
||||
<img src="@/assets/images/homePage/loading.gif" alt="">
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
|
||||
<img src="@/assets/images/homePage/loading.gif" alt="">
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="no_data_block loading_block" v-show="isShowLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
@@ -69,9 +76,10 @@ import { useI18n } from 'vue-i18n';
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import printCategory from "@/component/HomePage/printCategory.vue";
|
||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { sketchCategory,printCategory },
|
||||
components: { sketchCategory,printCategory,generalMenu },
|
||||
|
||||
props: ["msg",'disignTypeList'],
|
||||
setup(prop) {
|
||||
@@ -100,6 +108,10 @@ export default defineComponent({
|
||||
name:'',
|
||||
value:''
|
||||
})
|
||||
let load = ref({
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
})
|
||||
return{
|
||||
myMaterialModalShow,
|
||||
imgList,
|
||||
@@ -117,6 +129,7 @@ export default defineComponent({
|
||||
driver__,
|
||||
usGenerateList,
|
||||
disignType,
|
||||
load,
|
||||
}
|
||||
},
|
||||
data (prop) {
|
||||
@@ -132,22 +145,36 @@ export default defineComponent({
|
||||
observe:{
|
||||
mounted (el,binding) {
|
||||
// console.log(binding.instance);
|
||||
const ob = new IntersectionObserver(callback,{
|
||||
root:null,
|
||||
threshold:[0.1]
|
||||
})
|
||||
ob.observe(el)
|
||||
// this.currentPage = 1
|
||||
// this.pageSize = 12
|
||||
let this_:any = binding.instance
|
||||
function callback(entries:any, observer:any) {
|
||||
entries.forEach((entry:any) => {
|
||||
if (entry.isIntersecting) {
|
||||
this_.getLibraryList('di')
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
this_.load.isShowMark = false
|
||||
this_.load.isNoData = false
|
||||
let parentDom = el.parentNode
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交，则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
this_.currentPage += 1
|
||||
this_.getLibraryList('di')
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(el);
|
||||
// const ob = new IntersectionObserver(callback,{
|
||||
// // root:null,
|
||||
// // threshold:[0.1]
|
||||
// })
|
||||
// ob.observe(el)
|
||||
// console.log(el)
|
||||
// // this.currentPage = 1
|
||||
// // this.pageSize = 12
|
||||
// let this_:any = binding.instance
|
||||
// function callback(entries:any, observer:any) {
|
||||
// entries.forEach((entry:any) => {
|
||||
// if (!entries[0].intersectionRatio) return;
|
||||
// console.log(123);
|
||||
// // this_.getLibraryList('di')
|
||||
// });
|
||||
// }
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -253,9 +280,13 @@ export default defineComponent({
|
||||
this.pageSize = 12
|
||||
this.imgList = []
|
||||
if(code != 'Moodboard'){
|
||||
this.disignType = this.disignTypeList[0].value
|
||||
this.disignType = this.disignTypeList[0]
|
||||
}
|
||||
this.getLibraryList('')
|
||||
this.load = {
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
}
|
||||
this.handleChange()
|
||||
|
||||
},
|
||||
setUseGenerate(arr:any){
|
||||
@@ -317,9 +348,17 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
},
|
||||
menuChange(data:any){
|
||||
this.disignType = data
|
||||
this.handleChange()
|
||||
},
|
||||
handleChange(){
|
||||
this.currentPage = 1
|
||||
this.imgList = []
|
||||
this.load = {
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
}
|
||||
this.getLibraryList('')
|
||||
},
|
||||
upTypeSucced(){
|
||||
@@ -327,6 +366,7 @@ export default defineComponent({
|
||||
},
|
||||
//选择所有的图片
|
||||
async getLibraryList(str:any){
|
||||
if(this.load.isShowMark && !this.load.isNoData)return
|
||||
let workspace = JSON.parse(JSON.stringify(this.store.state.Workspace.workspace))
|
||||
if(this.searchPictureName != this.isOldSearchPictureName || this.workspace?.sexEnum?.value != workspace.sexEnum.value){
|
||||
this.imgList = []
|
||||
@@ -334,12 +374,12 @@ export default defineComponent({
|
||||
}else{
|
||||
}
|
||||
|
||||
if(str == 'di'){
|
||||
this.currentPage = this.imgList?.[0]?.id != undefined?this.imgList?.length / this.pageSize+1:1
|
||||
}
|
||||
// if(str == 'di'){
|
||||
// this.currentPage = this.imgList?.[0]?.id != undefined?this.imgList?.length / this.pageSize+1:1
|
||||
// }
|
||||
let data = {
|
||||
level1Type:this.selectCode,
|
||||
level2Type: this.selectCode == 'Moodboard'?'':this.disignType,
|
||||
level2Type: this.selectCode == 'Moodboard'?'':this.disignType.value,
|
||||
modelSex:workspace?.sexEnum.value,
|
||||
page: this.currentPage,
|
||||
// page:this.currentPage,
|
||||
@@ -353,6 +393,7 @@ export default defineComponent({
|
||||
(rv: any) => {
|
||||
this.total = rv.total
|
||||
let aa:any = []
|
||||
if(rv.content.length == 0)this.load.isNoData = true
|
||||
rv.content.forEach((item:any,index:any) => {
|
||||
let arr
|
||||
if(this.type_.type2 == 'Sketchboard'){
|
||||
@@ -392,6 +433,7 @@ export default defineComponent({
|
||||
}
|
||||
).catch((res)=>{
|
||||
this.isShowLoading = false
|
||||
this.load.isNoData = true
|
||||
});
|
||||
},
|
||||
}
|
||||
@@ -401,9 +443,10 @@ export default defineComponent({
|
||||
.my_material_modal{
|
||||
height: calc(30rem*1.2);
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
flex: 1;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.my_material_modal::-webkit-scrollbar{display: none;}
|
||||
.ant-modal-close{
|
||||
width: calc(3.6rem*1.2);
|
||||
@@ -434,7 +477,7 @@ export default defineComponent({
|
||||
padding: 0;
|
||||
padding-top: calc(2.5rem*1.2);
|
||||
padding-bottom: calc(2rem*1.2);
|
||||
background-color: #fff;
|
||||
// background-color: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
@@ -507,7 +550,8 @@ export default defineComponent({
|
||||
// height: calc(100% - 6.6rem*1.2));
|
||||
height: auto;
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.material_content_top{
|
||||
padding: calc(1.3rem*1.2) 0 calc(2.1rem*1.2);
|
||||
height: calc(7rem*1.2);
|
||||
@@ -571,14 +615,17 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
height: calc(30rem*1.2);
|
||||
&.material_content_body::-webkit-scrollbar{display: none;}
|
||||
|
||||
.content_img_item{
|
||||
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
||||
margin: 1rem;
|
||||
display: inline-block;
|
||||
width: calc(10rem*1.2);
|
||||
height: calc(10rem*1.2);
|
||||
// width: calc(16.5rem);
|
||||
// height: calc(16.5rem);
|
||||
// width: calc(10rem);
|
||||
// height: calc(10rem);
|
||||
width: calc(25% - 2rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@@ -589,7 +636,7 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
}
|
||||
&.moodb{
|
||||
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
||||
// margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
||||
}
|
||||
.pin_block{
|
||||
.ant-checkbox-wrapper{
|
||||
@@ -639,6 +686,13 @@ export default defineComponent({
|
||||
}
|
||||
.material_content_list_loding{
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
.page_loading{
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
img{
|
||||
height: calc(10rem*1.2);
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
||||
<div @click.stop="openPrintModel"><span>{{ scene.name }}</span> <i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
|
||||
<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span> </div>
|
||||
<ul v-show="openMenu">
|
||||
<li
|
||||
v-for="item,index in printCatecoryList"
|
||||
@@ -696,8 +696,7 @@ export default defineComponent({
|
||||
i{
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.forbidden{
|
||||
transform: rotate(180deg);
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
||||
<div @click.stop="openPrintModel"> <span>{{ scene.name }}</span>
|
||||
<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
|
||||
<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
|
||||
</div>
|
||||
<ul v-show="openMenu">
|
||||
<li
|
||||
v-for="item,index in sketchStyleList"
|
||||
@@ -662,6 +662,7 @@ export default defineComponent({
|
||||
i{
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.forbidden{
|
||||
transform: rotate(180deg);
|
||||
|
||||
@@ -225,6 +225,7 @@ import { message, Upload, Modal } from "ant-design-vue";
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
> span{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,743 @@
|
||||
<template>
|
||||
<div class="collection_modal_item">
|
||||
<div class="modal_left" >
|
||||
<div class="switch_type_list" >
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('MoodboardUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('MoodboardUpload.Library') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('MoodboardUpload.Generate') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 1" class="moodboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in fileList"
|
||||
:key="file"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteFile(file)"
|
||||
>
|
||||
{{ $t('MoodboardUpload.Delete') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component"
|
||||
v-show="moodboarList.length < 8"
|
||||
>
|
||||
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
v-model:file-list="fileList"
|
||||
:maxCount="8 - moodboarList.length+fileList.length"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
v-show=" moodboarList.length < 8"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>{{ $t('MoodboardUpload.Maximum') }}</span>
|
||||
</div>
|
||||
<!-- <div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span
|
||||
>Maximum 10 images can be uploaded, Maximum 2M per
|
||||
image</span
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
<Material
|
||||
v-show="openClick == 2"
|
||||
ref="Material"
|
||||
msg="Moodboard"
|
||||
></Material>
|
||||
<Generate
|
||||
v-show="openClick == 3"
|
||||
ref="Generate"
|
||||
msg="Moodboard"
|
||||
></Generate>
|
||||
</div>
|
||||
<div v-show="moodboarList.length" class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>
|
||||
{{ $t('MoodboardUpload.Thumbnail') }}
|
||||
</div>
|
||||
<div class="modal_btn started_btn" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
|
||||
</div>
|
||||
<div class="modal_img" >
|
||||
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
|
||||
<div class="modal_text">
|
||||
<div>{{ $t('MoodboardUpload.selected') }}</div>
|
||||
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
|
||||
</div>
|
||||
<div class="modal_img_max">
|
||||
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
|
||||
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
|
||||
<img :src="item.imgUrl" v-modelImg>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="modal_img">
|
||||
<img :src="modalImg[0].imgUrl">
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl,isMoible } from "@/tool/util";
|
||||
import { useStore } from "vuex";
|
||||
import { message, Upload } from "ant-design-vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import Material from "@/component/HomePage/Material.vue";
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
|
||||
import layout from "@/component/HomePage/layout.vue";
|
||||
import domTurnImg from '@/tool/domTurnImg'
|
||||
import GO from "@/tool/GO";
|
||||
import moodb from "@/tool/moodb";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: { Material, MoodTemplate, Generate,layout },
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let lessenList: any = ref([]);
|
||||
let fileList: any = ref([]);
|
||||
let showFileList: any = ref([]);
|
||||
let templateModal: any = ref(false);
|
||||
let templateFileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
let moodb_className:any = ref([]);
|
||||
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
|
||||
let layoutList:any = []//选中后随机生成的list
|
||||
let layoutOpen = ref(false)
|
||||
let loadingShow = ref(false)
|
||||
let modalImg:any= computed(()=>{
|
||||
return store.state.UploadFilesModule.disposeMoodboard
|
||||
})
|
||||
let uploading:any = ref([])
|
||||
let edieShow:any = ref()
|
||||
let {t} = useI18n()
|
||||
|
||||
return {
|
||||
fileList,
|
||||
showFileList,
|
||||
lessenList,
|
||||
templateModal,
|
||||
templateFileList,
|
||||
openClick,
|
||||
moodb_className,
|
||||
flex_direction,
|
||||
layoutList,
|
||||
layoutOpen,
|
||||
loadingShow,
|
||||
modalImg,
|
||||
uploading,
|
||||
edieShow,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload: {
|
||||
isPin: 0,
|
||||
gender:'',
|
||||
level1Type: "Moodboard",
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
moodb_:moodb.moodb_,
|
||||
moodboarList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.moodboard
|
||||
}),
|
||||
};
|
||||
},
|
||||
// watcheffect(){
|
||||
// let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
|
||||
// (v: any) => v.checked == true
|
||||
// );
|
||||
// this.store.commit("setMoodboardFile", breviaryList);
|
||||
// console.log(22);
|
||||
// },
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
},
|
||||
directives:{
|
||||
modelImg:{
|
||||
mounted(el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
el.style.width = 100+'%'
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
},
|
||||
updated (el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
el.style.width = 100+'%'
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
if(num ==2 ){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Moodboard')
|
||||
}else if (num == 3){
|
||||
}
|
||||
},
|
||||
fileUploadChange(data: any) {
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
if(res.errCode == 0){
|
||||
file.imgUrl = res.data.url;
|
||||
file.resData = res.data;
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Moodboard'
|
||||
};
|
||||
file.id_ = GO.id++
|
||||
file.id = res.data.id
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
let arr = this.store.state.UploadFilesModule.moodboard
|
||||
if(arr.length >= 8){
|
||||
message.info(this.t('MoodboardUpload.jsContent1'))
|
||||
}else{
|
||||
this.store.commit("setMoodboardFile", fileList);
|
||||
}
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
// this.showFileList = this.fileList
|
||||
} else if (file.status === "error") {
|
||||
bor = false
|
||||
}
|
||||
if(!bor){
|
||||
let res:any = JSON.parse(file.xhr.response);
|
||||
let index = -1;
|
||||
this.fileList.forEach((ele: any, index1: any) => {
|
||||
if (file.uid === ele.uid) {
|
||||
index = index1;
|
||||
}
|
||||
});
|
||||
if (index > -1) {
|
||||
this.fileList.splice(index, 1);
|
||||
}
|
||||
// message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
|
||||
message.warning(res.errMsg);
|
||||
}
|
||||
},
|
||||
beforeUpload(file: any) {
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/png" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.info(this.t('MoodboardUpload.jsContent3'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(this.t('MoodboardUpload.jsContent4'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
deleteFile(item: any) {
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
})
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
}
|
||||
if(this.store.state.UploadFilesModule.moodboard.length == 0){
|
||||
this.store.commit("clearMoodTemplateId");
|
||||
this.layoutList = []
|
||||
this.edieShow = false
|
||||
}
|
||||
},
|
||||
recollection() {
|
||||
let arr = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.moodboardFiles
|
||||
)
|
||||
);
|
||||
let disposeMoodboard = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.disposeMoodboard
|
||||
)
|
||||
);
|
||||
let moodboardPosition = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.moodboardPosition
|
||||
)
|
||||
);
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
material:[] as any,
|
||||
moodboard:[] as any,
|
||||
}
|
||||
arr.forEach((v:any)=>{
|
||||
if(v.type_.type1 == 'generate'){
|
||||
setboard.generate.push(v)
|
||||
}else if(v.type_.type1 == 'material'){
|
||||
setboard.material.push(v)
|
||||
}else{
|
||||
setboard.moodboard.push(v)
|
||||
}
|
||||
})
|
||||
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
|
||||
this.store.commit("setMoodboardMaterialFiles", setboard.material);
|
||||
this.store.commit("setMoodboardFile", setboard.moodboard);
|
||||
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
|
||||
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
|
||||
this.fileList = setboard.moodboard
|
||||
},
|
||||
|
||||
async changeTemplateModal() {
|
||||
if(this.modalImg[0]?.id){
|
||||
let layout:any = this.$refs.layout
|
||||
if(this.layoutList.length <= 0){
|
||||
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
|
||||
if(!styleObj.domStyle)await this.layout()
|
||||
//
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
||||
this.layoutList = arr
|
||||
}
|
||||
if(window.screen.width<1300){
|
||||
layout.isMobile = true
|
||||
}else{
|
||||
layout.isMobile = false
|
||||
}
|
||||
|
||||
layout.init()
|
||||
}else{
|
||||
message.info(this.t('MoodboardUpload.jsContent5'))
|
||||
}
|
||||
|
||||
},
|
||||
async layout(){
|
||||
if(this.loadingShow)return
|
||||
await new Promise((resolve, reject) => {
|
||||
this.loadingShow = true
|
||||
this.store.commit("setDisposeMoodboard", []);
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
||||
this.layoutList = arr
|
||||
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
||||
let moodb = this.moodb_[arr.length-1][random]
|
||||
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
||||
this.flex_direction = true
|
||||
}else{
|
||||
this.flex_direction = false
|
||||
}
|
||||
if(this.moodb_[arr.length-1].length != 1){
|
||||
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
|
||||
this.loadingShow = false
|
||||
this.layout()
|
||||
return resolve('')
|
||||
}
|
||||
}
|
||||
this.edieShow = true
|
||||
if(this.moodb_[arr.length-1].length == 2){
|
||||
this.moodb_className = this.moodb_[arr.length-1][0]
|
||||
}else{
|
||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
||||
}
|
||||
this.layoutOpen = true
|
||||
//提交模板
|
||||
// this.loadingShow = true
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
nextTick().then(()=>{
|
||||
let layoutCentent = document.getElementById('modal_img')
|
||||
let obj = {
|
||||
imgStyle:[],
|
||||
domStyle:[],
|
||||
borStyle:[],
|
||||
rototeStyle:[],
|
||||
translateStyle:[],
|
||||
angleTRStyle:[],
|
||||
angleTLStyle:[],
|
||||
angleBRStyle:[],
|
||||
angleBLStyle:[],
|
||||
class:this.moodb_className,
|
||||
}
|
||||
this.store.commit("setDisposeMoodboardPosition", obj);
|
||||
domTurnImg(layoutCentent).then((rv)=>{
|
||||
let file = rv
|
||||
let param = new FormData();
|
||||
param.append('inPin','0')
|
||||
param.append('level1Type','Moodboard')
|
||||
param.append('gender','')
|
||||
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
||||
param.append('file',file);
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
|
||||
.then((rv: any) => {
|
||||
let img:any = rv
|
||||
img.imgUrl = rv.url
|
||||
img.resData = JSON.parse(JSON.stringify(img))
|
||||
this.store.commit("setDisposeMoodboard", img);
|
||||
this.loadingShow = false
|
||||
resolve('')
|
||||
}
|
||||
).catch(rv=>{
|
||||
this.loadingShow = false
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
setmoodbClass(val:any){
|
||||
this.moodb_className = val
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.collection_modal_item {
|
||||
// padding: 1.5rem 2.6rem 4rem;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.modal_left,.modal_right{
|
||||
background: #f7f8fa;
|
||||
border-radius: 3rem;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
.modal_left {
|
||||
width: 71rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
margin-right: 2rem;
|
||||
// width: 50rem*1.2);
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 0 2rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
border-radius: calc(0.8rem*1.2);
|
||||
line-height: calc(4rem*1.2);
|
||||
font-size: var(--aida-fsize1-8);
|
||||
// margin-right: 2.2rem*1.2);
|
||||
margin-right: calc(8rem*1.2);
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.3rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: calc(.6rem*1.2);
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
// font-weight: 900;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.switch_icon {
|
||||
font-size: calc(1.8rem*1.2);
|
||||
margin-right: calc(0.8rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moodboard_body {
|
||||
padding-top: calc(2.5rem*1.2);
|
||||
flex: 1;
|
||||
height: calc(30rem*1.2);
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.moodboard_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
margin-bottom: calc(1rem*1.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.upload_max_tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(1.4rem*1.2);
|
||||
color: #030303;
|
||||
|
||||
.icon-zhuyi {
|
||||
font-size: calc(1.6rem*1.2);
|
||||
margin-right: calc(0.7rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: calc(57rem*1.2);
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size:var(--aida-fsize1-4);
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.modal_layout{
|
||||
.modal_img{
|
||||
width: calc(40rem*1.2);
|
||||
height: calc(5rem*1.2);
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_img_item{
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
text-align: center;
|
||||
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.modal_accomplish{
|
||||
// margin-top: 2rem*1.2);
|
||||
height: calc(30rem*1.2);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
.modal_text{
|
||||
padding-top: calc(2rem*1.2);
|
||||
padding-block: calc(2rem*1.2);
|
||||
}
|
||||
.modal_img_max{
|
||||
// flex: 1;
|
||||
// width: 57rem;
|
||||
// height: 35rem;
|
||||
width: 92rem;
|
||||
height: 56.5rem;
|
||||
position: relative;
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.modal_img{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
>img{
|
||||
// height: 100%;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.modal_imgItem{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
img{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
}
|
||||
.wh1{
|
||||
width: 23%;
|
||||
height: 48%;
|
||||
}
|
||||
.wh4{
|
||||
width: 48.5%;
|
||||
height: 100%;
|
||||
}
|
||||
.wh8{
|
||||
width: 100%;
|
||||
height: 48.5%;
|
||||
}
|
||||
.w1h2{
|
||||
width: 23%;
|
||||
height: 100%;
|
||||
}
|
||||
.w2h1{
|
||||
width: 48.5%;
|
||||
height: 48%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,967 @@
|
||||
<template>
|
||||
<div class="sketchboard_upload_modal">
|
||||
<div class="modal_left">
|
||||
<div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('SketchboardUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('SketchboardUpload.Library') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item Guide_1_9"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
|
||||
>
|
||||
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
||||
<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
|
||||
</div>
|
||||
<ul v-show="openMenu">
|
||||
<li
|
||||
v-for="item,index in sketchStyleList"
|
||||
class="printModel_item"
|
||||
@click.stop="setSceneList(item)"
|
||||
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
|
||||
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
|
||||
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
|
||||
>{{ item.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 1" class="sketchboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in fileList"
|
||||
:key="file"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
|
||||
<div
|
||||
class="delete_like_file_block"
|
||||
@click.stop="deleteFile(file)"
|
||||
>
|
||||
<span
|
||||
class="icon iconfont icon-shanchu"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="pin_block"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<a-checkbox v-model:checked="file.pin"
|
||||
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component"
|
||||
v-show="sketchboardList.length < 20"
|
||||
>
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
:capture="null"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:multiple="!driver__.driver"
|
||||
:before-upload="beforeUpload"
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="fileList"
|
||||
:maxCount="20 - sketchboardList.length+fileList.length"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
v-show="sketchboardList.length < 20"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Material
|
||||
v-show="openClick == 2"
|
||||
ref="Material"
|
||||
msg="Sketchboard"
|
||||
@confirmSelect="confirmSelect"
|
||||
:disignTypeList="sketchCatecoryList"
|
||||
@setLibrary = setSetchboardGenerate
|
||||
></Material>
|
||||
<Generate
|
||||
v-show="openClick == 3"
|
||||
ref="Generate"
|
||||
msg="Sketchboard"
|
||||
:scene="scene"
|
||||
:sketchCatecoryList="sketchCatecoryList"
|
||||
></Generate>
|
||||
</div>
|
||||
<div class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
|
||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||
</div>
|
||||
<!-- <div class="modal_img modal_img_x" v-mousewheel>
|
||||
<div class="mousewheel">
|
||||
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="modal_accomplish">
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
|
||||
<img v-lazy="item.imgUrl">
|
||||
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
|
||||
<!-- 在sketch 和print暂时关闭like -->
|
||||
<!-- <div
|
||||
class="delete_like_file_block left1"
|
||||
:class="[driver__.driver?'hideEvents':'']"
|
||||
>
|
||||
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
|
||||
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
|
||||
</div> -->
|
||||
<div class="pin_block">
|
||||
<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
|
||||
<i v-if="item.pin" class="fi fi-rr-check"></i>
|
||||
<i v-else class="fi noCheck"></i>
|
||||
<span>PIN</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="moreBox" @click.stop>
|
||||
<more :moreList="['edit','down','enlargement']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
|
||||
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
import GO from "@/tool/GO";
|
||||
import { useStore } from "vuex";
|
||||
import { message, Upload, Modal } from "ant-design-vue";
|
||||
import Material from "@/component/HomePage/Material.vue";
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import more from './more.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: { Material, Generate,scaleImage,sketchCategory,more },
|
||||
setup() {
|
||||
let fileList: any = ref([
|
||||
]);
|
||||
let openClick: any = ref(1);
|
||||
|
||||
let store:any =useStore()
|
||||
|
||||
let sketchCatecoryList:any = computed(()=>{
|
||||
return store.state.Workspace.workspacePosition
|
||||
})
|
||||
let sketchCatecoryAllList:any = computed(()=>{
|
||||
return store.state.Workspace.workspaceAllPosition
|
||||
})
|
||||
let workspace:any = ref({})
|
||||
let sketchboardList:any = computed(()=>{
|
||||
return store.state.UploadFilesModule.sketchboard
|
||||
})
|
||||
let {t} = useI18n()
|
||||
let driver__:any = inject('driver__')
|
||||
let isTest = ref()
|
||||
let useGenerate:any = ref({
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
checked:false,
|
||||
level2Type:'',
|
||||
designType:'',
|
||||
})
|
||||
|
||||
let openMenu = ref(false)
|
||||
let sketchStyleList:any = computed(()=>{
|
||||
return store.state.UserHabit.SketchGenerateType
|
||||
})
|
||||
let scene = ref({
|
||||
name: t('SketchboardUpload.GenerateSketch'),
|
||||
value:'generate'
|
||||
})
|
||||
return {
|
||||
fileList,
|
||||
openClick,
|
||||
store,
|
||||
sketchCatecoryList,
|
||||
sketchCatecoryAllList,
|
||||
workspace,
|
||||
sketchboardList,
|
||||
t,
|
||||
driver__,
|
||||
isTest,
|
||||
useGenerate,
|
||||
scene,
|
||||
openMenu,
|
||||
sketchStyleList,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swtich_type: "upload",
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload: {
|
||||
isPin: 0,
|
||||
level1Type: "Sketchboard",
|
||||
gender:'',
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
workspaceCom:{},
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getSketchLabel(value) {
|
||||
return (value: any) => {
|
||||
let lable = "";
|
||||
for (let item of this.sketchCatecoryList) {
|
||||
if (item.value === value) {
|
||||
lable = item.label;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return lable;
|
||||
};
|
||||
},
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
|
||||
let dom:any = document.getElementsByClassName('modal_img_x')
|
||||
let mouseover = ()=>{
|
||||
// bodyDom.classList.add('active')
|
||||
}
|
||||
let mouseleave = ()=>{
|
||||
// bodyDom.classList.remove('active')
|
||||
}
|
||||
dom.forEach((item:any) => {
|
||||
item.addEventListener('mouseover',mouseover)
|
||||
item.addEventListener('mouseleave',mouseleave)
|
||||
});
|
||||
|
||||
|
||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
num = 25
|
||||
}else{
|
||||
num = -25
|
||||
}
|
||||
el.scrollBy(num, 0);
|
||||
},true)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
workspaceCom(newVal,oldVal){
|
||||
this.workspace = newVal
|
||||
this.upload.gender = newVal?.sexEnum?.value
|
||||
},
|
||||
sketchboardList:{
|
||||
handler(newVal:any,oldVal:any){
|
||||
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
|
||||
if(this.driver__.driver){
|
||||
// driverObj__.moveTo(22)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
driver__:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal.index >= 15 && newVal.index <= 16){
|
||||
if(this.driver__.driver){
|
||||
// driverObj__.moveTo(15)
|
||||
}
|
||||
}else{
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl();
|
||||
this.workspaceCom = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
let Generate:any = this.$refs.Generate
|
||||
if(this.driver__.driver){
|
||||
Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
|
||||
}else{
|
||||
Generate.searchPictureName = ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSetchboardGenerate(item:any){
|
||||
this.useGenerate.imgId = item.imgId
|
||||
this.useGenerate.imgUrl = item.imgUrl
|
||||
this.useGenerate.level2Type = item.level2Type
|
||||
this.useGenerate.designType = item.designType
|
||||
let Material:any = this.$refs.Material
|
||||
let generate:any = this.$refs.Generate
|
||||
|
||||
if(item.designType == 'collection'){
|
||||
}else {
|
||||
generate.sketchboardList.forEach((item:any) => {
|
||||
item.checked = false
|
||||
});
|
||||
}
|
||||
},
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
if (num == 2) {
|
||||
let material: any = this.$refs.Material;
|
||||
material.init("Sketchboard");
|
||||
} else if (num == 3) {
|
||||
// let Generate:any = this.$refs.Generate
|
||||
// Generate.init('generate')
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
scaleImage(index:any){
|
||||
let scaleImage:any = this.$refs.scaleImage
|
||||
scaleImage.isLike = false
|
||||
scaleImage.init(this.sketchboardList,index)
|
||||
},
|
||||
|
||||
fileUploadChange(data: any) {
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
if(res.errCode == 0){
|
||||
let category:any={
|
||||
value:'',
|
||||
name:'',
|
||||
}
|
||||
this.sketchCatecoryList.forEach((item:any) => {
|
||||
if(item.value == res.data.level2Type){
|
||||
category.value = item?.value
|
||||
category.name = item?.name
|
||||
}
|
||||
});
|
||||
file.imgUrl = res.data.url;
|
||||
file.resData = res.data;
|
||||
// file.pin = false;
|
||||
//category用来数据处理
|
||||
file.categoryValue = category?.value;
|
||||
file.category = category?.name;
|
||||
file.categoryShow = false;
|
||||
file.id_ = GO.id++
|
||||
file.id = res.data.id
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Sketchboard'
|
||||
};
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
this.store.commit("setSketchboardFile", fileList);
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
} else if (file.status === "error") {
|
||||
bor = false
|
||||
}
|
||||
if(!bor){
|
||||
let index = -1;
|
||||
let res:any = JSON.parse(file.xhr.response);
|
||||
this.fileList.forEach((ele: any, index1: any) => {
|
||||
if (file.uid === ele.uid) {
|
||||
index = index1;
|
||||
}
|
||||
});
|
||||
if (index > -1) {
|
||||
this.fileList.splice(index, 1);
|
||||
}
|
||||
// message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
|
||||
message.warning(res.errMsg);
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file: any) {
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/png" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.info(this.t('SketchboardUpload.jsContent2'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(this.t('SketchboardUpload.jsContent3'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
deleteFile(item: any) {
|
||||
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
})
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
}
|
||||
},
|
||||
likeFile(item:any,str:string){
|
||||
if(str == 'like'){
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
level1Type:"Sketchboard",
|
||||
level2Type: item.categoryValue?item.categoryValue:item.level2Type,
|
||||
gender:this.workspace.sexEnum.value,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
||||
(rv) => {
|
||||
item.like = true
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}else{
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
|
||||
(rv) => {
|
||||
item.like = false
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
recollection() {
|
||||
this.useGenerate = {
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
checked:false,
|
||||
level2Type:'',
|
||||
designType:''
|
||||
}
|
||||
let arr = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.sketchboardFiles
|
||||
)
|
||||
);
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
material:[] as any,
|
||||
moodboard:[] as any,
|
||||
}
|
||||
arr.forEach((v:any)=>{
|
||||
v.pin = v.pin == 1?true:false
|
||||
this.sketchCatecoryAllList.forEach((item:any) => {
|
||||
if(v.level2Type == item.value){
|
||||
v.category=item.name
|
||||
v.categoryValue=item.value
|
||||
}
|
||||
});
|
||||
if(v.type_.type1 == 'generate'){
|
||||
setboard.generate.push(v)
|
||||
}else if(v.type_.type1 == 'material'){
|
||||
setboard.material.push(v)
|
||||
}else{
|
||||
setboard.moodboard.push(v)
|
||||
}
|
||||
})
|
||||
this.store.commit("setSketchboardGenerateFiles", setboard.generate);
|
||||
this.store.commit("setSketchboardMaterialFiles", setboard.material);
|
||||
this.store.commit("setSketchboardFile", setboard.moodboard);
|
||||
this.fileList = setboard.moodboard
|
||||
},
|
||||
confirmSelect(event: any) {
|
||||
for (let item of event) {
|
||||
let data = {
|
||||
imgUrl: item.url,
|
||||
resData: item,
|
||||
pin: false,
|
||||
status: "done",
|
||||
category: item.level2Type || "Outwear",
|
||||
categoryShow: false,
|
||||
};
|
||||
if (this.fileList.length == 15) {
|
||||
message.warning(
|
||||
this.t('SketchboardUpload.jsContent4')
|
||||
);
|
||||
break;
|
||||
}
|
||||
this.fileList.push(data);
|
||||
}
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
},
|
||||
setSceneList(data:any){
|
||||
if(this.scene.value === data.value) return
|
||||
this.scene = data
|
||||
let generate:any = this.$refs.Generate
|
||||
generate.sketchboardList = []
|
||||
generate.searchPictureName = ''
|
||||
this.openMenu = false
|
||||
},
|
||||
openPrintModel(){
|
||||
if(this.openMenu)return
|
||||
document.addEventListener('click',this.removePrintModel)
|
||||
this.openMenu = true
|
||||
},
|
||||
removePrintModel(){
|
||||
this.openMenu = false
|
||||
document.removeEventListener('click',this.removePrintModel)
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sketchboard_upload_modal {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.modal_left,.modal_right{
|
||||
background: #f7f8fa;
|
||||
border-radius: 3rem;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
.modal_left {
|
||||
width: 71rem;
|
||||
margin-right: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 0 2rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
background: #fff;
|
||||
border-radius: calc(0.8rem*1.2);
|
||||
line-height: calc(4rem*1.2);
|
||||
font-size: var(--aida-fsize1-8);
|
||||
// margin-right: 2.2rem*1.2);
|
||||
margin-right: calc(8rem*1.2);
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.3rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: calc(.6rem*1.2);
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
// font-weight: 900;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.switch_icon {
|
||||
font-size: calc(1.8rem*1.2);
|
||||
margin-right: calc(0.8rem*1.2);
|
||||
}
|
||||
}
|
||||
.printMenu{
|
||||
margin-right: 0;
|
||||
margin-left: 2rem;
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
>div{
|
||||
width: 14rem;
|
||||
font-size: var(--aida-fsize1-6);
|
||||
border: 0;
|
||||
i{
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.forbidden{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
ul{
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
.switch_type_item:nth-child(3){
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.sketchboard_body {
|
||||
// height: calc(100% - 5rem*1.2));
|
||||
flex: 1;
|
||||
padding-top: calc(2.5rem*1.2);
|
||||
height: calc(30rem*1.2);
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.moodboard_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body {
|
||||
height: calc(100% - 3rem*1.2);
|
||||
overflow-y: auto;
|
||||
margin-bottom: calc(1rem*1.2);
|
||||
&.upload_img_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.upload_file_item{
|
||||
// margin: 0 2rem*1.2) 2rem*1.2) 0;
|
||||
display: inline-block;
|
||||
width: calc(25% - 2rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.upload_component {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
// display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.upload_max_tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(1.4rem*1.2);
|
||||
color: #030303;
|
||||
|
||||
.icon-zhuyi {
|
||||
font-size: calc(1.6rem*1.2);
|
||||
margin-right: calc(0.7rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size: var(--aida-fsize1-4);
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.modal_layout{
|
||||
padding-bottom: 4.8rem;
|
||||
.modal_img{
|
||||
width: calc(40rem*1.2);
|
||||
height: calc(5rem*1.2);
|
||||
// overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-y: hidden;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.mousewheel{
|
||||
display: flex;
|
||||
}
|
||||
.modal_img_item{
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
img{
|
||||
// width: 100%;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.modal_accomplish{
|
||||
// margin-top: 2rem*1.2);
|
||||
overflow-x: hidden;
|
||||
height: calc(30rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
}
|
||||
// overflow-x: hidden;
|
||||
&.modal_accomplish::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_text{
|
||||
padding-top: calc(2rem*1.2);
|
||||
padding-block:calc(2rem*1.2);
|
||||
}
|
||||
.input_box{
|
||||
z-index: 1;
|
||||
input{
|
||||
&.forbidden{
|
||||
cursor:not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal_img{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
position: relative;
|
||||
.modal_imgItem{
|
||||
margin: 1rem;
|
||||
margin-bottom: 5rem;
|
||||
display: inline-block;
|
||||
// width: calc(10rem*1.2);
|
||||
// height: calc(10rem*1.2);
|
||||
width: calc(33.33% - 2rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
.moreBox{
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
// opacity: 0;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&.modal_imgItem:nth-child(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
img{
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.pin_block{
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
width: 8rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 3rem;
|
||||
background: rgba(0,0,0,.7);
|
||||
color: #fff;
|
||||
>label{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
padding-right: 1rem;
|
||||
padding-left: .2rem;
|
||||
}
|
||||
i{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
background: #000;
|
||||
&.noCheck{
|
||||
background: inherit;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
span{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
border-radius: calc(1rem*1.2);
|
||||
transform: scale(0.9);
|
||||
// img {
|
||||
// }
|
||||
.operate_file_block{
|
||||
pointer-events:none
|
||||
}
|
||||
.pin_block{
|
||||
pointer-events:none
|
||||
}
|
||||
.delete_like_file_block{
|
||||
pointer-events:none
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/component/HomePage/index/editContent/collection/more.vue
Normal file
124
src/component/HomePage/index/editContent/collection/more.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="more">
|
||||
<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
|
||||
<div class="more_box" v-show="show">
|
||||
<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
|
||||
<i class="fi fi-rr-edit"></i>
|
||||
{{ $t('more.edit') }}
|
||||
</div>
|
||||
<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
|
||||
<i class="fi fi-bs-expand-arrows-alt"></i>
|
||||
{{ $t('more.enlargement') }}
|
||||
</div>
|
||||
<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
|
||||
<i class="fi fi-br-download"></i>
|
||||
{{ $t('more.down') }}
|
||||
</div>
|
||||
<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
{{ $t('more.delete') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
moreList:{type:Array,default:()=>[]},
|
||||
item:{type:Object,default:()=>{}},
|
||||
index:{type:Number,default:0},
|
||||
},
|
||||
emits:['deleteFile','scaleImage'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
show:false
|
||||
})
|
||||
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const openList = ()=>{
|
||||
data.show = true
|
||||
document.addEventListener('click',setShow)
|
||||
}
|
||||
const setShow = ()=>{
|
||||
data.show = false
|
||||
document.removeEventListener('click',setShow)
|
||||
}
|
||||
const setMore = (str:any)=>{
|
||||
if(str == 'delete'){
|
||||
emit("deleteFile",props.item);
|
||||
}else if(str == 'edit'){
|
||||
emit("scaleImage",props.index);
|
||||
}else if(str == 'down'){
|
||||
console.log(props.item);
|
||||
downloadIamge(props.item.url)
|
||||
}else if(str == 'enlargement'){
|
||||
emit("scaleImage",props.index);
|
||||
}
|
||||
setShow()
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
openList,
|
||||
setMore,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.more{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .fi{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,.7);
|
||||
color: #fff;
|
||||
border-radius: .6rem;
|
||||
}
|
||||
> .more_box{
|
||||
position: absolute;
|
||||
background: rgba(0,0,0,.7);
|
||||
right: 0;
|
||||
margin-top: .5rem;
|
||||
color: #fff;
|
||||
border-radius: .6rem;
|
||||
padding: 1rem 0;
|
||||
font-size: 1.4rem;
|
||||
// width: 12rem;
|
||||
text-align: left;
|
||||
> .item{
|
||||
display: flex;
|
||||
padding: 1rem 1.3rem;
|
||||
> i,> span{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
&:hover{
|
||||
background: rgba(0,0,0,.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
2066
src/component/HomePage/index/editContent/design/index.vue
Normal file
2066
src/component/HomePage/index/editContent/design/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
244
src/component/HomePage/index/editContent/index.vue
Normal file
244
src/component/HomePage/index/editContent/index.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<navList @setSelectKey="setSelectKey" :navListData="navListData" :selectKey="selectKey"></navList>
|
||||
<div class="contentBox">
|
||||
<div class="homeContent" ref="parent">
|
||||
<navListBox @setSelectKey=setSelectKey :navListData="navListData" :selectKey="selectKey"></navListBox>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="back" @click="setBack()">< Back</div>
|
||||
<design class="design" v-if="selectKey_ == 'design'"></design>
|
||||
<MoodboardUpload class="moodBoard" v-if="selectKey_ == 'moodBoard'"></MoodboardUpload>
|
||||
<PrintboardUpload class="printBoard" v-if="selectKey_ == 'printBoard'"></PrintboardUpload>
|
||||
<ColorboardUpload class="colorBoard" v-if="selectKey_ == 'colorBoard'"></ColorboardUpload>
|
||||
<SketchboardUpload class="sketchBoard" v-if="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import design from './design/index.vue'
|
||||
import MoodboardUpload from './collection/MoodboardUpload.vue'
|
||||
import PrintboardUpload from './collection/PrintboardUpload.vue'
|
||||
import ColorboardUpload from './collection/ColorboardUpload.vue'
|
||||
import SketchboardUpload from './collection/SketchboardUpload.vue'
|
||||
|
||||
import navList from './nav.vue'
|
||||
import navListBox from './navBox.vue'
|
||||
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,navList,navListBox
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
provide('driver__',driver__)
|
||||
|
||||
const data = reactive({
|
||||
|
||||
selectKey:'',
|
||||
selectKey_:'',
|
||||
adminData:{
|
||||
position:'',
|
||||
dom:null as any,
|
||||
parentDom:null as any,
|
||||
},
|
||||
navListData:[
|
||||
{
|
||||
icon:'',
|
||||
value:'design',
|
||||
name:'1',
|
||||
task:'1-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'moodBoard',
|
||||
name:'2',
|
||||
task:'1-2',
|
||||
},{
|
||||
icon:'',
|
||||
value:'printBoard',
|
||||
name:'3',
|
||||
task:'1-3',
|
||||
},{
|
||||
icon:'',
|
||||
value:'colorBoard',
|
||||
name:'3',
|
||||
task:'1-4',
|
||||
},{
|
||||
icon:'',
|
||||
value:'sketchBoard',
|
||||
name:'3',
|
||||
task:'1-5',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color3',
|
||||
name:'3',
|
||||
task:'2-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color4',
|
||||
name:'3',
|
||||
task:'3-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color5',
|
||||
name:'3',
|
||||
task:'4-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color6',
|
||||
name:'3',
|
||||
task:'4-2',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color7',
|
||||
name:'3',
|
||||
task:'5-1',
|
||||
},
|
||||
],
|
||||
})
|
||||
const dataTime = reactive({
|
||||
selectTime:null as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
parent:null as any
|
||||
})
|
||||
const setBack = ()=>{
|
||||
data.selectKey = ''
|
||||
updataPage()
|
||||
}
|
||||
const setSelectKey = (value:any)=>{
|
||||
let {str,dom,position} = value
|
||||
data.adminData.dom = dom
|
||||
data.adminData.parentDom = value?.parentDom
|
||||
data.adminData.position = position
|
||||
data.selectKey = str
|
||||
updataPage()
|
||||
}
|
||||
const updataPage = ()=>{
|
||||
let {dom,position} = data.adminData
|
||||
let contentDom:any = document.querySelectorAll('.home .content')[0]
|
||||
clearTimeout(dataTime.selectTime)
|
||||
let {top,left,width,height} = dom.getBoundingClientRect()
|
||||
let parentPosition = dataDom.parent.getBoundingClientRect()
|
||||
let parentTop = parentPosition?.top
|
||||
let parentLeft = parentPosition?.left
|
||||
if(data.selectKey_ && data.selectKey == ''){
|
||||
// let index = data.navListData.findIndex((item:any) => item.value === data.selectKey_);
|
||||
let y = top - parentTop + height / 2
|
||||
let x = left - parentLeft + width / 2
|
||||
if(position == 'nav'){
|
||||
x = 0
|
||||
y = dom.offsetTop + dom.offsetHeight / 2
|
||||
}
|
||||
contentDom.style.transformOrigin = `${x}px ${y}px`
|
||||
gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
|
||||
dataTime.selectTime = setTimeout(() => {
|
||||
data.selectKey_ = data.selectKey
|
||||
}, 500);
|
||||
}else{
|
||||
data.selectKey_ = data.selectKey
|
||||
nextTick(()=>{
|
||||
// let index = data.navListData.findIndex((item:any) => item.value === str);
|
||||
let y = top - parentTop + height / 2
|
||||
let x = left - parentLeft + width / 2
|
||||
if(position == 'nav'){
|
||||
x = 0
|
||||
y = dom.offsetTop + dom.offsetHeight / 2
|
||||
}
|
||||
contentDom.style.transformOrigin = `${x}px ${y}px`
|
||||
gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
|
||||
})
|
||||
}
|
||||
}
|
||||
// watch(()=>data.selectKey,(newVal:any,oldVal:any)=>{
|
||||
// let navDom:any = document.querySelectorAll('.home .navList')
|
||||
// let contentDom:any = document.querySelectorAll('.home .content')[0]
|
||||
// clearTimeout(dataTime.selectTime)
|
||||
// if(oldVal && newVal == ''){
|
||||
// dataTime.selectTime
|
||||
// let index = data.navListData.findIndex(item => item.value === oldVal);
|
||||
// let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
|
||||
// contentDom.style.transformOrigin = `0px ${top}px`
|
||||
// gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
|
||||
// dataTime.selectTime = setTimeout(() => {
|
||||
// data.selectKey_ = newVal
|
||||
// }, 500);
|
||||
// }else{
|
||||
// data.selectKey_ = newVal
|
||||
// nextTick(()=>{
|
||||
// let index = data.navListData.findIndex(item => item.value === newVal);
|
||||
// let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
|
||||
// contentDom.style.transformOrigin = `0px ${top}px`
|
||||
// gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setBack,
|
||||
setSelectKey,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.home{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
src/component/HomePage/index/editContent/nav.vue
Normal file
72
src/component/HomePage/index/editContent/nav.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="homeNav">
|
||||
<div class="navList" :class="{active:selectKey == item.value}" v-for="item in navListData" :key="item.value" @click="setNav(item.value, $event)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
selectKey:{type:String,default:''},
|
||||
navListData:{type:Array,default:()=>[]},
|
||||
},
|
||||
emits:['setSelectKey'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
|
||||
})
|
||||
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const setNav = (str:any,event:any)=>{
|
||||
let data = {
|
||||
str:str == props.selectKey?'':str,
|
||||
dom:event.target,
|
||||
posiiton:'nav',
|
||||
}
|
||||
|
||||
emit("setSelectKey", data);
|
||||
// emit("update:selectKey", str);
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setNav,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.homeNav{
|
||||
padding: 5rem 0;
|
||||
background: #f7f8fa;
|
||||
> div{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #ebebeb;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
170
src/component/HomePage/index/editContent/navBox.vue
Normal file
170
src/component/HomePage/index/editContent/navBox.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="homeNavBox">
|
||||
<div class="navList">
|
||||
<img src="@/assets/images/homePage/homeNavBg.png" alt="">
|
||||
<div class="navListItem" :class="[selectKey == item.value?'active':'',`item${item.task}`]" v-for="item in navListData" :key="item.value" @dblclick.stop="setNav(item.value,$event)" @click.stop="setSelect(item.value)">
|
||||
<div class="background"></div>
|
||||
<div class="text">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
selectKey:{type:String,default:''},
|
||||
navListData:{type:Array,default:()=>[]},
|
||||
},
|
||||
emits:['setSelectKey'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
|
||||
})
|
||||
const dataTime = reactive({
|
||||
clickTime:null as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
navList:null as any
|
||||
})
|
||||
const setNav = (str:any,event:any)=>{
|
||||
clearTimeout(dataTime.clickTime)
|
||||
let data = {
|
||||
str:str == props.selectKey?'':str,
|
||||
dom:event.target,
|
||||
posiiton:'navBox'
|
||||
}
|
||||
emit("setSelectKey", data);
|
||||
// emit("update:selectKey", str);
|
||||
}
|
||||
const setSelect = ()=>{
|
||||
clearTimeout(dataTime.clickTime)
|
||||
dataTime.clickTime = setTimeout(()=>{//防止双击和单机都执行的问题
|
||||
console.log(123123);
|
||||
},200)
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setNav,
|
||||
setSelect,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.homeNavBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .navList{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
> img{
|
||||
width: 98rem;
|
||||
}
|
||||
> .navListItem{
|
||||
width: 22rem;
|
||||
height: 10rem;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #000;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all .2s;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&.item1-1{
|
||||
top: -5rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.item1-2{
|
||||
top: 9rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.item1-3{
|
||||
top: 23rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.item1-4{
|
||||
top: 37rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.item1-5{
|
||||
top: 51rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.item2-1{
|
||||
top: 23rem;
|
||||
left: 8rem;
|
||||
}
|
||||
&.item3-1{
|
||||
top: 23rem;
|
||||
left: 38rem;
|
||||
}
|
||||
&.item4-1{
|
||||
top: 12rem;
|
||||
left: 68rem;
|
||||
}
|
||||
&.item4-2{
|
||||
top: 34rem;
|
||||
left: 68rem;
|
||||
}
|
||||
&.item5-1{
|
||||
top: 23rem;
|
||||
left: 98rem;
|
||||
}
|
||||
.background{
|
||||
background: #d6eb77;
|
||||
transition: all .3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.text{
|
||||
position: relative;
|
||||
}
|
||||
&.active{
|
||||
border: 3px solid #000;
|
||||
.background{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 3px solid #000;
|
||||
.background{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
57
src/component/HomePage/index/index.vue
Normal file
57
src/component/HomePage/index/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="start">
|
||||
<div class="createProject" v-if="false">
|
||||
|
||||
</div>
|
||||
<editContent v-else></editContent>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import editContent from './editContent/index.vue'
|
||||
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
editContent
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
|
||||
|
||||
})
|
||||
const dataTime = reactive({
|
||||
selectTime:null as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
})
|
||||
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.start{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -457,7 +457,8 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
download(){
|
||||
downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
|
||||
let url = this.scaleImageList[this.scaleImageIndex].imgUrl || this.scaleImageList[this.scaleImageIndex]?.url
|
||||
downloadIamge(url)
|
||||
},
|
||||
setScaleImageIndex(index:any){
|
||||
// this.scaleImageIndex = index
|
||||
|
||||
@@ -312,6 +312,12 @@ export default {
|
||||
jsContent2:'图片必须小于5MB',
|
||||
jsContent3:'上传失败',
|
||||
},
|
||||
more:{
|
||||
delete:'删除',
|
||||
down:'下载',
|
||||
edit:'修改',
|
||||
enlargement:'放大',
|
||||
},
|
||||
SketchboardUpload:{
|
||||
Upload:'上传',
|
||||
Library:'收藏',
|
||||
|
||||
@@ -312,6 +312,12 @@ export default {
|
||||
jsContent2:'Image must smaller than 5MB!',
|
||||
jsContent3:'upload failed',
|
||||
},
|
||||
more:{
|
||||
delete:'Delete',
|
||||
down:'Download',
|
||||
edit:'Modify',
|
||||
enlargement:'Enlargement',
|
||||
},
|
||||
SketchboardUpload:{
|
||||
Upload:'Upload',
|
||||
Library:'Library',
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user