index.acss 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. .ab-mall-new-component .goods-detail-container {
  2. display: flex;
  3. flex-direction: column;
  4. background-color: #f5f5f5;
  5. padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  6. padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
  7. }
  8. .ab-mall-new-component .goods-detail-container .swiper-container {
  9. height: 750rpx;
  10. width: 750rpx;
  11. position: relative;
  12. }
  13. .ab-mall-new-component .goods-detail-container .swiper-container .swiper-num {
  14. position: absolute;
  15. padding: 8rpx 30rpx;
  16. z-index: 2;
  17. bottom: 23rpx;
  18. right: 16rpx;
  19. background: rgba(0, 0, 0, 0.1);
  20. border: 1rpx solid rgba(255, 255, 255, 0.1);
  21. border-radius: 30rpx;
  22. font-size: 24rpx;
  23. color: #fff;
  24. letter-spacing: 0;
  25. line-height: 30rpx;
  26. font-weight: 400;
  27. }
  28. .ab-mall-new-component .goods-detail-container .swiper-container .swiper-stock {
  29. position: absolute;
  30. padding: 4rpx 0;
  31. z-index: 2;
  32. bottom: 23rpx;
  33. left: 56rpx;
  34. font-size: 36rpx;
  35. color: #fff;
  36. font-weight: 400;
  37. }
  38. .ab-mall-new-component .goods-detail-container .swiper-container .custom-container {
  39. display: flex;
  40. height: 100%;
  41. justify-content: left;
  42. align-items: center;
  43. }
  44. .ab-mall-new-component .goods-detail-container .detail-container {
  45. padding: 24rpx;
  46. }
  47. .ab-mall-new-component .goods-detail-container .detail-container .head {
  48. display: flex;
  49. padding: 24rpx 32rpx 24rpx;
  50. flex-direction: column;
  51. background-color: #fff;
  52. border-radius: 16rpx;
  53. }
  54. .ab-mall-new-component .goods-detail-container .detail-container .head-title {
  55. display: -webkit-box;
  56. -webkit-box-orient: vertical;
  57. -webkit-line-clamp: 2;
  58. overflow: hidden;
  59. font-size: 40rpx;
  60. color: #333;
  61. font-weight: 600;
  62. margin-bottom: 16rpx;
  63. }
  64. .ab-mall-new-component .goods-detail-container .detail-container .head-stock {
  65. font-size: 24rpx;
  66. color: #999;
  67. letter-spacing: 0;
  68. font-weight: 400;
  69. margin-bottom: 24rpx;
  70. }
  71. .ab-mall-new-component .goods-detail-container .detail-container .head-stock.red {
  72. color: #ff3b30;
  73. }
  74. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car {
  75. display: flex;
  76. align-items: flex-end;
  77. justify-content: space-between;
  78. flex-wrap: nowrap;
  79. height: 64rpx;
  80. }
  81. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car .price {
  82. margin-right: 24rpx;
  83. color: #ff3b30;
  84. display: flex;
  85. align-items: baseline;
  86. }
  87. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car .price-icon {
  88. font-size: 36rpx;
  89. margin-right: 8rpx;
  90. }
  91. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car .price-text {
  92. position: relative;
  93. font-size: 60rpx;
  94. letter-spacing: 0;
  95. font-weight: 700;
  96. line-height: 60rpx;
  97. }
  98. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car .price .pre-price {
  99. flex: 1;
  100. color: #999;
  101. font-size: 24rpx;
  102. margin-left: 24rpx;
  103. font-weight: 400;
  104. text-decoration: line-through;
  105. }
  106. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car .price-is-member {
  107. color: #cf884b;
  108. }
  109. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car .car {
  110. background: #1677ff;
  111. border-radius: 32rpx;
  112. padding: 18rpx 30rpx;
  113. font-size: 28rpx;
  114. color: #fff;
  115. letter-spacing: 0;
  116. font-weight: 600;
  117. }
  118. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car .car.inactive {
  119. background: #c9c9c9;
  120. }
  121. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car .step {
  122. flex: 1;
  123. max-width: 75px;
  124. }
  125. .ab-mall-new-component .goods-detail-container .detail-container .head-money-car .disable {
  126. color: #e5e5e5;
  127. }
  128. .ab-mall-new-component .goods-detail-container .detail-container .head .member-price {
  129. color: #ff3b30;
  130. font-size: 24rpx;
  131. font-weight: 700;
  132. }
  133. .ab-mall-new-component .goods-detail-container .detail-container .goods-limit {
  134. display: flex;
  135. }
  136. .ab-mall-new-component .goods-detail-container .detail-container .detail-title {
  137. margin: 21rpx 32rpx 24rpx;
  138. font-size: 32rpx;
  139. color: #333;
  140. font-weight: 500;
  141. }
  142. .ab-mall-new-component .goods-detail-container .detail-container .detail-info {
  143. padding: 40rpx 24rpx;
  144. background: #fff;
  145. }
  146. .ab-mall-new-component .goods-detail-container .detail-container .detail-info-title {
  147. font-size: 30rpx;
  148. color: #000;
  149. letter-spacing: 0;
  150. font-weight: 600;
  151. margin-bottom: 16rpx;
  152. overflow: hidden;
  153. text-overflow: ellipsis;
  154. white-space: nowrap;
  155. }
  156. .ab-mall-new-component .goods-detail-container .detail-container .detail-info-title-text {
  157. display: inline;
  158. font-weight: 400;
  159. }