giftBagSize.wxss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. page {
  2. padding-bottom: 180rpx;
  3. }
  4. /* 礼包列表 */
  5. .giftBagList {
  6. width: 710rpx;
  7. margin-left: 20rpx;
  8. border-radius: 24rpx;
  9. padding: 30rpx 20rpx;
  10. box-sizing: border-box;
  11. background-color: #fff;
  12. margin-top: 20rpx;
  13. }
  14. .giftBagList .title{
  15. font-size: 32rpx;
  16. font-weight: 600;
  17. color: #333;
  18. }
  19. .giftBagList-item {
  20. width: 662rpx;
  21. height: 140rpx;
  22. border-radius: 20rpx;
  23. padding: 20rpx;
  24. box-sizing: border-box;
  25. margin-top: 20rpx;
  26. display: flex;
  27. }
  28. .giftBagList-item image{
  29. width: 100rpx;
  30. height: 100rpx;
  31. border-radius: 24rpx;
  32. margin-right: 20rpx;
  33. }
  34. .giftBagList-item .right{
  35. flex: 1;
  36. display: flex;
  37. flex-direction: column;
  38. justify-content: space-between;
  39. position: relative;
  40. }
  41. .giftBagList-item .right .name{
  42. width: 500rpx;
  43. text-overflow: ellipsis;
  44. white-space: nowrap;
  45. overflow: hidden;
  46. font-size: 28rpx;
  47. color: #333;
  48. }
  49. .giftBagList-item .right .num{
  50. font-size: 28rpx;
  51. color: #333;
  52. text-align: right;
  53. }
  54. .giftBagList-item .right .radio{
  55. width: 40rpx;
  56. height: 40rpx;
  57. border: 2rpx solid #FA7D22;
  58. border-radius: 50%;
  59. position: absolute;
  60. right: 0;
  61. bottom: 0;
  62. }
  63. .giftBagList-item .right .radio-box image {
  64. width: 53rpx;
  65. height: 53rpx;
  66. position: absolute;
  67. right: -24rpx;
  68. bottom: 0;
  69. }
  70. .giftBagList-item .right .radioB{
  71. display: flex;
  72. justify-content: flex-end;
  73. }
  74. .giftBagList-item .right .radioB image{
  75. width: 40rpx;
  76. height: 40rpx;
  77. margin: 0;
  78. }
  79. .giftBagList-item .right .radioNum{
  80. margin: 0 10rpx;
  81. }
  82. .activeExchange{
  83. background-color: #fff7f2;
  84. border: 2rpx solid #FA7D22;
  85. }
  86. /* 确认选择 */
  87. .btn {
  88. width: 750rpx;
  89. height: 140rpx;
  90. background: #FFFFFF;
  91. position: fixed;
  92. bottom: 0;
  93. }
  94. .affirm {
  95. width: 670rpx;
  96. height: 84rpx;
  97. background: #FA7D22;
  98. border-radius: 42rpx;
  99. margin-left: 40rpx;
  100. margin-top: 30rpx;
  101. font-size: 32rpx;
  102. color: #FFFFFF;
  103. text-align: center;
  104. line-height: 84rpx;
  105. }