index.less 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. .box {
  2. width: 750rpx;
  3. height: 652rpx;
  4. padding: 28rpx 0 0;
  5. background: #FFFFFF;
  6. border-radius: 30rpx 30rpx 0rpx 0rpx;
  7. display: flex;
  8. flex-direction: column;
  9. align-items: center;
  10. .header {
  11. width: 100%;
  12. position: relative;
  13. font-size: 28rpx;
  14. color: #000000;
  15. text-align: center;
  16. .close {
  17. position: absolute;
  18. right: 24rpx;
  19. top: -30rpx;
  20. line-height: 60rpx;
  21. font-size: 50rpx;
  22. }
  23. }
  24. .tips{
  25. margin-top: 24rpx;
  26. font-size: 22rpx;
  27. }
  28. .goodList {
  29. margin-top: 82rpx;
  30. width: 100%;
  31. display: flex;
  32. align-items: center;
  33. justify-content: space-between;
  34. box-sizing: border-box;
  35. padding: 0 40rpx;
  36. .payBox {
  37. position: relative;
  38. width: 318rpx;
  39. height: 318rpx;
  40. background-size: cover;
  41. text-align: center;
  42. display: inline-block;
  43. border-radius: 20rpx;
  44. .name {
  45. margin-top: 42rpx;
  46. font-weight: 500;
  47. font-size: 40rpx;
  48. }
  49. .price {
  50. margin-top: 22rpx;
  51. font-weight: 500;
  52. font-size: 56rpx;
  53. }
  54. .originPrice {
  55. margin-top: 28rpx;
  56. font-size: 24rpx;
  57. text-decoration: line-through;
  58. }
  59. }
  60. .year {
  61. background-image: url(https://reader-wx.ai160.com/images/reader/pay/yuedao365.webp);
  62. color: #FEF4B5;
  63. }
  64. .month {
  65. background-image: url(http://reader-wx.ai160.com/images/reader/pay/yuedao90.webp);
  66. color: #7D320A;
  67. }
  68. }
  69. }