ZBLOG

.wash_list{ height: 100vh; overflow-y: auto; padding: 24px 16px 30px; background-color: #fafafa; &::-webkit-scrollbar{ display: none; width: 0; } &_toast_text{ text-align: left; } &_card...

要将你提供的CSS样式替换成2倍像素(通常是为了支持高分辨率屏幕),可以通过以下步骤进行:

  1. 增加字体大小和其他尺寸:将所有的数值乘以2。
  2. 确保单位正确:保持单位不变,例如从 px 仍然使用 px

下面是根据你的代码进行修改后的版本:

.wash_list {
    height: 200vh; // 从100vh改为200vh
    overflow-y: auto;
    padding: 48px 32px 60px; // 从24px, 16px, 30px改为48px, 32px, 60px
    background-color: #fafafa;

    &::-webkit-scrollbar {
        display: none;
        width: 0;
    }
    
    &_toast_text {
        text-align: left;
    }
    
    &_card {
        margin-bottom: 40px; // 从20px改为40px
        
        &_item {
            border-radius: 24px; // 从12px改为24px
            background-color: #fff;
            box-shadow: 2px 8px 16px 0 rgba(0, 0, 0, 0.02); // 去掉多余的逗号并调整阴影
            padding: 32px; // 从16px改为32px
            margin-bottom: 32px; // 从16px改为32px
            
            &_title {
                display: flex;
                align-items: center;
                justify-content: space-between;

                &_main {
                    font-family: PingFang SC;
                    font-size: 32px; // 从16px改为32px
                    font-weight: 500;
                    line-height: 36px; // 从18 px 改为36 px 
                    color: #272727;
                }

                &_tiny {
                    font-family: PingFang SC;
                    font-size: 24px; // 从12 px 改为24 px 
                    line-height: 36 px; 
                    color:#272727;

                    &.working {
                        color:#FF5500;
                    }
                }
            }

            &_detail {
                margin-top:32 px ;//从16 px改为32 px 
                
                display:flex ;
                align-items:center ;
                justify-content :space-between ;

                &_order {
                    
                    display:flex ;
                    align-items:center ;

                   &_bg { 
                       width :112 px ;//从56 px 改为112 px  
                       height :112 px ;//从56 px 改为112 px  
                       border-radius :16 px ;//从8 pk 改为16 pk  
                       background:#F4F4F4 ;
                       display:flex ;
                       align-items:center ;
                       justify-content:center ;

                      &_icon{
                           width :80 pw ;//从40 pw 改为80 pw  
                           height :80 pw ;//从40 pw 改为80 pw  
                          } 

                   }

                   //_info部分的修改
                   //_desc部分的修改

               }

               //_price部分的修改

           }

          //_footer部分的修改

         &.grey{
              color:#999;

              .wash_list_card_item_title_main{
                  color:#999 ;
              }
          }
        }
   } 

   //_bottom部分的修改

}

以上是大致上的更改,你可能还需要根据具体情况微调,特别是在设计和布局上。记得在浏览器中检查样式是否显示正常,并根据需要做进一步调整。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?