邃芒智像相册
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

170 lines
3.2 KiB

  1. page {
  2. background-color: #ededed;
  3. }
  4. .content {
  5. padding: 50rpx 0;
  6. .backGround {
  7. position: relative;
  8. width: 650rpx;
  9. height: 400rpx;
  10. line-height: 150rpx;
  11. color: #ffffff;
  12. font-size: 60rpx;
  13. margin: auto;
  14. border-radius: 50rpx;
  15. overflow: hidden;
  16. image {
  17. position: absolute;
  18. top: 0;
  19. left: 50%;
  20. transform: translateX(-50%);
  21. width: 100%;
  22. height: 100%;
  23. }
  24. }
  25. // .payHistory {
  26. // position: absolute;
  27. // right: 100rpx;
  28. // top: 500rpx;
  29. // font-size: 25rpx;
  30. // color: #07c160;
  31. // }
  32. .orderList {
  33. position: relative;
  34. text-align: center;
  35. margin: auto;
  36. .firstPayInfo {
  37. position: relative;
  38. width: 550rpx;
  39. height: 200rpx;
  40. border: 1px dashed #9f9b88;
  41. border-radius: 30rpx;
  42. background-color: #f7f7f7;
  43. margin: 50rpx auto;
  44. overflow: hidden;
  45. .saleInfo {
  46. font-size: 45rpx;
  47. margin-top: 25rpx;
  48. .salePrice {
  49. font-size: 55rpx;
  50. color: #ff0000;
  51. font-weight: 600;
  52. margin-right: 10rpx;
  53. }
  54. .price {
  55. font-size: 42rpx;
  56. text-decoration: line-through;
  57. }
  58. }
  59. .validInfo {
  60. margin-top: 15rpx;
  61. .day {
  62. font-size: 40rpx;
  63. color: #ff0000;
  64. font-weight: 600;
  65. }
  66. }
  67. .firstCharge {
  68. position: absolute;
  69. top: 28rpx;
  70. right: -50rpx;
  71. width: 200rpx;
  72. height: 40rpx;
  73. font-size: 25rpx;
  74. transform: rotate(45deg);
  75. background-color: red;
  76. color: #ffffff;
  77. }
  78. }
  79. .payInfo {
  80. width: 650rpx;
  81. background-color: #ffffff;
  82. border-radius: 25rpx;
  83. margin: 50rpx auto;
  84. padding-bottom: 40rpx;
  85. .continue {
  86. text-align: left;
  87. padding: 25rpx;
  88. margin-bottom: 20rpx;
  89. .grey {
  90. margin-left: 15rpx;
  91. font-size: 23rpx;
  92. color: #a3a3a3;
  93. }
  94. }
  95. .infoBox {
  96. display: flex;
  97. justify-content: space-between;
  98. align-items: center;
  99. flex-flow: row wrap;
  100. padding: 0 25rpx;
  101. .item {
  102. width: 180rpx;
  103. height: 180rpx;
  104. background-color: #f2f5fa;
  105. border-radius: 20rpx;
  106. padding: 20rpx;
  107. margin-bottom: 30rpx;
  108. box-sizing: border-box;
  109. border: 5rpx solid #f2f5fa;
  110. transition: all 0.4s;
  111. &.active {
  112. border: 5rpx solid #666666;
  113. }
  114. .remainDays {
  115. font-size: 38rpx;
  116. font-weight: 600;
  117. margin-bottom: 10rpx;
  118. .days {
  119. font-size: 28rpx;
  120. margin-left: 10rpx;
  121. }
  122. }
  123. .salePrice {
  124. font-size: 25rpx;
  125. margin-bottom: 10rpx;
  126. .lightHigh {
  127. color: #ff0000;
  128. }
  129. }
  130. .price {
  131. font-size: 22rpx;
  132. text-decoration: line-through;
  133. color: #727272;
  134. }
  135. }
  136. }
  137. }
  138. .btn {
  139. display: inline-block;
  140. margin-top: 20rpx;
  141. border-radius: 30rpx;
  142. }
  143. }
  144. }