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

作者：golang云原生栏目：公开2024-11-03 10:46190

你可以通过将所有的 px 单位除以 2 来简化 CSS 样式表。以下是修改后的代码：

  1. .serice_common_alert_box {
  2.   position: fixed;
  3.   z-index: 99;
  4.   top: 0;
  5.   left: 0;
  6.   bottom: 0;
  7.   right: 0;
  8.   display: flex;
  9.   flex-direction: row;
  10.   justify-content: center;
  11.   align-items: center;
  13.   .serice_common_alert_layer {
  14.     position: absolute;
  15.     top: 0;
  16.     left: 0;
  17.     bottom: 0;
  18.     right: 0;
  19.     background-color: rgba($color: #000000, $alpha: 0.7);
  20.   }
  22.   .serice_common_alert_content_box {
  23.     padding: 16px; // 从32px变为16px
  24.     background-color: #fff;
  25.     border-radius: 8px; // 从16px变为8px
  26.     overflow: hidden;
  27.     z-index: 2;
  28.     flex: 1;
  29.     margin: 0 38px; // 从76px变为38px
  30.     color: #222;
  31.     
  32.     .serice_common_alert_title {
  33.       margin: 8px 0; // 从16px变为8px
  34.       font-size: 16px; // 从32px变为16px
  35.       font-weight: 500;
  36.       text-align: center;
  37.     }
  38.     
  39.     .serice_common_alert_content {
  40.       margin-bottom:24px; // 从48px变为24px
  41.       font-size:14px; // 从28px变为14px
  42.       text-align: center;
  43.     }
  45.     .serice_common_alert_btn_box {
  46.       display:flex ;
  47.       flex-direction : row ;
  48.       align-items:center ;
  49.       justify-content:center ;
  50.       
  51.       .serice_common_alert_btn {
  52.         &:nth-child(1) {
  53.           margin-right :6 px ; // 从12 px变为6 px 
  54.         }
  55.         
  56.         &:nth-child(2) {
  57.           background-color:#573d91 ;
  58.           color:#fff ;
  59.           border-color:#573d91 ;
  60.         }
  61.         
  62.         flex :1 ;
  63.         border :0.5 px solid #c8c8c8 ;
  64.         transform :rotateZ (360deg ) ;
  65.         height :36 px ; // 从72 px变为36 px 
  66.         background-color:#fff ;  
  67.         font-weight :500 ;   
  68.         display:flex ;  
  69.         flex-direction :row ;  
  70.         align-items:center ;  
  71.         justify-content:center ;  
  72.         border-radius :50 px ; // 从100 px变为50 px 
  73.         font-size :14 px ; // 从28 px变为14 px 
  74.        
  75.        &.hidden_btn{
  76.          display:none ;
  77.        } 
  78.      }     
  79.    }   
  80.  }

这些调整保留了原始的样式布局，同时将所有带 px 的值都减半。注意，在进行这样的调整时，确保查看效果，以便确认视觉上的一致性是否符合你的预期。


内容由零声教学AI助手提供，问题来源于学员提问

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

golang云原生 golang云原生 管理员
分享：
扫描分享到社交APP
上一篇
下一篇

相关推荐

发表列表
游客 游客
此处应有掌声~
评论列表

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

golang云原生

golang云原生

  • 23734文章
  • 0评论
  • 2粉丝
  • 0被赞
最近发布
热门排行
热评文章
猜您喜欢
热门标签
Copyright ©2022    湖南零声信息科技有限公司    版权所有     湘ICP备18009867号-1          证照中心 

联系我们

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

微信号：3007537140

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

关注我们
x

注册

已经有帐号？
简单注册快人一步