index.wxss 2.4 KB

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