index.less 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. .buyVip {
  2. position: fixed;
  3. z-index: 12;
  4. left: 0rpx;
  5. top: 0rpx;
  6. width: 100vw;
  7. height: 100vh;
  8. background: rgba(0, 0, 0, 0.7);
  9. .modal {
  10. position: relative;
  11. width: 677rpx;
  12. margin: 140rpx auto 0rpx;
  13. border-radius: 20rpx;
  14. text-align: center;
  15. overflow: hidden;
  16. background-color: white;
  17. .header {
  18. width: 100%;
  19. height: 172rpx;
  20. background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
  21. text-align: center;
  22. font-size: 36rpx;
  23. font-weight: bold;
  24. border-bottom-left-radius: 100rpx;
  25. border-bottom-right-radius: 100rpx;
  26. overflow: hidden;
  27. .h1 {
  28. margin: 24rpx 0rpx;
  29. }
  30. }
  31. .goodsList {
  32. margin: 50rpx 0 30rpx;
  33. width: 100%;
  34. height: 310rpx;
  35. padding: 0rpx 20rpx;
  36. white-space: nowrap;
  37. .payBox {
  38. position: relative;
  39. margin-right: 22rpx;
  40. width: 268rpx;
  41. height: 268rpx;
  42. background-size: cover;
  43. text-align: center;
  44. display: inline-block;
  45. border-radius: 20rpx;
  46. .pay {
  47. position: absolute;
  48. bottom: 24rpx;
  49. left: 50%;
  50. transform: translateX(-50%);
  51. padding: 6rpx 40rpx;
  52. font-size: 26rpx;
  53. font-weight: bold;
  54. border-radius: 50rpx;
  55. }
  56. }
  57. .payBox::after {
  58. content: '';
  59. position: absolute;
  60. width: 268rpx;
  61. height: 45rpx;
  62. left: 0;
  63. bottom: -42rpx;
  64. background: linear-gradient(180deg, #2A2116 0%, rgba(255, 255, 255, 0) 100%);
  65. border-radius: 22rpx 22rpx 0rpx 0rpx;
  66. opacity: 0.26;
  67. }
  68. .pbbg1 {
  69. background-image: url(http://reader-wx.ai160.com/images/reader/v3/12992x.png);
  70. .pay {
  71. background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
  72. }
  73. }
  74. .pbbg2 {
  75. background-image: url(http://reader-wx.ai160.com/images/reader/v3/2992x.png);
  76. .pay {
  77. background: linear-gradient(285deg, #DFF2EE 0%, #D8E9FD 39%, #BDE6F8 72%, #BAE7F7 100%);
  78. }
  79. }
  80. .pbbg3 {
  81. background-image: url(http://reader-wx.ai160.com/images/reader/v3/55152x.png);
  82. .pay {
  83. background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
  84. }
  85. }
  86. }
  87. .iosVip{
  88. margin: 30rpx 0;
  89. width: 580rpx;
  90. height: 560rpx;
  91. }
  92. }
  93. .close {
  94. display: block;
  95. margin: 0 auto;
  96. padding: 40rpx;
  97. width: 54rpx;
  98. height: 54rpx;
  99. }
  100. }