ZBLOG

.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: absol...

你可以通过将所有的 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助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20487

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?