aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-10-20

Browse Source
This commit is contained in:
X1627315083
2023-10-20 17:21:45 +08:00
parent 12ef707f64
commit bd9dabd21d
29 changed files with 1401 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/iconfont2/iconfont.css Normal file
View File

@@ -0,0 +1,17 @@
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1697613542954') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 1.6rem;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-a-waitao_changkuanwaitao11x:before {
content: "\e66c";
}

BIN
src/assets/iconfont2/iconfont.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/images/homePage/111111.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

154
src/assets/style/style.css
View File

@@ -5,6 +5,7 @@ body,
padding: 0; padding: 0;
height: 100%; height: 100%;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
overflow: hidden;
} }
input { input {
outline: none; outline: none;
@@ -97,7 +98,7 @@ li {
padding: 0.5rem 2rem; padding: 0.5rem 2rem;
display: inline-block; display: inline-block;
border-radius: 2rem; border-radius: 2rem;
font-size: 12px; font-size: 1.2rem;
color: #fff; color: #fff;
background-color: #39215b; background-color: #39215b;
cursor: pointer; cursor: pointer;
@@ -209,12 +210,14 @@ li {
} }
.collection_modal .ant-modal-body, .collection_modal .ant-modal-body,
.design_detail_modal_component .ant-modal-body, .design_detail_modal_component .ant-modal-body,
.designOpenrtion_modal .ant-modal-body { .designOpenrtion_modal .ant-modal-body,
.library_page .ant-modal-body {
overflow-y: hidden; overflow-y: hidden;
} }
.collection_modal .design_title_text, .collection_modal .design_title_text,
.design_detail_modal_component .design_title_text, .design_detail_modal_component .design_title_text,
.designOpenrtion_modal .design_title_text { .designOpenrtion_modal .design_title_text,
.library_page .design_title_text {
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 900; font-weight: 900;
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
@@ -223,41 +226,47 @@ li {
} }
.collection_modal .design_title_text .design_title_text_intro, .collection_modal .design_title_text .design_title_text_intro,
.design_detail_modal_component .design_title_text .design_title_text_intro, .design_detail_modal_component .design_title_text .design_title_text_intro,
.designOpenrtion_modal .design_title_text .design_title_text_intro { .designOpenrtion_modal .design_title_text .design_title_text_intro,
.library_page .design_title_text .design_title_text_intro {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 400; font-weight: 400;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
} }
.collection_modal .ant-upload.ant-upload-select-picture-card, .collection_modal .ant-upload.ant-upload-select-picture-card,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card, .design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card { .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card,
.library_page .ant-upload.ant-upload-select-picture-card {
background: #FFFFFF; background: #FFFFFF;
width: 6rem; width: 6rem;
height: 6rem; height: 6rem;
border: 0.3rem solid #ededed; border: 0.3rem solid #ededed;
border-radius: 10px; border-radius: 1rem;
margin: 0; margin: 0;
} }
.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, .collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, .design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao { .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
font-size: 3.2rem; font-size: 3.2rem;
color: #B7B7B7; color: #B7B7B7;
} }
.collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text, .collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text, .design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text { .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text {
font-size: 1.6rem; font-size: 1.6rem;
color: #B7B7B7; color: #B7B7B7;
} }
.collection_modal .ant-upload-list-picture-card-container, .collection_modal .ant-upload-list-picture-card-container,
.design_detail_modal_component .ant-upload-list-picture-card-container, .design_detail_modal_component .ant-upload-list-picture-card-container,
.designOpenrtion_modal .ant-upload-list-picture-card-container { .designOpenrtion_modal .ant-upload-list-picture-card-container,
.library_page .ant-upload-list-picture-card-container {
display: none !important; display: none !important;
} }
.collection_modal .ant-upload-picture-card-wrapper, .collection_modal .ant-upload-picture-card-wrapper,
.design_detail_modal_component .ant-upload-picture-card-wrapper, .design_detail_modal_component .ant-upload-picture-card-wrapper,
.designOpenrtion_modal .ant-upload-picture-card-wrapper { .designOpenrtion_modal .ant-upload-picture-card-wrapper,
.library_page .ant-upload-picture-card-wrapper {
width: auto; width: auto;
vertical-align: top; vertical-align: top;
} }
@@ -305,11 +314,18 @@ li {
transform: translateX(-50%); transform: translateX(-50%);
padding: 0.5rem 2rem; padding: 0.5rem 2rem;
border-radius: 2rem; border-radius: 2rem;
font-size: 12px; font-size: 1.2rem;
display: inline-block; display: inline-block;
} }
.ant-upload {
font-size: 1.4rem;
}
i {
font-size: 1.4rem;
}
.collection_modal_body .input_box, .collection_modal_body .input_box,
.design_detail_modal_component .input_box { .design_detail_modal_component .input_box,
.library_page .input_box {
display: flex; display: flex;
align-items: center; align-items: center;
position: sticky; position: sticky;
@@ -320,8 +336,8 @@ li {
z-index: 2; z-index: 2;
} }
.collection_modal_body .input_box input, .collection_modal_body .input_box input,
.design_detail_modal_component .input_box input { .design_detail_modal_component .input_box input,
font-size: 12px; .library_page .input_box input {
border-radius: 0.5rem; border-radius: 0.5rem;
width: 70%; width: 70%;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
@@ -331,28 +347,56 @@ li {
font-weight: 400; font-weight: 400;
} }
.collection_modal_body .input_box inputinput:-moz-placeholder, .collection_modal_body .input_box inputinput:-moz-placeholder,
.design_detail_modal_component .input_box inputinput:-moz-placeholder { .design_detail_modal_component .input_box inputinput:-moz-placeholder,
.library_page .input_box inputinput:-moz-placeholder {
color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.15);
} }
.collection_modal_body .input_box inputinput:-ms-input-placeholder, .collection_modal_body .input_box inputinput:-ms-input-placeholder,
.design_detail_modal_component .input_box inputinput:-ms-input-placeholder { .design_detail_modal_component .input_box inputinput:-ms-input-placeholder,
.library_page .input_box inputinput:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.15);
} }
.collection_modal_body .input_box inputinput::-webkit-input-placeholder, .collection_modal_body .input_box inputinput::-webkit-input-placeholder,
.design_detail_modal_component .input_box inputinput::-webkit-input-placeholder { .design_detail_modal_component .input_box inputinput::-webkit-input-placeholder,
.library_page .input_box inputinput::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.15);
} }
.collection_modal_body .input_box span,
.design_detail_modal_component .input_box span,
.library_page .input_box span {
position: absolute;
bottom: 0rem;
font-size: 1.2rem;
color: red;
opacity: 0;
transform: scale(0.7);
transform-origin: left bottom;
}
.collection_modal_body .input_box.active input,
.design_detail_modal_component .input_box.active input,
.library_page .input_box.active input {
border: 1px solid #ff0001;
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
}
.collection_modal_body .input_box.active span,
.design_detail_modal_component .input_box.active span,
.library_page .input_box.active span {
opacity: 1;
}
.collection_modal_body .input_box .generage_btn, .collection_modal_body .input_box .generage_btn,
.design_detail_modal_component .input_box .generage_btn { .design_detail_modal_component .input_box .generage_btn,
.library_page .input_box .generage_btn {
margin: 0 auto; margin: 0 auto;
} }
.collection_modal_body .upload_item, .collection_modal_body .upload_item,
.design_detail_modal_component .upload_item { .design_detail_modal_component .upload_item,
.library_page .upload_item {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.collection_modal_body .upload_item .upload_file_item, .collection_modal_body .upload_item .upload_file_item,
.design_detail_modal_component .upload_item .upload_file_item { .design_detail_modal_component .upload_item .upload_file_item,
.library_page .upload_item .upload_file_item {
margin: 0 2rem 2rem 0; margin: 0 2rem 2rem 0;
display: inline-block; display: inline-block;
width: 10rem; width: 10rem;
@@ -360,31 +404,53 @@ li {
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
cursor: pointer;
}
.collection_modal_body .upload_item .upload_file_item.active,
.design_detail_modal_component .upload_item .upload_file_item.active,
.library_page .upload_item .upload_file_item.active {
opacity: 0.5;
border-radius: 1rem;
transform: scale(0.9);
}
.collection_modal_body .upload_item .upload_file_item.active .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item.active .delete_file_block,
.library_page .upload_item .upload_file_item.active .delete_file_block {
pointer-events: none;
}
.collection_modal_body .upload_item .upload_file_item.active .operate_file_block,
.design_detail_modal_component .upload_item .upload_file_item.active .operate_file_block,
.library_page .upload_item .upload_file_item.active .operate_file_block {
pointer-events: none;
} }
.collection_modal_body .upload_item .upload_file_item.upload_component, .collection_modal_body .upload_item .upload_file_item.upload_component,
.design_detail_modal_component .upload_item .upload_file_item.upload_component { .design_detail_modal_component .upload_item .upload_file_item.upload_component,
.library_page .upload_item .upload_file_item.upload_component {
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper), .collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) { .design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
.library_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card), .collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) { .design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
width: 6rem; width: 6rem;
height: 6rem; height: 6rem;
border: 0.3rem solid #ededed; border: 0.3rem solid #ededed;
border-radius: 10px; border-radius: 1rem;
margin: 0; margin: 0;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content, .collection_modal_body .upload_item .upload_file_item .upload_file_item_content,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content { .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content,
.library_page .upload_item .upload_file_item .upload_file_item_content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -393,17 +459,22 @@ li {
position: relative; position: relative;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block, .collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block { .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
display: block; display: block;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img, .collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .upload_img { .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .upload_img,
.library_page .upload_item .upload_file_item .upload_file_item_content .upload_img {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: auto;
max-width: 100%;
object-fit: cover;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block, .collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block { .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
display: none; display: none;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
@@ -417,12 +488,33 @@ li {
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
width: 3.2rem;
height: 3.2rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 0.4rem;
position: absolute;
top: 0.9rem;
right: 0.9rem;
text-align: center;
line-height: 3.2rem;
left: auto;
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
font-size: 1.6rem;
color: #fff;
}
.collection_modal_body .upload_item .upload_file_item .upload_img_icon, .collection_modal_body .upload_item .upload_file_item .upload_img_icon,
.design_detail_modal_component .upload_item .upload_file_item .upload_img_icon { .design_detail_modal_component .upload_item .upload_file_item .upload_img_icon,
.library_page .upload_item .upload_file_item .upload_img_icon {
width: 4.6rem; width: 4.6rem;
} }
.cut_pricture_modal .ant-modal-content { .cut_pricture_modal .ant-modal-content {
border-radius: 10px; border-radius: 1rem;
} }
.cut_pricture_modal .ant-modal-body { .cut_pricture_modal .ant-modal-body {
height: 65rem; height: 65rem;

78
src/assets/style/style.less
View File

@@ -4,6 +4,7 @@ html,body,#app{
padding: 0; padding: 0;
height: 100%; height: 100%;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
overflow: hidden;
// --antd-wave-shadow-color: #341e57; // --antd-wave-shadow-color: #341e57;
} }
input{ input{
@@ -107,7 +108,7 @@ ul,li{
padding: .5rem 2rem; padding: .5rem 2rem;
display: inline-block; display: inline-block;
border-radius: 2rem; border-radius: 2rem;
font-size: 12px; font-size: 1.2rem;
color: #fff; color: #fff;
background-color: #39215b; background-color: #39215b;
cursor: pointer; cursor: pointer;
@@ -254,7 +255,7 @@ ul,li{
margin-top:.5rem; margin-top:.5rem;
} }
//collection 弹窗 //collection 弹窗
.collection_modal,.design_detail_modal_component,.designOpenrtion_modal{ .collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{
.ant-modal-body{ .ant-modal-body{
overflow-y: hidden; overflow-y: hidden;
@@ -276,7 +277,7 @@ ul,li{
width: 6rem; width: 6rem;
height: 6rem; height: 6rem;
border: 0.3rem solid #ededed; border: 0.3rem solid #ededed;
border-radius: 10px; border-radius: 1rem;
margin: 0; margin: 0;
.upload_tip_block{ .upload_tip_block{
.icon-jiahao{ .icon-jiahao{
@@ -340,13 +341,19 @@ ul,li{
transform: translateX(-50%); transform: translateX(-50%);
padding: .5rem 2rem; padding: .5rem 2rem;
border-radius: 2rem; border-radius: 2rem;
font-size: 12px; font-size: 1.2rem;
display: inline-block; display: inline-block;
} }
} }
.ant-upload{
font-size: 1.4rem;
}
i{
font-size: 1.4rem;
}
//设计input和上传按钮样式 //设计input和上传按钮样式
.collection_modal_body,.design_detail_modal_component{ .collection_modal_body,.design_detail_modal_component,.library_page{
.input_box{ .input_box{
display: flex; display: flex;
align-items: center; align-items: center;
@@ -357,7 +364,7 @@ ul,li{
padding-bottom: 2rem; padding-bottom: 2rem;
z-index: 2; z-index: 2;
input{ input{
font-size: 12px; font-size: 1.2rem;
border-radius: .5rem; border-radius: .5rem;
width: 70%; width: 70%;
border: 1px solid rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15);
@@ -377,6 +384,25 @@ ul,li{
color: rgba(0,0,0,.15); color: rgba(0,0,0,.15);
} }
} }
span{
position: absolute;
bottom: 0rem;
font-size: 1.2rem;
color: red;
opacity: 0;
transform: scale(.7);
transform-origin: left bottom;
}
&.active{
input{
// color: rgb(255, 0, .7);
border: 1px solid rgb(255, 0, .7);
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
}
span{
opacity: 1;
}
}
.generage_btn{ .generage_btn{
margin: 0 auto; margin: 0 auto;
} }
@@ -396,6 +422,22 @@ ul,li{
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
cursor: pointer;
&.active {
opacity: 0.5;
// border: 2px solid;
border-radius: 1rem;
transform: scale(0.9);
.delete_file_block{
pointer-events:none;
}
.operate_file_block{
pointer-events:none;
}
img {
}
}
&.upload_component { &.upload_component {
border: none; border: none;
display: flex; display: flex;
@@ -412,7 +454,7 @@ ul,li{
width: 6rem; width: 6rem;
height: 6rem; height: 6rem;
border: 0.3rem solid #ededed; border: 0.3rem solid #ededed;
border-radius: 10px; border-radius: 1rem;
margin: 0; margin: 0;
} }
.upload_file_item_content { .upload_file_item_content {
@@ -430,7 +472,9 @@ ul,li{
.upload_img { .upload_img {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: auto;
max-width: 100%;
object-fit: cover;
} }
.delete_file_block { .delete_file_block {
@@ -446,6 +490,22 @@ ul,li{
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
&.rightTop {
width: 3.2rem;
height: 3.2rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 0.4rem;
position: absolute;
top: 0.9rem;
right: 0.9rem;
text-align: center;
line-height: 3.2rem;
left: auto;
.icon-shanchu {
font-size: 1.6rem;
color: #fff;
}
}
} }
} }
@@ -459,7 +519,7 @@ ul,li{
//剪裁弹窗 //剪裁弹窗
.cut_pricture_modal{ .cut_pricture_modal{
.ant-modal-content{ .ant-modal-content{
border-radius: 10px; border-radius: 1rem;
} }
.ant-modal-body{ .ant-modal-body{
height: 65rem; height: 65rem;

50
src/component/Detail/DesignDetail.vue
View File

@@ -19,10 +19,7 @@
<div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div> <div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
<div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div> <div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
<!-- <div class="design_centent"> <!-- <div class="design_centent">
</div> --> </div> -->
<div class="design_detail_modal_body" v-show="designShowPrview == 1"> <div class="design_detail_modal_body" v-show="designShowPrview == 1">
<div class="detail_modal_body_img"> <div class="detail_modal_body_img">
@@ -45,6 +42,8 @@
<!-- <div v-else class="detial_img detial_img1" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)"> <!-- <div v-else class="detial_img detial_img1" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
<img :src="item.imageUrl" alt=""> <img :src="item.imageUrl" alt="">
</div> --> </div> -->
<!-- <img v-show="!imgDesignImg" class="detial_img" src="../../assets/images/homePage/111111.png"> -->
<img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl"> <img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<div class="detail_btn"> <div class="detail_btn">
<!-- 全屏 --> <!-- 全屏 -->
@@ -82,7 +81,7 @@
<div class="clothes_detail_item clothes_detail_item_color"> <div class="clothes_detail_item clothes_detail_item_color">
<div class="clothes_item_header"> <div class="clothes_item_header">
<i class="fi fi-rs-comments"></i> <i class="fi fi-rs-comments"></i>
<div>Current Print</div> <div>Current Color</div>
<i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i> <i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i>
</div> </div>
<div class="img_block_item centent" @click.stop="openCurrent(3)"> <div class="img_block_item centent" @click.stop="openCurrent(3)">
@@ -103,7 +102,8 @@
</div> </div>
<div class="design_detail_perview" v-show="designShowPrview == 2"> <div class="design_detail_perview" v-show="designShowPrview == 2">
<div class="design_detail_perview_content" > <div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl"> <magnifyingGlass ref="magnifyingGlass" :designItemDetailUrl='designItemDetailUrl'></magnifyingGlass>
<!-- <img class="perview_img" v-lazy="designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl"> -->
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> --> <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
</div> </div>
</div> </div>
@@ -127,6 +127,7 @@
import { defineComponent,computed,ref,provide } from 'vue' import { defineComponent,computed,ref,provide } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue' import ElementReplace from '@/component/Detail/ElementReplace.vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue' import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue' import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue' import setDesignItem from '@/component/Detail/setDesignItem.vue'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
@@ -142,6 +143,7 @@ export default defineComponent({
Draggable, Draggable,
DesignDetailAlter, DesignDetailAlter,
setDesignItem, setDesignItem,
magnifyingGlass,
}, },
setup() { setup() {
const store = useStore(); const store = useStore();
@@ -171,6 +173,7 @@ export default defineComponent({
let designOutfitId = ref() let designOutfitId = ref()
let userInfo:any = {} let userInfo:any = {}
let ifSubmit = ref(false) let ifSubmit = ref(false)
let designItemDetailUrl = ref({})
return{ return{
designItemDetail, designItemDetail,
store, store,
@@ -183,7 +186,8 @@ export default defineComponent({
designItemId, designItemId,
designOutfitId, designOutfitId,
userInfo, userInfo,
ifSubmit ifSubmit,
designItemDetailUrl
} }
}, },
data(){ data(){
@@ -198,18 +202,19 @@ export default defineComponent({
}, },
watch:{ watch:{
designItemDetail:{ designItemDetail:{
handler: function(newVal,oldVal) { handler: async function(newVal,oldVal) {
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail)) let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
this.ifSubmit = designItemDetail.ifSubmit?designItemDetail.ifSubmit:false this.ifSubmit = designItemDetail.ifSubmit?designItemDetail.ifSubmit:false
this.current = JSON.parse(JSON.stringify(designItemDetail?.clothes?.[this.currentIndex])) this.current = JSON?.parse(JSON?.stringify(designItemDetail?.clothes?.[this?.currentIndex]))
if(designItemDetail.others[0].layersObject.length != 0){ if(designItemDetail.others[0].layersObject.length != 0){
this.body = false this.body = false
}else{ }else{
this.body = true this.body = true
} }
this.setImgSize() await this.setImgSize()
this.designItemDetailUrl = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
console.log(this.designItemDetailUrl);
} }
}, },
currentIndex:{ currentIndex:{
@@ -266,9 +271,11 @@ export default defineComponent({
this.designOrder = false this.designOrder = false
let DesignDetailAlter:any = this.$refs.DesignDetailAlter let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate() DesignDetailAlter.terminate()
this.designItemDetail = {}
this.frontBack = {}
}else{ }else{
this.designShowPrview = 1 this.designShowPrview = 1;
this.designItemDetailUrl = {}
} }
}, },
@@ -619,7 +626,7 @@ export default defineComponent({
.ant-modal-content{ .ant-modal-content{
border-radius: 10px; border-radius: 1rem;
// overflow: hidden; // overflow: hidden;
.ant-modal-header{ .ant-modal-header{
background-color: #fff; background-color: #fff;
@@ -699,7 +706,7 @@ export default defineComponent({
.detail_modal_body{ .detail_modal_body{
position: relative; position: relative;
// max-width: 245px; // max-width: 245px;
// width: 100%; width: 100%;
height: 100%; height: 100%;
.detail_modal_body_nav{ .detail_modal_body_nav{
display: flex; display: flex;
@@ -745,7 +752,9 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
img{ img{
width: 100%; // width: 100%;
max-height: 100%;
width: auto;
} }
&.active{ &.active{
top: 50%; top: 50%;
@@ -788,7 +797,7 @@ export default defineComponent({
} }
&.fi-rr-edit{ &.fi-rr-edit{
left: 0; left: 0;
top: 20px; top: 3rem;
} }
&.fi-rr-copy{ &.fi-rr-copy{
top: 0; top: 0;
@@ -804,11 +813,14 @@ export default defineComponent({
position: relative; position: relative;
.detail_modal_right_top{ .detail_modal_right_top{
width: 100%; width: 100%;
height: calc(100% - 3.9rem); height: 100%;
background: #fff; background: #fff;
overflow-y: auto; overflow-y: auto;
display: flex;
flex-direction: column;
.clothes_detail_item{ .clothes_detail_item{
// margin-bottom: 5rem;
flex: 1;
.centent_div{ .centent_div{
display: flex; display: flex;
cursor: pointer; cursor: pointer;

116
src/component/Detail/DesignDetailAlter.vue
View File

@@ -398,7 +398,6 @@ export default defineComponent({
function callback(entries, observer) { function callback(entries, observer) {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
console.log(11);
this_.getLibraryList() this_.getLibraryList()
} else { } else {
} }
@@ -494,12 +493,11 @@ export default defineComponent({
rgba:{ rgba:{
r:Number(arr.r), r:Number(arr.r),
g:Number(arr.g), g:Number(arr.g),
b:Number(arr.g), b:Number(arr.b),
a:Number(arr.a?arr.a:1), a:Number(arr.a?arr.a:1),
}, },
hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1]) hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
} }
this.uploadList = [] this.uploadList = []
if (num == 1) { if (num == 1) {
this.selectCode = 'Sketchboard' this.selectCode = 'Sketchboard'
@@ -589,21 +587,20 @@ export default defineComponent({
this.select = false this.select = false
DesignDetailEnd.selectIndex = 0 DesignDetailEnd.selectIndex = 0
DesignDetailEnd.type_ = 0 DesignDetailEnd.type_ = 0
this.colorFileList = []
this.selectColorList = []
}, },
//切换整体衣服 //切换整体衣服
changePlace(){ changePlace(){
this.uploadList = [] this.uploadList = []
let DesignDetailEnd = this.$refs.DesignDetailEnd let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.type_ = 0
this.uploadList = [] this.uploadList = []
this.apparelList = [] this.apparelList = []
this.printList = [] this.printList = []
this.select = false
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}] DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
DesignDetailEnd.selectIndex = 0
DesignDetailEnd.sketchImg={} DesignDetailEnd.sketchImg={}
this.terminate()
}, },
// this.getLibraryList('Moodboard') // this.getLibraryList('Moodboard')
// this.getLibraryList('Printboard') // this.getLibraryList('Printboard')
@@ -849,51 +846,60 @@ export default defineComponent({
this.colorFileList.push(file) this.colorFileList.push(file)
setTimeout(async ()=>{ setTimeout(async ()=>{
const colorThief = new ColorThief(); const img = new Image();
let colorImage = this.$refs.colorImage let colorImage = this.$refs.colorImage
let domImg = colorImage[0]; img.src = colorImage[0].src;
let color = colorThief.getColor(domImg)
let colorHex = this.rgbaToHex(color) img.onload = async () => {
let selectColorList = []; const colorThief = new ColorThief();
let selectColor = colorThief.getPalette(domImg,9) // let domImg = colorImage[0];
//排序 // let color = colorThief.getColor(img)
let obj = { // let colorHex = this.rgbaToHex(color)
max : 30, let selectColorList = [];
min: 30, let selectColor = colorThief.getPalette(img,8)
} //排序
let colorSort let obj = {
await GO.setColor(selectColor,file.imgUrl,obj).then( max : 5,
(rv) => { min: 5,
if(rv){
colorSort = rv.ratio
}
} }
) let colorSort
colorSort.sort((a, b) => { await GO.setColor(selectColor,file.imgUrl,obj).then(
var a_num = a.ratio; (rv) => {
var b_num = b.ratio; if(rv){
return b_num - a_num; colorSort = rv.ratio
}); }
selectColor = [] }
colorSort.forEach(v=>{
selectColor.push(v.rgb)
})
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
})
colorLi.forEach(element => {
let colorLiHex = this.rgbaToHex(element)
selectColorList.push(
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
) )
}); colorSort.sort((a, b) => {
this.selectColorList = selectColorList var a_num = a.ratio;
this.getHsvColor(selectColorList) var b_num = b.ratio;
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex} return b_num - a_num;
});
selectColor = []
colorSort.forEach(v=>{
selectColor.push(v.rgb)
})
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
let color = selectColor[0].split(',')
let colorHex = this.rgbaToHex(color)
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
})
colorLi.forEach(element => {
let colorLiHex = this.rgbaToHex(element)
selectColorList.push(
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
)
});
this.selectColorList = selectColorList
// this.getHsvColor(selectColorList)
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
};
},100) },100)
}; };
// 转化为base64S // 转化为base64S
@@ -1081,18 +1087,20 @@ export default defineComponent({
max-height: 100%; max-height: 100%;
} }
.operate_file_block{ .operate_file_block{
height: 2.5rem; height: 1.5rem;
.select_img_type{ .select_img_type{
line-height: 1;
.select_category{ .select_category{
zoom: .8; zoom: .6;
height: 100%;
.icon-xiala{ .icon-xiala{
zoom: .8; zoom: .8;
} }
} }
.category_list{ .category_list{
margin-top: -.4rem; margin-top: .1rem;
.category_item{ .category_item{
zoom: .8; zoom: .7;
} }
} }
} }

20
src/component/Detail/DesignDetailEnd.vue
View File

@@ -45,14 +45,14 @@
Single Single
</div> </div>
</div> </div>
<div v-show="!overallSingle" class="habit_System_Designer"> <!-- <div v-show="!overallSingle" class="habit_System_Designer">
<a-slider id="system_silder" <a-slider id="system_silder"
v-model:value="systemDesignerPercentage" v-model:value="systemDesignerPercentage"
@afterChange="systemDesigner" @afterChange="systemDesigner"
:tip-formatter="formatter" :tip-formatter="formatter"
> >
</a-slider> </a-slider>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
@@ -332,6 +332,15 @@ export default defineComponent({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 14rem; height: 14rem;
>div{
display: flex;
flex-direction: column;
.print_left,.print_right{
display: flex;
flex: 1;
align-items: center;
}
}
.print_left{ .print_left{
position: relative; position: relative;
img{ img{
@@ -362,6 +371,7 @@ export default defineComponent({
} }
} }
.print_right{ .print_right{
.habit_Overal_Single { .habit_Overal_Single {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -424,6 +434,12 @@ export default defineComponent({
border: 0.1rem solid #DCDCEC; border: 0.1rem solid #DCDCEC;
height: 8.5rem; height: 8.5rem;
width: 7rem; width: 7rem;
overflow: hidden;
@media screen and (max-width: 1440px) {
&.modal_img_item {
line-height: 1.2;
}
}
box-sizing: border-box; box-sizing: border-box;
.color_content{ .color_content{
width: 100%; width: 100%;

53
src/component/Detail/DesignPrintOperation.vue
View File

@@ -195,23 +195,27 @@ export default defineComponent({
var info = el.getBoundingClientRect(); var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2; let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2; let eY = info.y + info.height / 2;
document.addEventListener('mousemove', (e) => { let mousemove = (e) => {
if (mouse) { if (mouse) {
let X = eX let X = eX
let Y = eY let Y = eY
let x = e.clientX - X let x = e.clientX - X
let y = Y - e.clientY let y = Y - e.clientY
angle = Math.atan2(x,y)*(180 / Math.PI) angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)" elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
el.style.transform = "rotateZ("+ angle + "deg)" el.style.transform = "rotateZ("+ angle + "deg)"
}
} }
}); document.addEventListener('mousemove', mousemove);
// 添加鼠标松开事件监听器 // 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => { let mouseup = () => {
value.instance.printStyleList[0].transform.rotateZ = angle value.instance.printStyleList[value?.value[0]].transform.rotateZ = angle
// console.log(value.instance.printStyleList); // console.log(value.instance.printStyleList);
mouse = false; mouse = false;
}); document.removeEventListener('mouseup',mouseup)
document.removeEventListener('mousemove',mousemove)
}
document.addEventListener('mouseup', mouseup);
}); });
} }
@@ -426,8 +430,8 @@ export default defineComponent({
this.printAmount = 1 this.printAmount = 1
return return
} }
if(this.printAmount > 10){ if(this.printAmount > 20){
this.printAmount = 10 this.printAmount = 20
return return
} }
let printTiemNum let printTiemNum
@@ -472,8 +476,8 @@ export default defineComponent({
let scale = width / this.print.width.replace(/px/g,'') let scale = width / this.print.width.replace(/px/g,'')
// let x = sketch.width-Number(this.print.width.replace(/px/g,'')) // let x = sketch.width-Number(this.print.width.replace(/px/g,''))
// let y = sketch.height-Number(this.print.height.replace(/px/g,'')) // let y = sketch.height-Number(this.print.height.replace(/px/g,''))
let x = sketch?.width-20 let x = sketch?.width-this.print.width.replace(/px/g,'')*scale
let y = sketch?.height-20 let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
this.printStyleList[index]={ this.printStyleList[index]={
centers:{ centers:{
left:0, left:0,
@@ -490,7 +494,8 @@ export default defineComponent({
}, },
transform:{ transform:{
// scale:scale<.2?.2:scale,//0.2-3 // scale:scale<.2?.2:scale,//0.2-3
rotateZ:rotateZ1-rotateZ2, // rotateZ:rotateZ1-rotateZ2,
rotateZ:this.printStyleList[index].transform.rotateZ!=0?this.printStyleList[index].transform.rotateZ:0
}, },
designOpenrtionBtn:false designOpenrtionBtn:false
} }
@@ -503,14 +508,22 @@ export default defineComponent({
let scale let scale
scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,'')) scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
let zIndex = 1 let zIndex = 1
let left = item.location[0]/sketchNum+'px'
let top = item.location[1]/sketchNum+'px'
if(sketch.offsetWidth < item.location[0]/sketchNum){
left = sketch.offsetWidth +'px'
}
if(sketch.offsetHeight < item.location[1]/sketchNum){
top = sketch.offsetHeight +'px'
}
this.printStyleList[index]={ this.printStyleList[index]={
centers:{ centers:{
left:0, left:0,
top:0, top:0,
}, },
style:{ style:{
left:item.location[0]/sketchNum+'px', left:left,
top:item.location[1]/sketchNum+'px', top:top,
right:"auto", right:"auto",
bottom:"auto", bottom:"auto",
width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px', width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',

17
src/component/Detail/habit.vue
View File

@@ -173,8 +173,8 @@ export default defineComponent({
workSpaceName:"工作台1", workSpaceName:"工作台1",
putName:false, putName:false,
systemDesignerPercentage:30, systemDesignerPercentage:30,
position:'Outwear', position:'',
sex:'Female', sex:'',
overallSingle:false, overallSingle:false,
mannequinUrl:'', mannequinUrl:'',
mannequinType:'', mannequinType:'',
@@ -261,7 +261,6 @@ export default defineComponent({
async mounted() { async mounted() {
this.getworkspace() this.getworkspace()
this.getSex() this.getSex()
this.getPosition()
}, },
directives:{ directives:{
fade:{ fade:{
@@ -311,6 +310,7 @@ export default defineComponent({
arr.push(obj) arr.push(obj)
}); });
this.sex = arr this.sex = arr
this.getPosition()
} }
}) })
@@ -333,7 +333,9 @@ export default defineComponent({
arr.push(obj) arr.push(obj)
}); });
this.singleTypeList = arr this.singleTypeList = arr
this.workspaceItem.position = this.singleTypeList[0].label if(this.workspaceItem.overallSingle){
this.workspaceItem.position = this.singleTypeList[0].label
}
} }
}) })
}, },
@@ -371,6 +373,8 @@ export default defineComponent({
getDetail(id:any){// getDetail(id:any){//
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => { Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
if (rv) { if (rv) {
this.getworkspace()
} }
}) })
}, },
@@ -391,14 +395,13 @@ export default defineComponent({
}, },
putWorkspace(data:any,index:any){//修改workspace putWorkspace(data:any,index:any){//修改workspace
console.log(index);
Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => { Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
if (rv) { if (rv) {
if(index){ if(index){
this.getDetail(index) this.getDetail(index)
}else{
this.getworkspace()
} }
this.getworkspace()
} }
}) })
}, },

119
src/component/Detail/magnifyingGlass.vue Normal file
View File

@@ -0,0 +1,119 @@
<template>
<div class="magnifyingGlass">
<div class="initial">
<div class="initial_mask" v-mousemove>
<img class="initial_img" :src="designItemDetailUrl" alt="">
<div class="initial_haver"></div>
</div>
</div>
<div class="big"></div>
</div>
</template>
<script>
import { defineComponent, createVNode, ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
export default defineComponent({
components: {
DownOutlined,
UserOutlined,
},
props: ['designItemDetailUrl'],
setup(){
return{
}
},
watch:{
},
data() {
return {
};
},
mounted() {
},
directives:{
mousemove:{
mounted (el,binding) {
let mouseover = (event)=>{//移入
const mask = document.getElementsByClassName('magnifyingGlass')[0].querySelector('.initial_haver')
const initialImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".initial_img");
const bigImg = document.getElementsByClassName('magnifyingGlass')[0].querySelector(".big");
const maskW = mask.getBoundingClientRect().width;
const bigImgW = bigImg.getBoundingClientRect().width;
const num = bigImgW / maskW
bigImg.style.backgroundImage = `url(${initialImg.src})`;
const { left, top} = initialImg.getBoundingClientRect();
const initialImgH = initialImg.getBoundingClientRect().height
const initialImgW = initialImg.getBoundingClientRect().width;
const {width,height} = mask.getBoundingClientRect();
let mousemove = (event)=>{//移动
const x = event.clientX - left;
const y = event.clientY - top;
const bgPosX = (-x+width/2 )* num;
const bgPosY = (-y+height/2) * num;
const bgPosW = initialImgW * num;
const bgPosH = initialImgH * num;
mask.style.top = y-height/2+'px';
mask.style.left = x-width/2+'px';
bigImg.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
bigImg.style.backgroundSize = `${bgPosW}px ${bgPosH}px`;
}
document.addEventListener('mousemove',mousemove)
el.addEventListener('mouseout',()=>{
document.removeEventListener('mousemove',mousemove)
document.removeEventListener('mouseover',mouseover)
})
}
el.addEventListener('mouseover',mouseover)
},
},
},
methods: {
handleMouseMove(event) {
},
},
});
</script>
<style lang="less" scoped>
.magnifyingGlass{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
.initial{
justify-content: center;
width: 40%;
text-align: center;
.initial_mask{
overflow: hidden;
width: auto;
height: 100%;
display: inline-block;
position: relative;
.initial_img{
height: 100%;
width: auto;
max-width: 100%;
}
.initial_haver{
width: 10rem;
height: 10rem;
position: absolute;
background-color: rgba(0,0,0,.2);
top: 0;
}
}
}
.big{
width: 40%;
background-position: 0 0;
background-repeat: no-repeat;
}
}
</style>

93
src/component/HomePage/ColorboardUpload.vue
View File

@@ -299,52 +299,57 @@ export default defineComponent({
file.status = 'done' file.status = 'done'
this.fileList.push(file) this.fileList.push(file)
setTimeout(async ()=>{ setTimeout(async ()=>{
const img = new Image();
let colorImage = this.$refs.colorImage
img.src = colorImage[0].src;
const colorThief = new ColorThief(); const colorThief = new ColorThief();
let colorImage = this.$refs.colorImage img.onload = async () => {
let domImg = colorImage[0]; let domImg = colorImage[0];
// let color = colorThief.getColor(domImg) // let color = colorThief.getColor(domImg)
let selectColorList = []; let selectColorList = [];
let selectColor = colorThief.getPalette(domImg,9) let selectColor = colorThief.getPalette(img,9)
//排序 //排序
let obj = { let obj = {
max : 5, max : 5,
min: 5, min: 5,
}
let colorSort
await GO.setColor(selectColor,file.imgUrl,obj).then(
(rv) => {
if(rv){
colorSort = rv.ratio
}
} }
) let colorSort
colorSort.sort((a, b) => { await GO.setColor(selectColor,file.imgUrl,obj).then(
var a_num = a.ratio; (rv) => {
var b_num = b.ratio; if(rv){
return b_num - a_num; colorSort = rv.ratio
}); }
selectColor = [] }
colorSort.forEach(v=>{
selectColor.push(v.rgb)
})
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
let color = selectColor[0].split(',')
let colorHex = this.rgbaToHex(color)
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
})
colorLi.forEach(element => {
let colorLiHex = this.rgbaToHex(element)
selectColorList.push(
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
) )
}); colorSort.sort((a, b) => {
this.selectColorList = selectColorList var a_num = a.ratio;
this.getHsvColor(selectColorList) var b_num = b.ratio;
return b_num - a_num;
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex} });
selectColor = []
colorSort.forEach(v=>{
selectColor.push(v.rgb)
})
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
let color = selectColor[0].split(',')
let colorHex = this.rgbaToHex(color)
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
})
colorLi.forEach(element => {
let colorLiHex = this.rgbaToHex(element)
selectColorList.push(
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
)
});
this.selectColorList = selectColorList
this.getHsvColor(selectColorList)
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
};
},100) },100)
}; };
// 转化为base64S // 转化为base64S
@@ -667,7 +672,7 @@ export default defineComponent({
width: auto; width: auto;
background: #f0eaee; background: #f0eaee;
border-radius: 10px; border-radius: 1rem;
overflow: hidden; overflow: hidden;
// box-shadow: 2px 2px 8px #000; // box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px rgba(0,0,0,.3); box-shadow: 2px 2px 8px rgba(0,0,0,.3);

12
src/component/HomePage/Cropper.vue
View File

@@ -55,13 +55,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="cut_picture_review_item"> <!-- <div class="cut_picture_review_item">
<div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}"> <div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div" > <div :style="previews.div" >
<img class="previews_image" :style="previews.img" :src="previews.url"> <img class="previews_image" :style="previews.img" :src="previews.url">
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
@@ -280,7 +280,8 @@ export default defineComponent({
} }
.cut_picture_right{ .cut_picture_right{
width: 39.2rem; // width: 39.2rem;
width: 52rem;
height: 100%; height: 100%;
background: #fff; background: #fff;
border-radius: 2rem; border-radius: 2rem;
@@ -309,7 +310,8 @@ export default defineComponent({
.cut_picture_review_item{ .cut_picture_review_item{
width: 100%; width: 100%;
height: 50%; // height: 50%;
height: 100%;
position: relative; position: relative;
.cut_picture_review_content{ .cut_picture_review_content{
@@ -317,7 +319,7 @@ export default defineComponent({
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: scale(0.45) translate(-50%, -50%); transform: scale(0.8) translate(-50%, -50%);
background: rgba(91,94,105,0.8); background: rgba(91,94,105,0.8);
box-shadow: 0 0.2rem 0.5rem 0 rgba(216,213,239,0.3); box-shadow: 0 0.2rem 0.5rem 0 rgba(216,213,239,0.3);
border-radius: 1rem; border-radius: 1rem;

81
src/component/HomePage/Generate.vue
View File

@@ -39,14 +39,18 @@
</ul> </ul>
</div> </div>
</div> </div>
<div v-else class="input_box"> <div v-else class="input_box" :class="{active:inputShow}">
<input <input
class="search_input" class="search_input"
@input="ifMaximumLength"
placeholder="Promopt input" placeholder="Promopt input"
:maxlength='inputShow?0:9999'
v-model="searchPictureName" v-model="searchPictureName"
@keydown.enter="getgenerate()" @keydown.enter="getgenerate()"
/> />
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div> <div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
</div> </div>
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img"> <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img">
<div class="upload_item"> <div class="upload_item">
@@ -179,7 +183,7 @@ import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util"; import { getUploadUrl } from "@/tool/util";
import { forEach } from "jszip"; import { forEach } from "jszip";
export default defineComponent({ export default defineComponent({
props: ["msg"], props: ["msg",'sketchCatecoryList'],
setup() { setup() {
// console.log(prop.msg); // console.log(prop.msg);
let checkbox = ref([ let checkbox = ref([
@@ -219,10 +223,12 @@ export default defineComponent({
num:1, num:1,
optype:false, optype:false,
}) })
let sketchCatecoryList:any = ref([]) // let sketchCatecoryList:any = ref([])
let workspace:any = ref({}) let workspace:any = ref({})
let loadingShow = ref(false) let loadingShow = ref(false)
let inputShow = ref(false)
let inputTime = ref()
return { return {
imgList, imgList,
selectImgList, selectImgList,
@@ -244,8 +250,10 @@ export default defineComponent({
checkboxImage, checkboxImage,
printModel, printModel,
loadingShow, loadingShow,
sketchCatecoryList, // sketchCatecoryList,
workspace workspace,
inputShow,
inputTime,
}; };
}, },
data(prop) { data(prop) {
@@ -281,6 +289,7 @@ export default defineComponent({
// this.store.commit("addGenerateFils", this.fileList); // this.store.commit("addGenerateFils", this.fileList);
this.token = getCookie("token") || ""; this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl(); this.uploadUrl = getUploadUrl();
this.workspace = this.store.state.Workspace.workspace
}, },
computed: { computed: {
getSketchLabel(value: any) { getSketchLabel(value: any) {
@@ -347,6 +356,20 @@ export default defineComponent({
); );
return return
} }
if(this.searchPictureName){
let arr = this.searchPictureName.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
);
return
}
}else{
message.warning(
"Please enter content"
);
return
}
let data = { let data = {
generateType:'text', generateType:'text',
designType:'', designType:'',
@@ -356,6 +379,7 @@ export default defineComponent({
text:this.searchPictureName, text:this.searchPictureName,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:this.printModel.num,//为1就是Print version:this.printModel.num,//为1就是Print
gender:'',
} }
this.loadingShow = true this.loadingShow = true
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then( Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
@@ -378,6 +402,21 @@ export default defineComponent({
this.loadingShow = false this.loadingShow = false
}); });
}, },
ifMaximumLength(e){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
let input = inputBox.getElementsByClassName('search_input')[0]
this.inputTime = setTimeout(()=>{
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
// let num2 = (input as HTMLInputElement).value.split(' ').length
if(this.searchPictureName.split(/\s+/).length > 75){
this.inputShow = true
}else{
this.inputShow = false
}
},500)
},
fileUploadChange(data: any) { fileUploadChange(data: any) {
let file = data.file; let file = data.file;
if (file.status === "done") { if (file.status === "done") {
@@ -387,7 +426,7 @@ export default defineComponent({
file.resData = res.data; file.resData = res.data;
file.type_ = "upload"; file.type_ = "upload";
file.id_ = GO.id++; file.id_ = GO.id++;
file.category = this.sketchCatecoryList[0].value; file.category = this.sketchCatecoryList?.[0]?.value;
let fileList = this.sketchboardList.filter( let fileList = this.sketchboardList.filter(
(v: any) => v.status === "done" (v: any) => v.status === "done"
); );
@@ -509,7 +548,7 @@ export default defineComponent({
.generate { .generate {
flex: 1; flex: 1;
// height: 30rem; // height: 30rem;
overflow-x: hidden; // overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
&.generate::-webkit-scrollbar { &.generate::-webkit-scrollbar {
display: none; display: none;
@@ -622,20 +661,20 @@ export default defineComponent({
} }
.upload_item { .upload_item {
.upload_file_item { .upload_file_item {
&.active { // &.active {
opacity: 0.5; // opacity: 0.5;
// border: 2px solid; // // border: 2px solid;
border-radius: 1rem; // border-radius: 1rem;
transform: scale(0.9); // transform: scale(0.9);
.delete_file_block{ // .delete_file_block{
pointer-events:none; // pointer-events:none;
} // }
.operate_file_block{ // .operate_file_block{
pointer-events:none; // pointer-events:none;
} // }
img { // img {
} // }
} // }
&.forbidden{ &.forbidden{
cursor:not-allowed; cursor:not-allowed;
img{ img{

9
src/component/HomePage/Material.vue
View File

@@ -86,7 +86,7 @@ import { useStore } from "vuex";
import GO from '@/tool/GO'; import GO from '@/tool/GO';
export default defineComponent({ export default defineComponent({
props: ["msg"], props: ["msg",'disignTypeList'],
setup(prop) { setup(prop) {
let myMaterialModalShow = ref(false) let myMaterialModalShow = ref(false)
let imgList = ref([ let imgList = ref([
@@ -99,9 +99,9 @@ export default defineComponent({
let total = ref(0) let total = ref(0)
let searcMaterialhName:any = ref('') //搜索名字 let searcMaterialhName:any = ref('') //搜索名字
let designType:any = ref(null) let designType:any = ref(null)
let disignTypeList:any = ref([ // let disignTypeList:any = ref([
]) // ])
let workspace:any = ref({}) let workspace:any = ref({})
return{ return{
myMaterialModalShow, myMaterialModalShow,
@@ -114,7 +114,7 @@ export default defineComponent({
total, total,
searcMaterialhName, searcMaterialhName,
designType, designType,
disignTypeList, // disignTypeList,
workspace workspace
} }
}, },
@@ -261,7 +261,6 @@ export default defineComponent({
}) })
this.store.commit("addGenerateMaterialFils", imgData); this.store.commit("addGenerateMaterialFils", imgData);
}, },
//改变页码 //改变页码
changePage(current: number, pageSize: number){ changePage(current: number, pageSize: number){
this.currentPage = current this.currentPage = current

31
src/component/HomePage/MoodboardUpload.vue
View File

@@ -34,7 +34,7 @@
> >
<div <div
class="upload_file_item_content" class="upload_file_item_content"
v-show="file?.status === 'uploading'" v-show="file?.status === 'uploading'"
> >
<a-spin <a-spin
:indicator="indicator" :indicator="indicator"
@@ -58,6 +58,7 @@
class="upload_file_item upload_component" class="upload_file_item upload_component"
v-show="moodboarList.length < 8" v-show="moodboarList.length < 8"
> >
<a-upload <a-upload
:action="uploadUrl + '/api/element/upload'" :action="uploadUrl + '/api/element/upload'"
list-type="picture-card" list-type="picture-card"
@@ -65,8 +66,8 @@
...upload, ...upload,
}" }"
:headers="{ Authorization: token }" :headers="{ Authorization: token }"
v-model:file-list="fileList"
:before-upload="beforeUpload" :before-upload="beforeUpload"
v-model:file-list="fileList"
multiple multiple
:maxCount="8 - moodboarList.length+fileList.length" :maxCount="8 - moodboarList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp" accept=".jpg,.png,.jpeg,.bmp"
@@ -160,6 +161,7 @@ export default defineComponent({
const store = useStore() const store = useStore()
let lessenList: any = ref([]); let lessenList: any = ref([]);
let fileList: any = ref([]); let fileList: any = ref([]);
let showFileList: any = ref([]);
let templateModal: any = ref(false); let templateModal: any = ref(false);
let templateFileList: any = ref([]); let templateFileList: any = ref([]);
let openClick: any = ref(1); let openClick: any = ref(1);
@@ -171,8 +173,10 @@ export default defineComponent({
let modalImg:any= computed(()=>{ let modalImg:any= computed(()=>{
return store.state.UploadFilesModule.disposeMoodboard return store.state.UploadFilesModule.disposeMoodboard
}) })
let uploading:any = ref([])
return { return {
fileList, fileList,
showFileList,
lessenList, lessenList,
templateModal, templateModal,
templateFileList, templateFileList,
@@ -182,7 +186,8 @@ export default defineComponent({
layoutList, layoutList,
layoutOpen, layoutOpen,
loadingShow, loadingShow,
modalImg modalImg,
uploading
}; };
}, },
data() { data() {
@@ -223,8 +228,16 @@ export default defineComponent({
watch:{ watch:{
fileList:{ fileList:{
handler(newVal:any,oldVal:any){ handler(newVal:any,oldVal:any){
console.log(newVal,oldVal); // console.log(111);
// if(this.uploading.length<newVal.length){
// for (let index = 1; this.uploading.length < newVal.length; index++) {
// this.uploading.push(false)
// }
// }else{
// if(newVal[newVal.length-1].status == 'dome')
// this.uploading[this.uploading-1] = true
// }
} }
} }
}, },
@@ -283,6 +296,7 @@ export default defineComponent({
}else{ }else{
this.store.commit("setMoodboardFile", fileList); this.store.commit("setMoodboardFile", fileList);
} }
// this.showFileList = this.fileList
} else if (file.status === "error") { } else if (file.status === "error") {
let index = -1; let index = -1;
this.fileList.forEach((ele: any, index1: any) => { this.fileList.forEach((ele: any, index1: any) => {
@@ -295,6 +309,7 @@ export default defineComponent({
} }
message.error(file.name + "upload failed"); message.error(file.name + "upload failed");
} }
}, },
beforeUpload(file: any) { beforeUpload(file: any) {
const isJpgOrPng = const isJpgOrPng =
@@ -351,6 +366,8 @@ export default defineComponent({
material:[] as any, material:[] as any,
moodboard:[] as any, moodboard:[] as any,
} }
console.log(disposeMoodboard);
arr.forEach((v:any)=>{ arr.forEach((v:any)=>{
if(v.type_.type1 == 'generate'){ if(v.type_.type1 == 'generate'){
setboard.generate.push(v) setboard.generate.push(v)
@@ -360,7 +377,6 @@ export default defineComponent({
setboard.moodboard.push(v) setboard.moodboard.push(v)
} }
}) })
this.store.commit("setMoodboardGenerateFiles", setboard.generate); this.store.commit("setMoodboardGenerateFiles", setboard.generate);
this.store.commit("setMoodboardMaterialFiles", setboard.material); this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard); this.store.commit("setMoodboardFile", setboard.moodboard);
@@ -547,12 +563,15 @@ export default defineComponent({
.modal_img_item{ .modal_img_item{
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
text-align: center;
margin: 0 1rem 1rem 0; margin: 0 1rem 1rem 0;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
img{ img{
width: 100%; width: auto;
height: 100%; height: 100%;
max-width: 100%;
object-fit: cover;
} }
.checked{ .checked{
position: absolute; position: absolute;

56
src/component/HomePage/PrintboardUpload.vue
View File

@@ -99,9 +99,10 @@
</div> </div>
</div> </div>
<div v-show="openClick == 3" class="modal_accomplish"> <div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box"> <div class="input_box" :class="{active:inputShow}">
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration"> <input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div> <div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
</div> </div>
<div class="modal_img"> <div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" > <div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
@@ -151,10 +152,10 @@ export default defineComponent({
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles}) moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
let openClick: any = ref(1); let openClick: any = ref(1);
let generateCheckbox:any = ref() let generateCheckbox:any = ref()
let generateList:any = ref([ let generateList:any = ref([])
])
let loadingShow = ref(false) let loadingShow = ref(false)
let inputShow = ref(false)
let inputTime = ref()
return { return {
fileList, fileList,
printImgList, printImgList,
@@ -163,6 +164,8 @@ export default defineComponent({
generateCheckbox, generateCheckbox,
generateList, generateList,
loadingShow, loadingShow,
inputShow,
inputTime,
} }
}, },
computed:{ computed:{
@@ -572,6 +575,16 @@ export default defineComponent({
getgenerateCheckbox(value:any){ getgenerateCheckbox(value:any){
this.generateCheckbox = value this.generateCheckbox = value
}, },
ifMaximumLength(){
clearTimeout(this.inputTime)
this.inputTime = setTimeout(()=>{
if(this.captionGeneration.split(/\s+/).length > 75){
this.inputShow = true
}else{
this.inputShow = false
}
},500)
},
getgenerate(){ getgenerate(){
let generage:any = this.$refs.Generate let generage:any = this.$refs.Generate
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
@@ -583,10 +596,12 @@ export default defineComponent({
level2Type:'', level2Type:'',
text:this.captionGeneration, text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:2,//为1就是Print version:generage.printModel.num,//为1就是Print
gender:'',
} }
if(generateType == 'image'||generateType == 'text-image'){ if(generateType == 'image'||generateType == 'text-image'){
if(generage.collectionElementid){ if(generage.collectionElementid){
}else{ }else{
message.warning( message.warning(
"Please select a picture" "Please select a picture"
@@ -598,6 +613,14 @@ export default defineComponent({
data.level2Type = '' data.level2Type = ''
// this.beforeUpload(false) // this.beforeUpload(false)
if(this.captionGeneration){ if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
);
return
}
}else{ }else{
message.warning( message.warning(
"Please enter content" "Please enter content"
@@ -732,12 +755,17 @@ export default defineComponent({
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
text-align: center;
img{ img{
width: 100%; width: auto;
object-fit: cover;
height: 100%; height: 100%;
max-width: 100%;
} }
.upload_file_img_block{
height: 100%;
}
&.upload_component{ &.upload_component{
border: none; border: none;
@@ -779,7 +807,9 @@ export default defineComponent({
.upload_img{ .upload_img{
display: block; display: block;
max-height: 100%; max-height: 100%;
width: auto;
max-width: 100%; max-width: 100%;
object-fit: cover;
} }
&:hover .delete_like_file_block{ &:hover .delete_like_file_block{
display: block; display: block;
@@ -847,9 +877,12 @@ export default defineComponent({
margin: 0 1rem 1rem 0; margin: 0 1rem 1rem 0;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
text-align: center;
img{ img{
width: 100%; width: auto;
height: 100%; height: 100%;
object-fit: cover;
max-width: 100%;
} }
.checked{ .checked{
position: absolute; position: absolute;
@@ -875,7 +908,7 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow-x: hidden; // overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar { &.modal_accomplish::-webkit-scrollbar {
display: none; display: none;
} }
@@ -904,8 +937,9 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
img{ img{
object-fit: cover; object-fit: cover;
width: 100%;
height: 100%; height: 100%;
max-width: 100%;
width: auto;
} }
&:hover .delete_like_file_block{ &:hover .delete_like_file_block{
display: block; display: block;

8
src/component/HomePage/RobotAssist.vue
View File

@@ -129,7 +129,7 @@ export default defineComponent({
this.createTimer() this.createTimer()
}, },
getBloodBars(){ getBloodBars(){
Https.axiosGet(Https.httpUrls.getBloodBars,{params:{userId:this.userInfo.userId}}).then((rv: any) => { Https.axiosGet(Https.httpUrls.getBloodBars,{params:{userId:this?.userInfo?.userId}}).then((rv: any) => {
if (rv) { if (rv) {
this.bloodBars = rv*100 this.bloodBars = rv*100
} }
@@ -175,7 +175,7 @@ export default defineComponent({
// sessionStorage.removeItem // sessionStorage.removeItem
let a = true let a = true
let data = { let data = {
"user_id" : this.userInfo.userId, "user_id" : this.userInfo?.userId,
"session_id":sessionId, "session_id":sessionId,
"message" : this.chatCentent, "message" : this.chatCentent,
} }
@@ -221,7 +221,7 @@ export default defineComponent({
likeFile(item:any,imgIndex:number,index:number){ likeFile(item:any,imgIndex:number,index:number){
let data = { let data = {
...item, ...item,
"userId" : this.userInfo.userId, "userId" : this.userInfo?.userId,
} }
Https.axiosPost(Https.httpUrls.pictureLikeOrUnLike, data).then( Https.axiosPost(Https.httpUrls.pictureLikeOrUnLike, data).then(
(rv) => { (rv) => {
@@ -401,7 +401,7 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 5px 10px; padding: .5rem 1rem;
background: #fff; background: #fff;
border-radius: 5px; border-radius: 5px;
// height: 32px; // height: 32px;

51
src/component/HomePage/SketchboardUpload.vue
View File

@@ -145,11 +145,13 @@
ref="Material" ref="Material"
msg="Sketchboard" msg="Sketchboard"
@confirmSelect="confirmSelect" @confirmSelect="confirmSelect"
:disignTypeList="sketchCatecoryList"
></Material> ></Material>
<Generate <Generate
v-show="openClick == 3" v-show="openClick == 3"
ref="Generate" ref="Generate"
msg="Sketchboard" msg="Sketchboard"
:sketchCatecoryList="sketchCatecoryList"
@generateCheckbox="getgenerateCheckbox" @generateCheckbox="getgenerateCheckbox"
></Generate> ></Generate>
</div> </div>
@@ -169,9 +171,10 @@
</div> </div>
</div> </div>
<div v-show="openClick == 3" class="modal_accomplish"> <div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box"> <div class="input_box" :class="{active:inputShow}">
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration"> <input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<div class="generage_btn started_btn" @click="getgenerate">Generate</div> <div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
</div> </div>
<div class="modal_img"> <div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }"> <div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
@@ -267,6 +270,9 @@ export default defineComponent({
let sketchCatecoryList:any = ref({}) let sketchCatecoryList:any = ref({})
let workspace:any = ref({}) let workspace:any = ref({})
let inputShow = ref(false)
let inputTime = ref()
return { return {
fileList, fileList,
openClick, openClick,
@@ -274,7 +280,9 @@ export default defineComponent({
generateCheckbox, generateCheckbox,
loadingShow, loadingShow,
sketchCatecoryList, sketchCatecoryList,
workspace workspace,
inputShow,
inputTime,
}; };
}, },
data() { data() {
@@ -346,7 +354,6 @@ export default defineComponent({
}else{ }else{
params = 'MalePosition' params = 'MalePosition'
} }
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => { Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
if (rv) { if (rv) {
let arr:any = [] let arr:any = []
@@ -357,9 +364,6 @@ export default defineComponent({
} }
arr.push(obj) arr.push(obj)
}); });
(this.$refs.Generate as any).sketchCatecoryList = arr
(this.$refs.Material as any).disignTypeList = arr
this.sketchCatecoryList = arr this.sketchCatecoryList = arr
} }
}) })
@@ -374,7 +378,7 @@ export default defineComponent({
file.imgUrl = res.data.url; file.imgUrl = res.data.url;
file.resData = res.data; file.resData = res.data;
file.pin = false; file.pin = false;
file.category = this.sketchCatecoryList[0].value; file.category = this.sketchCatecoryList?.[0]?.value;
file.categoryShow = false; file.categoryShow = false;
file.id_ = GO.id++ file.id_ = GO.id++
file.type_ = { file.type_ = {
@@ -450,6 +454,21 @@ export default defineComponent({
document.removeEventListener("click", this.hiddenFileCategory); document.removeEventListener("click", this.hiddenFileCategory);
}, },
ifMaximumLength(){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
let input = inputBox.getElementsByClassName('search_input')[0]
this.inputTime = setTimeout(()=>{
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
// let num2 = (input as HTMLInputElement).value.split(' ').length
if(this.captionGeneration.split(/\s+/).length > 75){
this.inputShow = true
}else{
this.inputShow = false
}
},500)
},
deleteFile(item: any) { deleteFile(item: any) {
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){ if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
this.store.commit("addGenerateMaterialFils", item); this.store.commit("addGenerateMaterialFils", item);
@@ -541,9 +560,7 @@ export default defineComponent({
}, },
//发送请求生成图片 //发送请求生成图片
getgenerate(){ getgenerate(){
let generage:any = this.$refs.Generate let generage:any = this.$refs.Generate
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
let data = { let data = {
generateType:generateType, generateType:generateType,
@@ -553,7 +570,8 @@ export default defineComponent({
level2Type:generage.level2Type, level2Type:generage.level2Type,
text:this.captionGeneration, text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:0,//为1就是Print version:generage.printModel.num,//为1就是Print
gender:this.workspace.sex,
} }
if(generateType == 'image'||generateType == 'text-image'){ if(generateType == 'image'||generateType == 'text-image'){
if(generage.collectionElementid){ if(generage.collectionElementid){
@@ -568,6 +586,13 @@ export default defineComponent({
data.collectionElementId = '' data.collectionElementId = ''
data.level2Type = '' data.level2Type = ''
if(this.captionGeneration){ if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
);
return
}
}else{ }else{
message.warning( message.warning(
"Please enter content" "Please enter content"
@@ -845,7 +870,7 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow-x: hidden; // overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar { &.modal_accomplish::-webkit-scrollbar {
display: none; display: none;
} }

24
src/component/HomePage/collectionModal.vue
View File

@@ -7,6 +7,7 @@
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
wrapClassName="#app"
> >
<div class="collection_title"> <div class="collection_title">
<div class="collection_title_text"> <div class="collection_title_text">
@@ -17,8 +18,8 @@
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> --> <!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
<div class="collection_title_text_intro">select moodboard for your collection</div> <div class="collection_title_text_intro">select moodboard for your collection</div>
</div> </div>
<div> <div class="collection_progress">
<a-progress :strokeWidth= 13 :width= 60 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" /> <a-progress :strokeWidth= 13 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
</div> </div>
</div> </div>
@@ -163,6 +164,18 @@ export default defineComponent({
font-weight: 900; font-weight: 900;
color: rgba(0,0,0,.65); color: rgba(0,0,0,.65);
align-items: center; align-items: center;
.collection_progress{
width: 8rem;
height: 8rem;
>div{
width: 100% !important;
height: 100% !important;
:deep(.ant-progress-inner){
width: 100% !important;
height: 100% !important;
}
}
}
.collection_title_text{ .collection_title_text{
margin-right: 4rem; margin-right: 4rem;
} }
@@ -264,7 +277,7 @@ export default defineComponent({
// max-width: 1200px ; // max-width: 1200px ;
// max-width: 1150px ; // max-width: 1150px ;
.ant-modal-content{ .ant-modal-content{
border-radius: 10px; border-radius: 1rem;
overflow: hidden; overflow: hidden;
.ant-modal-header{ .ant-modal-header{
background-color: #fff; background-color: #fff;
@@ -282,7 +295,12 @@ export default defineComponent({
} }
.ant-progress-circle .ant-progress-text{ .ant-progress-circle .ant-progress-text{
color:rgba(0, 0, 0, 0.55); color:rgba(0, 0, 0, 0.55);
font-size: 1.6rem;
} }
} }
} }
// .ant-progress-circle .ant-progress-inner{
// width: 8rem !important;
// height: 8rem !important;
// }
</style> </style>

37
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -343,6 +343,7 @@ export default defineComponent({
icon: createVNode(ExclamationCircleOutlined), icon: createVNode(ExclamationCircleOutlined),
okText: 'Ok', okText: 'Ok',
cancelText: 'Cancel', cancelText: 'Cancel',
mask:false,
// centered:true, // centered:true,
onOk() { onOk() {
// _this.getDefaultPointList(_this.imgBox) // _this.getDefaultPointList(_this.imgBox)
@@ -393,6 +394,7 @@ export default defineComponent({
libraryId:this.printObject.id, libraryId:this.printObject.id,
templateId:this.printObject.templateId || null, templateId:this.printObject.templateId || null,
modelType:'Library', modelType:'Library',
checkMd5:1,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation() ...this.getPrintLocation()
} }
@@ -417,7 +419,8 @@ export default defineComponent({
file:this.printObject.file, file:this.printObject.file,
level1Type:'Models', level1Type:'Models',
level2Type:'', level2Type:'',
sex:'', checkMd5:1,
sex:this.sex,
modelType:'Library', modelType:'Library',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
} }
@@ -429,7 +432,11 @@ export default defineComponent({
return new Promise((resolve,reject)=>{ return new Promise((resolve,reject)=>{
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then( Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => { (rv: any) => {
resolve(rv) if(!rv.checkMd5){
resolve(this.affirmCstomRequest(new_data))
}else{
resolve(rv)
}
} }
).catch((res)=>{ ).catch((res)=>{
reject(res) reject(res)
@@ -437,7 +444,33 @@ export default defineComponent({
}) })
}, },
affirmCstomRequest(data:any){
let _this = this
return new Promise((resolve,reject)=>{
Modal.confirm({
title: 'This picture has been uploaded whether to continue uploading？ ',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
onOk() {
data.checkMd5 = 0
Https.axiosPost(Https.httpUrls.libraryUpload, data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
_this.isShowMark = false
resolve(rv)
}
).catch((res)=>{
reject(res)
});
},
onCancel(){
_this.isShowMark = false
}
});
})
},
getPrintLocation(){ getPrintLocation(){
let {width , height} = this.imgBox let {width , height} = this.imgBox
let locationData:any = {} let locationData:any = {}

1
src/component/LibraryPage/ModelPlacementMobile.vue
View File

@@ -276,6 +276,7 @@ export default defineComponent({
icon: createVNode(ExclamationCircleOutlined), icon: createVNode(ExclamationCircleOutlined),
okText: 'Ok', okText: 'Ok',
cancelText: 'Cancel', cancelText: 'Cancel',
mask:false,
// centered:true, // centered:true,
onOk() { onOk() {
// _this.getDefaultPointList(_this.imgBox) // _this.getDefaultPointList(_this.imgBox)

3
src/component/LibraryPage/ModelPlacementNew.vue
View File

@@ -275,6 +275,7 @@ export default defineComponent({
title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?", title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
icon: createVNode(ExclamationCircleOutlined), icon: createVNode(ExclamationCircleOutlined),
okText: 'Ok', okText: 'Ok',
mask:false,
cancelText: 'Cancel', cancelText: 'Cancel',
// centered:true, // centered:true,
onOk() { onOk() {
@@ -501,7 +502,7 @@ export default defineComponent({
width: 100%; width: 100%;
.plcaement_point_content{ .plcaement_point_content{
border: 2px solid #000; border: 2px solid #000;
border-radius: 10px; border-radius: 1rem;
width: 22rem; width: 22rem;
background: #EBECF4; background: #EBECF4;
position: absolute; position: absolute;

1
src/component/LoginPage/verificationCodeInput.vue
View File

@@ -11,7 +11,6 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { defineComponent } from 'vue' import { defineComponent } from 'vue'

1
src/main.ts
View File

@@ -4,6 +4,7 @@ import router from './router'
import store from './store' import store from './store'
import './assets/iconfont/iconfont.css' import './assets/iconfont/iconfont.css'
import './assets/iconfont/iconfont.js' import './assets/iconfont/iconfont.js'
import './assets/iconfont2/iconfont.css'
import flexible from './tool/flexible.js' import flexible from './tool/flexible.js'
import 'ant-design-vue/dist/antd.css'; import 'ant-design-vue/dist/antd.css';
import Antd from 'ant-design-vue'; import Antd from 'ant-design-vue';

5
src/tool/flexible.js
View File

@@ -1,11 +1,14 @@
let flexible = (designWidth, maxWidth) =>{ let flexible = (designWidth, maxWidth,minWidth) =>{
var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
designWidth = designWidth || 1920; designWidth = designWidth || 1920;
maxWidth = maxWidth || 2560; maxWidth = maxWidth || 2560;
minWidth = minWidth || 1024;
function refreshRem() { function refreshRem() {
var width = docEl.getBoundingClientRect().width; var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 1920; maxWidth = maxWidth || 1920;
width > maxWidth && (width = maxWidth); width > maxWidth && (width = maxWidth);
width > maxWidth && (width = maxWidth);
width < minWidth && (width = minWidth);
var rem = width * 10 / designWidth; var rem = width * 10 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
} }

22
src/views/HistoryPage.vue
View File

@@ -31,14 +31,14 @@
showQuickJumper:true, showQuickJumper:true,
bordered:false bordered:false
}"> }">
<template v-slot:action="{record, index}" > <template #bodyCell="{ column, text, record ,index}">
<div class="operate_list"> <div class="operate_list" v-if="column.title === 'Operations'">
<div class="operate_item" @click="turnToDetail(record)">Detail</div> <div class="operate_item" @click="turnToDetail(record)">Detail</div>
<div class="operate_item" @click="renameCollection(record,index)">Rename</div> <div class="operate_item" @click="renameCollection(record,index)">Rename</div>
<div class="operate_item" @click="retrieveHome(record)">Retrieve</div> <div class="operate_item" @click="retrieveHome(record)">Retrieve</div>
<div class="operate_item" @click="deleteGroup(record, index)">Delete</div> <div class="operate_item" @click="deleteGroup(record, index)">Delete</div>
</div> </div>
</template> </template>
</a-table> </a-table>
</div> </div>
</div> </div>
@@ -95,7 +95,7 @@ export default defineComponent({
align:'center', align:'center',
fixed: 'right', fixed: 'right',
width: 150, width: 150,
slots:{customRender:'action'} // slots:{customRender:'action'}
}, },
]); ]);
let collectionList:any = ref([]) let collectionList:any = ref([])
@@ -228,6 +228,10 @@ export default defineComponent({
height: 100%; height: 100%;
padding: 0 9rem; padding: 0 9rem;
overflow: hidden; overflow: hidden;
min-width: 1024px;
position: relative;
left: 50%;
transform: translateX(-50%);
.page_content { .page_content {
position: relative; position: relative;

20
src/views/HomeView.vue
View File

@@ -922,6 +922,7 @@ export default defineComponent({
//通过url 转为blob格式的数据 //通过url 转为blob格式的数据
getImgArrayBuffer(url: any) { getImgArrayBuffer(url: any) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
//通过请求获取文件blob格式 //通过请求获取文件blob格式
let xmlhttp = new XMLHttpRequest(); let xmlhttp = new XMLHttpRequest();
@@ -963,7 +964,7 @@ export default defineComponent({
}); });
}) })
.catch((res) => { .catch((res) => {
_this.message.warning("Failed to export the file"); message.warning("Failed to export the file");
this.isShowMark = false; this.isShowMark = false;
}); });
}, },
@@ -976,6 +977,11 @@ export default defineComponent({
height: 100%; height: 100%;
padding: 0 9rem; padding: 0 9rem;
overflow: hidden; overflow: hidden;
min-width: 1024px;
position: relative;
// left: 50%;
// margin-left: -50%;
// transform: translateX(-50%);
.page_content { .page_content {
position: relative; position: relative;
.page_content_body { .page_content_body {
@@ -1012,7 +1018,7 @@ export default defineComponent({
position: relative; position: relative;
background: #f7f8fa; background: #f7f8fa;
border: 1px solid #f2f2f9; border: 1px solid #f2f2f9;
border-radius: 10px; border-radius: 2rem;
overflow: hidden; overflow: hidden;
.home_null_icon { .home_null_icon {
@@ -1141,7 +1147,7 @@ export default defineComponent({
.right_content_img_block { .right_content_img_block {
// overflow-y: auto; // overflow-y: auto;
background: #f6f6fa; background: #f6f6fa;
border-radius: 1rem; border-radius: 2rem;
height: 100%; height: 100%;
display: flex; display: flex;
width: auto; width: auto;
@@ -1271,6 +1277,7 @@ export default defineComponent({
.ant-modal-mask{ .ant-modal-mask{
background: linear-gradient(45deg, #eee4f3, #f3f4e6); background: linear-gradient(45deg, #eee4f3, #f3f4e6);
min-width: 1024px;
border-radius: 1rem; border-radius: 1rem;
overflow: hidden; overflow: hidden;
height: calc(100% - 7rem); height: calc(100% - 7rem);
@@ -1280,6 +1287,13 @@ export default defineComponent({
} }
.ant-modal-centered{ .ant-modal-centered{
top: 7rem; top: 7rem;
min-width: 1024px;
// left: 50%;
// margin-left: -50%;
.ant-modal{
min-width: .65*1024px;
}
} }
} }

707
src/views/LibraryPage.vue
View File

@@ -1,37 +1,40 @@
<template> <template>
<div class="library_page"> <div class="library_page">
<div class="page_content"> <div class="page_content">
<img <!-- <img
class="page_content_bg" class="page_content_bg"
src="@/assets/images/homePage/bg.png" src="@/assets/images/homePage/bg.png"
/> /> -->
<div class="page_content_body"> <div class="page_content_body">
<HeaderComponent></HeaderComponent> <HeaderComponent></HeaderComponent>
<div class="library_page_body"> <div class="library_page_body">
<div class="library_body_left"> <div class="library_body_left">
<div class="library_menu_list" v-for="(menu,index) in menuList" :key="menu.title"> <div>
<div :class="['menu_item', selectCode==menu.code ? 'select_menu_item' :'']" @click="selectMenuItem(menu,index)"> <div class="library_menu_list" v-for="(menu,index) in menuList" :key="menu.title">
<div class="menu_item_left"> <div :class="['menu_item', selectCode==menu.code ? 'select_menu_item' :'']" @click="selectMenuItem(menu,index)">
<div :class="['icon','iconfont',menu.icon,'type_icon']"></div> <div class="menu_item_left">
<div>{{menu.title}}</div> <i :class="[menu.icon]"></i>
</div> <div>{{menu.title}}</div>
<div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div> </div>
</div> <div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div>
<div v-show="menu.showChildren && menu.children.length"> </div>
<div :class="['menu_item','child_menu_item', selectCode==child.code ? 'select_menu_item' :'']" v-for="child in menu.children" :key="child.title" @click="selectMenuItem(child,index)"> <div v-show="menu.showChildren && menu.children.length">
{{child.title}} <div :class="['menu_item','child_menu_item', selectCode==child.code ? 'select_menu_item' :'']" v-for="child in menu.children" :key="child.title" @click="selectMenuItem(child,index)">
</div> {{child.title}}
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<div class="library_body_right"> <div class="library_body_right">
<div class="library_right_header"> <div class="library_right_header">
<div class="library_header_left"> <div class="library_header_left">
<div class="header_operate_item operate_select"> <div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
<a-upload <a-upload
v-show="uploadGenerate == 'Upload'"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:customRequest="selectCode != 'Models' ? customRequest : function(){}" :customRequest="customRequest "
:multiple="selectCode != 'Models'" :multiple="selectCode != 'Models'"
:maxCount="15" :maxCount="15"
accept=".jpg,.png,.jpeg,.bmp" accept=".jpg,.png,.jpeg,.bmp"
@@ -39,15 +42,9 @@
> >
<div>Upload</div> <div>Upload</div>
</a-upload> </a-upload>
<div v-show="uploadGenerate != 'Upload'">Upload</div>
</div> </div>
<div v-show="selectCode != 'Models'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">Generate</div>
<div :class="['header_operate_item',selectImgList.length>0?'operate_select':'']" @click="deleteBatchPic()">Delete</div>
<div :class="['header_operate_item',selectImgList.length>0?'operate_select':'']" @click="showRenameModal('','batch')">Rename</div>
<div class="content_search_block">
<input class="search_input" placeholder="Search by your style code" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
</div> </div>
<div class="librart_headr_right"> <div class="librart_headr_right">
@@ -83,8 +80,20 @@
</div> </div>
<div class="libray_right_content"> <div class="libray_right_content">
<div class="right_content_body"> <div class="right_content_body" v-show="uploadGenerate =='Upload'">
<div class="content_body_header"> <div class="content_body_header">
<div class="content_body_header_left">
<div class="content_body_header_right">
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">Delete</div>
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">Rename</div>
</div>
<div class="content_search_block">
<input class="search_input" placeholder="Search by your style code" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<!-- <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div> -->
<div class="generage_btn search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
</div>
<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()"> <div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div> <div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
<div>all</div> <div>all</div>
@@ -128,6 +137,131 @@
/> />
</div> </div>
</div> </div>
<div class="right_content_body" v-show="uploadGenerate !='Upload'">
<div class="content_body_header content_body_header_generate">
<div class="content_body_header_right">
<div class="checkboxItem">
<label>
<input
type="checkbox"
v-model="checkbox[0].type"
@click="setKeyword(0)"
/>
<span>Image Only</span>
</label>
</div>
<div class="checkboxItem">
<label>
<input
type="checkbox"
v-model="checkbox[1].type"
@click="setKeyword(1)"
/>
<span>Text Only</span>
</label>
</div>
<div class="checkboxItem">
<label>
<input
type="checkbox"
v-model="checkbox[2].type"
@click="setKeyword(2)"
/>
<span>Text-Image</span>
</label>
</div>
</div>
<div class="input_box" :class="{active:inputShow}">
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" placeholder="Promopt input" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
</div>
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in selectGenerateList"
:key="file"
:class="[file?.checked?'active':'']"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div class="upload_file_item_content" @click.stop="setSketchboardItem(file)" v-show="file?.status === 'done'">
<img :src="file?.imgUrl" class="upload_img" />
<div class="delete_file_block rightTop" @click="deleteFile(index)" >
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
<div
class="upload_component upload_file_item"
v-show="selectGenerateList.length <= 3"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:before-upload="beforeUpload"
:disabled="checkbox[1].type"
:data="{
...upload
}"
:headers="{Authorization:token}"
v-model:file-list="selectGenerateList"
multiple
accept=".jpg,.png,.jpeg,.bmp"
@change="generateFileUploadChange"
>
<div class="upload_tip_block">
<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="content_body_table scroll_style">
<div class="content_img_item" v-for="(img,index) in imgList" :key="img.id" @click="selectImgItem(img)">
<div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
<img v-lazy="img.url" :key="img.url" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']"/>
<div class="img_item_hover">
<div class="img_operate_content">
<div class="img_operate_block" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
<span class="icon iconfont icon-tianxie operate_icon"></span>
</div>
<div class="img_operate_block" @click.stop="showRenameModal(img,'single')">
<span class="icon iconfont icon-zhongmingming operate_icon"></span>
</div>
<div class="img_operate_block" @click.stop="deleteSinglePic(img,index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
</div>
<div class="content_img_name">{{img.name}}</div>
</div>
<div class="no_data_block" v-show="!imgList.length && !isShowMark">
<img src="@/assets/images/homePage/null_img.png">
</div>
</div>
<div class="table_pagination" v-show="imgList.length">
<a-pagination
v-model:current="currentPage"
v-model:pageSize="pageSize"
:total="total"
:showQuickJumper="true"
:showSizeChanger="false"
@change="changePage"
/>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -167,7 +301,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent ,ref,createVNode} from 'vue' import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,h ,ref,createVNode,nextTick} from 'vue'
import HeaderComponent from "@/component/HomePage/Header.vue"; import HeaderComponent from "@/component/HomePage/Header.vue";
import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue'; import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
import ModelPlacementMobile from '@/component/LibraryPage/ModelPlacementMobile.vue'; import ModelPlacementMobile from '@/component/LibraryPage/ModelPlacementMobile.vue';
@@ -177,6 +312,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {getUploadUrl,isMoible} from '@/tool/util' import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex"; import { useStore } from "vuex";
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie";
export default defineComponent({ export default defineComponent({
components: { components: {
HeaderComponent, HeaderComponent,
@@ -186,18 +322,19 @@ export default defineComponent({
}, },
setup() { setup() {
let menuList = ref([ let menuList = ref([
{title:'Moodboard',code:'Moodboard',icon:'icon-moban',showChildren:false,children:[]}, {title:'Moodboard',code:'Moodboard',icon:'fi fi-rr-grid',showChildren:false,children:[]},
{title:'Printboard',code:'Printboard',icon:'icon-dayin-dayinji',showChildren:false,children:[]}, {title:'Prints',code:'Printboard',icon:'fi fi-rs-objects-column',showChildren:false,children:[]},
{title:'Sketchboard',code:'SketchboardFirst',icon:'icon-sumiao',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]}, // {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
{title:'Sketches',code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
// {title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]}, // {title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
{title:'Mannequin',code:'Models',icon:'icon-mote',showChildren:false,children:[]}, {title:'Mannequins',code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
]) ])
let selectImgList:any = ref([]) let selectImgList:any = ref([])
let selectCode:any = ref('Moodboard') let selectCode:any = ref('Moodboard')
let searchPictureName = ref('') let searchPictureName = ref('')
let designType:any = ref('Outwear') let designType:any = ref('Outwear')
let sex:any = ref('Outwear') let sex:any = ref('Meal')
let sexList:any = [ let sexList:any = [
] ]
@@ -216,6 +353,27 @@ export default defineComponent({
let isShowMark:any = ref(false) //蒙层 let isShowMark:any = ref(false) //蒙层
let selectSingleImg:any = ref({}) //保存单个图片数据 let selectSingleImg:any = ref({}) //保存单个图片数据
let store = useStore(); let store = useStore();
let uploadGenerate:any = ref('Upload')
let checkbox = ref([
{
name: "image",
type: false,
},
{
name: "text",
type: true,
},
{
name: "text-image",
type: false,
},
]);
let inputShow = ref(false)
let generateCheckbox:any = ref()
let captionGeneration:any = ref()
let inputTime = ref()
let generateList:any = ref([])
let selectGenerateList:any = ref([])
return { return {
menuList, menuList,
selectImgList, selectImgList,
@@ -236,13 +394,40 @@ export default defineComponent({
currentUploadFileNum, currentUploadFileNum,
isShowMark, isShowMark,
selectSingleImg, selectSingleImg,
store store,
uploadGenerate,
checkbox,
inputShow,
generateCheckbox,
captionGeneration,
inputTime,
generateList,
selectGenerateList,
} }
},
data(this_) {
console.log(this_);
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
upload: {
isPin: 0,
level1Type: this_.selectCode,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
};
}, },
async mounted(){ async mounted(){
this.uploadUrl = getUploadUrl() this.uploadUrl = getUploadUrl()
this.getLibraryList() this.getLibraryList()
this.getSex() this.getSex()
this.token = getCookie("token") || "";
}, },
methods:{ methods:{
@@ -291,6 +476,7 @@ export default defineComponent({
menu.showChildren = !menu.showChildren menu.showChildren = !menu.showChildren
}else{ }else{
this.selectCode = menu.code this.selectCode = menu.code
this.upload.level1Type = menu.code
this.currentPage = 1, this.currentPage = 1,
this.total = 0, this.total = 0,
this.searchPictureName = '' this.searchPictureName = ''
@@ -300,6 +486,9 @@ export default defineComponent({
this.selectImgList = [] this.selectImgList = []
this.selectSingleImg = {} this.selectSingleImg = {}
this.getLibraryList() this.getLibraryList()
this.uploadGenerate = 'Upload'
this.captionGeneration = ''
this.selectGenerateList = []
} }
}, },
@@ -397,7 +586,16 @@ export default defineComponent({
this.renameType = type this.renameType = type
this.renameVisivle = true this.renameVisivle = true
}, },
upLoad(){
},
uploadGenerateOpen(str:any){
if(this.uploadGenerate == str){
this.uploadGenerate = str
}else{
this.uploadGenerate = str
}
},
//删除单个图片 //删除单个图片
deleteSinglePic(data:any,index:any){ deleteSinglePic(data:any,index:any){
let _this = this let _this = this
@@ -459,30 +657,41 @@ export default defineComponent({
if (!isLt2M) { if (!isLt2M) {
message.warning('Image must smaller than 2MB!'); message.warning('Image must smaller than 2MB!');
} }
this.currentUploadFileNum = fileList.length if(isJpgOrPng && isLt2M){
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE; this.currentUploadFileNum = fileList.length
}else{
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}
}, },
customRequest(event:any){ customRequest(event:any){
if(this.selectCode == "Models"){
return
}
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : '' let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : ''
let new_data = { let new_data = {
file:event.file, file:event.file,
level1Type:this.selectCode, level1Type:this.selectCode,
level2Type:designType, level2Type:designType,
sex:this.sex, sex:this.selectCode == 'Models' ? this.sex:'',
modelType:'', modelType:'',
checkMd5:1,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
} }
this.isShowMark = true this.isShowMark = true
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then( Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => { (rv: any) => {
this.currentUploadFileNum -- if(!rv.checkMd5){
if(!this.currentUploadFileNum){ this.affirmCstomRequest(new_data)
this.getLibraryList() }else{
} this.currentUploadFileNum --
if(!this.currentUploadFileNum){
this.getLibraryList()
}
}
} }
).catch((res)=>{ ).catch((res)=>{
this.currentUploadFileNum -- this.currentUploadFileNum --
@@ -491,7 +700,39 @@ export default defineComponent({
} }
}); });
}, },
affirmCstomRequest(data:any){
let _this = this
Modal.confirm({
title: 'This picture has been uploaded whether to continue uploading？ ',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
onOk() {
data.checkMd5 = 0
Https.axiosPost(Https.httpUrls.libraryUpload, data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
_this.currentUploadFileNum --
if(!_this.currentUploadFileNum){
_this.getLibraryList()
}
}
).catch((res)=>{
_this.currentUploadFileNum --
if(!_this.currentUploadFileNum){
_this.getLibraryList()
}
});
},
onCancel(){
_this.currentUploadFileNum --
if(!_this.currentUploadFileNum){
_this.getLibraryList()
}
}
});
},
getLibraryList(){ getLibraryList(){
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : '' let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : ''
let data = { let data = {
@@ -528,7 +769,130 @@ export default defineComponent({
let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
placementModal.showPlacementModal(data) placementModal.showPlacementModal(data)
}, },
//generate
setKeyword(num: any) {
this.checkbox.forEach((v: any) => {
v.type = false;
});
nextTick().then(()=>{
this.checkbox[num].type = true
if(this.checkbox[1].type){
this.selectGenerateList.forEach((v:any)=>{
v.checked = false
})
}
})
},
ifMaximumLength(){
clearTimeout(this.inputTime)
this.inputTime = setTimeout(()=>{
if(this.captionGeneration.split(/\s+/).length > 75){
this.inputShow = true
}else{
this.inputShow = false
}
},500)
},
generateFileUploadChange(data:any){
let file = data.file;
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
file.id = res.data.id;
file.imgUrl = res.data.url;
file.resData = res.data;
file.type_ = "upload";
} else if (file.status === "error") {
let index = -1;
this.selectGenerateList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.selectGenerateList.splice(index, 1);
}
message.error(file.name + "upload failed");
}
},
deleteFile(index: any) {
this.selectGenerateList.splice(index, 1);
},
setSketchboardItem(item:any){
if(this.checkbox[1].type){
return
}
if(item.checked){
item.checked = false
}else{
this.selectGenerateList.forEach((v:any)=>{
if(v.checked){
v.checked = false
}
})
item.checked = true
}
},
getgenerate(){
let generateType = this.checkbox.filter((v:any)=>v.type)[0].name
let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
let data = {
generateType:generateType,
designType:'',
collectionElementId:generageImg.id,
level1Type:this.selectCode,
level2Type:this.selectCode == 'Sketchboard'?this.designType:'',
text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:2,//为1就是Print
gender:this.selectCode == 'Sketchboard'?this.sex:'',
}
if(generateType == 'image'||generateType == 'text-image'){
if(generageImg.id){
}else{
message.warning(
"Please select a picture"
);
return
}
}else if(generateType == 'text'){
data.collectionElementId = ''
data.level2Type = ''
// this.beforeUpload(false)
if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 75){
message.warning(
"The entered content exceeds the maximum length."
);
return
}
}else{
message.warning(
"Please enter content"
);
return
}
}
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
(rv) => {
if(rv){
this.generateList = []
let arr
rv.generatedCollectionItems.forEach((v:any,index:number)=>{
arr = {
id:rv.generatedCollectionItems[index].generateItemId,
imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
}
this.generateList.push(arr)
})
}
}
).catch(res=>{
});
},
} }
}) })
</script> </script>
@@ -538,6 +902,10 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
padding: 0 9rem; padding: 0 9rem;
min-width: 1024px;
position: relative;
left: 50%;
transform: translateX(-50%);
.page_content { .page_content {
position: relative; position: relative;
@@ -552,39 +920,53 @@ export default defineComponent({
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex-direction: column;
.library_page_body{ .library_page_body{
width: 100%; width: 100%;
height: calc(100% - 7rem); // height: calc(100% - 7rem);
flex: 1;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
padding-top: 2rem;
.library_body_left{ .library_body_left{
width: 23.5rem; width: 23.5rem;
height: 100%; height: 100%;
background: rgba(255,255,255,0.4); background: rgba(255,255,255,0.4);
margin-right: 8rem;
>div{
background: #f7f8fa;
border-radius: 2rem;
overflow: hidden;
padding: 2rem 0;
}
.library_menu_list{ .library_menu_list{
padding-left: 2rem;
.menu_item{ .menu_item{
width: 100%; width: 100%;
height: 6.8rem; height: 6.8rem;
display: flex; display: flex;
font-weight: 900;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 1rem 0 2.5rem; padding: 0 1rem 0 2.5rem;
border-left: 0.5rem solid transparent; border-left: 0.5rem solid transparent;
font-size: 1.8rem; font-size: 1.6rem;
color: #030303; color: #030303;
cursor: pointer; cursor: pointer;
transition: all .3s;
&.child_menu_item{ &.child_menu_item{
padding-left: 6.5rem; padding-left: 6.5rem;
} }
&.select_menu_item{ &.select_menu_item{
background: #E6E6F6; background: #fff;
border-color: #343579;; border-radius: 2rem;
transform: translateX(2rem);
// background: #E6E6F6;
// border-color: #343579;;
} }
.menu_item_left{ .menu_item_left{
@@ -592,8 +974,9 @@ export default defineComponent({
align-items: center; align-items: center;
user-select: none; user-select: none;
.type_icon{ .fi{
font-size: 2.2rem; font-size: 2.2rem;
display: flex;
color: #030303; color: #030303;
margin-right: 1.8rem; margin-right: 1.8rem;
} }
@@ -613,6 +996,80 @@ export default defineComponent({
width: calc(100% - 23.5rem); width: calc(100% - 23.5rem);
height: 100%; height: 100%;
.header_operate_item{
margin-right: 5rem;
color: #C2C2C2;
font-size: 1.6rem;
.ant-upload{
font-size: 1.6rem;
// font-weight: 900;
}
.ant-upload-list-text{
display: none;
}
&.operate_select{
color:#333333;
cursor: pointer;
font-weight: 900;
}
&.fontSize{
font-size: 1.4rem;
}
&.active{
color:#333333;
cursor: pointer;
}
&.pointer{
cursor: pointer;
}
&:last-child{
margin-right: 11rem;
}
}
.content_search_block{
display: flex;
align-items: center;
.search_input{
// width: 20.8rem;
// padding-left: 1.5rem;
// height: 2.8rem;
// line-height: 3.6rem;
// background: #FFFFFF;
// border: 0.1rem solid #F1F1F1;
// font-size: 1.6rem;
// font-weight: 400;
height: 3rem;
border-radius: 0.5rem;
width: 30rem;
border: 1px solid rgba(0, 0, 0, 0.15);
padding-left: 1.5rem;
border: 0.1rem solid #F1F1F1;
font-size: 1.2rem;
font-weight: 400;
&::placeholder {
color: #C2C2C2;
}
}
.search_icon_block{
width: 5.2rem;
height: 2.8rem;
line-height: 2.8rem;
text-align: center;
background: #343579;
background-color: #39215b;
cursor: pointer;
border-radius: 2rem;
margin-left: 3rem;
.icon-sousuo{
font-size: 1.6rem;
color: #FFFFFF;
}
}
}
.library_right_header{ .library_right_header{
display: flex; display: flex;
padding: 0 3.5rem 0 2.8rem; padding: 0 3.5rem 0 2.8rem;
@@ -622,64 +1079,15 @@ export default defineComponent({
box-shadow: 0 0.2rem 0.8rem 0 rgba(238,238,244,0.25); box-shadow: 0 0.2rem 0.8rem 0 rgba(238,238,244,0.25);
.library_header_left{ .library_header_left{
height: 8rem; height: 4rem;
display: flex; display: flex;
align-items: center; align-items: center;
.header_operate_item{
margin-right: 5rem;
color: #C2C2C2;
font-size: 1.6rem;
.ant-upload-list-text{
display: none;
}
&.operate_select{
color:#333333;
cursor: pointer;
}
&:last-child{
margin-right: 11rem;
}
}
.content_search_block{
margin-left: 4rem;
display: flex;
.search_input{
width: 32.8rem;
padding-left: 1.5rem;
height: 4.8rem;
line-height: 4.6rem;
background: #FFFFFF;
border: 0.1rem solid #F1F1F1;
font-size: 1.6rem;
font-weight: 400;
&::placeholder {
color: #C2C2C2;
}
}
.search_icon_block{
width: 7.2rem;
height: 4.8rem;
line-height: 4.8rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo{
font-size: 2rem;
color: #FFFFFF;
}
}
}
} }
.librart_headr_right{ .librart_headr_right{
display: flex; display: flex;
align-items: center; align-items: center;
@@ -687,6 +1095,9 @@ export default defineComponent({
.select_block{ .select_block{
// background: #FFFFFF; // background: #FFFFFF;
color: #1A1A1A !important; color: #1A1A1A !important;
.ant-select-selector{
border: 2px solid !important;
}
.ant-select{ .ant-select{
.ant-select-arrow{ .ant-select-arrow{
.icon-xiala{ .icon-xiala{
@@ -711,15 +1122,28 @@ export default defineComponent({
.right_content_body{ .right_content_body{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(246,246,250,0.4); background: #f6f5fa;
padding: 0 2rem 5rem 1rem; padding: 0 2rem 5rem 1rem;
border-radius: 2rem;
overflow: hidden;
display: flex;
flex-direction: column;
.content_body_header{ .content_body_header{
height: 7.5rem; height: 10rem;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
// padding: 2rem 0 2rem 3rem;
padding-left: 3rem;
box-sizing: content-box;
justify-content: space-between;
.content_body_header_left{
display: flex;
}
.content_body_header_right{
display: flex;
width: 40rem;
}
.check_all_block{ .check_all_block{
display: flex; display: flex;
align-items: center; align-items: center;
@@ -746,29 +1170,83 @@ export default defineComponent({
} }
} }
} }
&.content_body_header_generate{
justify-content: flex-start;
.checkboxItem {
margin-right: 4rem;
label {
display: flex;
cursor: pointer;
input {
margin-right: 0.5rem;
padding-left: 1.5rem;
}
span {
font-size: 1.4rem;
font-weight: 500;
}
}
}
.input_box{
background:initial;
padding: 1.5rem 0;
input{
width: 30rem;
height: 3rem;
&.active{
cursor: no-drop;
}
}
.generage_btn{
margin-left: 3rem;
}
}
.upload_item{
margin-left: 4rem;
.upload_file_item{
width: 8rem;
height: 8rem;
margin: 0;
margin-right: 2rem;
}
.upload_component{
margin: 0;
}
}
}
} }
.content_body_table{ .content_body_table{
width: 100%; width: 100%;
height: calc(100% - 12rem); height: calc(100% - 12rem);
overflow-y:auto; overflow-y:auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
.content_img_item{ .content_img_item{
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
padding: 0 1.4rem; padding: 0 1.4rem;
margin-bottom: 2.8rem; margin-bottom: 2.8rem;
width: 16.6%;
display: flex;
flex-direction: column;
align-items: center;
.content_img_item_block{ .content_img_item_block{
border: 0.1rem solid transparent; border: 0.1rem solid transparent;
width: 16.5rem; // width: 16.5rem;
height: 16.5rem; // height: 16.5rem;
width: 17rem;
height: 17rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
background: #fff;
&.select_item_img{ &.select_item_img{
border-color: #343579; border-color: #343579;
} }
@@ -844,6 +1322,7 @@ export default defineComponent({
.table_pagination{ .table_pagination{
text-align: center; text-align: center;
margin-top: 2rem; margin-top: 2rem;
flex: 1;
} }
} }
} }