index.acss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. .ab-mall-new-component .goods-item-container {
  2. border-bottom: 1px #eee solid;
  3. }
  4. .ab-mall-new-component .goods-item-container .goods-item-box {
  5. display: flex;
  6. background: #fff;
  7. padding: 24rpx 0;
  8. flex-wrap: nowrap;
  9. }
  10. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info {
  11. flex: 1;
  12. margin-left: 24rpx;
  13. flex-wrap: nowrap;
  14. overflow: hidden;
  15. }
  16. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .name {
  17. color: #333;
  18. font-size: 33rpx;
  19. font-weight: 500;
  20. margin-bottom: 10rpx;
  21. overflow: hidden;
  22. text-overflow: ellipsis;
  23. white-space: nowrap;
  24. }
  25. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .unit-and-stock {
  26. display: flex;
  27. flex-direction: row;
  28. justify-content: space-between;
  29. font-weight: 400;
  30. color: #999;
  31. margin-bottom: 10rpx;
  32. }
  33. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .unit-and-stock .unit {
  34. font-size: 26rpx;
  35. overflow: hidden;
  36. text-overflow: ellipsis;
  37. white-space: nowrap;
  38. flex: 1;
  39. }
  40. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .unit-and-stock .stock {
  41. font-size: 26rpx;
  42. letter-spacing: 0;
  43. }
  44. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .unit-and-stock .stock.red {
  45. color: #ff3b30;
  46. }
  47. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .goods-limit {
  48. display: flex;
  49. margin-bottom: 6rpx;
  50. justify-content: flex-start;
  51. }
  52. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container {
  53. display: flex;
  54. align-items: center;
  55. justify-content: space-between;
  56. flex-wrap: nowrap;
  57. padding-bottom: 5px;
  58. height: 84rpx;
  59. }
  60. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container .price {
  61. color: #ff3b30;
  62. font-size: 30rpx;
  63. font-weight: 500;
  64. margin-right: 16rpx;
  65. }
  66. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container .price-icon {
  67. display: inline;
  68. font-size: 20rpx;
  69. }
  70. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container .price-member-pre {
  71. position: absolute;
  72. font-size: 18rpx;
  73. top: 30rpx;
  74. left: 0;
  75. color: #ff3b30;
  76. }
  77. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container .member-price {
  78. color: #cf884b;
  79. }
  80. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container .pre-price {
  81. flex: 1;
  82. margin-top: 8rpx;
  83. color: #999;
  84. font-size: 18rpx;
  85. font-weight: 400;
  86. text-decoration: line-through;
  87. }
  88. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container .step {
  89. flex: 1;
  90. max-width: 75px;
  91. }
  92. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container .stepper-add {
  93. display: flex;
  94. justify-content: center;
  95. align-items: center;
  96. height: 42rpx;
  97. width: 42rpx;
  98. border-radius: 4.4rpx;
  99. border: 1px solid #e5e5e5;
  100. box-sizing: content-box;
  101. }
  102. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container .disable {
  103. color: #e5e5e5;
  104. }
  105. .ab-mall-new-component .goods-item-container .goods-item-box .goods-info .price-button-container .add-plus-disable {
  106. padding: 12rpx;
  107. color: #999;
  108. }
  109. @keyframes goodsAnime {
  110. 0% {
  111. background-color: rgba(0, 255, 226, 0.2);
  112. }
  113. 25% {
  114. background-color: #fff;
  115. }
  116. 50% {
  117. background-color: rgba(0, 255, 226, 0.2);
  118. }
  119. 75% {
  120. background-color: #fff;
  121. }
  122. 100% {
  123. background-color: rgba(0, 255, 226, 0.2);
  124. }
  125. }
  126. .ab-mall-new-component .goods-item-container .goods-item-active {
  127. display: flex;
  128. background: rgba(0, 255, 226, 0.2);
  129. padding: 12rpx 24rpx 0;
  130. margin: 12rpx -12rpx 12rpx;
  131. -webkit-flex-wrap: nowrap;
  132. flex-wrap: nowrap;
  133. overflow: hidden;
  134. animation-name: goodsAnime;
  135. animation-duration: 3s;
  136. border-radius: 16rpx;
  137. }