From 46a02478b6beba9e822dd0b5b0d87f9a957d6cb5 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 10 Jan 2024 14:09:44 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2detail?= =?UTF-8?q?=E5=92=8Ccoll=E5=AD=97=E4=BD=93=E4=BB=A5=E5=8F=8A=E6=AF=94?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/style/style.css | 84 ++--- src/assets/style/style.less | 94 +++-- src/component/Detail/DesignDetail.vue | 126 +++---- src/component/Detail/DesignDetailAlter.vue | 341 ++++++++---------- src/component/Detail/DesignDetailEnd.vue | 64 ++-- src/component/Detail/DesignPrintOperation.vue | 112 +++--- .../Detail/DesignPrintOperationMobile.vue | 116 +++--- src/component/Detail/habit.vue | 100 ++--- src/component/Detail/magnifyingGlass.vue | 4 +- src/component/Detail/setDesignItem.vue | 32 +- src/component/Detail/setDesignItemMobile.vue | 34 +- src/component/HomePage/ColorboardUpload.vue | 200 +++++----- src/component/HomePage/Cropper.vue | 80 ++-- src/component/HomePage/Generate.vue | 289 ++------------- src/component/HomePage/Material.vue | 120 +++--- src/component/HomePage/MoodboardUpload.vue | 64 ++-- src/component/HomePage/PrintboardUpload.vue | 109 +++--- src/component/HomePage/SketchboardUpload.vue | 100 ++--- src/component/HomePage/affiche.vue | 2 +- src/component/HomePage/collectionModal.vue | 58 +-- src/component/HomePage/layout.vue | 60 +-- src/component/HomePage/layoutMobile.vue | 77 ++-- src/component/HomePage/scaleImage.vue | 38 +- src/component/LibraryPage/setLabel.vue | 4 +- src/lang/cn.ts | 56 ++- src/lang/en.ts | 56 ++- src/lang/fr.ts | 56 ++- src/lang/it.ts | 2 + src/lang/ja.ts | 2 + src/lang/kr.ts | 2 + src/lang/ru.ts | 2 + src/lang/th.ts | 2 + src/lang/vn.ts | 2 + src/main.ts | 6 +- src/views/LibraryPage.vue | 2 +- 35 files changed, 1191 insertions(+), 1305 deletions(-) diff --git a/src/assets/style/style.css b/src/assets/style/style.css index ee71f8df..4480a4f2 100644 --- a/src/assets/style/style.css +++ b/src/assets/style/style.css @@ -6,10 +6,10 @@ body, height: 100%; font-family: 'Roboto', sans-serif; overflow: hidden; - --aida-fsize2: 2.2rem; - --aida-fsize1-8: 1.8rem; - --aida-fsize1-6: 1.6rem; - --aida-fsize1-4: 1.4rem; + --aida-fsize2: calc(2.2rem*1.2); + --aida-fsize1-8: calc(1.8rem*1.2); + --aida-fsize1-6: calc(1.6rem*1.2); + --aida-fsize1-4: calc(1.4rem*1.2); } input { outline: none; @@ -99,10 +99,10 @@ li { padding: 0 1rem; } .started_btn { - padding: 0.4rem 1.8rem; + padding: calc(0.4rem*1.2) calc(1.8rem*1.2); display: inline-block; - border-radius: 2rem; - font-size: 1.2rem; + border-radius: calc(2rem*1.2); + font-size: calc(1.2rem*1.2); color: #fff; background-color: #39215b; cursor: pointer; @@ -593,7 +593,7 @@ li { font-weight: 900; color: rgba(0, 0, 0, 0.65); align-items: center; - margin-bottom: 2rem; + margin-bottom: calc(2rem*1.2); } .collection_modal .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, .library_page .ant-upload.ant-upload-select-picture-card { background: #FFFFFF; - width: 6rem; - height: 6rem; - border: 0.3rem solid #ededed; - border-radius: 1rem; + width: calc(6rem*1.2); + height: calc(6rem*1.2); + border: calc(0.3rem*1.2) solid #ededed; + border-radius: calc(1rem*1.2); margin: 0; } .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, .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao, .library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao { - font-size: 3.2rem; + font-size: calc(3.2rem*1.2); color: #B7B7B7; } .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, .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text, .library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text { - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: #B7B7B7; } .collection_modal .ant-upload-list-picture-card-container, @@ -706,19 +706,19 @@ i { position: sticky; top: 0; background: #fff; - padding-top: 2.5rem; - padding-bottom: 2rem; + padding-top: calc(2.5rem*1.2); + padding-bottom: calc(2rem*1.2); z-index: 2; } .collection_modal_body .input_box input, .design_detail_modal_component .input_box input, .library_page .input_box input { - border-radius: 0.5rem; + border-radius: calc(0.5rem*1.2); width: 70%; border: 1px solid rgba(0, 0, 0, 0.15); - padding-left: 1.5rem; - border: 0.1rem solid #F1F1F1; - font-size: 1.6rem; + padding-left: calc(1.5rem*1.2); + border: calc(0.1rem*1.2) solid #F1F1F1; + font-size: calc(1.6rem*1.2); font-weight: 400; } .collection_modal_body .input_box inputinput:-moz-placeholder, @@ -740,8 +740,8 @@ i { .design_detail_modal_component .input_box span, .library_page .input_box span { position: absolute; - bottom: 0rem; - font-size: 1.2rem; + bottom: calc(0rem*1.2); + font-size: calc(1.2rem*1.2); color: red; opacity: 0; transform: scale(0.7); @@ -772,10 +772,10 @@ i { .collection_modal_body .upload_item .upload_file_item, .design_detail_modal_component .upload_item .upload_file_item, .library_page .upload_item .upload_file_item { - margin: 0 2rem 2rem 0; + margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0; display: inline-block; - width: 10rem; - height: 10rem; + width: calc(10rem*1.2); + height: calc(10rem*1.2); border: 1px solid #f5f5f5; vertical-align: top; position: relative; @@ -785,7 +785,7 @@ i { .design_detail_modal_component .upload_item .upload_file_item.active, .library_page .upload_item .upload_file_item.active { opacity: 0.5; - border-radius: 1rem; + border-radius: calc(1rem*1.2); transform: scale(0.9); } .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), .design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card), .library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) { - width: 6rem; - height: 6rem; - border: 0.3rem solid #ededed; - border-radius: 1rem; + width: calc(6rem*1.2); + height: calc(6rem*1.2); + border: calc(0.3rem*1.2) solid #ededed; + border-radius: calc(1rem*1.2); margin: 0; } .collection_modal_body .upload_item .upload_file_item .upload_file_item_content, @@ -853,11 +853,11 @@ i { display: none; width: 100%; cursor: pointer; - height: 3rem; + height: calc(3rem*1.2); background: rgba(0, 0, 0, 0.2); - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: #ffffff; - line-height: 3rem; + line-height: calc(3rem*1.2); text-align: center; position: absolute; left: 0; @@ -866,33 +866,33 @@ i { .collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop, .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop, .library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop { - width: 3.2rem; - height: 3.2rem; + width: calc(3.2rem*1.2); + height: calc(3.2rem*1.2); background: rgba(0, 0, 0, 0.6); - border-radius: 0.4rem; + border-radius: calc(0.4rem*1.2); position: absolute; - top: 0.9rem; - right: 0.9rem; + top: calc(0.9rem*1.2); + right: calc(0.9rem*1.2); text-align: center; - line-height: 3.2rem; + line-height: calc(3.2rem*1.2); left: auto; } .collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu, .design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu, .library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu { - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: #fff; } .collection_modal_body .upload_item .upload_file_item .upload_img_icon, .design_detail_modal_component .upload_item .upload_file_item .upload_img_icon, .library_page .upload_item .upload_file_item .upload_img_icon { - width: 4.6rem; + width: calc(4.6rem*1.2); } .cut_pricture_modal .ant-modal-content { border-radius: 1rem; } .cut_pricture_modal .ant-modal-body { - height: calc(100rem*0.614); + height: calc(65rem*1.2); padding: 8rem 5rem !important; overflow-y: hidden; } diff --git a/src/assets/style/style.less b/src/assets/style/style.less index f7d81ae0..838ee147 100644 --- a/src/assets/style/style.less +++ b/src/assets/style/style.less @@ -6,10 +6,10 @@ html,body,#app{ font-family: 'Roboto', sans-serif; overflow: hidden; // --antd-wave-shadow-color: #341e57; - --aida-fsize2: 2.2rem; - --aida-fsize1-8: 1.8rem; - --aida-fsize1-6: 1.6rem; - --aida-fsize1-4: 1.4rem; + --aida-fsize2: calc(2.2rem*1.2); + --aida-fsize1-8: calc(1.8rem*1.2); + --aida-fsize1-6: calc(1.6rem*1.2); + --aida-fsize1-4: calc(1.4rem*1.2); } input{ outline:none @@ -109,10 +109,10 @@ ul,li{ } //started公共按钮样式 .started_btn{ - padding: .4rem 1.8rem; + padding: calc(.4rem*1.2) calc(1.8rem*1.2); display: inline-block; - border-radius: 2rem; - font-size: 1.2rem; + border-radius: calc(2rem*1.2); + font-size: calc(1.2rem*1.2); color: #fff; background-color: #39215b; cursor: pointer; @@ -695,12 +695,6 @@ ul,li{ margin-top: 4rem; } } -.collection_modal,.design_detail_modal_component,.designOpenrtion_modal{ - .ant-modal-content{ - // transform: scale(1.2); - // transform-origin: center !important; - } -} //collection 弹窗 .collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{ @@ -712,7 +706,7 @@ ul,li{ font-weight: 900; color: rgba(0,0,0,.65); align-items: center; - margin-bottom: 2rem; + margin-bottom: calc(2rem*1.2); .design_title_text_intro{ font-size: var(--aida-fsize1-4); font-weight: 400; @@ -721,20 +715,20 @@ ul,li{ } .ant-upload.ant-upload-select-picture-card{ background: #FFFFFF; - width: 6rem; - height: 6rem; - border: 0.3rem solid #ededed; - border-radius: 1rem; + width: calc(6rem*1.2); + height: calc(6rem*1.2); + border: calc(0.3rem*1.2) solid #ededed; + border-radius: calc(1rem*1.2); margin: 0; .upload_tip_block{ .icon-jiahao{ - font-size: 3.2rem; + font-size: calc(3.2rem*1.2); color: #B7B7B7; } } .ant-upload-text{ - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: #B7B7B7; } } @@ -814,16 +808,16 @@ i{ position: sticky; top: 0; background: #fff; - padding-top: 2.5rem; - padding-bottom: 2rem; + padding-top: calc(2.5rem*1.2); + padding-bottom: calc(2rem*1.2); z-index: 2; input{ - border-radius: .5rem; + border-radius: calc(.5rem*1.2); width: 70%; border: 1px solid rgba(0,0,0,.15); - padding-left: 1.5rem; - border: 0.1rem solid #F1F1F1; - font-size: 1.6rem; + padding-left: calc(1.5rem*1.2); + border: calc(0.1rem*1.2) solid #F1F1F1; + font-size: calc(1.6rem*1.2); font-weight: 400; &input:-moz-placeholder{ color: rgba(0,0,0,.15); @@ -839,8 +833,8 @@ i{ } span{ position: absolute; - bottom: 0rem; - font-size: 1.2rem; + bottom: calc(0rem*1.2); + font-size: calc(1.2rem*1.2); color: red; opacity: 0; transform: scale(.7); @@ -866,12 +860,12 @@ i{ display: flex; flex-wrap: wrap; .upload_file_item { - margin: 0 2rem 2rem 0; + margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0; display: inline-block; - // width: 16.5rem; - // height: 16.5rem; - width: 10rem; - height: 10rem; + // width: calc(16.5rem*1.2); + // height: calc(16.5rem*1.2); + width: calc(10rem*1.2); + height: calc(10rem*1.2); border: 1px solid #f5f5f5; vertical-align: top; position: relative; @@ -880,7 +874,7 @@ i{ &.active { opacity: 0.5; // border: 2px solid; - border-radius: 1rem; + border-radius: calc(1rem*1.2); transform: scale(0.9); .delete_file_block{ pointer-events:none; @@ -904,10 +898,10 @@ i{ transform: translate(-50%, -50%); } :deep(.ant-upload-select-picture-card) { - width: 6rem; - height: 6rem; - border: 0.3rem solid #ededed; - border-radius: 1rem; + width: calc(6rem*1.2); + height: calc(6rem*1.2); + border: calc(0.3rem*1.2) solid #ededed; + border-radius: calc(1rem*1.2); margin: 0; } .upload_file_item_content { @@ -934,28 +928,28 @@ i{ display: none; width: 100%; cursor: pointer; - height: 3rem; + height: calc(3rem*1.2); background: rgba(0, 0, 0, 0.2); - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: #ffffff; - line-height: 3rem; + line-height: calc(3rem*1.2); text-align: center; position: absolute; left: 0; bottom: 0; &.rightTop { - width: 3.2rem; - height: 3.2rem; + width: calc(3.2rem*1.2); + height: calc(3.2rem*1.2); background: rgba(0, 0, 0, 0.6); - border-radius: 0.4rem; + border-radius: calc(0.4rem*1.2); position: absolute; - top: 0.9rem; - right: 0.9rem; + top: calc(0.9rem*1.2); + right: calc(0.9rem*1.2); text-align: center; - line-height: 3.2rem; + line-height: calc(3.2rem*1.2); left: auto; .icon-shanchu { - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: #fff; } } @@ -963,7 +957,7 @@ i{ } .upload_img_icon { - width: 4.6rem; + width: calc(4.6rem*1.2); } } } @@ -975,7 +969,7 @@ i{ border-radius: 1rem; } .ant-modal-body{ - height: calc(100rem*.614); + height: calc(65rem*1.2); padding: 8rem 5rem !important; overflow-y: hidden; } diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index adb6577c..2ed36653 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -5,7 +5,7 @@ :class="[driver__.driver?'hideEvents':'']" v-model:visible="designDetailShow" :footer="null" - width="65%" + width="78%" :maskClosable="false" :centered="true" :keyboard="false" @@ -968,27 +968,27 @@ export default defineComponent({ // max-width: 1440px ; .ant-modal-content{ - border-radius: 1rem; + border-radius: calc(1rem*1.2); // overflow: hidden; .ant-modal-header{ background-color: #fff; border-bottom: none; } .ant-modal-body{ - padding: 4rem 5rem 0rem!important; - // height: calc(65vh - 6.4rem); - height: calc(100rem*.614); + padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important; + // height: calc(65vh - 6.4rem*1.2)); + height: calc(65rem*1.2); display: flex; overflow-y: hidden; flex-direction: column; } } .ant-modal-close{ - width: 3.6rem; - height: 3.6rem; + width: calc(3.6rem*1.2); + height: calc(3.6rem*1.2); position: absolute; - top: -1.8rem; - right: -1.8rem; + top: calc(-1.8rem*1.2); + right: calc(-1.8rem*1.2); } .ant-modal-header{ @@ -999,26 +999,26 @@ export default defineComponent({ .turn_button{ - width: 3.6rem; - height: 3.6rem; + width: calc(3.6rem*1.2); + height: calc(3.6rem*1.2); background: #000000; border-radius: 50%; position: absolute; - top: calc(50% - 1.8rem); + top: calc(50% - calc(1.8rem*1.2)); cursor: pointer; - line-height: 3.6rem; + line-height: calc(3.6rem*1.2); text-align: center; &.turn_left_button{ - left: -8rem; + left: calc(-8rem*1.2); } &.turn_right_button{ - right: -8rem; + right: calc(-8rem*1.2); } .icon_turn{ - font-size: 2.4rem; + font-size: calc(2.4rem*1.2); color: #ffffff; } } @@ -1031,11 +1031,11 @@ export default defineComponent({ justify-content: space-between; width: 100%; overflow: hidden; - // padding: 1.5rem 1rem 2.5rem; + // padding: 1.5rem*1.2) 1rem*1.2) 2.5rem*1.2); box-sizing: border-box; .detail_modal_body_img{ overflow: hidden; - // width: 43.3rem; + // width: 43.3rem*1.2); width: 23%; height: 100%; background: #FFFFFF; @@ -1054,7 +1054,7 @@ export default defineComponent({ display: flex; align-items: center; justify-content: center; - font-size: 3.4rem; + font-size: calc(3.4rem*1.2); } .detail_modal_body_nav{ display: flex; @@ -1065,11 +1065,11 @@ export default defineComponent({ transform: translate(-50%,-120%); transition: all .3s; >div{ - width: 4rem; - height: 4rem; + width: calc(4rem*1.2); + height: calc(4rem*1.2); cursor: pointer; text-align: center; - margin-left: .3rem; + margin-left: calc(.3rem*1.2); img{ // width: 100%; height: 100%; @@ -1085,7 +1085,7 @@ export default defineComponent({ } } >div:nth-child(1){ - margin-left: 0rem; + margin-left: calc(0rem*1.2); } } .detail_modal_item_front:last-child{ @@ -1147,7 +1147,7 @@ export default defineComponent({ } .subitOkPreviewBtn{ - bottom: 2rem; + bottom: calc(2rem*1.2); z-index: 999; } .clothes_item_img_block{ @@ -1176,17 +1176,17 @@ export default defineComponent({ } &.fi-rr-edit{ left: 0; - top: 3rem; + top: calc(3rem*1.2); transform: translateX(-120%); } &.fi-rr-trash{ left: 0; - top: 6rem; + top: calc(6rem*1.2); transform: translateX(-120%); } &.fi-br-check{ left: 0; - top: 6rem; + top: calc(6rem*1.2); transform: translateX(-120%); } &.fi-rr-copy{ @@ -1195,12 +1195,12 @@ export default defineComponent({ transform: translateX(120%); } &.icon-fanchehui{ - top: 6rem; + top: calc(6rem*1.2); right: 0; transform: translateX(120%); } &.icon-chehui{ - top: 3rem; + top: calc(3rem*1.2); right: 0; transform: translateX(120%); } @@ -1255,7 +1255,7 @@ export default defineComponent({ } } .clothes_detail_item{ - // margin-bottom: 5rem; + // margin-bottom: 5rem*1.2); flex: 1; .centent_div{ display: flex; @@ -1272,16 +1272,16 @@ export default defineComponent({ } .clothes_item_header{ - // height: 6.4rem; - margin-bottom: 1rem; + // height: 6.4rem*1.2); + margin-bottom: calc(1rem*1.2); display: flex; font-size: var(--aida-fsize1-8); color: #000000; justify-content: space-between; .icon-dangqianweizhi{ - font-size: 1.8rem; + font-size: calc(1.8rem*1.2); color: #000000; - margin-right: 1rem; + margin-right: calc(1rem*1.2); } i{ font-size: var(--aida-fsize1-8); @@ -1293,8 +1293,8 @@ export default defineComponent({ } } img{ - width: 10rem; - height: 10rem; + width: calc(10rem*1.2); + height: calc(10rem*1.2); } &.clothes_detail_item_apparel{ img{ @@ -1307,18 +1307,18 @@ export default defineComponent({ vertical-align: top; border: 1px solid #ebe9e9; .color_content{ - width: 8rem; - height: 4rem; + width: calc(8rem*1.2); + height: calc(4rem*1.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .color_content_body{ .color_des{ - font-size: 1.2rem; + font-size: calc(1.2rem*1.2); font-weight: 600; white-space: nowrap; - width: 8rem; + width: calc(8rem*1.2); overflow: hidden; text-overflow: ellipsis; } @@ -1334,12 +1334,12 @@ export default defineComponent({ align-items: center; justify-content: center; zoom: 3; - margin: 1rem 0; + margin: calc(1rem*1.2) 0; } } &.subitOkPreviewBtn{ position: relative; - margin-top: 2rem; + margin-top: calc(2rem*1.2); } } } @@ -1355,13 +1355,13 @@ export default defineComponent({ .switch_type_item { display: flex; align-items: center; - // padding: 0 2rem; - height: 4rem; + // padding: 0 2rem*1.2); + height: calc(4rem*1.2); background: #fff; - border-radius: 0.8rem; - line-height: 4rem; + border-radius: calc(0.8rem*1.2); + line-height: calc(4rem*1.2); font-size: var(--aida-fsize1-8); - // margin-right: 2.2rem; + // margin-right: 2.2rem*1.2); color: #000; cursor: pointer; position: relative; @@ -1374,10 +1374,10 @@ export default defineComponent({ content: ""; display: block; background: #000; - height: .4rem; + height: calc(.4rem*1.2); left: 50%; transform: translateX(-50%); - bottom: .6rem; + bottom: calc(.6rem*1.2); width: 0px; transition: 0.3s all; } @@ -1391,8 +1391,8 @@ export default defineComponent({ } .switch_icon { - font-size: 1.8rem; - margin-right: 0.8rem; + font-size: calc(1.8rem*1.2); + margin-right: calc(0.8rem*1.2); } } } @@ -1408,7 +1408,7 @@ export default defineComponent({ &.design_detail_perview_second{ width: 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; justify-content: space-between; align-items: center; @@ -1430,13 +1430,13 @@ export default defineComponent({ .generate_button{ position: absolute; top: 0; - right: -20.2rem; - padding: 0 1.5rem; + right: calc(-20.2rem*1.2); + padding: 0 calc(1.5rem*1.2); text-align: center; - height: 3.6rem; - line-height: 3.6rem; + height: calc(3.6rem*1.2); + line-height: calc(3.6rem*1.2); background: #343579; - font-size: 1.4rem; + font-size: calc(1.4rem*1.2); font-family: Roboto; color: #FFFFFF; cursor: pointer; @@ -1456,22 +1456,22 @@ export default defineComponent({ display: none; .img_operate_block{ - width: 3.6rem; - height: 3.6rem; + width:calc(3.6rem*1.2); + height: calc(3.6rem*1.2); background: rgba(0,0,0,0.6); border-radius: 50%; position: absolute; - right: 2.2rem; + right: calc(2.2rem*1.2); text-align: center; - line-height: 3.6rem; + line-height: calc(3.6rem*1.2); cursor: pointer; &.delete_img_block{ - top: 2rem; + top: calc(2rem*1.2); } .operate_icon{ - font-size: 1.8rem; + font-size: calc(1.8rem*1.2); color: #fff; } } diff --git a/src/component/Detail/DesignDetailAlter.vue b/src/component/Detail/DesignDetailAlter.vue index 7d4072eb..8faed574 100644 --- a/src/component/Detail/DesignDetailAlter.vue +++ b/src/component/Detail/DesignDetailAlter.vue @@ -980,61 +980,18 @@ export default defineComponent({ flex-direction: column; } i{ - font-size: 1.8rem; + font-size: calc(1.8rem*1.2); display: block; } .detail_uploadLibrary{ .switch_type_list { - margin-bottom: 1rem; - margin-top: -1rem; + margin-bottom: calc(1rem*1.2); + margin-top: calc(-1rem*1.2); display: flex; align-items: center; position: relative; 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{ .content_search_block{ display: flex; - margin-bottom: 1rem; + margin-bottom: calc(1rem*1.2); .search_input{ - width: 15rem; - padding-left: 1.5rem; - // height: 4rem; - // line-height: 3.8rem; + width: calc(15rem*1.2); + padding-left: calc(1.5rem*1.2); + // height: 4rem*1.2); + // line-height: 3.8rem*1.2); // background: #FFFFFF; - border: 0.1rem solid #F1F1F1; - // font-size: 1.6rem; - font-size: 1.2rem; + border: calc(0.1rem*1.2) solid #F1F1F1; + // font-size: 1.6rem*1.2); + font-size: calc(1.2rem*1.2); font-weight: 400; - height: 3rem; + height: calc(3rem*1.2); &::placeholder { color: #C2C2C2; @@ -1062,15 +1019,15 @@ export default defineComponent({ } .search_icon_block{ - width: 5rem; - height: 3rem; - line-height: 3rem; + width: calc(5rem*1.2); + height: calc(3rem*1.2); + line-height: calc(3rem*1.2); text-align: center; background: #343579; cursor: pointer; .icon-sousuo{ - font-size: 2rem; + font-size: calc(2rem*1.2); color: #FFFFFF; } } @@ -1079,7 +1036,7 @@ export default defineComponent({ .detail_Library_item,.detail_Upload_item{ width: 100%; - // height: calc(100% - 19rem); + // height: calc(100% - 19rem*1.2)); flex: 1; overflow: hidden; position: relative; @@ -1095,7 +1052,7 @@ export default defineComponent({ } .operate_file_block{ - height: 1.5rem; + height: calc(1.5rem*1.2); .select_img_type{ line-height: 1; .select_category{ @@ -1106,7 +1063,7 @@ export default defineComponent({ } } .category_list{ - margin-top: .1rem; + margin-top: calc(.1rem*1.2); .category_item{ zoom: .7; } @@ -1117,19 +1074,19 @@ export default defineComponent({ text-align: center; width: 100%; img{ - height: 10rem; + height: calc(10rem*1.2); } } .content_img_item{ display: inline-block; vertical-align: top; - // padding: 0 1.4rem; - // margin-bottom: 2.8rem; - margin-bottom: 2rem; + // padding: 0 1.4rem*1.2); + // margin-bottom: 2.8rem*1.2); + margin-bottom: calc(2rem*1.2); padding: 0; - // height: 9rem; + // height: 9rem*1.2); &.active{ - margin-bottom: 2rem; + margin-bottom: calc(2rem*1.2); .pin_block{ display: block; } @@ -1138,9 +1095,9 @@ export default defineComponent({ display: none; } .content_img_item_block{ - // border: 0.1rem solid transparent; - width: 10rem; - height: 10rem; + // border: 0.1rem*1.2) solid transparent; + width: calc(10rem*1.2); + height: calc(10rem*1.2); display: flex; align-items: center; justify-content: center; @@ -1169,14 +1126,14 @@ export default defineComponent({ } } .content_img_name{ - width: 16.5rem; - height: 3.5rem; - line-height: 3.5rem; + width: calc(16.5rem*1.2); + height: calc(3.5rem*1.2); + line-height: calc(3.5rem*1.2); white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; - font-size: 1.4rem; + font-size: calc(1.4rem*1.2); color: #030303; } } @@ -1191,9 +1148,9 @@ export default defineComponent({ .upload_file_item{ margin: 0; - margin-bottom: 2rem; - width: 9rem; - height: 9rem; + margin-bottom: calc(2rem*1.2); + width: calc(9rem*1.2); + height: calc(9rem*1.2); display: flex; align-items: center; justify-content: center; @@ -1216,18 +1173,18 @@ export default defineComponent({ } .delete_file_block{ display: none; - width: 3.2rem; - height: 3.2rem; + width: calc(3.2rem*1.2); + height: calc(3.2rem*1.2); background: rgba(0,0,0,0.6); - border-radius: 0.4rem; + border-radius: calc(0.4rem*1.2); position: absolute; - top: 0.9rem; - right: 0.9rem; + top: calc(0.9rem*1.2); + right: calc(0.9rem*1.2); text-align: center; - line-height: 3.2rem; + line-height: calc(3.2rem*1.2); left: auto; .icon-shanchu{ - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: #fff; } } @@ -1245,7 +1202,7 @@ export default defineComponent({ } .detail_color{ - // height: calc(100% - 5.4rem); + // height: calc(100% - 5.4rem*1.2)); height: 100%; overflow-y: auto; overflow-x: hidden; @@ -1253,17 +1210,17 @@ export default defineComponent({ flex-direction: column; .right_content_line{ position: relative; - margin-bottom: 1rem; + margin-bottom: calc(1rem*1.2); .upload_right_header{ display: flex; - margin-bottom: 1rem; - margin-top: 1rem; + margin-bottom: calc(1rem*1.2); + margin-top: calc(1rem*1.2); &.upload_right_header:nth-child(1){ margin-top: 0; } span{ - margin-left: 1rem; - font-size: 1.8rem; + margin-left: calc(1rem*1.2); + font-size: calc(1.8rem*1.2); color: #000000; } } @@ -1274,18 +1231,18 @@ export default defineComponent({ display: none; } .color_review_block{ - margin-right: 4rem; + margin-right: calc(4rem*1.2); .color_review_content{ - width: 16.5rem; - height: 16.5rem; + width: calc(16.5rem*1.2); + height: calc(16.5rem*1.2); background: #FFFFFF; - border: 0.1rem solid #DCDCEC; + border: calc(0.1rem*1.2) solid #DCDCEC; } .pantong_name{ - margin-top: 1rem; - font-size: 1.6rem; + margin-top: calc(1rem*1.2); + font-size: calc(1.6rem*1.2); font-weight: 400; color: #030303; text-align: left; @@ -1293,27 +1250,27 @@ export default defineComponent({ } .clear_button{ - padding: 0 2.8rem; - height: 3.2rem; - line-height: 3.2rem; + padding: 0 calc(2.8rem*1.2); + height: calc(3.2rem*1.2); + line-height: calc(3.2rem*1.2); background: #EFEEFF; - font-size: 1.2rem; + font-size: calc(1.2rem*1.2); font-family: Roboto; color: #343579; display: inline-block; - margin-top: 1rem; + margin-top: calc(1rem*1.2); cursor: pointer; } } .upload_file_item{ - // margin: 0 2rem 2rem 0; + // margin: 0 2rem*1.2) 2rem*1.2) 0; margin: 0; display: inline-block; - // width: 16.5rem; - // height: 16.5rem; - width: 6rem; - height: 6rem; + // width: 16.5rem*1.2); + // height: 16.5rem*1.2); + width: calc(6rem*1.2); + height: calc(6rem*1.2); border: 1px solid #F5F5F5; vertical-align: top; @@ -1340,11 +1297,11 @@ export default defineComponent({ .delete_file_block{ display: none; width: 100%; - height: 4rem; + height: calc(4rem*1.2); background: rgba(0,0,0,0.2); - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: #FFFFFF; - line-height: 4rem; + line-height: calc(4rem*1.2); text-align: center; position: absolute; left: 0; @@ -1354,7 +1311,7 @@ export default defineComponent({ } .upload_img_icon{ - width: 4.6rem; + width: calc(4.6rem*1.2); } .upload_color{ display: flex; @@ -1362,16 +1319,16 @@ export default defineComponent({ justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; - height: 2rem; + height: calc(2rem*1.2); .upload_color_item{ - width: 2rem; - height: 2rem; + width: calc(2rem*1.2); + height: calc(2rem*1.2); position: relative; cursor: pointer; - margin-right: 1rem; + margin-right: calc(1rem*1.2); .upload_color_item_bg{ - width: 2rem; - height: 2rem; + width: calc(2rem*1.2); + height: calc(2rem*1.2); } img{ position: absolute; @@ -1390,11 +1347,11 @@ export default defineComponent({ } } .color_setting_block{ - width: 17.5rem; + width: calc(17.5rem*1.2); margin: auto; background: linear-gradient(70deg, #eee4f3, #f3f4e6); - border-radius: 1rem; + border-radius: calc(1rem*1.2); overflow: hidden; // box-shadow: 2px 2px 8px #000; box-shadow: 2px 2px 8px rgba(0,0,0,.3); @@ -1403,56 +1360,56 @@ export default defineComponent({ } .chrome_color{ - width: 17.5rem; - // height: 16.5rem; + width: calc(17.5rem*1.2); + // height: 16.5rem*1.2); overflow: hidden; .vc-chrome-saturation-wrap{ height: 100%; - width: 16rem; - height: 16rem; - max-height: 17rem; - max-width: 17rem; - margin: .7rem auto; + width: calc(16rem*1.2); + height: calc(16rem*1.2); + max-height: calc(17rem*1.2); + max-width: calc(17rem*1.2); + margin: calc(.7rem*1.2) auto; padding-bottom: 0; } .vc-chrome-body{ padding: 0; width: 90%; - margin: 0.5rem auto; + margin: calc(0.5rem*1.2) auto; margin: 0 auto; background: rgba(0,0,0,0); - margin-bottom: 1rem; + margin-bottom: calc(1rem*1.2); // display: none; .vc-chrome-fields-wrap{ margin-top: 5%; padding: 0; position: relative; .vc-chrome-toggle-btn{ - width: 3.2rem; + width: calc(3.2rem*1.2); .vc-chrome-toggle-icon{ height: auto; - margin-right: -0.4rem; - margin-top: 0rem; + margin-right: calc(-0.4rem*1.2); + margin-top: calc(0rem*1.2); display: flex; flex-direction: column; align-items: center; svg{ - width: 2.4rem !important; - height: 2.4rem !important; + width: calc(2.4rem*1.2) !important; + height: calc(2.4rem*1.2) !important; } } } .vc-chrome-fields{ .vc-chrome-field{ - padding-left: .6rem; + padding-left: calc(.6rem*1.2); } .vc-input__label{ - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); } .vc-input__input{ - font-size: 1.1rem; - height: 2.1rem; + font-size: calc(1.1rem*1.2); + height: calc(2.1rem*1.2); } } .ant-upload-list{ @@ -1463,24 +1420,24 @@ export default defineComponent({ // background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg); // background-image: url(@../../../../assets/images/homePage/裁剪后2.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-position: 50%; cursor: pointer; margin: 0; - width: 2.2rem; - height: 2.2rem; - padding: .7rem; + width: calc(2.2rem*1.2); + height: calc(2.2rem*1.2); + padding: calc(.7rem*1.2); border: 1px solid; position: absolute; - bottom: -.5rem; - right: .5rem; - border-radius: .5rem; + bottom: calc(-.5rem*1.2); + right: calc(.5rem*1.2); + border-radius: calc(.5rem*1.2); } .vc-chrome-fields{ .vc-input__label{ - margin-top: 1rem; + margin-top: calc(1rem*1.2); } } .vc-chrome-fields:nth-child(2){ @@ -1498,15 +1455,15 @@ export default defineComponent({ align-items: center; flex-direction: row-reverse; .vc-chrome-color-wrap{ - // width: 3.6rem; - margin-left: 2rem; + // width: 3.6rem*1.2); + margin-left: calc(2rem*1.2); width: auto; .vc-chrome-active-color{ border-radius: 50%; } .vc-chrome-active-color,.vc-checkerboard{ - width: 3rem; - height: 3rem; + width: calc(3rem*1.2); + height: calc(3rem*1.2); } } .vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{ @@ -1517,76 +1474,76 @@ export default defineComponent({ border-radius: 15px; overflow: hidden; } - height: 1rem; + height: calc(1rem*1.2); .vc-hue-picker{ - width: 1.4rem; - height: 1.4rem; + width: calc(1.4rem*1.2); + height: calc(1.4rem*1.2); } .vc-alpha-picker{ - width: 1.4rem; - height: 1.4rem; - transform: translate(-.6rem,-.4rem); + width: calc(1.4rem*1.2); + height: calc(1.4rem*1.2); + transform: translate(calc(-.6rem*1.2),calc(-.4rem*1.2)); } } .vc-chrome-alpha-wrap{ display: none; } .vc-chrome-hue-wrap{ - margin-bottom: .5rem; + margin-bottom: calc(.5rem*1.2); } } } .vc-chrome-saturation-wrap .vc-saturation-circle{ - width: 1rem; - height: 1rem; + width: calc(1rem*1.2); + height: calc(1rem*1.2); } } .sileder_color{ - margin-top:1.3rem; + margin-top:calc(1.3rem*1.2); .vc-slider-swatches{ display:none } .vc-slider-hue-warp { - width: 16.5rem; - height: 2.4rem; - border-radius: 1.2rem; + width: calc(16.5rem*1.2); + height: calc(2.4rem*1.2); + border-radius: calc(1.2rem*1.2); overflow: hidden; .vc-hue-picker{ - width: 1.4rem; - height: 1.4rem; + width: calc(1.4rem*1.2); + height: calc(1.4rem*1.2); border-radius: 50%; - transform: translate(-0.7rem, -0.2rem); + transform: translate(calc(-0.7rem*1.2), calc(-0.2rem*1.2)); } } .vc-hue-pointer{ - top: 0.5rem !important; + top: calc(0.5rem*1.2) !important; } } .color_block{ - // margin-top: 1rem; + // margin-top: 1rem*1.2); // display: flex; // justify-content: space-between; - // font-size: 1.6rem; + // font-size: 1.6rem*1.2); width: 100%; padding: 0 5%; padding-bottom: 5%; - margin: 0.5rem auto; + margin: calc(0.5rem*1.2) auto; display: flex; justify-content: space-between; align-items: center; .color_right{ - width: 11rem; - font-size: 1,2rem; + width: calc(11rem*1.2); + font-size: calc(1,2rem*1.2); color: #666666; .color_rgb_block{ display: flex; .rgb_item{ - margin-left: .2rem; + margin-left: calc(.2rem*1.2); } } } @@ -1600,15 +1557,15 @@ export default defineComponent({ align-items: center; } .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; - border-radius: .4rem; + border-radius: calc(.4rem*1.2); justify-content: space-around; text-transform:uppercase; .color_block_bg{ - width: 1.5rem; - height: 1.5rem; - // margin-right: .5rem; + width: calc(1.5rem*1.2); + height: calc(1.5rem*1.2); + // margin-right: .5rem*1.2); display: flex; justify-content: space-between; } @@ -1624,13 +1581,13 @@ export default defineComponent({ display: flex; flex-direction: row; .get_color_input{ - width: 15rem; - height: 2.8rem; + width: calc(15rem*1.2); + height: calc(2.8rem*1.2); background: #FFFFFF; - border: 0.1rem solid #DCDCEC; - padding: 1rem 1.3rem; + border: calc(0.1rem*1.2) solid #DCDCEC; + padding: calc(1rem*1.2) calc(1.3rem*1.2); box-sizing: border-box; - font-size: 1.4rem; + font-size: calc(1.4rem*1.2); text-align: left; &::placeholder { @@ -1639,12 +1596,12 @@ export default defineComponent({ } .get_color_button{ - padding: 0 .2rem; - height: 2.8rem; + padding: 0 calc(.2rem*1.2); + height: calc(2.8rem*1.2); background: #EFEEFF; display: inline-block; - line-height: 3rem; - font-size: 1.2rem; + line-height: calc(3rem*1.2); + font-size: calc(1.2rem*1.2); color: #343579; vertical-align: middle; cursor: pointer; @@ -1653,8 +1610,8 @@ export default defineComponent({ justify-content: center; flex: 1; .icon-huoquduixiang{ - margin-right: 0.5rem; - font-size: 2rem; + margin-right: calc(0.5rem*1.2); + font-size: calc(2rem*1.2); color:#343579; vertical-align: middle; } @@ -1668,7 +1625,7 @@ export default defineComponent({ } .upload_item{ - margin-bottom: .5rem; + margin-bottom: calc(.5rem*1.2); display: flex; justify-content: center; .ant-upload-picture-card-wrapper{ @@ -1676,11 +1633,11 @@ export default defineComponent({ display: flex; justify-content: center; .ant-upload-select-picture-card{ - // margin: 0 2rem 2rem 0; + // margin: 0 2rem*1.2) 2rem*1.2) 0; margin: 0; display: inline-block; - width: 6rem; - height: 6rem; + width: calc(6rem*1.2); + height: calc(6rem*1.2); border: 1px solid #F5F5F5; vertical-align: top; i{ diff --git a/src/component/Detail/DesignDetailEnd.vue b/src/component/Detail/DesignDetailEnd.vue index 4458a224..63072b0e 100644 --- a/src/component/Detail/DesignDetailEnd.vue +++ b/src/component/Detail/DesignDetailEnd.vue @@ -361,13 +361,13 @@ export default defineComponent({ .upload_title{ display: flex; - margin-bottom: 1rem; - margin-top: 1rem; + margin-bottom: calc(1rem*1.2); + margin-top: calc(1rem*1.2); &.upload_title:nth-child(1){ margin-top: 0; } span{ - margin-left: 1rem; + margin-left: calc(1rem*1.2); font-size: var(--aida-fsize1-8); color: #000000; } @@ -386,8 +386,8 @@ export default defineComponent({ max-height: 100%; width: auto; height: auto; - max-height: 35rem; - margin-top: 2rem; + max-height: calc(35rem*1.2); + margin-top: calc(2rem*1.2); width: 100%; object-fit: contain; } @@ -405,7 +405,7 @@ export default defineComponent({ .result_print{ display: flex; justify-content: space-between; - height: 14rem; + height: calc(14rem*1.2); >div{ display: flex; flex-direction: column; @@ -420,24 +420,24 @@ export default defineComponent({ position: relative; img{ width: auto; - height: 8rem; + height: calc(8rem*1.2); margin: auto; display: block; } .delete_file_block{ display: none; - width: 3.2rem; - height: 3.2rem; + width: calc(3.2rem*1.2); + height: calc(3.2rem*1.2); background: rgba(0,0,0,0.6); - border-radius: 0.4rem; + border-radius: calc(0.4rem*1.2); position: absolute; - top: 0.9rem; - right: 0.9rem; + top: calc(0.9rem*1.2); + right: calc(0.9rem*1.2); text-align: center; - line-height: 3.2rem; + line-height: calc(3.2rem*1.2); left: auto; .icon-shanchu{ - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: #fff; } } @@ -451,9 +451,9 @@ export default defineComponent({ display: flex; align-items: center; justify-content: center; - // margin: 2rem 0; + // margin: 2rem*1.2) 0; transform: scale(.8); - // margin: 3rem 0; + // margin: 3rem*1.2) 0; .habit_Overal_Single_text { font-weight: 600; color: rgba(0, 0, 0, 0.5); @@ -464,7 +464,7 @@ export default defineComponent({ } } :deep(.ant-switch) { - margin: 0 1rem; + margin: 0 calc(1rem*1.2); background-color: #efefef; } :deep(.ant-switch-checked) { @@ -472,14 +472,14 @@ export default defineComponent({ } } .habit_System_Designer { - margin-top: 4rem; + margin-top: calc(4rem*1.2); transform: scale(.8); :deep(.ant-slider-track), :deep(.ant-slider-rail) { - height: .6rem; + height: calc(.6rem*1.2); 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-handle) { @@ -498,20 +498,20 @@ export default defineComponent({ overflow-x: hidden; display: flex; flex-wrap: wrap; - padding-left: 2rem; + padding-left: calc(2rem*1.2); &.modal_img::-webkit-scrollbar { display: none; } .modal_img_item{ - margin: 0 1rem 1rem 0; + margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0; position: relative; // cursor: pointer; - border: 0.1rem solid #DCDCEC; + border: calc(0.1rem*1.2) solid #DCDCEC; //放8个 - height: 8.5rem; - width: 7rem; - // height: 32rem; - // width: 25rem; + height: calc(8.5rem*1.2); + width: calc(7rem*1.2); + // height: 32rem*1.2); + // width: 25rem*1.2); overflow: hidden; @media screen and (max-width: 1440px) { &.modal_img_item { @@ -522,12 +522,12 @@ export default defineComponent({ .color_content{ width: 100%; //放8个 - height: 4rem; - // height: 25rem; + height: calc(4rem*1.2); + // height: 25rem*1.2); } .color_content_body{ .color_des{ - // font-size: 1.8rem; + // font-size: 1.8rem*1.2); font-weight: 600; white-space: nowrap; width: 100%; @@ -536,7 +536,7 @@ export default defineComponent({ } } .select_upload_color{ - border: 0.1rem solid #343579; + border: calc(0.1rem*1.2) solid #343579; } .upload_color{ width: 100%; @@ -546,7 +546,7 @@ export default defineComponent({ } } .subitOkPreviewBtn{ - bottom: 4rem; + bottom: calc(4rem*1.2); position: absolute; } } diff --git a/src/component/Detail/DesignPrintOperation.vue b/src/component/Detail/DesignPrintOperation.vue index 6fdebd8b..8f25c06c 100644 --- a/src/component/Detail/DesignPrintOperation.vue +++ b/src/component/Detail/DesignPrintOperation.vue @@ -5,7 +5,7 @@ :class="[driver__.driver?'hideEvents':'']" v-model:visible="designOpenrtion" :footer="null" - width="65%" + width="78%" :maskClosable="false" :centered="true" :closable="false" @@ -754,50 +754,50 @@ export default defineComponent({ position: absolute; } .ant-modal-body{ - padding: 4rem 5rem 0rem!important; - // height: calc(65vh - 6.4rem); - height: calc(100rem*.614); + padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important; + // height: calc(65vh - 6.4rem*1.2)); + height: calc(65rem*1.2*1.2); display: flex; overflow-y: hidden; flex-direction: column; } .ant-modal-content{ - border-radius: 1rem; + border-radius: calc(1rem*1.2); overflow: hidden; } .designOpenrtion_content { // background: #f2f3fb; - // padding-bottom: 2.9rem; + // padding-bottom: 2.9rem*1.2); display: flex; flex-direction: column; height: 100%; .designOpenrtion_header { position: relative; - height: 6.6rem; + height: calc(6.6rem*1.2); width: 100%; background: #F7F7F7; .placement_modal_title{ position: absolute; height: 100%; - line-height: 6.6rem; - left: 3.7rem; + line-height: calc(6.6rem*1.2); + left: calc(3.7rem*1.2); top: 0; - font-size: 1.8rem; + font-size: calc(1.8rem*1.2); color: #030303; } } .designOpenrtion_right{ - height: 50rem; + height: calc(50rem*1.2); position: absolute; - right: 2rem; + right: calc(2rem*1.2); left: auto; top: 50%; transform: translateY(-50%); - max-height: 50rem; - max-width: 30rem; + max-height: calc(50rem*1.2); + max-width: calc(30rem*1.2); .designOpenrtion_entirety_img{ height: 100%; img{ @@ -820,18 +820,18 @@ export default defineComponent({ flex-direction: column; align-items: center; border: 2px solid; - padding: 2rem 0; - width: 16rem; - border-radius: 1rem; - height: 40rem; + padding: calc(2rem*1.2) 0; + width: calc(16rem*1.2); + border-radius: calc(1rem*1.2); + height: calc(40rem*1.2); .habit_Overal_Single { display: flex; align-items: center; justify-content: center; - // margin: 2rem 0; + // margin: 2rem*1.2) 0; transform: scale(.8); - // margin: 3rem 0; + // margin: 3rem*1.2) 0; .habit_Overal_Single_text { font-weight: 600; color: rgba(0, 0, 0, 0.5); @@ -842,7 +842,7 @@ export default defineComponent({ } } .ant-switch { - margin: 0 1rem; + margin: 0 calc(1rem*1.2); background-color: #efefef; } .ant-switch-checked { @@ -852,12 +852,12 @@ export default defineComponent({ .habit_System_Designer { transform: scale(.8); width: 100%; - margin-top: 1.5rem; + margin-top: calc(1.5rem*1.2); .ant-slider-track, .ant-slider-rail { - height: .6rem; + height: calc(.6rem*1.2); 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-handle { @@ -868,39 +868,39 @@ export default defineComponent({ box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2); } .habit_System_Designer_text{ - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: rgba(0, 0, 0, 0.7); font-weight: 600; } } .button_second{ - margin: 1rem 0; - width: 10rem; + margin: calc(1rem*1.2) 0; + width: calc(10rem*1.2); text-align: center; position: initial; transform: none; - height: 3rem; - line-height: 3rem; + height: calc(3rem*1.2); + line-height: calc(3rem*1.2); } .print_input{ - margin-top: 1rem; - width: 9.85rem; + margin-top: calc(1rem*1.2); + width: calc(9.85rem*1.2); display: flex; .search_input{ - width: 6.85rem; - margin-right: 1rem; - padding: 0 1.5rem; + width: calc(6.85rem*1.2); + margin-right: calc(1rem*1.2); + padding: 0 calc(1.5rem*1.2); border: 2px solid #000; - font-size: 1.2rem; + font-size: calc(1.2rem*1.2); font-weight: 400; - height: 3rem; - border-radius: 1.5rem; + height: calc(3rem*1.2); + border-radius: calc(1.5rem*1.2); &::placeholder { color: #C2C2C2; } } i{ - width: 2rem; + width: calc(2rem*1.2); cursor: pointer; display: flex; align-items: center; @@ -908,10 +908,10 @@ export default defineComponent({ } .designOpenrtion_nav{ display: flex; - margin-top: 2rem; + margin-top: calc(2rem*1.2); flex-wrap: wrap; width: 100%; - height: 12rem; + height: calc(12rem*1.2); overflow-x: hidden; justify-content: space-evenly; &.designOpenrtion_nav::-webkit-scrollbar { @@ -926,7 +926,7 @@ export default defineComponent({ } .designOpenrtion_single{ width: 40%; - margin-bottom: 2rem; + margin-bottom: calc(2rem*1.2); } img{ width: 100%; @@ -967,11 +967,11 @@ export default defineComponent({ // max-width: 100%; // max-height: 100%; // width: 100%; - // height: 50rem; - max-height: 50rem; - min-height: 30rem; + // height: 50rem*1.2); + max-height: calc(50rem*1.2); + min-height: calc(30rem*1.2); width: auto; - max-width: 60rem; + max-width: calc(60rem*1.2); } .designOpenrtion_sketch_mask{ z-index: 3; @@ -1027,8 +1027,8 @@ export default defineComponent({ &.designOpenrtion_Mouoverall{ opacity: 1; border: none; - width: 1.4rem; - height: 1.4rem; + width: calc(1.4rem*1.2); + height: calc(1.4rem*1.2); i{ display: flex; color: #14bcff; @@ -1058,8 +1058,8 @@ export default defineComponent({ li{ cursor: pointer; // border-radius: 50%; - width: 1rem; - height: 1rem; + width: calc(1rem*1.2); + height: calc(1rem*1.2); background-color: rgb(20, 188, 255); position: absolute; pointer-events: none; @@ -1103,8 +1103,8 @@ export default defineComponent({ position: absolute; content: ""; background-color: #14bcff; - width: .2rem; - height: 3rem; + width: calc(.2rem*1.2); + height: calc(3rem*1.2); left: 50%; bottom: 0; transform: translateX(-50%); @@ -1113,11 +1113,11 @@ export default defineComponent({ position: absolute; content: ""; background-color: #14bcff; - top: calc(50% - 3rem); + top: calc(50% - 3rem*1.2); left: 50%; transform: translate(-50%,-50%) ; - width: 1.5rem; - height: 1.5rem; + width: calc(1.5rem*1.2); + height: calc(1.5rem*1.2); border-radius: 50%; } } @@ -1126,8 +1126,8 @@ export default defineComponent({ } .subitOkPreviewBtn{ z-index: 2; - margin: 1rem 0; - width: 10rem; + margin: calc(1rem*1.2) 0; + width: calc(10rem*1.2); text-align: center; position: initial; transform: none; diff --git a/src/component/Detail/DesignPrintOperationMobile.vue b/src/component/Detail/DesignPrintOperationMobile.vue index 18520a06..39e0d6e4 100644 --- a/src/component/Detail/DesignPrintOperationMobile.vue +++ b/src/component/Detail/DesignPrintOperationMobile.vue @@ -5,7 +5,7 @@ v-model:visible="designOpenrtion" :class="[driver__.driver?'hideEvents':'']" :footer="null" - width="65%" + width="78%" :maskClosable="false" :centered="true" :closable="false" @@ -756,50 +756,50 @@ export default defineComponent({ position: absolute; } .ant-modal-body{ - padding: 4rem 5rem 0rem!important; - // height: calc(65vh - 6.4rem); - height: calc(100rem*.614); + padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important; + // height: calc(65vh - 6.4rem*1.2)); + height: calc(65rem*1.2*1.2); display: flex; overflow-y: hidden; flex-direction: column; } .ant-modal-content{ - border-radius: 1rem; + border-radius: calc(1rem*1.2); overflow: hidden; } .designOpenrtion_content { // background: #f2f3fb; - // padding-bottom: 2.9rem; + // padding-bottom: 2.9rem*1.2); display: flex; flex-direction: column; height: 100%; .designOpenrtion_header { position: relative; - height: 6.6rem; + height: calc(6.6rem*1.2); width: 100%; background: #F7F7F7; .placement_modal_title{ position: absolute; height: 100%; - line-height: 6.6rem; - left: 3.7rem; + line-height: calc(6.6rem*1.2); + left: calc(3.7rem*1.2); top: 0; - font-size: 1.8rem; + font-size: calc(1.8rem*1.2); color: #030303; } } .designOpenrtion_right{ - height: 50rem; + height: calc(50rem*1.2); position: absolute; - right: 2rem; + right: calc(2rem*1.2); left: auto; top: 50%; transform: translateY(-50%); - max-height: 50rem; - max-width: 30rem; + max-height: calc(50rem*1.2); + max-width: calc(30rem*1.2); .designOpenrtion_entirety_img{ height: 100%; img{ @@ -822,18 +822,18 @@ export default defineComponent({ flex-direction: column; align-items: center; border: 2px solid; - padding: 2rem 0; - width: 16rem; - border-radius: 1rem; - height: 40rem; + padding: calc(2rem*1.2) 0; + width: calc(16rem*1.2); + border-radius: calc(1rem*1.2); + height: calc(40rem*1.2); .habit_Overal_Single { display: flex; align-items: center; justify-content: center; - // margin: 2rem 0; + // margin: 2rem*1.2) 0; transform: scale(.8); - // margin: 3rem 0; + // margin: 3rem*1.2) 0; .habit_Overal_Single_text { font-weight: 600; color: rgba(0, 0, 0, 0.5); @@ -844,7 +844,7 @@ export default defineComponent({ } } .ant-switch { - margin: 0 1rem; + margin: 0 calc(1rem*1.2); background-color: #efefef; } .ant-switch-checked { @@ -854,12 +854,12 @@ export default defineComponent({ .habit_System_Designer { transform: scale(.8); width: 100%; - margin-top: 1.5rem; + margin-top: calc(1.5rem*1.2); .ant-slider-track, .ant-slider-rail { - height: .6rem; + height: calc(.6rem*1.2); 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-handle { @@ -870,39 +870,39 @@ export default defineComponent({ box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2); } .habit_System_Designer_text{ - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); color: rgba(0, 0, 0, 0.7); font-weight: 600; } } .button_second{ - margin: 1rem 0; - width: 10rem; + margin: calc(1rem*1.2) 0; + width: calc(10rem*1.2); text-align: center; position: initial; transform: none; - height: 3rem; - line-height: 3rem; + height: calc(3rem*1.2); + line-height: calc(3rem*1.2); } .print_input{ - margin-top: 1rem; - width: 9.85rem; + margin-top: calc(1rem*1.2); + width: calc(9.85rem*1.2); display: flex; .search_input{ - width: 6.85rem; - margin-right: 1rem; - padding: 0 1.5rem; + width: calc(6.85rem*1.2); + margin-right: calc(1rem*1.2); + padding: 0 calc(1.5rem*1.2); border: 2px solid #000; - font-size: 1.2rem; + font-size: calc(1.2rem*1.2); font-weight: 400; - height: 3rem; - border-radius: 1.5rem; + height: calc(3rem*1.2); + border-radius: calc(1.5rem*1.2); &::placeholder { color: #C2C2C2; } } i{ - width: 2rem; + width: calc(2rem*1.2); cursor: pointer; display: flex; align-items: center; @@ -910,10 +910,10 @@ export default defineComponent({ } .designOpenrtion_nav{ display: flex; - margin-top: 2rem; + margin-top: calc(2rem*1.2); flex-wrap: wrap; width: 100%; - height: 12rem; + height: calc(12rem*1.2); overflow-x: hidden; justify-content: space-evenly; &.designOpenrtion_nav::-webkit-scrollbar { @@ -928,7 +928,7 @@ export default defineComponent({ } .designOpenrtion_single{ width: 40%; - margin-bottom: 2rem; + margin-bottom: calc(2rem*1.2); } img{ width: 100%; @@ -941,6 +941,7 @@ export default defineComponent({ &.show_print_right{ border: none; padding: 0; + height: auto; } } } @@ -954,6 +955,7 @@ export default defineComponent({ top: 50%; left: 50%; transform: translate(-50%,-50%); + display: flex; &.active{ flex-direction: row; } @@ -967,11 +969,11 @@ export default defineComponent({ // max-width: 100%; // max-height: 100%; // width: 100%; - // height: 50rem; - max-height: 50rem; - min-height: 30rem; + // height: 50rem*1.2); + max-height: calc(50rem*1.2); + min-height: calc(30rem*1.2); width: auto; - max-width: 60rem; + max-width: calc(60rem*1.2); } .designOpenrtion_sketch_mask{ z-index: 3; @@ -1027,8 +1029,8 @@ export default defineComponent({ &.designOpenrtion_Mouoverall{ opacity: 1; border: none; - width: 1.4rem; - height: 1.4rem; + width: calc(1.4rem*1.2); + height: calc(1.4rem*1.2); i{ display: flex; color: #14bcff; @@ -1058,9 +1060,8 @@ export default defineComponent({ li{ cursor: pointer; // border-radius: 50%; - width: 1.5rem; - height: 1.5rem; - padding: 1rem; + width: calc(1rem*1.2); + height: calc(1rem*1.2); background-color: rgb(20, 188, 255); position: absolute; pointer-events: none; @@ -1104,8 +1105,8 @@ export default defineComponent({ position: absolute; content: ""; background-color: #14bcff; - width: .2rem; - height: 4rem; + width: calc(.2rem*1.2); + height: calc(3rem*1.2); left: 50%; bottom: 0; transform: translateX(-50%); @@ -1114,12 +1115,11 @@ export default defineComponent({ position: absolute; content: ""; background-color: #14bcff; - top: calc(50% - 3rem); + top: calc(50% - 3rem*1.2); left: 50%; transform: translate(-50%,-50%) ; - width: 1.5rem; - height: 1.5rem; - padding: 1; + width: calc(1.5rem*1.2); + height: calc(1.5rem*1.2); border-radius: 50%; } } @@ -1128,8 +1128,8 @@ export default defineComponent({ } .subitOkPreviewBtn{ z-index: 2; - margin: 1rem 0; - width: 10rem; + margin: calc(1rem*1.2) 0; + width: calc(10rem*1.2); text-align: center; position: initial; transform: none; diff --git a/src/component/Detail/habit.vue b/src/component/Detail/habit.vue index 5ff7dbcc..2823b8ea 100644 --- a/src/component/Detail/habit.vue +++ b/src/component/Detail/habit.vue @@ -750,17 +750,17 @@ export default defineComponent({ .habit_button { background-color: #fff; border: solid 2px #000; - padding: 0px 2rem; + padding: 0px calc(2rem*1.2); box-sizing: initial; font-weight: 600; - height: 3.2rem; - line-height: 3.2rem; - padding: .4rem 1.5rem; - font-size: 1.2rem; + height: calc(3.2rem*1.2); + line-height: calc(3.2rem*1.2); + padding: calc(.4rem*1.2) calc(1.5rem*1.2); + font-size: calc(1.2rem*1.2); cursor: pointer; position: relative; .fi-bs-angle-down { - margin-left: 1rem; + margin-left: calc(1rem*1.2); display: inline-block; transform: translateY(2px); } @@ -778,17 +778,17 @@ export default defineComponent({ } .habit_content { border: solid 2px #000; - border-radius: 1rem; - padding: 2rem; + border-radius: calc(1rem*1.2); + padding: calc(2rem*1.2); // zoom: .75; - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); transform-origin: top right; position: absolute; - right: -.3rem; + right: calc(-.3rem*1.2); top: 110%; background: #fff; - // width: 25rem; - width: 30rem; + // width: 25rem*1.2); + width: calc(30rem*1.2); opacity: 0; transition: all .3s; transform: scale(0.75)translateY(10%); @@ -800,27 +800,27 @@ export default defineComponent({ } .habit_title { h3 { - font-size: 1.6rem; + font-size: calc(1.6rem*1.2); font-weight: 600; color: #000; margin: 0; } .habit_intro { - font-size: 1.2rem; + font-size: calc(1.2rem*1.2); color: rgba(0, 0, 0, 0.5); font-weight: 500; } } .habit_type { - margin-top: 1.5rem; + margin-top: calc(1.5rem*1.2); cursor: pointer; position: relative; .habit_workspace_show{ width: 100%; z-index: 1; transform: translateY(10%); - top: 4rem; - height: 14rem; + top: calc(4rem*1.2); + height: calc(14rem*1.2); overflow-x: hidden; cursor: auto; &.active{ @@ -832,7 +832,7 @@ export default defineComponent({ display: flex; align-items: center; justify-content: center; - margin: 3rem 0; + margin: calc(3rem*1.2) 0; position: relative; .habit_Overal_Single_text { font-weight: 600; @@ -844,14 +844,14 @@ export default defineComponent({ } :deep(.ant-switch) { - margin: 0 1rem; + margin: 0 calc(1rem*1.2); } .habit_sex_show{ width: 100%; z-index: 1; transform: translateY(10%); - top: 4rem; - height: 14rem; + top: calc(4rem*1.2); + height: calc(14rem*1.2); overflow-x: hidden; cursor: auto; &.active{ @@ -860,14 +860,14 @@ export default defineComponent({ } } .habit_habit_singleton { - margin-bottom: 3rem; + margin-bottom: calc(3rem*1.2); position: relative; .habit_singleton_show{ width: 100%; z-index: 1; transform: translateY(10%); - top: 4rem; - height: 14rem; + top: calc(4rem*1.2); + height: calc(14rem*1.2); overflow-x: hidden; cursor: auto; &.active{ @@ -877,12 +877,12 @@ export default defineComponent({ } .habit_System_Designer { - margin-top: 8rem; + margin-top: calc(8rem*1.2); :deep(.ant-slider-track), :deep(.ant-slider-rail) { - height: .6rem; + height: calc(.6rem*1.2); 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-handle) { @@ -901,20 +901,20 @@ export default defineComponent({ } } .habit_model{ - margin-top: 2rem; + margin-top: calc(2rem*1.2); } .habit_model_show{ position: absolute; background-color: #fff; border: solid 2px #000; - border-radius: 1rem; - padding: 2rem; - bottom: -.5rem; + border-radius: calc(1rem*1.2); + padding: calc(2rem*1.2); + bottom: calc(-.5rem*1.2); transform: translateY(110%); - right: -.2rem; - width: 40rem; - // width: 35rem; + right: calc(-.2rem*1.2); + width: calc(40rem*1.2); + // width: 35rem*1.2); opacity: 0; transition: all .3s; display: none; @@ -923,11 +923,11 @@ export default defineComponent({ transform: translateY(100%); } .habit_btn{ - min-height: 26rem; + min-height: calc(26rem*1.2); display: flex; justify-content: space-between; .model_current{ - margin-right: 3rem; + margin-right: calc(3rem*1.2); .model_text{ text-align: center; } @@ -936,7 +936,7 @@ export default defineComponent({ .habit_model_list{ margin: 0; li{ - padding: .5rem 0; + padding: calc(.5rem*1.2) 0; display: flex; input{ border: 0; @@ -958,9 +958,9 @@ export default defineComponent({ border-radius: 50%; border: 1px solid #000; display: inline-block; - width: 2rem; - height: 2rem; - line-height: 2rem; + width: calc(2rem*1.2); + height: calc(2rem*1.2); + line-height: calc(2rem*1.2); text-align: center; } i{ @@ -971,7 +971,7 @@ export default defineComponent({ cursor: pointer; } .fi-rr-trash{ - margin-left: 1rem; + margin-left: calc(1rem*1.2); } } li:hover{ @@ -979,7 +979,7 @@ export default defineComponent({ } .material_content_list_loding{ width: 100%; - height: 4rem; + height: calc(4rem*1.2); display: flex; img{ width: auto; @@ -998,7 +998,7 @@ export default defineComponent({ display: flex; justify-content: center; :deep(.ant-switch) { - margin: 0 1rem; + margin: 0 calc(1rem*1.2); } .habit_System_Seleves_text { font-weight: 600; @@ -1020,19 +1020,19 @@ export default defineComponent({ overflow-x: auto; &.model_img::-webkit-scrollbar { /* 竖轴的宽度 */ - width: 1rem; + width: calc(1rem*1.2); /* 横轴的高度 */ - height: 1rem; + height: calc(1rem*1.2); transition: all .3s; } /* 进度 */ &.model_img::-webkit-scrollbar-thumb { - border-radius: 1rem; + border-radius: calc(1rem*1.2); background: rgba(238, 238, 244, 0); } /* 轨道 */ &.model_img::-webkit-scrollbar-track { - border-radius: 1rem; + border-radius: calc(1rem*1.2); background: rgba(238, 238, 244, 0); } &.model_img:hover { @@ -1051,10 +1051,10 @@ export default defineComponent({ } div{ width: auto; - margin-right: 1rem; + margin-right: calc(1rem*1.2); } img{ - width: 10rem; + width: calc(10rem*1.2); cursor: pointer; } } @@ -1077,7 +1077,7 @@ export default defineComponent({ display: flex; align-items: center; justify-content: space-between; - font-size: 1.4rem; + font-size: calc(1.4rem*1.2); } diff --git a/src/component/HomePage/Material.vue b/src/component/HomePage/Material.vue index 58776d1c..49fdb85a 100644 --- a/src/component/HomePage/Material.vue +++ b/src/component/HomePage/Material.vue @@ -372,18 +372,18 @@ export default defineComponent({