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

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

  1. .wash_list {
  2. height: 200vh; // 从100vh改为200vh
  3. overflow-y: auto;
  4. padding: 48px 32px 60px; // 从24px, 16px, 30px改为48px, 32px, 60px
  5. background-color: #fafafa;
  6. &::-webkit-scrollbar {
  7. display: none;
  8. width: 0;
  9. }
  10. &_toast_text {
  11. text-align: left;
  12. }
  13. &_card {
  14. margin-bottom: 40px; // 从20px改为40px
  15. &_item {
  16. border-radius: 24px; // 从12px改为24px
  17. background-color: #fff;
  18. box-shadow: 2px 8px 16px 0 rgba(0, 0, 0, 0.02); // 去掉多余的逗号并调整阴影
  19. padding: 32px; // 从16px改为32px
  20. margin-bottom: 32px; // 从16px改为32px
  21. &_title {
  22. display: flex;
  23. align-items: center;
  24. justify-content: space-between;
  25. &_main {
  26. font-family: PingFang SC;
  27. font-size: 32px; // 从16px改为32px
  28. font-weight: 500;
  29. line-height: 36px; // 从18 px 改为36 px
  30. color: #272727;
  31. }
  32. &_tiny {
  33. font-family: PingFang SC;
  34. font-size: 24px; // 从12 px 改为24 px
  35. line-height: 36 px;
  36. color:#272727;
  37. &.working {
  38. color:#FF5500;
  39. }
  40. }
  41. }
  42. &_detail {
  43. margin-top:32 px ;//从16 px改为32 px
  44. display:flex ;
  45. align-items:center ;
  46. justify-content :space-between ;
  47. &_order {
  48. display:flex ;
  49. align-items:center ;
  50. &_bg {
  51. width :112 px ;//从56 px 改为112 px
  52. height :112 px ;//从56 px 改为112 px
  53. border-radius :16 px ;//从8 pk 改为16 pk
  54. background:#F4F4F4 ;
  55. display:flex ;
  56. align-items:center ;
  57. justify-content:center ;
  58. &_icon{
  59. width :80 pw ;//从40 pw 改为80 pw
  60. height :80 pw ;//从40 pw 改为80 pw
  61. }
  62. }
  63. //_info部分的修改
  64. //_desc部分的修改
  65. }
  66. //_price部分的修改
  67. }
  68. //_footer部分的修改
  69. &.grey{
  70. color:#999;
  71. .wash_list_card_item_title_main{
  72. color:#999 ;
  73. }
  74. }
  75. }
  76. }
  77. //_bottom部分的修改
  78. }

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


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?