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;