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

修改页面detail和coll字体以及比例

Browse Source
This commit is contained in:
X1627315083
2024-01-10 14:09:44 +08:00
parent 59c5e59347
commit 46a02478b6
35 changed files with 1191 additions and 1305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,10 +6,10 @@ body,
height: 100%; height: 100%;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
overflow: hidden; overflow: hidden;
--aida-fsize2: 2.2rem; --aida-fsize2: calc(2.2rem*1.2);
--aida-fsize1-8: 1.8rem; --aida-fsize1-8: calc(1.8rem*1.2);
--aida-fsize1-6: 1.6rem; --aida-fsize1-6: calc(1.6rem*1.2);
--aida-fsize1-4: 1.4rem; --aida-fsize1-4: calc(1.4rem*1.2);
} }
input { input {
outline: none; outline: none;
@@ -99,10 +99,10 @@ li {
padding: 0 1rem; padding: 0 1rem;
} }
.started_btn { .started_btn {
padding: 0.4rem 1.8rem; padding: calc(0.4rem*1.2) calc(1.8rem*1.2);
display: inline-block; display: inline-block;
border-radius: 2rem; border-radius: calc(2rem*1.2);
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
color: #fff; color: #fff;
background-color: #39215b; background-color: #39215b;
cursor: pointer; cursor: pointer;
@@ -593,7 +593,7 @@ li {
font-weight: 900; font-weight: 900;
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
align-items: center; align-items: center;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
} }
.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,
@@ -608,24 +608,24 @@ li {
.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 { .library_page .ant-upload.ant-upload-select-picture-card {
background: #FFFFFF; background: #FFFFFF;
width: 6rem; width: calc(6rem*1.2);
height: 6rem; height: calc(6rem*1.2);
border: 0.3rem solid #ededed; border: calc(0.3rem*1.2) solid #ededed;
border-radius: 1rem; border-radius: calc(1rem*1.2);
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 { .library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
font-size: 3.2rem; font-size: calc(3.2rem*1.2);
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 { .library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text {
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #B7B7B7; color: #B7B7B7;
} }
.collection_modal .ant-upload-list-picture-card-container, .collection_modal .ant-upload-list-picture-card-container,
@@ -706,19 +706,19 @@ i {
position: sticky; position: sticky;
top: 0; top: 0;
background: #fff; background: #fff;
padding-top: 2.5rem; padding-top: calc(2.5rem*1.2);
padding-bottom: 2rem; padding-bottom: calc(2rem*1.2);
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,
.library_page .input_box input { .library_page .input_box input {
border-radius: 0.5rem; border-radius: calc(0.5rem*1.2);
width: 70%; width: 70%;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
padding-left: 1.5rem; padding-left: calc(1.5rem*1.2);
border: 0.1rem solid #F1F1F1; border: calc(0.1rem*1.2) solid #F1F1F1;
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
font-weight: 400; font-weight: 400;
} }
.collection_modal_body .input_box inputinput:-moz-placeholder, .collection_modal_body .input_box inputinput:-moz-placeholder,
@@ -740,8 +740,8 @@ i {
.design_detail_modal_component .input_box span, .design_detail_modal_component .input_box span,
.library_page .input_box span { .library_page .input_box span {
position: absolute; position: absolute;
bottom: 0rem; bottom: calc(0rem*1.2);
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
color: red; color: red;
opacity: 0; opacity: 0;
transform: scale(0.7); transform: scale(0.7);
@@ -772,10 +772,10 @@ i {
.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 { .library_page .upload_item .upload_file_item {
margin: 0 2rem 2rem 0; margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
display: inline-block; display: inline-block;
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
@@ -785,7 +785,7 @@ i {
.design_detail_modal_component .upload_item .upload_file_item.active, .design_detail_modal_component .upload_item .upload_file_item.active,
.library_page .upload_item .upload_file_item.active { .library_page .upload_item .upload_file_item.active {
opacity: 0.5; opacity: 0.5;
border-radius: 1rem; border-radius: calc(1rem*1.2);
transform: scale(0.9); transform: scale(0.9);
} }
.collection_modal_body .upload_item .upload_file_item.active .delete_file_block, .collection_modal_body .upload_item .upload_file_item.active .delete_file_block,
@@ -817,10 +817,10 @@ i {
.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) { .library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
width: 6rem; width: calc(6rem*1.2);
height: 6rem; height: calc(6rem*1.2);
border: 0.3rem solid #ededed; border: calc(0.3rem*1.2) solid #ededed;
border-radius: 1rem; border-radius: calc(1rem*1.2);
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,
@@ -853,11 +853,11 @@ i {
display: none; display: none;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
height: 3rem; height: calc(3rem*1.2);
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #ffffff; color: #ffffff;
line-height: 3rem; line-height: calc(3rem*1.2);
text-align: center; text-align: center;
position: absolute; position: absolute;
left: 0; left: 0;
@@ -866,33 +866,33 @@ i {
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop, .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, .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop { .library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
width: 3.2rem; width: calc(3.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
border-radius: 0.4rem; border-radius: calc(0.4rem*1.2);
position: absolute; position: absolute;
top: 0.9rem; top: calc(0.9rem*1.2);
right: 0.9rem; right: calc(0.9rem*1.2);
text-align: center; text-align: center;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
left: auto; left: auto;
} }
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu, .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, .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu { .library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; 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 { .library_page .upload_item .upload_file_item .upload_img_icon {
width: 4.6rem; width: calc(4.6rem*1.2);
} }
.cut_pricture_modal .ant-modal-content { .cut_pricture_modal .ant-modal-content {
border-radius: 1rem; border-radius: 1rem;
} }
.cut_pricture_modal .ant-modal-body { .cut_pricture_modal .ant-modal-body {
height: calc(100rem*0.614); height: calc(65rem*1.2);
padding: 8rem 5rem !important; padding: 8rem 5rem !important;
overflow-y: hidden; overflow-y: hidden;
} }

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

@@ -6,10 +6,10 @@ html,body,#app{
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
overflow: hidden; overflow: hidden;
// --antd-wave-shadow-color: #341e57; // --antd-wave-shadow-color: #341e57;
--aida-fsize2: 2.2rem; --aida-fsize2: calc(2.2rem*1.2);
--aida-fsize1-8: 1.8rem; --aida-fsize1-8: calc(1.8rem*1.2);
--aida-fsize1-6: 1.6rem; --aida-fsize1-6: calc(1.6rem*1.2);
--aida-fsize1-4: 1.4rem; --aida-fsize1-4: calc(1.4rem*1.2);
} }
input{ input{
outline:none outline:none
@@ -109,10 +109,10 @@ ul,li{
} }
//started公共按钮样式 //started公共按钮样式
.started_btn{ .started_btn{
padding: .4rem 1.8rem; padding: calc(.4rem*1.2) calc(1.8rem*1.2);
display: inline-block; display: inline-block;
border-radius: 2rem; border-radius: calc(2rem*1.2);
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
color: #fff; color: #fff;
background-color: #39215b; background-color: #39215b;
cursor: pointer; cursor: pointer;
@@ -695,12 +695,6 @@ ul,li{
margin-top: 4rem; margin-top: 4rem;
} }
} }
.collection_modal,.design_detail_modal_component,.designOpenrtion_modal{
.ant-modal-content{
// transform: scale(1.2);
// transform-origin: center !important;
}
}
//collection 弹窗 //collection 弹窗
.collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{ .collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{
@@ -712,7 +706,7 @@ ul,li{
font-weight: 900; font-weight: 900;
color: rgba(0,0,0,.65); color: rgba(0,0,0,.65);
align-items: center; align-items: center;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
.design_title_text_intro{ .design_title_text_intro{
font-size: var(--aida-fsize1-4); font-size: var(--aida-fsize1-4);
font-weight: 400; font-weight: 400;
@@ -721,20 +715,20 @@ ul,li{
} }
.ant-upload.ant-upload-select-picture-card{ .ant-upload.ant-upload-select-picture-card{
background: #FFFFFF; background: #FFFFFF;
width: 6rem; width: calc(6rem*1.2);
height: 6rem; height: calc(6rem*1.2);
border: 0.3rem solid #ededed; border: calc(0.3rem*1.2) solid #ededed;
border-radius: 1rem; border-radius: calc(1rem*1.2);
margin: 0; margin: 0;
.upload_tip_block{ .upload_tip_block{
.icon-jiahao{ .icon-jiahao{
font-size: 3.2rem; font-size: calc(3.2rem*1.2);
color: #B7B7B7; color: #B7B7B7;
} }
} }
.ant-upload-text{ .ant-upload-text{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #B7B7B7; color: #B7B7B7;
} }
} }
@@ -814,16 +808,16 @@ i{
position: sticky; position: sticky;
top: 0; top: 0;
background: #fff; background: #fff;
padding-top: 2.5rem; padding-top: calc(2.5rem*1.2);
padding-bottom: 2rem; padding-bottom: calc(2rem*1.2);
z-index: 2; z-index: 2;
input{ input{
border-radius: .5rem; border-radius: calc(.5rem*1.2);
width: 70%; width: 70%;
border: 1px solid rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15);
padding-left: 1.5rem; padding-left: calc(1.5rem*1.2);
border: 0.1rem solid #F1F1F1; border: calc(0.1rem*1.2) solid #F1F1F1;
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
font-weight: 400; font-weight: 400;
&input:-moz-placeholder{ &input:-moz-placeholder{
color: rgba(0,0,0,.15); color: rgba(0,0,0,.15);
@@ -839,8 +833,8 @@ i{
} }
span{ span{
position: absolute; position: absolute;
bottom: 0rem; bottom: calc(0rem*1.2);
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
color: red; color: red;
opacity: 0; opacity: 0;
transform: scale(.7); transform: scale(.7);
@@ -866,12 +860,12 @@ i{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.upload_file_item { .upload_file_item {
margin: 0 2rem 2rem 0; margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
display: inline-block; display: inline-block;
// width: 16.5rem; // width: calc(16.5rem*1.2);
// height: 16.5rem; // height: calc(16.5rem*1.2);
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
@@ -880,7 +874,7 @@ i{
&.active { &.active {
opacity: 0.5; opacity: 0.5;
// border: 2px solid; // border: 2px solid;
border-radius: 1rem; border-radius: calc(1rem*1.2);
transform: scale(0.9); transform: scale(0.9);
.delete_file_block{ .delete_file_block{
pointer-events:none; pointer-events:none;
@@ -904,10 +898,10 @@ i{
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
:deep(.ant-upload-select-picture-card) { :deep(.ant-upload-select-picture-card) {
width: 6rem; width: calc(6rem*1.2);
height: 6rem; height: calc(6rem*1.2);
border: 0.3rem solid #ededed; border: calc(0.3rem*1.2) solid #ededed;
border-radius: 1rem; border-radius: calc(1rem*1.2);
margin: 0; margin: 0;
} }
.upload_file_item_content { .upload_file_item_content {
@@ -934,28 +928,28 @@ i{
display: none; display: none;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
height: 3rem; height: calc(3rem*1.2);
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #ffffff; color: #ffffff;
line-height: 3rem; line-height: calc(3rem*1.2);
text-align: center; text-align: center;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
&.rightTop { &.rightTop {
width: 3.2rem; width: calc(3.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
border-radius: 0.4rem; border-radius: calc(0.4rem*1.2);
position: absolute; position: absolute;
top: 0.9rem; top: calc(0.9rem*1.2);
right: 0.9rem; right: calc(0.9rem*1.2);
text-align: center; text-align: center;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
left: auto; left: auto;
.icon-shanchu { .icon-shanchu {
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; color: #fff;
} }
} }
@@ -963,7 +957,7 @@ i{
} }
.upload_img_icon { .upload_img_icon {
width: 4.6rem; width: calc(4.6rem*1.2);
} }
} }
} }
@@ -975,7 +969,7 @@ i{
border-radius: 1rem; border-radius: 1rem;
} }
.ant-modal-body{ .ant-modal-body{
height: calc(100rem*.614); height: calc(65rem*1.2);
padding: 8rem 5rem !important; padding: 8rem 5rem !important;
overflow-y: hidden; overflow-y: hidden;
} }

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

@@ -5,7 +5,7 @@
:class="[driver__.driver?'hideEvents':'']" :class="[driver__.driver?'hideEvents':'']"
v-model:visible="designDetailShow" v-model:visible="designDetailShow"
:footer="null" :footer="null"
width="65%" width="78%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:keyboard="false" :keyboard="false"
@@ -968,27 +968,27 @@ export default defineComponent({
// max-width: 1440px ; // max-width: 1440px ;
.ant-modal-content{ .ant-modal-content{
border-radius: 1rem; border-radius: calc(1rem*1.2);
// overflow: hidden; // overflow: hidden;
.ant-modal-header{ .ant-modal-header{
background-color: #fff; background-color: #fff;
border-bottom: none; border-bottom: none;
} }
.ant-modal-body{ .ant-modal-body{
padding: 4rem 5rem 0rem!important; padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem*1.2));
height: calc(100rem*.614); height: calc(65rem*1.2);
display: flex; display: flex;
overflow-y: hidden; overflow-y: hidden;
flex-direction: column; flex-direction: column;
} }
} }
.ant-modal-close{ .ant-modal-close{
width: 3.6rem; width: calc(3.6rem*1.2);
height: 3.6rem; height: calc(3.6rem*1.2);
position: absolute; position: absolute;
top: -1.8rem; top: calc(-1.8rem*1.2);
right: -1.8rem; right: calc(-1.8rem*1.2);
} }
.ant-modal-header{ .ant-modal-header{
@@ -999,26 +999,26 @@ export default defineComponent({
.turn_button{ .turn_button{
width: 3.6rem; width: calc(3.6rem*1.2);
height: 3.6rem; height: calc(3.6rem*1.2);
background: #000000; background: #000000;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top: calc(50% - 1.8rem); top: calc(50% - calc(1.8rem*1.2));
cursor: pointer; cursor: pointer;
line-height: 3.6rem; line-height: calc(3.6rem*1.2);
text-align: center; text-align: center;
&.turn_left_button{ &.turn_left_button{
left: -8rem; left: calc(-8rem*1.2);
} }
&.turn_right_button{ &.turn_right_button{
right: -8rem; right: calc(-8rem*1.2);
} }
.icon_turn{ .icon_turn{
font-size: 2.4rem; font-size: calc(2.4rem*1.2);
color: #ffffff; color: #ffffff;
} }
} }
@@ -1031,11 +1031,11 @@ export default defineComponent({
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
// padding: 1.5rem 1rem 2.5rem; // padding: 1.5rem*1.2) 1rem*1.2) 2.5rem*1.2);
box-sizing: border-box; box-sizing: border-box;
.detail_modal_body_img{ .detail_modal_body_img{
overflow: hidden; overflow: hidden;
// width: 43.3rem; // width: 43.3rem*1.2);
width: 23%; width: 23%;
height: 100%; height: 100%;
background: #FFFFFF; background: #FFFFFF;
@@ -1054,7 +1054,7 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 3.4rem; font-size: calc(3.4rem*1.2);
} }
.detail_modal_body_nav{ .detail_modal_body_nav{
display: flex; display: flex;
@@ -1065,11 +1065,11 @@ export default defineComponent({
transform: translate(-50%,-120%); transform: translate(-50%,-120%);
transition: all .3s; transition: all .3s;
>div{ >div{
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin-left: .3rem; margin-left: calc(.3rem*1.2);
img{ img{
// width: 100%; // width: 100%;
height: 100%; height: 100%;
@@ -1085,7 +1085,7 @@ export default defineComponent({
} }
} }
>div:nth-child(1){ >div:nth-child(1){
margin-left: 0rem; margin-left: calc(0rem*1.2);
} }
} }
.detail_modal_item_front:last-child{ .detail_modal_item_front:last-child{
@@ -1147,7 +1147,7 @@ export default defineComponent({
} }
.subitOkPreviewBtn{ .subitOkPreviewBtn{
bottom: 2rem; bottom: calc(2rem*1.2);
z-index: 999; z-index: 999;
} }
.clothes_item_img_block{ .clothes_item_img_block{
@@ -1176,17 +1176,17 @@ export default defineComponent({
} }
&.fi-rr-edit{ &.fi-rr-edit{
left: 0; left: 0;
top: 3rem; top: calc(3rem*1.2);
transform: translateX(-120%); transform: translateX(-120%);
} }
&.fi-rr-trash{ &.fi-rr-trash{
left: 0; left: 0;
top: 6rem; top: calc(6rem*1.2);
transform: translateX(-120%); transform: translateX(-120%);
} }
&.fi-br-check{ &.fi-br-check{
left: 0; left: 0;
top: 6rem; top: calc(6rem*1.2);
transform: translateX(-120%); transform: translateX(-120%);
} }
&.fi-rr-copy{ &.fi-rr-copy{
@@ -1195,12 +1195,12 @@ export default defineComponent({
transform: translateX(120%); transform: translateX(120%);
} }
&.icon-fanchehui{ &.icon-fanchehui{
top: 6rem; top: calc(6rem*1.2);
right: 0; right: 0;
transform: translateX(120%); transform: translateX(120%);
} }
&.icon-chehui{ &.icon-chehui{
top: 3rem; top: calc(3rem*1.2);
right: 0; right: 0;
transform: translateX(120%); transform: translateX(120%);
} }
@@ -1255,7 +1255,7 @@ export default defineComponent({
} }
} }
.clothes_detail_item{ .clothes_detail_item{
// margin-bottom: 5rem; // margin-bottom: 5rem*1.2);
flex: 1; flex: 1;
.centent_div{ .centent_div{
display: flex; display: flex;
@@ -1272,16 +1272,16 @@ export default defineComponent({
} }
.clothes_item_header{ .clothes_item_header{
// height: 6.4rem; // height: 6.4rem*1.2);
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
display: flex; display: flex;
font-size: var(--aida-fsize1-8); font-size: var(--aida-fsize1-8);
color: #000000; color: #000000;
justify-content: space-between; justify-content: space-between;
.icon-dangqianweizhi{ .icon-dangqianweizhi{
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
color: #000000; color: #000000;
margin-right: 1rem; margin-right: calc(1rem*1.2);
} }
i{ i{
font-size: var(--aida-fsize1-8); font-size: var(--aida-fsize1-8);
@@ -1293,8 +1293,8 @@ export default defineComponent({
} }
} }
img{ img{
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
} }
&.clothes_detail_item_apparel{ &.clothes_detail_item_apparel{
img{ img{
@@ -1307,18 +1307,18 @@ export default defineComponent({
vertical-align: top; vertical-align: top;
border: 1px solid #ebe9e9; border: 1px solid #ebe9e9;
.color_content{ .color_content{
width: 8rem; width: calc(8rem*1.2);
height: 4rem; height: calc(4rem*1.2);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.color_content_body{ .color_content_body{
.color_des{ .color_des{
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
width: 8rem; width: calc(8rem*1.2);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@@ -1334,12 +1334,12 @@ export default defineComponent({
align-items: center; align-items: center;
justify-content: center; justify-content: center;
zoom: 3; zoom: 3;
margin: 1rem 0; margin: calc(1rem*1.2) 0;
} }
} }
&.subitOkPreviewBtn{ &.subitOkPreviewBtn{
position: relative; position: relative;
margin-top: 2rem; margin-top: calc(2rem*1.2);
} }
} }
} }
@@ -1355,13 +1355,13 @@ export default defineComponent({
.switch_type_item { .switch_type_item {
display: flex; display: flex;
align-items: center; align-items: center;
// padding: 0 2rem; // padding: 0 2rem*1.2);
height: 4rem; height: calc(4rem*1.2);
background: #fff; background: #fff;
border-radius: 0.8rem; border-radius: calc(0.8rem*1.2);
line-height: 4rem; line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8); font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem; // margin-right: 2.2rem*1.2);
color: #000; color: #000;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@@ -1374,10 +1374,10 @@ export default defineComponent({
content: ""; content: "";
display: block; display: block;
background: #000; background: #000;
height: .4rem; height: calc(.4rem*1.2);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: .6rem; bottom: calc(.6rem*1.2);
width: 0px; width: 0px;
transition: 0.3s all; transition: 0.3s all;
} }
@@ -1391,8 +1391,8 @@ export default defineComponent({
} }
.switch_icon { .switch_icon {
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
margin-right: 0.8rem; margin-right: calc(0.8rem*1.2);
} }
} }
} }
@@ -1408,7 +1408,7 @@ export default defineComponent({
&.design_detail_perview_second{ &.design_detail_perview_second{
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0.7rem 9.1rem 0.6rem; padding: calc(0.7rem*1.2) calc(9.1rem*1.2) calc(0.6rem*1.2);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -1430,13 +1430,13 @@ export default defineComponent({
.generate_button{ .generate_button{
position: absolute; position: absolute;
top: 0; top: 0;
right: -20.2rem; right: calc(-20.2rem*1.2);
padding: 0 1.5rem; padding: 0 calc(1.5rem*1.2);
text-align: center; text-align: center;
height: 3.6rem; height: calc(3.6rem*1.2);
line-height: 3.6rem; line-height: calc(3.6rem*1.2);
background: #343579; background: #343579;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
font-family: Roboto; font-family: Roboto;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
@@ -1456,22 +1456,22 @@ export default defineComponent({
display: none; display: none;
.img_operate_block{ .img_operate_block{
width: 3.6rem; width:calc(3.6rem*1.2);
height: 3.6rem; height: calc(3.6rem*1.2);
background: rgba(0,0,0,0.6); background: rgba(0,0,0,0.6);
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
right: 2.2rem; right: calc(2.2rem*1.2);
text-align: center; text-align: center;
line-height: 3.6rem; line-height: calc(3.6rem*1.2);
cursor: pointer; cursor: pointer;
&.delete_img_block{ &.delete_img_block{
top: 2rem; top: calc(2rem*1.2);
} }
.operate_icon{ .operate_icon{
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
color: #fff; color: #fff;
} }
} }

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

@@ -980,61 +980,18 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
} }
i{ i{
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
display: block; display: block;
} }
.detail_uploadLibrary{ .detail_uploadLibrary{
.switch_type_list { .switch_type_list {
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
margin-top: -1rem; margin-top: calc(-1rem*1.2);
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
justify-content: space-around; justify-content: space-around;
// .switch_type_item {
// display: flex;
// align-items: center;
// // padding: 0 2rem;
// height: 4rem;
// background: #fff;
// border-radius: 0.8rem;
// line-height: 4rem;
// font-size: 1.6rem;
// // margin-right: 2.2rem;
// color: #000;
// cursor: pointer;
// position: relative;
// text-align: center;
// transform-origin: left;
// transform: scale(1);
// transition: 0.3s all;
// &.switch_type_item::before {
// position: absolute;
// content: "";
// display: block;
// background: #000;
// height: .3rem;
// left: 50%;
// transform: translateX(-50%);
// bottom: .4rem;
// width: 0px;
// transition: 0.3s all;
// }
// &.select_swtich {
// color: #000;
// font-weight: 600;
// transform: scale(1.15);
// }
// &.select_swtich::before {
// width: 100%;
// }
// .switch_icon {
// font-size: 1.8rem;
// margin-right: 0.8rem;
// }
// }
} }
@@ -1042,19 +999,19 @@ export default defineComponent({
.detail_Library{ .detail_Library{
.content_search_block{ .content_search_block{
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
.search_input{ .search_input{
width: 15rem; width: calc(15rem*1.2);
padding-left: 1.5rem; padding-left: calc(1.5rem*1.2);
// height: 4rem; // height: 4rem*1.2);
// line-height: 3.8rem; // line-height: 3.8rem*1.2);
// background: #FFFFFF; // background: #FFFFFF;
border: 0.1rem solid #F1F1F1; border: calc(0.1rem*1.2) solid #F1F1F1;
// font-size: 1.6rem; // font-size: 1.6rem*1.2);
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
font-weight: 400; font-weight: 400;
height: 3rem; height: calc(3rem*1.2);
&::placeholder { &::placeholder {
color: #C2C2C2; color: #C2C2C2;
@@ -1062,15 +1019,15 @@ export default defineComponent({
} }
.search_icon_block{ .search_icon_block{
width: 5rem; width: calc(5rem*1.2);
height: 3rem; height: calc(3rem*1.2);
line-height: 3rem; line-height: calc(3rem*1.2);
text-align: center; text-align: center;
background: #343579; background: #343579;
cursor: pointer; cursor: pointer;
.icon-sousuo{ .icon-sousuo{
font-size: 2rem; font-size: calc(2rem*1.2);
color: #FFFFFF; color: #FFFFFF;
} }
} }
@@ -1079,7 +1036,7 @@ export default defineComponent({
.detail_Library_item,.detail_Upload_item{ .detail_Library_item,.detail_Upload_item{
width: 100%; width: 100%;
// height: calc(100% - 19rem); // height: calc(100% - 19rem*1.2));
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@@ -1095,7 +1052,7 @@ export default defineComponent({
} }
.operate_file_block{ .operate_file_block{
height: 1.5rem; height: calc(1.5rem*1.2);
.select_img_type{ .select_img_type{
line-height: 1; line-height: 1;
.select_category{ .select_category{
@@ -1106,7 +1063,7 @@ export default defineComponent({
} }
} }
.category_list{ .category_list{
margin-top: .1rem; margin-top: calc(.1rem*1.2);
.category_item{ .category_item{
zoom: .7; zoom: .7;
} }
@@ -1117,19 +1074,19 @@ export default defineComponent({
text-align: center; text-align: center;
width: 100%; width: 100%;
img{ img{
height: 10rem; height: calc(10rem*1.2);
} }
} }
.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*1.2);
// margin-bottom: 2.8rem; // margin-bottom: 2.8rem*1.2);
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
padding: 0; padding: 0;
// height: 9rem; // height: 9rem*1.2);
&.active{ &.active{
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
.pin_block{ .pin_block{
display: block; display: block;
} }
@@ -1138,9 +1095,9 @@ export default defineComponent({
display: none; display: none;
} }
.content_img_item_block{ .content_img_item_block{
// border: 0.1rem solid transparent; // border: 0.1rem*1.2) solid transparent;
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -1169,14 +1126,14 @@ export default defineComponent({
} }
} }
.content_img_name{ .content_img_name{
width: 16.5rem; width: calc(16.5rem*1.2);
height: 3.5rem; height: calc(3.5rem*1.2);
line-height: 3.5rem; line-height: calc(3.5rem*1.2);
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
color: #030303; color: #030303;
} }
} }
@@ -1191,9 +1148,9 @@ export default defineComponent({
.upload_file_item{ .upload_file_item{
margin: 0; margin: 0;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
width: 9rem; width: calc(9rem*1.2);
height: 9rem; height: calc(9rem*1.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -1216,18 +1173,18 @@ export default defineComponent({
} }
.delete_file_block{ .delete_file_block{
display: none; display: none;
width: 3.2rem; width: calc(3.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: rgba(0,0,0,0.6); background: rgba(0,0,0,0.6);
border-radius: 0.4rem; border-radius: calc(0.4rem*1.2);
position: absolute; position: absolute;
top: 0.9rem; top: calc(0.9rem*1.2);
right: 0.9rem; right: calc(0.9rem*1.2);
text-align: center; text-align: center;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
left: auto; left: auto;
.icon-shanchu{ .icon-shanchu{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; color: #fff;
} }
} }
@@ -1245,7 +1202,7 @@ export default defineComponent({
} }
.detail_color{ .detail_color{
// height: calc(100% - 5.4rem); // height: calc(100% - 5.4rem*1.2));
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@@ -1253,17 +1210,17 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
.right_content_line{ .right_content_line{
position: relative; position: relative;
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
.upload_right_header{ .upload_right_header{
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
margin-top: 1rem; margin-top: calc(1rem*1.2);
&.upload_right_header:nth-child(1){ &.upload_right_header:nth-child(1){
margin-top: 0; margin-top: 0;
} }
span{ span{
margin-left: 1rem; margin-left: calc(1rem*1.2);
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
color: #000000; color: #000000;
} }
} }
@@ -1274,18 +1231,18 @@ export default defineComponent({
display: none; display: none;
} }
.color_review_block{ .color_review_block{
margin-right: 4rem; margin-right: calc(4rem*1.2);
.color_review_content{ .color_review_content{
width: 16.5rem; width: calc(16.5rem*1.2);
height: 16.5rem; height: calc(16.5rem*1.2);
background: #FFFFFF; background: #FFFFFF;
border: 0.1rem solid #DCDCEC; border: calc(0.1rem*1.2) solid #DCDCEC;
} }
.pantong_name{ .pantong_name{
margin-top: 1rem; margin-top: calc(1rem*1.2);
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
font-weight: 400; font-weight: 400;
color: #030303; color: #030303;
text-align: left; text-align: left;
@@ -1293,27 +1250,27 @@ export default defineComponent({
} }
.clear_button{ .clear_button{
padding: 0 2.8rem; padding: 0 calc(2.8rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
background: #EFEEFF; background: #EFEEFF;
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
font-family: Roboto; font-family: Roboto;
color: #343579; color: #343579;
display: inline-block; display: inline-block;
margin-top: 1rem; margin-top: calc(1rem*1.2);
cursor: pointer; cursor: pointer;
} }
} }
.upload_file_item{ .upload_file_item{
// margin: 0 2rem 2rem 0; // margin: 0 2rem*1.2) 2rem*1.2) 0;
margin: 0; margin: 0;
display: inline-block; display: inline-block;
// width: 16.5rem; // width: 16.5rem*1.2);
// height: 16.5rem; // height: 16.5rem*1.2);
width: 6rem; width: calc(6rem*1.2);
height: 6rem; height: calc(6rem*1.2);
border: 1px solid #F5F5F5; border: 1px solid #F5F5F5;
vertical-align: top; vertical-align: top;
@@ -1340,11 +1297,11 @@ export default defineComponent({
.delete_file_block{ .delete_file_block{
display: none; display: none;
width: 100%; width: 100%;
height: 4rem; height: calc(4rem*1.2);
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #FFFFFF; color: #FFFFFF;
line-height: 4rem; line-height: calc(4rem*1.2);
text-align: center; text-align: center;
position: absolute; position: absolute;
left: 0; left: 0;
@@ -1354,7 +1311,7 @@ export default defineComponent({
} }
.upload_img_icon{ .upload_img_icon{
width: 4.6rem; width: calc(4.6rem*1.2);
} }
.upload_color{ .upload_color{
display: flex; display: flex;
@@ -1362,16 +1319,16 @@ export default defineComponent({
justify-content: flex-start; justify-content: flex-start;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 2rem; height: calc(2rem*1.2);
.upload_color_item{ .upload_color_item{
width: 2rem; width: calc(2rem*1.2);
height: 2rem; height: calc(2rem*1.2);
position: relative; position: relative;
cursor: pointer; cursor: pointer;
margin-right: 1rem; margin-right: calc(1rem*1.2);
.upload_color_item_bg{ .upload_color_item_bg{
width: 2rem; width: calc(2rem*1.2);
height: 2rem; height: calc(2rem*1.2);
} }
img{ img{
position: absolute; position: absolute;
@@ -1390,11 +1347,11 @@ export default defineComponent({
} }
} }
.color_setting_block{ .color_setting_block{
width: 17.5rem; width: calc(17.5rem*1.2);
margin: auto; margin: auto;
background: linear-gradient(70deg, #eee4f3, #f3f4e6); background: linear-gradient(70deg, #eee4f3, #f3f4e6);
border-radius: 1rem; border-radius: calc(1rem*1.2);
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);
@@ -1403,56 +1360,56 @@ export default defineComponent({
} }
.chrome_color{ .chrome_color{
width: 17.5rem; width: calc(17.5rem*1.2);
// height: 16.5rem; // height: 16.5rem*1.2);
overflow: hidden; overflow: hidden;
.vc-chrome-saturation-wrap{ .vc-chrome-saturation-wrap{
height: 100%; height: 100%;
width: 16rem; width: calc(16rem*1.2);
height: 16rem; height: calc(16rem*1.2);
max-height: 17rem; max-height: calc(17rem*1.2);
max-width: 17rem; max-width: calc(17rem*1.2);
margin: .7rem auto; margin: calc(.7rem*1.2) auto;
padding-bottom: 0; padding-bottom: 0;
} }
.vc-chrome-body{ .vc-chrome-body{
padding: 0; padding: 0;
width: 90%; width: 90%;
margin: 0.5rem auto; margin: calc(0.5rem*1.2) auto;
margin: 0 auto; margin: 0 auto;
background: rgba(0,0,0,0); background: rgba(0,0,0,0);
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
// display: none; // display: none;
.vc-chrome-fields-wrap{ .vc-chrome-fields-wrap{
margin-top: 5%; margin-top: 5%;
padding: 0; padding: 0;
position: relative; position: relative;
.vc-chrome-toggle-btn{ .vc-chrome-toggle-btn{
width: 3.2rem; width: calc(3.2rem*1.2);
.vc-chrome-toggle-icon{ .vc-chrome-toggle-icon{
height: auto; height: auto;
margin-right: -0.4rem; margin-right: calc(-0.4rem*1.2);
margin-top: 0rem; margin-top: calc(0rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
svg{ svg{
width: 2.4rem !important; width: calc(2.4rem*1.2) !important;
height: 2.4rem !important; height: calc(2.4rem*1.2) !important;
} }
} }
} }
.vc-chrome-fields{ .vc-chrome-fields{
.vc-chrome-field{ .vc-chrome-field{
padding-left: .6rem; padding-left: calc(.6rem*1.2);
} }
.vc-input__label{ .vc-input__label{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
} }
.vc-input__input{ .vc-input__input{
font-size: 1.1rem; font-size: calc(1.1rem*1.2);
height: 2.1rem; height: calc(2.1rem*1.2);
} }
} }
.ant-upload-list{ .ant-upload-list{
@@ -1463,24 +1420,24 @@ export default defineComponent({
// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg); // background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg); // background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg); // background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
background-size: 1.5rem; background-size: calc(1.5rem*1.2);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50%; background-position: 50%;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
width: 2.2rem; width: calc(2.2rem*1.2);
height: 2.2rem; height: calc(2.2rem*1.2);
padding: .7rem; padding: calc(.7rem*1.2);
border: 1px solid; border: 1px solid;
position: absolute; position: absolute;
bottom: -.5rem; bottom: calc(-.5rem*1.2);
right: .5rem; right: calc(.5rem*1.2);
border-radius: .5rem; border-radius: calc(.5rem*1.2);
} }
.vc-chrome-fields{ .vc-chrome-fields{
.vc-input__label{ .vc-input__label{
margin-top: 1rem; margin-top: calc(1rem*1.2);
} }
} }
.vc-chrome-fields:nth-child(2){ .vc-chrome-fields:nth-child(2){
@@ -1498,15 +1455,15 @@ export default defineComponent({
align-items: center; align-items: center;
flex-direction: row-reverse; flex-direction: row-reverse;
.vc-chrome-color-wrap{ .vc-chrome-color-wrap{
// width: 3.6rem; // width: 3.6rem*1.2);
margin-left: 2rem; margin-left: calc(2rem*1.2);
width: auto; width: auto;
.vc-chrome-active-color{ .vc-chrome-active-color{
border-radius: 50%; border-radius: 50%;
} }
.vc-chrome-active-color,.vc-checkerboard{ .vc-chrome-active-color,.vc-checkerboard{
width: 3rem; width: calc(3rem*1.2);
height: 3rem; height: calc(3rem*1.2);
} }
} }
.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{ .vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
@@ -1517,76 +1474,76 @@ export default defineComponent({
border-radius: 15px; border-radius: 15px;
overflow: hidden; overflow: hidden;
} }
height: 1rem; height: calc(1rem*1.2);
.vc-hue-picker{ .vc-hue-picker{
width: 1.4rem; width: calc(1.4rem*1.2);
height: 1.4rem; height: calc(1.4rem*1.2);
} }
.vc-alpha-picker{ .vc-alpha-picker{
width: 1.4rem; width: calc(1.4rem*1.2);
height: 1.4rem; height: calc(1.4rem*1.2);
transform: translate(-.6rem,-.4rem); transform: translate(calc(-.6rem*1.2),calc(-.4rem*1.2));
} }
} }
.vc-chrome-alpha-wrap{ .vc-chrome-alpha-wrap{
display: none; display: none;
} }
.vc-chrome-hue-wrap{ .vc-chrome-hue-wrap{
margin-bottom: .5rem; margin-bottom: calc(.5rem*1.2);
} }
} }
} }
.vc-chrome-saturation-wrap .vc-saturation-circle{ .vc-chrome-saturation-wrap .vc-saturation-circle{
width: 1rem; width: calc(1rem*1.2);
height: 1rem; height: calc(1rem*1.2);
} }
} }
.sileder_color{ .sileder_color{
margin-top:1.3rem; margin-top:calc(1.3rem*1.2);
.vc-slider-swatches{ .vc-slider-swatches{
display:none display:none
} }
.vc-slider-hue-warp { .vc-slider-hue-warp {
width: 16.5rem; width: calc(16.5rem*1.2);
height: 2.4rem; height: calc(2.4rem*1.2);
border-radius: 1.2rem; border-radius: calc(1.2rem*1.2);
overflow: hidden; overflow: hidden;
.vc-hue-picker{ .vc-hue-picker{
width: 1.4rem; width: calc(1.4rem*1.2);
height: 1.4rem; height: calc(1.4rem*1.2);
border-radius: 50%; border-radius: 50%;
transform: translate(-0.7rem, -0.2rem); transform: translate(calc(-0.7rem*1.2), calc(-0.2rem*1.2));
} }
} }
.vc-hue-pointer{ .vc-hue-pointer{
top: 0.5rem !important; top: calc(0.5rem*1.2) !important;
} }
} }
.color_block{ .color_block{
// margin-top: 1rem; // margin-top: 1rem*1.2);
// display: flex; // display: flex;
// justify-content: space-between; // justify-content: space-between;
// font-size: 1.6rem; // font-size: 1.6rem*1.2);
width: 100%; width: 100%;
padding: 0 5%; padding: 0 5%;
padding-bottom: 5%; padding-bottom: 5%;
margin: 0.5rem auto; margin: calc(0.5rem*1.2) auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.color_right{ .color_right{
width: 11rem; width: calc(11rem*1.2);
font-size: 1,2rem; font-size: calc(1,2rem*1.2);
color: #666666; color: #666666;
.color_rgb_block{ .color_rgb_block{
display: flex; display: flex;
.rgb_item{ .rgb_item{
margin-left: .2rem; margin-left: calc(.2rem*1.2);
} }
} }
} }
@@ -1600,15 +1557,15 @@ export default defineComponent({
align-items: center; align-items: center;
} }
.color_HEX_block,.color_rgb_block{ .color_HEX_block,.color_rgb_block{
padding: .2rem .5rem; padding: calc(.2rem*1.2) calc(.5rem*1.2);
box-shadow: inset 0 0 0 1px #ccc; box-shadow: inset 0 0 0 1px #ccc;
border-radius: .4rem; border-radius: calc(.4rem*1.2);
justify-content: space-around; justify-content: space-around;
text-transform:uppercase; text-transform:uppercase;
.color_block_bg{ .color_block_bg{
width: 1.5rem; width: calc(1.5rem*1.2);
height: 1.5rem; height: calc(1.5rem*1.2);
// margin-right: .5rem; // margin-right: .5rem*1.2);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
@@ -1624,13 +1581,13 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.get_color_input{ .get_color_input{
width: 15rem; width: calc(15rem*1.2);
height: 2.8rem; height: calc(2.8rem*1.2);
background: #FFFFFF; background: #FFFFFF;
border: 0.1rem solid #DCDCEC; border: calc(0.1rem*1.2) solid #DCDCEC;
padding: 1rem 1.3rem; padding: calc(1rem*1.2) calc(1.3rem*1.2);
box-sizing: border-box; box-sizing: border-box;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
text-align: left; text-align: left;
&::placeholder { &::placeholder {
@@ -1639,12 +1596,12 @@ export default defineComponent({
} }
.get_color_button{ .get_color_button{
padding: 0 .2rem; padding: 0 calc(.2rem*1.2);
height: 2.8rem; height: calc(2.8rem*1.2);
background: #EFEEFF; background: #EFEEFF;
display: inline-block; display: inline-block;
line-height: 3rem; line-height: calc(3rem*1.2);
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
color: #343579; color: #343579;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@@ -1653,8 +1610,8 @@ export default defineComponent({
justify-content: center; justify-content: center;
flex: 1; flex: 1;
.icon-huoquduixiang{ .icon-huoquduixiang{
margin-right: 0.5rem; margin-right: calc(0.5rem*1.2);
font-size: 2rem; font-size: calc(2rem*1.2);
color:#343579; color:#343579;
vertical-align: middle; vertical-align: middle;
} }
@@ -1668,7 +1625,7 @@ export default defineComponent({
} }
.upload_item{ .upload_item{
margin-bottom: .5rem; margin-bottom: calc(.5rem*1.2);
display: flex; display: flex;
justify-content: center; justify-content: center;
.ant-upload-picture-card-wrapper{ .ant-upload-picture-card-wrapper{
@@ -1676,11 +1633,11 @@ export default defineComponent({
display: flex; display: flex;
justify-content: center; justify-content: center;
.ant-upload-select-picture-card{ .ant-upload-select-picture-card{
// margin: 0 2rem 2rem 0; // margin: 0 2rem*1.2) 2rem*1.2) 0;
margin: 0; margin: 0;
display: inline-block; display: inline-block;
width: 6rem; width: calc(6rem*1.2);
height: 6rem; height: calc(6rem*1.2);
border: 1px solid #F5F5F5; border: 1px solid #F5F5F5;
vertical-align: top; vertical-align: top;
i{ i{

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

@@ -361,13 +361,13 @@ export default defineComponent({
.upload_title{ .upload_title{
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
margin-top: 1rem; margin-top: calc(1rem*1.2);
&.upload_title:nth-child(1){ &.upload_title:nth-child(1){
margin-top: 0; margin-top: 0;
} }
span{ span{
margin-left: 1rem; margin-left: calc(1rem*1.2);
font-size: var(--aida-fsize1-8); font-size: var(--aida-fsize1-8);
color: #000000; color: #000000;
} }
@@ -386,8 +386,8 @@ export default defineComponent({
max-height: 100%; max-height: 100%;
width: auto; width: auto;
height: auto; height: auto;
max-height: 35rem; max-height: calc(35rem*1.2);
margin-top: 2rem; margin-top: calc(2rem*1.2);
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;
} }
@@ -405,7 +405,7 @@ export default defineComponent({
.result_print{ .result_print{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 14rem; height: calc(14rem*1.2);
>div{ >div{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -420,24 +420,24 @@ export default defineComponent({
position: relative; position: relative;
img{ img{
width: auto; width: auto;
height: 8rem; height: calc(8rem*1.2);
margin: auto; margin: auto;
display: block; display: block;
} }
.delete_file_block{ .delete_file_block{
display: none; display: none;
width: 3.2rem; width: calc(3.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: rgba(0,0,0,0.6); background: rgba(0,0,0,0.6);
border-radius: 0.4rem; border-radius: calc(0.4rem*1.2);
position: absolute; position: absolute;
top: 0.9rem; top: calc(0.9rem*1.2);
right: 0.9rem; right: calc(0.9rem*1.2);
text-align: center; text-align: center;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
left: auto; left: auto;
.icon-shanchu{ .icon-shanchu{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; color: #fff;
} }
} }
@@ -451,9 +451,9 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
// margin: 2rem 0; // margin: 2rem*1.2) 0;
transform: scale(.8); transform: scale(.8);
// margin: 3rem 0; // margin: 3rem*1.2) 0;
.habit_Overal_Single_text { .habit_Overal_Single_text {
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
@@ -464,7 +464,7 @@ export default defineComponent({
} }
} }
:deep(.ant-switch) { :deep(.ant-switch) {
margin: 0 1rem; margin: 0 calc(1rem*1.2);
background-color: #efefef; background-color: #efefef;
} }
:deep(.ant-switch-checked) { :deep(.ant-switch-checked) {
@@ -472,14 +472,14 @@ export default defineComponent({
} }
} }
.habit_System_Designer { .habit_System_Designer {
margin-top: 4rem; margin-top: calc(4rem*1.2);
transform: scale(.8); transform: scale(.8);
:deep(.ant-slider-track), :deep(.ant-slider-track),
:deep(.ant-slider-rail) { :deep(.ant-slider-rail) {
height: .6rem; height: calc(.6rem*1.2);
background-color: #e1e1e1; background-color: #e1e1e1;
border-radius: 0.5rem; border-radius: calc(0.5rem*1.2);
} }
:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)), :deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
:deep(.ant-slider-handle) { :deep(.ant-slider-handle) {
@@ -498,20 +498,20 @@ export default defineComponent({
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 2rem; padding-left: calc(2rem*1.2);
&.modal_img::-webkit-scrollbar { &.modal_img::-webkit-scrollbar {
display: none; display: none;
} }
.modal_img_item{ .modal_img_item{
margin: 0 1rem 1rem 0; margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative; position: relative;
// cursor: pointer; // cursor: pointer;
border: 0.1rem solid #DCDCEC; border: calc(0.1rem*1.2) solid #DCDCEC;
//放8个 //放8个
height: 8.5rem; height: calc(8.5rem*1.2);
width: 7rem; width: calc(7rem*1.2);
// height: 32rem; // height: 32rem*1.2);
// width: 25rem; // width: 25rem*1.2);
overflow: hidden; overflow: hidden;
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
&.modal_img_item { &.modal_img_item {
@@ -522,12 +522,12 @@ export default defineComponent({
.color_content{ .color_content{
width: 100%; width: 100%;
//放8个 //放8个
height: 4rem; height: calc(4rem*1.2);
// height: 25rem; // height: 25rem*1.2);
} }
.color_content_body{ .color_content_body{
.color_des{ .color_des{
// font-size: 1.8rem; // font-size: 1.8rem*1.2);
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
@@ -536,7 +536,7 @@ export default defineComponent({
} }
} }
.select_upload_color{ .select_upload_color{
border: 0.1rem solid #343579; border: calc(0.1rem*1.2) solid #343579;
} }
.upload_color{ .upload_color{
width: 100%; width: 100%;
@@ -546,7 +546,7 @@ export default defineComponent({
} }
} }
.subitOkPreviewBtn{ .subitOkPreviewBtn{
bottom: 4rem; bottom: calc(4rem*1.2);
position: absolute; position: absolute;
} }
} }

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

@@ -5,7 +5,7 @@
:class="[driver__.driver?'hideEvents':'']" :class="[driver__.driver?'hideEvents':'']"
v-model:visible="designOpenrtion" v-model:visible="designOpenrtion"
:footer="null" :footer="null"
width="65%" width="78%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
@@ -754,50 +754,50 @@ export default defineComponent({
position: absolute; position: absolute;
} }
.ant-modal-body{ .ant-modal-body{
padding: 4rem 5rem 0rem!important; padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem*1.2));
height: calc(100rem*.614); height: calc(65rem*1.2*1.2);
display: flex; display: flex;
overflow-y: hidden; overflow-y: hidden;
flex-direction: column; flex-direction: column;
} }
.ant-modal-content{ .ant-modal-content{
border-radius: 1rem; border-radius: calc(1rem*1.2);
overflow: hidden; overflow: hidden;
} }
.designOpenrtion_content { .designOpenrtion_content {
// background: #f2f3fb; // background: #f2f3fb;
// padding-bottom: 2.9rem; // padding-bottom: 2.9rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
.designOpenrtion_header { .designOpenrtion_header {
position: relative; position: relative;
height: 6.6rem; height: calc(6.6rem*1.2);
width: 100%; width: 100%;
background: #F7F7F7; background: #F7F7F7;
.placement_modal_title{ .placement_modal_title{
position: absolute; position: absolute;
height: 100%; height: 100%;
line-height: 6.6rem; line-height: calc(6.6rem*1.2);
left: 3.7rem; left: calc(3.7rem*1.2);
top: 0; top: 0;
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
color: #030303; color: #030303;
} }
} }
.designOpenrtion_right{ .designOpenrtion_right{
height: 50rem; height: calc(50rem*1.2);
position: absolute; position: absolute;
right: 2rem; right: calc(2rem*1.2);
left: auto; left: auto;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
max-height: 50rem; max-height: calc(50rem*1.2);
max-width: 30rem; max-width: calc(30rem*1.2);
.designOpenrtion_entirety_img{ .designOpenrtion_entirety_img{
height: 100%; height: 100%;
img{ img{
@@ -820,18 +820,18 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 2px solid; border: 2px solid;
padding: 2rem 0; padding: calc(2rem*1.2) 0;
width: 16rem; width: calc(16rem*1.2);
border-radius: 1rem; border-radius: calc(1rem*1.2);
height: 40rem; height: calc(40rem*1.2);
.habit_Overal_Single { .habit_Overal_Single {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
// margin: 2rem 0; // margin: 2rem*1.2) 0;
transform: scale(.8); transform: scale(.8);
// margin: 3rem 0; // margin: 3rem*1.2) 0;
.habit_Overal_Single_text { .habit_Overal_Single_text {
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
@@ -842,7 +842,7 @@ export default defineComponent({
} }
} }
.ant-switch { .ant-switch {
margin: 0 1rem; margin: 0 calc(1rem*1.2);
background-color: #efefef; background-color: #efefef;
} }
.ant-switch-checked { .ant-switch-checked {
@@ -852,12 +852,12 @@ export default defineComponent({
.habit_System_Designer { .habit_System_Designer {
transform: scale(.8); transform: scale(.8);
width: 100%; width: 100%;
margin-top: 1.5rem; margin-top: calc(1.5rem*1.2);
.ant-slider-track, .ant-slider-track,
.ant-slider-rail { .ant-slider-rail {
height: .6rem; height: calc(.6rem*1.2);
background-color: #e1e1e1; background-color: #e1e1e1;
border-radius: 0.5rem; border-radius: calc(0.5rem*1.2);
} }
.ant-slider .ant-slider-handle:not(.ant-tooltip-open), .ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle { .ant-slider-handle {
@@ -868,39 +868,39 @@ export default defineComponent({
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2); box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
} }
.habit_System_Designer_text{ .habit_System_Designer_text{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
font-weight: 600; font-weight: 600;
} }
} }
.button_second{ .button_second{
margin: 1rem 0; margin: calc(1rem*1.2) 0;
width: 10rem; width: calc(10rem*1.2);
text-align: center; text-align: center;
position: initial; position: initial;
transform: none; transform: none;
height: 3rem; height: calc(3rem*1.2);
line-height: 3rem; line-height: calc(3rem*1.2);
} }
.print_input{ .print_input{
margin-top: 1rem; margin-top: calc(1rem*1.2);
width: 9.85rem; width: calc(9.85rem*1.2);
display: flex; display: flex;
.search_input{ .search_input{
width: 6.85rem; width: calc(6.85rem*1.2);
margin-right: 1rem; margin-right: calc(1rem*1.2);
padding: 0 1.5rem; padding: 0 calc(1.5rem*1.2);
border: 2px solid #000; border: 2px solid #000;
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
font-weight: 400; font-weight: 400;
height: 3rem; height: calc(3rem*1.2);
border-radius: 1.5rem; border-radius: calc(1.5rem*1.2);
&::placeholder { &::placeholder {
color: #C2C2C2; color: #C2C2C2;
} }
} }
i{ i{
width: 2rem; width: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -908,10 +908,10 @@ export default defineComponent({
} }
.designOpenrtion_nav{ .designOpenrtion_nav{
display: flex; display: flex;
margin-top: 2rem; margin-top: calc(2rem*1.2);
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
height: 12rem; height: calc(12rem*1.2);
overflow-x: hidden; overflow-x: hidden;
justify-content: space-evenly; justify-content: space-evenly;
&.designOpenrtion_nav::-webkit-scrollbar { &.designOpenrtion_nav::-webkit-scrollbar {
@@ -926,7 +926,7 @@ export default defineComponent({
} }
.designOpenrtion_single{ .designOpenrtion_single{
width: 40%; width: 40%;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
} }
img{ img{
width: 100%; width: 100%;
@@ -967,11 +967,11 @@ export default defineComponent({
// max-width: 100%; // max-width: 100%;
// max-height: 100%; // max-height: 100%;
// width: 100%; // width: 100%;
// height: 50rem; // height: 50rem*1.2);
max-height: 50rem; max-height: calc(50rem*1.2);
min-height: 30rem; min-height: calc(30rem*1.2);
width: auto; width: auto;
max-width: 60rem; max-width: calc(60rem*1.2);
} }
.designOpenrtion_sketch_mask{ .designOpenrtion_sketch_mask{
z-index: 3; z-index: 3;
@@ -1027,8 +1027,8 @@ export default defineComponent({
&.designOpenrtion_Mouoverall{ &.designOpenrtion_Mouoverall{
opacity: 1; opacity: 1;
border: none; border: none;
width: 1.4rem; width: calc(1.4rem*1.2);
height: 1.4rem; height: calc(1.4rem*1.2);
i{ i{
display: flex; display: flex;
color: #14bcff; color: #14bcff;
@@ -1058,8 +1058,8 @@ export default defineComponent({
li{ li{
cursor: pointer; cursor: pointer;
// border-radius: 50%; // border-radius: 50%;
width: 1rem; width: calc(1rem*1.2);
height: 1rem; height: calc(1rem*1.2);
background-color: rgb(20, 188, 255); background-color: rgb(20, 188, 255);
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
@@ -1103,8 +1103,8 @@ export default defineComponent({
position: absolute; position: absolute;
content: ""; content: "";
background-color: #14bcff; background-color: #14bcff;
width: .2rem; width: calc(.2rem*1.2);
height: 3rem; height: calc(3rem*1.2);
left: 50%; left: 50%;
bottom: 0; bottom: 0;
transform: translateX(-50%); transform: translateX(-50%);
@@ -1113,11 +1113,11 @@ export default defineComponent({
position: absolute; position: absolute;
content: ""; content: "";
background-color: #14bcff; background-color: #14bcff;
top: calc(50% - 3rem); top: calc(50% - 3rem*1.2);
left: 50%; left: 50%;
transform: translate(-50%,-50%) ; transform: translate(-50%,-50%) ;
width: 1.5rem; width: calc(1.5rem*1.2);
height: 1.5rem; height: calc(1.5rem*1.2);
border-radius: 50%; border-radius: 50%;
} }
} }
@@ -1126,8 +1126,8 @@ export default defineComponent({
} }
.subitOkPreviewBtn{ .subitOkPreviewBtn{
z-index: 2; z-index: 2;
margin: 1rem 0; margin: calc(1rem*1.2) 0;
width: 10rem; width: calc(10rem*1.2);
text-align: center; text-align: center;
position: initial; position: initial;
transform: none; transform: none;

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

@@ -5,7 +5,7 @@
v-model:visible="designOpenrtion" v-model:visible="designOpenrtion"
:class="[driver__.driver?'hideEvents':'']" :class="[driver__.driver?'hideEvents':'']"
:footer="null" :footer="null"
width="65%" width="78%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
@@ -756,50 +756,50 @@ export default defineComponent({
position: absolute; position: absolute;
} }
.ant-modal-body{ .ant-modal-body{
padding: 4rem 5rem 0rem!important; padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem*1.2));
height: calc(100rem*.614); height: calc(65rem*1.2*1.2);
display: flex; display: flex;
overflow-y: hidden; overflow-y: hidden;
flex-direction: column; flex-direction: column;
} }
.ant-modal-content{ .ant-modal-content{
border-radius: 1rem; border-radius: calc(1rem*1.2);
overflow: hidden; overflow: hidden;
} }
.designOpenrtion_content { .designOpenrtion_content {
// background: #f2f3fb; // background: #f2f3fb;
// padding-bottom: 2.9rem; // padding-bottom: 2.9rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
.designOpenrtion_header { .designOpenrtion_header {
position: relative; position: relative;
height: 6.6rem; height: calc(6.6rem*1.2);
width: 100%; width: 100%;
background: #F7F7F7; background: #F7F7F7;
.placement_modal_title{ .placement_modal_title{
position: absolute; position: absolute;
height: 100%; height: 100%;
line-height: 6.6rem; line-height: calc(6.6rem*1.2);
left: 3.7rem; left: calc(3.7rem*1.2);
top: 0; top: 0;
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
color: #030303; color: #030303;
} }
} }
.designOpenrtion_right{ .designOpenrtion_right{
height: 50rem; height: calc(50rem*1.2);
position: absolute; position: absolute;
right: 2rem; right: calc(2rem*1.2);
left: auto; left: auto;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
max-height: 50rem; max-height: calc(50rem*1.2);
max-width: 30rem; max-width: calc(30rem*1.2);
.designOpenrtion_entirety_img{ .designOpenrtion_entirety_img{
height: 100%; height: 100%;
img{ img{
@@ -822,18 +822,18 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 2px solid; border: 2px solid;
padding: 2rem 0; padding: calc(2rem*1.2) 0;
width: 16rem; width: calc(16rem*1.2);
border-radius: 1rem; border-radius: calc(1rem*1.2);
height: 40rem; height: calc(40rem*1.2);
.habit_Overal_Single { .habit_Overal_Single {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
// margin: 2rem 0; // margin: 2rem*1.2) 0;
transform: scale(.8); transform: scale(.8);
// margin: 3rem 0; // margin: 3rem*1.2) 0;
.habit_Overal_Single_text { .habit_Overal_Single_text {
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
@@ -844,7 +844,7 @@ export default defineComponent({
} }
} }
.ant-switch { .ant-switch {
margin: 0 1rem; margin: 0 calc(1rem*1.2);
background-color: #efefef; background-color: #efefef;
} }
.ant-switch-checked { .ant-switch-checked {
@@ -854,12 +854,12 @@ export default defineComponent({
.habit_System_Designer { .habit_System_Designer {
transform: scale(.8); transform: scale(.8);
width: 100%; width: 100%;
margin-top: 1.5rem; margin-top: calc(1.5rem*1.2);
.ant-slider-track, .ant-slider-track,
.ant-slider-rail { .ant-slider-rail {
height: .6rem; height: calc(.6rem*1.2);
background-color: #e1e1e1; background-color: #e1e1e1;
border-radius: 0.5rem; border-radius: calc(0.5rem*1.2);
} }
.ant-slider .ant-slider-handle:not(.ant-tooltip-open), .ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle { .ant-slider-handle {
@@ -870,39 +870,39 @@ export default defineComponent({
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2); box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
} }
.habit_System_Designer_text{ .habit_System_Designer_text{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
font-weight: 600; font-weight: 600;
} }
} }
.button_second{ .button_second{
margin: 1rem 0; margin: calc(1rem*1.2) 0;
width: 10rem; width: calc(10rem*1.2);
text-align: center; text-align: center;
position: initial; position: initial;
transform: none; transform: none;
height: 3rem; height: calc(3rem*1.2);
line-height: 3rem; line-height: calc(3rem*1.2);
} }
.print_input{ .print_input{
margin-top: 1rem; margin-top: calc(1rem*1.2);
width: 9.85rem; width: calc(9.85rem*1.2);
display: flex; display: flex;
.search_input{ .search_input{
width: 6.85rem; width: calc(6.85rem*1.2);
margin-right: 1rem; margin-right: calc(1rem*1.2);
padding: 0 1.5rem; padding: 0 calc(1.5rem*1.2);
border: 2px solid #000; border: 2px solid #000;
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
font-weight: 400; font-weight: 400;
height: 3rem; height: calc(3rem*1.2);
border-radius: 1.5rem; border-radius: calc(1.5rem*1.2);
&::placeholder { &::placeholder {
color: #C2C2C2; color: #C2C2C2;
} }
} }
i{ i{
width: 2rem; width: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -910,10 +910,10 @@ export default defineComponent({
} }
.designOpenrtion_nav{ .designOpenrtion_nav{
display: flex; display: flex;
margin-top: 2rem; margin-top: calc(2rem*1.2);
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
height: 12rem; height: calc(12rem*1.2);
overflow-x: hidden; overflow-x: hidden;
justify-content: space-evenly; justify-content: space-evenly;
&.designOpenrtion_nav::-webkit-scrollbar { &.designOpenrtion_nav::-webkit-scrollbar {
@@ -928,7 +928,7 @@ export default defineComponent({
} }
.designOpenrtion_single{ .designOpenrtion_single{
width: 40%; width: 40%;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
} }
img{ img{
width: 100%; width: 100%;
@@ -941,6 +941,7 @@ export default defineComponent({
&.show_print_right{ &.show_print_right{
border: none; border: none;
padding: 0; padding: 0;
height: auto;
} }
} }
} }
@@ -954,6 +955,7 @@ export default defineComponent({
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
display: flex;
&.active{ &.active{
flex-direction: row; flex-direction: row;
} }
@@ -967,11 +969,11 @@ export default defineComponent({
// max-width: 100%; // max-width: 100%;
// max-height: 100%; // max-height: 100%;
// width: 100%; // width: 100%;
// height: 50rem; // height: 50rem*1.2);
max-height: 50rem; max-height: calc(50rem*1.2);
min-height: 30rem; min-height: calc(30rem*1.2);
width: auto; width: auto;
max-width: 60rem; max-width: calc(60rem*1.2);
} }
.designOpenrtion_sketch_mask{ .designOpenrtion_sketch_mask{
z-index: 3; z-index: 3;
@@ -1027,8 +1029,8 @@ export default defineComponent({
&.designOpenrtion_Mouoverall{ &.designOpenrtion_Mouoverall{
opacity: 1; opacity: 1;
border: none; border: none;
width: 1.4rem; width: calc(1.4rem*1.2);
height: 1.4rem; height: calc(1.4rem*1.2);
i{ i{
display: flex; display: flex;
color: #14bcff; color: #14bcff;
@@ -1058,9 +1060,8 @@ export default defineComponent({
li{ li{
cursor: pointer; cursor: pointer;
// border-radius: 50%; // border-radius: 50%;
width: 1.5rem; width: calc(1rem*1.2);
height: 1.5rem; height: calc(1rem*1.2);
padding: 1rem;
background-color: rgb(20, 188, 255); background-color: rgb(20, 188, 255);
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
@@ -1104,8 +1105,8 @@ export default defineComponent({
position: absolute; position: absolute;
content: ""; content: "";
background-color: #14bcff; background-color: #14bcff;
width: .2rem; width: calc(.2rem*1.2);
height: 4rem; height: calc(3rem*1.2);
left: 50%; left: 50%;
bottom: 0; bottom: 0;
transform: translateX(-50%); transform: translateX(-50%);
@@ -1114,12 +1115,11 @@ export default defineComponent({
position: absolute; position: absolute;
content: ""; content: "";
background-color: #14bcff; background-color: #14bcff;
top: calc(50% - 3rem); top: calc(50% - 3rem*1.2);
left: 50%; left: 50%;
transform: translate(-50%,-50%) ; transform: translate(-50%,-50%) ;
width: 1.5rem; width: calc(1.5rem*1.2);
height: 1.5rem; height: calc(1.5rem*1.2);
padding: 1;
border-radius: 50%; border-radius: 50%;
} }
} }
@@ -1128,8 +1128,8 @@ export default defineComponent({
} }
.subitOkPreviewBtn{ .subitOkPreviewBtn{
z-index: 2; z-index: 2;
margin: 1rem 0; margin: calc(1rem*1.2) 0;
width: 10rem; width: calc(10rem*1.2);
text-align: center; text-align: center;
position: initial; position: initial;
transform: none; transform: none;

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

@@ -750,17 +750,17 @@ export default defineComponent({
.habit_button { .habit_button {
background-color: #fff; background-color: #fff;
border: solid 2px #000; border: solid 2px #000;
padding: 0px 2rem; padding: 0px calc(2rem*1.2);
box-sizing: initial; box-sizing: initial;
font-weight: 600; font-weight: 600;
height: 3.2rem; height: calc(3.2rem*1.2);
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
padding: .4rem 1.5rem; padding: calc(.4rem*1.2) calc(1.5rem*1.2);
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.fi-bs-angle-down { .fi-bs-angle-down {
margin-left: 1rem; margin-left: calc(1rem*1.2);
display: inline-block; display: inline-block;
transform: translateY(2px); transform: translateY(2px);
} }
@@ -778,17 +778,17 @@ export default defineComponent({
} }
.habit_content { .habit_content {
border: solid 2px #000; border: solid 2px #000;
border-radius: 1rem; border-radius: calc(1rem*1.2);
padding: 2rem; padding: calc(2rem*1.2);
// zoom: .75; // zoom: .75;
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
transform-origin: top right; transform-origin: top right;
position: absolute; position: absolute;
right: -.3rem; right: calc(-.3rem*1.2);
top: 110%; top: 110%;
background: #fff; background: #fff;
// width: 25rem; // width: 25rem*1.2);
width: 30rem; width: calc(30rem*1.2);
opacity: 0; opacity: 0;
transition: all .3s; transition: all .3s;
transform: scale(0.75)translateY(10%); transform: scale(0.75)translateY(10%);
@@ -800,27 +800,27 @@ export default defineComponent({
} }
.habit_title { .habit_title {
h3 { h3 {
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
font-weight: 600; font-weight: 600;
color: #000; color: #000;
margin: 0; margin: 0;
} }
.habit_intro { .habit_intro {
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
font-weight: 500; font-weight: 500;
} }
} }
.habit_type { .habit_type {
margin-top: 1.5rem; margin-top: calc(1.5rem*1.2);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.habit_workspace_show{ .habit_workspace_show{
width: 100%; width: 100%;
z-index: 1; z-index: 1;
transform: translateY(10%); transform: translateY(10%);
top: 4rem; top: calc(4rem*1.2);
height: 14rem; height: calc(14rem*1.2);
overflow-x: hidden; overflow-x: hidden;
cursor: auto; cursor: auto;
&.active{ &.active{
@@ -832,7 +832,7 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 3rem 0; margin: calc(3rem*1.2) 0;
position: relative; position: relative;
.habit_Overal_Single_text { .habit_Overal_Single_text {
font-weight: 600; font-weight: 600;
@@ -844,14 +844,14 @@ export default defineComponent({
} }
:deep(.ant-switch) { :deep(.ant-switch) {
margin: 0 1rem; margin: 0 calc(1rem*1.2);
} }
.habit_sex_show{ .habit_sex_show{
width: 100%; width: 100%;
z-index: 1; z-index: 1;
transform: translateY(10%); transform: translateY(10%);
top: 4rem; top: calc(4rem*1.2);
height: 14rem; height: calc(14rem*1.2);
overflow-x: hidden; overflow-x: hidden;
cursor: auto; cursor: auto;
&.active{ &.active{
@@ -860,14 +860,14 @@ export default defineComponent({
} }
} }
.habit_habit_singleton { .habit_habit_singleton {
margin-bottom: 3rem; margin-bottom: calc(3rem*1.2);
position: relative; position: relative;
.habit_singleton_show{ .habit_singleton_show{
width: 100%; width: 100%;
z-index: 1; z-index: 1;
transform: translateY(10%); transform: translateY(10%);
top: 4rem; top: calc(4rem*1.2);
height: 14rem; height: calc(14rem*1.2);
overflow-x: hidden; overflow-x: hidden;
cursor: auto; cursor: auto;
&.active{ &.active{
@@ -877,12 +877,12 @@ export default defineComponent({
} }
.habit_System_Designer { .habit_System_Designer {
margin-top: 8rem; margin-top: calc(8rem*1.2);
:deep(.ant-slider-track), :deep(.ant-slider-track),
:deep(.ant-slider-rail) { :deep(.ant-slider-rail) {
height: .6rem; height: calc(.6rem*1.2);
background-color: #e1e1e1; background-color: #e1e1e1;
border-radius: 0.5rem; border-radius: calc(0.5rem*1.2);
} }
:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)), :deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
:deep(.ant-slider-handle) { :deep(.ant-slider-handle) {
@@ -901,20 +901,20 @@ export default defineComponent({
} }
} }
.habit_model{ .habit_model{
margin-top: 2rem; margin-top: calc(2rem*1.2);
} }
.habit_model_show{ .habit_model_show{
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
border: solid 2px #000; border: solid 2px #000;
border-radius: 1rem; border-radius: calc(1rem*1.2);
padding: 2rem; padding: calc(2rem*1.2);
bottom: -.5rem; bottom: calc(-.5rem*1.2);
transform: translateY(110%); transform: translateY(110%);
right: -.2rem; right: calc(-.2rem*1.2);
width: 40rem; width: calc(40rem*1.2);
// width: 35rem; // width: 35rem*1.2);
opacity: 0; opacity: 0;
transition: all .3s; transition: all .3s;
display: none; display: none;
@@ -923,11 +923,11 @@ export default defineComponent({
transform: translateY(100%); transform: translateY(100%);
} }
.habit_btn{ .habit_btn{
min-height: 26rem; min-height: calc(26rem*1.2);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.model_current{ .model_current{
margin-right: 3rem; margin-right: calc(3rem*1.2);
.model_text{ .model_text{
text-align: center; text-align: center;
} }
@@ -936,7 +936,7 @@ export default defineComponent({
.habit_model_list{ .habit_model_list{
margin: 0; margin: 0;
li{ li{
padding: .5rem 0; padding: calc(.5rem*1.2) 0;
display: flex; display: flex;
input{ input{
border: 0; border: 0;
@@ -958,9 +958,9 @@ export default defineComponent({
border-radius: 50%; border-radius: 50%;
border: 1px solid #000; border: 1px solid #000;
display: inline-block; display: inline-block;
width: 2rem; width: calc(2rem*1.2);
height: 2rem; height: calc(2rem*1.2);
line-height: 2rem; line-height: calc(2rem*1.2);
text-align: center; text-align: center;
} }
i{ i{
@@ -971,7 +971,7 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
} }
.fi-rr-trash{ .fi-rr-trash{
margin-left: 1rem; margin-left: calc(1rem*1.2);
} }
} }
li:hover{ li:hover{
@@ -979,7 +979,7 @@ export default defineComponent({
} }
.material_content_list_loding{ .material_content_list_loding{
width: 100%; width: 100%;
height: 4rem; height: calc(4rem*1.2);
display: flex; display: flex;
img{ img{
width: auto; width: auto;
@@ -998,7 +998,7 @@ export default defineComponent({
display: flex; display: flex;
justify-content: center; justify-content: center;
:deep(.ant-switch) { :deep(.ant-switch) {
margin: 0 1rem; margin: 0 calc(1rem*1.2);
} }
.habit_System_Seleves_text { .habit_System_Seleves_text {
font-weight: 600; font-weight: 600;
@@ -1020,19 +1020,19 @@ export default defineComponent({
overflow-x: auto; overflow-x: auto;
&.model_img::-webkit-scrollbar { &.model_img::-webkit-scrollbar {
/* 竖轴的宽度 */ /* 竖轴的宽度 */
width: 1rem; width: calc(1rem*1.2);
/* 横轴的高度 */ /* 横轴的高度 */
height: 1rem; height: calc(1rem*1.2);
transition: all .3s; transition: all .3s;
} }
/* 进度 */ /* 进度 */
&.model_img::-webkit-scrollbar-thumb { &.model_img::-webkit-scrollbar-thumb {
border-radius: 1rem; border-radius: calc(1rem*1.2);
background: rgba(238, 238, 244, 0); background: rgba(238, 238, 244, 0);
} }
/* 轨道 */ /* 轨道 */
&.model_img::-webkit-scrollbar-track { &.model_img::-webkit-scrollbar-track {
border-radius: 1rem; border-radius: calc(1rem*1.2);
background: rgba(238, 238, 244, 0); background: rgba(238, 238, 244, 0);
} }
&.model_img:hover { &.model_img:hover {
@@ -1051,10 +1051,10 @@ export default defineComponent({
} }
div{ div{
width: auto; width: auto;
margin-right: 1rem; margin-right: calc(1rem*1.2);
} }
img{ img{
width: 10rem; width: calc(10rem*1.2);
cursor: pointer; cursor: pointer;
} }
} }
@@ -1077,7 +1077,7 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
} }
</style> </style>
<style> <style>

4
src/component/Detail/magnifyingGlass.vue
View File

@@ -133,8 +133,8 @@ export default defineComponent({
max-width: 100%; max-width: 100%;
} }
.initial_haver{ .initial_haver{
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
position: absolute; position: absolute;
background-color: rgba(0,0,0,.2); background-color: rgba(0,0,0,.2);
top: 0; top: 0;

32
src/component/Detail/setDesignItem.vue
View File

@@ -470,21 +470,21 @@ export default defineComponent({
.designOpenrtion_modal { .designOpenrtion_modal {
// max-width: 1440px; // max-width: 1440px;
.ant-modal-body{ .ant-modal-body{
padding: 4rem 5rem 0rem!important; padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem*1.2));
height: calc(100rem*.614); height: calc(65rem*1.2);
display: flex; display: flex;
overflow-y: hidden; overflow-y: hidden;
flex-direction: column; flex-direction: column;
} }
.ant-modal-content{ .ant-modal-content{
border-radius: 1rem; border-radius: calc(1rem*1.2);
overflow: hidden; overflow: hidden;
} }
} }
.design_compile_content { .design_compile_content {
// background: #f2f3fb; // background: #f2f3fb;
// padding-bottom: 2.9rem; // padding-bottom: 2.9rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@@ -531,13 +531,13 @@ export default defineComponent({
transform: translate(-50%,-0%); transform: translate(-50%,-0%);
transition: all .3s; transition: all .3s;
justify-content: center; justify-content: center;
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
>div{ >div{
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin-left: .3rem; margin-left: calc(.3rem*1.2);
img{ img{
// width: 100%; // width: 100%;
height: 100%; height: 100%;
@@ -553,7 +553,7 @@ export default defineComponent({
} }
} }
>div:nth-child(1){ >div:nth-child(1){
margin-left: 0rem; margin-left: calc(0rem*1.2);
} }
} }
.designOpenrtion_print,.detail_modal_item_front{ .designOpenrtion_print,.detail_modal_item_front{
@@ -595,8 +595,8 @@ export default defineComponent({
li{ li{
cursor: pointer; cursor: pointer;
// border-radius: 50%; // border-radius: 50%;
width: 1rem; width: calc(1rem*1.2);
height: 1rem; height: calc(1rem*1.2);
background-color: rgb(20, 188, 255); background-color: rgb(20, 188, 255);
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
@@ -653,16 +653,16 @@ export default defineComponent({
top: calc(50% - 30px); top: calc(50% - 30px);
left: 50%; left: 50%;
transform: translate(-50%,-50%) ; transform: translate(-50%,-50%) ;
width: 1.5rem; width: calc(1.5rem*1.2);
height: 1.5rem; height: calc(1.5rem*1.2);
border-radius: 50%; border-radius: 50%;
} }
} }
} }
.subitOkPreviewBtn{ .subitOkPreviewBtn{
z-index: 2; z-index: 2;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
width: 10rem; width: calc(10rem*1.2);
text-align: center; text-align: center;
bottom: 0; bottom: 0;
position: relative; position: relative;

34
src/component/Detail/setDesignItemMobile.vue
View File

@@ -440,21 +440,21 @@ export default defineComponent({
.designOpenrtion_modal { .designOpenrtion_modal {
// max-width: 1440px; // max-width: 1440px;
.ant-modal-body{ .ant-modal-body{
padding: 4rem 5rem 0rem!important; padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.calc(4rem*1.2));
height: calc(100rem*.614); height: calc(65rem*1.2);
display: flex; display: flex;
overflow-y: hidden; overflow-y: hidden;
flex-direction: column; flex-direction: column;
} }
.ant-modal-content{ .ant-modal-content{
border-radius: 1rem; border-radius: calc(1rem*1.2);
overflow: hidden; overflow: hidden;
} }
} }
.design_compile_content { .design_compile_content {
// background: #f2f3fb; // background: #f2f3fb;
// padding-bottom: 2.9rem; // padding-bottom: 2.calc(9rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@@ -501,13 +501,13 @@ export default defineComponent({
transform: translate(-50%,-0%); transform: translate(-50%,-0%);
transition: all .3s; transition: all .3s;
justify-content: center; justify-content: center;
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
>div{ >div{
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin-left: .3rem; margin-left: calc(.3rem*1.2);
img{ img{
// width: 100%; // width: 100%;
height: 100%; height: 100%;
@@ -523,7 +523,7 @@ export default defineComponent({
} }
} }
>div:nth-child(1){ >div:nth-child(1){
margin-left: 0rem; margin-left: calc(0rem*1.2);
} }
} }
.designOpenrtion_print,.detail_modal_item_front{ .designOpenrtion_print,.detail_modal_item_front{
@@ -565,9 +565,9 @@ export default defineComponent({
li{ li{
cursor: pointer; cursor: pointer;
// border-radius: 50%; // border-radius: 50%;
width: 1.5rem; width: calc(1.5rem*1.2);
height: 1.5rem; height: calc(1.5rem*1.2);
padding: 1rem; padding: calc(1rem*1.2);
background-color: rgb(20, 188, 255); background-color: rgb(20, 188, 255);
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
@@ -625,16 +625,16 @@ export default defineComponent({
top: calc(50% - 30px); top: calc(50% - 30px);
left: 50%; left: 50%;
transform: translate(-50%,-50%) ; transform: translate(-50%,-50%) ;
width: 1.5rem; width: calc(1.5rem*1.2);
height: 1.5rem; height: calc(1.5rem*1.2);
border-radius: 50%; border-radius: 50%;
} }
} }
} }
.subitOkPreviewBtn{ .subitOkPreviewBtn{
z-index: 2; z-index: 2;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
width: 10rem; width: calc(10rem*1.2);
text-align: center; text-align: center;
bottom: 0; bottom: 0;
position: relative; position: relative;

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

@@ -283,7 +283,9 @@ export default defineComponent({
if(this.driver__.driver){ if(this.driver__.driver){
driverObj__.moveNext() driverObj__.moveNext()
} }
// this.selectColor = color?.r ? {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex} : {} if(color.r){
this.selectColor = {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex}
}
}, },
//通过tcx获取颜色 //通过tcx获取颜色
@@ -523,11 +525,11 @@ export default defineComponent({
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 7rem; padding-top: calc(7rem*1.2);
.modal_layout{ .modal_layout{
position: absolute; position: absolute;
top: 0; top: 0;
left: calc(47% + 3rem); left: calc(47% + 3rem*1.2);
.modal_text{ .modal_text{
font-size: var(--aida-fsize1-4); font-size: var(--aida-fsize1-4);
font-weight: 400; font-weight: 400;
@@ -537,9 +539,9 @@ export default defineComponent({
justify-content: space-between; justify-content: space-between;
} }
.modal_img{ .modal_img{
width: 50rem; width: calc(50rem*1.2);
// width: 40rem; // width: 40rem;
height: 5rem; height: calc(5rem*1.2);
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -547,9 +549,9 @@ export default defineComponent({
display: none; display: none;
} }
.modal_img_item{ .modal_img_item{
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
margin: 0 1rem 0 0; margin: 0 calc(1rem*1.2) 0 0;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
border: 0.1rem solid #DCDCEC; border: 0.1rem solid #DCDCEC;
@@ -572,17 +574,17 @@ export default defineComponent({
background: #FFFFFF; background: #FFFFFF;
.upload_right_header{ .upload_right_header{
padding: 0.4rem 0 1.6rem 0; padding: calc(0.4rem*1.2) 0 calc(1.6rem*1.2) 0;
font-weight: bold; font-weight: bold;
line-height: 2.4rem; line-height: calc(2.4rem*1.2);
font-size: var(--aida-fsize1-8); font-size: var(--aida-fsize1-8);
color: #333333; color: #333333;
display: flex; display: flex;
align-items: center; align-items: center;
.color_edit{ .color_edit{
font-size: 2rem; font-size: calc(2rem*1.2);
margin-right: 1rem; margin-right: calc(1rem*1.2);
position: absolute; position: absolute;
left: 0; left: 0;
} }
@@ -597,12 +599,12 @@ export default defineComponent({
display: flex; display: flex;
.right_content_line{ .right_content_line{
padding-left: 3rem; padding-left: calc(3rem*1.2);
position: relative; position: relative;
padding-right: 5rem; padding-right: calc(5rem*1.2);
.upload_centetn{ .upload_centetn{
overflow-x: hidden; overflow-x: hidden;
height: calc(100% - 4.4rem); height: calc(100% - 4.4rem*1.2);
} }
.upload_centetn::-webkit-scrollbar { .upload_centetn::-webkit-scrollbar {
display: none; display: none;
@@ -613,8 +615,8 @@ export default defineComponent({
display: inline-block; display: inline-block;
// width: 16.5rem; // width: 16.5rem;
// height: 16.5rem; // height: 16.5rem;
width: 12rem; width: calc(12rem*1.2);
height: 12rem; height: calc(12rem*1.2);
border: 1px solid #F5F5F5; border: 1px solid #F5F5F5;
vertical-align: top; vertical-align: top;
@@ -641,11 +643,11 @@ export default defineComponent({
.delete_file_block{ .delete_file_block{
display: none; display: none;
width: 100%; width: 100%;
height: 4rem; height: calc(4rem*1.2);
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #FFFFFF; color: #FFFFFF;
line-height: 4rem; line-height: calc(4rem*1.2);
text-align: center; text-align: center;
position: absolute; position: absolute;
left: 0; left: 0;
@@ -655,22 +657,22 @@ export default defineComponent({
} }
.upload_img_icon{ .upload_img_icon{
width: 4.6rem; width: calc(4.6rem*1.2);
} }
.upload_color{ .upload_color{
display: flex; display: flex;
width: 12rem; width: calc(12rem*1.2);
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
.upload_color_item{ .upload_color_item{
width: 5rem; width: calc(5rem*1.2);
height: 5rem; height: calc(5rem*1.2);
position: relative; position: relative;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
.upload_color_item_bg{ .upload_color_item_bg{
width: 5rem; width: calc(5rem*1.2);
height: 5rem; height: calc(5rem*1.2);
} }
img{ img{
position: absolute; position: absolute;
@@ -689,11 +691,11 @@ export default defineComponent({
} }
} }
.color_setting_block{ .color_setting_block{
width: 17.5rem; width: calc(17.5rem*1.2);
margin: auto; margin: auto;
background: linear-gradient(70deg, #eee4f3, #f3f4e6); background: linear-gradient(70deg, #eee4f3, #f3f4e6);
border-radius: 1rem; border-radius: calc(1rem*1.2);
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);
@@ -702,56 +704,56 @@ export default defineComponent({
} }
.chrome_color{ .chrome_color{
width: 17.5rem; width: calc(17.5rem*1.2);
// height: 16.5rem; // height: 16.5rem;
overflow: hidden; overflow: hidden;
.vc-chrome-saturation-wrap{ .vc-chrome-saturation-wrap{
height: 100%; height: 100%;
width: 16rem; width: calc(16rem*1.2);
height: 16rem; height: calc(16rem*1.2);
max-height: 17rem; max-height: calc(17rem*1.2);
max-width: 17rem; max-width: calc(17rem*1.2);
margin: .7rem auto; margin: calc(.7rem*1.2) auto;
padding-bottom: 0; padding-bottom: 0;
} }
.vc-chrome-body{ .vc-chrome-body{
padding: 0; padding: 0;
width: 90%; width: 90%;
margin: 0.5rem auto; margin: calc(0.5rem*1.2) auto;
margin: 0 auto; margin: 0 auto;
background: rgba(0,0,0,0); background: rgba(0,0,0,0);
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
// display: none; // display: none;
.vc-chrome-fields-wrap{ .vc-chrome-fields-wrap{
margin-top: 5%; margin-top: 5%;
padding: 0; padding: 0;
position: relative; position: relative;
.vc-chrome-toggle-btn{ .vc-chrome-toggle-btn{
width: 3.2rem; width: calc(3.2rem*1.2);
.vc-chrome-toggle-icon{ .vc-chrome-toggle-icon{
height: auto; height: auto;
margin-right: -0.4rem; margin-right: calc(-0.4rem*1.2);
margin-top: 0rem; margin-top: 0rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
svg{ svg{
width: 2.4rem !important; width: calc(2.4rem*1.2) !important;
height: 2.4rem !important; height: calc(2.4rem*1.2) !important;
} }
} }
} }
.vc-chrome-fields{ .vc-chrome-fields{
.vc-chrome-field{ .vc-chrome-field{
padding-left: .6rem; padding-left: calc(.6rem*1.2);
} }
.vc-input__label{ .vc-input__label{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
} }
.vc-input__input{ .vc-input__input{
font-size: 1.1rem; font-size: calc(1.1rem*1.2);
height: 2.1rem; height: calc(2.1rem*1.2);
} }
} }
.ant-upload-list{ .ant-upload-list{
@@ -762,23 +764,23 @@ export default defineComponent({
// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg); // background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg); // background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg); // background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
background-size: 1.5rem; background-size: calc(1.5rem*1.2);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50%; background-position: 50%;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
width: 2.2rem; width: calc(2.2rem*1.2);
height: 2.2rem; height: calc(2.2rem*1.2);
padding: .7rem; padding: calc(.7rem*1.2);
border: 1px solid; border: 1px solid;
position: absolute; position: absolute;
bottom: -.5rem; bottom: calc(-.5rem*1.2);
right: .5rem; right: calc(.5rem*1.2);
border-radius: .5rem; border-radius: calc(.5rem*1.2);
} }
.vc-chrome-fields{ .vc-chrome-fields{
.vc-input__label{ .vc-input__label{
margin-top: 1rem; margin-top: calc(1rem*1.2);
} }
} }
.vc-chrome-fields:nth-child(2){ .vc-chrome-fields:nth-child(2){
@@ -797,11 +799,11 @@ export default defineComponent({
flex-direction: row-reverse; flex-direction: row-reverse;
.vc-chrome-color-wrap{ .vc-chrome-color-wrap{
// width: 3.6rem; // width: 3.6rem;
margin-left: 2rem; margin-left: calc(2rem*1.2);
width: auto; width: auto;
.vc-chrome-active-color,.vc-checkerboard{ .vc-chrome-active-color,.vc-checkerboard{
width: 3rem; width: calc(3rem*1.2);
height: 3rem; height: calc(3rem*1.2);
border-radius: 50%; border-radius: 50%;
} }
} }
@@ -813,15 +815,15 @@ export default defineComponent({
border-radius: 15px; border-radius: 15px;
overflow: hidden; overflow: hidden;
} }
height: 1rem; height: calc(1rem*1.2);
.vc-hue-picker{ .vc-hue-picker{
width: 1.4rem; width: calc(1.4rem*1.2);
height: 1.4rem; height: calc(1.4rem*1.2);
} }
.vc-alpha-picker{ .vc-alpha-picker{
width: 1.4rem; width: calc(1.4rem*1.2);
height: 1.4rem; height: calc(1.4rem*1.2);
transform: translate(-.6rem,-.4rem); transform: translate(calc(-.6rem*1.2),calc(-.4rem*1.2));
} }
} }
.vc-chrome-alpha-wrap{ .vc-chrome-alpha-wrap{
@@ -833,56 +835,56 @@ export default defineComponent({
} }
} }
.vc-chrome-saturation-wrap .vc-saturation-circle{ .vc-chrome-saturation-wrap .vc-saturation-circle{
width: 1rem; width: calc(1rem*1.2);
height: 1rem; height: calc(1rem*1.2);
} }
} }
.sileder_color{ .sileder_color{
margin-top:1.3rem; margin-top:calc(1.3rem*1.2);
.vc-slider-swatches{ .vc-slider-swatches{
display:none display:none
} }
.vc-slider-hue-warp { .vc-slider-hue-warp {
width: 16.5rem; width: calc(16.5rem*1.2);
height: 2.4rem; height: calc(2.4rem*1.2);
border-radius: 1.2rem; border-radius: calc(1.2rem*1.2);
overflow: hidden; overflow: hidden;
.vc-hue-picker{ .vc-hue-picker{
width: 1.4rem; width: calc(1.4rem*1.2);
height: 1.4rem; height: calc(1.4rem*1.2);
border-radius: 50%; border-radius: 50%;
transform: translate(-0.7rem, -0.2rem); transform: translate(calc(-0.7rem*1.2), calc(-0.2rem*1.2));
} }
} }
.vc-hue-pointer{ .vc-hue-pointer{
top: 0.5rem !important; top: calc(0.5rem*1.2) !important;
} }
} }
.color_block{ .color_block{
// margin-top: 1rem; // margin-top: calc(1rem;
// display: flex; // display: flex;
// justify-content: space-between; // justify-content: space-between;
// font-size: 1.6rem; // font-size: calc(1.6rem;
width: 100%; width: 100%;
padding: 0 5%; padding: 0 5%;
padding-bottom: 5%; padding-bottom: 5%;
margin: 0.5rem auto; margin: calc(0.5rem*1.2) auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.color_right{ .color_right{
width: 11rem; width: calc(11rem*1.2);
font-size: 1,2rem; font-size: calc(1.2rem*1.2);
color: #666666; color: #666666;
.color_rgb_block{ .color_rgb_block{
display: flex; display: flex;
.rgb_item{ .rgb_item{
margin-left: .2rem; margin-left: calc(.2rem*1.2);
} }
} }
} }
@@ -896,14 +898,14 @@ export default defineComponent({
align-items: center; align-items: center;
} }
.color_HEX_block,.color_rgb_block{ .color_HEX_block,.color_rgb_block{
padding: .2rem .5rem; padding: calc(.2rem*1.2) calc(.5rem*1.2);
box-shadow: inset 0 0 0 1px #ccc; box-shadow: inset 0 0 0 1px #ccc;
border-radius: .4rem; border-radius: calc(.4rem*1.2);
justify-content: space-around; justify-content: space-around;
text-transform:uppercase; text-transform:uppercase;
.color_block_bg{ .color_block_bg{
width: 1.5rem; width: calc(1.5rem*1.2);
height: 1.5rem; height: calc(1.5rem*1.2);
// margin-right: .5rem; // margin-right: .5rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -919,13 +921,13 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.get_color_input{ .get_color_input{
width: 19.4rem; width: calc(19.4rem*1.2);
height: 3.8rem; height: calc(3.8rem*1.2);
background: #FFFFFF; background: #FFFFFF;
border: 0.1rem solid #DCDCEC; border: 0.1rem solid #DCDCEC;
padding: 1rem 1.3rem; padding: calc(1rem*1.2) calc(1.3rem*1.2);
box-sizing: border-box; box-sizing: border-box;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
text-align: left; text-align: left;
&::placeholder { &::placeholder {
@@ -934,20 +936,20 @@ export default defineComponent({
} }
.get_color_button{ .get_color_button{
margin-top: 1.5rem; margin-top: calc(1.5rem*1.2);
padding: 0 2.2rem; padding: 0 calc(2.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: #EFEEFF; background: #EFEEFF;
display: inline-block; display: inline-block;
line-height: 3rem; line-height: calc(3rem*1.2);
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
color: #343579; color: #343579;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
.icon-huoquduixiang{ .icon-huoquduixiang{
margin-right: 0.5rem; margin-right: calc(0.5rem*1.2);
font-size: 2rem; font-size: calc(2rem*1.2);
color:#343579; color:#343579;
vertical-align: middle; vertical-align: middle;
} }
@@ -957,12 +959,12 @@ export default defineComponent({
} }
} }
.get_color_bg{ .get_color_bg{
width: 18rem; width: calc(18rem*1.2);
height: 18rem; height: calc(18rem*1.2);
position: relative; position: relative;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
margin-top: 1.5rem; margin-top: calc(1.5rem*1.2);
img{ img{
opacity: 0; opacity: 0;
position: absolute; position: absolute;
@@ -975,15 +977,15 @@ export default defineComponent({
} }
.upload_item{ .upload_item{
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
.ant-upload-picture-card-wrapper{ .ant-upload-picture-card-wrapper{
.ant-upload-list{ .ant-upload-list{
.ant-upload-select-picture-card{ .ant-upload-select-picture-card{
// margin: 0 2rem 2rem 0; // margin: 0 2rem 2rem 0;
margin: 0; margin: 0;
display: inline-block; display: inline-block;
width: 12rem; width: calc(12rem*1.2);
height: 12rem; height: calc(12rem*1.2);
border: 1px solid #F5F5F5; border: 1px solid #F5F5F5;
vertical-align: top; vertical-align: top;
i{ i{

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

@@ -2,7 +2,7 @@
<a-modal class="modal_component cut_pricture_modal" <a-modal class="modal_component cut_pricture_modal"
v-model:visible="cutPicuterModal" v-model:visible="cutPicuterModal"
:footer="null" :footer="null"
width="65%" width="78%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
@@ -187,15 +187,15 @@ export default defineComponent({
.collection_title{ .collection_title{
position: absolute; position: absolute;
width: calc(100% - 10rem); width: calc(100% - 10rem*1.2);
top: 4rem; top: calc(4rem*1.2);
display: flex; display: flex;
font-size: var(--aida-fsize2); font-size: var(--aida-fsize2);
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_title_text{ .collection_title_text{
margin-right: 4rem; margin-right: calc(4rem*1.2);
} }
.collection_title_text_intro{ .collection_title_text_intro{
font-size: var(--aida-fsize1-4); font-size: var(--aida-fsize1-4);
@@ -207,32 +207,32 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
position: absolute; position: absolute;
right: 2.1rem; right: calc(2.1rem*1.2);
height: 100%; height: 100%;
.next_step_button{ .next_step_button{
padding: 0 1.2rem; padding: 0 calc(1.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
// background: linear-gradient(160deg, #AC2A3B, #292161); // background: linear-gradient(160deg, #AC2A3B, #292161);
background: linear-gradient(-137deg, #eeefdb, #e7dbed); background: linear-gradient(-137deg, #eeefdb, #e7dbed);
border-radius: 1.6rem; border-radius: calc(1.6rem*1.2);
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
color: #000; color: #000;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
margin-right: 1.6rem; margin-right: calc(1.6rem*1.2);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.header_cancel_button{ .header_cancel_button{
padding: 0 2.1rem; padding: 0 calc(2.1rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: #E4E5EB; background: #E4E5EB;
border-radius: 1.6rem; border-radius: calc(1.6rem*1.2);
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
color: #030303; color: #030303;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
@@ -247,31 +247,31 @@ export default defineComponent({
justify-content: space-between; justify-content: space-between;
.cut_picture_left{ .cut_picture_left{
width: 70.7rem; width: calc(70.7rem*1.2);
height: 100%; height: 100%;
background: #fff; background: #fff;
border-radius: 2rem; border-radius: calc(2rem*1.2);
padding: 1.3rem 1.3rem 2rem; padding: calc(1.3rem*1.2) calc(1.3rem*1.2) calc(2rem*1.2);
box-sizing: border-box; box-sizing: border-box;
.cut_picture_body{ .cut_picture_body{
width: 100%; width: 100%;
height: 40rem; height: calc(40rem*1.2);
// height: 53rem; // height: 53rem;
background: yellow; background: yellow;
} }
.cur_picture_opterate{ .cur_picture_opterate{
margin: 2.7rem auto 0; margin: calc(2.7rem*1.2) auto 0;
border-radius: 1.6rem; border-radius: calc(1.6rem*1.2);
display: flex; display: flex;
overflow: hidden; overflow: hidden;
border: 1px solid #E2E2E4; border: 1px solid #E2E2E4;
width: 24rem; width: calc(24rem*1.2);
.cur_picture_opterate_item{ .cur_picture_opterate_item{
width: 4.7rem; width: calc(4.7rem*1.2);
height: 4rem; height: calc(4rem*1.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -283,20 +283,20 @@ export default defineComponent({
} }
.operate_icon{ .operate_icon{
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
color: rgba(102, 102, 102, 1); color: rgba(102, 102, 102, 1);
font-weight: bold; font-weight: bold;
} }
.icon_font{ .icon_font{
font-size: 2.5rem; font-size: calc(2.5rem*1.2);
position: relative; position: relative;
top: -0.3rem; top: calc(-0.3rem*1.2);
user-select:none; user-select:none;
} }
.icon-shuaxin{ .icon-shuaxin{
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
} }
&:last-child{ &:last-child{
@@ -308,32 +308,32 @@ export default defineComponent({
.cut_picture_right{ .cut_picture_right{
// width: 39.2rem; // width: 39.2rem;
width: 52rem; width: calc(52rem*1.2);
height: 100%; height: 100%;
background: #fff; background: #fff;
border-radius: 2rem; border-radius: calc(2rem*1.2);
.cur_picture_right_header{ .cur_picture_right_header{
padding: 2rem; padding: calc(2rem*1.2);
display: flex; display: flex;
align-items: center; align-items: center;
font-size: var(--aida-fsize1-8); font-size: var(--aida-fsize1-8);
font-weight: 400; font-weight: 400;
color: #030303; color: #030303;
line-height: 1.8rem; line-height: calc(1.8rem*1.2);
font-weight: bold; font-weight: bold;
.review_logo{ .review_logo{
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
color: #333; color: #333;
margin-right: 1rem; margin-right: calc(1rem*1.2);
} }
} }
.cut_picture_review_block{ .cut_picture_review_block{
width: 100%; width: 100%;
padding: 0 2rem; padding: 0 calc(2rem*1.2);
height: calc(100% - 6.8rem); height: calc(100% - 6.8rem*1.2);
.cut_picture_review_item{ .cut_picture_review_item{
width: 100%; width: 100%;
@@ -348,8 +348,8 @@ export default defineComponent({
top: 50%; top: 50%;
transform: scale(0.8) 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 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
border-radius: 1rem; border-radius: calc(1rem*1.2);
} }
.cut_picture_review_block_sec{ .cut_picture_review_block_sec{
@@ -360,7 +360,7 @@ export default defineComponent({
transform: scale(0.45) translate(-50%, -50%); transform: scale(0.45) translate(-50%, -50%);
border-radius: 100%; border-radius: 100%;
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 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
} }
} }

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

@@ -757,22 +757,22 @@ export default defineComponent({
position: sticky; position: sticky;
top: 0; top: 0;
background: #fff; background: #fff;
padding-top: 2.5rem; padding-top: calc(2.5rem*1.2);
padding-bottom: 2rem; padding-bottom: calc(2rem*1.2);
z-index: 2; z-index: 2;
} }
.generate_checkbox { .generate_checkbox {
div { div {
margin-right: 4rem; margin-right: calc(4rem*1.2);
label { label {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
input { input {
margin-right: 0.5rem; margin-right: calc(0.5rem*1.2);
padding-left: 1.5rem; padding-left: calc(1.5rem*1.2);
} }
span { span {
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
font-weight: 500; font-weight: 500;
} }
} }
@@ -780,25 +780,25 @@ export default defineComponent({
} }
.printModel{ .printModel{
>div{ >div{
width: 13rem; width: calc(13rem*1.2);
// display: flex; // display: flex;
display: block; display: block;
border-radius: 1rem; border-radius: calc(1rem*1.2);
margin: 0; margin: 0;
border: 2px solid; border: 2px solid;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 1rem; padding: 0 calc(1rem*1.2);
text-align: center; text-align: center;
} }
ul{ ul{
position: absolute; position: absolute;
width: 13rem; width: calc(13rem*1.2);
text-align: center; text-align: center;
margin-top: .3rem; margin-top: calc(.3rem*1.2);
border-radius: 1rem; border-radius: calc(1rem*1.2);
overflow: hidden; overflow: hidden;
li{ li{
background: rgba(0,0,0,.2); background: rgba(0,0,0,.2);
@@ -807,7 +807,7 @@ export default defineComponent({
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 1rem; padding: 0 calc(1rem*1.2);
&.printModel_item:hover{ &.printModel_item:hover{
background: rgba(0,0,0,.4); background: rgba(0,0,0,.4);
} }
@@ -824,12 +824,12 @@ export default defineComponent({
flex: 1; flex: 1;
.generage_img_item { .generage_img_item {
cursor: pointer; cursor: pointer;
margin: 0 2rem 2rem 0; margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
position: relative; position: relative;
&.active { &.active {
opacity: 0.5; opacity: 0.5;
// border: 2px solid; // border: 2px solid;
border-radius: 1rem; border-radius: calc(1rem*1.2);
img { img {
transform: scale(0.9); transform: scale(0.9);
} }
@@ -838,17 +838,17 @@ export default defineComponent({
} }
} }
img { img {
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
} }
.delete_like_file_block{ .delete_like_file_block{
top: 0.9rem; top: calc(0.9rem*1.2);
right: 0.9rem; right: calc(0.9rem*1.2);
&.left{ &.left{
left: .9rem; left: calc(.9rem*1.2);
} }
i{ i{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; color: #fff;
&.fi-rr-heart{ &.fi-rr-heart{
@@ -899,18 +899,18 @@ export default defineComponent({
.delete_file_block { .delete_file_block {
display: none; display: none;
width: 3.2rem; width: calc(3.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
border-radius: 0.4rem; border-radius: calc(0.4rem*1.2);
position: absolute; position: absolute;
top: 0.9rem; top: calc(0.9rem*1.2);
right: 0.9rem; right: calc(0.9rem*1.2);
text-align: center; text-align: center;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
left: auto; left: auto;
.icon-shanchu { .icon-shanchu {
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; color: #fff;
} }
} }
@@ -923,238 +923,5 @@ export default defineComponent({
} }
} }
} }
.my_material_modal {
border-radius: 2rem;
.ant-modal-close {
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header {
display: none;
}
.ant-modal-body {
background: #f2f3fb;
height: 80vh;
min-height: 72rem;
overflow-y: hidden;
padding: 0;
}
.my_material_header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 6.6rem;
background: #f7f7f7;
padding: 0 3.4rem 0 3.1rem;
.my_material_title {
font-size: 1.8rem;
color: #030303;
font-weight: 500;
}
.my_material_header_right {
display: flex;
justify-content: space-between;
align-items: center;
.content_search_block {
margin-right: 5rem;
display: flex;
.search_input {
width: 30rem;
padding-left: 1.5rem;
height: 4rem;
line-height: 3.8rem;
background: #ffffff;
border: 0.1rem solid #f1f1f1;
font-size: 1.6rem;
font-weight: 400;
&::placeholder {
color: #c2c2c2;
}
}
.search_icon_block {
width: 6rem;
height: 4rem;
line-height: 4rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo {
font-size: 2rem;
color: #ffffff;
}
}
}
.icon_close {
color: rgba(174, 178, 183, 1);
font-size: 2.4rem;
cursor: pointer;
}
}
}
.my_material_content {
padding: 0 3rem 3.5rem 3rem;
height: calc(100% - 6.6rem);
position: relative;
.material_content_top {
padding: 1.3rem 0 2.1rem;
height: 7rem;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.material_content_top_title {
font-size: 2rem;
color: #030303;
}
.material_content_top_right {
display: flex;
align-items: center;
.select_block {
background: #ffffff;
color: #1a1a1a !important;
margin-right: 2.3rem;
.icon-xiala {
color: #1a1a1a !important;
}
}
.check_all_block {
display: flex;
align-items: center;
font-size: 1.6rem;
color: #64686d;
cursor: pointer;
&.check_all {
color: #1a1a1a;
}
.check_block {
width: 2.4rem;
height: 2.4rem;
background: #ebecf4;
border: 0.1rem solid #64686d;
padding: 0.3rem;
margin-right: 0.7rem;
.check_block_body {
width: 100%;
height: 100%;
background: #343579;
}
}
}
}
}
.material_content_body {
width: 100%;
height: calc(100% - 19rem);
overflow-y: auto;
position: relative;
.content_img_item {
display: inline-block;
vertical-align: top;
padding: 0 1.4rem;
margin-bottom: 2.8rem;
.content_img_item_block {
border: 0.1rem solid transparent;
width: 16.5rem;
height: 16.5rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
&.select_item_img {
border-color: #343579;
}
.print_content_img {
width: 100%;
height: 100%;
}
.content_img {
max-width: 100%;
max-height: 100%;
}
}
.content_img_name {
width: 16.5rem;
height: 3.5rem;
line-height: 3.5rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.4rem;
color: #030303;
}
}
}
.no_data_block {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
z-index: 99;
&.loading_block {
background: rgba(0, 0, 0, 0.2);
}
}
.material_confirm {
width: 9.8rem;
height: 3.6rem;
line-height: 3.6rem;
font-size: 1.4rem;
text-align: center;
margin: 0 auto;
color: #ffffff;
background: #343579;
cursor: pointer;
margin-top: 2rem;
}
.table_pagination {
position: absolute;
bottom: 3.5rem;
left: 0;
width: 100%;
text-align: center;
margin-top: 5rem;
}
}
}
</style> </style>

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

@@ -372,18 +372,18 @@ export default defineComponent({
</script> </script>
<style lang="less"> <style lang="less">
.my_material_modal{ .my_material_modal{
height: 30rem; height: calc(30rem*1.2);
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
flex: 1; flex: 1;
border-radius: 0; border-radius: 0;
&.my_material_modal::-webkit-scrollbar{display: none;} &.my_material_modal::-webkit-scrollbar{display: none;}
.ant-modal-close{ .ant-modal-close{
width: 3.6rem; width: calc(3.6rem*1.2);
height: 3.6rem; height: calc(3.6rem*1.2);
position: absolute; position: absolute;
top: -1.8rem; top: calc(-1.8rem*1.2);
right: -1.8rem; right: calc(-1.8rem*1.2);
} }
.ant-modal-header{ .ant-modal-header{
@@ -393,7 +393,7 @@ export default defineComponent({
.ant-modal-body{ .ant-modal-body{
background: #F2F3FB; background: #F2F3FB;
height: 80vh; height: 80vh;
min-height: 72rem; min-height: calc(72rem*1.2);
overflow-y: hidden; overflow-y: hidden;
padding: 0; padding: 0;
} }
@@ -405,8 +405,8 @@ export default defineComponent({
width: 100%; width: 100%;
height: auto; height: auto;
padding: 0; padding: 0;
padding-top: 2.5rem; padding-top: calc(2.5rem*1.2);
padding-bottom: 2rem; padding-bottom: calc(2rem*1.2);
background-color: #fff; background-color: #fff;
position: sticky; position: sticky;
top: 0; top: 0;
@@ -417,20 +417,20 @@ export default defineComponent({
align-items: center; align-items: center;
.content_search_block{ .content_search_block{
margin-right: 5rem; margin-right: calc(5rem*1.2);
display: flex; display: flex;
.search_input{ .search_input{
width: 15rem; width: calc(15rem*1.2);
padding-left: 1.5rem; padding-left: calc(1.5rem*1.2);
// height: 4rem; // height: 4rem*1.2);
// line-height: 3.8rem; // line-height: 3.8rem*1.2);
// background: #FFFFFF; // background: #FFFFFF;
border: 0.1rem solid #F1F1F1; border:calc( 0.1rem*1.2) solid #F1F1F1;
// font-size: 1.6rem; // font-size: 1.6rem*1.2);
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
font-weight: 400; font-weight: 400;
height: 3rem; height: calc(3rem*1.2);
&::placeholder { &::placeholder {
color: #C2C2C2; color: #C2C2C2;
@@ -438,15 +438,15 @@ export default defineComponent({
} }
.search_icon_block{ .search_icon_block{
width: 5rem; width: calc(5rem*1.2);
height: 3rem; height: calc(3rem*1.2);
line-height: 3rem; line-height: calc(3rem*1.2);
text-align: center; text-align: center;
background: #343579; background: #343579;
cursor: pointer; cursor: pointer;
.icon-sousuo{ .icon-sousuo{
font-size: 2rem; font-size: calc(2rem*1.2);
color: #FFFFFF; color: #FFFFFF;
} }
} }
@@ -454,7 +454,7 @@ export default defineComponent({
.icon_close{ .icon_close{
color: rgba(174, 178, 183, 1); color: rgba(174, 178, 183, 1);
font-size: 2.4rem; font-size: calc(2.4rem*1.2);
cursor: pointer; cursor: pointer;
} }
} }
@@ -463,22 +463,22 @@ export default defineComponent({
} }
.my_material_content{ .my_material_content{
// padding: 0 3rem 3.5rem 3rem; // padding: 0 3rem*1.2) 3.5rem*1.2) 3rem*1.2);
padding: 0; padding: 0;
// height: calc(100% - 6.6rem); // height: calc(100% - 6.6rem*1.2));
height: auto; height: auto;
position: relative; position: relative;
.material_content_top{ .material_content_top{
padding: 1.3rem 0 2.1rem; padding: calc(1.3rem*1.2) 0 calc(2.1rem*1.2);
height: 7rem; height: calc(7rem*1.2);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
.material_content_top_title{ .material_content_top_title{
font-size: 2rem; font-size: calc(2rem*1.2);
color: #030303; color: #030303;
} }
@@ -489,7 +489,7 @@ export default defineComponent({
.select_block{ .select_block{
background: #FFFFFF; background: #FFFFFF;
color: #1A1A1A !important; color: #1A1A1A !important;
margin-right: 2.3rem; margin-right: calc(2.3rem*1.2);
.icon-xiala{ .icon-xiala{
color: #1A1A1A !important; color: #1A1A1A !important;
@@ -499,7 +499,7 @@ export default defineComponent({
.check_all_block{ .check_all_block{
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #64686D; color: #64686D;
cursor: pointer; cursor: pointer;
@@ -508,12 +508,12 @@ export default defineComponent({
} }
.check_block{ .check_block{
width: 2.4rem; width: calc(2.4rem*1.2);
height: 2.4rem; height: calc(2.4rem*1.2);
background: #EBECF4; background: #EBECF4;
border: 0.1rem solid #64686D; border: calc(0.1rem*1.2) solid #64686D;
padding: 0.3rem; padding: calc(0.3rem*1.2);
margin-right: 0.7rem; margin-right:calc( 0.7rem*1.2);
.check_block_body{ .check_block_body{
width: 100%; width: 100%;
@@ -528,18 +528,18 @@ export default defineComponent({
.material_content_body{ .material_content_body{
width: 100%; width: 100%;
// height: calc(100% - 19rem); // height: calc(100% - 19rem*1.2));
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
height: 30rem; height: calc(30rem*1.2);
&.material_content_body::-webkit-scrollbar{display: none;} &.material_content_body::-webkit-scrollbar{display: none;}
.content_img_item{ .content_img_item{
margin: 0 2rem 5rem 0; margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
display: inline-block; display: inline-block;
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@@ -550,30 +550,30 @@ export default defineComponent({
height: 100%; height: 100%;
} }
&.moodb{ &.moodb{
margin: 0 2rem 2rem 0; margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
} }
.pin_block{ .pin_block{
.ant-checkbox-wrapper{ .ant-checkbox-wrapper{
height: 2.2rem; height:calc(2.2rem*1.2);
align-items: center; align-items: center;
span{ span{
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
line-height: 2.3rem; line-height: calc(2.3rem*1.2);
} }
.ant-checkbox-inner{ .ant-checkbox-inner{
width: 1.6rem; width:calc( 1.6rem*1.2);
height: 1.6rem; height: calc(1.6rem*1.2);
} }
.ant-checkbox-inner::after{ .ant-checkbox-inner::after{
width: .571428571rem; width: calc(.571428571rem*1.2);
height: .914285714rem; height: calc(.914285714rem*1.2);
} }
} }
} }
&.active{ &.active{
opacity: 0.5; opacity: 0.5;
// border: 2px solid; // border: 2px solid;
border-radius: 1rem; border-radius: calc(1rem*1.2);
transform: scale(0.9); transform: scale(0.9);
img { img {
} }
@@ -587,21 +587,21 @@ export default defineComponent({
} }
} }
.content_img_name{ .content_img_name{
width: 16.5rem; width: calc(16.5rem*1.2);
height: 3.5rem; height: calc(3.5rem*1.2);
line-height: 3.5rem; line-height: calc(3.5rem*1.2);
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
color: #030303; color: #030303;
} }
} }
.material_content_list_loding{ .material_content_list_loding{
text-align: center; text-align: center;
img{ img{
height: 10rem; height: calc(10rem*1.2);
} }
} }
@@ -624,25 +624,25 @@ export default defineComponent({
} }
.material_confirm{ .material_confirm{
width: 9.8rem; width: calc(9.8rem*1.2);
height: 3.6rem; height: calc(3.6rem*1.2);
line-height: 3.6rem; line-height: calc(3.6rem*1.2);
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
color: #FFFFFF; color: #FFFFFF;
background: #343579; background: #343579;
cursor: pointer; cursor: pointer;
margin-top: 2rem; margin-top: calc(2rem*1.2);
} }
.table_pagination{ .table_pagination{
position: absolute; position: absolute;
bottom: 3.5rem; bottom: calc(3.5rem*1.2);
left: 0; left: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-top: 5rem; margin-top: calc(5rem*1.2);
} }
} }
} }

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

@@ -127,8 +127,8 @@
</div> </div>
<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish"> <div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
<div class="modal_text"> <div class="modal_text">
<div>Layout of selected moodboard</div> <div>{{ $t('MoodboardUpload.selected') }}</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div> <div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
</div> </div>
<div class="modal_img_max"> <div class="modal_img_max">
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}"> <div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
@@ -505,11 +505,11 @@ export default defineComponent({
height: 100%; height: 100%;
display: flex; display: flex;
.modal_left { .modal_left {
padding-top: 4rem; padding-top: calc(4rem*1.2);
width: 47%; width: 47%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// width: 50rem; // width: 50rem*1.2);
.switch_type_list { .switch_type_list {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -518,14 +518,14 @@ export default defineComponent({
.switch_type_item { .switch_type_item {
display: flex; display: flex;
align-items: center; align-items: center;
// padding: 0 2rem; // padding: 0 2rem*1.2);
height: 4rem; height: calc(4rem*1.2);
background: #fff; background: #fff;
border-radius: 0.8rem; border-radius: calc(0.8rem*1.2);
line-height: 4rem; line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8); font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem; // margin-right: 2.2rem*1.2);
margin-right: 8rem; margin-right: calc(8rem*1.2);
color: #000; color: #000;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@@ -538,10 +538,10 @@ export default defineComponent({
content: ""; content: "";
display: block; display: block;
background: #000; background: #000;
height: .3rem; height: calc(.3rem*1.2);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: .6rem; bottom: calc(.6rem*1.2);
width: 0px; width: 0px;
transition: 0.3s all; transition: 0.3s all;
} }
@@ -555,16 +555,16 @@ export default defineComponent({
} }
.switch_icon { .switch_icon {
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
margin-right: 0.8rem; margin-right: calc(0.8rem*1.2);
} }
} }
} }
.moodboard_body { .moodboard_body {
padding-top: 2.5rem; padding-top: calc(2.5rem*1.2);
flex: 1; flex: 1;
height: 30rem; height: calc(30rem*1.2);
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
display: flex; display: flex;
@@ -575,7 +575,7 @@ export default defineComponent({
.upload_img_body { .upload_img_body {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
} }
@@ -584,19 +584,19 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
color: #030303; color: #030303;
.icon-zhuyi { .icon-zhuyi {
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
margin-right: 0.7rem; margin-right: calc(0.7rem*1.2);
} }
} }
} }
} }
.modal_right{ .modal_right{
flex: 1; flex: 1;
margin-left: 3rem; margin-left: calc(3rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.modal_layout,.modal_accomplish{ .modal_layout,.modal_accomplish{
@@ -611,18 +611,18 @@ export default defineComponent({
} }
.modal_layout{ .modal_layout{
.modal_img{ .modal_img{
width: 40rem; width: calc(40rem*1.2);
height: 5rem; height: calc(5rem*1.2);
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
&.modal_img::-webkit-scrollbar { &.modal_img::-webkit-scrollbar {
display: none; display: none;
} }
.modal_img_item{ .modal_img_item{
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
text-align: center; text-align: center;
margin: 0 1rem 1rem 0; margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
@@ -651,19 +651,19 @@ export default defineComponent({
} }
} }
.modal_accomplish{ .modal_accomplish{
// margin-top: 2rem; // margin-top: 2rem*1.2);
height: 30rem; height: calc(30rem*1.2);
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
.modal_text{ .modal_text{
padding-top: 2rem; padding-top: calc(2rem*1.2);
padding-block: 2rem; padding-block: calc(2rem*1.2);
} }
.modal_img_max{ .modal_img_max{
// flex: 1; // flex: 1;
width: 57rem; width: calc(57rem*1.2);
height: 35rem; height: calc(35rem*1.2);
position: relative; position: relative;
.mark_loading{ .mark_loading{
position: absolute; position: absolute;

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

@@ -221,7 +221,7 @@ export default defineComponent({
swtich_type:'upload', swtich_type:'upload',
indicator : h(LoadingOutlined, { indicator : h(LoadingOutlined, {
style: { style: {
fontSize: '2.4rem', fontSize: '2.4rem*1.2)',
}, },
spin: true, spin: true,
}), }),
@@ -782,18 +782,13 @@ export default defineComponent({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.printboard_upload_modal{ .printboard_upload_modal{
// padding: 1rem 1rem 1.8rem 1rem; // padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
height: 100%; height: 100%;
display: flex; display: flex;
.printboard_left_upload{ .printboard_left_upload{
// width: calc(100% - 39.8rem);
// height: 100%;
// background: #fff;
// padding: 0.5rem 2.2rem 2rem 2.6rem;
// box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 4rem; padding-top: calc(4rem*1.2);
width: 47%; width: 47%;
.switch_type_list { .switch_type_list {
display: flex; display: flex;
@@ -803,14 +798,14 @@ export default defineComponent({
.switch_type_item { .switch_type_item {
display: flex; display: flex;
align-items: center; align-items: center;
// padding: 0 2rem; // padding: 0 2rem*1.2);
height: 4rem; height: calc(4rem*1.2);
background: #fff; background: #fff;
border-radius: 0.8rem; border-radius: calc(0.8rem*1.2);
line-height: 4rem; line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8); font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem; // margin-right: 2.2rem*1.2);
margin-right: 8rem; margin-right: calc(8rem*1.2);
color: #000; color: #000;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@@ -823,10 +818,10 @@ export default defineComponent({
content: ""; content: "";
display: block; display: block;
background: #000; background: #000;
height: .3rem; height: calc(.3rem*1.2);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: .6rem; bottom: calc(.6rem*1.2);
width: 0px; width: 0px;
transition: 0.3s all; transition: 0.3s all;
} }
@@ -840,8 +835,8 @@ export default defineComponent({
} }
.switch_icon { .switch_icon {
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
margin-right: 0.8rem; margin-right: calc(0.8rem*1.2);
} }
} }
} }
@@ -849,30 +844,30 @@ export default defineComponent({
.printboard_body{ .printboard_body{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// height: calc(100% - 5rem); // height: calc(100% - 5rem*1.2));
flex: 1; flex: 1;
padding-top: 2.5rem; padding-top: calc(2.5rem*1.2);
height: 30rem; height: calc(30rem*1.2);
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
&.printboard_body::-webkit-scrollbar { &.printboard_body::-webkit-scrollbar {
display: none; display: none;
} }
.upload_img_body{ .upload_img_body{
height: calc(100% - 3rem); height: calc(100% - 3rem*1.2);
overflow-y: auto; overflow-y: auto;
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar { &.upload_img_body::-webkit-scrollbar {
display: none; display: none;
} }
} }
.upload_file_item{ .upload_file_item{
margin: 0 2rem 5rem 0; margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
// margin: 0 2rem 2rem 0; // margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block; display: inline-block;
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
@@ -897,10 +892,10 @@ export default defineComponent({
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
:deep(.ant-upload-select-picture-card) { :deep(.ant-upload-select-picture-card) {
width: 6rem; width: calc(6rem*1.2);
height: 6rem; height: calc(6rem*1.2);
border: 0.3rem solid #ededed; border: calc(0.3rem*1.2) solid #ededed;
border-radius: 1rem; border-radius: calc(1rem*1.2);
margin: 0; margin: 0;
} }
} }
@@ -941,37 +936,37 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
color: #030303; color: #030303;
.icon-zhuyi { .icon-zhuyi {
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
margin-right: 0.7rem; margin-right: calc(0.7rem*1.2);
} }
} }
} }
} }
.delete_like_file_block{ .delete_like_file_block{
display: none; display: none;
width: 3.2rem; width: calc(3.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: rgba(0,0,0,0.6); background: rgba(0,0,0,0.6);
border-radius: 0.4rem; border-radius: calc(0.4rem*1.2);
position: absolute; position: absolute;
top: 0.9rem; top: calc(0.9rem*1.2);
right: 0.9rem; right: calc(0.9rem*1.2);
text-align: center; text-align: center;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
left: auto; left: auto;
&.left{ &.left{
left: .9rem; left: calc(.9rem*1.2);
} }
.icon-shanchu{ .icon-shanchu{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; color: #fff;
} }
i{ i{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; color: #fff;
&.fi-rr-heart{ &.fi-rr-heart{
@@ -984,7 +979,7 @@ export default defineComponent({
.modal_right{ .modal_right{
flex: 1; flex: 1;
margin-left: 3rem; margin-left: calc(3rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.modal_layout,.modal_accomplish{ .modal_layout,.modal_accomplish{
@@ -999,8 +994,8 @@ export default defineComponent({
} }
.modal_layout{ .modal_layout{
.modal_img{ .modal_img{
width: 40rem; width: calc(40rem*1.2);
height: 5rem; height: calc(5rem*1.2);
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -1008,9 +1003,9 @@ export default defineComponent({
display: none; display: none;
} }
.modal_img_item{ .modal_img_item{
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
margin: 0 1rem 1rem 0; margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
@@ -1040,8 +1035,8 @@ export default defineComponent({
} }
} }
.modal_accomplish{ .modal_accomplish{
// margin-top: 2rem; // margin-top: 2rem*1.2);
height: 30rem; height: calc(30rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@@ -1057,8 +1052,8 @@ export default defineComponent({
display: none; display: none;
} }
.modal_text{ .modal_text{
padding-top: 2rem; padding-top: calc(2rem*1.2);
padding-block: 2rem; padding-block: calc(2rem*1.2);
} }
.input_box{ .input_box{
input{ input{
@@ -1074,10 +1069,10 @@ export default defineComponent({
position: relative; position: relative;
align-content: flex-start; align-content: flex-start;
.modal_imgItem{ .modal_imgItem{
margin: 0 2rem 5rem 0; margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
display: inline-block; display: inline-block;
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@@ -1093,7 +1088,7 @@ export default defineComponent({
&.active{ &.active{
opacity: 0.5; opacity: 0.5;
// border: 2px solid; // border: 2px solid;
border-radius: 1rem; border-radius: calc(1rem*1.2);
transform: scale(0.9); transform: scale(0.9);
img { img {
} }

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

@@ -799,7 +799,7 @@ export default defineComponent({
height: 100%; height: 100%;
display: flex; display: flex;
.modal_left { .modal_left {
padding-top: 4rem; padding-top: calc(4rem*1.2);
width: 47%; width: 47%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -811,14 +811,14 @@ export default defineComponent({
.switch_type_item { .switch_type_item {
display: flex; display: flex;
align-items: center; align-items: center;
// padding: 0 2rem; // padding: 0 2rem*1.2);
height: 4rem; height: calc(4rem*1.2);
background: #fff; background: #fff;
border-radius: 0.8rem; border-radius: calc(0.8rem*1.2);
line-height: 4rem; line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8); font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem; // margin-right: 2.2rem*1.2);
margin-right: 8rem; margin-right: calc(8rem*1.2);
color: #000; color: #000;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@@ -831,10 +831,10 @@ export default defineComponent({
content: ""; content: "";
display: block; display: block;
background: #000; background: #000;
height: .3rem; height: calc(.3rem*1.2);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: .6rem; bottom: calc(.6rem*1.2);
width: 0px; width: 0px;
transition: 0.3s all; transition: 0.3s all;
} }
@@ -848,16 +848,16 @@ export default defineComponent({
} }
.switch_icon { .switch_icon {
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
margin-right: 0.8rem; margin-right: calc(0.8rem*1.2);
} }
} }
} }
.sketchboard_body { .sketchboard_body {
// height: calc(100% - 5rem); // height: calc(100% - 5rem*1.2));
flex: 1; flex: 1;
padding-top: 2.5rem; padding-top: calc(2.5rem*1.2);
height: 30rem; height: calc(30rem*1.2);
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
display: flex; display: flex;
@@ -866,9 +866,9 @@ export default defineComponent({
display: none; display: none;
} }
.upload_img_body { .upload_img_body {
height: calc(100% - 3rem); height: calc(100% - 3rem*1.2);
overflow-y: auto; overflow-y: auto;
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar { &.upload_img_body::-webkit-scrollbar {
display: none; display: none;
} }
@@ -876,11 +876,11 @@ export default defineComponent({
.upload_file_item{ .upload_file_item{
margin: 0 2rem 4rem 0; margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
// margin: 0 2rem 2rem 0; // margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block; display: inline-block;
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
@@ -898,10 +898,10 @@ export default defineComponent({
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
:deep(.ant-upload-select-picture-card) { :deep(.ant-upload-select-picture-card) {
width: 6rem; width: calc(6rem*1.2);
height: 6rem; height: calc(6rem*1.2);
border: 0.3rem solid #ededed; border: calc(0.3rem*1.2) solid #ededed;
border-radius: 1rem; border-radius: calc(1rem*1.2);
margin: 0; margin: 0;
} }
.checked{ .checked{
@@ -943,37 +943,37 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
color: #030303; color: #030303;
.icon-zhuyi { .icon-zhuyi {
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
margin-right: 0.7rem; margin-right: calc(0.7rem*1.2);
} }
} }
} }
} }
.delete_like_file_block{ .delete_like_file_block{
display: none; display: none;
width: 3.2rem; width: calc(3.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: rgba(0,0,0,0.6); background: rgba(0,0,0,0.6);
border-radius: 0.4rem; border-radius: calc(0.4rem*1.2);
position: absolute; position: absolute;
top: 0.9rem; top: calc(0.9rem*1.2);
right: 0.9rem; right: calc(0.9rem*1.2);
text-align: center; text-align: center;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
left: auto; left: auto;
&.left{ &.left{
left: .9rem; left: calc(.9rem*1.2);
} }
.icon-shanchu{ .icon-shanchu{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; color: #fff;
} }
i{ i{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
color: #fff; color: #fff;
&.fi-rr-heart{ &.fi-rr-heart{
@@ -987,7 +987,7 @@ export default defineComponent({
.modal_right{ .modal_right{
flex: 1; flex: 1;
margin-left: 3rem; margin-left: calc(3rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.modal_layout,.modal_accomplish{ .modal_layout,.modal_accomplish{
@@ -1002,8 +1002,8 @@ export default defineComponent({
} }
.modal_layout{ .modal_layout{
.modal_img{ .modal_img{
width: 40rem; width: calc(40rem*1.2);
height: 5rem; height: calc(5rem*1.2);
// overflow-x: hidden; // overflow-x: hidden;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -1015,9 +1015,9 @@ export default defineComponent({
display: flex; display: flex;
} }
.modal_img_item{ .modal_img_item{
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
margin: 0 1rem 1rem 0; margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative; position: relative;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@@ -1048,8 +1048,8 @@ export default defineComponent({
} }
} }
.modal_accomplish{ .modal_accomplish{
// margin-top: 2rem; // margin-top: 2rem*1.2);
height: 30rem; height: calc(30rem*1.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
@@ -1063,8 +1063,8 @@ export default defineComponent({
display: none; display: none;
} }
.modal_text{ .modal_text{
padding-top: 2rem; padding-top: calc(2rem*1.2);
padding-block: 2rem; padding-block:calc(2rem*1.2);
} }
.input_box{ .input_box{
z-index: 1; z-index: 1;
@@ -1082,10 +1082,10 @@ export default defineComponent({
align-content: flex-start; align-content: flex-start;
position: relative; position: relative;
.modal_imgItem{ .modal_imgItem{
margin: 0 2rem 4rem 0; margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
display: inline-block; display: inline-block;
width: 10rem; width: calc(10rem*1.2);
height: 10rem; height: calc(10rem*1.2);
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@@ -1100,7 +1100,7 @@ export default defineComponent({
&.active{ &.active{
opacity: 0.5; opacity: 0.5;
// border: 2px solid; // border: 2px solid;
border-radius: 1rem; border-radius: calc(1rem*1.2);
transform: scale(0.9); transform: scale(0.9);
// img { // img {
// } // }

2
src/component/HomePage/affiche.vue
View File

@@ -103,7 +103,7 @@ export default defineComponent({
.ant-modal-body { .ant-modal-body {
padding: 0; padding: 0;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem);
height: calc(100rem*.614); height: calc(65rem*1.2);
// background-color: #181818; // background-color: #181818;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@@ -3,7 +3,7 @@
<a-modal class="modal_component collection_modal Guide_1_2" <a-modal class="modal_component collection_modal Guide_1_2"
v-model:visible="showCollectionModal" v-model:visible="showCollectionModal"
:footer="null" :footer="null"
width="65%" width="78%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
@@ -306,18 +306,18 @@ export default defineComponent({
position: absolute; position: absolute;
} }
.collection_title{ .collection_title{
top: 4rem; top: calc(4rem*1.2);
display: flex; display: flex;
font-size: var(--aida-fsize2); font-size: var(--aida-fsize2);
font-weight: 900; font-weight: 900;
color: rgba(0,0,0,.65); color: rgba(0,0,0,.65);
z-index: 2; z-index: 2;
align-items: center; align-items: center;
width: 35rem; width: calc(35rem*1.2);
justify-content: space-between; justify-content: space-between;
.collection_progress{ .collection_progress{
width: 8rem; width: calc(8rem*1.2);
height: 8rem; height: calc(8rem*1.2);
>div{ >div{
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
@@ -328,7 +328,7 @@ export default defineComponent({
} }
} }
.collection_title_text{ .collection_title_text{
// margin-right: 4rem; // margin-right: calc(4rem*1.2);
} }
.collection_title_text_intro{ .collection_title_text_intro{
font-size: var(--aida-fsize1-4); font-size: var(--aida-fsize1-4);
@@ -338,17 +338,17 @@ export default defineComponent({
} }
.collection_closeIcon{ .collection_closeIcon{
top: 2rem; top: calc(2rem*1.2);
right: 2rem; right: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.fi-rr-cross-small::before{ .fi-rr-cross-small::before{
padding: .2rem; padding: calc(.2rem*1.2);
border-radius: 5px; border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25); border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all; transition: 1s all;
@@ -362,10 +362,10 @@ export default defineComponent({
.collection_page{ .collection_page{
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: 3rem; bottom: calc(3rem*1.2);
display: flex; display: flex;
.fi-rr-arrow-small-left{ .fi-rr-arrow-small-left{
margin-right: 10rem; margin-right: calc(10rem*1.2);
} }
.fi{ .fi{
cursor: pointer; cursor: pointer;
@@ -385,36 +385,36 @@ export default defineComponent({
} }
} }
.header_icon_fanhui{ .header_icon_fanhui{
margin-right: 1rem; margin-right: calc(1rem*1.2);
font-size: 2rem; font-size: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
} }
.header_right_block{ .header_right_block{
display: flex; display: flex;
align-items: center; align-items: center;
position: absolute; position: absolute;
right: 2.1rem; right: calc(2.1rem*1.2);
height: 100%; height: 100%;
.next_step_button{ .next_step_button{
padding: 0 1.2rem; padding: 0 calc(1.2rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: #343579; background: #343579;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
color: #FFFFFF; color: #FFFFFF;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
margin-right: 1.6rem; margin-right: calc(1.6rem*1.2);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.header_cancel_button{ .header_cancel_button{
padding: 0 2.1rem; padding: 0 calc(2.1rem*1.2);
height: 3.2rem; height: calc(3.2rem*1.2);
background: #E4E5EB; background: #E4E5EB;
font-size: 1.4rem; font-size: calc(1.4rem*1.2);
color: #030303; color: #030303;
line-height: 3.2rem; line-height: calc(3.2rem*1.2);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
@@ -431,16 +431,16 @@ export default defineComponent({
// max-width: 1200px ; // max-width: 1200px ;
// max-width: 1150px ; // max-width: 1150px ;
.ant-modal-content{ .ant-modal-content{
border-radius: 1rem; border-radius: calc(1rem*1.2);
overflow: hidden; overflow: hidden;
.ant-modal-header{ .ant-modal-header{
background-color: #fff; background-color: #fff;
border-bottom: none; border-bottom: none;
} }
.ant-modal-body{ .ant-modal-body{
padding: 8rem 5rem !important; padding: calc(8rem*1.2) calc(5rem*1.2) !important;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem);
height: calc(100rem*.614); height: calc(65rem*1.2);
} }
//进度完成字体颜色 //进度完成字体颜色
@@ -449,7 +449,7 @@ 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; font-size: calc(1.6rem*1.2);
} }
} }
} }

60
src/component/HomePage/layout.vue
View File

@@ -4,7 +4,7 @@
class="layout_modal" class="layout_modal"
v-model:visible="layout" v-model:visible="layout"
:footer="null" :footer="null"
width="65%" width="78%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
@@ -653,10 +653,10 @@ export default defineComponent({
.ant-modal-body { .ant-modal-body {
padding: 0; padding: 0;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem);
height: calc(100rem*.614); height: calc(65rem*1.2);
} }
.ant-modal-content{ .ant-modal-content{
border-radius: 1rem; border-radius: calc(1rem*1.2);
} }
.layout_content { .layout_content {
@@ -665,34 +665,34 @@ export default defineComponent({
height: 100%; height: 100%;
.collection_title{ .collection_title{
position: absolute; position: absolute;
top: 4rem; top: calc(4rem*1.2);
display: flex; display: flex;
font-size: 1.8rem; font-size: calc(1.8rem*1.2);
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_title_text{ .collection_title_text{
margin-right: 4rem; margin-right: calc(4rem*1.2);
} }
.collection_title_text_intro{ .collection_title_text_intro{
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
font-weight: 400; font-weight: 400;
color: rgba(0,0,0,.45); color: rgba(0,0,0,.45);
} }
} }
.collection_closeIcon{ .collection_closeIcon{
position: absolute; position: absolute;
top: 2rem; top: calc(2rem*1.2);
right: 2rem; right: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.fi-rr-cross-small::before{ .fi-rr-cross-small::before{
padding: .2rem; padding: calc(.2rem*1.2);
border-radius: 5px; border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25); border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all; transition: 1s all;
@@ -705,7 +705,7 @@ export default defineComponent({
} }
.layout_nav{ .layout_nav{
display: flex; display: flex;
margin-top: 2rem; margin-top: calc(2rem*1.2);
justify-content: center; justify-content: center;
max-height: 13%; max-height: 13%;
overflow: hidden; overflow: hidden;
@@ -721,9 +721,9 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
img{ img{
object-fit: cover; object-fit: cover;
width:5rem; width:calc(5rem*1.2);
cursor: pointer; cursor: pointer;
margin: 0 2rem; margin: 0 calc(2rem*1.2);
max-height: 100%; max-height: 100%;
} }
} }
@@ -732,13 +732,13 @@ export default defineComponent({
.layout_centent{ .layout_centent{
display: flex; display: flex;
// height: 55%; // height: 55%;
height: 35rem; height: calc(35rem*1.2);
width: 57rem; width: calc(57rem*1.2);
// height: 60%; // height: 60%;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-around; align-content: space-around;
margin: 3rem auto; margin: calc(3rem*1.2) auto;
overflow: hidden; overflow: hidden;
// padding: 3rem 0; // padding: 3rem 0;
justify-content: space-between; justify-content: space-between;
@@ -762,8 +762,8 @@ export default defineComponent({
li{ li{
cursor: pointer; cursor: pointer;
// border-radius: 50%; // border-radius: 50%;
width: 1.5rem; width: calc(1.5rem*1.2);
height: 1.5rem; height: calc(1.5rem*1.2);
background-color: rgb(20, 188, 255); background-color: rgb(20, 188, 255);
position: absolute; position: absolute;
z-index: 1049; z-index: 1049;
@@ -814,8 +814,8 @@ export default defineComponent({
top: calc(50% - 30px); top: calc(50% - 30px);
left: 50%; left: 50%;
transform: translate(-50%,-50%) ; transform: translate(-50%,-50%) ;
width: 1.5rem; width: calc(1.5rem*1.2);
height: 1.5rem; height: calc(1.5rem*1.2);
border-radius: 50%; border-radius: 50%;
} }
.layout_translate{ .layout_translate{
@@ -827,8 +827,8 @@ export default defineComponent({
} }
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{ .layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
// opacity: 0; // opacity: 0;
width: .8rem; width: calc(.8rem*1.2);
height: .8rem; height: calc(.8rem*1.2);
} }
.layout_angle_tr{ .layout_angle_tr{
right: 0%; right: 0%;
@@ -911,7 +911,7 @@ export default defineComponent({
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
left: 5rem; left: calc(5rem*1.2);
overflow-x: hidden; overflow-x: hidden;
// background-color: #000; // background-color: #000;
width: 10%; width: 10%;
@@ -920,19 +920,19 @@ export default defineComponent({
display: none; display: none;
} }
.layout_left_text{ .layout_left_text{
font-size: 1.6rem; font-size: calc(1.6rem*1.2);
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
color: #000; color: #000;
} }
.layout_left_items{ .layout_left_items{
width: 100%; width: 100%;
height: 6rem; height: calc(6rem*1.2);
display: flex; display: flex;
align-content: space-between; align-content: space-between;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
.layout_left_item{ .layout_left_item{
box-sizing: border-box; box-sizing: border-box;
@@ -941,7 +941,7 @@ export default defineComponent({
} }
} }
.submit_button { .submit_button {
margin: 2rem auto 0; margin: calc(2rem*1.2) auto 0;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }

77
src/component/HomePage/layoutMobile.vue
View File

@@ -4,7 +4,7 @@
class="layout_modal" class="layout_modal"
v-model:visible="layout" v-model:visible="layout"
:footer="null" :footer="null"
width="65%" width="78%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
@@ -706,46 +706,46 @@ export default defineComponent({
.ant-modal-body { .ant-modal-body {
padding: 0; padding: 0;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem);
height: calc(100rem*.614); height: calc(65rem*1.2);
} }
.ant-modal-content{ .ant-modal-content{
border-radius: 1rem; border-radius: calc(1rem*1.2);
} }
.layout_content { .layout_content {
// background: #f2f3fb; // background: #f2f3fb;
// padding-bottom: 2.9rem; // padding-bottom: 2.9rem*1.2);
height: 100%; height: 100%;
.collection_title{ .collection_title{
position: absolute; position: absolute;
top: 4rem; top: calc(4rem*1.2);
display: flex; display: flex;
font-size: var(--aida-fsize2); font-size: var(--aida-fsize2);
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_title_text{ .collection_title_text{
margin-right: 4rem; margin-right: calc(4rem*1.2);
} }
.collection_title_text_intro{ .collection_title_text_intro{
font-size: 1.2rem; font-size: calc(1.2rem*1.2);
font-weight: 400; font-weight: 400;
color: rgba(0,0,0,.45); color: rgba(0,0,0,.45);
} }
} }
.collection_closeIcon{ .collection_closeIcon{
position: absolute; position: absolute;
top: 2rem; top: calc(2rem*1.2);
right: 2rem; right: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.fi-rr-cross-small::before{ .fi-rr-cross-small::before{
padding: .2rem; padding: calc(.2rem*1.2);
border-radius: 5px; border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25); border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all; transition: 1s all;
@@ -758,7 +758,7 @@ export default defineComponent({
} }
.layout_nav{ .layout_nav{
display: flex; display: flex;
margin-top: 2rem; margin-top: calc(2rem*1.2);
justify-content: center; justify-content: center;
max-height: 13%; max-height: 13%;
overflow: hidden; overflow: hidden;
@@ -774,9 +774,9 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
img{ img{
object-fit: cover; object-fit: cover;
width:5rem; width:calc(5rem*1.2);
cursor: pointer; cursor: pointer;
margin: 0 2rem; margin: 0 calc(2rem*1.2);
max-height: 100%; max-height: 100%;
} }
} }
@@ -785,16 +785,15 @@ export default defineComponent({
.layout_centent{ .layout_centent{
display: flex; display: flex;
// height: 55%; // height: 55%;
height: 35rem; height: calc(35rem*1.2);
width: 57rem; width: calc(57rem*1.2);
// height: 60%; // height: 60%;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-around; align-content: space-around;
width: 50%; margin: calc(3rem*1.2) auto;
margin: 3rem auto;
overflow: hidden; overflow: hidden;
// padding: 3rem 0; // padding: 3rem*1.2) 0;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
user-select:none user-select:none
@@ -816,8 +815,8 @@ export default defineComponent({
li{ li{
cursor: pointer; cursor: pointer;
// border-radius: 50%; // border-radius: 50%;
width: 2rem; width: calc(2rem*1.2);
height: 2rem; height: calc(2rem*1.2);
background-color: rgb(20, 188, 255); background-color: rgb(20, 188, 255);
position: absolute; position: absolute;
z-index: 1049; z-index: 1049;
@@ -868,8 +867,8 @@ export default defineComponent({
top: calc(50% - 30px); top: calc(50% - 30px);
left: 50%; left: 50%;
transform: translate(-50%,-50%) ; transform: translate(-50%,-50%) ;
width: 2rem; width: calc(2rem*1.2);
height: 2rem; height: calc(2rem*1.2);
border-radius: 50%; border-radius: 50%;
} }
.layout_translate{ .layout_translate{
@@ -881,8 +880,8 @@ export default defineComponent({
} }
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{ .layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
// opacity: 0; // opacity: 0;
width: 2rem; width: calc(2rem*1.2);
height: 2rem; height: calc(2rem*1.2);
} }
.layout_angle_tr{ .layout_angle_tr{
right: 0%; right: 0%;
@@ -965,7 +964,7 @@ export default defineComponent({
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
left: 5rem; left: calc(5rem*1.2);
overflow-x: hidden; overflow-x: hidden;
// background-color: #000; // background-color: #000;
width: 10%; width: 10%;
@@ -975,18 +974,18 @@ export default defineComponent({
} }
.layout_left_text{ .layout_left_text{
font-size: var(--aida-fsize1-6); font-size: var(--aida-fsize1-6);
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
color: #000; color: #000;
} }
.layout_left_items{ .layout_left_items{
width: 100%; width: 100%;
height: 6rem; height: calc(6rem*1.2);
display: flex; display: flex;
align-content: space-between; align-content: space-between;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
.layout_left_item{ .layout_left_item{
box-sizing: border-box; box-sizing: border-box;
@@ -998,7 +997,7 @@ export default defineComponent({
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
right: 5rem; right: calc(5rem*1.2);
// background-color: #000; // background-color: #000;
width: 8%; width: 8%;
height: 50%; height: 50%;
@@ -1007,18 +1006,18 @@ export default defineComponent({
} }
.layout_left_text{ .layout_left_text{
font-size: var(--aida-fsize1-6); font-size: var(--aida-fsize1-6);
margin-bottom: 1rem; margin-bottom: calc(1rem*1.2);
color: #000; color: #000;
} }
.layout_left_items{ .layout_left_items{
width: 100%; width: 100%;
height: 6rem; height: calc(6rem*1.2);
display: flex; display: flex;
align-content: space-between; align-content: space-between;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
margin-bottom: 2rem; margin-bottom: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
.layout_left_item{ .layout_left_item{
box-sizing: border-box; box-sizing: border-box;
@@ -1027,13 +1026,13 @@ export default defineComponent({
} }
.ant-slider{ .ant-slider{
margin: 0; margin: 0;
margin-top: 2rem; margin-top: calc(2rem*1.2);
padding: 0 1rem; padding: 0 calc(1rem*1.2);
.ant-slider-track, .ant-slider-track,
.ant-slider-rail { .ant-slider-rail {
height: .6rem; height: calc(.6rem*1.2);
background-color: #e1e1e1; background-color: #e1e1e1;
border-radius: 0.5rem; border-radius: calc(0.5rem*1.2);
} }
.ant-slider .ant-slider-handle:not(.ant-tooltip-open), .ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle { .ant-slider-handle {
@@ -1054,7 +1053,7 @@ export default defineComponent({
} }
.submit_button { .submit_button {
margin: 2rem auto 0; margin: calc(2rem*1.2) auto 0;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }

38
src/component/HomePage/scaleImage.vue
View File

@@ -3,7 +3,7 @@
class="scaleImage_modal" class="scaleImage_modal"
v-model:visible="scaleImage" v-model:visible="scaleImage"
:footer="null" :footer="null"
width="65%" width="78%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false" :closable="false"
@@ -151,7 +151,7 @@ export default defineComponent({
.ant-modal-body { .ant-modal-body {
padding: 0; padding: 0;
// height: calc(65vh - 6.4rem); // height: calc(65vh - 6.4rem);
height: calc(100rem*.614); height: calc(65rem*1.2);
// background-color: #181818; // background-color: #181818;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -162,19 +162,19 @@ export default defineComponent({
.scaleImage_btn { .scaleImage_btn {
.collection_closeIcon{ .collection_closeIcon{
position: absolute; position: absolute;
top: 2rem; top: calc(2rem*1.2);
right: 2rem; right: calc(2rem*1.2);
cursor: pointer; cursor: pointer;
width: 4rem; width: calc(4rem*1.2);
height: 4rem; height: calc(4rem*1.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&.left{ &.left{
left: 2rem; left: calc(2rem*1.2);
} }
.fi-rr-cross-small::before{ .fi-rr-cross-small::before{
padding: .2rem; padding: calc(.2rem*1.2);
border-radius: 5px; border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.22); border: solid 2px rgba(0, 0, 0, 0.22);
transition: .3s all; transition: .3s all;
@@ -197,16 +197,16 @@ export default defineComponent({
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 75%; height: 75%;
margin-top: 5rem; margin-top: calc(5rem*1.2);
img{ img{
width: auto; width: auto;
max-width: 50rem; max-width: calc(50rem*1.2);
height: 100%; height: 100%;
} }
} }
.scaleImage_nav{ .scaleImage_nav{
flex: 1; flex: 1;
margin: 2.5rem 0rem; margin: calc(2.5rem*1.2) calc(0rem*1.2);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -224,8 +224,8 @@ export default defineComponent({
} }
} }
.nav_list{ .nav_list{
margin: 0 2rem; margin: 0 calc(2rem*1.2);
max-width: 60rem; max-width: calc(60rem*1.2);
overflow-y: hidden; overflow-y: hidden;
&.nav_list::-webkit-scrollbar { &.nav_list::-webkit-scrollbar {
display: none; display: none;
@@ -235,22 +235,22 @@ export default defineComponent({
display: flex; display: flex;
} }
img{ img{
max-width: 5rem; max-width: calc(5rem*1.2);
max-height: 5rem; max-height: calc(5rem*1.2);
object-fit: cover; object-fit: cover;
object-position: 50%,50%; object-position: 50%,50%;
margin-left: 1rem; margin-left: calc(1rem*1.2);
border-radius: 1rem; border-radius: calc(1rem*1.2);
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
padding: .1rem; padding: calc(.1rem*1.2);
flex-shrink: 0; flex-shrink: 0;
&.active{ &.active{
border: 2px solid #aaaaaa; border: 2px solid #aaaaaa;
} }
} }
img:nth-child(1){ img:nth-child(1){
margin-left: 0rem; margin-left: calc(0rem*1.2);
} }
} }
} }

4
src/component/LibraryPage/setLabel.vue
View File

@@ -3,7 +3,7 @@
v-model:visible="setLabelShow" v-model:visible="setLabelShow"
:footer="null" :footer="null"
:title="$t('setLabel.EditTag')" :title="$t('setLabel.EditTag')"
width="65%" width="78%"
:maskClosable="false" :maskClosable="false"
:keyboard="false" :keyboard="false"
:centered="true" :centered="true"
@@ -356,7 +356,7 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
// height: 300px; // height: 300px;
min-height: 50rem; min-height: 50rem;
max-height: calc(100rem*.614); max-height: calc(65rem*1.2);
overflow-y: auto; overflow-y: auto;
// border-radius: ; // border-radius: ;
position: relative; position: relative;

56
src/lang/cn.ts
View File

@@ -223,6 +223,8 @@ export default {
Maximum:'最多可上传8张图片，每张图片最大2M', Maximum:'最多可上传8张图片，每张图片最大2M',
Thumbnail:'选择的情绪板缩略图', Thumbnail:'选择的情绪板缩略图',
layout:'布局', layout:'布局',
selected:'当前的情绪版布局',
Edit:'编辑',
jsContent1:'您最多可以选择8张图片', jsContent1:'您最多可以选择8张图片',
jsContent2:"上传失败", jsContent2:"上传失败",
jsContent3:"您只能上传图片文件！", jsContent3:"您只能上传图片文件！",
@@ -346,5 +348,57 @@ export default {
setLabel:{ setLabel:{
EditTag:'编辑标签', EditTag:'编辑标签',
jsContent1:'请输入标签名称', jsContent1:'请输入标签名称',
} },
guide:{
guide1:"在<strong>工作空间</strong>中，您可以个性化您的设计设置，包括选择适用于男装或女装的设计，以及选择用于创作的人体模型。",
guide2:"选择您要设计的服装性别。",
guide3:'在此更改人体模型。',
guide4:'您目前可以从我们的系统库中选择人体模型。稍后，您还可以在注册自己的人体模型后从用户库中进行选择。',
guide5:'在这里开始您的创意之旅。 ',
guide6:'对于情绪板、印花或服装，我们提供三种不同的图片添加方法。第一种选择是<strong>上传</strong>，允许您直接从本地设备上传。',
guide7:"第二种方法是从您的<strong>我的</strong>中选择。<br> 您可能会注意到您的库页面目前是空的；不必担心。您上传的所有图像都将自动添加到您的库中。将来，您无需每次上传，只需从您的库中选择即可。",
guide8:'第三种方法是使用最新的图像生成技术<strong>生成</strong>图像。',
guide9:"输入捕捉您希望表达的情绪的关键词，然后单击“生成”按钮。",
guide10:'为您的心情板选择两个图像。',
guide11:"点击此处布局您的情绪版。",
guide12:"点击此处生成印花图片。",
guide13:"点击此处生成印花图片。",
guide14:"我们为生成图片提供三个输入选项：仅图片、仅文本和图片文本。",
guide15:"选择此选项，我们将使用您上传的图片和输入的文本生成四张印花图片。",
guide16:"在此处选择生成模型；不同的模型将以不同的风格生成图片。",
guide17:"在此处选择生成模型；不同的模型将以不同的风格生成图片。",
guide18:"在此处上传输入图片。",
guide19:"点击此图片进行选择。",
guide20:"输入关于您希望创建的印花的关键词，然后点击“生成”按钮。",
guide21:"选择您最喜欢的生成印花。",
guide22:"点击此处进行下一步。",
guide23:"点击此处进行下一步。",
guide24:"从这些颜色块中选择您想要的第一种颜色。",
guide25:"点击此块选择第二种颜色。",
guide26:"从这些颜色块中选择您想要的颜色。",
guide27:"点击此处进行下一步。",
guide28:"点击此处生成服装草图。",
guide29:"使用仅文本选项进行生成。",
guide30:"输入关于您希望创建的草图的关键词，然后点击“生成”按钮。",
guide31:"点击此处为生成的草图选择一个类别。",
guide32:"为草图选择正确的类别。",
guide33:"选择您最喜欢的生成草图。",
guide34:"点击此处完成上传过程。",
guide35:"点击此处让AI生成设计插图。",
guide36:"请稍候几秒钟。",
guide37:"点击小红心保存您喜欢的设计。",
guide38:"点击“<strong>重新设计</strong>”以生成八个新的服装供您选择。",
guide39:"点击此处让AI生成设计插图。",
guide40:"点击您感兴趣的任何设计图片以修改细节。",
guide41:"点击衣服以修改其细节。",
guide42:"点击此处添加或更改印花。",
guide43:"您可以在我的中找到您之前上传的印花。",
guide44:"为此草图选择一个印花。",
guide45:"点击此处布局所选印花。",
guide46:"在此处预览印刷设计。",
guide47:"在此处保存印刷设计。",
guide48:"点击此处完成修改。",
guide49:"点击此处导出您刚刚设计的系列。",
guide50:"您的指南已经完成，现在您可以自由创作。要了解更多见解和细节，请查看我们主页上的演示视频：<a href='https://code-create.com.hk/aida/' style='pointer-events: auto;' target='_blank'>https://code-create.com.hk/aida/</a>。您可以随时告诉机器人您想重新开始教程。",
},
} }

56
src/lang/en.ts
View File

@@ -223,6 +223,8 @@ export default {
Maximum:'Maximum 8 images can be uploaded, Maximum 2M per image', Maximum:'Maximum 8 images can be uploaded, Maximum 2M per image',
Thumbnail:'Thumbnail preview of selected moodboard', Thumbnail:'Thumbnail preview of selected moodboard',
layout:'Layout', layout:'Layout',
selected:'Layout of selected moodboard',
Edit:'Edit',
jsContent1:'You can select up to 8 images', jsContent1:'You can select up to 8 images',
jsContent2:"upload failed", jsContent2:"upload failed",
jsContent3:"You can only upload Image file!", jsContent3:"You can only upload Image file!",
@@ -347,5 +349,57 @@ export default {
setLabel:{ setLabel:{
EditTag:'Edit Tag', EditTag:'Edit Tag',
jsContent1:'Please enter a tag name', jsContent1:'Please enter a tag name',
} },
guide:{
guide1:"You can personalize your design settings right here in the <strong>Workspace</strong>, including choosing to design for men's or women's wear, as well as selecting the mannequin to use for your creations.",
guide2:"Select the apparel type you'd like to work on.",
guide3:'Change the mannequin here.',
guide4:'You can currently select a mannequin from our system library. Later, you can also choose from the user library after registering your own mannequin.',
guide5:'Begin your creative journey here. ',
guide6:'For the Moodboard, Printboard, or Sketchboard, we provide three different sourcing methods to add images. The first option is <strong>Upload</strong>, allowing you to <stront>upload</stront> directly from your local device.',
guide7:"The second method is to select from your <strong>Library</strong>. <br> You might notice that your library page is currently empty; there's no need to worry. All the images you upload will be automatically added to your library. In the future, you won't have to upload each time—you can simply choose from your library instead.",
guide8:'The third method is to <strong>Generate</strong> images using the latest Image Generation technology.',
guide9:"Enter keywords that capture the mood you wish to express and then click the 'Generate' button.",
guide10:'Select two images for your moodboard.',
guide11:"Click here to layout your moodboard.",
guide12:"Click here for next step.",
guide13:"Click here to generate print images.",
guide14:"We provide three input options for generating images: Image Only, Text Only, and Text-Image.",
guide15:"Select this option and we will generate four print images using both the picture you upload and the text you enter.",
guide16:"Choose a generation model here; different models will generate images in various styles.",
guide17:"Choose a generation model here; different models will generate images in various styles.",
guide18:"Upload the input picture here.",
guide19:"Click on this image to select it.",
guide20:"Enter keywords about the print you wish to create and then click the 'Generate' button.",
guide21:"Select the generated prints you like best.",
guide22:"Click here for next step.",
guide23:"Click here to extract primary colors from image.",
guide24:"Select the color you want from these color blocks as the first color.",
guide25:"Click on this block to select the second color.",
guide26:"Choose the color you want from these color blocks.",
guide27:"Click here for next step.",
guide28:"Click here to generate clothing sketches.",
guide29:"Using text only option for generation.",
guide30:"Enter keywords about the sketch you wish to create and then click the 'Generate' button.",
guide31:"Click here to choose a category for the generated sketch.",
guide32:"Choose correct category for the sketch.",
guide33:"Select the generated sketches you like best.",
guide34:"Cick here to complete the uploading process.",
guide35:"Click here to let AI generate design illustrations.",
guide36:"Please wait a few seconds.",
guide37:"Click the little red heart to save your favorite design.",
guide38:"Click '<strong>Redesign</strong>' to generate eight new outfits for your collection to choose from.",
guide39:"Click here to let AI generate design illustrations.",
guide40:"Click on any design image you are interested in to modify the details.",
guide41:"Click on the clothes to modify its details.",
guide42:"Click here to add or change the print.",
guide43:"You can find the print you uploaded earlier in your Library.",
guide44:"Select a print for this sketch.",
guide45:"Click here to layout the selected print",
guide46:"Preview printed design here.",
guide47:"Save printed design here.",
guide48:"Click here to finalize your modification.",
guide49:"Click here to export the collection you just designed.",
guide50:"Your guide is complete, and now the canvas is yours to create freely. For more insights and details, check out our demo video on the homepage at <a href='https://code-create.com.hk/aida/' style='pointer-events: auto;' target='_blank'>https://code-create.com.hk/aida/</a><br>You can restart the tutorial at any time by simply telling the robot that you want to.",
},
} }

56
src/lang/fr.ts
View File

@@ -224,6 +224,8 @@ export default {
Maximum:'Un maximum de 8 images peuvent être téléchargées, maximum 2 M par image', Maximum:'Un maximum de 8 images peuvent être téléchargées, maximum 2 M par image',
Thumbnail:'Aperçu miniature du moodboard sélectionné', Thumbnail:'Aperçu miniature du moodboard sélectionné',
layout:'mise en page', layout:'mise en page',
selected:"Mise en page de la planche d'ambiance sélectionnée",
Edit:'Modifier',
jsContent1:"Vous pouvez sélectionner jusqu'à 8 images", jsContent1:"Vous pouvez sélectionner jusqu'à 8 images",
jsContent2:"échec du téléchargement", jsContent2:"échec du téléchargement",
jsContent3:"Vous pouvez uniquement télécharger un fichier image!", jsContent3:"Vous pouvez uniquement télécharger un fichier image!",
@@ -347,5 +349,57 @@ export default {
setLabel:{ setLabel:{
EditTag:'Modifier le tag', EditTag:'Modifier le tag',
jsContent1:'Veuillez saisir un nom de tag', jsContent1:'Veuillez saisir un nom de tag',
} },
guide:{
guide1:"You can personalize your design settings right here in the <strong>Workspace</strong>, including choosing to design for men's or women's wear, as well as selecting the mannequin to use for your creations.",
guide2:"Select the apparel type you'd like to work on.",
guide3:'Change the mannequin here.',
guide4:'You can currently select a mannequin from our system library. Later, you can also choose from the user library after registering your own mannequin.',
guide5:'Begin your creative journey here. ',
guide6:'For the Moodboard, Printboard, or Sketchboard, we provide three different sourcing methods to add images. The first option is <strong>Upload</strong>, allowing you to <stront>upload</stront> directly from your local device.',
guide7:"The second method is to select from your <strong>Library</strong>. <br> You might notice that your library page is currently empty; there's no need to worry. All the images you upload will be automatically added to your library. In the future, you won't have to upload each time—you can simply choose from your library instead.",
guide8:'The third method is to <strong>Generate</strong> images using the latest Image Generation technology.',
guide9:"Enter keywords that capture the mood you wish to express and then click the 'Generate' button.",
guide10:'Select two images for your moodboard.',
guide11:"Click here to layout your moodboard.",
guide12:"Click here for next step.",
guide13:"Click here to generate print images.",
guide14:"We provide three input options for generating images: Image Only, Text Only, and Text-Image.",
guide15:"Select this option and we will generate four print images using both the picture you upload and the text you enter.",
guide16:"Choose a generation model here; different models will generate images in various styles.",
guide17:"Choose a generation model here; different models will generate images in various styles.",
guide18:"Upload the input picture here.",
guide19:"Click on this image to select it.",
guide20:"Enter keywords about the print you wish to create and then click the 'Generate' button.",
guide21:"Select the generated prints you like best.",
guide22:"Click here for next step.",
guide23:"Click here to extract primary colors from image.",
guide24:"Select the color you want from these color blocks as the first color.",
guide25:"Click on this block to select the second color.",
guide26:"Choose the color you want from these color blocks.",
guide27:"Click here for next step.",
guide28:"Click here to generate clothing sketches.",
guide29:"Using text only option for generation.",
guide30:"Enter keywords about the sketch you wish to create and then click the 'Generate' button.",
guide31:"Click here to choose a category for the generated sketch.",
guide32:"Choose correct category for the sketch.",
guide33:"Select the generated sketches you like best.",
guide34:"Cick here to complete the uploading process.",
guide35:"Click here to let AI generate design illustrations.",
guide36:"Please wait a few seconds.",
guide37:"Click the little red heart to save your favorite design.",
guide38:"Click '<strong>Redesign</strong>' to generate eight new outfits for your collection to choose from.",
guide39:"Click here to let AI generate design illustrations.",
guide40:"Click on any design image you are interested in to modify the details.",
guide41:"Click on the clothes to modify its details.",
guide42:"Click here to add or change the print.",
guide43:"You can find the print you uploaded earlier in your Library.",
guide44:"Select a print for this sketch.",
guide45:"Click here to layout the selected print",
guide46:"Preview printed design here.",
guide47:"Save printed design here.",
guide48:"Click here to finalize your modification.",
guide49:"Click here to export the collection you just designed.",
guide50:"Your guide is complete, and now the canvas is yours to create freely. For more insights and details, check out our demo video on the homepage at <a href='https://code-create.com.hk/aida/' style='pointer-events: auto;' target='_blank'>https://code-create.com.hk/aida/</a><br>You can restart the tutorial at any time by simply telling the robot that you want to.",
},
} }

2
src/lang/it.ts
View File

@@ -223,6 +223,8 @@ export default {
Maximum:'È possibile caricare un massimo di 8 immagini, massimo 2 milioni per immagine', Maximum:'È possibile caricare un massimo di 8 immagini, massimo 2 milioni per immagine',
Thumbnail:'Anteprima in miniatura della moodboard selezionata', Thumbnail:'Anteprima in miniatura della moodboard selezionata',
layout:'disposizione', layout:'disposizione',
selected:'Layout della moodboard selezionata',
Edit:'Modificare',
jsContent1:'È possibile selezionare fino a 8 immagini', jsContent1:'È possibile selezionare fino a 8 immagini',
jsContent2:"caricamento fallito", jsContent2:"caricamento fallito",
jsContent3:"Puoi caricare solo il file immagine!", jsContent3:"Puoi caricare solo il file immagine!",

2
src/lang/ja.ts
View File

@@ -223,6 +223,8 @@ export default {
Maximum:'画像は最大8枚アップロード可能、1枚あたり最大2M', Maximum:'画像は最大8枚アップロード可能、1枚あたり最大2M',
Thumbnail:'選択したムードボードのサムネイル プレビュー', Thumbnail:'選択したムードボードのサムネイル プレビュー',
layout:'レイアウト', layout:'レイアウト',
selected:'選択されたムードボードのレイアウト',
Edit:'編集',
jsContent1:'最大8枚の画像を選択できます', jsContent1:'最大8枚の画像を選択できます',
jsContent2:"アップロードに失敗しました", jsContent2:"アップロードに失敗しました",
jsContent3:"画像ファイルのみアップロードできます!", jsContent3:"画像ファイルのみアップロードできます!",

2
src/lang/kr.ts
View File

@@ -223,6 +223,8 @@ export default {
Maximum:'최대 8개의 이미지를 업로드할 수 있으며, 이미지당 최대 2M', Maximum:'최대 8개의 이미지를 업로드할 수 있으며, 이미지당 최대 2M',
Thumbnail:'선택한 무드보드의 썸네일 미리보기', Thumbnail:'선택한 무드보드의 썸네일 미리보기',
layout:'정렬하려면', layout:'정렬하려면',
selected:'선택된 무드보드의 레이아웃',
Edit:'편집하다',
jsContent1:'최대 8개의 이미지를 선택할 수 있습니다.', jsContent1:'최대 8개의 이미지를 선택할 수 있습니다.',
jsContent2:"업로드 실패", jsContent2:"업로드 실패",
jsContent3:"이미지 파일만 업로드할 수 있습니다!", jsContent3:"이미지 파일만 업로드할 수 있습니다!",

2
src/lang/ru.ts
View File

@@ -223,6 +223,8 @@ export default {
Maximum:'Можно загрузить максимум 8 изображений, максимум 2 М на изображение.', Maximum:'Можно загрузить максимум 8 изображений, максимум 2 М на изображение.',
Thumbnail:'Предварительный просмотр миниатюр выбранного мудборда', Thumbnail:'Предварительный просмотр миниатюр выбранного мудборда',
layout:'макет', layout:'макет',
selected:'Макет выбранной мудборды',
Edit:'Редактировать',
jsContent1:'Вы можете выбрать до 8 изображений', jsContent1:'Вы можете выбрать до 8 изображений',
jsContent2:"Загрузка не удалась", jsContent2:"Загрузка не удалась",
jsContent3:"Вы можете загрузить только файл изображения!", jsContent3:"Вы можете загрузить только файл изображения!",

2
src/lang/th.ts
View File

@@ -223,6 +223,8 @@ export default {
Maximum:'สามารถอัพโหลดภาพได้สูงสุด 8 ภาพ สูงสุด 2M ต่อภาพ', Maximum:'สามารถอัพโหลดภาพได้สูงสุด 8 ภาพ สูงสุด 2M ต่อภาพ',
Thumbnail:'ภาพตัวอย่างขนาดย่อของมูดบอร์ดที่เลือก', Thumbnail:'ภาพตัวอย่างขนาดย่อของมูดบอร์ดที่เลือก',
layout:'เลย์เอาต์', layout:'เลย์เอาต์',
selected:'เค้าโครงของพื้นที่การสร้างความรู้สึกที่เลือก',
Edit:'แก้ไข',
jsContent1:'คุณสามารถเลือกได้สูงสุด 8 ภาพ', jsContent1:'คุณสามารถเลือกได้สูงสุด 8 ภาพ',
jsContent2:"การอัพโหลดล้มเหลว", jsContent2:"การอัพโหลดล้มเหลว",
jsContent3:"คุณสามารถอัปโหลดได้เฉพาะไฟล์รูปภาพเท่านั้น!", jsContent3:"คุณสามารถอัปโหลดได้เฉพาะไฟล์รูปภาพเท่านั้น!",

2
src/lang/vn.ts
View File

@@ -223,6 +223,8 @@ export default {
Maximum:'Có thể tải lên tối đa 8 hình ảnh, Tối đa 2M mỗi hình ảnh', Maximum:'Có thể tải lên tối đa 8 hình ảnh, Tối đa 2M mỗi hình ảnh',
Thumbnail:'Xem trước hình thu nhỏ của bảng tâm trạng đã chọn', Thumbnail:'Xem trước hình thu nhỏ của bảng tâm trạng đã chọn',
layout:'cách trình bày', layout:'cách trình bày',
selected:'Bố cục của bảng tâm trạng được chọn',
Edit:'Biên tập',
jsContent1:'Bạn có thể chọn tối đa 8 hình ảnh', jsContent1:'Bạn có thể chọn tối đa 8 hình ảnh',
jsContent2:"Tải lên thất bại", jsContent2:"Tải lên thất bại",
jsContent3:"YBạn chỉ có thể tải lên tệp Hình ảnh!", jsContent3:"YBạn chỉ có thể tải lên tệp Hình ảnh!",

6
src/main.ts
View File

@@ -11,16 +11,14 @@ import Antd from 'ant-design-vue';
import './assets/style/style.less' import './assets/style/style.less'
import VueLazyload from "vue-lazyload"; import VueLazyload from "vue-lazyload";
import i18n from './lang/index' import i18n from './lang/index'
import GO from './tool/GO'
import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css" import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
flexible() flexible()
import { useI18n } from 'vue-i18n';
// console.log(process.env) // console.log(process.env)
let loadingParam = { let loadingParam = {
loading: require('./assets/images/homePage/loading.gif'), loading: require('./assets/images/homePage/loading.gif'),
attempt: 1 attempt: 1
} }
createApp(App).use(store).use(router).use(Antd).use(VueLazyload,loadingParam).use(i18n).mount('#app') createApp(App).use(store).use(router).use(Antd).use(VueLazyload,loadingParam).use(i18n).mount('#app')

2
src/views/LibraryPage.vue
View File

@@ -329,7 +329,7 @@
v-model:visible="renameVisivle" v-model:visible="renameVisivle"
:footer="null" :footer="null"
:title="$t('LibraryPage.Rename')" :title="$t('LibraryPage.Rename')"
width="65%" width="78%"
:keyboard="false" :keyboard="false"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"