你可以通过将所有的 px
单位除以 2 来简化 CSS 样式表。以下是修改后的代码:
.serice_common_alert_box {
position: fixed;
z-index: 99;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.serice_common_alert_layer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba($color: #000000, $alpha: 0.7);
}
.serice_common_alert_content_box {
padding: 16px; // 从32px变为16px
background-color: #fff;
border-radius: 8px; // 从16px变为8px
overflow: hidden;
z-index: 2;
flex: 1;
margin: 0 38px; // 从76px变为38px
color: #222;
.serice_common_alert_title {
margin: 8px 0; // 从16px变为8px
font-size: 16px; // 从32px变为16px
font-weight: 500;
text-align: center;
}
.serice_common_alert_content {
margin-bottom:24px; // 从48px变为24px
font-size:14px; // 从28px变为14px
text-align: center;
}
.serice_common_alert_btn_box {
display:flex ;
flex-direction : row ;
align-items:center ;
justify-content:center ;
.serice_common_alert_btn {
&:nth-child(1) {
margin-right :6 px ; // 从12 px变为6 px
}
&:nth-child(2) {
background-color:#573d91 ;
color:#fff ;
border-color:#573d91 ;
}
flex :1 ;
border :0.5 px solid #c8c8c8 ;
transform :rotateZ (360deg ) ;
height :36 px ; // 从72 px变为36 px
background-color:#fff ;
font-weight :500 ;
display:flex ;
flex-direction :row ;
align-items:center ;
justify-content:center ;
border-radius :50 px ; // 从100 px变为50 px
font-size :14 px ; // 从28 px变为14 px
&.hidden_btn{
display:none ;
}
}
}
}
这些调整保留了原始的样式布局,同时将所有带 px
的值都减半。注意,在进行这样的调整时,确保查看效果,以便确认视觉上的一致性是否符合你的预期。
内容由零声教学AI助手提供,问题来源于学员提问