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

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

@@ -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;
}
}

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

@@ -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{

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

@@ -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;
}
}

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

@@ -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;

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

@@ -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;

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

@@ -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);
}
</style>
<style>

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

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

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

@@ -470,21 +470,21 @@ export default defineComponent({
.designOpenrtion_modal {
// max-width: 1440px;
.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-content{
border-radius: 1rem;
border-radius: calc(1rem*1.2);
overflow: hidden;
}
}
.design_compile_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem;
// padding-bottom: 2.9rem*1.2);
display: flex;
flex-direction: column;
height: 100%;
@@ -531,13 +531,13 @@ export default defineComponent({
transform: translate(-50%,-0%);
transition: all .3s;
justify-content: center;
margin-bottom: 1rem;
margin-bottom: calc(1rem*1.2);
>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%;
@@ -553,7 +553,7 @@ export default defineComponent({
}
}
>div:nth-child(1){
margin-left: 0rem;
margin-left: calc(0rem*1.2);
}
}
.designOpenrtion_print,.detail_modal_item_front{
@@ -595,8 +595,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;
@@ -653,16 +653,16 @@ export default defineComponent({
top: calc(50% - 30px);
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%;
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin-bottom: 2rem;
width: 10rem;
margin-bottom: calc(2rem*1.2);
width: calc(10rem*1.2);
text-align: center;
bottom: 0;
position: relative;

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

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

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

@@ -283,7 +283,9 @@ export default defineComponent({
if(this.driver__.driver){
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获取颜色
@@ -523,11 +525,11 @@ export default defineComponent({
position: relative;
display: flex;
justify-content: space-between;
padding-top: 7rem;
padding-top: calc(7rem*1.2);
.modal_layout{
position: absolute;
top: 0;
left: calc(47% + 3rem);
left: calc(47% + 3rem*1.2);
.modal_text{
font-size: var(--aida-fsize1-4);
font-weight: 400;
@@ -537,9 +539,9 @@ export default defineComponent({
justify-content: space-between;
}
.modal_img{
width: 50rem;
width: calc(50rem*1.2);
// width: 40rem;
height: 5rem;
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
align-items: center;
@@ -547,9 +549,9 @@ export default defineComponent({
display: none;
}
.modal_img_item{
width: 4rem;
height: 4rem;
margin: 0 1rem 0 0;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) 0 0;
position: relative;
cursor: pointer;
border: 0.1rem solid #DCDCEC;
@@ -572,17 +574,17 @@ export default defineComponent({
background: #FFFFFF;
.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;
line-height: 2.4rem;
line-height: calc(2.4rem*1.2);
font-size: var(--aida-fsize1-8);
color: #333333;
display: flex;
align-items: center;
.color_edit{
font-size: 2rem;
margin-right: 1rem;
font-size: calc(2rem*1.2);
margin-right: calc(1rem*1.2);
position: absolute;
left: 0;
}
@@ -597,12 +599,12 @@ export default defineComponent({
display: flex;
.right_content_line{
padding-left: 3rem;
padding-left: calc(3rem*1.2);
position: relative;
padding-right: 5rem;
padding-right: calc(5rem*1.2);
.upload_centetn{
overflow-x: hidden;
height: calc(100% - 4.4rem);
height: calc(100% - 4.4rem*1.2);
}
.upload_centetn::-webkit-scrollbar {
display: none;
@@ -613,8 +615,8 @@ export default defineComponent({
display: inline-block;
// width: 16.5rem;
// height: 16.5rem;
width: 12rem;
height: 12rem;
width: calc(12rem*1.2);
height: calc(12rem*1.2);
border: 1px solid #F5F5F5;
vertical-align: top;
@@ -641,11 +643,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;
@@ -655,22 +657,22 @@ export default defineComponent({
}
.upload_img_icon{
width: 4.6rem;
width: calc(4.6rem*1.2);
}
.upload_color{
display: flex;
width: 12rem;
width: calc(12rem*1.2);
flex-wrap: wrap;
justify-content: space-between;
.upload_color_item{
width: 5rem;
height: 5rem;
width: calc(5rem*1.2);
height: calc(5rem*1.2);
position: relative;
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.upload_color_item_bg{
width: 5rem;
height: 5rem;
width: calc(5rem*1.2);
height: calc(5rem*1.2);
}
img{
position: absolute;
@@ -689,11 +691,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);
@@ -702,56 +704,56 @@ export default defineComponent({
}
.chrome_color{
width: 17.5rem;
width: calc(17.5rem*1.2);
// height: 16.5rem;
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-right: calc(-0.4rem*1.2);
margin-top: 0rem;
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{
@@ -762,23 +764,23 @@ 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){
@@ -797,11 +799,11 @@ export default defineComponent({
flex-direction: row-reverse;
.vc-chrome-color-wrap{
// width: 3.6rem;
margin-left: 2rem;
margin-left: calc(2rem*1.2);
width: auto;
.vc-chrome-active-color,.vc-checkerboard{
width: 3rem;
height: 3rem;
width: calc(3rem*1.2);
height: calc(3rem*1.2);
border-radius: 50%;
}
}
@@ -813,15 +815,15 @@ 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{
@@ -833,56 +835,56 @@ export default defineComponent({
}
}
.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: calc(1rem;
// display: flex;
// justify-content: space-between;
// font-size: 1.6rem;
// font-size: calc(1.6rem;
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);
}
}
}
@@ -896,14 +898,14 @@ 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;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
// margin-right: .5rem;
display: flex;
justify-content: space-between;
@@ -919,13 +921,13 @@ export default defineComponent({
display: flex;
flex-direction: column;
.get_color_input{
width: 19.4rem;
height: 3.8rem;
width: calc(19.4rem*1.2);
height: calc(3.8rem*1.2);
background: #FFFFFF;
border: 0.1rem solid #DCDCEC;
padding: 1rem 1.3rem;
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 {
@@ -934,20 +936,20 @@ export default defineComponent({
}
.get_color_button{
margin-top: 1.5rem;
padding: 0 2.2rem;
height: 3.2rem;
margin-top: calc(1.5rem*1.2);
padding: 0 calc(2.2rem*1.2);
height: calc(3.2rem*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;
.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;
}
@@ -957,12 +959,12 @@ export default defineComponent({
}
}
.get_color_bg{
width: 18rem;
height: 18rem;
width: calc(18rem*1.2);
height: calc(18rem*1.2);
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 1.5rem;
margin-top: calc(1.5rem*1.2);
img{
opacity: 0;
position: absolute;
@@ -975,15 +977,15 @@ export default defineComponent({
}
.upload_item{
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
.ant-upload-picture-card-wrapper{
.ant-upload-list{
.ant-upload-select-picture-card{
// margin: 0 2rem 2rem 0;
margin: 0;
display: inline-block;
width: 12rem;
height: 12rem;
width: calc(12rem*1.2);
height: calc(12rem*1.2);
border: 1px solid #F5F5F5;
vertical-align: top;
i{

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

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

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

@@ -372,18 +372,18 @@ export default defineComponent({
</script>
<style lang="less">
.my_material_modal{
height: 30rem;
height: calc(30rem*1.2);
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
flex: 1;
border-radius: 0;
&.my_material_modal::-webkit-scrollbar{display: none;}
.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{
@@ -393,7 +393,7 @@ export default defineComponent({
.ant-modal-body{
background: #F2F3FB;
height: 80vh;
min-height: 72rem;
min-height: calc(72rem*1.2);
overflow-y: hidden;
padding: 0;
}
@@ -405,8 +405,8 @@ export default defineComponent({
width: 100%;
height: auto;
padding: 0;
padding-top: 2.5rem;
padding-bottom: 2rem;
padding-top: calc(2.5rem*1.2);
padding-bottom: calc(2rem*1.2);
background-color: #fff;
position: sticky;
top: 0;
@@ -417,20 +417,20 @@ export default defineComponent({
align-items: center;
.content_search_block{
margin-right: 5rem;
margin-right: calc(5rem*1.2);
display: flex;
.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;
@@ -438,15 +438,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;
}
}
@@ -454,7 +454,7 @@ export default defineComponent({
.icon_close{
color: rgba(174, 178, 183, 1);
font-size: 2.4rem;
font-size: calc(2.4rem*1.2);
cursor: pointer;
}
}
@@ -463,22 +463,22 @@ export default defineComponent({
}
.my_material_content{
// padding: 0 3rem 3.5rem 3rem;
// padding: 0 3rem*1.2) 3.5rem*1.2) 3rem*1.2);
padding: 0;
// height: calc(100% - 6.6rem);
// height: calc(100% - 6.6rem*1.2));
height: auto;
position: relative;
.material_content_top{
padding: 1.3rem 0 2.1rem;
height: 7rem;
padding: calc(1.3rem*1.2) 0 calc(2.1rem*1.2);
height: calc(7rem*1.2);
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.material_content_top_title{
font-size: 2rem;
font-size: calc(2rem*1.2);
color: #030303;
}
@@ -489,7 +489,7 @@ export default defineComponent({
.select_block{
background: #FFFFFF;
color: #1A1A1A !important;
margin-right: 2.3rem;
margin-right: calc(2.3rem*1.2);
.icon-xiala{
color: #1A1A1A !important;
@@ -499,7 +499,7 @@ export default defineComponent({
.check_all_block{
display: flex;
align-items: center;
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #64686D;
cursor: pointer;
@@ -508,12 +508,12 @@ export default defineComponent({
}
.check_block{
width: 2.4rem;
height: 2.4rem;
width: calc(2.4rem*1.2);
height: calc(2.4rem*1.2);
background: #EBECF4;
border: 0.1rem solid #64686D;
padding: 0.3rem;
margin-right: 0.7rem;
border: calc(0.1rem*1.2) solid #64686D;
padding: calc(0.3rem*1.2);
margin-right:calc( 0.7rem*1.2);
.check_block_body{
width: 100%;
@@ -528,18 +528,18 @@ export default defineComponent({
.material_content_body{
width: 100%;
// height: calc(100% - 19rem);
// height: calc(100% - 19rem*1.2));
height: 100%;
overflow-y: auto;
position: relative;
height: 30rem;
height: calc(30rem*1.2);
&.material_content_body::-webkit-scrollbar{display: none;}
.content_img_item{
margin: 0 2rem 5rem 0;
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
@@ -550,30 +550,30 @@ export default defineComponent({
height: 100%;
}
&.moodb{
margin: 0 2rem 2rem 0;
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
}
.pin_block{
.ant-checkbox-wrapper{
height: 2.2rem;
height:calc(2.2rem*1.2);
align-items: center;
span{
font-size: 1.4rem;
line-height: 2.3rem;
font-size: calc(1.4rem*1.2);
line-height: calc(2.3rem*1.2);
}
.ant-checkbox-inner{
width: 1.6rem;
height: 1.6rem;
width:calc( 1.6rem*1.2);
height: calc(1.6rem*1.2);
}
.ant-checkbox-inner::after{
width: .571428571rem;
height: .914285714rem;
width: calc(.571428571rem*1.2);
height: calc(.914285714rem*1.2);
}
}
}
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: 1rem;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
img {
}
@@ -587,21 +587,21 @@ 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;
}
}
.material_content_list_loding{
text-align: center;
img{
height: 10rem;
height: calc(10rem*1.2);
}
}
@@ -624,25 +624,25 @@ export default defineComponent({
}
.material_confirm{
width: 9.8rem;
height: 3.6rem;
line-height: 3.6rem;
font-size: 1.4rem;
width: calc(9.8rem*1.2);
height: calc(3.6rem*1.2);
line-height: calc(3.6rem*1.2);
font-size: calc(1.4rem*1.2);
text-align: center;
margin: 0 auto;
color: #FFFFFF;
background: #343579;
cursor: pointer;
margin-top: 2rem;
margin-top: calc(2rem*1.2);
}
.table_pagination{
position: absolute;
bottom: 3.5rem;
bottom: calc(3.5rem*1.2);
left: 0;
width: 100%;
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 v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
<div class="modal_text">
<div>Layout of selected moodboard</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
<div>{{ $t('MoodboardUpload.selected') }}</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
</div>
<div class="modal_img_max">
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
@@ -505,11 +505,11 @@ export default defineComponent({
height: 100%;
display: flex;
.modal_left {
padding-top: 4rem;
padding-top: calc(4rem*1.2);
width: 47%;
display: flex;
flex-direction: column;
// width: 50rem;
// width: 50rem*1.2);
.switch_type_list {
display: flex;
align-items: center;
@@ -518,14 +518,14 @@ 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: 8rem;
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
@@ -538,10 +538,10 @@ export default defineComponent({
content: "";
display: block;
background: #000;
height: .3rem;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: .6rem;
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
@@ -555,16 +555,16 @@ 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);
}
}
}
.moodboard_body {
padding-top: 2.5rem;
padding-top: calc(2.5rem*1.2);
flex: 1;
height: 30rem;
height: calc(30rem*1.2);
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
display: flex;
@@ -575,7 +575,7 @@ export default defineComponent({
.upload_img_body {
height: 100%;
overflow-y: auto;
margin-bottom: 1rem;
margin-bottom: calc(1rem*1.2);
}
@@ -584,19 +584,19 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: 1.6rem;
margin-right: 0.7rem;
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
margin-left: 3rem;
margin-left: calc(3rem*1.2);
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
@@ -611,18 +611,18 @@ export default defineComponent({
}
.modal_layout{
.modal_img{
width: 40rem;
height: 5rem;
width: calc(40rem*1.2);
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: 4rem;
height: 4rem;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
text-align: center;
margin: 0 1rem 1rem 0;
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
cursor: pointer;
overflow: hidden;
@@ -651,19 +651,19 @@ export default defineComponent({
}
}
.modal_accomplish{
// margin-top: 2rem;
height: 30rem;
// margin-top: 2rem*1.2);
height: calc(30rem*1.2);
display: flex;
flex: 1;
flex-direction: column;
.modal_text{
padding-top: 2rem;
padding-block: 2rem;
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.modal_img_max{
// flex: 1;
width: 57rem;
height: 35rem;
width: calc(57rem*1.2);
height: calc(35rem*1.2);
position: relative;
.mark_loading{
position: absolute;

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

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

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

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

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

@@ -103,7 +103,7 @@ export default defineComponent({
.ant-modal-body {
padding: 0;
// height: calc(65vh - 6.4rem);
height: calc(100rem*.614);
height: calc(65rem*1.2);
// background-color: #181818;
display: flex;
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"
v-model:visible="showCollectionModal"
:footer="null"
width="65%"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -306,18 +306,18 @@ export default defineComponent({
position: absolute;
}
.collection_title{
top: 4rem;
top: calc(4rem*1.2);
display: flex;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
z-index: 2;
align-items: center;
width: 35rem;
width: calc(35rem*1.2);
justify-content: space-between;
.collection_progress{
width: 8rem;
height: 8rem;
width: calc(8rem*1.2);
height: calc(8rem*1.2);
>div{
width: 100% !important;
height: 100% !important;
@@ -328,7 +328,7 @@ export default defineComponent({
}
}
.collection_title_text{
// margin-right: 4rem;
// margin-right: calc(4rem*1.2);
}
.collection_title_text_intro{
font-size: var(--aida-fsize1-4);
@@ -338,17 +338,17 @@ export default defineComponent({
}
.collection_closeIcon{
top: 2rem;
right: 2rem;
top: calc(2rem*1.2);
right: calc(2rem*1.2);
cursor: pointer;
width: 4rem;
height: 4rem;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
display: flex;
align-items: center;
justify-content: center;
.fi-rr-cross-small::before{
padding: .2rem;
padding: calc(.2rem*1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
@@ -362,10 +362,10 @@ export default defineComponent({
.collection_page{
left: 50%;
transform: translateX(-50%);
bottom: 3rem;
bottom: calc(3rem*1.2);
display: flex;
.fi-rr-arrow-small-left{
margin-right: 10rem;
margin-right: calc(10rem*1.2);
}
.fi{
cursor: pointer;
@@ -385,36 +385,36 @@ export default defineComponent({
}
}
.header_icon_fanhui{
margin-right: 1rem;
font-size: 2rem;
margin-right: calc(1rem*1.2);
font-size: calc(2rem*1.2);
cursor: pointer;
}
.header_right_block{
display: flex;
align-items: center;
position: absolute;
right: 2.1rem;
right: calc(2.1rem*1.2);
height: 100%;
.next_step_button{
padding: 0 1.2rem;
height: 3.2rem;
padding: 0 calc(1.2rem*1.2);
height: calc(3.2rem*1.2);
background: #343579;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
color: #FFFFFF;
line-height: 3.2rem;
margin-right: 1.6rem;
line-height: calc(3.2rem*1.2);
margin-right: calc(1.6rem*1.2);
white-space: nowrap;
cursor: pointer;
}
.header_cancel_button{
padding: 0 2.1rem;
height: 3.2rem;
padding: 0 calc(2.1rem*1.2);
height: calc(3.2rem*1.2);
background: #E4E5EB;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
color: #030303;
line-height: 3.2rem;
line-height: calc(3.2rem*1.2);
white-space: nowrap;
cursor: pointer;
}
@@ -431,16 +431,16 @@ export default defineComponent({
// max-width: 1200px ;
// max-width: 1150px ;
.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: 8rem 5rem !important;
padding: calc(8rem*1.2) calc(5rem*1.2) !important;
// 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{
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"
v-model:visible="layout"
:footer="null"
width="65%"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -653,10 +653,10 @@ export default defineComponent({
.ant-modal-body {
padding: 0;
// height: calc(65vh - 6.4rem);
height: calc(100rem*.614);
height: calc(65rem*1.2);
}
.ant-modal-content{
border-radius: 1rem;
border-radius: calc(1rem*1.2);
}
.layout_content {
@@ -665,34 +665,34 @@ export default defineComponent({
height: 100%;
.collection_title{
position: absolute;
top: 4rem;
top: calc(4rem*1.2);
display: flex;
font-size: 1.8rem;
font-size: calc(1.8rem*1.2);
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_title_text{
margin-right: 4rem;
margin-right: calc(4rem*1.2);
}
.collection_title_text_intro{
font-size: 1.2rem;
font-size: calc(1.2rem*1.2);
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.collection_closeIcon{
position: absolute;
top: 2rem;
right: 2rem;
top: calc(2rem*1.2);
right: calc(2rem*1.2);
cursor: pointer;
width: 4rem;
height: 4rem;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
display: flex;
align-items: center;
justify-content: center;
.fi-rr-cross-small::before{
padding: .2rem;
padding: calc(.2rem*1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
@@ -705,7 +705,7 @@ export default defineComponent({
}
.layout_nav{
display: flex;
margin-top: 2rem;
margin-top: calc(2rem*1.2);
justify-content: center;
max-height: 13%;
overflow: hidden;
@@ -721,9 +721,9 @@ export default defineComponent({
overflow: hidden;
img{
object-fit: cover;
width:5rem;
width:calc(5rem*1.2);
cursor: pointer;
margin: 0 2rem;
margin: 0 calc(2rem*1.2);
max-height: 100%;
}
}
@@ -732,13 +732,13 @@ export default defineComponent({
.layout_centent{
display: flex;
// height: 55%;
height: 35rem;
width: 57rem;
height: calc(35rem*1.2);
width: calc(57rem*1.2);
// height: 60%;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
margin: 3rem auto;
margin: calc(3rem*1.2) auto;
overflow: hidden;
// padding: 3rem 0;
justify-content: space-between;
@@ -762,8 +762,8 @@ export default defineComponent({
li{
cursor: pointer;
// border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
z-index: 1049;
@@ -814,8 +814,8 @@ export default defineComponent({
top: calc(50% - 30px);
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%;
}
.layout_translate{
@@ -827,8 +827,8 @@ export default defineComponent({
}
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
// opacity: 0;
width: .8rem;
height: .8rem;
width: calc(.8rem*1.2);
height: calc(.8rem*1.2);
}
.layout_angle_tr{
right: 0%;
@@ -911,7 +911,7 @@ export default defineComponent({
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5rem;
left: calc(5rem*1.2);
overflow-x: hidden;
// background-color: #000;
width: 10%;
@@ -920,19 +920,19 @@ export default defineComponent({
display: none;
}
.layout_left_text{
font-size: 1.6rem;
margin-bottom: 1rem;
font-size: calc(1.6rem*1.2);
margin-bottom: calc(1rem*1.2);
color: #000;
}
.layout_left_items{
width: 100%;
height: 6rem;
height: calc(6rem*1.2);
display: flex;
align-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.layout_left_item{
box-sizing: border-box;
@@ -941,7 +941,7 @@ export default defineComponent({
}
}
.submit_button {
margin: 2rem auto 0;
margin: calc(2rem*1.2) auto 0;
position: relative;
z-index: 2;
}

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

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

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

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