shop.wxss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. @charset "UTF-8";
  2. /* 颜色变量 */
  3. /* 行为相关颜色 */
  4. /* 文字基本颜色 */
  5. /* 背景颜色 */
  6. /* 边框颜色 */
  7. /* 尺寸变量 */
  8. /* 文字尺寸 */
  9. /* 图片尺寸 */
  10. /* Border Radius */
  11. /* 水平间距 */
  12. /* 垂直间距 */
  13. /* 透明度 */
  14. /* 文章场景相关 */
  15. .u-nav-slot {
  16. width: 75%;
  17. display: flex;
  18. justify-content: flex-start;
  19. }
  20. .u-navbar__content {
  21. justify-content: flex-end;
  22. }
  23. .box_shop_card {
  24. background-color: #fff;
  25. }
  26. .box_shop_item {
  27. display: flex;
  28. padding: 20rpx;
  29. border-radius: 10rpx;
  30. }
  31. .store_img {
  32. flex: none;
  33. width: 150rpx;
  34. height: 130rpx;
  35. background-color: #F3F4F6;
  36. }
  37. .subhead_title {
  38. margin-top: 8rpx;
  39. font-size: 28rpx;
  40. color: #82848a;
  41. }
  42. .home_box_content {
  43. display: flex;
  44. flex-direction: column;
  45. justify-content: space-between;
  46. width: calc(100% - 20rpx);
  47. margin-left: 20rpx;
  48. }
  49. .home_name_shop {
  50. font-size: 30rpx;
  51. font-weight: bold;
  52. }
  53. .shop_tabs_box {
  54. display: flex;
  55. justify-content: space-evenly;
  56. padding-bottom: 20rpx;
  57. }
  58. .item_tab_box {
  59. display: flex;
  60. flex-direction: column;
  61. align-items: center;
  62. }
  63. .box_shop {
  64. width: 80rpx;
  65. height: 80rpx;
  66. background-color: #F3F4F6;
  67. }
  68. .tab_title {
  69. font-size: 30rpx;
  70. margin-top: 5rpx;
  71. }
  72. .card_commodity {
  73. display: grid;
  74. grid-template-columns: repeat(2, 1fr);
  75. grid-column-gap: 20rpx;
  76. padding: 20rpx;
  77. }
  78. .image_shop_drug {
  79. width: 100%;
  80. height: 200rpx;
  81. background-color: #F3F4F6;
  82. }
  83. .box_shop_commodity {
  84. padding: 10px;
  85. -webkit-column-break-inside: avoid;
  86. break-inside: avoid;
  87. flex: none;
  88. margin-bottom: 20rpx;
  89. background-color: #fff;
  90. border-radius: 10px;
  91. }
  92. .shop_headline {
  93. font-size: 30rpx;
  94. font-weight: bold;
  95. padding: 10rpx 0rpx;
  96. }
  97. .shop_subhead {
  98. font-size: 26rpx;
  99. }
  100. .box_trolley {
  101. margin-top: 10rpx;
  102. }
  103. .title_money {
  104. font-weight: bold;
  105. }
  106. .shopping_cart {
  107. background-color: #4CAF50;
  108. padding: 6px 10px;
  109. border-radius: 30px;
  110. color: #fff;
  111. font-size: 24rpx;
  112. }