groupRecord.wxss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. /* 切换栏 */
  2. .tabs{
  3. width: 100%;
  4. height: 120rpx;
  5. background-color: #fff;
  6. display: flex;
  7. padding: 30rpx 44rpx 0 44rpx;
  8. box-sizing: border-box;
  9. justify-content: space-between;
  10. }
  11. .tabs-item{
  12. position: relative;
  13. font-size: 28rpx;
  14. color: #666666;
  15. }
  16. .tabs-item.active{
  17. color: #333333;
  18. }
  19. .tabs-item.active::after{
  20. content: '';
  21. position: absolute;
  22. height: 8rpx;
  23. border-radius: 10rpx;
  24. width: 40rpx;
  25. background: linear-gradient(144deg, #FA7D22 0%, #FA4622 100%);
  26. bottom: 30rpx;
  27. left: 50%;
  28. transform: translateX(-50%);
  29. }
  30. /* 拼团内容 */
  31. .product{
  32. width: 100%;
  33. padding: 0 20rpx;
  34. margin-top: 20rpx;
  35. }
  36. .product-item{
  37. width: 710rpx;
  38. height: 324rpx;
  39. background-color:#fff;
  40. border-radius: 24rpx;
  41. padding: 24rpx;
  42. box-sizing: border-box;
  43. margin-top: 20rpx;
  44. }
  45. .product-item-top{
  46. display: flex;
  47. }
  48. .product-item-left image{
  49. width: 160rpx;
  50. height: 160rpx;
  51. margin-right: 20rpx;
  52. border-radius: 20rpx;
  53. }
  54. .product-item-right{
  55. flex: 1;
  56. height: 160rpx;
  57. display: flex;
  58. flex-direction: column;
  59. justify-content: space-between;
  60. }
  61. .item-right-title{
  62. height: 80rpx;
  63. width: 100%;
  64. font-size: 28rpx;
  65. color: #333333;
  66. }
  67. .item-right-price{
  68. text-align: right;
  69. }
  70. .item-right-price text{
  71. text-align: right;
  72. font-size: 20rpx;
  73. color: #333333;
  74. }
  75. .item-right-price .price__big{
  76. font-size: 36rpx;
  77. color: #333333;
  78. }
  79. .product-line{
  80. width: 100%;
  81. height: 2rpx;
  82. background-color: #f9f9f9;
  83. margin-top: 30rpx;
  84. }
  85. .product-button{
  86. display: flex;
  87. justify-content: flex-end;
  88. height: 98rpx;
  89. display: flex;
  90. align-items: center;
  91. }
  92. .product-button .grouping{
  93. width: 168rpx;
  94. height: 64rpx;
  95. font-size: 28rpx;
  96. text-align: center;
  97. line-height: 64rpx;
  98. border-radius: 42rpx;
  99. border: 1px solid #E1E1E1;
  100. color: #333333;
  101. }
  102. .product-button .group{
  103. font-size: 28rpx;
  104. color: #999999;
  105. }